.first-div{
    background-image: url("../images/aboutb.png");
    background-size: auto 1000px;

}


.about-orange-text-container{
    margin-top: 20vh;
    margin-left: 15%;
    width: 80%;
    max-width: 80%;
    letter-spacing: 3.25px;
}


.about-container{
    font-weight: 300;
    font-size: 55px;
    letter-spacing: 2.75px;
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    line-height: 70px;
    align-items: center;
    display: flex;
    margin-top: 6%;
    width: 50%;
    margin-left: 15%;
    margin-bottom: 7%;
    min-height: 350px;
  }

.about-two-column-item{
    flex-basis: 40%;
    display: flex;
}

.two-column-item{
    margin-top: 5%;
    flex-basis: 40%;
    font-size: 30px;
    font-family: 'PT Sans', sans-serif;
    color: #757575;
    margin: auto;
    margin-top: 15%;
    display: flex;
    flex-flow: column;
    margin-left: 0%;
}

.two-column-image{
    position: relative;
    min-width: 350px;
    width: 65%;
    margin: auto;
    z-index: 4;
}

.about-white-container{
    margin-top: 3%;
    margin-left: 0;
    position: relative;
    width: 100%;
    background-color: white;
}


.image-text-container{
    position: relative;
    display: flex;
    width: 90%;
    margin: auto;
    flex-flow: row;
    margin-top: 5%;
}


.pt-sans-big-gray{
    color:#757575;
    font-size: 20px;
    line-height: 20pt;

}




.mision-image{
    width: 100%;
    opacity: 0.8;
    margin-left: -2px;
    position: relative;
    min-height: 500px;
}

.mision-text{
    color: white;
    background-color: red;
    width: 60%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 25px;
    color: white;
    text-align: left;
    margin-left: 10%;
}




.mision-container{
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
  }

.mision-two-column-item{
    flex-basis: 50%;
    display: inline-block;
    justify-content: right;
    align-items: center;
    position: absolute;

}


.bold-oswald-orange{
    font-family: 'Oswald', sans-serif;
    color: #F58532;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2.75px;
}

.regular-pt-sans-white{
    font-family: 'PT Sans', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: white;
    margin-top: 5%;
}

