/*@media screen and (orientation: landscape) and (max-height: 400px) {
		html {
				transform: rotate(-90deg);
				transform-origin: left top;
				width: 100vh;
				height: 100vw;
				overflow-x: hidden;
				position: absolute;
				top: 100%;
				left: 0;
		}
}*/

body {
		font-family: 'Frutiger LT Pro 55 Roman';
		background:#eee;
		text-align:center;
		margin:0;
		font-size:16px;
		min-height:100vh;
}

@media screen and (max-width: 400px) {
		body {
				font-size:13px;
		}
}

@media screen and (max-height: 680px) {
		body {
				font-size:10px;
		}
}

@media screen and (max-width: 300px) {
		body {
				font-size:10px;
		}
}

#game-container {
		display:flex;
		background:#fff;
		text-align:center;
		justify-content:stretch;
		margin:auto;
		min-height:100vh;
		min-width:100vw;
}

@media screen and (min-width: 800px) {
		body {
				min-height:auto;
		}
		
		#game-container {
				width:457px;
				height:1001px;
				min-width:auto;
		}
}

.button {
		font-family: 'Frutiger LT Pro 65 Bold';
		background: rgb(255,0,13);
		background: linear-gradient(90deg, rgba(255,0,13,1) 0%, rgba(239,131,1,1) 100%);
		width:100%;
		color:#fff;
		font-size:1.25em;
		text-decoration:none;
		line-height:2.5;
		border-radius:45px;
		display:block;
		border:none;
}

.button:hover {
		cursor:pointer;
		box-shadow:0 3px 15px #0006;
		text-shadow:0 5px 5px #0003;
}

sup {
		line-height:1;
		font-size:.75em;
}

/* Into Screen */

#intro-screen {
		display:flex;
		flex-direction:column;
		background:url('images/intro/Background.png') #fff;
		background-size:cover;
		background-position:bottom center;
		align-items:center;
		padding:0 7.65%;
		justify-content:space-evenly;
}

#intro-screen .logo {
		width:70%;

}

#intro-screen .intro-text {
		font-size:2.8em;
		color:#007B8A;
		width:75%;
		margin-bottom:3em;
}

#intro-screen .button {

}

/* Questions */
#round-container {
		display:none;
		flex-direction:column;
		width:100%;
		background:url('images/questions/Background.png') #fff;
		background-size:cover;
		background-position:bottom center;
}

#round-header {
		background:#007B8A;
		padding-top:3.37em;
		padding-bottom:1.187em;
		margin-bottom:1.5625em;
		color:#fff;
}

#round-header .logo {
		width:44%;
}

#question-number {
		font-family: 'Frutiger LT Pro 65 Bold';
		font-size:2em;
}

#question-number-label {
		font-size:.75em;		
}

#questions-and-answers {
		display:flex;
		flex-direction:column;
		padding:0 7.65% 1.5em;
		flex-grow:1;
}

#question {
		font-family: 'Frutiger LT Pro 65 Bold';
		background: rgb(255,0,13);
		background: linear-gradient(90deg, rgba(255,0,13,1) 0%, rgba(239,131,1,1) 100%);
		color:#fff;
		font-size:1.5em; 	/* 24px */
		text-decoration:none;
		border-radius:45px;
		display:block;
		padding:.625em 2.75em .7em;
		margin-bottom:1.875em;
}

#answers {
		flex-grow:1;
}

.answer {
		text-align:left;
		display:flex;
		margin-top:1.5em;
		align-items:center;
}

.answer-label {
		font-family: 'Frutiger LT Pro 65 Bold';
		background: rgb(255,0,13);
		background: linear-gradient(0deg, rgba(255,0,13,1) 0%, rgba(239,131,1,1) 100%);
		font-size:1.125em; /* 18 */
		width:2.7em;
		height:2.7em;
		line-height:2.7em;
		border-radius:2.7em;
		display:inline-block;
		color:#fff;
		text-align:center;
		box-shadow:0 0 0 5px rgba(255,140,91,.18), 0 0 0 10px rgb(255,129,81, .09);
		flex-shrink:0;
}

.answer-value {
		background:#fff;
		border:1px solid #FF8C5B;
		border-radius:41px;
		font-size:1.25em; /* 20 */
		padding:.45em 1.2em .6em;
		line-height:1.2;
		color:#E32B0D;
		display:block;
		margin-left:12px;
		flex-grow:1;
}

.answer:hover {
		cursor:pointer;
}

