@import url(../fonts/fontface.css);

html, body {
	width: 100%;
	overflow-x: hidden;
}
body {
	background-color: #2ec1c5;
	margin-top: 20px;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select :none;
/*
	-webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    */
}

article {
	display: none;
}
textarea {
	-khtml-user-select: text;
	-webkit-user-select: text;
	-moz-user-select: -moz-text;
	-ms-user-select: text;
	user-select	: text;
}

body.introduction {
	background-color: #2ec1c5;
}
body.family {
	background-color: #bfd927;
}
body.work {
	background-color: #d2cbbf;
}
body.hobbies {
	background-color: #6bc4b5;
}
body.internet {
	background-color: #d1cc3f;
}
a, a:hover, a:link {
	text-decoration: none;
	cursor: pointer;
}

.table {
	display: table;
}
.tablecell {
	display: table-cell;
	vertical-align: middle;
}

#loader, #error {
	width: 100%;
	height: 100%;
	position: absolute;
	display: table;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.6);
}
#error {
	display: none;
}
#loader .inner, #error .inner {
	display: table-cell;
	vertical-align: middle;
	background: url(../img/loader.gif) no-repeat center center;
	background-size: 30%;
}
#error .inner {
	background-image: none;
	text-align: center;
	font-family: 'florence_regularregular';
	font-size: 2em;	
}
#error .inner a {
	font-family: 'goboldregular';
	font-size: 0.7em;	
}
.wrapper {
	width: 95%;
	max-width: 1024px;
	min-width: 320px;

	margin-left: auto;
	margin-right: auto;
}

.logo a {
	display: block;
	background: url(../img/svg/logo.svg) no-repeat center center;
	width: 200px;
	height: 50px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	float: right;
}

.screen .logo a {
	position: absolute;
	margin-left: 380px;
	margin-top: 630px;
}

.intro {
	display: none;
}
.intro h1 {
	font-family: 'pacificoregular';
	font-size: 5em;
	color: #FFF;
	text-align: center;	
	margin: 0;
	margin-bottom: 30px;
}

#home .illus {
	margin: auto;
	width: 380px;
	height: 450px;
	background: url(../img/svg/home_bg.svg) no-repeat center bottom;
	background-size: 480px 400px;

}
.intro .illus img {
	margin: 0;
	padding: 0;
}
#home .illus a {
	display: block;
	float: left;
	width: 160px;
	height: 430px;
	cursor: pointer;
}
#home .illus a.girl {
	background: url(../img/svg/girl.svg) no-repeat top center;
	margin-left: 15px;
}
#home .illus a.boy {

	margin-right: 15px;	
	background: url(../img/svg/boy.svg) no-repeat top center;
}

#home .accessdata {
	

	
}

#home .accessdata  a,  #age .accessdata  a {
	color: #FFF;
	display: block;

	padding: 6px;
	padding-left: 20px;
	padding-right: 20px;
	/* background-color: #1c59a9; */
	font-family: 'florence_regularregular';
	font-size: 1.5em;
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	height: 61px;
	display: inline-block;
	line-height: 24px;
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
    width: 290px;
	float: right;
	text-align: right;

    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;

    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
}
#home .accessdata  a.infos, #age .accessdata  a.infos {
	padding: 0;
	width: 40px;
	clear: both;
	margin-right: 17px;
}

#age .accessdata  a.infos {
	margin-right: 59px;
	margin-top: -17px;
}

#country .illus {
	margin: auto;
	height: 450px;
	margin: auto;
	background: url(../img/svg/intro_country_bg.svg) no-repeat center bottom;
	background-size: 480px 450px;
	              
}

#country .illus a {
	
	display: block;
	width: 160px;
	height: 430px;
	margin: auto;
}
#country .illus .girl {		
	background: url(../img/svg/girl.svg) no-repeat top center;
}
#country .illus .boy {		
	background: url(../img/svg/boy.svg) no-repeat top center;
}

#country .countries_list, #country .countries_list_nav {
	margin: auto;
	width: 360px;
	/*background: url(../img/svg/select_countries_bg.svg) no-repeat center center;	*/
}
#country .countries_list_nav a {
	display: block;
	height: 40px;
	position: absolute;
	width: 360px;
	background-size: 110px 30px;
	background-repeat: no-repeat;
	background-position: center center;

	
}

#home .infos, #age .infos {
	width: 40px;
	background: url(../img/svg/info.svg) no-repeat center center;
	display: block;
	height: 40px;
	float: right;
	margin-top: -82px;
	margin-left: 20px;
}

