/*
Theme Name:   Hello Elementor Child
Theme URI:    http://example.com/hello-elementor-child/
Description:  Hello Elementor Child Theme
Author:       Benjamin Favre
Author URI:   http://example.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyfifteenchild
*/

.hasdoors {
	
	position: relative;
}

.doors {

	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
	top: 0;
	opacity: 1;
	/*background-color: yellow;*/
	overflow: hidden;
}

.doors::before {
	
	position: absolute;
	z-index: 20;
	content: "Cliquez pour ouvrir";
	font-family: "Pirulen";
	font-size: 2.5vw;
	color: white;
	left: 30%;
	top: 50%;
	animation: blink 2s infinite;
}

.no-before::before {
	
	animation: fadeOut 1.5s ease-in-out forwards; 
	pointer-events: none; 
}

.hasdoorsNoDisplay {
	
	z-index: 1;
	position: relative;
}

@keyframes blink {
	
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

@keyframes fadeOut {
	
	0%{opacity: 1;}
	100%{opacity: 0;}
}

.door-left {
	
	position: absolute;
	z-index: 11;
	/*background-color: green;*/
	height: 100%;
	width: 51.5vw;
	top: 0;
	left: 0;
	
	background-image: url("./multimedia-gauche-final.png");
	background-size: 100% 100%;
	background-position: center;
	
}

.door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./multimedia.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
	/*background-color: rgba(255, 255, 0, 0.5);*/
	
}

.door-right {
	
	position: absolute;
	z-index: 10;
	/*background-color: red;*/
	height: 100%;
	width: 51.5vw;
	top: 0;
	right: 0;
	
	background-image: url("./multimedia-droite-final.png");
	background-size: 100% 100%;
	background-position: center;
}

.door-right:before {
	
	position: absolute;
	content: "";
	background-image: url("./stage_01.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
	/*background-color: rgba(255, 255, 0, 0.5);*/
}

.doors.open .door-left {
	
	-webkit-animation: slideOut 2s forwards;
  -moz-animation: slideOut 2s forwards;
  animation: slideOut 2s forwards;
}

.openingLeft {

  -webkit-animation: slideOut 2s forwards;
  -moz-animation: slideOut 2s forwards;
  animation: slideOut 2s forwards;
}

.doors.open .door-right {
	
	-webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;
}
.openingRight {
    
  -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;
}
	
@-webkit-keyframes slideIn {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(55vw);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(55vw);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(55vw);
  }
}
	
@-webkit-keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-55vw);
  }
}
@-moz-keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-55vw);
  }
}
@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-55vw);
  }
}
	
#stage-02-desktop .door-right {
	
	background-image: url("./sas-droite.png");
}


#stage-02-desktop .door-right:before {
	
	position: absolute;
	content: "";
	background-image: url("./stage_02.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
}

#stage-02-desktop .door-left {
	
	background-image: url("./sas-gauche.png");
}

#stage-02-desktop .door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./sas.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
}
	
#stage-03-desktop .door-right {
	
	background-image: url("./design-droite.png");
}


#stage-03-desktop .door-right:before {
	
	position: absolute;
	content: "";
	background-image: url("./stage_03.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
}

#stage-03-desktop .door-left {
	
	background-image: url("./design-gauche.png");
}

#stage-03-desktop .door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./design.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
}

#stage-04-desktop .door-left {
	
	background-image: url("./informatique-gauche.png");
}

#stage-04-desktop .door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./informatique.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
}
	
#stage-04-desktop .door-right {
	
	background-image: url("./informatique-droite.png");
}


#stage-04-desktop .door-right:before {
	
	position: absolute;
	content: "";
	background-image: url("./stage_04.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
}

#stage-05-desktop .door-left {
	
	background-image: url("./marketing-gauche.png");
}

#stage-05-desktop .door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./marketing.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
}
	
#stage-05-desktop .door-right {
	
	background-image: url("./marketing-droite.png");
}