.wide-container{
    margin-bottom: 5%;
    margin-left: 15%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.text-figure{
    width: 30%;

    text-align: left;
    margin: auto;
    margin-top: 0%;
    display: flex;
    flex-flow: column
}



.about-container-us{
    width: 100%;
    position: absolute;
    margin-top: 0;
    margin-left: 0;
}

/***********THE TEAM************************************/

.the-team-container{
    width: 100%;
}

.carousel-team-content{
    width: 100%;
    height: 60vh;
    display: block;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}


.mouse-arrow{
    display: none;
}


/**********************/

.advantage-item-content{
    display: flex;
    align-items: center;
    flex-flow: column;
    min-width: 350px;
    max-width: 350px;

    height: 500px;
    background: white;
    border-radius: 0px 30px;
    opacity: 1;
}

.team-container{
    margin-top: 5%;
    margin-left: 10%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10%;
    min-height: 1064px;
    justify-content: center;
}

.advantage-item-container{
    flex-basis: 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.advantage-item-container2{
    flex-basis: 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.advantage-item-text{
    display: block;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    color: white;
    font-size: 25px;
}

.team-text{
    display: flex;
    flex-flow: column;
    align-items: center;
    font-size: 30px;
    font-family: 'PT Sans', sans-serif;
    margin-top: 5%;
}

.meetBox {
    position: absolute;
    width: 47px;
    height: 47px;
    background-image: url("../images/meetBox.png");
    margin-left: -7%;
  }
  
  @-moz-keyframes grow {
	0% {
		width: 47px;
        height: 47px;   
	}   

	100% {
		width: 47px;
        height: 47px;  
        margin-left: -20px;
        margin-top: -330px;
	}
}

@-webkit-keyframes grow {
	0% {
		width: 47px;
        height: 47px;   
	}   

	100% {
		width: 47px;
        height: 47px;  
        margin-left: -20px;
        margin-top: -330px;
	}
}

@-ms-keyframes grow {
	0% {
		width: 47px;
        height: 47px;   
	}   

	100% {
		width: 47px;
        height: 47px;  
        margin-left: -20px;
        margin-top: -330px;
	}
}


@keyframes grow {
	0% {
		width: 47px;
        height: 47px;   
	}   

	100% {
		width: 47px;
        height: 47px;  
        margin-left: -10px;
        margin-top: -10px;
	}
}

.animated2 {
    position: absolute;
    width: 47px;
    height: 47px;
    -moz-animation: grow 1s forwards;
    -webkit-animation: grow 1s forwards;
    animation-name: grow;
    -ms-animation: grow 1s forwards;
    animation: grow 1s forwards;
    margin-left: 60px;
    margin-top: 60px;
}



.animated2.off {
    -moz-animation-name: none;
    -webkit-animation-name: none;
    -ms-animation-name: none;
    animation-name: none;	
}




@keyframes decrease {
    0% {
        width: 70%;
    }   

    100% {
        width: 30%;
        margin: auto;
        margin-top: 10%;
    }
}

.advantage-image-about{
    margin: auto;
    margin-top: 10%;
    width: 60%;
    -moz-animation: decrease 1s forwards;
    -webkit-animation: decrease 1s forwards;
    animation-name: decrease;
    -ms-animation: decrease 1s forwards;
    animation: decrease 1s forwards;
}


.advantage-image-about.off {
    -moz-animation-name: none;
    -webkit-animation-name: none;
    -ms-animation-name: none;
    animation-name: none;	
}

.animatedImage {
    display: flex;
    width: 100%;
}


.animatedImage.off {
    -moz-animation-name: none;
    -webkit-animation-name: none;
    -ms-animation-name: none;
    animation-name: none;	
}

.worker-name{
    font-size: 25px;
    font-family: 'PT Sans', sans-serif;
    color: #F58532;
    font-weight: 700;
}

.position-name{
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    color: #424242;
}

.worker-phrase{
    font-size: 20px;
    font-family: 'PT Sans', sans-serif; 
    color:  #bbbec4;
    width: 80%;
    margin-top: 5%;
}

#mobile-carousel{
    display: none;
}

#medium-carousel{
    display: none;
}


@keyframes mission-vision-foward {
    0% {
    }   

    100% {
        background-position-x: -330px;
    }
}

@keyframes mission-vision-backward {
    0% {
        background-position-x: -330px;

    }   

    100% {
        background-position-x: 0px;
    }
}

.mision-background{
    background-image: url("../images/misionb.png");
    background-repeat:no-repeat;
    background-size: 101% auto;
    height: 530px;
    margin-left: -1%;
    display: flex;
}

.mision-background.left{
    -moz-animation: mission-vision-backward 1s forwards;
    -webkit-animation: mission-vision-backward 1s forwards;
    animation-name: mission-vision-backward;
    -ms-animation: mission-vision-backward 1s forwards;
    animation: mission-vision-backward 1s forwards;

}


.mision-background.right {
    -moz-animation: mission-vision-foward 1s forwards;
    -webkit-animation: mission-vision-foward 1s forwards;
    animation-name: mission-vision-foward;
    -ms-animation: mission-vision-foward 1s forwards;
    animation: mission-vision-foward 1s forwards;
}

.mision-background.off {
    -moz-animation: none;
    -webkit-animation:none;
    animation-name: none;
    -ms-animation:none;
    animation: none;
}



@media (max-width: 1840px){
    .text-figure{
        width: 40%;
    }
}


@media (max-width:1542px){
    .first-div{
        background-image: url("../images/aboutb.png");
        background-repeat:no-repeat;
        background-size: auto 1000px;
        background-position-x: 20%;
        
    }

    .text-figure{
        width: 45%;
        margin-top: -2%;
    }
}
@media (max-width:1700px){
    #big-carousel{
        display: none;
    }

    #medium-carousel{
        display: block;
    }
}


