/*
TODO
eye bg austauschen
language in spritesheet?
bullets können raus
q4bg tauschen gegen spritesheet
erste frage einblenden oder anders halt von start kommmen
*/
/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */


body
{
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	color: white;
	background: #000000;
	font-weight: 400;
	overflow-x: hidden;
	min-height: 400px;
}

.bullet
{
  width: 10px;
  max-width: 10px;
  height: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: black;
  display: inline-block;
  border: solid #d0aa5e 1px;
}

.bullet.filled
{
	background: #ffffff;
}

.orline
{
	display: inline-block;
	color: #94d3c2;
	font-weight: light;
	vertical-align: middle;
	font-size: 32px;
}

.orlineline
{
	display: inline-block;
	height: 100px;
	width: 30px;
	margin-bottom: 10px;
}

.orlineinner
{
	height: 100%;
	text-align: center;
	padding: 0 50px;
	color: #ffffff;
}

.vline
{
	height: 40%;
	width: 1px;
	background: #ffffff;
	margin: auto;
}

.v_or
{
	margin: 5px 0px;
}

.js orline,
.js gender
{
	display: none;
}

.start-language
{
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 4;
}

.theader
{
	width: 100%;
	height: 106px;
	background-color: black;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	line-height: 0.7em;
	font-size: 18px;
}

.langimg, .language
{
	position: absolute;
	right: 0;
	top: 0;
}

.bullets
{
	/*line-height: 106px;*/
}

.decoline
{
	display: table-row;
	height: 5px;
	width: 100%;
}

.decoline img
{
	display: block;
	position: absolute;
}

