/* body{background-color: #85d5e0;}*/
body{background-color: #85d5e0; position: relative;}
#scene{position:fixed; left:0; top:0;overflow:hidden;width:1200px; height:1200px;top:75px;}
#globalconteneur{position: absolute; left:0; top:0; width:100%; height:100%;}
.conteneur{position:absolute; left:0; top:0; width:100%; height:100%; }
#conteneur0{position:absolute; left:0; top:0; width:100%; height:100%;}
#conteneur1{position:absolute; left:0; top:0; width:100%; height:100%; z-index: 2000;}
#doScroll{z-index:10;}
#control{position:fixed; top:0; left:0; z-index: 4999; width:400px; background-color:#333; color:#fff; padding: 10px;}
#control a{color:#fff;}
.homo{width: 100%; height: 100%;}
.animimg{position:absolute;display:none; left:0 top:0;}
#nuage{z-index: 2300;}
#voiture{z-index: 2200;}
#camion2{z-index: 2600;}
.oeuvre{cursor: pointer;}
.oeuvre_img{width: 100%;height:100%;}

#conteneur15 {background:#fff;}
#conteneur15 h1{text-align: center;}
#conteneur15 h2{text-align: center;}

 /*TITLES*/
 .title{position:absolute;width:50%;height:100%;}
 .title_left{left:0; overflow: hidden;}
 .title_right{right: 0; overflow: hidden;}
 .title_img_left{position:absolute;left:100%; width:200%;}
 .title_img_right{position:absolute;left:-200%; width:200%;}

 
#main{z-index: 3003;position: fixed;}
#artiste{background-color: #327684; height:100%;}
#load_screen{background-color: #327684; width:100%; height:100%; z-index: 4999;position: fixed;top:0; left:0;}
#load_img{width:150px; margin : 20% auto; display:block;}
.clicktoclose{width: 100%; height: 100%;z-index: 20;background-color: #000; opacity: 0.4;}


 /*BTN PLUS*/
 .conteneur_plus{cursor: pointer; z-index: 1000;
     transform: rotate(-135deg);
     -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg);
     -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); 
}
 .marker{ position: absolute; width:100%; height:100%; background: #008696; border-radius: 0 50% 50% 50%; border: 0.20em solid white;
     box-sizing: border-box;
     -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
     -ms-box-sizing: border-box; -o-box-sizing: border-box;
 }
 .sign_plus{ position:absolute; width:60%; height:60%; top:20%; left:20%;
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
 }
 .cross{ position:absolute; background-color: white; 
     border-radius:20%;
     -webkit-border-radius:20%; -moz-border-radius:20%;
     -ms-border-radius:20%; -o-border-radius:20%;
 }
 .vertical{ width:10%; height:70%; left:45%; top:15%; }
 .horizontal{ width:70%; height:10%; left:15%; top:45%; }


/*BTN BULLE*/
 .conteneur_bulle{cursor: pointer; z-index: 1000;
     transform: rotate(-135deg);
     -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg);
     -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg);
}

.points_bulle{overflow: hidden; position: absolute; font-size: 2em; color:white; width: 100%; height: 100%; text-align: center; line-height: 75%;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);
}

 /*BTN PLUS MSG*/
 .conteneur_pop{display:none;}
 .pop_msg{ z-index: 1200; padding :0.8em; font-size: 1em; color:white;  background: #008696;  width:160px; text-align: center; line-height:100%;
     border-radius: 0.5em;
     -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em;
     -ms-border-radius: 0.5em; -o-border-radius: 0.5em;
 }

 .bulle_msg{ z-index: 1200; position: absolute; padding :0.5em; font-size: 1.2em; color:white; background: #008696; width:250px; text-align: center; line-height:100%;
     border-radius: 0.5em;
     -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em;
     -ms-border-radius: 0.5em; -o-border-radius: 0.5em;     
 }

 /*BULLE ANIM*/
.conteneur_bulle_anim{ z-index: 1100; position: absolute; padding :0.8em; font-size: 1.2em; color:white; background: #008696; width:200px; text-align: center; line-height:100%;
     border-radius: 0.5em;
     -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em;
     -ms-border-radius: 0.5em; -o-border-radius: 0.5em;
 }
.bulle_anim_msg{ position: absolute; bottom:0; right:0; padding :0.5em; font-size: 1em; color:white; background: #008696; width:250px; text-align: center; line-height:100%;
     border-radius: 0.5em;
     -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em;
     -ms-border-radius: 0.5em; -o-border-radius: 0.5em;
 }
 .bulle_anim_msg:after{ content: ''; position: absolute; border-style: solid; border-width: 1em 1em 0; border-color: #008696 transparent; display: block; width: 0; z-index: 1; bottom: -9%; left: 76%; }

 #bulle_anim_msg_10{width:180px;}

/*MARRAKECH PORTES & RYAD*/
#conteneur_porte{
     perspective:1000;
     -webkit-perspective: 1000; -moz-perspective:1000;
     -ms-perspective:1000; -o-perspective:1000;

     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d;
 }