.answer:hover .answer-value {
		box-shadow:inset 0 0 10px rgba(0,0,0,.1);
}

.selected.correct .answer-value {
		background:#4AE3D2;
}

.selected.wrong .answer-value {
		background:#FFE2D6;
}

#next-question {
		display:none;
		margin-bottom:50px;
}

/* Congratulations */
#congratulations {
		display:none;
		flex-direction:column;
		background:url('images/congratulations/Background.png') #fff;
		background-size:cover;
		background-position:bottom center;
		align-items:center;
		justify-content:space-evenly;		
		padding:0 7.65% .66em;
		width:100%;
		color:#fff;

}

#oh {
		width: 100%;
		flex-basis: 33%;
		align-self: baseline;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: flex-end;
}

#oh img {
		width:78%;
}

#congratulations h1 {
		font-size:2.25em; /* 36 */
		margin:1.4em 0 0;
}

#congratulations p {
		font-size:1.75em; /* 28 */
		margin:0;
}

#congratulations .logo-container {
		margin-top:2.8em;
		width:100%;
}

#congratulations .logo-container img {
		width:61%;
}

#congratulations .button {
		margin-bottom:3.125em;
}

/* Get offer */
#get-offer {
		display:flex;
		flex-direction:column;
		background:url('images/get_offer/Background.png') #fff;
		background-size:cover;
		background-position:bottom center;
		align-items:center;
		justify-content:space-between;
		padding:0 7.65% 24px;
		width:100%;
		color:#fff;
		display:none;
}

#pay-25 {
		margin-top:100px;
		width:60%;
}

.get-offer-text {
		background:#007B8A;
		padding:1.21em;
		font-size:1.1875em; /* 19 */
		border-radius:1.3em;
		margin:0 .63em;
}

#get-offer-logo {
		width:64%;
}

#get-offer .button {
		margin-bottom:3.125em;
}

/* Offer */
.offer {
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-between;
		width:100%;
		color:#007B8A;
		display:none;
}

.offer header {
		background: rgb(255,0,13);
		background: linear-gradient(90deg, rgba(255,0,13,1) 0%, rgba(239,131,1,1) 100%);
		width:100%;
		/*padding:6.9em 0 89px;*/
		flex-grow:4;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
}

.offer header img {
		width:45%;
}

.offer h1 {
    font-family: 'Frutiger LT Pro 65 Bold';
		font-size:25px;
		padding:0;
		margin-top:55px;
}

.offer .offer-content {
		width:100%;
		padding:0 7.65% 24px;
		box-sizing:border-box;
		flex-grow:2;
}

.offer .input-text {
		width:100%;
    font-family: 'Frutiger LT Pro 65 Bold';
		border:none;
		border-bottom:4px solid #ccc;
		padding:.85em 0;
		font-size:1.25em; /* 20 */
		margin-bottom:4em;
}

.offer .input-text::placeholder {
		color:#ccc;
}

.offer-text {
		font-size:1.25em;
		width:220px;
		margin:auto;
		margin-bottom:5em;
}

.offer-successful-text {
		font-family: 'Frutiger LT Pro 65 Bold';
		margin:0;
}

.offer footer {
		background:#007B8A;
		width:100%;
		color:#fff;
		padding:3.125em 0 0;
		flex-grow:1;
}

.offer footer h2 {
		color:rgba(255,255,255,.5);
		font-size:16px;
		margin:0 33px;
		padding:26px 0 0;
		border-top:4px solid rgba(255,255,255,.25);
}

.social-links {
		list-style-type:none;
		padding:0;
}

.social-links li {
		display:inline-block;
}

.pen {
		margin-top:4em;
		margin-bottom:2.5em;
		max-width:100%;
}

/* Fonts */
@font-face {
    font-family: 'Frutiger LT Pro 55 Roman';
    font-style: normal;
    font-weight: normal;
    src: local('fonts/Frutiger LT Pro 55 Roman'), url('fonts/Linotype  FrutigerLTProRoman.woff') format('woff');
		/*src: local('fonts/FrutigerLTPro-Roman.otf'), url('fonts/FrutigerLTPro-Roman.otf') format('opentype');*/
}

@font-face {
    font-family: 'Frutiger LT Pro 65 Bold';
    font-style: normal;
    font-weight: normal;
    src: local('fonts/Frutiger LT Pro 65 Bold'), url('fonts/Linotype  FrutigerLTProBold.woff') format('woff');
}