.bgwrapper
{
	width: 100%;
	height: 100%;
	max-width: 1280px;
	margin: 0 auto;
	max-height: 1095px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.pbody
{
	width: 100%;
	height: 100%;
	max-width: 1280px;
	margin: 0 auto;
	max-height: 1095px;
	min-height: 400px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.bg_left
{
	position: absolute;
	width: 200px;
	height: 100%;
	top: 0px;
	left: -200px;
}

.bg_right
{
	position: absolute;
	width: 200px;
	height: 100%;
	top: 0px;
	right: -200px;
	background-position: -200px 0px;
}

.sidebg
{
	background-image: url(../img/body_bg.jpg);
}

#topnav,
.titleareawrapper,
.main,
.footerbar
{
	display: table-row;
	position: static !important;
}

.titleareawrapper,
#topnav,
.decoline
{
	display: none;
}

.start .main
{
	background-image: none;
}

.startcube
{
	width: 150%;
	margin-left: 50%;
	height: 50%;
	position: absolute;
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg);
	right: -35%;
	z-index: 1;
}

.startcontainer
{
	font-weight: bold;
	font-size: 200%;
	position: relative;
	z-index: 2;
}

.sc1
{
	background-color: #b6c6e6;
}

.sc2
{
	background-color: #cad6ed;
}

.sc3
{
	background-color: #d8e1f2;
}

.titleareawrapper
{
	width: 100%;
	overflow: hidden;
}

.headershadow
{
	width: 100%;
	height: 29px;
	position: absolute;
	left: 0px;
	bottom: -29px;
	background: url( ../img/header_shadow.png );
}

.titlearea
{
	width: 10000%;
	display: table;
	/*height: 100%;*/
}

.start-button
{
	position: absolute;
	width: 100%;
	bottom: 30px;
	text-align: center;
}

.startarticle
{
	background: url( ../img/start-bg-desktop.jpg ) center center no-repeat;
	background-size: cover;
	position: relative;
}

button.startbutton
{
	font-family: 'Quicksand', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	line-height: 1.2em;
	color: #fdfdfd;
	padding: 15px 70px;
	background: url( ../img/startbutton.png ) center center no-repeat;
	background-size: contain;
	border: none;
	color: #000000;
}

.startbutton-fullsize
{
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: absolute;
	top: 0px;
	left: 0px;
}

.fb_iframe_widget
{
	z-index: 5;
}

.qtitle
{
	font-size: 30px;
	text-align: center;
	line-height: 1.4;
	color: white;
	width: 1%;
	float: left;
	background-repeat: no-repeat;
	display: table;
	height: 100%;
}

.qtitle .tc
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.tmw
{
	display: inline-block;
	max-width: 800px;
	padding: 2%;
	text-transform: none;
}

.footerbar
{
	width: 100%;
	overflow: hidden;
	background-color: black;
}

.footerbarimg
{
	
	background-image: url(../img/bottombar.png);
	background-position: top right;
	width: 100%;
	height: 48px;
}

.nbox
{
	width: 73px;
	height: 73px;
	position: absolute;
}

.rbox, .rhalfbox
{
	position: relative;
	width: 20%;
	float: left;
}

.rbox:before{
	content: "";
	display: block;
	padding-top: 100%;
}

.rhalfbox:before{
	content: "";
	display: block;
	padding-top: 50%;
}

.rboxcontent{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.ib
{
	display: inline-block;
	width: 22%;
}

.eyebox
{
	width: 30%;
	margin: 1% 3.2%;
	max-width: 250px;
	min-width: 90px;
	float: none;
	display: inline-block;
}

.tcontainer
{
	display: table;
	width: 90%;
	height: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.tcontainercell
{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.start-header
{
	font-size: 45px;
	text-align: center;
	line-height: 0.9em;
	width: 735px;
	margin: 50px auto;
}

.start-header-big
{	
	font-size: 70px;
	letter-spacing: 20px;
}

.header-small
{
	font-size: 30px;
	letter-spacing: 6px;
	line-height: 0.9em;
}

.logo-link
{
	height: 48px;
	width: 290px;
	/*opacity: 0.5;*/
	float: right;
}

.logo-link img
{
	width: 100%;
	height: 100%;
}

.start-header img
{
	width: 100%;
	margin-bottom: 10px;
}

.gender
{
	display: inline-block;
	cursor: pointer;
	float: none;
	width: 20%;
	max-width: 140px;
	min-width: 50px;
	vertical-align: middle;
	position: relative;
	top: -70px !important;
}

.glr
{
	display: inline-block;
	cursor: pointer;
	float: none;
	width: 40%;
	max-width: 140px;
	min-width: 50px;
	vertical-align: middle;
	position: relative;
	top: 50px !important;
}

.ratio1_1-1:before{
	padding-top: 110%;
}

.ratio:before
{
	padding-top: 105%;
}

.mabox
{
	width: 37%;
	max-width: 180px;
	margin: 1% 2%;
	left: 100%;
	display: inline-block;
	float: none;
}

.manswer
{
	cursor: pointer;
	font-size: 23px;
	background: url( ../img/answer_box.png );
}

.leftright_b
{
	font-size: 23px;
	margin-top: 70px;
	font-weight: bold;
}

.micon
{
	height: 70%;
    left: 20%;
    position: relative;
    top: 5%;
    width: 60%;
}

.mtext
{
	color: white;
	font-size: 90%;
	padding-bottom: 4%;
	position: absolute;
	bottom: 0px;
	width: 100%;
	font-weight: bold;
	text-align: center;
	line-height: 1.1em;
}

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

.q11 .mabox
{
	margin-bottom: 14%;
}

.q11 .mtext {
    height: auto;
    padding: 0 3%;
    width: 94%;
}

.q9 .curveshadow .inner
{
	color: #996487;
	text-shadow: none;
	font-weight: normal;
}

.q8 .mtext
{
	color: #b6c6e6;
	height: 53%;
}

.q12 .a_name
{
	font-size: 70%;
}


.q11 .mtext
{
	color: #4F7B8E;
}

.eyecolor
{
	background: url(../img/answer_box.png);
	cursor: pointer;
}


.eye {
    height: 67%;
    margin-left: 62%;
    margin-top: 9%;
    position: relative;
    width: 32%;
}

.aan {
    height: 67%;
    margin-left: 62%;
    margin-top: 9%;
    position: relative;
    width: 32%;
}

.eye_name
{
	position: absolute;
	bottom: 4%;
	left: 4%;
	color: #ffffff;
	font-weight: bold;
}

.a_name
{
	position: absolute;
	bottom: 4%;
	left: 4%;
	color: #ffffff;
	font-weight: bold;
}

.main-container
{
	width: 100%;
	height: 100%;
	max-width: 1280px;
	margin: 0 auto;
	max-height: 1095px;
	overflow: hidden;
	display: table;
	table-layout:fixed;
	min-height: 400px;
}

#white
{
	position: absolute;
	background-color: #000000;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	z-index: 8;
}

#loader
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;
}

#loader img
{
	width: 50px;
	height: 50px;
}

.colorbg
{
	position: absolute;
	z-index: -1;
}

article
{
	height: 100%;
	overflow: hidden;
}

.main
{
	background-image: none;
	background-size: 100% 100%;
	height: 100%;
	max-height: 1095px;
}

.darklila
{
	color: #5d67a2;
}

.lightlila
{
	color: #9eb3de;
}

.curveshadow
{
	margin-top: -20px;
	width: 20%;
	min-width: 130px;
	overflow: hidden;
	cursor: pointer;
	display: inline-block;
	position: relative;
	background: url( ../img/answer_box.png );
}


.iconwrapper {
    margin-bottom: -14px;
    overflow: hidden;
    text-align: center;
    top: 10px;
    vertical-align: bottom;
    width: 100%;
}

.curveshadow .icon
{
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	display: inline-block;
	height: 118px;
	position: relative;
	transform-origin: 50% 100% 0;
	width: 108px;
	bottom: -156px;
}

.curveshadow .inner
{
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.1;
	padding: 5% 0;
	width: 100%;
	color: #ffffff !important;
}

#t_carer .inner,
#t_creator .inner
{
	line-height: 1.1;
}

.curveshadow .shadowtop
{
	height: 15px;
	background-image: url(../img/papershadowtop.png);
	background-position: 0 160%;
	background-repeat: no-repeat;
	position: relative;
	background-size: 100% 70%;
}

.curveshadow .shadowbottom
{
	height: 15px;
	background-image: url(../img/papershadowbottom.png);
	background-position: 0 -60%;
	background-repeat: no-repeat;
	background-size: 100% 70%;
}

.breakhelper
{
	display: none;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-height: 640px)
{
	.gender
	{
		top: -30px !important;
	}
}

@media only screen and (min-width: 480px) {

}

@media only screen and (max-width: 768px) {
	.eyebox
	{
		width: 40%;
	}
	
	.start-header
	{
		font-size: 30px;
		width: 490px;
	}
	
	.start-header-big
	{
		font-size: 40px;
		letter-spacing: 18px;
	}	
}

@media only screen and (max-width: 520px) {
	.eyebox
	{
		width: 45%;
		margin: 3% 1% 0% 1%;
	}
	
	.mabox
	{
		width: 37%;
		margin: 3% 1% 0% 1%;
	}
	
	.start-header
	{
		font-size: 16px;
		width: 260px;
	}
	
	.start-header-big
	{
		font-size: 24px;
		letter-spacing: 8px;
	}
	
	.start-header img
	{
		margin-bottom: 5px;
	}
	
	button.startbutton
	{
		font-size: 20px;
	}
	
	.footerbarimg
	{
		background-position: right 48px;
	}
	
	.logo-link
	{
		width: 200px;
	}
	
	.gender
	{
		top: -30px !important;
	}
	
	.glr
	{
		top: 40px !important; 
	}
	
	.orlineinner
	{
		padding: 0px 20px;
	}
	
	.v_or
	{
		font-size: 24px;
	}
	
	.q11 .leftright_b
	{
		font-size: 24px;
		margin-top: 60px;
	}
	
	.q11 .rbox
	{
		width: 30%;
	}
}

@media only screen and (max-width: 390px) {
	button.startbutton
	{
		font-size: 16px;
	}
	
	.theader
	{
		font-size: 14px;
	}
	
	.header-line
	{
		width: 226px;
	}
	
	.header-small
	{
		font-size: 24px;
		letter-spacing: 4px;
	}
	
	.v_or
	{
		font-size: 18px;
	}
	
	.q11 .leftright_b
	{
		font-size: 18px;
		margin-top: 40px;
	}
	
	.glr
	{
		top: 30px !important; 
	}
	
	.theader
	{
		height: 86px;
	}
	
	.start-button
	{
		bottom: 20px;
	}
}

@media only screen and (max-width: 330px) {
	button.startbutton
	{
		font-size: 14px;
	}
}

@media only screen and (max-width: 980px) {
	.breakhelper
	{
		display: inline;
	}
	.langimg
	{
		width: 57px;
	}
	
	.mabox
	{
		max-width: 21vh;
	}
}

@media only screen and (min-width: 1140px) {

}

@media only screen and (max-width: 1280px) {
	body
	{
		background-image: none;
	}
}


@media only screen and (max-aspect-ratio: 1/1)
{
	.gender
	{
		/*display: block;*/
		margin: 0 auto;
	}
	
	.bullets
	{
		/*line-height: 53px;*/
	}
}

@media only screen and (max-height: 550px)
{
	.startcontainer
	{
		font-size: 150%;
	}
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.esprite {
position: absolute;
  width: 100%;
  height: 92%;
}
.esprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
margin-left: -100%;
background-image: url(../img/espritesheet.png);
}

.esprite-q1_a1:before {
    background-position: 0% 0%;
    background-size: 300%;
    height: 100%;
}

.esprite-q1_a2:before {
    background-position: 100% 0%;
    background-size: 300%;
    height: 100%;
}

.esprite-q1_a3:before {
    background-position: 50% 0%;
    background-size: 300%;
    height: 100%;
}

.esprite-q1_a4:before {
    background-position: 50% 100%;
    background-size: 300%;
    height: 100%;
}

.esprite-q1_a7:before {
    background-position: 0% 100%;
    background-size: 300%;
    height: 100%;
}

.esprite-q1_a8:before {
    background-position: 100% 100%;
    background-size: 300%;
    height: 100%;
}



.psprite {
position: absolute;
  width: 100%;
  height: 92%;
}
.psprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
margin-left: -100%;
background-image: url(../img/pspritesheet_2.png);
background-position: center;
}

.psprite-1:before {
    background-position: 1.256% 2.786%;
    background-size: 823.6363636363636%;
    height: 216.364%;
}

.psprite-2:before {
    background-position: 18.568% 2.801%;
    background-size: 596.0526315789474%;
    height: 157.895%;
}

.psprite-3:before {
    background-position: 41.27% 2.817%;
    background-size: 604%;
    height: 161.333%;
}

.psprite-bullet_empty:before {
    background-position: 54.279% 1.724%;
    background-size: 5033.333333333334%;
    height: 94.444%;
}

.psprite-bullet_full:before {
    background-position: 58.493% 1.724%;
    background-size: 5329.411764705883%;
    height: 100%;
}

.psprite-q1_bg:before {
    background-position: 1.493% 76.404%;
    background-size: 383.89830508474574%;
    height: 102.119%;
}

.psprite-q2_a1:before {
    background-position: 43.322% 90.066%;
    background-size: 310.2739726027397%;
    height: 101.027%;
}

.psprite-q2_a2:before {
    background-position: 93.831% 3.356%;
    background-size: 312.41379310344826%;
    height: 103.103%;
}

.psprite-q3_a1:before {
    background-position: 74.968% 64.764%;
    background-size: 671.1111111111111%;
    height: 65.926%;
}

.psprite-q3_a2:before {
    background-position: 98.654% 69.409%;
    background-size: 555.8282208588957%;
    height: 75.46000000000001%;
}

.psprite-q3_a3:before {
    background-position: 71.891% 95.161%;
    background-size: 888.2352941176471%;
    height: 99.02%;
}

.psprite-q3_a4:before {
    background-position: 91.146% 97.925%;
    background-size: 656.5217391304348%;
    height: 83.333%;
}



.nssprite {
position: absolute;
  width: 100%;
  height: 100%;
}


.nssprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
margin-left: -100%;
background-position: center;
background-image: url(../img/nsspritesheet.png);
}

.nssprite-1:before {
    background-position: 0.581% 0.954%;
    background-size: 1231.578947368421%;
    height: 314.474%;
}

.nssprite-10:before {
    background-position: 13.725% 0.969%;
    background-size: 342.85714285714283%;
    height: 90.476%;
}

.nssprite-11:before {
    background-position: 51.944% 0.954%;
    background-size: 433.3333333333333%;
    height: 110.648%;
}

.nssprite-12:before {
    background-position: 54.919% 48.846%;
    background-size: 367.05882352941177%;
    height: 95.294%;
}

.nssprite-13:before {
    background-position: 0.734% 98.256%;
    background-size: 367.05882352941177%;
    height: 96.863%;
}

.nssprite-2:before {
    background-position: 34.221% 97.5%;
    background-size: 636.734693877551%;
    height: 165.30599999999998%;
}

.nssprite-3:before {
    background-position: 54.119% 97.126%;
    background-size: 636.734693877551%;
    height: 163.946%;
}

.nssprite-4:before {
    background-position: 77.121% 0.954%;
    background-size: 592.4050632911392%;
    height: 151.266%;
}

.nssprite-5:before {
    background-position: 74.018% 97.5%;
    background-size: 636.734693877551%;
    height: 165.30599999999998%;
}

.nssprite-6:before {
    background-position: 98.335% 0.962%;
    background-size: 603.8709677419355%;
    height: 156.774%;
}

.nssprite-7:before {
    background-position: 79.775% 49.237%;
    background-size: 693.3333333333334%;
    height: 177.037%;
}

.nssprite-8:before {
    background-position: 99.366% 50%;
    background-size: 636.734693877551%;
    height: 168.027%;
}

.nssprite-9:before {
    background-position: 94.878% 99.038%;
    background-size: 603.8709677419355%;
    height: 156.774%;
}



.qsprite {
position: absolute;
  width: 100%;
  height: 92%;
}
.qsprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
margin-left: -100%;
background-image: url(../img/qspritesheet.png);
background-position: center;
}

