html{
    font-size: 16px;
}

#main{
    height: 100vh;
    padding-top: 1.5%;
    overflow-y: scroll;
    color: #000000d9;
    position: relative;
}

#bottomNavWrap{
    display: none;
}


#top{
    height: 11%;
    display: flex;
    padding: 0 10%;
}

.logo{
   
    flex:2;
    display: flex;
    cursor: pointer;
}

.logo i{

    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.logo i:first-of-type{
    width: 30%;
    background-image: url('/img/logo.png');
}

.logo i:last-of-type{
    width: 70%;
    background-size: 55%;
    background-position: left center;
}

.searchWrap{
   
    flex: 6;
    position: relative;
    display: flex;
    align-items: center;
}

.searchWrap input{
    border:none;
    box-shadow: 1px 1px 5px #01005856;
    border-radius: 12px;
    width: 90%;
    height: 65%;
    padding: 1% 5%;
    font-size: 1.2rem;
    padding-right: 12%;
    font-family: 'm';
}
.searchWrap button{
    position: absolute;
    width: 8%;
    height: 55%;
    top: 22%;
    right:11%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border:none;
    background-color: transparent;
    background-image: url('/img/search.png');
}

.lang{
    flex:2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.lang input{
    display: none;
}

.lang label{
    margin-bottom: 3%;
    position: relative;
    padding: 2% 3%;
    padding-left:35%;
    font-size: 1rem;
    color:#010058;
    font-family: 'm';
    cursor: pointer;
}

.lang input:checked + label{
    font-family: 'b';
    border: 2px solid #010058;
       padding: 2% 3%;
}

.lang input:checked + label::before{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    left: -40px;
    bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/img/check.png');
}

#navWrap{
    margin-top: 2%;
    border:1px solid rgba(0, 0, 0, 0.105);
    border-left: none;
    border-right: none;
    height: 9%;
    display: flex;
    font-size: 1.2rem;
    font-family: 'm';
    padding: 0 10%;
    position: relative;
}
#navWrap nav i.color{
	color:navy;
	font-family: 'b';
}
#navWrap nav{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 4%;
    cursor: pointer;
}
#navWrap nav:first-of-type{
    padding: 0;
    padding-right: 4%;
}
#navWrap nav:hover{
   
   color:navy;
   font-family: 'b';
	
}

.login{
    position: absolute;
    right: 10%;
    padding: 0;
}



footer{
    padding: 2% 10%;
    background-color: #020139;
    color: rgba(255, 255, 255, 0.566);
    font-family: 'r';
}


.footerInfo h2{
    padding: 2vh 0;
    font-size: 1.7rem;
    font-family: 'b';
}

.footerInfo h3{
    padding: 0.3vh 0;
    font-family: 'r';
    font-size: 1rem;
}

.footerInfo h3:last-of-type{
    margin-top: 2vh;
    font-size: 0.9rem;
   
}



@media (min-width:600px) and (max-width:900px) {
    html{
        font-size: 14px;
    }
    
    .searchWrap{
        flex: 5;
    }
    
    footer{
        padding: 4% 10%;
    }

}



@media (max-width:600px) {
    html{
        font-size: 12px;
    }
    #top{
        padding:1% 2%;
        border-bottom: 1px solid #00000014;
    }
    .logo i:first-of-type{
        width: 25%;
    }
    #navWrap{
        display: none;
    }
    #bottomNavWrap{
        display: flex;
        position: fixed;
        width: 100%;
        height: 10%;
        bottom: 0;
        background-color: white;
        padding: 0 5%;
        font-size: 1.3rem;
        font-family: 'sb';
        z-index: 999;
        border-top:1px solid #0000001a;
    }
  
    #bottomNavWrap nav{
        flex: 1;
        display: flex;
        flex-direction:column;
    }
    
     #bottomNavWrap nav em{
     	height: 70%;
     	background-position: center center;
     	background-repeat: no-repeat;
     	background-size: 35%;
     }
     
     
      #bottomNavWrap nav i{
      	height: 30%;
      	text-align: center;
      }
  
    .lang{
        flex: 0.9;
    }
    
    .searchWrap{
      display: none;
    }

    footer{
    	padding: 2% 5%;
        padding-bottom: 30%;
    }

}