/* author Stavtseva Evgeniia */

body {
    margin: 0;
    padding: 0;
    color: #686868;
    font-family: 'Roboto Mono', monospace;
}

.w-100{
    width: 100%;
}

.man_animate{
    display: none;
}

.man_animate,
.stop_animate{
    height: 320px; 
    bottom: 20px;
    float: left;
    position: absolute;
}

.show,
.stop_animate{
    z-index: 999;
}

/*************** NAV ******************/
.navbar{
    position: absolute !important;
    top: 0;
    width: 100%;
    z-index: 999;
}
@media (max-width: 768px){
    .navbar-brand img{
        width: 60px;
        height: auto;
        }

}


a{
    text-decoration: none;
    text-transform: uppercase;
    color: #60c45c;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.3rem;
}
a:hover{
    color: white;
}

.navbar-brand:hover{
    scale: 1.1;
    }
/*************** END NAV ******************/

/***************Speech******************/

.man .wrapper_speech{
    bottom: 330px;
    left: 80px;
    z-index: 1000;
}
.man .speech{
    width: 250px !important;
    min-height: 80px !important;
}

@media (max-width: 992px) {
    .man .speech{
        width: 200px !important;
    }
    .speech p{
        font-size: 0.8rem;

    }
}
    @media (max-width: 768px){
        .man .speech{
            width: 150px !important;
        }

    }
.wrapper_speech{
    display: flex;
    height: auto;
}
.speech {
	position: relative;
	width: 200px;
	text-align: center;
	background-color: #fff;
	border: 4px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;


}

.speech_left{
    margin-right: 50px;
}
.speech_right{
    margin-left: 50px;
}

.speech_right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}

.speech_right:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 35px;
	bottom: -30px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}


.speech_left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    right:30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}

.speech_left:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 35px;
	bottom: -30px;
	border: 15px solid;
	border-color: #fff #fff transparent transparent;
}

.speech p{
    margin: 0px;
    padding: 8px;
}

/************Slider***************/


#block-for-slider {
    width: 100vw;
    height: 100vh;
}

#viewport {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
}

#slidewrapper {
    position: relative;
    height: 100%;
    width: calc(100% * 10);
    -webkit-transition: 4s;
    -o-transition: 4s;
    transition: 4s;
}

#slidewrapper, #slidewrapper ul, #slidewrapper li {
    margin: 0;
    padding: 0;
}

.slide {
    position: relative;
    height: 100%;
    width: calc(100%/10);
    list-style: none;
    display: inline;
    float: left;
}

 .slide-img {
    width: 100%;
    height: 100%;
}

/* #next-btn {
    position: absolute;
    z-index: 3;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 15px;
    bottom: 8%;
} */

    
#next-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 8%;
}
#next-btn:before,
#next-btn:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-right: 10px solid #60c45c;
    border-top: 10px solid #60c45c;
    animation: next 3s linear infinite;
}
#next-btn:after {
    animation: next 3s linear infinite -1.5s;
}
@keyframes next {
    0% {
        opacity: 0;
        transform: translate(-40px, 0) rotate(45deg);
    }
    10%, 90% {
        opacity: 0;
    }
    50% {
        opacity: 1;  
        transform: translate(0, 0) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: translate(40px, 0) rotate(45deg);
    }
}


 #next-btn:hover {
    cursor: pointer;
}



#next-btn {
    right: 80px;

}


.cloud{ 
    width: 100%;
   
}

.cloud img{
    top: 7%;
    left:-250px;
    max-height: 10%;
    max-width: 12%;
    position: absolute;
    z-index: 3;


}

@media (max-width: 992px) {
    .cloud img{
        max-width: 20%;
    }

}

@media (max-width: 768px){
    .cloud img{
        max-width: 30%;
    }

}

.cloud_1{
    animation: cloudbox 25s linear infinite;
}

.cloud_2{
    animation: cloudbox 25s linear 12s infinite;
}


