body{
    margin: 0;
    padding: 0;
}
.all{
    overflow-x: hidden !important;
}
.clearfix:after{
    content: '';
    display: table;
    width: 100%;
    clear: both;
}
.container{
    max-width: 1200px;
    width: 100vw;
    margin: 0 auto;
    min-height: 100vh;
}
header{
    width: 100%;
    background: url("../img/clear.jpg") no-repeat top center ;
    background-size: cover;
    padding: 1px;
}
.logo{
    padding: 0;
    margin-top: 2vh;
    display: flex;
    justify-content: center;
}
.logo a{
    decoration: none;
    text-decoration: overline underline;
    font-size: 4em;
    color: rgb(1, 26, 101);
    font-family: 'Oswald', sans-serif;
}
nav{
    width: 80%;
    margin: 0 auto;
    margin-top: 15vh;
    }
.topnav{
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.topnav li{
    display: inline-block;
    text-align: center;
    }
.topnav li:last-child{
    position: absolute;
}
.topnav a{
    font-size: 3em;
    color: rgb(1, 26, 101);
    margin-top: 1em;
    font-weight: bold;
    text-decoration: none;
}
.topnav a:hover{
    border: 0.2em solid rgb(1, 26, 101);
    border-radius: 20px;
}
.topnav .icon{
    display: none;
}
h1{
    padding-top:10vh;
    margin: 0 auto;
    text-align: center;
    font-size: 15vh;
}
.active{
    background: rgba(47, 112, 24, 0.27) url("../img/cycle.png") no-repeat top center;
    background-size:contain;
}
.active h2{
    font-size: 5vw;
    text-align: center;
}
.active h2 a{
    font-family: Arial sans-serif;
    color: black;
}
.active h2 b{
    font-size: 5vw;
    color: rgb(45, 44, 10);
}
.about{
    background: url("../img/about.jpg") no-repeat top center;
    background-size: cover;
}
.about h1{
    color: #000;
}
.about p{
    color:#f8ff6b;
    font-size: 10vh;
    text-align: center;
    padding-top: 5vh;
}

.contact{
    background: rgb(120, 168, 170);
}
.contact p{
    font-size: 8vh;
    text-align: center;
    display: block;
}
.contact h1{

}
.contact p{
}
.contact span{
    font-size: 8;
    font-style: "Oswald" sans-serif;
    font-weight: bold;
}
.contact li{
    font-size: 8vh;
    text-align: center;
    display: block;
    text-decoration: none;
    margin-left: -3vw;
}
.contact li:nth-child(2){
    padding: 1vw;
}
.contact li:last-child{
    margin-bottom: 0;
}

.contact h1{
}
footer{
    background: rgb(46, 90, 246);
    font-size: 4vh;
    text-align: center;
    bottom: 0;
}
@media screen and (max-width: 1200px) {
    body{
        max-width: 100vw;
    }
    div .logo{
        font-size:3vw;
    }
    .topnav{
        display: block;
        margin: 0;
        padding: 0;
    }
    .topnav a{
        font-size: 10vw;
    }
    .topnav li:not(:first-child):not(:last-child){
        display: none;
    }
    .topnav li:not(:last-child){
    font-size: 2.5vw;
    display: block;
    }
    .topnav a:first-child{
        display: block;
    }
    .topnav li:last-child{
        display: block;
        position: relative;
        text-align: center;
    }
    .topnav li .bottom{
        width: 0;
        height: 0;
        display: inline-block;
        margin-right: 7vw;
    }
    .topnav li .bottom a{
        border: 3vh solid transparent;
        border-top-color: rgba(47, 112, 24, 0.89);
        border-bottom: 0;
    }
    .topnav a:hover:not(:last-child){
        border: 0.2em solid rgba(47, 112, 24, 0.89);
        border-radius: 10px;
    }
    .topnav.responsive li:not(:last-child){
        display: block;
        position: relative;
        text-align: center;
    }
    .topnav.responsive a:hover{
        border: 0.2em solid rgb(1, 26, 101);
        border-radius: 10px;
        }
    .topnav.responsive li a{
        display: block;
        color: rgba(47, 112, 24, 0.89);
        margin: 0;
        padding: 5%;
    }
    .topnav.responsive .bottom a{
        width: 0;
        height: 0;
        border: 3vh solid transparent;
        border-bottom-color: rgb(1, 26, 101);
        border-top: 0;
    }
    h1{
        font-size: 10vw;
    }
    .active{
        height: 100%;
    }
    #fire_descr b{
        font-size: 4vh;
        text-align: center;
    }
    .active h2{
        font-size: 4vh;
        text-align: center;
    }
    .about{
        height: 100%;
    }
    .about a p{
        font-size: 7vw;
    }
    .contact{
        height: 100%;
        display: block;
    }
    .contact li{
        font-size: 7vw;
        margin-left: -8vw;
    }
    .contact p{
        font-size: 7vw;
    }
    .name_org{
        font-size: 10vw;
    }
}
@media screen and (max-width: 768px){
    .container{
        min-height: 100vh;
    }
    .contact li{
        font-size: 5vw;
    }
    footer{
        font-size: 2vh;
    }
}