a.effect {
	cursor: pointer;
	opacity: 1;

	-webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    /* Standard syntax */
    transition-property: opacity;
    transition-duration: 0.5s;
}
a.effect:hover {
    opacity: 0.4;
}
a.nopointer {
	cursor: initial;
}
#country .countries_list_nav a.up {
	background-image: url(../img/svg/up.svg);
	margin-top: -245px;
}
#country .countries_list_nav a.down {
	background-image: url(../img/svg/down.svg);
	margin-top: -125px;

}
#country .countries_list ul, #country .countries_list ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	text-indent: -10000px;
}
#country .countries_list ul li.far {
	opacity: 0.5;
	height: 50px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 25px 5px;
}
#country .countries_list ul li.near {
	opacity: 0.7;
	height: 70px;
	background-size: 60px 60px;
	background-repeat: no-repeat;
	background-position: 15px 5px;
}
#country .countries_list ul li.active {
	text-indent: 0px;
	line-height: 90px;
	height: 90px;
	font-family: 'goboldregular';
	font-size: 2.4em;	
	text-align: center;
	color: #fff400;
	text-indent: 50px;
	background-color: #00aaab;
	background-position: 5px 5px;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	cursor: pointer;
}

.countries_list ul {
	display: table-cell;
	vertical-align: middle;
}
.countries_list {
	display: table;
}

.wrapper.fr .countries_list ul li.active.cz {
	font-size: 2em !important;
}
.wrapper.de .countries_list ul li.active.cz {
	font-size: 1.7em !important;
}
.wrapper.de .countries_list ul li.active.uk {
	font-size: 1.7em !important;
}

#age .illus_left {
	
	background: url(../img/svg/age_bg_left.svg) no-repeat center center;
}
#age .illus_left .girl {
	background: url(../img/svg/girl.svg) no-repeat center center;
}
#age .illus_left .boy {
	background: url(../img/svg/boy.svg) no-repeat center center;
}


#age .illus_left, #age .illus_right {
	width: 100%;
	height: 430px;
}
#age .illus_left .sex {
	display: block;
	height: 330px;
	margin-top: 50px;

}
#age .illus_right .sex {
	display: block;
	height: 430px;
}
#age .table {
	height: 430px;
}


#age .illus_right {
	background: url(../img/svg/age_bg_right.svg) no-repeat center center;
}
#age .illus_right .girl {
	background: url(../img/svg/girl.svg) no-repeat center center;
}
#age .illus_right .boy {
	background: url(../img/svg/boy.svg) no-repeat center center;
}


.intro h3 {
	font-family: 'florence_regularregular';
	text-align: center;	
	font-size: 2.7em;
	color: #ffffff;
	margin: 0;
}

#introResults .illus {
	height: 490px; 
	width: 550px;
	margin: auto;
	background: url(../img/svg/intro_results_bg.svg) no-repeat center right;
	background-size: 430px 628px;
}
#introResults .illus .sex {
	
	width: 200px;
	display: table-cell;
	vertical-align: middle;
	height: 346px;
	float: right;
	pointer-events:none;
}
#introResults .illus .girl {
	background: url(../img/svg/girl.svg) no-repeat center center;
}
#introResults .illus .boy {
	background: url(../img/svg/boy.svg) no-repeat center center;
}
#introResults .infos {
	background: url(../img/svg/intro_results_illus.svg) no-repeat;
	background-size: 290px 130px;
	background-position: 0px 125px;
	margin: auto;
	width: 300px;
	padding-bottom: 25px;
}
#introResults .infos.off {
	background-position: 0px 25px;
}

#introResults .glad {

	font-family: 'florence_regularregular';
	font-size: 2.7em;
	line-height: 1.2em;
	color: #ffffff;
	margin: 0;
}
#introResults .value {

	font-family: 'goboldregular';
	font-size: 2.8em;
	line-height: 1em;
	color: #1c59a9;
	margin: 0;
}
#introResults .value .notavailable {
	font-size: 0.5em;
}

#introResults .party {
	font-family: 'florence_regularregular';	
	font-size: 2.5em;
	line-height: 1em;
	color: #000000;
	margin: 0;
}

