@font-face {
    font-family: ost;
    src: url('../fonts/Ostrich_Sans_Inline-regular.otf');
    src: url('../fonts/ostrich_sans_inline-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich_sans_inline-regular-webfont.woff') format('woff'),
         url('../fonts/ostrich_sans_inline-regular-webfont.ttf') format('truetype'),
         url('../fonts/ostrich_sans_inline-regular-webfont.svg#ostrich_sans_inlineregular') format('svg');

}

html,body{
	font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
	font-size: 100%/1.5;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	height: 100% !important;
}


section{
	height: 100%;
	width: 100%;
	color: white;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
}

#banniere{
	height:5%;
	width: 100%;
	background-color: transparent;
	position: fixed;
	z-index: 380;

}

#accueil, #see-result{

	background-color: #e1fbf8;
	background-position: center;
	background-size: auto;
	color: #8ca3f2;

}

#credits p, #credits a{
	color: #9E6DD3;
	text-decoration: none;
}

.title-credits{
	font-family: Quicksand;
	font-size: 0.5em;
	text-transform: none;
}

a.prev-screen{
	border: none;
	background-color: transparent;
	opacity: 0.6;
	top: 15px;
	text-decoration: none;
	position: absolute;
	left: 50%;
	width: 30px;
	margin-left: -15px;
	z-index: 390;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

a.prev-screen:hover{
	opacity:1;
}

a.prev-screen span{
	color: #333;
	font-size: 0.8em;
	min-width: 50px;
}

.texte-accueil{
	margin: 0 auto;
	text-align: center;
	color: #8ca3f2;
	width: 65%;
	text-transform: uppercase;
	margin-top: 5%;
	line-height: 1.2em;
}

.texte-accueil p, .bloc-question-texte p{
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;

}

.share_box {
	padding-top: 5px;
	padding-right: 5px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 500;
}

.logo{
	padding-top: 5px;
	padding-left: 5px;
	position: fixed;
	left: 4%;
	width: 20%;
	top: 1%;
	z-index: 400;
}

.logo a{
	opacity: 0.6;
}

.logo a:hover{
	opacity: 1;
}

.logo a span{
	opacity: 0;
	position: absolute;
	top: 25%;
	color: #555;
}

.logo a:hover span{
	opacity: 1;
}

#home{
	top:3%;
	left: 3%;
}


#q1{background: rgb(255,255,243);}
#q2{background: rgb(237,235,235) ;}
#q3{background: rgb(253,244,231) ;}
#q4{background: rgb(0,200,211);}
#q5{background: rgb(255,255,243) ;}
#q6{background: rgb(255,215,233) ;}
#q7{background: #faffe6 ;}
#q8{background: rgb(229,251,248);}
#q9{background: #fffff3 ;}

#q1 .bloc-question-texte{color: rgb(116,192,196);}
#q2 .bloc-question-texte{color: rgb(79,9,51);}
#q3 .bloc-question-texte{color: rgb(237,185,137);}
#q4 .bloc-question-texte{color: rgb(255,255,255);}
#q5 .bloc-question-texte{color: rgb(90,236,171);}
#q6 .bloc-question-texte{color: rgb(140,163,242);}
#q7 .bloc-question-texte{color: #f18891;}
#q8 .bloc-question-texte{color: rgb(140,163,242);}
#q9 .bloc-question-texte{color: rgb(232,89,100);}

#q1 .bloc-reponse-texte{color: rgb(41,223,126);}
#q2 .bloc-reponse-texte{color: rgb(171,120,224);}
#q3 .bloc-reponse-texte{color: rgb(234,134,240);}
#q4 .bloc-reponse-texte{color: rgb(239,255,219);}
#q5 .bloc-reponse-texte{color: rgb(221,176,51);}
#q6 .bloc-reponse-texte{color: rgb(241,136,145);}
#q7 .bloc-reponse-texte{color: rgb(140,163,242);}
#q8 .bloc-reponse-texte{color: rgb(238,140,202);}
#q9 .bloc-reponse-texte{color: rgb(41,223,126);}

#q1 .bloc-reponse-texte:hover,#q1 .active{background-color: rgb(41,223,126); color:#fff; }
#q2 .bloc-reponse-texte:hover,#q2 .active{background-color: rgb(171,120,224); color:#fff; }
#q3 .bloc-reponse-texte:hover,#q3 .active{background-color: rgb(234,134,240); color:#fff; }
#q4 .bloc-reponse-texte:hover,#q4 .active{background-color: rgb(239,255,219); color:rgb(0,200,211); }
#q5 .bloc-reponse-texte:hover,#q5 .active{background-color: rgb(221,176,51); color:#fff; }
#q6 .bloc-reponse-texte:hover,#q6 .active{background-color: rgb(241,136,145); color:#fff; }
#q7 .bloc-reponse-texte:hover,#q7 .active{background-color: rgb(140,163,242); color:#fff; }
#q8 .bloc-reponse-texte:hover,#q8 .active{background-color: rgb(238,140,202); color:#fff; }
#q9 .bloc-reponse-texte:hover,#q9 .active{background-color: rgb(41,223,126); color:#fff; border:1px solid #fff; box-shadow: inset 0 0 0 -1px #fff ;}