.qsprite-q03_a1:before {
    background-position: 0.909% 0.735%;
    background-size: 443.75%;
    height: 100%;
}

.qsprite-q03_a2:before {
    background-position: 31.818% 0.735%;
    background-size: 443.75%;
    height: 100%;
}

.qsprite-q03_a3:before {
    background-position: 62.727% 0.735%;
    background-size: 443.75%;
    height: 100%;
}

.qsprite-q03_a4:before {
    background-position: 0.909% 25.735%;
    background-size: 443.75%;
    height: 100%;
}

.qsprite-q_02_m:before {
    background-position: 99.038% 1.163%;
    background-size: 373.6842105263158%;
    height: 215.789%;
}

.qsprite-q_02_w:before {
    background-position: 0.962% 98.837%;
    background-size: 373.6842105263158%;
    height: 215.789%;
}


.q2sprite {
position: absolute;
  width: 100%;
  height: 92%;
}
.q2sprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
margin-left: -100%;
background-image: url(../img/q2spritesheet.png);
background-position: center;
}


.q2sprite-q04_a1_m:before {
    background-position: 0.404% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a1_w:before {
    background-position: 14.124% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a2_m:before {
    background-position: 27.845% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a2_w:before {
    background-position: 41.566% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a3_m:before {
    background-position: 55.287% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a3_w:before {
    background-position: 69.007% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a4_m:before {
    background-position: 82.728% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q04_a4_w:before {
    background-position: 0.404% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q05_a1:before {
    background-position: 14.124% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q05_a2:before {
    background-position: 27.845% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q05_a3:before {
    background-position: 41.566% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q05_a4:before {
    background-position: 55.287% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q06_a1:before {
    background-position: 69.007% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q06_a2:before {
    background-position: 82.728% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q06_a3:before {
    background-position: 4.987% 34.104%;
    background-size: 880.0743494423792%;
    height: 86.208%;
}

.q2sprite-q06_a4:before {
    background-position: 22.922% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q07_a1:before {
    background-position: 36.642% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q07_a2:before {
    background-position: 50.363% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q07_a3:before {
    background-position: 64.084% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q07_a4:before {
    background-position: 77.805% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a1_m:before {
    background-position: 22.922% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a1_w:before {
    background-position: 36.642% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a2_m:before {
    background-position: 50.363% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a2_w:before {
    background-position: 64.084% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a3_m:before {
    background-position: 77.805% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a3_w:before {
    background-position: 0.404% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a4_m:before {
    background-position: 14.124% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q08_a4_w:before {
    background-position: 27.845% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q09_a1:before {
    background-position: 41.566% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q09_a2:before {
    background-position: 55.287% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q09_a3:before {
    background-position: 69.007% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q09_a4:before {
    background-position: 82.728% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q11_a1_m:before {
    background-position: 0.403% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a1_w:before {
    background-position: 13.849% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a2_m:before {
    background-position: 27.295% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a2_w:before {
    background-position: 40.741% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a3_m:before {
    background-position: 54.187% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a3_w:before {
    background-position: 67.633% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a4_m:before {
    background-position: 81.079% 81.818%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a4_w:before {
    background-position: 0.403% 97.799%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a5_m:before {
    background-position: 13.849% 97.799%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a5_w:before {
    background-position: 27.295% 97.799%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a6_m:before {
    background-position: 40.741% 97.799%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q11_a6_w:before {
    background-position: 54.187% 97.799%;
    background-size: 891.0828025477707%;
    height: 100%;
}

.q2sprite-q12_a1:before {
    background-position: 67.797% 98.081%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q12_a2:before {
    background-position: 81.517% 98.081%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q12_a3:before {
    background-position: 96.449% 0.48%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q12_a4:before {
    background-position: 96.449% 16.795%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q13_a1:before {
    background-position: 91.525% 33.109%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q13_a2:before {
    background-position: 91.525% 49.424%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q13_a3:before {
    background-position: 96.449% 65.739%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q13_a4:before {
    background-position: 95.238% 82.054%;
    background-size: 874.375%;
    height: 100%;
}

.q2sprite-q_10_l:before {
    background-position: 99.578% 91.436%;
    background-size: 653.7383177570093%;
    height: 37.85%;
}

.q2sprite-q_10_r:before {
    background-position: 99.578% 99.554%;
    background-size: 653.7383177570093%;
    height: 37.85%;
}






/*

.sprite {
position: absolute;
  width: 100%;
  height: 92%;
}
.sprite:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
background-image: url(../img/spritesheet_2.png);
margin-left: -100%;
}

.sprite-10:before {
    background-position: 0.514% 0.544%;
    background-size: 820.7407407407408%;
    height: 89.63%;
}

.sprite-11:before {
    background-position: 15.023% 0.543%;
    background-size: 1011.8721461187215%;
    height: 107.763%;
}

.sprite-12:before {
    background-position: 27.684% 0.543%;
    background-size: 823.7918215613383%;
    height: 88.848%;
}

.sprite-13:before {
    background-position: 42.44% 0.545%;
    background-size: 836.2264150943396%;
    height: 91.69800000000001%;
}

.sprite-14:before {
    background-position: 57.728% 0.543%;
    background-size: 769.4444444444445%;
    height: 82.986%;
}

.sprite-4:before {
    background-position: 70% 0.545%;
    background-size: 1191.3978494623657%;
    height: 131.183%;
}

.sprite-5:before {
    background-position: 78.904% 0.545%;
    background-size: 1438.9610389610389%;
    height: 157.792%;
}

.sprite-6:before {
    background-position: 0.485% 14.837%;
    background-size: 1448.3660130718954%;
    height: 156.209%;
}

.sprite-7:before {
    background-position: 8.875% 14.797%;
    background-size: 1438.9610389610389%;
    height: 151.948%;
}

.sprite-8:before {
    background-position: 17.288% 14.861%;
    background-size: 1467.5496688741723%;
    height: 160.265%;
}

.sprite-9:before {
    background-position: 25.656% 14.845%;
    background-size: 1402.5316455696202%;
    height: 151.899%;
}

.sprite-papershadowbottom:before {
    background-position: 36.944% 13.275%;
    background-size: 726.5573770491803%;
    height: 4.918000000000006%;
}

.sprite-papershadowtop:before {
    background-position: 53.951% 13.275%;
    background-size: 726.5573770491803%;
    height: 4.918000000000006%;
}

.sprite-q10_a1:before {
    background-position: 70.223% 15.35%;
    background-size: 777.5438596491229%;
    height: 103.158%;
}

.sprite-q10_a2:before {
    background-position: 0.518% 32.941%;
    background-size: 777.5438596491229%;
    height: 103.158%;
}

.sprite-q10_a3:before {
    background-position: 16.313% 32.941%;
    background-size: 777.5438596491229%;
    height: 103.158%;
}

.sprite-q10_a4:before {
    background-position: 32.141% 32.941%;
    background-size: 772.1254355400697%;
    height: 102.439%;
}

.sprite-q11_a1:before {
    background-position: 48.306% 32.96%;
    background-size: 746.1279461279461%;
    height: 99.327%;
}

.sprite-q11_a2:before {
    background-position: 64.724% 32.96%;
    background-size: 753.7414965986395%;
    height: 100.34%;
}

.sprite-q12bg:before {
    background-position: 0.536% 45.884%;
    background-size: 631.3390313390314%;
    height: 31.623999999999995%;
}

.sprite-q12f_a1:before {
    background-position: 77.256% 13.562%;
    background-size: 3357.575757575758%;
    height: 100%;
}

.sprite-q12f_a2:before {
    background-position: 80.064% 13.562%;
    background-size: 6517.647058823529%;
    height: 194.118%;
}

.sprite-q12f_a3:before {
    background-position: 32.776% 17.852%;
    background-size: 3574.1935483870966%;
    height: 109.67699999999999%;
}

.sprite-q12f_a4:before {
    background-position: 36.891% 17.607%;
    background-size: 2770%;
    height: 50%;
}

.sprite-q12f_a5:before {
    background-position: 41.092% 17.87%;
    background-size: 4029.090909090909%;
    height: 127.273%;
}

.sprite-q12f_a6:before {
    background-position: 44.645% 17.914%;
    background-size: 3755.9322033898306%;
    height: 127.119%;
}

.sprite-q12m_a1:before {
    background-position: 48.353% 17.79%;
    background-size: 3632.786885245902%;
    height: 100%;
}

.sprite-q12m_a2:before {
    background-position: 51.871% 17.861%;
    background-size: 4345.098039215686%;
    height: 135.29399999999998%;
}

.sprite-q12m_a3:before {
    background-position: 55.278% 17.799%;
    background-size: 3957.142857142857%;
    height: 110.714%;
}

.sprite-q12m_a4:before {
    background-position: 77.472% 17.808%;
    background-size: 3077.777777777778%;
    height: 87.5%;
}

.sprite-q12m_a5:before {
    background-position: 36.465% 22.001%;
    background-size: 4029.090909090909%;
    height: 127.273%;
}

.sprite-q12m_a6:before {
    background-position: 55.483% 21.979%;
    background-size: 3462.5%;
    height: 106.25%;
}

.sprite-q13_a1:before {
    background-position: 78.202% 21.925%;
    background-size: 2408.695652173913%;
    height: 68.47800000000001%;
}

.sprite-q13_a2:before {
    background-position: 77.436% 26.106%;
    background-size: 3121.1267605633802%;
    height: 95.775%;
}

.sprite-q13_a3:before {
    background-position: 72.431% 30.665%;
    background-size: 3409.230769230769%;
    height: 123.077%;
}

.sprite-q13_a4:before {
    background-position: 76.632% 30.558%;
    background-size: 3077.777777777778%;
    height: 101.389%;
}

.sprite-q13bg:before {
    background-position: 19.389% 50.475%;
    background-size: 882.8685258964142%;
    height: 115.538%;
}

.sprite-q14_a1:before {
    background-position: 33.063% 49.317%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q14_a2:before {
    background-position: 46.45% 49.317%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q14_a3:before {
    background-position: 59.838% 49.317%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q14_a4:before {
    background-position: 73.225% 49.317%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q4bg:before {
    background-position: 0.509% 65.31%;
    background-size: 882.8685258964142%;
    height: 113.944%;
}

.sprite-q4f_a1:before {
    background-position: 76.561% 34.744%;
    background-size: 3165.714285714286%;
    height: 67.143%;
}

.sprite-q4f_a2:before {
    background-position: 58.516% 17.887%;
    background-size: 6925%;
    height: 225%;
}

.sprite-q4f_a3:before {
    background-position: 72.431% 38.458%;
    background-size: 3409.230769230769%;
    height: 106.154%;
}

.sprite-q4f_a4:before {
    background-position: 48.353% 21.741%;
    background-size: 3632.786885245902%;
    height: 75.41%;
}

.sprite-q4m_a1:before {
    background-position: 76.241% 38.573%;
    background-size: 3632.786885245902%;
    height: 122.951%;
}

.sprite-q4m_a2:before {
    background-position: 40.252% 25.61%;
    background-size: 3077.777777777778%;
    height: 40.278%;
}

.sprite-q4m_a3:before {
    background-position: 79.991% 30.227%;
    background-size: 4714.893617021276%;
    height: 108.511%;
}

.sprite-q4m_a4:before {
    background-position: 44.439% 25.66%;
    background-size: 3307.462686567164%;
    height: 49.254%;
}

.sprite-q5_a1:before {
    background-position: 33.063% 63.954%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q5_a2:before {
    background-position: 46.45% 63.954%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q5_a3:before {
    background-position: 59.838% 63.954%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q5_a4:before {
    background-position: 73.225% 63.954%;
    background-size: 908.1967213114755%;
    height: 101.639%;
}

.sprite-q6_a1:before {
    background-position: 14.366% 79.24%;
    background-size: 852.3076923076923%;
    height: 101.154%;
}

.sprite-q6_a2:before {
    background-position: 28.681% 79.24%;
    background-size: 852.3076923076923%;
    height: 101.154%;
}

.sprite-q6_a3:before {
    background-position: 42.996% 79.24%;
    background-size: 852.3076923076923%;
    height: 101.154%;
}

.sprite-q6_a4:before {
    background-position: 57.282% 79.24%;
    background-size: 855.5984555984556%;
    height: 101.544%;
}

.sprite-q7_a1:before {
    background-position: 71.869% 79.24%;
    background-size: 826.865671641791%;
    height: 98.134%;
}

.sprite-q7_a2:before {
    background-position: 92.454% 0.551%;
    background-size: 826.865671641791%;
    height: 98.134%;
}

.sprite-q7_a3:before {
    background-position: 92.454% 16.134%;
    background-size: 826.865671641791%;
    height: 98.134%;
}

.sprite-q7_a4:before {
    background-position: 92.505% 31.718%;
    background-size: 826.865671641791%;
    height: 98.134%;
}

.sprite-q8_a1:before {
    background-position: 88.094% 47.302%;
    background-size: 855.5984555984556%;
    height: 101.544%;
}

.sprite-q8_a2:before {
    background-position: 87.276% 62.885%;
    background-size: 855.5984555984556%;
    height: 101.544%;
}

.sprite-q8_a3:before {
    background-position: 87.276% 78.469%;
    background-size: 855.5984555984556%;
    height: 101.544%;
}

.sprite-q8_a4:before {
    background-position: 86.254% 94.053%;
    background-size: 855.5984555984556%;
    height: 101.544%;
}

.sprite-q9f_a1:before {
    background-position: 0.481% 85.528%;
    background-size: 1641.4814814814815%;
    height: 60.741%;
}

.sprite-q9f_a2:before {
    background-position: 93.506% 57.999%;
    background-size: 2435.164835164835%;
    height: 120.879%;
}

.sprite-q9f_a3:before {
    background-position: 0.479% 99.5%;
    background-size: 1744.8818897637796%;
    height: 61.417%;
}

.sprite-q9f_a4:before {
    background-position: 7.574% 99.351%;
    background-size: 1549.6503496503497%;
    height: 52.448%;
}

.sprite-q9m_a2:before {
    background-position: 99.524% 0.503%;
    background-size: 1894.017094017094%;
    height: 78.632%;
}

.sprite-q9m_a3:before {
    background-position: 96.159% 42.715%;
    background-size: 1666.1654135338345%;
    height: 51.128%;
}*/

.iedet .psprite:before,
.iedet .esprite:before,
.iedet .sprite:before,
.safaridet .psprite:before,
.safaridet .esprite:before,
.safaridet .sprite:before
{
	margin-left: 0;
}

.iedet .qsprite:before ,
.iedet .q2sprite:before ,
.iedet .nssprite:before ,
.safaridet .qsprite:before ,
.safaridet .q2sprite:before ,
.safaridet .nssprite:before 
{
	margin-left: 0;
}

.iedet article
{
	position: relative;
	width: 100%;
}



.share
{
	text-align: center;
	height: 73px;
	width: 100%;
	background: url( ../img/results_share_bg.png );
}

.blacky
{
	position: absolute;
	width: 100%;
	height: 73px;
	background-color: black;
}

.share_top
{
	position: absolute;
	width: 100%;
	height: 10px;
	top: -10px;
	background: url( ../img/share_top.png ) repeat-x;
}

.share_bottom
{
	position: absolute;
	width: 100%;
	height: 9px;
	bottom: -10px;
	background: url( ../img/share_bottom.png ) repeat-x;
}

.buttonarea
{
	text-align: center;
	height: 125px;
	position: absolute;
	top: -125px;
	width: 100%;
	overflow: hidden;
	background: url( ../img/results_buttons_bg.png );
}

.powered_by
{
	position: absolute;
	height: 21px;
	top: 13px;
	right: 23px;
	width: 240px;
}

.powered3
{
	position: absolute;
	top: 50%;
	margin-top: -6px;
}

.powered4
{
	position: absolute;
	top: 50%;
	margin-top: -11px;
	display: none;
}

.shareword
{
	font-weight: bold;
	font-size: 25px;
	color: #ffffff;
	line-height: 0px;
	letter-spacing: 3px;
	position: relative;
}

/* share spritesheet */

.share-sprite {
    background-image: url(../img/sharebuttons/spritesheet.png);
    background-repeat: no-repeat;
    display: inline-block;
	position: relative;
	margin-top: 17px;
	margin-bottom: -10px;
}

.share-sprite  img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.share-sprite-email {
    width: 36px;
    height: 38px;
    background-position: -5px -5px;
}

.share-sprite-facebook {
    width: 36px;
    height: 38px;
    background-position: -85px -5px;
}

.share-sprite-googleplus {
    width: 36px;
    height: 38px;
    background-position: -39px -53px;
}

.share-sprite-linkedin {
    width: 36px;
    height: 38px;
    background-position: -85px -88px;
}

.share-sprite-pinterest {
    width: 36px;
    height: 38px;
    background-position: -131px -5px;
}

.share-sprite-tumblr {
    width: 36px;
    height: 38px;
    background-position: -131px -88px;
}

.share-sprite-twitter {
    width: 36px;
    height: 38px;
    background-position: -5px -136px;
}

@media only screen and (max-width: 700px) {
	.share
	{
		height: 45px;
	}
	.share_content
	{
		transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		-ie-transform: scale(0.7);
		-webkit-transform: scale(0.7);
	}
	.share-sprite
	{
		margin-top: 6px;
	}
	
	.start .share
	{
		display: none;
	}
}