@media (max-width:1350px){
    #vision{
        width: 35%;
    }
    #mision{
        width: 50%;
    }
    .image-text-container{
        width: 95%;
    }
    .text-figure{
        margin-top: -4%;
    }
    .team-container{
        justify-content: center;
    }

    .wide-container{
        flex-flow: column;
    }
}

@media (max-width: 1200px){

    

    .first-div{
        background-image: url("../images/aboutb.png");
        background-repeat:no-repeat;
        background-position-x: 20%;
        top: -3%;
    }


    #vision{
        width: 80%;
    }
    #mision{
        width: 80%;
    }
    .mouse-arrow{
        width: 70px;
        height: 70px;
        display: unset;
        align-self: center;
        margin: 20px;
    } 

    .image-text-container{
        width: 80%;
        margin-left: 5%;
        margin-top: auto;
        min-width: unset;
    }
    .mision-background{
        background-size: auto 100%;
    }

    .text-figure{
        width: 90%;
    }

    .text-figure.off{
        display: none;
    }

    .about-container{
        flex-flow: column;
        width: 75%;
        font-size: 35px;
        line-height: normal;
    }

    .two-column-image{
        min-width: 300px;
        width: 25%;
    }

    .team-container{
        width: 85%;
        margin-left: 10%;
        min-height: 250px;
    }
    .advantage-item-container{
        flex-basis: 33%;
    }
    .advantage-item-container2{
        flex-basis: 33%;
    }
    .worker-name{
        font-size: 13px;
        letter-spacing: 0.65px;
    }
    .position-name{
        font-size: 13px;
        color: #424242;

    }

    .worker-phrase{
        display: none;
    }

    .animatedImage{
        width: 100%;
        margin: auto;
    }
    .advantage-image-about{
        width: 100%;
    }
    .team-text{
        text-align: center;
        margin-top: 10%;
    }
    
    
    #big-carousel{
        display: none;
    }
    #medium-carousel{
        display: none;
    }
    #mobile-carousel{
        display: block;
    }
    #theteamcarouselmobile{
        display: block;
    }
    .two-column-item{
        flex-basis: 100%;
        font-size: 15px;
        line-height: 22px;
    }
    .advantage-item-content{
        min-width: 86px;
        max-width: 86px;
        height: unset;
    }

    .animated2{
        width: 22px;
        height: 22px;
        margin-top: 0%;
        margin-left: 0%;
    }

  
}


@media (max-width:550px){


    .about-orange-text-container{
        margin-left: 5%;
    }

    .first-div{
        background-image: url("../images/aboutb.png");
        background-repeat:no-repeat;
        background-size: auto 1000px;
        background-position-x: 20%;
        top: -4%;
    }

    .two-column-image{
        min-width: 143px;
    }
    .about-container{
        flex-flow: column;
        width: 90%;
        margin-left: 5%;
        font-size: 24px;
        line-height: normal;
    }

    .about-white-container{
        margin-top: 0%;
    }
    .wide-container {
        margin-top: 5%;
        margin-left: 5%;
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
  


    .mision-background{
        height: 400px;
        background-size: 300% 100%;
    }

    .text-figure{
        width: 90%;
    }

    .text-figure.off{
        display: none;
    }
    .regular-pt-sans-white{
        font-size: 14px;
    }

    .bold-oswald-orange{
        font-size: 24;
        letter-spacing: 1.2px;
    }

    .mouse-arrow{
        width: 24px;
        height: 24px;
        display: unset;
        align-self: center;
        margin: 7px;
    }

    .image-text-container{
        margin-left: 5%;
        margin-top: auto;
        min-width: unset;
    }

    .carousel-indicators li {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #929292;
        margin-left: 5%;
        margin-right: 5%;
      }

      .carousel-indicators li.active {

        background-color: #F58532;
      }

}