#q1 .bordered{border-left: 1px solid rgb(116,192,196);border-right: 1px solid rgb(116,192,196);}
#q1 .bloc-question{border-top: 1px solid rgb(116,192,196);border-bottom: 1px solid rgb(116,192,196);}

#q2 .bordered{border-left: 1px solid rgb(79,9,51);border-right: 1px solid rgb(79,9,51);}
#q2 .bloc-question{border-top: 1px solid rgb(79,9,51);border-bottom: 1px solid rgb(79,9,51);}

#q3 .bordered{border-left: 1px solid rgb(237,185,137);border-right: 1px solid rgb(237,185,137);}
#q3 .bloc-question{border-top: 1px solid rgb(237,185,137);border-bottom: 1px solid rgb(237,185,137);}

#q4 .bordered{border-left: 1px solid rgb(255,255,255);border-right: 1px solid rgb(255,255,255);}
#q4 .bloc-question{border-top: 1px solid rgb(255,255,255);border-bottom: 1px solid rgb(255,255,255);}

#q5 .bordered{border-left: 1px solid rgb(90,236,171);border-right: 1px solid rgb(90,236,171);}
#q5 .bloc-question{border-top: 1px solid rgb(90,236,171);border-bottom: 1px solid rgb(90,236,171);}

#q6 .bordered{border-left: 1px solid rgb(140,163,242);border-right: 1px solid rgb(140,163,242);}
#q6 .bloc-question{border-top: 1px solid rgb(140,163,242);border-bottom: 1px solid rgb(140,163,242);}

#q7 .bordered{border-left: 1px solid #f18891;border-right: 1px solid #f18891;}
#q7 .bloc-question{border-top: 1px solid #f18891;border-bottom: 1px solid #f18891;}

#q8 .bordered{border-left: 1px solid rgb(140,163,242);border-right: 1px solid rgb(140,163,242);}
#q8 .bloc-question{border-top: 1px solid rgb(140,163,242);border-bottom: 1px solid rgb(140,163,242);}

#q9 .bordered{border-left: 1px solid rgb(41,223,126); border-right: 1px solid rgb(41,223,126);}
#q9 .bloc-question{border-top: 1px solid rgb(41,223,126); border-bottom: 1px solid rgb(41,223,126);}

/******** PROFILS  **********/

#egoiste{background: #EDEBFF;}
#difficile{background: #fdf4e7;}
#reflechi{background: #e5fbf8;}
#rebelle{background: #eeeef0;}
#business{background: #fff2f8;}
#obeissant{background: #fffff3;}



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

.start-test{
	margin: 0 auto;
	background: url('../images/btn.png') no-repeat center;
	margin-top: 5%;
	font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
	font-size: 1.5rem;
	text-decoration: none;
	opacity: 0.8;
	min-height: 62px;

}

.start-test:hover, .carac-profil:hover{
	opacity: 1;
}

.carac-profil{
	margin: 0 auto;
	border: 2px solid #A863AD ;
	background: #e986f0;
	font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
	font-size: 100%;
	max-width: 60%;
	text-decoration: none;
	opacity: 0.8;	
	padding: 1%;
	
}

.start-link{
	text-decoration: none;
	color: #fff;
	display: block;
	text-align: center;
	max-height: 62px;
	line-height:2em;
}

.carac-profil .start-link:hover span{
	text-decoration: underline;
}


.bloc-question-texte, .texte-accueil{
	font-family: ost;
	
	font-size: 3.5em;

}

.content{

	margin: 0 auto;
	padding: 0;

	min-height: 300px;
	/*height: 90%;*/
	max-height: 600px;

	min-width: 600px;
	/*width: 90%;*/
	max-width: 1400px;
	
	padding-top: 5%;
}

.content_profil{
	margin: 0 auto;
	padding: 0;
	width: 90%;
	height: 80%;

}

.clear{
	clear: both;
}

.bloc-reponse{

	margin: 0;
	padding: 0;
	width:32.9%;
	height: 32.9%;
	float: left;
	text-align: center;
	
	
}

.bordered{
	/*border-right: 1px solid blue;
	border-left: 1px solid blue;*/
}

.bloc-question-texte{
	margin: 0 auto;
	width: 75%;
	height: 85%;
	display: inline-block;
	vertical-align: middle;
	
}

.bloc-question-texte p{
	display: block;
	line-height: 2.5em;
}

.bloc-question-texte span{
	display: inline-block;
	line-height: 1em;
	/*vertical-align: middle;*/
}

.bloc-reponse-texte  {
	
	height: 80%;
	width: 75%;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	padding: 4%;

}

.bloc-reponse-texte p{
	display: block;
	line-height: 7em;
	font-size: 1.1em;

}

.bloc-reponse-texte span{
	display: inline-block;
	line-height: 2em;
	vertical-align: middle;
}