#introResults button.validate {
	
	font-family: 'goboldregular';
	font-size: 2.2em;	
	text-align: center;
	color: #fff400;

    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;

    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;

	border: 3px solid #FFF400;
	background: #9c1b24;

	padding-left: 30px;
	padding-right: 30px;

	margin: auto;
	display: block;
	margin-top: 20px;
}
#introResults .map {
	position: absolute;
	width: 548px;

}
#introResults .map svg {
	
	width: 548px;
	height: 490px;
}
#introResults a.sex {
	position: absolute;
	margin-left: 350px;
	
}


#menu .illus {
	width: 250px;
	margin-top: 30px;
	background:  no-repeat top center;
	/*background-size: 234px 232px;*/

}

#menu .illus h3 {
	font-family: 'pacificoregular', cursive;
	font-size: 2.7em;
	color: #fff;
	text-align: center;
}
#menu .illus h3 a {
	color: #fff;
	display: block;
	padding-top: 240px;
}

#menu .changecriteria 
{
	float: right;	
}

#menu .changecriteria a {
	color: #FFF;
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #1c59a9;

	font-family: 'florence_regularregular';
	font-size: 1.5em;
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	height: 40px;
	display: inline-block;	
	line-height: 40px;
	margin: 0;
	margin-left: 5px;
	
	float: left;
	margin-right: 30px;

    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;

    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
}

.feedback a {
	display: block;
	height: 30px;
	line-height: 30px;
	padding-left: 50px;
	background-image: url(../img/svg/feedback.svg);
	background-size: 50px 30px;
	background-position: top left;
	background-repeat: no-repeat;
	font-family: 'florence_regularregular';
	font-size: 1.5em;
	color: #FFF;
}

 .wrapper.female #menu .illus.family {
	background-image: url(../img/menu_family_F.png);
}
 .wrapper.female #menu .illus.work {
	background-image: url(../img/menu_work_F.png);
}
 .wrapper.female #menu .illus.hobbies {
	background-image: url(../img/menu_hobbies_F.png);
}
 .wrapper.female #menu .illus.internet {
	background-image: url(../img/menu_internet_F.png);
}
 .wrapper.male #menu .illus.family {
	background-image: url(../img/menu_family_M.png);
}
 .wrapper.male #menu .illus.work {
	background-image: url(../img/menu_work_M.png);
}
 .wrapper.male #menu .illus.hobbies {
	background-image: url(../img/menu_hobbies_M.png);
}
 .wrapper.male #menu .illus.internet {
	background-image: url(../img/menu_internet_M.png);
}

#menu .illustrations {
	margin-bottom: 60px;
}

