/* STRUCTURE OF THE DOCUMENT
    - variables
    - basic settings
    - utilities
    - basic page structure (header, footer...)

    - HOME PAGE
    - ABOUT US PAGE
    - INVESTMENT FOCUS PAGE
    - CASE STUDIES PAGE
    - MANAGEMENT TEAM PAGE
    - CONTACT PAGE
    - LEGAL PAGE
    - JOBS PAGE */

    @charset "UTF-8";
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");


    :root{
        --secondary1: #ff8455;
        --secondary2: #f6e6c7;
        --lighterOrange: #f8eedb;
        --tertiary:rgb(240, 236, 233);

        --darkBlue: #1c2e3a;
        --lightBlue:  #c0d6e8;

        --mFont:'Open Sans', sans-serif;    
        --hFont: 'Open Sans', sans-serif;
    }

    /*BASIC SETTINGS*/

    html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    *, *:before, *:after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }

    body{
        font-family: var(--mFont);
        font-weight: 400;
        overflow-x: hidden;
        position: relative;
    }

    main{
        position: relative;
    }

    a{
        color: var(--darkBlue);
    }

    ul{
        list-style-type: none;  
    }

    

    h1, h2, h3, h4, h5 {
        font-family: var(--hFont);
    }
    h1{
        text-align: center;
        color: white;
        font-size: 40px;
    }
    
    p{
        font-weight: 300;
        line-height: 1.5;
    }

    /*UTILITIES*/

    .blue-txt{
        color: var(--darkBlue);
    }

    .bold{
        font-weight: bold;
    }
    
    .wgt600{
        font-weight: 600;
    }

    .wgt700{
        font-weight: 700!important;
    }

    .wgt500{
        font-weight: 500!important;
    }

    .lazy{
        opacity: 0;
        transition: opacity 2s ease;
    }

    /************************REUSABLE BLOCKS**************************/

    /*Page title banner (text settings are h1 settings)*/
    .title-banner{
        height: 180px;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /**/
    .title-banner--about{
        background-image: url(../img/banner-about-train.webp);
        background-position: 0 -480px;
    }

    @media screen and (max-width: 1100px){
        .title-banner--about{
            background-position: 0 -300px;
        }
    }

    @media screen and (max-width: 900px){
        .title-banner--about{
            background-size: 130%;
            background-position: 50% -200px;
        }
    }

    @media screen and (max-width: 500px){
        .title-banner--about{
            background-size: 130%;
            background-position: 50% -100px;
        }
    }

    /**/
    .title-banner--investment{
        background-image: url(../img/banner-investment-welding.webp);
        background-position: 20% 70%;
        background-size: 110%;
    }

    @media screen and (max-width:900px) {
        .title-banner--investment{
            background-position: 20% 40%;
        }
        
    }

    /**/
    .title-banner--cases{
        background-image: url(../img/banner-case-studies-laptop.webp);
        background-position: 50% 35%;
    }

    /**/
    .title-banner--team{
        background-image: url(../img/banner-team-strategy.webp);
        background-position-y: 6%;
        background-size: 107%;
        background-position-x: 99%;
    }

    /**/
    .title-banner--contact{
        background-image: url(../img/banner-contact-gear.webp);
        background-position-y: 47%;
    }

    /**/
    .title-banner--legal{
        height: unset;
        padding: 20px;
        background-color: var(--darkBlue);
    }


    

    /*gray banner*/

    .gray-banner{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 50px 20px;
        position: relative;
        background-color:var(--tertiary) ;
        font-size: 18px;
    }

    .gray-banner__txt{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .gray-banner__link{
        color: var(--darkBlue);
        font-weight: 600;
    }


    .gray-banner__txt--jobs{
        max-width: 540px;
        margin: 0 auto;
        background-color: var(--tertiary);
        text-align: center;
        font-size: 20px;  
    }

    .gray-banner__email--jobs{
        margin: 0 auto;
        margin-top: 34px;
        width: 231px;
    }

    .gray-banner--team{
        padding-bottom: 35px;
        gap: 20px;
    }

    .gray-banner__txt--team {
        flex-direction: column;
        align-items: flex-start;
        max-width: 500px;
    }

    .gray-banner__p--team {
        max-width: 450px;
    }

    .gray-banner__span--team{
        font-size: 20px;
    }

    .gray-banner__btn--team {
        margin-left: 0;
    }

    @media screen and (max-width: 900px) {

        .gray-banner{
            padding: 40px;
        }

        .gray-banner__txt{
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .gray-banner--team{
            flex-direction: column;
            padding: 50px 35px 35px 35px;
        }

        .gray-banner__span--team{
            margin: 0 auto;
        }

    }

    /*banner with background image*/

    .img-banner{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-image: url(../img/banner-contact-laptop.webp);
        background-position-y: 65%;
        background-size: 100%;  
    }

    .img-banner__txt{
        color: var(--darkBlue);
    }

    .img-banner__btn{
        margin-left: 40px;
        height: 200px;
    }

    @media screen and (max-width:900px) {
        .img-banner{
            flex-direction: column;
            padding: 20px;
            text-align: center;

        }

        .img-banner__btn{
            margin-left: 0;
            height: 50px;
        }
    }

/*button with blue border - type 1*/

.btn1{
    margin-left: 40px;
    padding: 20px 30px;
    color: var(--darkBlue);
    border-radius: 4px;
    border: 3px solid var(--darkBlue);
    transition: all .3s ease;
    text-align: center;
    line-height: 1.4;
    max-width: 200px;
}

.btn1:hover{
    background-color: var(--darkBlue);
    color: white;
    border: 3px solid var(--darkBlue);
    transform: scale(1.02);
}

@media screen and (max-width: 900px){
    .btn1{
        margin-left: 0;
        margin-top: 10px;
    }
}

/*button with arrow - type 2*/

.btn2{
    display: flex;
    align-items: center;
}

.btn2__txt{
    margin-right: 20px;
    font-weight: 700;
    color: var(--darkBlue);
    font-size: 20px;
}

.btn2__icon{
    flex-shrink: 0;
    margin-right: auto;
    border-radius: 50%;
    position: relative;
    color: var(--darkBlue);
    border: 2px solid var(--darkBlue);
    transition: all .5s ease;
    height: 30px;
    width: 30px;   
}

.btn2__icon:hover{
    color: white;
}

.btn2__arrow{
    font-size: 1.5rem;
    color: var(--darkBlue);
    position: absolute;
    right: 3%;
    top: 0;
    transition: all .5s ease;
}

@media (hover:hover) and (pointer: fine) {
    .btn2__icon:hover i{
        transform: translateX(15px);
        opacity: 1;
    }
}


@media screen and (max-width: 900px) {
    .btn2__txt {
        font-size:  17px;
    }
}


/*images slider*/
.container{
    height: 100%;
}
.owl-carousel{
    position: relative;
    height: 100%;
}
.owl-stage-outer,
.owl-stage,
.owl-item,
.owl-item img{
    height: 100%;
}
.owl-item img{
    object-fit: cover;
}
.owl-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;width: 100%;
    height: 100%;
    margin-top: 0;
    position:absolute;
    top: 0;  
    z-index: 99;
}
.owl-nav button.owl-prev[type="button"] ,
.owl-nav button.owl-next[type="button"]{
    padding-bottom: 10px!important;
    width: 40px;    
}
.owl-nav .owl-prev:hover ,
.owl-nav .owl-next:hover{
    cursor:pointer;
}
.owl-prev span , .owl-next span{
    font-size: 50px;
    color: rgba(255, 255, 255);
}
.owl-theme .owl-nav [class*="owl-"]:hover{
    background: rgba(255, 255, 255, 0.699);
}
.owl-theme .owl-nav [class*='owl-']:hover{
    background: rgba(29, 27, 25, 0.322);
}


/*******************BASIC STRUCTURE************************/

/*HEADER*/
header{
    position: relative;
    height: 90px;
    display: flex;
    align-items: center; 
}
.logo{
    width: 150px;
    margin-left: 70px; 
    position: absolute;
    top: 18px;
}
@media screen and (max-width: 670px) {
    .logo{
        width: 120px;
        margin-left: 20px;
        top: 20px;
    } 
}
/*navigation menu*/
.top-nap{
    display: flex;
}

.top-nav__list{
    display: flex;
}

.top-nav__item{
    padding: 20px;
    position: relative;
}

.top-nav__link{
    font-family: var(--mFont);
    font-weight: 300;
    color: var(--darkBlue);
}

/*desktop navigation*/
.top-nav--desktop{
    margin-right: 120px;
    margin-left: auto;
}

.top-nav__underline{
    width: 100%;
    height: 12px;
    position: absolute;
    bottom: -30px;
    left: 0;
    background-color: var(--darkBlue);
    transition: transform .5s ease;
}

.top-nav__item:hover .top-nav__underline{
    transform: translateY(-13px);  
}

@media screen and (max-width: 1250px){
    .top-nav--desktop{
        display: none;
    }
}

/*mobile nav*/
.top-nav--mobile{
    display: none;   
}

.top-nav__burger{
    font-size: 40px;
    color: var(--darkBlue);
    transition: transform .5s ease;
    cursor: pointer;
}

.top-nav__burger:hover{
    transform: scale(1.1);
}

@media screen and (max-width: 1250px){
    
    .top-nav--mobile{
        display: block;
        margin-right: 20px;
        position: absolute;
        top: 25px;
        right: 10px;
        z-index: 999;
        overflow: visible;
    }

    .top-nav__list--mobile{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 50vw;
        padding: 50px 0px;
        position: absolute;
        right: -800px;
        top: -30px;
        z-index: 999;
        background-color: white;
        transition: right 1s ease;      
    }

    .top-nav__list--mobile.show-menu{
        right: -30px;
        top: -30px;
        transition: right 1s ease;  
    }

    .top-nav__item--mobile{
        width: 60%;
        padding: 20px 0 ;
        text-align: center;
        border-bottom: 1px solid var(--lightBlue);
        transition: transform .5s ease;   
    }

    .top-nav__close{
        position: absolute;
        top: 30px;
        left: 30px;
        font-size: 30px;
        color: var(--darkBlue);
        cursor: pointer;
    }
}

@media screen and (max-width:1200px) {
    .top-nav__list--mobile{
        width: 60vw;
    }
}

@media screen and (max-width: 511px) {
    .top-nav__list--mobile{
        width: 100vw;
    }
}

/*language selector*/
.language-switch{
    margin-right: 35px;
    position: relative;
    cursor: pointer;
}

.language-switch__list{
    height: 42px;
    position: absolute;
    top: -20px;
    left: -70px;
    z-index: 9;
    margin: 0;
    padding: 0;
    border: 2px solid var(--secondary2);
    border-radius: 3px;
    overflow: hidden;
    transition: height .5s ease;
}

.language-switch__item{
    width: 68px;
    height: 39px;
    padding: 10px 10px 10px 13px;
    background-color: white;
    font-weight: 300;
}

.language-switch__arrow{
    width: 16px;
    margin-left: 3px;
    transform: translateY(2px);
    transition: transform .5s ease;
}

.language-switch .language-switch__list:hover{
    height: calc(39px * 2);
}

.language-switch:hover .language-switch__arrow{
    transform: rotate(180deg);
}

@media screen and (max-width: 1250px) {  
    .language-switch {
        position: absolute;
        top: 45px;
        right: 120px;
    }

    .language-switch__list{
        left: 0;
    }
    
}

/***FOOTER**/
.footer{
    display: flex;
    padding: 75px;
    min-height: 20vh;
    background-color: var(--darkBlue);
    align-items: flex-start;
    justify-content: center;
}

.footer__logo{
    width: 150px;
}

.footer__list{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-left: 70px!important;
    border-left: 1px solid white ;
}

.footer__item{
    padding-bottom: 20px;
}

.footer__item--hidden{
    visibility: hidden;
}

.footer__item:hover .footer__link{
    text-decoration: underline;
}

.footer__link{
    color: white;
    font-weight: 300;
}

@media screen and (max-width:900px) {

    .footer{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .footer__list{
        margin: 40px 0 0 0!important;
    
        padding-left: 0;
        padding-top: 30px;
        border-left: none;
        border-top: 1px solid white ;

    }
}


/**************************HOME PAGE********************************/
/*hero banner*/
.hero{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 70vh;
    position: relative;
    background-color: var(--darkBlue);
    overflow: hidden;
}
@keyframes animationIconHero{
    from{opacity: 0;width: 380px;}
    to{opacity: 1; width: 400px;}
}
.hero__icon{
    width: 380px;
    position: absolute;
    top: 17%;
    right: 18%;
    z-index: 1;
    opacity: 0;
    animation: animationIconHero 2s ease;
    animation-fill-mode: forwards;
}


@media screen and (max-width: 1200px){
    .hero__icon{
        top: 22%;
    }
    @keyframes animationIconHero{
        from{opacity: 0;width: 250px;}
        to{opacity: 1; width: 300px;}
    }
}
@media screen and (max-width:900px) {
    .hero__icon{
        display: none;
    }
}
.hero__lines{
    height: 100%;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
    margin-left: auto;
}
.hero__line{
    width: .5px;
    border-radius: 5px;
    background-color: var(--lightBlue); 
    opacity: 1;
}
@media screen and (max-width:900px) {
    .hero__lines{
        width: 180%;
        margin-left: -170px;
    }   
}
.hero__txt-container{
    height: 100%;
    width:50%;
    position: absolute;
    left: 70px;
    top: 0;
    padding: 75px;
    display: flex;
    align-items: center;
    margin: auto;
}
.hero__txt-wrapper{
    margin-top: -20px;
}
.hero__txt{
    width: 500px;
    margin:0;
    margin-left: -60px;font-family: var(--hFont);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.5; 
    color: white;
    opacity: 0;
    animation: textAnimation 2s ease;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}
.hero__txt--orange{
    color: var(--secondary1);
    font-weight: 800;
    margin-left: 0px;
}
@keyframes textAnimation {
    from{opacity: 0; margin-left: -60px;}
    to{opacity:1; margin-left: 0;}
}
.hero__underline{
    height: 10px;
    width: 0%;
    margin-top: 10px;
    margin-left: -60px;background-color: var(--secondary1) ;   
    animation: underlineAnimation 2s ease;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
@keyframes underlineAnimation{
    from{margin-left: -60px; width: 0%;}
    to{margin-left: 0; width: 92%;}
}
@media screen and (max-width: 1200px){
    @keyframes underlineAnimation{
        from{margin-left: -60px; width: 0%;}
        to{margin-left: 0; width: 96%;}
    } 
}
@keyframes underlineAnimationMobile{
    from{margin-left: -60px; width: 0%;}
    to{margin-left: 0; width: 100%;}
}
@media screen and (max-width: 1200px){
    .hero__txt-containter{
        padding-left: 0;
    }
    .hero__txt{
        width: 350px;
    }
}
@media screen and (max-width:900px) {
    .hero__txt-container{
        width: 100%;
        padding-left: 75px;
        left: 0;
        display: flex;
        justify-content: center;
    }
    .hero__txt{
        width: 80vw;   
    }
    .hero__txt-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero__underline{
        animation: underlineAnimationMobile 2s ease;
        animation-delay: .5s;
        animation-fill-mode: forwards;
    }
}

/*home page sections*/

.home-section{
    height: 400px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.home-section__txt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;width: 50%;
    padding: 75px; 
}
.home-section__title{
    font-size: 35px;
    color: var(--darkBlue);
    margin-top: 0;
}
.home-section__img{
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 50%;
}
.home-section__txt--investment{
    order: 1;
}
@media screen and (max-width: 900px) {
    .home-section{
        flex-direction: column;
        height: unset;
    }
    .home-section__txt{
        width: 100%;
        padding: 50px;
    }
    .home-section__img{
        width: 100%;
        height: 300px;
    }
    .home-section__txt--investment{
        order: 0;
    }   
}


/****************************ABOUT US******************************/
/*animations injected with javascript*/
@keyframes slideInAnimation {
    from{margin-left: -40px}
    to{margin-left:0}   
}

/**/

.about-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 80px 200px 70px 200px;
}

@media screen and (max-width:900px) {
    .about-content{
        flex-direction: column;
        padding: 60px 40px;
        gap: 0;
    }

    
}

/*sections with text and icon*/
.txt-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-bottom: 0;
    padding-bottom: 50px;
}

.txt-icon__icon{
    width: 150px;
}

.txt-icon__txt-wrapper{
    max-width: 360px;
}

.txt-icon__txt{
    width: 100%;
    padding-bottom: 10px;
    margin: 0;
}

.iberia-svg-text{
    width: 92%;
    margin-bottom: 17px;
}

.txt-icon__underline{
    height: 10px;
    width: 0%;
    margin-top: 10px;
    background-color: var(--secondary2);
}

@keyframes aboutUnderlineAnimation{
    from{margin-left: -60px; width: 0%;}
    to{margin-left: 0; width: 100%;}
}

@media screen and (max-width:900px) {
    .txt-icon{
        flex-direction: column;
        gap: 50px;
        margin-bottom: 20px;
        padding-bottom: 22px;
    }

    .txt-icon--first{
        margin-top: 15px;
    }

    .txt-icon__txt{
        width: 100%;
    }

    .iberia-svg-text{
        margin-top: 0;
    }

    .txt-icon:first-of-type .txt-icon__icon,
    .txt-icon:nth-of-type(3) .txt-icon__icon{
        order: -1;
    }
}


/********************INVESTMENT FOCUS************************/

.investment-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
    margin: 70px auto;
}

.investment__intro{
    margin-bottom: 35px;
}

.investment__criteria{
    position: relative;
}

.investment__img{
    width: 280px;
    position: absolute;
    right: -80px;
    top: 30px;
    opacity: 1;
}

.spanish-page .investment__img {
    top: 90px;
}

.investment__list{   
    padding: 0;
    margin: 0;
    margin-right: 215px;
}

.spanish-page .investment__list {
    margin-right: 250px;
}

.investment__item{
    padding-bottom: 20px;
    position: relative;
    font-size: 15px;
    font-weight: 400;
    color: var(--darkBlue);
    line-height: 1.5;
}

.investment__marker{
    color: var(--secondary2);
    font-size: .6rem;
    position: absolute;
    left: -30px;
    top: 12%;
}

@media screen and (max-width:900px){
    
    .investment__intro{
        width: 90%;
        padding: 0px 25px;
    }
    
    .investment__criteria{
        width: 90%;
        padding: 0 25px;
    }

    .investment__img{
        position: static;
        margin: 40px auto 0 auto;
    }

    .investment__list{
        margin-right: 0;
    }

    .spanish-page .investment__list{
        margin-right: 0px;
    }

    .investment__item{
        max-width: unset;
    }
}

@media screen and (max-width:500px){
    .investment__intro{
        width: 90%;
    }

    .investment__criteria{
        width: 90%;
    }

    .investment__marker{
        left: -24px;
    }
}



/*************************CASE STUDIES***************************/

.cases-content{  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 50px;
    row-gap: 50px;
    margin: 50px;    
}

@media screen and (max-width: 900px){
    .cases-content{
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        margin: 20px;
    }
}

.case{
    position: relative;
}

.case__name{
    padding: 20px;
    position: absolute;
    z-index: 2;
    margin: 0;
    color: white;
    font-size: 22px;
}

.case__img{
    width: 100%;
    position: relative;
    display: block;
}

.case__overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to top, #1c2e3a00 30% , var(--darkBlue));
}
.case__underline{   
    height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: -1;transition: bottom .5s ease;
    background-color: var(--darkBlue);
}
.case .show-underline{
    bottom: -35px;
}
@media screen and (max-width: 900px){
    .case .show-underline{
        bottom: -32px;
    }
}

