/* HERO */
.hero-wrap {
    background: rgb(51,51,102,.1);
    background: -moz-linear-gradient(90deg, rgba(51,51,102,0) 30%, rgba(51,51,102,0.1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(51,51,102,0) 30%, rgba(51,51,102,0.1) 100%);
    background: linear-gradient(90deg, rgba(51,51,102,0) 30%, rgba(51,51,102,0.1) 100%);
    padding: 0px;
    overflow-x: clip;
        position: relative;
    z-index: 30;
}
.hero {
    padding: 20px 20px 0;
    max-width: 1400px;
    margin: auto;
    position: relative;
}

.hero > div {
    position: relative;
    z-index: 10;

}
.hero .hero-right:before {
    content: "";
    background: url(../img/adhd-swoosh.webp);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    right: -80px;
    top: -150px;
    z-index: 1;
}
@media(max-width:1280px) {
    .hero .hero-right:before {
        width: 130%;
        height: 100%;
        right: -140px;
        top: -85px;
    }   
}
.hero .logos {
    display: flex;
    padding-bottom: 40px;
    align-content: flex-end;
    align-items: flex-end;
    gap: 20px;
    flex-wrap:  wrap;
}
.hero .logos a {
    display: inline-block;
    flex: 0 0 140px;
    margin: 0;
    vertical-align: bottom;
}
.hero .logos a:nth-of-type(1) {
    margin-left: 0;
}
.hero .logos a:nth-of-type(3),
.hero .logos a:nth-of-type(4) {
    flex:  0 0 168px;
}
.hero .logos img {
    display: block;

}
.hero-left div {
    padding-bottom: 20px;
}
.hero-right {
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
}
.hero-flex {
    display: flex;
}
.hero-flex .hero-left {
    flex: 0 0 54%;
    position: relative;
    position: relative;
    z-index: 10;
}
.hero-flex .hero-right {
    flex: 0 0 46%;
    position: relative;
    position: relative;
    z-index: 1;
}
div#rotating-hero {
    margin-top: -100px;
    position: relative;
    z-index: 100;
}
div#rotating-hero picture {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all .8s;
}
div#rotating-hero picture.active {
    opacity: 1;
    transition: all .8s;
}
div#rotating-hero picture:nth-of-type(1) {
    width: 100%;
    display: block;
    position: relative;
}
@media(max-width: 1023px) {
    .hero-right {
        display: flex;
        align-items: flex-start;
        align-content: flex-end;
    }
    .hero .logos {
        gap: 2%;
    }
    .hero .logos a,
    .hero .logos a:nth-of-type(3),
    .hero .logos a:nth-of-type(4) {
        flex:  0 0 23%;
        display: inline-block;
    }
    .hero .logos a img{
        width: 100%;
    }
    
    .hero-flex .hero-left,
    .hero-flex .hero-right {
        flex: 0 0 50%;
    }
    div#rotating-hero {
        margin-top: 0px;
    }
    .hero:before {
        background-position: bottom center;
        right: 0;
        width: 100%;
    }
    .hero .hero-right:before {
        content: "";
        background: url(../img/adhd-swoosh.webp);
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        background-position: top center;
        background-size: contain;
        background-repeat: no-repeat;
        right: 0px;
        top: 0px;
    }
}
@media(max-width: 767px) {
    .hero-flex .hero-left,
    .hero-flex .hero-right {
        flex: 0 0 100%;
    }
    .hero-flex {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .hero .logos {
        gap: 2%;
    }
    .hero .logos a,
    .hero .logos a:nth-of-type(3),
    .hero .logos a:nth-of-type(4) {
        flex:  0 0 48%;
        display: inline-block;
    }
}