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

/*
Usefull Colours
Main Orange : #E86803;
Main Blue : #6198b6;
*/


/* ==|== primary styles =====================================================
   Author:BIG Communications
   ========================================================================== */
html { box-sizing: border-box}
body { box-sizing: border-box; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; }

/* ==|== Fonts================================================== */

@font-face {
		font-family: 'Stag-Bold';
		src: url('../fonts/Stag-Web-Bold.eot');
		src: url('../fonts/Stag-Web-Boldeot?#iefix') format('embedded-opentype'),
				 url('../fonts/Stag-Web-Bold.woff') format('woff'),
				 url('../fonts/Stag-Web-Bold.ttf') format('truetype'),
				 url('../fonts/Stag-Web-Bold.svg#stag-bold') format('svg');
		font-weight: normal;
		font-style: normal;
}


@font-face {
		font-family: 'Stag-Semibold';
		src: url('../fonts/Stag-Web-Semibold.eot');
		src: url('../fonts/Stag-Web-Semiboldeot?#iefix') format('embedded-opentype'),
				 url('../fonts/Stag-Web-Semibold.woff') format('woff'),
				 url('../fonts/Stag-Web-Semibold.ttf') format('truetype'),
				 url('../fonts/Stag-Web-Semiboldsvg#stag-semibold') format('svg');
		font-weight: normal;
		font-style: normal;
		
}