.case__plus-icon{
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    cursor: pointer;
    transition: transform .5s ease;
}
.case__plus-icon:hover{
    transform: scale(1.1);
}
.case__plus-icon line{
    transition: transform .5s ease;
    transform-origin: center center;
}

/*case studies dropdown sections*/
.dropdown{
    grid-column-start: 1;
    grid-column-end:4;
    grid-row-start: 2;
    grid-row-end: 3;background-color: var(--tertiary);
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;

    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: all 1s ease;   
}
@media screen and (max-width: 900px){
    .dropdown{
        grid-template-rows: 1fr 1fr 150px;       
    }
}
.dropdown__img{  
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    background-position: center center;
}
@media screen and (max-width: 900px){
    .dropdown__img{
        grid-column-start:1;
        grid-row-start: 3;
        grid-row-end:4;
    }
}
.dropdown__img--1{
    background-image: url('../img/railmaint-monochrome.webp');
}
.dropdown__img--2{
    background-image: url('../img/rowes-monochrome.webp');
    background-position: 50% 60%;
}
.dropdown__img--3{
    background-image: url('../img/logivend-monochrome.webp');
}

.dropdown__overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right , var(--tertiary) , #fff0 );
}
@media screen and (max-width: 900px){
    .dropdown__overlay{
    background-image: linear-gradient(to bottom , var(--tertiary) , #fff0 );

    }
}

.dropdown__txt{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    
    width: 60%; 
    margin: 0 auto;
    padding: 60px 0;
    font-weight: 300;
    line-height: 1.5;   
}

.dropdown__list{
    margin: 0;
    padding: 0;
}

.dropdown__item{
    margin-bottom: 15px;
}

.dropdown__item.negative-translate{
    transform: translateX(-50px);
    transition: transform 1s ease;
}

.dropdown__item.zero-translate{
    transform: translateX(0px);
    transition: transform 1s ease;
}

@media screen and (max-width:900px) {
    .dropdown__item.negative-translate{
        transform: translateY(-20px);
    }

    
    .dropdown__item.zero-translate{
        transform: translateY(0px);
    }

}
@media screen and (max-width: 1200px){
    .dropdown__txt{
        width: 80%;
    }

}
@media screen and (max-width: 900px){
    .dropdown__txt{
        grid-column-end: 4;
        grid-row-end: 3;
        width: 100%;
        padding: 40px;   
        z-index: 1;
    }

}

@media screen and (max-width: 500px){
    .dropdown__txt{
        padding: 20px;
    }
}

.case-visible{
    height: auto;
    overflow: visible;
    opacity: 1;
}

@media screen and (max-width: 900px){
    .case-visible{
        margin-top: 26px;
    }

}

.is-open{
    transform: rotate(90deg);
    transform-origin: center center;
}


/*************************MANAGEMENT TEAM*************************/

.team-content{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.team__intro{
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 0 0 0 ;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: var(--darkBlue);
}
@media screen and (max-width:900px) {
    .team__intro{
    padding: 50px 20px 0 20px ;
    }
}

.managers{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 70px;
    position: relative;
}

.managers__line{
    height: calc(100% - 150px);
    width: 2px;
    padding-bottom: 80px;
    position: absolute;
    top: 83px;
    left: -12px;
    z-index: -3;
    background-color: var(--secondary2);
}

@media screen and (max-width: 900px){
    .managers__line{
        left: 36px;
    }
}

.manager{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-left: -30px;
    position: relative;
}

.manager:not(:last-of-type){
    margin-bottom: 100px;
    
}

.manager__info{
    width: 540px;
}

@media screen and (max-width:900px) {
    .manager__info{
        padding-left: 20px;
    }
}

.manager__circle{
    height: 10px;
    width: 10px;
    background-color: var(--secondary2);
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: -56px;
    z-index: -1;
    transition: transform 1s ease;
}

#circle-1{
    transform: scale(3) translate(20px);
}

@media screen and (max-width: 900px){
    #circle-1{
        transform: scale(3) translate(10px);
    }
}

