*{
box-sizing:border-box;
}

:root{
--white:#FFF;
--primary:#5693d5;
}
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden !important;
    font-family: 'Source Sans 3', sans-serif !important;
    background: linear-gradient(rgb(1 1 1 / 31%), rgb(1 1 1 / 31%)), url(background2.png);
    background-size: cover;
    display: flex;
    background-position: right;
    align-items: center;
    justify-content: center;
    color: var(--white);
    position: relative;
}
.content {
    width: 70%;
    text-align: center;
}

.content .logo{
width:20%;
position:absolute;
top:1rem;
left:2vw;
}

.content h1 {
    font-size: 6em;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
}

.content h2{
position:relative;
top:-30px;
font-weight:600;
}

.content .social_icons{
position:fixed;
right:2vw;
bottom:2vh;
}

.content .social_icons:before{
content:"";
width:1px;
height:100%;
background-color:var(--white);
position:absolute;
top:-100%;
}

.content .social_icons a{
margin:10px 0px;
color:var(--white);
display:block;
text-decoration:none;
font-size:1.5em;
transition:0.5s;
}

    .content .social_icons a:hover {
        color: #f5960e;
    }


.arrow {
text-align: center;
margin: 1% 0;
}
.arrow .fa{
color:var(--white);
font-weight:200;
text-decoration:none;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}


.content .button{
position:relative;
top:-10px;
}

.searchBox {
position: absolute;
top: 50%;
left: 50%;
transform:  translate(-50%,50%);
border-radius: 40px;
padding: 5px 10px;
display:flex;

}

.searchBox:hover > .searchInput {
width: 240px;
padding:10px;
}

.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}

.searchBox:hover{
background: #2f3640;
}

    .searchBox:hover > .searchButton:hover {
        background-color: #f5960e;
        border: 1px solid #f5960e;
        color: var(--white);
    }

.searchButton {
color: white;
float: right;
width: auto;
padding:10px 20px;
border-radius:40px;
background:transparent;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
border:0;
font-style:normal !Important;
font-weight:600;
text-align:center;
border:1px solid var(--white);
}

.searchInput {
border:none;
background: none;
outline:none !important;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
width: 0px;
}

@media screen and (max-width: 1020px) {
.content h1{
font-size:2em;
}
.content h2{
position:relative;
top:-10px;
}
}

@media screen and (max-width: 820px) {
.content{
width:100%;
padding:1rem;
}
.content .logo{
width:29%;
}
.content h1{
font-size:45px;
}
.content h2{
position:relative;
top:-10px;
}
    .content .social_icons {
        position: absolute;
        width: 100%;
        right: 0vw;
        bottom: 1vh;
        display: flex;
        top: 560px;
        align-items: center;
        justify-content: center;
    }

.content .social_icons a{
margin:0 15px;
}

.content .social_icons:before{
content:"";
width:0px;
height:0%;
top:00%;
}

.searchBox:hover > .searchInput {
max-width:90%;
width: 90%;
padding: 5px 6px;
}
.searchBox:hover > .searchButton {
font-size:13px;
white-space:nowrap;
}
.searchBox:hover{
display:flex;
width:100%;
}
}
@media (max-width: 480px) {
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        font-family: 'Source Sans 3', sans-serif !important;
        background: linear-gradient(rgba(1,1,1,.7), rgba(1, 1, 1, 0.6)), url('background2.png');
        background-size: auto;
        display: flex;
        background-position: top;
        align-items: center;
        justify-content: center;
        color: var(--white);
        position: relative;
    }
    .content .logo {
        width: 50%;
        position: absolute;
        top: 38px;
        left: 2vw;
    }
}
.txtfliter {
    filter: drop-shadow(2px 2px 2px #2d69b2);
    color: #5fc2d5;
}
.fa.fa-twitter::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    background-position: center 3px;
}