.hide{display:none;}
p {  margin:0 0 5px 0px; color:#BB892F; }

/* ==|== Links ================================================== */
a, a:visited { text-decoration:none; color:#BB892F;  }
a:hover { text-decoration:underline;color:#BB892F;  }  
.title, .circle {font-family:'Stag-Semibold'; font-size:14px; }   


/*a.btn {background:url(../img/right.png) right 9px no-repeat;  margin:10px 0 10px 0px; float:left; font-family:'Stag-Semibold'; font-size:15px; color:#FFF; border:1px solid #FFF;}  
a.btn:hover { color:#BB892F; text-decoration:none; border:1px solid #BB892F;     }   
a.btn {-moz-border-radius: 2px;-webkit-border-radius: 2px;-khtml-border-radius: 2px;border-radius: 2px;}*/

 
 /* ==|== Main Questions Styles ================================================== */  
.main-question, .page-title, .about-page-title { font-family: 'Stag-Bold'; color:#FFF; text-align:center; font-size:20px; text-transform:uppercase; /*margin:120px auto 0 auto;*/ position:relative;  }
.main-question { /*margin-top:135px;*/ padding:15px 0 25px 0px; }
.page-title { width:360px;  }
.about-page-title { width:360px; margin-bottom:20px;  }
.page-title p, .about-page-title p { color:#FFF;  text-transform: none; overflow:hidden; }
.main-question p, .page-title p, .about-page-title p {  width: 335px;  margin:0 auto 0 auto; color:#FFF; line-height:120%; }
.main-question.threelines p  { margin:5px auto 0px auto; padding:0 0 5px 0px; font-size:28px; color:#FFF; }
.main-question.threelines-long p  { margin:0px auto 0px auto; padding:0 0 5px 0px; font-size:26px; color:#FFF; line-height:100%;}
.double-arrows { position:relative; width:146px; margin:-25px auto 0 auto; z-index:10; }

  
/*--------------Page wrapper---------------------------------------------*/ 
.wrapper {height:362px;overflow:hidden;width:448px;z-index: 1000;}
.container {margin:0px auto 0 auto; max-width:550px; min-width:540px; clear:both;overflow:hidden;padding:0 0 100px 0;}
.main-panel { margin:5px 0 0 35px; overflow:hidden; }
.lt-ie8 .main-panel {margin:0px auto 0 auto; overflow:hidden;width:550px;}

.content-panel { min-height:200px; margin:0 auto 50px auto; padding:0px 0px 20px 0px; display:block;  position:relative; overflow:hidden; border-bottom: 2px solid white; }
.content-panel.about { border: none; }
.content-panel .negative-answer { display:none; }
.content-panel .positive-answer { display:none; }
.content-panel p { color: #FFF; }
.content-panel p a { font-weight:bold; text-decoration:underline; }
.content-panel .title { color:#FFF; text-align:center; font-size:45px; margin:0px 0 25px 0px; /*padding:25px 20px 45px 20px;*/  line-height:100%;  }
.content-panel .title.twolines { margin:0px 0 10px 0px; padding:10px 20px 20px 20px;  }
.content-panel .title.threelines { margin:0px 0 10px 0px; padding:20px 20px 30px 20px;  }
.content-panel .title.fourlines { margin:0px 0 10px 0px; padding:15px 20px 30px 20px;  }
.content-panel p { /*padding:0px 20px 0px 20px;*/ font-size:12px; text-align: center; margin: 10px 0px 25px; }



/*--------------Relationship checker---------------------------------------------*/ 
.wrapper-relationship-checker { min-height: 100%; position:relative; overflow:hidden;  background:url(../img/main-background-relationship-checker.png) no-repeat;}
.question-answer-wrapper{overflow:hidden;z-index:2000;}

.lt-ie8 .question-answer-wrapper{left:377px;height:390px; padding:110px 0 0 0;}

.relationship-wrapper {	overflow: : hidden;	padding:0 0 0 25px;  margin:0 auto 0 auto; float:left;}

.relationship-wrapper .relationship-panel-container { width:10000px; }
.relationship-panel { opacity: 0.0; float: left; width:250px; margin:0px 0 0 30px; padding:0px; overflow:hidden;font-size:11px;}
.relationship-panel.active{ opacity: 1.0; }
.relationship-title { overflow:hidden; padding:10px; }
.relationship-title.singleline { padding:10px; }
.relationship-title  .title { color:#FFF; text-align:center; font-size:15px; line-height:100%;  }

.questions-wrapper {min-height:210px;}
.question {  overflow:hidden;/* height:52px;*/  overflow:hidden; cursor:pointer;margin:0 0 0 12px; }
.question.end {  overflow:hidden; background-image:none; padding:0px; margin:auto;height:auto; width:250px; overflow-y:auto; height:225px;  }

.question:hover, .question.selected { overflow:hidden;	 background:url(../img/questions-bg.png) no-repeat;}
.question.a:hover, .question.a.selected {background-position:0px 1px;}
.question.b:hover, .question.b.selected {background-position:-1px 0px;}
.question.c:hover, .question.c.selected {background-position:0px 0px;}
.question.d:hover, .question.d.selected {background-position:-1px 0px;}


.question.end:hover, .question.end.selected{overflow-y:auto;}
.question .choice { color:#FFF; width:30px; float:left; padding:13px 0 0 7px; font-size:25px; font-family:'Stag-Semibold';margin-top:-15px; }
.question:hover .choice { color:#FFF; }
.question .text { color:#FFF; width:190px; float:left; padding:5px 10px 5px 0px; line-height:120%; vertical-align:central; }
/*.question.selected {  overflow:hidden; background:url(../img/questions-bg.png) -1px 10px no-repeat; color:#FFF; }*/
.question.selected .choice { color:#FFF; }

.relationship-panel.finish .question{cursor: default;}
.relationship-panel.finish .question:hover{background:none;  cursor:default; }
.relationship-panel.finish .question .solutions{display:none; padding:0px 20px 20px 20px; float:left; }
.relationship-panel.finish .question .solutions p { color: #FFF; }
.relationship-panel a { font-weight:bold; text-decoration:underline; }
.relationship-container {overflow:hidden; position:absolute; width:100%;margin:25px 0 0 0px;z-index:2000; padding:30px 0 50px 0;right:0px;}


/* ==|== Relationship checker questionnevigation styles ================================================== */
.question-navigation { width:247px; overflow:hidden; margin:15px 0 10px -32px; padding-top:10px; cursor: pointer;border-top:1px solid #fff;bottom:59px;margin-left:5px;}

/*a.btn.left{ float:left; margin:0 0 0 0px; padding:10px 20px 10px 40px; text-align:right;  background:url(../img/left.png)  no-repeat; font-weight:normal; }
a.btn.right { font-weight:normal; }
a.btn.right:hover {  background:url(../img/right.gif)  no-repeat;  }*/
a.btn.about-checker {
	padding:10px 40px 10px 20px; 
	margin:0 0 0 10px; 
	width:170px; 
	float:left; 
	font-weight:normal; 
	text-decoration:none;
	font-family:'Stag-Semibold'; 
	font-size:15px; color:#FFF; 
	border:1px solid #FFF;
	-moz-border-radius: 2px;-webkit-border-radius: 2px;-khtml-border-radius: 2px;border-radius: 2px;
 	background:url(../img/right.png) 193px 15px no-repeat;}

/*--Question Navigation states--*/
a.btn{color:#fff;}
a.btn.right, a.btn.finish{ float:right;margin:0 0px 0 0px;}
.question-navigation a.btn {
 	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	 filter: alpha(opacity=20);
	 -moz-opacity: 0.2;
	 -khtml-opacity: 0.2;
	 opacity: 0.5; 
	 cursor: default; border:none; text-decoration:none; 
	 font-size:12px;}

.question-navigation a.btn.enabled {  	 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	 filter: alpha(opacity=100);
	 -moz-opacity: 1.0;
	 -khtml-opacity: 1.0;
	 opacity: 1.0;  }

.question-navigation a.btn.enabled{opacity: 1;cursor: pointer;}
a.btn.left { background:url(../img/left.png) 0 2px no-repeat; padding:0px 0px 0px 20px; margin-left: 0px; float:left;}
a.btn.right { background:url(../img/right.png) 86px 2px no-repeat; padding:0px 20px 0px 0px; margin-right: 0px;float:right; }
a.btn.left.enabled:hover { color:#BB892F; }
a.btn.right.enabled { }
a.btn.right.enabled:hover { color:#BB892F; }


/* ==|== Button Hover effect Styles ================================================== */
.main { margin: 0 auto; height:400px; }


/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 960px) {  
.section.group { position:relative; width:auto;  }  
}