.manager__circle--white{
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: -56px;
    z-index: -2;
}

@media screen and (max-width: 900px) {
    .manager__circle,
    .manager__circle--white{
        left: -8px ;
    }
}

.manager__name{
    font-size: 24px;
    font-weight: 800;
    color: var(--darkBlue);
    margin-bottom: 0;
    margin-top: 0;
}
.manager__position{
    font-weight: 400;
    color: var(--darkBlue);
    font-size: 17px;
    margin-top: 8px;
}
.manager__txt{
    left: 0;
    margin-bottom: 0;
}

@media screen and (max-width:900px) {
    .managers{
        padding-bottom: 0;
    }
    .manager{
        flex-direction: column;
        row-gap: 20px;
        margin-bottom: 80px;
    }
    .manager__position,
    .manager__name{
        text-align: left;
    }
    .manager__name{
        font-size:24px ;
    }
    .manager__position{
        font-size: 20px;
    }
    .manager__info{
        width: 80vw;
        margin: 0 auto;
    }
    
}



/***************************CONTACT***************************/

.contact-content{
    display: flex;
    justify-content: center;
    column-gap: 40px;
    flex-wrap: wrap;
    padding: 70px;
}

/*contact form*/
.form__list{
    margin-top: 0;
    padding: 0;
}

