searchBoxsearchBoxsearchBoxsearchBoxsearchBoxsearchBox*{
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(rgba(1,1,1,.7), rgba(1, 1, 1, 0.6)), url("images/02.jpg");*/
background-position:center;
background-size:cover;
display:flex;
align-items:center;
justify-content:center;
color:var(--white);
position:relative;
	background-image: url("images/02.jpg")
}
.wp-apps {
    width: 75px;
    position: fixed;
    bottom: 50px;
    text-align: center;
    left: 10px;
    padding: 1px;
    z-index: 999;
    color: #fff !important;
    border-radius: 5px;
    background-color: #ffffff6b;
}
.wp-apps i {
    color: green;
    font-size: 35px;
}
.wp-apps p {
    text-align: center;
    margin: 0;
}
@media only screen and (max-width: 600px) {
	body{
	background-image: url("images/02-mob.jpg")
}
}
.enter{
	color: aliceblue;
	text-decoration: none;
}
.content{
width:70%;
text-align:center;
}

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

.content h1 {
    font-size: 4.5em;
    mix-blend-mode: overlay !important;
    color: #eeeeee1a;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
}

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

.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:var(--primary);
}


.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:var(--primary);
border:1px solid var(--primary);
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;
}

ul li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    align-items: center;
}
ul {
    display: inline-block;
    background-color: #0000009e;
    padding: 6px;
}
h1 {
  opacity: 0;
  visibility: hidden;
}
.text-wrapper {
/*   outline: 1px solid; */
  position: relative;
}
.overlay {
/*    this was just to see half the width */
  display: none;
  background: tomato;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 2;
  
}
h1 {
  font-size: 40px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
/* .word {
  left: 50% !important;
} */
.template-footer {
  position: fixed;
  bottom: 0;
  right: 0; 
  height: 2rem;
  width: 10rem;
  border-radius: 5px 0 0 0;
  background-color: #ffffba;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.6rem;
}






@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:20%;
}
.content h1{
font-size:1.5em;
}
.content h2{
position:relative;
top:-10px;
}
.content .social_icons{
position:absolute;
width:100%;
right:0vw;
bottom:1vh;
display:flex;
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%;
}
}