#conteneur_ryad{
     perspective:1000;
     -webkit-perspective: 1000;-moz-perspective:1000;
     -ms-perspective:1000;-o-perspective:1000;

     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;
 }
 .porte_img_left{position:absolute; left:0%; width:200%;}
 .porte_img_right{position:absolute; left:-100%; width:200%;}

 /*PORTES*/
 .porte{ position:absolute; width:50%; height:100%;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d;
 }
 .porte_left{ left:0; overflow: hidden; 
     transform-origin: right;
     -webkit-transform-origin: right; -moz-transform-origin: right;
     -ms-transform-origin: right; -o-transform-origin: right;

     transform: rotateY(0deg);
     -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);
 }
 .porte_right{right: 0; overflow: hidden; 
     transform-origin: left;
     -webkit-transform-origin: left; -moz-transform-origin: left;
     -ms-transform-origin: left; -o-transform-origin: left;

     transform: rotateY(0deg);
     -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);
 }

 /*RYAD*/
 .ryad{position:absolute; width:50%; height:100%;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d;
 }

 .ryad_left{ left:0; overflow: hidden; 
     transform-origin: right;
     -webkit-transform-origin: right; -moz-transform-origin: right;
     -ms-transform-origin: right; -o-transform-origin: right;

     transform: rotateY(90deg);
     -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg);
     -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg);
 }
 .ryad_right{ right: 0; overflow: hidden; 
     transform-origin: left;
     -webkit-transform-origin: left; -moz-transform-origin: left;
     -ms-transform-origin: left; -o-transform-origin: left;

     transform: rotateY(-90deg);
     -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg);
     -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg);
 }
 /*OUARZ CLAPET */
 #conteneur_clapet{z-index: 1300;
     transform: rotate(20deg);
     -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
     -ms-transform: rotate(20deg); -o-transform: rotate(20deg);
 }

 .clapet{position: absolute;}
 #clapet1{width:83%;right:0;}
 #clapet2{ width:80%; left:20%; bottom: 32%;
     transform: rotate(23.7deg);
     -webkit-transform: rotate(23.7deg); -moz-transform: rotate(23.7deg);
     -ms-transform: rotate(23.7deg); -o-transform: rotate(23.7deg);

     transform-origin: left top;
     -webkit-transform-origin: left top; -moz-transform-origin: left top;
     -ms-transform-origin: left top; -o-transform-origin: left top;
 }
 /*OUARZ TOMBE : PREPARATION */
 #conteneur_ouarz{
     perspective:1000;
     -webkit-perspective: 1000; -moz-perspective:1000;
     -ms-perspective:1000; -o-perspective:1000;

     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d;
 }
 #ville_ouarz{ width:100%; height: 100%; 
     transform-origin: bottom ;
     -webkit-transform-origin: bottom ; -moz-transform-origin: bottom ;
     -ms-transform-origin: bottom ; -o-transform-origin: bottom ;

     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;  -o-transform-style: preserve-3d;
 }


/*.popin_anim {display: block; position: absolute; bottom: 0; left: 0; right: 0; z-index: 600; margin: auto; background-position: center bottom; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;
-webkit-transition: height 500ms ease-in;
-moz-transition: height 500ms ease-in;
-o-transition: height 500ms ease-in;
-ms-transition: height 500ms ease-in;
transition: height 500ms ease-in;}
.popin_anim a:hover {color: #008696;}
.popin_anim .user,
.popin_anim .close,
.popin_anim .n_oeuvres {position: absolute;}
.popin_anim .user {top: 35px; left: 40px; display: block; height: 60px; background: url(../images/maroc/icon_user.png) no-repeat 0 center; padding: 15px 0 0 65px; font-family: 'mondara_sansbold'; font-size: 15px; color: #6c584f;}
.popin_anim .close {top: 10px; right: 40px; font-size: 48px; color: #fff;}*/

#popin_fin {position: absolute; background: #d1b188; border: 2px solid #f1ddc4;width: 700px; height: auto;padding: 10px 0;top: 15%;bottom: auto;left: 0;right: 0;margin: auto;z-index: 600;display: block;}
#popin_fin .close {top: 5px; right: 5px; font-size: 32px; color: #fff;position: absolute;}
#popin_fin h1,
#popin_fin h2 {text-align: center; padding: 5px;}
#popin_fin h1 {color: #fff; text-transform: uppercase; line-height: 1; margin-top: 10px;font-size: 32px;}
#popin_fin h1 big {display: block; font-family: 'mondara_sansbold'; color: #86575b;}
#popin_fin h2 {color: #6c584f; font-weight: bold; font-size: 30px;}
#popin_fin p {text-align: center;font-family: 'mondara_sansregular';color: #6c584f; font-size: 22px; padding: 20px 20px; background: #d6b994; line-height: 20px; margin: 10px 0px 10px 0px;}
#popin_fin p big {text-transform: uppercase; font-family: 'mondara_sansbold';}
#popin_fin p a{color: #86575b; text-transform: uppercase;}
#popin_fin p a:hover{text-decoration: underline;}
#popin_fin img {position: absolute; width: 100px; bottom: 0; left: -5px;}
#popin_fin .footer_pop_intro {margin: 20px 0 0 95px; text-align: center; text-transform: uppercase;}
#popin_fin .footer_pop_intro li {display: inline-block;}
#popin_fin .footer_pop_intro li a {margin: 10px; font-size: 15px; color: #6c584f;}
#popin_fin .footer_pop_intro li a:hover {text-decoration: underline;}