.form__item{
    width: 400px;
}

.form__input{
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;font-weight: 300;    
    background-color: #e0e6eb;
    border-radius: 4px;
    border-style: none;
    transition: transform .5s ease;
}

.form__input:focus{
    outline: none;
    transform: scale(1.02);
}

.form__input[type="submit"]{
    padding: 18px;
    background-color: white;
    font-weight: 700;
    font-size: 18px;
    color: var(--darkBlue);
    border: 2px solid var(--darkBlue);
    transition: all .5s ease;
    cursor: pointer;
}
.form__input[type="submit"]:hover{
    background-color: var(--darkBlue);
    color: white;
    transform: scale(1.02);
}

#terms-checkbox{
    width: unset;
    margin-right: 10px;
    margin-top: 2px;
}

.form__item--terms{
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 6px;
    line-height: 1.3;
}

@media screen and (max-width: 600px){
    .form__item--terms{
        margin-top: 15px;
        margin-bottom:18px;
    }
}

#recaptcha {
    width: 100%;
}
@media screen and (max-width:900px) {
    .form__item{
        width: 80vw;
    }
}


/*map*/
.map iframe{
    width: 300px;
    height: 582px;
}

@media screen and (max-width: 1238px){
    .contact-original .map{
        order: 1;
    }
    .contact-original .map iframe{
        width: 400px;

    }
}