@keyframes cloudbox{
    0% {
		left:-250px;
	}

	

	100% {
		left:100vw;
	}
}


h1, .h2, .date{
    position: absolute;
    text-transform: uppercase;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

h1{
    top: 10%;
}
.h2{
    top: 15%;
}
.date{
    bottom: 7%;
}

.wrapper_img{
    z-index: 5;
    object-fit: cover;
    
    
}

.img-animate{
    opacity: 0;
    animation-duration: 2s;
    animation-name: imgin;
    animation-fill-mode: forwards;
    position: absolute;
    bottom: 30%;
    --wrapperWidth: 800px;
    width: var(--wrapperWidth);
    left: calc((100% - var(--wrapperWidth))/2);
}

/* @media (max-width: 1400px) {
    .img-animate{
        --wrapperWidth: 800px;
    }

} */

@media (max-width: 1200px) {
    .img-animate{
        --wrapperWidth: 700px;
    }

}

@media (max-width: 992px) {
    .img-animate{
        --wrapperWidth: 600px;
    }

}

@media (max-width: 768px){
    .img-animate{
        --wrapperWidth: 400px;
    }

}

@keyframes imgin {
	0% {
		opacity: 0;
        transform: scale(.5);
	}
	25% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.5;
	}
	75% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
        transform: scale(1.1);
	}
}


/********** slider lieu de naissance*************/

iframe{
    padding: 0 70px;
}
@media (max-width: 1200px){
    iframe{
        --wrapperWidth:  450px !important;
        padding: 0 50px;
    }
}

@media (max-width: 992px){
    iframe{
        --wrapperWidth:  450px !important;
    }
}

@media (max-width: 768px){
    iframe{
        height: 300px;
        --wrapperWidth:  400px !important;
        padding: 0 30px;
    }
}

@media (max-width: 576px){
    iframe{
        height: 300px;
        --wrapperWidth:  300px !important;
    }
}

/*************END slider lieu de naissance**************/

/************** slider l'ecole ******************/
.opc{
    opacity: 0 !important;
}


#wrapper_img_school img{
    opacity: 1;
}

.kids_l{

    animation: kidsboxLeft 5s linear forwards;
}

.kids_r{

    animation: kidsboxRight 5s linear forwards;
}

@keyframes  kidsboxLeft{
    0% {
		
        left: calc((100% - var(--wrapperWidth))/2 - 20%);

	}
	100% {
        left: calc((100% - var(--wrapperWidth))/2);
		width: var(--wrapperWidth);
	}
} 

@keyframes  kidsboxRight{
    0% {
		
        left: calc((100% - var(--wrapperWidth))/2 + 20%);

	}
	100% {
        left: calc((100% - var(--wrapperWidth))/2);
		width: var(--wrapperWidth);
	}
} 



/****************** slider l'ecole*****************/

/*****************slide Universite*****************/
 .cap_wrapper{
    position: absolute;
    height: calc(100vh - 20%);
    bottom: 20%;
    left: calc((100% - var(--wrapperWidthUniver))/2);
    overflow: hidden;
    --wrapperWidthUniver: 800px;
    width: var(--wrapperWidthUniver);

} 

.cap{
    position: absolute;
    width: 120px;
    height: auto;
    bottom: -150px;
    
}

@media (max-width: 992px) {

    .cap_wrapper{
        --wrapperWidthUniver: 600px;
    
    } 

    .cap{
        width: 90px;
        
    }

}

@media (max-width: 768px){
    .cap_wrapper{
        --wrapperWidthUniver: 500px;
    
    } 

    .cap{
        width: 60px;
        
    }

}

@media (max-width: 576px){
    .cap_wrapper{
        --wrapperWidthUniver: 400px;
    
    } 

}

.cap_1{
    animation: capbox_1 5s ease-in 2s infinite;
}

.cap_2{
    animation: capbox_2 5s ease-in 3s infinite;
}