#ctn-scroll {position: absolute; background: rgba(0,0,0,0.4); margin:auto; width:400px; height: auto; left: 0;right: 0; top:28%; text-align: center; z-index: 600; display: none; }
#ctn-scroll .btscroll {width:60px; height:60px; padding:0px; margin: 0px;}
#ctn-scroll #btscroll-up {position:relative; top:0px;}
#ctn-scroll #btscroll-down {position:relative; bottom:0px;}
#ctn-scroll #pscroll {padding: 40px; font-size: 30px; color: #fff; }



 /* RESPONSIVE ADJUSTMENTS
-------------------------------------------------- */

@media (max-width: 1500px) {
#bulle_anim_msg_8{width:220px;}
#bulle_anim_msg_7{width:220px;}
#bulle_anim_msg_9{width:180px;}
}

@media (max-width: 992px) {
.bulle_msg{font-size: 1em;}
.bulle_anim_msg{font-size: 0.8em;width:160px;}
#bulle_anim_msg_10{width:130px;}
}
@media (max-width: 768px) {
.pop_msg{font-size: 0.8em;}
}



@media (max-height: 600px) {
.pop_msg{font-size: 0.8em;}
.bulle_msg{font-size: 1em;}
.bulle_anim_msg{font-size: 0.8em;width:250px;}
#bulle_anim_msg_1{font-size: 0.8em; width:250px;}
#bulle_anim_msg_2{font-size: 0.8em; width:230px;}
#bulle_anim_msg_9{font-size: 0.8em; width:160px;}
#bulle_anim_msg_10{width:130px;}
}

@media (max-width: 1500px) and (max-height: 750px) {
     #bulle_anim_msg_8{font-size: 0.8em; width:180px;}
     #bulle_anim_msg_7{font-size: 0.8em; width:180px;}
}
@media (max-width: 970px) and (max-height: 600px) {
     #bulle_anim_msg_8{font-size: 0.8em; width:160px;}
     #bulle_anim_msg_7{font-size: 0.8em; width:160px;}
}


@media (max-width: 1600px) and (max-height: 900px) {
     .points_bulle{line-height: 50%;}
}
@media (max-width: 1250px) and (max-height: 780px) {
     .points_bulle{line-height: 58%; font-size: 1.5em;}
     .marker{border: 0.15em solid white;}
}
@media (max-width: 992px) and (max-height: 600px) {
     .points_bulle{line-height: 65%; font-size: 1em;}
     .marker{border: 0.10em solid white;}
}


/* Smartphones (portrait and landscape) ----------- */
/* Jeu concours smartphone ----------- */
@media (max-device-height : 360px) and (max-device-width : 640px) {
     .oeuvre{ pointer-events: none; cursor: default;}
}



/* Tablette orientation portrait */
@media (min-device-height :701px) and (orientation : portrait)  {
     #msg_portrait{display: block;font-size:2em;}
}/* Smartphone orientation portrait */
@media (max-device-height :700px) and (orientation : portrait)  {
     #msg_portrait{display: block;font-size:1.5em;}
}

/* Orientation Landscape tout device et desktop*/
.msg_portrait{display: none; background-color: rgba(0,0,0,0.9); width:100%; height:100%; position: fixed; z-index: 99999; text-align: center;
font-family: 'mondara_sansbold'; color :#fff; font-size:1.5em;}

.msg_portrait  p{
     position:relative;
     top:25%;
      
}

.msg_portrait span{
     position:relative;
     display: block;
     top: 30%;
     margin: auto;
}

.msg_portrait span img {
     position:relative;
     width:100px;
     height:100px;
     margin:20px;
}

@media (max-device-height: 600px) {
     #popin_fin h1 {font-size: 18px; padding-top: 30px;}
     #popin_fin {top: 10px; width:100%;}
     #popin_fin p{top: 0px; width:100%; padding: 12px 12px;}
     #popin_fin .footer_pop_intro{margin: 10px 0 0 95px;}
}

@media (max-device-width: 650px) and (max-device-height: 370px) {
     #webdoc #mini_map {right:70px;height: 36px;}
     #webdoc #mini_map a img {width:100px;}
}