/*contact info*/
.contact__name{
    font-size: 20px;
    font-weight: 800;
    color: var(--darkBlue);
    margin-top: 0;

}
.contact__link{
    display: block;
    margin-bottom: 15px;
    font-size: 17px;
}
.contact__email{
    display: block;
    width: 182px;
}
.contact__mobile-icon{
    margin-right: 10px;
}
.contact__address{
    margin-bottom: 30px;
}
.contact__txt{
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--darkBlue);
}

@media screen and (max-width: 1238px){
    .contact-original .contact-content{
        row-gap: 40px;
    }

    .contact-original .contact{
        order: -1;
        flex-basis: 100%;
    }

    .contact-original .contact__name,
    .contact-original .contact__txt,
    .contact-original .contact__link{
        text-align: center;
    }
    
}

@media screen and (max-width: 900px){
    .contact__email{
        margin: 0 auto;
    }   
}

@media screen and (max-width:900px){
    .contact-original .map iframe{
        width: 80vw;
    }
}

/*no form contact*/
.contact-no-form .contact-content {
    column-gap: 60px;
    padding: 70px;
}

.contact-no-form .map iframe{
    height: 350px;
    width: 350px;
}
@media screen and (max-width: 900px){
    .contact-no-form .contact-content{
        row-gap: 40px;
    }
    .contact-no-form .contact{
        order: -1;
        flex-basis: 100%;
    }

    .contact-no-form .map{
        order: 1;
    }

    .contact-no-form .map iframe{
        width: 80vw;

    }

    .contact-no-form .contact__name,
    .contact-no-form .contact__txt,
    .contact-no-form .contact__link{
        text-align: center;
    }
}


