@charset "utf-8";
/* CSS Document */


body {background-color: #289bc1;}



/* MAIN
-------------------------------------------------- */
#main {padding-top: 0 !important;}
#main .container {height: 100%;}
#main .container #logo_white {position: absolute; top: 10px; left: 10px; z-index: 1000;}


/* BACKGROUNDS
-------------------------------------------------- */
.country {position: absolute; overflow: hidden; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-repeat: no-repeat;
-webkit-transition: height 500ms linear;
-moz-transition: height 500ms linear;
-o-transition: height 500ms linear;
-ms-transition: height 500ms linear;
transition: height 500ms linear;
}
#bg-maroc {z-index: 20; background-color: #00bcd1; background-image: url(../images/home/minaret.png); /*background-position: center 75px;*/background-position: center 0;}
#bg-paris {z-index: 10; background-color: #289bc1; background-image: url(../images/home/tour_eiffel.png);
-webkit-transition: background-size 500ms linear;
-moz-transition: background-size 500ms linear;
-o-transition: background-size 500ms linear;
-ms-transition: background-size 500ms linear;
transition: background-size 500ms linear;}


/* CONTENT
-------------------------------------------------- */
section {position: absolute; overflow: hidden; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0;}
section h1 {font-family: 'mondara_sansbold'; font-size: 40px; text-transform: uppercase; position: absolute; z-index: 100; line-height: 0.45;
/*-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
transition: all 500ms ease-in;*/}
section h2 {font-family: 'mondara_sansbold'; font-size: 40px; margin-bottom: 20px;}
section h2 small {display: block; font-size: 20px;}
section p {font-size: 18px; margin-bottom: 30px;}
section .line {display: inline-block; width: 50%; border-bottom: 1px solid rgba(255,255,255,0.4); margin-bottom: 10px;}
section .infos {opacity: 0; position: absolute; color: #fff; color: rgba(255,255,255,0.5);}
section .infos a.button {display: inline-block; height: 35px; line-height: 35px; padding: 0 15px; font-size: 18px; text-transform: uppercase; font-family: 'mondara_sansregular'; color: #02565f; background: transparent; border: 1px solid #02565f; cursor: pointer; outline: none;
-webkit-transition: background 300ms ease-in;
-moz-transition: background 300ms ease-in;
-o-transition: background 300ms ease-in;
-ms-transition: background 300ms ease-in;
transition: background 300ms ease-in;}
section .infos a.button:hover {background: rgba(255,255,255,0.4);}
.bt-back {display: none; position: absolute; left: 50%; margin-left: -50px; width: 100px; height: 60px; text-align: center; font-family: 'mondara_sansbold'; font-size: 25px; color: #000; color: rgba(255,255,255,0.4); text-transform: uppercase; background-color:rgba(0,0,20,0.4); border-radius: 8%;
-webkit-border-radius: 8%;
-moz-border-radius: 8%;
-o-border-radius: 8%;
-ms-border-radius: 8%;
z-index: 4800;
}
.bt-back span {display: block; font-size: 70px; top: -25px; opacity: 0.5;}

/* Maroc */
section#maroc {z-index: 40;}
section#maroc h1 {left: 15px;  color: #289bc1;}
section#maroc h2 {line-height: 0.7;}
section#maroc .infos {left: 65%; width: 35%;}

/* Paris */
section#paris {z-index: 30;}
section#paris h1 {right: 15px; top: 3px; color: #00bcd1;}
section#paris h2 {line-height: 0.8;}
section#paris .infos {left: 0; width: 35%; text-align: right;}



/* POSITIONNEMENT DES ELEMENTS ON HOVER
-------------------------------------------------- */

/* Default */
#bg-maroc {height: 57%; background-size: auto 100%;}
#bg-paris {background-size: auto 68%; background-position: center bottom;}
#maroc {height: 57%;}
#paris {height: 43%; top: 57%;}

/* Maroc active */
/*.maroc-active #bg-maroc {height: 90%; background-size: auto 100%;}
.maroc-active #bg-paris {background-size: auto 45%;}
.maroc-active #maroc {height: 90%;}
.maroc-active #paris {height: 10%; top: 90%;}
.maroc-active #paris h1 {display: none;}
.maroc-active #maroc h1 {color: #008696; bottom: 72%;}
/*.maroc-active #maroc .infos {opacity: 1;}
.maroc-active #paris .infos {visibility: hidden;}*/
.maroc-active #paris .bt-back {display: block; bottom: 5px;}

/* Paris active */
/*.paris-active #bg-maroc {height: 20%; background-size: auto 250%;}
.paris-active #bg-paris {background-size: auto 85%;}
.paris-active #maroc {height: 25%;}
.paris-active #maroc h1 {display: none;}
.paris-active #paris {height: 75%; top: 25%;}
.paris-active #paris h1 {color: #085a75; top: 15%;}*/
/*.paris-active #paris .infos {opacity: 1;}
.paris-active #maroc .infos {visibility: hidden;}*/
.paris-active #maroc .bt-back {display: block; top: 50px;}



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

/* SPECIFIQUE VERSION MOBILE */
@media (max-width: 768px) {
	section .infos p {margin-bottom: 0;}
	section .infos h2 {margin-bottom: 10px;}
	section .infos a.button {position: absolute; top: 10px; right: 10px; color: #02565f; background: rgba(255,255,255,0.5);}
	section .infos a.button:hover {background: rgba(255,255,255,0.7);}
	section .bt-back {font-size: 26px; height: auto;}
	section .bt-back span {display: none;}
	section#paris .infos {text-align: left;}
	section#maroc h1 {left: 5%;}
	section#paris h1 {right: 5%;}
	section#maroc .infos,
	section#paris .infos {/*visibility: hidden;*/ top: 40%; left: 50%; margin-left: -45%; width: 90%; padding: 50px 15px 15px 15px;	
	/*-webkit-transition: opacity 500ms ease-in;
	-moz-transition: opacity 500ms ease-in;
	-o-transition: opacity 500ms ease-in;
	-ms-transition: opacity 500ms ease-in;
	transition: opacity 500ms ease-in;
	transition-delay: 500ms;*/background: rgba(0,134,150,0.7);}
	.maroc-active #maroc .infos {visibility: visible; opacity: 1; top: 32%; background: rgba(0,134,150,0.7);}
	.paris-active #paris .infos {visibility: visible; opacity: 1; top: 25%; background: rgba(8,90,117,0.7);}
}

@media (max-width: 768px) and (max-height: 320px) {
	/* Maroc active */
	.maroc-active #maroc h1 {bottom: 65%;}
	.maroc-active #maroc .infos {top: 42%;}
	.paris-active #paris .infos {top: 30%;}
	section#maroc .infos,
	section#paris .infos {padding: 15px !important;}
	.maroc-active #paris .bt-back {bottom: 0;}
	/* Paris active */
	.paris-active #bg-paris {background-size: auto 85%;}
	.paris-active #bg-maroc {height: 20%; background-size: auto 300%; background-position: center 0;}
	.paris-active #maroc {height: 20%;}
	.paris-active #maroc .bt-back {top: 30px;}
	.paris-active #paris {height: 70%; top: 30%;}
}
/* END SPECIFIQUE VERSION MOBILE */



@media (min-width: 768px) {
	/* Default */
	#bg-maroc {height: 55%; background-size: auto 135%;}
	#bg-paris {background-size: auto 80%;}
	#maroc {height: 55%;}
	#paris {height: 45%; top: 55%;}
	/* Maroc active 
	.maroc-active #bg-maroc {height: 85%; background-size: auto 100%;}
	.maroc-active #bg-paris {background-size: auto 50%;}*/
	.maroc-active #maroc {height: 85%;}
	.maroc-active #paris {height: 15%; top: 85%;}
	.maroc-active #maroc h1 {bottom: 45%;}
	.maroc-active #paris .bt-back {bottom: 10px;}
	/* Paris active 
	.paris-active #bg-maroc {height: 25%; background-size: auto 360%; /*background-position: center 50px;background-position: center 0;}
	.paris-active #bg-paris {background-size: auto 91%;}*/
	.paris-active #paris h1 {top: 40%;}
	.paris-active #maroc .bt-back {/*top: 100px;*/top: 30px;}

	section h1 {font-size: 95px;}
	section h2 {margin-bottom: 30px;}
	section p {margin-bottom: 40px;}
	section .infos a.button {height: 45px; line-height: 45px; padding: 0 20px; font-size: 20px;}
	section#maroc .infos {top: 35%;}
	section#maroc h2 {font-size: 70px;}
	section#maroc h2 small {font-size: 30px;}
	section#paris h1 {top: 8px;}
	section#paris .infos {top: 20%;}
	section#paris h2 {font-size: 45px;}
	section#paris h2 small {font-size: 23px;}
}

@media (min-width: 992px) {
	section h1 {font-size: 120px;}
	section#maroc .infos {top: 30%;}
	section#maroc h2 {font-size: 90px;}
	section#maroc h2 small {font-size: 35px;}
	section#paris .infos {top: 25%;}
	section#paris h2 {font-size: 55px;}
	section#paris h2 small {font-size: 25px;}
}

@media (min-width: 1200px) {
	section h1 {font-size: 140px;}
	section#maroc h2 {font-size: 100px;}
	section#maroc h2 small {font-size: 45px;}
	section#paris h2 {font-size: 65px;}
	section#paris h2 small {font-size: 30px;}
}