.screen h1 {
	font-family: 'florence_regularregular';
	font-size: 3.3em;
	color: #9b1b24;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}
.screen {
	display: none;
}
.panelquiz {
	height: 580px;
}

.screen.family .panelquiz {
	background-color: #a8d032;
}
.screen.work .panelquiz {
	background-color: #c7beaf;
}
.screen.hobbies .panelquiz {
	background-color: #24b6a3;
}
.screen.internet .panelquiz {
	background-color: #c4c129;
}



.panelquiz, nav, .socialnav {

	
}

.quiz {
	max-width: 500px;
	margin: auto;
}

.quiz.true_false .answer {
	padding-top: 80px;
}
.quiz.input .answer {
	padding-top: 60px;
}
.quiz.choice .answer {
	padding-top: 40px;
}

.quiz.true_false .answer .inputs {
	text-align: center;
}
.quiz.true_false .answer button {
	font-family: 'florence_regularregular';
	font-size: 3.3em;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF !important;
	padding: 5px 14px;
	min-width: 80px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: 3px solid #FFF400;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 20px;
}
.quiz.true_false .answer button.undefined {
	font-size: 2.6em;
}
.screen.family .quiz .answer button {
	background: #7AB23F;
}
.screen.work .quiz .answer button {
	background: #a59882;
}
.screen.hobbies .quiz .answer button {
	background: #00a98c;
}
.screen.internet .quiz .answer button {
	background: #b2b531;
}

.quiz .answer button:hover {
	background: #9c1b24 !important;
}


.quiz.choice .answer {
	text-align: center;
}
.quiz.choice .answer button {
	font-family: 'florence_regularregular';
	font-size: 2.5em;
	text-align: center;
	color: #FFFFFF !important;
	padding: 5px 14px;
	min-width: 80px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: 3px solid #FFF400;
	display: block;
	margin: auto;
	margin-top: 10px;
}


.quiz.input .inputs .slide {

	width: 350px;
	margin: auto;

	background: url(../img/svg/rules.svg) no-repeat center bottom;
	background-size: 350px 40px;
	height: 112px;


}




.quiz.input .inputs .slide .min, .quiz.input .inputs .slide .max {
	font-family: 'goboldregular';
	font-size: 1.8em;	
	margin-top: 15px;
	color: #000;
	opacity: 0.3;
}
.quiz.input .inputs .slide .min {
	float: left;
	margin-left: 15px;
}
.quiz.input .inputs .slide .max {
	float: right;
	margin-right: 15px;
}
.quiz.input .inputs .slide .cursorWrapper {
	height: 70px;
	width: 450px;
	
	margin-left: -48px;
	text-align: center;
	position: relative;

}
.quiz.input .inputs .slide .cursor {
	
	position: absolute;
	background: url(../img/svg/cursor.svg) no-repeat center center;
	
	width: 150px;
	height: 70px;
	line-height: 55px;
	font-family: 'goboldregular';
	font-size: 2.2em;	

	text-align: center;
	

	cursor: pointer;
}
.quiz.input .inputs .slide .cursor span {
	color: #000;
	opacity: 0.5;
	text-align: center;
}

.quiz.input .inputs {
	text-align: center;
}

.quiz.input button.validate {
	margin-top: 20px;
	font-family: 'goboldregular';
	font-size: 2.2em;	
	text-align: center;
	color: #fff400;

    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;

    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;

	border: 3px solid #FFF400;
	background: #9c1b24;

	padding-left: 30px;
	padding-right: 30px;
}
.quiz.input button.undefined {
	margin-top: 10px;
	font-family: 'florence_regularregular';
	font-size: 2em;	
	text-align: center;
	color: #FFF;
	text-transform: uppercase;

    -webkit-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;

    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;

	background: #8dc73b;

	padding-left: 30px;
	padding-right: 30px;

	border: none;
}


.quiz .response {
	display: none;
	margin-top: 40px;
}
.quiz .response {
	background: url(../img/svg/bg-results.svg) no-repeat top center;

	background-size: 415px 214px;
	min-height: 500px;
	text-align: center;
	background-position-y: 14px;

}

.quiz .response .avg_title span {
	font-family: 'florence_regularregular';
	font-size: 1.8em;
	text-align: center;
  	color: #fff400 !important;
	padding: 0px 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: 2px solid #FFF400;
	background: #9c1b24;
	width: auto;

}
.quiz .response .avg_value {
	margin-top: 5px;
}
.quiz .response .avg_value span {
	
	font-family: 'goboldregular';
	font-size: 1.8em;
	color: #9c1b24;
}
.quiz .response .avg_value span.notavailable {
	font-size: 0.8em;
}

.quiz .response .min {
	float: left;
	margin-left: 18px;
	margin-top: 18px;
	
}
.quiz .response .max {
	float: right;
	margin-right: 20px;
	margin-top: 20px;

}
.quiz .response .max, .quiz .response .min {
	max-width: 171px;
	
}
.quiz .response .flag img {
	width: 45px;
	height: 45px;
	/*border: 2px solid #fff400;*/
	float: left;
}
.quiz .response .max .flag img {
	float: right;
}
.quiz .response .min .value {
	text-align: left;
	margin-left: 3px;
}
.quiz .response .max .value {
	text-align: right;
	margin-right: 3px;
}
.quiz .response .min .value, .quiz .response .max .value {
	
	font-family: 'goboldregular';
	font-size: 1.8em;
	color: #f9f000;
	float: left;
max-width: 125px;
min-width: 66px;
	overflow: hidden;

}

.quiz .response .max .value {
	float: right;
	padding-right: 5px;
}


.quiz .response .country {
	
	font-family: 'florence_regularregular';
	
	font-size: 1.4em;
	color: #000;
	float: left;
/*max-width: 125px;*/
max-width: 135px;
min-width: 65px;
	overflow: hidden;
}
.quiz .response .min .country {
	text-align: left;
	margin-left: 3px;
	overflow: hidden;
	height: 30px;
}
.quiz .response .max .country {
	text-align: right;
	margin-right: 3px;
	overflow: hidden;
	height: 30px;

	float: right;
	padding-right: 5px;
}

.quiz .response .my_country img {
	width: 65px;
	height: 65px;
	/*border: 2px solid #fff400;*/
}

.quiz .response .my_country {
	clear: both;
	padding-top: 10px;
}
.quiz .response .txt {
	display: none;
}

.quiz .response .txt .notavailabledatas {
	display: none;
}
.quiz .response .txt {

	margin: 10px;

	font-family: 'florence_regularregular';
	font-size: 2.4em;
	color: #000;
	line-height: 1.2em;
}
.quiz .response .txt .value {
	font-family: 'goboldregular';
	font-size: 1em;	
	color: #9c1b24;
}

.quiz .response .txt .value .textYear {
	
	font-size: 0.8em;	
	
}


.quiz .response .other_sex {
  /* width: 247px; */
  /* margin: auto; */
  margin-top: 20px;
  /* margin-left: 147px; */
  /* text-align: left; */
}

.quiz.true_false .response .other_sex, .quiz.choice .response .other_sex {
/*	width: 247px;
	margin: auto;
	margin-top: 20px;
	margin-left: 147px;
	text-align: left;
*/

	width: 70px;
	margin: auto;
	margin-top: 20px;
  /* margin-left: 50%; */
  /* text-align: left; */
  /* margin-right: 50%; */
  /* border: 1px solid red; */
}

.quiz .response .other_sex .value {
	font-family: 'goboldregular';
	font-size: 1.8em;
	color: #9c1b24;
	position: absolute;
	margin-left: -88px;
	margin-top: 15px;
	text-shadow: 2px 2px 2px #fff400;
	text-align: right;
	width: 84px;

}
.quiz .response .other_sex .valueage {
	
	font-family: 'goboldregular';
	font-size: 1.8em;
	color: #9c1b24;

}
.quiz .response .other_sex .valueage {
	
	font-family: 'goboldregular';
	font-size: 1.8em;
	color: #9c1b24;

}
.quiz .response .other_sex .sexage {
	
	font-family: 'florence_regularregular';
	font-size: 1.8em;
	color: black;

}


.quiz .response .other_sex .value .notavailable {
	font-size: 0.6em;
}

.quiz .response .txt .notavailable {
	font-size: 0.6em;
}
.quiz .response .txt .notavailabledatas {
	font-size: 0.8em;
	text-transform: uppercase;
	color: #9c1b24;
}


/*
.quiz .response .other_sex .circle {
	width: 65px;
	height: 65px;
	background-color: #fff400;
	position: absolute;
}
*/
.quiz .response .other_sex .sex {
	font-family: 'florence_regularregular';
	font-size: 1.8em;
	color: #000;
	padding-top: 13px;
	padding-left: 78px;
	width: 224px;
	text-align: left;
}



.illus {
	
}
.illus img {
	margin-top: 80px;
	width: 100%;
}
.illus h2 {
	font-family: 'pacificoregular', cursive;
	font-size: 4em;
	text-align: center;
	width: 580px;
}

.screen.family .illus h2 {
	color: #91b93a;
}
.screen.work .illus h2 {
	color: #b3a895;
}
.screen.hobbies .illus h2 {
	color: #299872;
	font-size: 2.8em;
}
.de .screen.hobbies .illus h2 {
	color: #299872;
	font-size: 2.7em;
}
.screen.internet .illus h2 {
	color: #8c812e;
}

#livingWithParents {
	background-color: #bfd927;
	/*background:	url(../img/Eurostat-Jeu-jeunes.jpg) no-repeat;*/
}
.absolute {
	position: absolute;	
}
.illus .labels span {
	font-family: 'simplificasimplifica';
	font-size: 1.4em;
	color: #e85a27;
	text-transform: uppercase;

	padding: 5px;
}
.screen.family .illus .labels span {
	background-color: #cee27b;
}
.screen.work .illus .labels span {
	background-color: #e6ddba;
}
.screen.hobbies .illus .labels span {
	background-color: #e6ddba;
}
.screen.internet .illus .labels span {
	background-color: #e6ddba;
}