/************************LEGAL PAGES**********************************/

/*imprint page*/
.imprint-content{
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 1fr;
    column-gap: 60px;
    max-width: 800px;
    margin: 70px auto;
    border: 2px solid var(--darkBlue);
}

@media screen and (max-width: 900px){
    .imprint-content{
        margin: 70px 20px;
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 500px){
    .imprint-content{
        padding: 30px;
    }
}

.imprint__txt{
    font-size: 17px;
    font-weight: 400;
    color: var(--darkBlue); 
    margin: 0;
}

.imprint__iic{
    grid-column: 1/3;
    grid-row: 1/2;
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 22px;
    font-weight: 800;
    color: var(--darkBlue);
}

@media screen and (max-width: 600px){
    .imprint__iic{
        grid-column: 1/2;
        grid-row: 1/2;
    }
}

.imprint__col1{
    grid-column: 1/2;
    grid-row: 2/3;
}

.imprint__col2{
    grid-column: 2/3;
    grid-row: 2/3;
}

.imprint__address{
    margin-bottom: 30px;
}
.imprint__link{
    display: block;
    margin-bottom: 15px;
    font-size: 17px;
}
.imprint__email{
    margin: 0;
    display: block;
    width: 182px;
}

@media screen and (max-width: 600px){
    .imprint__col1{
        margin-bottom: 30px;
    }
}
.imprint__col2 p{
    margin-bottom: 0;
}

.imprint__managers{
    margin-bottom: 20px;
}

/*terms of use & privacy pages*/
.terms-content,
.privacy-content{
    max-width: 850px;
    margin: 70px auto;
    padding: 0 20px;
    line-height: 1.5;
}

.terms__item,
.privacy__item {
    font-weight: 300;
    margin-bottom: 20px;
}

.terms__list,
.privacy__list{
    padding-left: 16px;
}

.privacy__item::marker{
    font-weight: bold;
}

.terms__intro,
.privacy__intro{
    margin-bottom: 50px;
}

/************************JOBS PAGE*************************************/
.jobs-content{
    max-width: 700px;
    margin: 70px auto;
}

.jobs__intro{
    margin-bottom: 60px;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

.job{
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 70px;
    padding: 30px 40px 25px 45px;
    border: 2px solid var(--secondary2);
    position: relative;
}

.job__title{
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--darkBlue);
}

@media screen and (max-width: 700px){
    .jobs__intro{
        padding: 0 20px;
    }
    .job{
        margin: 0 20px 70px 20px;
    }
}