.cap_3{
    animation: capbox_3 5s ease-in 4s infinite;
}

@keyframes capbox_1{
    0% {
		left:0px;
        bottom: -150px;
	}

	50% {
		left:10%;
        bottom: 90vh;
        transform: rotate(55deg);
	}
    
	100% {
		left:15%;
        bottom: -150px;
        transform: rotate(95deg);
	}
}

@keyframes capbox_2{
    0% {
		left:55%;
        bottom: -150px;
	}

	50% {
		left:40%;
        bottom: 80vh;
        transform: rotate(-60deg);
	}
    
	100% {
		left:35%;
        bottom: -150px;
        transform: rotate(-115deg);
	}
}

@keyframes capbox_3{
    0% {
		right: 20%;
        bottom: -150px;
	}

	50% {
		right: 10%px;
        bottom: 85vh;
        transform: rotate(35deg);
	}
    
	100% {
		right: 0px;
        bottom: -150px;
        transform: rotate(55deg);
	}
}
/*****************END slide Universite*****************/


/*****************slide Call Center*****************/
.slide_call_center{
    padding: 20px;
    background-color: #95a0b9;
    border-radius: 15px;
    color: white;
    width: 500px;
}
@media (max-width: 992px) {

    .slide_call_center{
        width: 400px;
    }

}

@media (max-width: 768px) {

    .slide_call_center{
        width: 350px;
    }

}
.hole{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
}
.hole_left{
    top: 15px;
    left: 15px;
}
.hole_right{
    top: 15px;
    right: 15px;
}
.hole_left_b{
    bottom: 15px;
    left: 15px;
}
.hole_right_b{
    bottom: 15px;
    right: 15px;
}

.employee_speech_1{
    animation: employeebox 16s linear 4s infinite;
}

.employee_speech_8{
    animation: employeebox 16s linear 7s infinite;
}

.employee_speech_2{
    animation: employeebox 16s linear 11s infinite;
}

.employee_speech_6{
    animation: employeebox 16s linear 10s infinite;
}
.employee_speech_3{
    animation: employeebox 16s linear 1s infinite;
}
.employee_speech_5{
    animation: employeebox 16s linear 13s infinite;
}
.employee_speech_4{
    animation: employeebox 16s linear 16s infinite;
}

.employee_speech_7{
    animation: employeebox 16s linear 6s infinite;
}

@keyframes employeebox{
    0% {
		opacity: 0;
	}

	15% {
		opacity: 1;
	}
    25% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}
/*****************END slide Call Center*****************/