.bullets {
	text-align: center;
	padding-top: 10px;
}
.bullets span {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: none;
	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid #fff400;
}
.bullets span.active {
	background: #fff400;
}
nav {
	
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}
nav a {
	font-family: 'florence_regularregular';
	font-size: 2em;
	height: 40px;
	display: inline-block;	
	line-height: 40px;
	margin: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 10px;
	padding-right: 10px;

}
nav a, nav a:active, nav a:link, nav a:visited {
	color: #FFF;
	text-decoration: none;
}
nav a:hover {
	text-decoration: none;

}




nav .previous {
	background: url(../img/svg/previous.svg) no-repeat;
	padding-left: 30px;

    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;

	background-position: -12px 0px;
	background-size: 50px 40px;
}


nav .home {
	background: url(../img/svg/home.svg) no-repeat center center;
	width: 60px;
}

nav .next {
	background: url(../img/svg/next.svg) no-repeat;
	padding-right: 30px;

    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;

    background-position: 55px 0px;
	background-size: 90px 40px;
	min-width: 96px;
}

.screen.family nav .previous, .screen.family nav .home, .screen.family nav .next {
	background-color: #a8d032;
}
.screen.family nav a:hover {
	color: #7AB23F;
}
.screen.work nav .previous, .screen.work nav .home, .screen.work nav .next {
	background-color: #c7beaf;
}
.screen.work nav a:hover {
	color: #665844;
}
.screen.hobbies nav .previous, .screen.hobbies nav .home, .screen.hobbies nav .next {
	background-color: #24b6a3;
}
.screen.hobbies nav a:hover {
	color: #0f6859;
}
.screen.internet nav .previous, .screen.internet nav .home, .screen.internet nav .next {
	background-color: #c4c129;
}
.screen.internet nav a:hover {
	color: #726d0f;
}

