/*
@font-face 
{ 
    family: "Roboto-Regular.ttf";
    src: url("src/fonts/Roboto-Regular.ttf");
}
*/

/* --------------------------------------------------------------------- */
/* main style */
html, body {margin: 0; padding: 0; width: 100%; height: 100%;
		-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    	font-family: 'Roboto', sans-serif;}
body {position: relative; background-image: url('../src/images/background.jpg'); background-size: cover;}
h4 {display: inline-block; margin: 0; margin-bottom: 75px; width: 100%; font-size: 35px; text-align: center;}
p {margin: 0px auto; padding-bottom: 45px; text-align: center; font-family: inherit; font-size: 20px; font-weight: 400;}
a {text-decoration: none; color: #000;}
li {list-style-type: none;}
 
/* --------------------------------------------------------------------- */
/* ... */
.container {margin: 0; padding: 0; height: 100%;}
.content {margin: 0 auto; display: block; max-width: 700px; width: 100%; height: 100%; z-index: 2;}

/* --------------------------------------------------------------------- */
/* banner */ 

.banner {padding-top: 140px; position: absolute; top: 0; height: 65%; z-index: 1; background-color: rgba(255, 255, 255, 0.98);}

.banner div {top: 0; z-index: 1;}
.banner div h4 div {position: absolute; right: -35px; top: -122px; width: 154px; height: 129px; background-image: url(../src/images/crown.png); background-color: transparent;
		-o-transform: rotate(6.5deg);
		-webkit-transform: rotate(6.5deg);
		-ms-transform: rotate(6.5deg);
		transform: rotate(6.5deg);}

.banner div h4 {margin: 0 auto; margin-bottom: 65px; padding: 1%; display: block; position: relative; width: 432px; height: 60px; color: #fff; background-color: #e72b37;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;}
.banner div h4:after {content: ""; position: absolute; top: 11px; left: -106px; width: 145px; height: 59px; background-image: url("../src/images/header_after.png"); background-repeat: no-repeat; background-color: transparent;}
.banner div h4:before {content: ""; position: absolute; top: 11px; right: -106px; width: 145px; height: 59px; 
		-webkit-transform: scaleX(-1);
		-ms-transform:scaleX(-1);
		transform: scaleX(-1);
		background-image: url("../src/images/header_after.png"); background-repeat: no-repeat; background-color: transparent;}

.banner div p {margin: 0 auto; width: 85%;}

.instructions > div {position: relative;}
.instructions div > div {margin-top: 150px;}
.instructions div span {width: 798px; position: absolute; display: block; left: -9%; bottom: -235px; height: 877px; background-image: url("../src/images/smartphone_position.png");
		-o-transform: scale(0.1); 
		-webkit-transform: scale(0.1);
		-ms-transform: scale(0.1);
		transform: scale(0.1);}

.final {position: relative; background-color: transparent;}
.final div h4 {padding-top: 1%; 
		-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;}
.final div h4:after {}
.final div h4:before {}
.final div h2 div {position: absolute; right: 202px; top: -122px; width: 154px; height: 129px; background-image: url(../src/images/crown.png); 
		-o-transform: rotate(6.5deg);
		-webkit-transform: rotate(6.5deg);
		-ms-transform: rotate(6.5deg);
		transform: rotate(6.5deg);}

.final .feedback div {right: 201px; top: -123px}

.final .hl_result {margin: 0; padding: 0; right: 46%; top: 61%; z-index: 2;
		-o-transform: rotate(-6.5deg);
		-webkit-transform: rotate(-6.5deg);
		-ms-transform: rotate(-6.5deg);
		transform: rotate(-6.5deg);}

/* --------------------------------------------------------------------- */
.buttonDiv {position: relative; background-image: url("../src/images/header.png"); background-repeat: no-repeat; background-size: 100% auto;}

/* Button Standard style */
.button {margin: 0 auto; padding: 19px 0px; position: relative; left: -13px; display: inline-block; font-family: inherit; font-size: 19px; font-weight: 700; background-color: rgba(255, 255, 255, 0.7);}
.button:hover {background-color: rgba(255, 255, 255, 0.8);}

.buttonNext {padding-left: 28px; padding-right: 94px;}
.buttonNextArrow {margin: 0; right: -13px;}
.buttonNextArrow:after{content: ""; position: absolute; right: -14px; top: 10px; width: 70px; height: 40px; 
		-o-transition: all 0.2s linear; 
		-moz-transition: all 0.2s linear; 
		-webkit-transition: all 0.2s linear; 
		transition: all 0.2s linear; 
		-o-transform: rotate(-182deg);
		-webkit-transform: rotate(-182deg);
		-ms-transform: rotate(-182deg);
		transform: rotate(-182deg);
		background: rgb(255, 255, 255); background-repeat: no-repeat; background-image: url("../src/images/arrow.png"); background-position: center; background-size: 80% auto;}
.buttonNextArrow:hover:after {
		-o-transform: rotate(-184deg);
		-webkit-transform: rotate(-184deg);
		-ms-transform: rotate(-184deg);
		transform: rotate(-184deg);
		right: -18px;}

.buttonBack {padding-right: 28px; padding-left: 94px;}
.buttonBackArrow {margin: 0; left: -13px;}
.buttonBackArrow:before {content: ""; position: absolute; left: -14px; top: 10px; width: 70px; height: 40px; 
		-o-transition: all 0.2s linear; 
		-moz-transition: all 0.2s linear; 
		-webkit-transition: all 0.2s linear; 
		transition: all 0.2s linear; 
		-o-transform: rotate(2deg); 
		-webkit-transform: rotate(2deg);
		-ms-transform: (rotate2deg);
		transform: rotate(2deg);
		background: rgb(255, 255, 255); background-repeat: no-repeat; background-image: url("../src/images/arrow.png"); background-position: center; background-size: 80% auto;}
.buttonBackArrow:hover:before {
		-o-transform: rotate(4deg);
		-webkit-transform: rotate(4deg);
		-ms-transform: rotate(4deg);
		transform: rotate(4deg);
		left: -18px;}

.banner.instructions .btnRow .button {border: 1px solid #e72b37;}
.banner.instructions .btnRow .button:after {z-index: -1;}


/* --------------------------------------------------------------------- */
/* oriantation top - rectangle part */
.navigation {margin-bottom: 30px; height: 100px;}
.navigation span {margin: 0 auto; position: relative; display: block; height: 71px; width: 155px; background-color: rgba(255, 255, 255, 0.7);}
.navigation span:after {content: ""; margin: 0; position: absolute; bottom: -29px; color: rgba(255, 255, 255, 0.7); border-right: 77.5px solid transparent; border-left: 77.5px solid transparent; border-top: 29px solid;}
.navigation div {margin: 0 auto; position: relative; top: -59px; width: 55px; height: 55px; z-index: 2; border-style: solid; border-radius: 33.5px; border-color: #e72b37; border-width: 6px; background-color: #fff;}
.navigation h1 {margin: 0 auto; position: relative; top: -114px; display: block; z-index: 2; color: #000; font-family: inherit; font-size: 33px; font-weight: 700; text-align: center;}

/* --------------------------------------------------------------------- */
/* ... */
.hl_feedback {margin: 0 auto; margin-bottom: 75px; max-width: 270px;}
.hl_feedback_points {padding-top: 72px; display: inline-block; position: absolute; right: -156px; bottom: -37px; width: 154px; height: 129px; font-size: 48px; color: #e72b37; background-image: url("../src/images/crown.png"); background-repeat: no-repeat;}
.hl_feedback_counter {position: absolute; right: 8px; bottom: 37px; font-size: 36px; color: #e72b37;}
.hl_result {display: inline; position: absolute; right: 125px; bottom: 122px; font-size: 34px; color: #e72b37;}

.selection {margin: 0 auto; padding: 0; max-width: 627px;}
.selectionItem {margin: 0px 51px; margin-bottom: 10px; padding: 41px; display: inline-block; position: relative; right: 0; left: 0; max-width: 155px; max-height: 137px; 
		-o-transition: all 0.2s linear; 
		-moz-transition: all 0.2s linear; 
		-webkit-transition: all 0.2s linear; 
		transition: all 0.2s linear; 
		color: #000; background-color: rgb(255, 255, 255); font-family: inherit; font-size: 35px; font-weight: 700; list-style-type: none;}
.selectionItemStatic {margin: 0; bottom: -84px; left: -43px; color: #fff; background-color: rgb(255, 0, 0);
		transition: none;}
.selectionItem:hover {color: #fff;
		-o-transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);
		-ms-transform: rotate(-2deg);
		transform: rotate(-2deg);
		background-color: rgb(255, 0, 0);}

/* --------------------------------------------------------------------- */
/* ... */
.feedbackheader {position: relative; text-align: center;}
.feedbackheader h2 {margin: 0; padding: 28px 41px; position: absolute; top: -20px; left: -88px; width: 18px; height: 32px;color: #fff; background-color: rgb(255, 0, 0);}
.feedbackheader > h4 {width: initial;}

.answerlabel {display: none;}

.BackNext {margin: 0 auto; padding: 0; max-width: 482px;}

/* --------------------------------------------------------------------- */
/* stationen - offen/aktiv/naechste */
.overview {position: relative;}

.station_overview li div:after {content: ""; position: absolute; z-index: -1; bottom: 13.5px; left: 55px; width: 60px; height: 24px; background-color: #DFF0F7;}
.station_overview li div:before {}
.station_overview li:nth-child(4n+4) div:after {display: none;}
.station_overview li:nth-child(7n+1) div:before {content: ""; position: absolute; z-index: -1; left: 12px; 
top: 55px; width: 24px; height: 100px; background-color: #DFF0F7}
.station_overview li:nth-child(8) div:before {top: -105px;}

.station_main {float: left; width: 25%;}
.station_main > div {margin: 50px; position: relative; width: 50px; left: -25px; height: 50px; float: left; color: #000; background-color: #fff; border-radius: 35px; border: 5px solid #918f8f; box-shadow: 0 0 0 8px #DFF0F7;}
.station_active > div {border-color: #e72b37;}
.station_next > div {color: #fff; border-color: #e72b37; box-shadow: 0 0 0 8px #e72b37; background-color: #e72b37;}
.station_done div h2 {opacity: 0.4;}
.station_done div {border-color: rgba(145, 143, 143, 0.4);}

.station_counter {margin: 0; padding: 0; position: absolute; z-index: 1; left: 16px; bottom: 7px; font-size: 30px;}
.station_overview {margin: 0 auto; padding: 0; position: relative; max-width: 69%; max-height: 30%;}

.station_overview li:nth-child(1) div,
.station_overview li:nth-child(2) div,
.station_overview li:nth-child(3) div,
.station_overview li:nth-child(4) div {margin-top: 0;}

.station_overview li:nth-child(1n+5) {margin-bottom: 45px;}

/* --------------------------------------------------------------------- */
/* footer des templates */
.foot {position: absolute;  width: 100%; bottom: 0;}
.footer_img {width: 100%; min-height: 55px;}
.foot a {padding: 5px 21px; position: absolute; bottom: 7px; left: 11%; z-index: 2; font-size: 36px; font-weight: 700; color: #e72b37; background-color: #fff;}
.foot:before {content: ""; width: 100%; height: 15px; position: absolute; bottom: 0; background-color: #e72b37;}

/**
 * Anpassungen Andy
 * -------------------------------------------------------------------------
 */
    /**
     * .btnRow als Klasse fuer alle button-Wraps
     * font-family-Einbindung auf Google-Fonts geaendert
     * font-weight:bold auf Bold-Schnitt ge�ndert( font-weight:700);
     * .feedback hinzugefuegt
     */
 
    html, body, .main {height:100%; min-height:100%;}
    .foot img {display:block;}
    .btnRow {padding-top: 20px; position: relative !important; z-index: 1; clear:both; float:none; text-align:center;}
    .content .btnRow .button {margin-bottom:20px;}
    .button + .button {margin-left:20px;}
    .selectionItem {cursor:pointer; padding: 29px 41px}
    /*.headline_std {margin-bottom:45px;}*/
    .content {position:relative;}
    .hl_feedback {max-width:100%;}
    
    .feedbackSelectionCounter {bottom:auto; display:block; left:0; top:100px; height:auto; line-height:65px; padding:0 25px;}
    .feedback {position:absolute; right:-180px; top:175px;}
    .feedback > div {font-weight:700; text-align:center; right:0; bottom:0;}
    .feedback > div.hl_feedback_points {height:auto;}
    .feedback > div.hl_feedback_counter {right: 145px; bottom:3px; width: 50px;}


    @media screen and (max-width: 1100px) {
    	.feedback {right: 20px; top: 125px;
	        	-o-transform: scale(0.8); 
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}
    }


    @media screen and (max-width: 970px) {
    	.feedbackheader h2 {left: 20px;}
    }

    @media screen and (max-width: 920px) {

        .feedback {
	        	-o-transform: scale(0.8); 
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}
    }


    @media screen and (max-width: 720px) {





    }

    @media screen and (max-width: 710px) {
        .content 
        {
            width:100%; padding:0 20px;  max-width:100%;
	            -webkit-box-sizing: border-box;
	            -moz-box-sizing: border-box;
	            box-sizing: border-box;
        }
                
        .selection {width:100%; max-width:100%;}
        .selectionItem {width:30.33%; max-width:100%; margin:0; padding:40px 0; text-align:center;
	            -webkit-box-sizing: border-box;
	            -moz-box-sizing: border-box;
	            box-sizing: border-box;}

        .selectionItem + .selectionItem {margin-left:3%}

        .banner {left: -10px;}
        .banner div h4 div {right: -50px; top: -112px; 
	        	-o-transform: rotate(6.5deg) scale(0.83);
				-webkit-transform: rotate(6.5deg) scale(0.83);
				-ms-transform: rotate(6.5deg) scale(0.83);
				transform: rotate(6.5deg) scale(0.83);}
        .banner div h4 {width: 60%; 
	        	-o-transform: scale(0.83);
				-webkit-transform: scale(0.83);
				-ms-transform: scale(0.83);
				transform: scale(0.83);}
        
        .final {left: 0px;}

        .overview {
				-o-transform: scale(0.8);
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}
        .station_main > div {margin-left: 32%; padding: 25px; 
	        	-webkit-box-sizing: border-box;
	            -moz-box-sizing: border-box;
	            box-sizing: border-box;}

	     .feedbackheader > h2 {top: -110px;}
    }
    
    /* Alex */
    @media screen and (max-width: 550px) {

        p {font-size: 19px;}

        .banner div h4 {transform: scale(0.75);}
        .station_overview {max-width: 400px;}
    }

    @media screen and (max-width: 460px) {

		h4 {font-size: 23px;}
		p {font-size: 16px;}

		.banner div h4 {
		 		-o-transform: scale(0.6);
				-webkit-transform: scale(0.6);
				-ms-transform: scale(0.6);
				transform: scale(0.6);}
		.banner div h4 div {right: -57px; top: -98px; 
				-o-transform: rotate(14.5deg) scale(0.7);
				-webkit-transform: rotate(14.5deg) scale(0.7);
				-ms-transform: rotate(14.5deg) scale(0.7);
				transform: rotate(14.5deg) scale(0.7);}
		.banner div h4:after {top: 14px; left: -99px;
				-o-transform: scale(0.8);
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}
		.banner div h4:before {right: -99px; top: 14px;
				-o-transform: scale(-0.8, 0.8);
				-webkit-transform: scale(-0.8, 0.8);
				-ms-transform: scale(-0.8, 0.8);
				transform: scale(-0.8, 0.8);}

        .banner div h4 {padding-top: 3%; 
        		-webkit-box-sizing: border-box;
	            -moz-box-sizing: border-box;
	            box-sizing: border-box;}

        .feedback {right:20px; 
        		-o-transform: scale(0.6);
				-webkit-transform: scale(0.6);
				-ms-transform: scale(0.6);
				transform:scale(0.6)};

        .btnRow {padding:0 20px;}
        .btnRow a {font-size: 16px; padding-left: 15px; padding-right: 50px;}
        .btnRow .button {display:block; margin-left:0; left:0;}

        .station_overview {max-width: 400px}

		.feedbackheader > h2 {left: 0;
				-o-transform: scale(0.8);
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}
    }

    @media screen and (max-width: 400px) {
    	.feedbackheader > h2 {top: -130px; left: -20px;
				-o-transform: scale(0.65);
				-webkit-transform: scale(0.65);
				-ms-transform: scale(0.65);
				transform: scale(0.65);
    	}
    }

    @media screen and (max-width: 330px) {
        .station_overview {max-width: 300px;}
    }
    


    @media screen and (max-height: 800px) {
        
        .station_main div {margin-bottom: 25%}
        .station_main div:nth-child(1),
        .station_main div:nth-child(2),
        .station_main div:nth-child(3),
        .station_main div:nth-child(4) {margin-top: 4%;}

        .station_overview li:nth-child(7n+1) div:before {height: 37px;}
		.station_overview li:nth-child(8) div:before {top: -37px;}

		/*.content p {font-size: 16px;}
		.instructions div p {padding-bottom: 5%; font-size: 15px;}

		.overview {
			   	-o-transform: scale(0.8);
				-webkit-transform: scale(0.8);
				-ms-transform: scale(0.8);
				transform: scale(0.8);}

		.content div:nth-child(1) {position: relative; top: -7px;}*/
   	}


   	@media screen and (max-height: 820px) {

   		.banner div p {font-size: 15px;}
   		.instructions div > div {margin-top: 76px;}
   		.instructions div > span {bottom: -288px;}
   	}

   	@media screen and (max-height: 600px) {

   		.overview {
        		-o-transform: scale(0.75);
				-webkit-transform: scale(0.75);
				-ms-transform: scale(0.75);
				transform:scale(0.75);}
   		.station_overview li:nth-child(1n+5) {margin-bottom: -60px !important;}

   		.content h4 {margin-bottom: 6%; font-size: 30px;}
   	}



    /*
        Aenderungen Alex
        
    - .feedback (right auf -107px geaendert - urspruenglich (0))
    - .btnRow (padding-top hinzugefuegt)
    - .feedbackSelectionCounter {left:20px} - im @media (max-width: 460px) entfernt  
    - im @media (max-width: 710px) .selectionItem width von 30.33% auf 31.33% erhoeht
    - .btnRow {position: relative;} !important hinzugefuegt
    - .btnRow {z-index: 1;} hinzugefuegt
    - im @media (max-width: 460) p font-size von 19px auf 16px verringert

    */