*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}





body, html{

    position: relative;

    width: 100%;

    font-size: 16px;

    font-family: 'Roboto Condensed', sans-serif;

    overflow-x: hidden !important;

}



img{

    width: 100%;

    height: 100%;

    display: block;

}



picture{

    width: auto;

    height: auto;

    display: block;

    line-height: 0;

}







input[name=name]#name{

    display: none;

}





.container{

    display: flex;

}



section{

    margin: 75px 0;

}



.button{

    display: inline-block;

    border-radius: 35px;

    background-color: var(--main-color);

    padding: 15px 15px;

    color: white;

    text-decoration: none;

    box-shadow: 0 2px 10px var(--box-shadow-color);

    transition: all ease 0.25s;

}



.button:hover{

    background-color: white;

    color: var(--main-color);

}





label[for=search]{

    border: 1px solid  white;

    background-color: transparent;

    border-radius: 25px;

    padding: 2px;

    color: white;

    display: block;

    position: relative;

    width: 300px;

    height: 35px;

    margin-left: auto;

}



label[for=search] input{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-color: transparent;

    border: none;

    color: white;

    padding-left: 8px;

}



header{

    position:absolute;

    top: 0;

    left: 0;

    width: 100%;

}



.main-nav{

    position: relative;

    display: flex;

    margin: auto auto;

    width: 90%;

    align-items: center;

    justify-content: space-between;

}



.main-logo{

    width: 200px;

}





.main-nav ul{

    display: none;

    list-style: none;

}



.main-nav li{

    border-radius: 45px;

    box-shadow: 0 2px 10px var(--box-shadow-color);

    width: 250px;

    height: 67px;

    display: flex;

    align-items: center;

    font-weight: bold;

    text-transform: uppercase;

    margin-left: 15px;

    justify-content: center;

    transition: all ease 0.25s;    

    cursor:pointer;

}



.main-nav a{

    text-decoration: none;

    color: var(--text-color);

}



.main-nav li:hover{

    background-color: var(--main-color);

}



.burger{

    position: absolute;

    top: 40px;

    right: 5%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 60px;

    height: 35px;

    z-index: 10;

    cursor: pointer;

}



.burger .line{

    width: 100%;

    background-color: var(--main-color);

    height: 5px;

    border-radius: 5px;

    transition: all ease .5s;

}



.burger.active .line{

    background-color: white;

}



h2, h1{

    color: var(--main-color);

    margin-bottom: 50px;

}



p{

    line-height: 1.3em;

    color: var(--text-color);

}



footer{

    padding-bottom: 50px;

}



footer .container:first-of-type{

    display: flex;

    font-weight: bold;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

}



footer .container:first-of-type div{

    margin-top: 25px;

}



footer picture{

    width: 100%;

}



footer .container:first-of-type a, footer .container:first-of-type p{

    text-decoration: none;

    color: black;

    display: block;

    font-size: 1em;

}



footer .container:first-of-type .tel{

    font-size: 2em;

}



footer .container:nth-of-type(2){

    display: flex;

    justify-content: space-between;

    width: 90%;

    margin: 40px auto;

    flex-direction: column;

    text-align: center;

}





.mobile-menu{

    position: fixed;

    background-color: var(--main-color);

    width: 100vw;

    height: 100vh;

    padding-top: 100px;

    list-style: none;

    left: -100vw;

    top: 0;

    transition: all ease 0.5s;

}



.mobile-menu.active{

    left: 0;   

}





.mobile-menu li{

    font-size: 2em;

    margin: 40px 0 40px 100vh;

    display: none;

    opacity: 0;

    width: 100%;

    transition: all ease 0.25s;

}



.mobile-menu.active li.block{

    display: block;

}



.mobile-menu.active li.block.active{

    opacity: 1;

    margin: 40px 0 40px 5%;

}





.mobile-menu a{

    text-decoration: none;

    color: black;

    text-transform: uppercase;

    font-weight: bold;

}





@media only screen and (min-width:500px) {

    

}



@media only screen and (min-width:768px) {

    

    

}



@media only screen and (min-width: 1024px) {



    .burger{

        display: none;

    }



    .main-logo{

        width: auto;

    }



    .main-nav ul{

        display: flex;

    }



    .main-nav li{

        border-radius: 45px;

        width: 160px;

        height: 50px;

        margin-left: 15px;

        font-size: 0.9em;

    }





    footer .container:nth-of-type(2){

        flex-direction: row;

    }



    footer picture{

        width: auto;

    }

    

    footer .container:first-of-type div{

        margin-left: 60px;

    }

   

}



@media only screen and (min-width: 1280px) {

    

    .main-nav li{

        border-radius: 45px;

        width: 200px;

        height: 50px;

        margin-left: 15px;

        font-size: 1em;

    }

}



@media only screen and (min-width: 1500px) {

    .main-nav li{

        border-radius: 45px;

        width: 250px;

        height: 67px;

        margin-left: 15px;

    }

 

}



@media only screen and (min-width: 1700px) {

    

}



@media only screen and (min-width: 1920px) {

    

}