.socialnav {
	display: none;
	text-align: center;
}
.socialnav .tab {
	font-family: 'florence_regularregular';
	font-size: 1.5em;
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	height: 40px;
	display: inline-block;	
	line-height: 40px;
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;


    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;

    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
}
.socialnav .tab a {
	color: #FFF;
	display: block;
	margin-left: 20px;
	margin-right: 20px;
}
body.introduction .socialnav .tab {
	background-color: #1c59a9;
}
body.introduction .tab .content, body.introduction  .embed .content textarea {
	background-color: #71abea;
}


body.family .socialnav .tab {
	background-color: #8dc73b;
}
body.family .tab .content, body.family  .embed .content textarea {
	background-color: #99cc33;
}


.socialnav .share .content {
	width: 90px;
	line-height: 11px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.socialnav .share .content a img { 
	width: 30px;
}
.socialnav .tab {
	margin-top: -300px;
}
.socialnav .sources .content {
	width: 180px;
	line-height: 1em;
	padding: 5px;
}
.socialnav .embed .content {
	padding: 5px;
	width: 165px;
	line-height: 1em;
}
.socialnav .embed .content textarea {
	width: 145px;
	margin: 5px;
	height: 90px;
	line-height: 1em;
	font-size: 1em;
}
body .tab .content {

	display: none;
}

body.work .socialnav .tab {
	background-color: #a59882;
}
body.work .tab .content, body.work .embed .content textarea {
	background-color: #bcb1a2;
}

body.hobbies .socialnav .tab {
	background-color: #00a98c;
}
body.hobbies .tab .content, body.hobbies .embed .content textarea {
	background-color: #22c4a4;
}

body.internet .socialnav .tab {
	background-color: #b2b531;
}
body.internet .tab .content, body.internet .embed .content textarea {
	background-color: #cece52;
}



@media only screen and (max-width : 320px) {
	.quiz.input .inputs .slide {
		
	}
	.quiz .response .min {
		margin-left: 0px;
		
	}
	.quiz .response .max {
		margin-right: 0px;
	}
	.quiz .response .other_sex {
		width: 214px;
		margin-left: 96px;

	}
}


@-moz-document url-prefix()
{
	.countries_list {
		margin: auto;
	}
	/*
    #country .countries_list_nav a {
    	width: 273px;
    }*/
    .quiz .response .my_country {
  		padding-top: 5px;
	}

	.quiz .response .avg_title span {
		display: inline-block;
		margin-top: -30px;

	}

}
#tip
{
	display: none;
	position: absolute;
	min-width: 50px;
	max-width: 150px;
	font-family: 'florence_regularregular'
	font-size: 1.2em;	
	text-align: center;
	color: #fff400;

    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px;


	border: 2px solid #FFF400;
	background: #2ec1c5;

	padding: 5px;

}

#infos
{
	
	position: absolute;
	top: 0px;
	
	background-color: rgba(255,255,255,0.8);
	width: 100%;
	height: 100%;
	overflow: scroll;
	padding: 20px;
}
#infos h2
{
	margin-top: 0px;
}

#infos a.close {
	display: block;
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
	
	margin-right: -20px;
	margin-top: -20px;

	width: 40px;
	height: 40px;
	background: url(../img/svg/close.svg) no-repeat;

	cursor: pointer;
	opacity: 1;
}