/*****************slide Travel*****************/
.slide_travel{
    background: linear-gradient(0deg, #033ba1 0%, rgb(92 210 255) 100%);
    -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.img_show{
    animation: none;
    opacity: 1;
}


/*****************END slide Travel*****************/

/*****************slide Medical*****************/
.slide_title{
    top: 100px;
    position: absolute;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
} 

 .slide_title h2{
    text-transform: uppercase;
} 

.slide_title img{
    width: 40px;
    
}

/*****************END slide Medical*****************/


/*****************END slide Airport*****************/
.bk_1,
.bk_2{
    position: absolute;
    top: 0;
    left: 0;
}

.bk_1{
    z-index: 99;
}

.wrapper_plane{
    
    position: absolute;
    width: 450px;
    z-index: 6;
    left: 0;
    bottom: 37%;
     animation: planebox 11s linear 4s forwards; 
}

@media (max-width: 1200px) {

    .wrapper_plane{
        width: 400px;
        
    }

}

@media (max-width: 992px) {

    .wrapper_plane{
        width: 350px;
        
    }

}

@media (max-width: 768px){

    .wrapper_plane{
        width: 250px;
        
    }

}  @media (max-width: 576px){
    .wrapper_plane{
        width: 100px;
        
    }

} 

.wrapper_plane img{
    width: 100%;
    position: absolute;
    left: 0px;
    
}

@keyframes planebox{
    0% {
        left: 0%;
		bottom: 37%;
	}

    25% {
        left: 20%;
		bottom: 37%;
    }
    35% {
        left: 25%;
		bottom: 37%;
	}

	50% {
		left: 45%;
        transform: rotate(-15deg);
        bottom: 45%;
	}
    
	100% {
        transform: rotate(-10deg);
		bottom: 120vh;
        left: 100vw;
	}
}

/*****************END slide Airport*****************/

/*****************slide web*****************/

:root{
    --webRadius: 250px;
}

.web{
    position: absolute;
    --webWidth: 200px;
    --webHeight: 200px;
    width: var(--webWidth);
    height: var(--webHeight);
    top: calc(50vh - var(--webHeight) / 2);
    left: calc(50vw - var(--webWidth) / 2);
}


.web_1{
    animation: web1 15s linear infinite;
}

@keyframes web1 {
    from { transform: rotate(0deg) translateX(var(--webRadius)) rotate(0deg); }
 to   {  transform: rotate(360deg) translateX(var(--webRadius)) rotate(-360deg);}
}

.web_2{
    animation: web2 15s linear infinite;
    }

@keyframes web2 {
        from { transform: rotate(120deg) translateX(var(--webRadius)) rotate(-120deg); }
     to   {  transform: rotate(480deg) translateX(var(--webRadius)) rotate(-480deg);}
}
.web_3{
    animation: web3 15s linear infinite;
    }

@keyframes web3 {
     from { transform: rotate(240deg) translateX(var(--webRadius)) rotate(-240deg); }
     to   {  transform: rotate(600deg) translateX(var(--webRadius)) rotate(-600deg);}
}

.web_4{
    animation: web4 15s linear infinite;
    }

    @keyframes web4 {
        from { transform: rotate(60deg) translateX(var(--webRadius)); }
        to   {  transform: rotate(420deg) translateX(var(--webRadius));}
   }

   .web_5{
    animation: web5 15s linear infinite;
    }

    @keyframes web5 {
        from { transform: rotate(180deg) translateX(var(--webRadius)); }
        to   {  transform: rotate(540deg) translateX(var(--webRadius));}
   }

   .web_6{
    animation: web6 15s linear infinite;
    }

    @keyframes web6 {
        from { transform: rotate(300deg) translateX(var(--webRadius)); }
        to   {  transform: rotate(660deg) translateX(var(--webRadius));}
   }

   .code{
       position: absolute;
        width: 100px;
        height: 100px;
        z-index: 999;
   }
   .code_1{
    top: calc(50vh - var(--webRadius));
    left: calc(50vw - 1.7 * var(--webRadius));

   }
   .code_2{
    top: calc(50vh - 1.2 * var(--webRadius));
    left: calc(50vw + 1.2 * var(--webRadius));

   }
   .code_3{
    bottom: 30%;
    left: calc(50vw + 1.17 * var(--webRadius));

   }

   @media (max-width: 1200px) {

    :root{
        --webRadius: 230px;
    }

    .web{
        --webWidth: 180px;
        --webHeight: 180px;
    }

}

@media (max-width: 992px) {

    :root{
        --webRadius: 200px;
    }

    .web{
        --webWidth: 150px;
        --webHeight: 150px;
    }

    .code{
         width: 70px;
         height: 70px;
    }

}

@media (max-width: 768px){

    :root{
        --webRadius: 150px;
    }

    .web{
        --webWidth: 100px;
        --webHeight: 100px;
    }

    .code{
        width: 50px;
        height: 50px;
   }

} 

 @media (max-width: 576px){
    :root{
        --webRadius: 100px;
    }

    .web{
        --webWidth: 70px;
        --webHeight: 70px;
    }

} 

/*****************END slide web*****************/

/*****************slide formation*****************/

#wrapper_img_dev{
    position: absolute;
    --devWrapperHeight: 80%;
    --devWrapperWidth: 80%;
    width: var(--devWrapperWidth);
    height: var(--devWrapperHeight);
    left: calc((100% - var(--devWrapperWidth)) / 2);
   top: calc((100% - var(--devWrapperHeight)) / 2);
   overflow: hidden;
}

#wrapper_img_dev img{
    position: absolute;
    --devHeight: 400px;
    --devWidth: 550px;
    width: var(--devWidth);
    height: var(--devHeight);
    left: calc((100% - var(--devWidth)) / 2);
   top: calc((100% - var(--devHeight)) / 2);

}