.bloc-question{
	margin: 0;
	padding: 0;
	width: 99.9%;
	height: 32.9%;
	text-align: center;
	vertical-align: middle;
	margin: 2% 0 2% 0;

}


/************************** BLOC GAUCHE PROFIL  ***************************************/

.left-layout{

	height: 100%;
	margin: 0;
	padding: 0;
	width: 30%;
	position: absolute;
	background: #e986f0;
	left:-30%;
	padding-right: 3%;
	z-index: 550;
	opacity: 0.9;

}

.rond {
	margin: 0;
	padding: 0;
    width: 40px;
    height: 40px;
    background: #e986f0;
    -webkit-border-radius: 20px / 20px;
    -moz-border-radius:    20px / 20px; 
    border-radius:         20px / 20px; 
    position: absolute;
    top:50%;
    left:95%;
}


.rond img{
	position: absolute;
	top:25%;
	left: 35%;
	max-width: 50%;
}

.text_folder{
	color: #000000;
    font-size: 0.9em;
    font-weight: inherit;
    text-align: left;
    width: 90%;
	padding: 8% 4% 5% 5%;

}


.title_folder{ 
	border-bottom: 1px solid;
    font-weight: normal;
    margin-bottom: 20px !important;
    padding-top: 20px !important;
    vertical-align: middle;
    width: 100%;
    line-height: 1.4em;
}

.titre-cat-folder{

	color: #333;
	font-weight: 300;
	font-size: 1.5em;

}

.folder {width:500px;height:100%;background:#000;left:-180px;top:0px;position:absolute;box-shadow: 0 0 10px #AAAAAA;padding-top:20px}

.folder ul { 
	margin-top: 15px;
    padding-left: 15px;
}

.folder ul li {line-height:15px}

.rotated {
  transform: translate(-10%,0%) rotate(180deg);
  -ms-transform: translate(-10%,0%) rotate(180deg); /* IE 9 */
  -moz-transform: translate(-10%,0%) rotate(180deg); /* Firefox */
  -webkit-transform: translate(-10%,0%) rotate(180deg); /* Safari and Chrome */
  -o-transform: translate(-10%,0%) rotate(180deg); /* Opera */
}

.img-container {
	height: 80% !important;
	width: 50%;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top: 0%;
	left:25%;
}

.img-container img{
	margin: 0 auto;
	display: -webkit-inline-box;
	position: absolute;
	top: 0%;
	width: 90%;
	left:10%;

}

#egoiste .img-container img{
	top: 10%;
}

#difficile .img-container img{
	top: -4%;
}

#reflechi .img-container img{
	top: -6%;
}



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


/************************** BLOC CENTRAL PROFIL  ***************************************/


.titre-profil{
	width: 90%;
	margin: 0 auto;
	margin-top: 5%;
	position: absolute;
	left: 10%;
}

.titre-profil p{
	font-family: ost;
	font-size: 4.5rem;
	color: #e986f0;
	text-align: center;

}

.infos-profil{

	width: 25%;
	position: absolute;
	text-align: center;
	top: 25%;
	float: left;
	color: #666;
	left:65%;
	vertical-align: middle;
	font-size: 1.1em;
	z-index: 500;
}

.infos-profil b{

	font-size: 1.2em;
}

.share{
	width: 100%;
	margin: 0 auto;
	font-size: 2em;
	text-align: center;
	position: absolute;
	top: 33%;
	left: -20%;

}

.partage a{

	width: 2em;
	height: 1em;
	text-align: center;
	line-height: 0.9em;
	font-weight: 600;
	font-size: 1.1em;
	margin-right: 0.3em;
	
}

.fa{
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	color: #999 !important;
}

.fa:hover{

	color: #e986f0 !important;

}


/*Navigation Profils */

#nav-profil{
	display: none;
	position: fixed;
	height: 100%;
	text-align: right;
	top: 45%;
	right: 2%;
	z-index: 360;

}

#nav-profil ul{
	vertical-align: middle;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#nav-profil ul li{
	display: list-item;
}

#nav-profil ul li a{
	border: 2px solid #C7C7C0;
	border-radius: 0.9em;
	display: block;
	height: 0.9em;
	line-height: 1em;
	margin: 0.6em 0;
	outline: medium none;
	position: relative;
	white-space: nowrap;
	width: 0.9em;
}

#nav-profil ul li a span{
	opacity: 0;
	position: absolute;
	top: -0.5em;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.5);
	padding: 0.25em 1em;
	padding-right: 2em;
	border-radius: 1.5em;
	font-size: 0.8em;
	right: 5%;
	-webkit-transition: opacity 0.3s ease-in-out 0s;
	-moz-transition: opacity 0.3s ease-in-out 0s;
	-ms-transition: opacity 0.3s ease-in-out 0s;
	-o-transition: opacity 0.3s ease-in-out 0s;
	transition: opacity 0.3s ease-in-out 0s;
	
}


#nav-profil ul li a:hover span, #nav-profil ul li a span.active{
	
	opacity: 1;
	color: #e986f0;

}