@font-face {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 700;
    font-style: normal;
}
* {
    font-family: "aktiv-grotesk", sans-serif;
}
.wrap{
    height: 20vh;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 1;
}
.header{
    width: 85%;
    display: flex;
    margin: auto;
    height: 20vh;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 1;
}
.header__logo{
    margin: auto 0;
}
.logo__img{
    object-fit: cover;
    width: 300px;
    height: auto;
}
.logo__img:hover, .header__ma-logo:hover{
    cursor: pointer;
}
.header__nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50%;
    margin: auto 0;
}
.nav__part{
    font-size: 22px;
    color: #000;
    text-decoration: none;
    transition: ease-in-out .2s;
}
.nav__part:hover{
    -webkit-transform: scale(.95);;
    -moz-transform: scale(.95);;
    -ms-transform: scale(.95);;
    -o-transform: scale(.95);;
    transform: scale(.95);;
    color: #333333;
}
.nav__part--active{
    padding: 10px 15px;
    margin: -10px -15px;
    background-color: #DD0074;
    color: #fff;
}
.nav__part--doneer{
    padding: 10px 12px;
    margin: -12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #043FA8;
    border: 3px solid #043FA8;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    transition: ease-in-out .2s;
}
.nav__part--doneer:hover{
    color: #fff;
    background-color: #043FA8;
}
.header__ma-logo{
    width: 120px;
    height: auto;
    margin: auto 0;
}
.header__menu{
    display: none;
}
.space-behind{
    padding-bottom: 20vh;
}

.footer{
    width: 100%;
    background-image: url('/img/dandelion-nature-sunlight-54300.jpg');
    background-position-y: 450px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: auto 100%;
    background-size: 100% auto;
    height: 30vh;
}
.footer__wrapper{
    width: 100%;
    height: 30vh;
    background-color: rgba(221, 0, 116, .47);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 7.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper__part{
    margin: 8vh 0 0 0;
    display: flex;
    flex-direction: column;
    width: 250px;
}
.part__title{
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}
.part__content, .wrap__content{
    color: #fff;
    margin: 5px 0;
}
.part__wrap{
    display: flex;
    flex-direction: row;
}
.wrap__contact-icons{
    display: flex;
    flex-direction: column;
    padding: 15px 10px 0 0
}
.contact-icons__icon{
    width: 20px;
    fill: #fff;
    padding: 0px;
}
.contact-icons__icon:nth-of-type(2){
    padding-top: 5px;
}
.part__media-icons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.media-icons__media-icon{
    width: 50px;
    height: auto;
    fill: #fff;
    transition: ease-in-out .2s;
}
.instagram:hover{
    fill: #DD0074;
}
.snapchat:hover{
    fill: #EBFF00;
    cursor: pointer;
}
.facebook:hover{
    fill: #043FA8;
}

.readmore--white{
    text-decoration: none;
    padding: 10px 12px;
    margin: -12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    border: 3px solid #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    transition: ease-in-out .2s;
}
.readmore--white:hover{
    background-color: #fff;
    color: #000;
}
.readmore--black{
    text-decoration: none;
    padding: 10px 12px;
    margin: -12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
    border: 3px solid #000;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    transition: ease-in-out .2s;
}
.readmore--black:hover{
    background-color: #000;
    color: #fff;
}
.readmore--blue{
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #043FA8;
    border: 3px solid #043FA8;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    transition: ease-in-out .2s;
    font-size: 22px;
    margin: 0 auto;
    padding: 15px;
}
.readmore--blue:hover{
    color: #fff;
    background-color: #043FA8;
}

@media screen and (max-width: 1515px) {
    .header__nav{
        width: 60%;
    }
}
@media screen and (max-width: 1400px) {
    .nav__part{
        font-size: 20px;
    }
    .header__nav{
        width: 55%;
    }
}
@media screen and (max-width: 1250px){
    .logo__img{
        width: 250px;
    }
    .header__ma-logo{
        width: 100px;
    }
    .header__nav{
        width: 60%;
    }
}
@media screen and (max-width: 1200px) {
    .header__nav{
        width: 60%;
    }
    .nav__part{
        font-size: 18px;
    }
    .header{
        height: 15vh;
    }
    .header__ma-logo{
        width: 85px;
    }
    .logo__img{
        width: 200px;
    }
    .wrap{
        height: 15vh;
    }
    .header{
        height: 15vh;
    }
    .space-behind{
        padding-bottom: 15vh;
    }
}
@media screen and (max-width: 1050px){
    .header__nav{
        display: none;
    }
    .header__ma-logo{
        display: none;
    }
    .header__menu{
        display: inherit;
        height: 48px;
        width: 48px;
        margin: auto 0;
        padding: 10px 10px;
        box-sizing: content-box;
    }
    .header__logo{
        margin: auto;
    }
    .logo__img{
        width: 350px;
    }
}
@media screen and (max-width: 800px){
    .footer{
        height: 60vh;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 100% auto;
    }
    .footer__wrapper{
        height: 60vh;
        flex-direction: column;
    }
    .wrapper__part{
        margin: 1em auto;
    }
}
@media screen and (max-width: 750px){
    .footer{
        background-size: 120% auto;
    }
}

@media screen and (max-width: 650px){
    .logo__img{
        width: 300px;
    }
}
@media screen and (max-width: 618px){
    .footer{
        background-size: 200% auto;
    }
}
@media screen and (max-width: 450px){
    .logo__img{
        width: 250px;
    }
}

@media screen and (max-height: 668px){
    .footer{
        height: 70vh;
    }
    .footer__wrapper{
        height: 70vh;
    }
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}