@media (max-width: 768px){
    
    #wrapper_img_dev img{
        --devHeight: 350px;
        --devWidth: 480px;
    
    }
    

} 

 @media (max-width: 576px){
    #wrapper_img_dev img{
        --devHeight: 255px;
        --devWidth: 350px;
    
    }

} 

.dev_4{
    animation: dev4 6s linear 1;
}

@keyframes dev4{
    0% {
		top: calc(100vh + 20%);
	}
    20% {
		top: calc(100vh + 20%);
	}

	100% {
		top: calc((100% - var(--devHeight)) / 2);
	}
}

.dev_3{
    animation: dev3 3s linear 1;
}

@keyframes dev3{
    0% {
		top: -20%;
	}


	100% {
		top: calc((100% - var(--devHeight)) / 2);
	}
}

.dev_1{
    animation: dev1 6s linear 1;
}

@keyframes dev1{
    0% {
		left: calc(100vw + 20%);
	}
    15% {
		left: calc(100vw + 20%);
	}

	100% {
		left: calc((100% - var(--devWidth)) / 2);
	}
}

.dev_2{
    animation: dev2 6s linear 1;
}

@keyframes dev2{
    0% {
		left: -20%;
	}
    15% {
		left: -20%;
	}

	100% {
		left: calc((100% - var(--devWidth)) / 2);
	}
}


.dev_5{
    animation: dev5 8s linear 1;
}

@keyframes dev5{
    0% {
		left: -20%;
	}

    30% {
		left: -20%;
	}

	100% {
		left: calc((100% - var(--devWidth)) / 2);
	}
}

.dev_6{
    animation: dev6 8s linear 1;
}

@keyframes dev6{
    0% {
		left: calc(var(--devWrapperWidth) + var(--devWidth));
	}
    30% {
		left: calc(var(--devWrapperWidth) + var(--devWidth));
	}

	100% {
		left: calc((100% - var(--devWidth)) / 2);
	}
}

.dev_7{
    animation: dev7 11s linear  1;
}

@keyframes dev7{
    0% {
		opacity: 0;
	}
    70% {
		opacity: 0;
	}
    85% {
		opacity: 1;
        scale: 1.2;
	}

	100% {
		opacity: 1;
        scale: 1;
	}
}
/*****************END slide formation*****************/
/*****************slide à suivre*****************/
.lng_3{
    animation: box 16s linear 4s infinite;
}

.lng_4{
    animation: box 16s linear 7s infinite;
}

.lng_1{
    animation: box 16s linear 11s infinite;
}

.lng_8{
    animation: box 16s linear 9s infinite;
}
.lng_5{
    animation: box 16s linear 1s infinite;
}
.lng_6{
    animation: box 16s linear 13s infinite;
}
.lng_2{
    animation: box 16s linear 15s infinite;
}

.lng_9{
    animation: boxFin 16s linear 13s infinite;
    
    
}

.lng_7{
    animation: box 16s linear 6s infinite;
}

@keyframes box{
    0% {
		opacity: 0;
	}

	15% {
		opacity: 1;
        scale: 1.1;
	}
    25% {
        scale: 1;
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes boxFin{
    0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
        scale: 1.2;
	}
    20% {
        scale: 1.2;
		opacity: 1;
	}
    25% {
        scale: 1;
		opacity: 1;
	}

	100% {
		scale: 1;
        opacity: 1;
	}
}

/*****************END slide à suivre*****************/