#stage-05-desktop .door-right:before {
	
	position: absolute;
	content: "";
	background-image: url("./stage_05.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
}

#stage-06-desktop .door-left {
	
	background-image: url("./formation-gauche.png");
}

#stage-06-desktop .door-left:before {
	
	position: absolute;
	content: "";
	background-image: url("./formation.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	width: 60%;
	height: 60%;
	bottom: 18%;
	left: 25%;
}
	
#stage-06-desktop .door-right {
	
	background-image: url("./formation-droite.png");
}


#stage-06-desktop .door-right:before {
	
	background-image: url("./stage_06.png");
	width: 35%;
	height: 25%;
	top: 12%;
	left: 50%;
}

@media screen and (max-width: 767px) {
	
#stage-01-mobile .door-left {
	
	background-image: url("./multimedia-gauche-mobile.png");
	width: 56vw;
}

#stage-01-mobile .door-left:before {
	
	background-image: url("./multimedia-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 0%;
	left: 5%;
}
	
#stage-01-mobile .door-right {
	
	background-image: url("./multimedia-droite-mobile.png");
	width: 56vw;
}


#stage-01-mobile .door-right:before {
	
	background-image: url("./stage_01-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}
	
#stage-02-mobile .door-left {
	
	background-image: url("./sas-gauche-mobile.png");
	width: 56vw;
}

#stage-02-mobile .door-left:before {
	
	background-image: url("./sas-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 0%;
	left: 8%;
}
	
#stage-02-mobile .door-right {
	
	background-image: url("./sas-droite-mobile.png");
	width: 56vw;
}


#stage-02-mobile .door-right:before {
	
	background-image: url("./stage_02-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}
	
#stage-03-mobile .door-left {
	
	background-image: url("./design-gauche-mobile.png");
	width: 56vw;
}

#stage-03-mobile .door-left:before {
	
	background-image: url("./design-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 0%;
	left: 5%;
}
	
#stage-03-mobile .door-right {
	
	background-image: url("./design-droite-mobile.png");
	width: 56vw;
}

#stage-03-mobile .door-right:before {
	
	background-image: url("./stage_03-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}

#stage-04-mobile .door-left {
	
	background-image: url("./informatique-gauche-mobile.png");
	width: 56vw;
}

#stage-04-mobile .door-left:before {
	

	background-image: url("./informatique-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 3%;
	left: 5%;
}
	
#stage-04-mobile .door-right {
	
	background-image: url("./informatique-droite-mobile.png");
	width: 56vw;
}


#stage-04-mobile .door-right:before {
	
	background-image: url("./stage_04-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}

#stage-05-mobile .door-left {
	
	background-image: url("./marketing-gauche-mobile.png");
	width: 56vw;
}

#stage-05-mobile .door-left:before {
	
	background-image: url("./marketing-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 0%;
	left: 5%;
}
	
#stage-05-mobile .door-right {
	
	background-image: url("./marketing-droite-mobile.png");
	width: 56vw;
}


#stage-05-mobile .door-right:before {

	background-image: url("./stage_05-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}

#stage-06-mobile .door-left {
	
	background-image: url("./formation-gauche-mobile.png");
	width: 56vw;
}

#stage-06-mobile .door-left:before {

	background-image: url("./formation-mobile.png");
	background-position: bottom left;
	width: 50%;
	height: 50%;
	bottom: 0%;
	left: 5%;
}
	
#stage-06-mobile .door-right {
	
	background-image: url("./formation-droite-mobile.png");
	width: 56vw;
}


#stage-06-mobile .door-right:before {

	background-image: url("./stage_06-mobile.png");
	width: 50%;
	height: 40%;
	top: 3%;
	left: 40%;
}
	
	@-webkit-keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-56vw);
  }
}
@-moz-keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-56vw);
  }
}
@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-56vw);
  }
}
}