@font-face {
	font-family: 'HelveticaNeue';
	src: url('../fonts/HelveticaNeueLTStd-Bd.otf');
	font-weight:bold;
	font-style:normal;
}
@font-face {
	font-family: 'HelveticaNeue';
	src: url('../fonts/HelveticaNeueLTStd-BdIt.otf');
	font-weight:bold;
	font-style:italic;
}
@font-face {
	font-family: 'HelveticaNeue';
	src: url('../fonts/HelveticaNeueLTStd-LtIt.otf');
	font-weight:300;
	font-style:italic;
}
@font-face {
	font-family: 'Lulo';
	src: url('../fonts/LuloCleanOneBold.otf');
	font-weight:600;
}

body {
	margin: 0;
	padding: 0;
	background: #00384f url(../img/background.svg) no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	font-family: 'HelveticaNeue', sans-serif;
	height: 100%;
}
a {
	color: #fff;
}
h1 {
	font-family: Lulo;
	letter-spacing: -2px;
	font-size: 20px;
    text-transform: uppercase;
    text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
.pink {
	color: #ee3864;
}
.dark-blue {
	color: #0a374c;
}
.light-blue {
	color: #28b7ea;
}
.bg-light-blue {
	background-color: #28b7ea;
}
.bg-pink {
	background-color: #ee3864;
	color: #fff;
}
.bg-dark-blue {
	background-color: #0a374c;
	color: #fff;
}
.bars {
	position: fixed;
    background: url(../img/bars.svg);
    background-repeat: repeat-x;
    height: 25px;
    width: 100%;
    background-size: 10px;
}
.bars.top {
	top:0;
}
.bars.bottom {
	bottom: -5px;
}
.game-wrapper {
	box-sizing: border-box;
	height: 100%;
	padding: 25px 0;
	position: relative;
}
.game-container {
	position: absolute;
	top:25px; 
	left: 0;
	width: 100%; 
	height: calc(100% - 50px);
	box-sizing: border-box;
}
.padded-content {
	width: 320px;
	height: 480px;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	padding: 10px;
	display: none;
}
.logos-container {
	width: 100%;
}
.clear:after {
	content: '';
	display: block;
	clear: both;
}
.logos-container .cdc-logo-container {
	width: 50px;
	float: left;
}
.logos-container .bayer-logo-container {
	width: 50px;
	float: right;
}
.logos-container .cdc-logo {
	background: url(../img/logo_cdc_magenta.svg) no-repeat;
    background-size: contain;
    padding-top: 152.79%;
    width: 100%;
}
.logos-container .bayer-logo {
	background: url(../img/logo_bayer.svg) no-repeat;
    background-size: contain;
	padding-top: 100%;
    width: 100%;
}
.interface {
	display: none;
	color: #fff;
	margin-top: 20px;
	top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
	width: 100%;
}
.login .cdc-logo-container {
	display: none;
}
.buttons-wrapper {
	text-align: center;
}
.button {
	text-decoration: none;
    display: block;
    width: 130px;
    padding: 4px;
    font-size: 14px;
    border-radius: 17px;
    margin: 0 auto 7px;
    font-style: italic;
	letter-spacing: 0.06em;;
    -webkit-box-shadow: inset 7px -7px 6px -1px rgba(214,50,91,1);
    -moz-box-shadow: inset 7px -7px 6px -1px rgba(214,50,91,1);
    box-shadow: inset 7px -7px 6px -1px rgba(214,50,91,1);
	height: 18px;
    line-height: 17px;
	font-family: sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
}
.button.small {
    width: 100px;
    padding: 3px;
    font-size: 10px;
}
.italic-subtitle {
	font-style: italic;
	letter-spacing: 0.06em;;
    font-weight: 300;
    font-size: 20px;
    margin: 0 0 20px 0;
}
#login {
	width: 100%;
	text-align: center;
}
#login .logo-cdc-container {
	width: 200px;
    text-align: center;
    margin: -15% auto 0;
}
#login .logo-splash {
	background: url(../img/logo_cdc_blanco.svg) no-repeat;
    background-size: contain;
	display: inline-block;
    width: 100%;
    padding-top: 100%;
    background-position: center;
}

#logon form {
	text-align: center;
}
#logon p.error-message {
    color: #ee3864;
    font-size: 12px;
    opacity: 0;
	margin: 3px 0;
	transition: all 1s;
}
#logon p.error-message.show {
    opacity: 1;
}
#logon .buttons-wrapper {
	margin-top: 20px;
}
.form-group {
	margin-bottom: 4px;
	text-align: left;
	display: inline-block;
	position: relative;
	width: 250px;
}
.form-group.checkbox {
	width: 250px;
    margin-bottom: 0;
	height: 14px;
}
.form-group.checkbox.has-error {
	color: #ee3864;
}
.form-group input {
	color: #fff;
	background-color: transparent;
    border: none;
	position: relative;
	padding: 5px 0;
	width: 100%;
	outline: none;
}
input[type="checkbox"] {
    width: auto;
	vertical-align: middle;
	display: inline-block;
	margin: 0 1px 0 0;
	width: 11px;
    height: 11px;
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #007c9b inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #fff;
	background-color: #007c9b !important;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 50px #007c9b inset;
    -webkit-text-fill-color: #fff;
}  
.form-group .input {
	box-sizing: border-box;
	position: relative;
    display: inline-block;
    padding: 0 10px;
	font-weight: 200;
	background-color: #007c9b;
	width: 100%;
}
.form-group.has-error .input {
    background-color: #ee3864;
}
.form-group label {
	font-size: 12px;
    font-weight: 300;
    font-style: italic;
	letter-spacing: 0.06em;;
    display: block;
    margin: 0 -5px 3px;
}
.form-group.checkbox label {
	display: inline-block;
	vertical-align: middle;
    font-size: 9px;
	margin: 0;
}
.form-group.checkbox a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

#register form {
	text-align: center;
}
.interface form .help-block{
	position: absolute;
    font-size: 8px;
    right: 0px;
    width: 170px;
    top: 3px;
    height: 10px;
    color: #ee3864;
    text-align: right;
    line-height: 10px;
}
.interface form#loginForm .help-block{
	bottom: 0;
    left: 0;
    width: auto;
    position: static;
    display: block;
    height: auto;
}

#register .input {

}
#register .form-group:nth-child(1) .input:before {

}
#register .form-group:nth-child(2) .input:before {

}

#briefing {
	text-align: center;
}
#briefing p.italic {
	font-size: 15px;
    text-align: center;
    margin: 0;
    font-weight: 300;
    font-style: italic;
	letter-spacing: 0.06em;;
}
#briefing p b {
    font-weight: 400;
}
#briefing .briefing-wrap {
    display: inline-block;
}
#briefing p.bold-rewards {
	font-weight: 400;
    font-style: italic;
	letter-spacing: 0.06em;;
}

.play-buttons-wrapper {
	margin: 10px auto 0;
    max-width: 246px;
}
.play-buttons-wrapper span.indicator {
	display: block;
    width: 50%;
    float: left;
    margin-bottom: 7px;
	text-align: center;
}
.play-buttons-wrapper:after {
	content: '';
	clear: both;
	display: block;
}
.play-buttons-wrapper .start-game-button {
	width: 100px;
    height: 100px;
    display: block;
    background-size: contain;
}
.play-buttons-wrapper .start-game-button.easy {
	background: url(../img/play_easy.svg) no-repeat;
	float: left;
}
.play-buttons-wrapper .start-game-button.hard {
	background: url(../img/play_hard.svg) no-repeat;
	float: right;
}
.interface#rosco {
	text-align: center;
	margin-top: 20px;
}
.interface#rosco .buttons-wrapper {
    position: absolute;
	bottom: 0;
	width: 100%;
}
.interface.full {
	margin-top: 0;
	font-size: 8px;
    font-style: italic;
	letter-spacing: 0.06em;;
    font-weight: 200;
	top: 5px;
    transform: none;
    left: 0;
}
.interface.full h1 {
	font-size: 10px;
	text-align: left;
}
.interface.full h2 {
	font-size: 9px;
	margin-bottom: 0;
	font-weight: 400;
}
.interface.full p {
	margin: 2px 0;
}
.interface .text-wrapper {
	max-height: 435px;
	overflow-y: scroll;
}
#roscoQuestion,
#roscoAnswer {
	height: 165px;
	position: relative;
}

.rosco {
	width: 160px;
    height: 160px;
    border: 30px solid #D4EFF5;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.rosco:before {
    content: '';
    width: 176%;
    height: 126%;
    top: -13%;
    left: -38%;
    position: absolute;
    background: url(../img/stars.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
#rosco .outline {
	display: inline-block;
    border-radius: 50%;
    background: url(../img/rosco-border.svg) no-repeat;
    background-size: contain;
    padding: 4px;
}
.rosco .letter {
	font-family: arial;
	position: absolute;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    margin-left: -11px;
    margin-top: -11px;
    font-weight: bold;
    color: #333;
    line-height: 18px;
    text-align: center;
	font-size: 15px;
	border: 2px solid transparent;
}
.rosco .letter.current {
	background: #FF3162;
    color: #fff;
    border: 2px solid #fff;
}
.rosco .letter.correct {
	color: #66B412;
	background: none;

}
.rosco .letter.current.correct {
	border: 2px solid #66B412;

}
.rosco .letter.wrong {
    color: #ff3162;
	background: none;
}
.rosco .letter.current.wrong {
	border: 2px solid #ff3162;
}
.rosco .center-info {
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}
.rosco .center-info .image {
    width: 75px;
}
.timer {
	display: inline-block;
}
.timer:after{
	content: '';
	display: block;
	clear: both;
}
.digit,
.timer .digit {
	font-family: sans-serif;
	display: inline-block;
    padding: 1px;
    background-color: #10647f;
    float: left;
    margin-right: 1px;
    font-weight: bold;
    font-size: 20px;
    width: 11px;
    height: 24px;
    line-height: 24px;
}
.ranking .digit {
	color: #00BBFF;
	min-height: 22px;
}
.ranking .digit.separator,
.ranking .digit.total {
	color: #10384F;
}
.timer .digit:last-child {
    margin-right: 0;
}
p.question, .answers {
	padding: 0;
    margin: 0;
	display: flex;
    align-items: center;
    justify-content: center;
	letter-spacing: 0.06em;
    position: absolute;
    top: calc(50% - 30px);
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    margin-top: 0;
}
p.question {
	font-size: 14px;
    font-weight: 200;
    font-style: italic;
}
#roscoAnswer {
	display: none;
}
.answers .answer {
	font-family: sans-serif;
	background: #10647f;
    display: block;
    width: 200px;
    padding: 2px;
    font-size: 14px;
    font-style: italic;
	letter-spacing: 0.06em;;
    margin: 0 auto 7px;
	font-weight: 400;
	cursor: pointer;
}
.answers .answer:last-child {
	margin-bottom: 0;
}
.answers .answer.correct {
	background: #94d050;
	color: #10647f;
}
.answers .answer.incorrect {
	background: #ee3864;
	color: #10647f;
}
#gameOver {

}
#gameOver .timer-container {
	text-align: center;
}
#gameOver .timer-container .timer {

}
#gameOver .timer-container .timer .digit {
	padding: 2px;
    font-size: 36px;
}
#gameOver .notification {
	display: none;
	font-style: italic;
	letter-spacing: 0.06em;;
    font-size: 18px;
    text-align: center;
    margin: 30px 0;
}
#gameOver .notification p {
	margin: 0 0 7px;
	font-weight: 300;
}
#gameOver .notification p.bold {
	font-weight: 400;
}
#gameOver .wrapper {
	height: 210px;
}
#gameOver #score {
	display: none;
	margin-top: 0;
}

#score p.result {
	font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    font-family: Lulo;
    letter-spacing: -2px;
}
#score .markers {
	margin-top: 20px;
}
#score .marker-group {
	text-align: center;
	margin-bottom: 8px;
}
#score .marker-group label {
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	text-align: right;
	color: #ee3864;
	text-transform: uppercase;
	font-size: 12px;
}
#score .marker-group .score-digits {
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	padding-left: 5px;
}
#score .marker-group .score-digits .separator {
	color: #00BBFF;
}
#score .marker-group .score-digits .partial {
	color: #00BBFF;
}
#score .marker-group .score-digits .total {
	color: #0a374c;
}
#score .marker-group .digit {
	float: left;
	display: inline-block;
    padding: 1px;
    background-color: #10647f;
    margin-right: 1px;
    font-weight: bold;
    font-size: 20px;
}
#gameOver .buttons-wrapper {
	margin-top: 20px;
}
#gameOver #ranking {
	display: none;
	height: 280px;
	text-align: center;
}
#ranking .score .image {
	background-size: contain;
    width: 115px;
    height: 115px;
    margin: -70px auto 0;
}
#ranking .score.good-score .image {
	background: url(../img/badge.svg) no-repeat;
}
#ranking .score.great-score .image {
	background: url(../img/cup.svg) no-repeat;
}
#ranking .score.null-score .image {
	background: url(../img/bad_day.svg) no-repeat;
}
#ranking .message {
	text-align: center;
	margin: 7px 0;
	font-size: 20px;
	font-style: italic;
	letter-spacing: 0.06em;;
	font-weight: bold;
}
#ranking .subtitle {
	margin: 8px 0 3px;
	text-align: center;
	color: #ee3864;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0.06em;;
	font-weight: bold;
}
#ranking .ranking,
#ranking .punctuation {
	display: inline-block;
	color: #00BBFF;
}
#ranking .digit {
	font-size: 18px;
}
#ranking p.thin {
	margin: 22px 0 0;
    font-weight: 200;
    text-align: center;
    font-size: 14px;
    font-style: italic;
	letter-spacing: 0.06em;;
}
#question {
	margin: 25px -15px 0;
    padding: 0 10%;
}
#question .question,
#question .answers {
	width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 0 15px
}
#question .question {
	font-size: 1.2em;
}
#question .answers ul {
	padding: 0;
	margin: 0;
	transform: translate(31px);
}
#question .answers ul li{
	list-style-type: none;
	margin-bottom: 10px;
	background: #28b7ea;
	transform: skew(-12deg);
}
#question .answers ul li .question-answer {
	font-size: 1.7em;
    padding: 12px 31px;
    display: block;
	cursor: pointer;
	transform: skew(12deg);
}
#question .answers ul li:nth-child(2) {
	transform: translate(-15px) skew(-12deg);
}
#question .answers ul li:nth-child(3) {
	transform: translate(-30px) skew(-12deg);
}
#question .answers ul li:nth-child(2) .question-answer {
	transform: translate(15px) skew(12deg);
}
#question .answers ul li:nth-child(3) .question-answer {
	transform: translate(30px) skew(12deg);
}
#question .answers ul li.unselectable .question-answer{
	cursor: default;
}
#question .answers ul li.unselectable {
	background: #10647f;
	color: #0a384e;
}

.button-wrapper #startGame:after {
	content: '';
	opacity: 0;
	width: 100%;
	height: 100%;
	background: url(../img/play_button_hover.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	transition:  all 200ms;
}
.button-wrapper #startGame:hover:after {
	opacity: 1;
}
.button-wrapper #GUItimer {
	background: url(../img/counter_magenta.svg) no-repeat;
	position: relative;
	color: #ee3864;
	font-size: 2em;
	font-weight: bold;
}
.button-wrapper #GUItimer #ten {
	position: absolute;
	left: 31%;
	top: 34%;
}
.button-wrapper #GUItimer #unit {
	position: absolute;
	left: 50%;
	top: 34%;
}
#GUItimer.paused {
	filter: grayscale(100%);
}
#GUItimer #svg{
	position: absolute;
	top: 0;
	left: 0;
	display: table-cell;
	vertical-align: middle;
	width: 180px;
	height: 180px;
	transform: rotate(-90deg);
}
#svg #bar {
	stroke: #28b7ea;
}
#svg circle {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s linear;
	stroke: #ee3864;
	stroke-width: 18px;
}
.button-wrapper #playAgain {
	background: url(../img/play_again.svg) no-repeat;
    width: 100%;
    padding-top: 100%;
    display: block;
    background-size: contain;
}
.button-wrapper #playAgain:after {
	content: '';
	opacity: 0;
	width: 100%;
	height: 100%;
	background: url(../img/play_again_hover.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	transition:  all 200ms;
}
.button-wrapper #playAgain:hover:after {
	opacity: 1;
}
#score .score {
	display: none;
	font-size: 2.3em;
	text-align: center;
	font-weight: 300;
}
#score .score b {
    display: block;
	font-weight: 400;
}
#score .score.show {
	display: block;
}
.hidden {
	display: none;
	transition: all 500ms;
}
.social a {
	text-decoration: none;
	color: #fff;
}
.footer-wrapper {
	position: fixed;
    width: 100%;
    bottom: 25px;
	display: none;
}
.footer-container {
    left: 0;
    width: 100%;
    box-sizing: border-box;
}
.game-footer {
    font-weight: 300;
    font-style: italic;
    color: #ee3864;
    font-size: 9px;
    width: 320px;
	padding: 0 10px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 10px;
}
.game-footer:after {
	content: '';
	display: block;
	clear: both;
}
.game-footer .policies {
	position: absolute;
    width: 244px;
    right: 10px;
    bottom: 2px;
	text-align: right;
}
.game-footer .policies .policy {
	color: #ee3864;
	text-decoration: none;
}
.game-footer .policies .separator {
}
.game-footer .share-wrapper {
	position: absolute;
    bottom: 2px;
}
.sharer {
	background: url(../img/share.svg) no-repeat;
    width: 46px;
    height: 19px;
    display: block;
    background-size: contain;
    position: absolute;
    left: 15px;
    top: -20px;
}
#sharePunctuation {
	background: url(../img/share-punctuation.svg) no-repeat;
    width: 85px;
    height: 17px;
    background-size: contain;
    position: absolute;
    left: 13px;
    top: -27px;
    display: none;
}
#logout {
	background: url(../img/logout.svg) no-repeat;
	width: 15px;
	height: 13px;
	background-size: contain;
	position: absolute;
	left: -5px;
	top: -17px;
	display: none;
}
.back {
	background: url(../img/back.svg) no-repeat;
    width: 14px;
    height: 11px;
    background-size: contain;
    display: block;
    position: absolute;
	bottom: -15px;
    left: 0px;
}
.scrollbar-outer > .scroll-element {
    background-color: transparent;
}
.scrollbar-outer > .scroll-element .scroll-element_track {
    background-color: rgba(255, 255, 255, 0.1);
}
.scrollbar-outer > .scroll-element .scroll-bar {
    background-color: rgba(194, 194, 194, 0.19);
}
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar,
.scrollbar-outer > .scroll-element .scroll-bar:hover {
    background-color: rgba(194, 194, 194, 0.25);
}
.scrollbar-outer > .scroll-element.scroll-y {
    width: 3px;
}
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer {
    width: 3px;
	border-radius: 5px;
	left: 0px;
}
.close {
	background: url(../img/close.svg) no-repeat;
    width: 10px;
    height: 12px;
    display: block;
    background-size: contain;
    position: absolute;
	right: 0;
    top: 0px;
}
.uppercase {
	text-transform: uppercase;
}
.title {
	font-style: italic;
	letter-spacing: 0.06em;;
    font-size: 12px;
    margin-bottom: 5px;
	font-weight: bold;
}
.seconds {
	font-size: 10px;
	padding-top: 3px;
}
.icon {
	width: 25px;
    height: 25px;
	display: inline-block;
    vertical-align: middle;
}
.icon.happy {
	background: url(../img/happy.svg) no-repeat;
	background-size: contain;
}
.icon.sad {
	background: url(../img/sad.svg) no-repeat;
	background-size: contain;
}
.icon.neutral {
	background: url(../img/neutral.svg) no-repeat;
	background-size: contain;
}
.punctuations {
	margin: 0 -5px;
}
.punctuations:after {
	content:'';
	display: block;
	clear: both;
}
.punctuations .punctuation {
	box-sizing: border-box;
	padding: 0 5px;
	width: 33.33%;
	float: left;
}
.punctuations .punctuation .numbers {
	display: inline-block;
	vertical-align: middle;
	color: #00BBFF;
	font-weight: bold;
}
.punctuations .punctuation .title {
	font-size: 10px;
}
.punctuations .punctuation .points {
	font-size: 14px;
	color: #00BBFF;
	font-weight: bold;
	margin-top: 5px;
}
.separator-gap {
	margin-top: 15px;
}
.interface.sharing {
    text-align: center;
}
.share-title {
	font-size: 22px;
}
.social-icons {
	margin: 30px auto;
}

.social-icons .social-icon {
	width: 25px;
    height: 25px;
	display: inline-block;
    vertical-align: middle;
	margin-right: 30px;
}
.social-icons .social-icon:last-child {
	margin-right: 0;
}
.social-icons .social-icon.whatsapp {
	background: url(../img/whatsapp_icon.svg) no-repeat;
	background-size: contain;
}
.social-icons .social-icon.twitter {
	background: url(../img/twitter_icon.svg) no-repeat;
	background-size: contain;
}

/**responsive**/
@media all and (orientation: landscape) {
	.logos-container {
		margin: 0 auto;
	}
	.footer-wrapper {
		margin: 0 auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: 12px!important;
	}
	.game-footer {
		width: 320px;
	}
	.padded-content {
		width: 640px;
		height: 480px;
	}
	.buttons-wrapper .button {
		display: inline-block;
		margin-right: 10px;
	}
	.buttons-wrapper .button:last-child {
		margin-right: 0;
	}
	#login .logo-cdc-container {
		width: 230px;
		text-align: center;
		margin: -9% auto 0;
	}
	.form-group {
		text-align: left;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.interface#rosco {
		margin-top: 20px;
		padding: 0 30px;
	}
	.rosco {
		width: 240px;
		height: 240px;
		position: relative;
		float: left;
		border: 36px solid #D4EFF5;
	}
	.rosco:before {
		content: '';
		width: 170%;
		height: 120%;
		top: -10%;
		left: -35%;
		position: absolute;
		background: url(../img/stars.svg) no-repeat;
		background-size: contain;
		background-position: center;
	}
	.rosco .letter {
		position: absolute;
		border-radius: 100%;
		width: 18px;
		height: 18px;
		margin-left: -11px;
		margin-top: -11px;
		font-weight: bold;
		color: #333;
		line-height: 18px;
		text-align: center;
		font-size: 15px;
		border: 2px solid transparent;
	}
	#roscoQuestion, #roscoAnswer {
		height: 300px;
		width: 340px;
		float: right;
		position: relative;
		padding-left: 30px;
		box-sizing: border-box;
	}
	.interface#rosco .buttons-wrapper {
		width: calc(100% - 30px);
	}
	p.question, .answers {
		height: 230px;
	}
	p.question {
		font-size: 20px;
	}
	.answers .answer {
		width: 260px;
		padding: 6px;
		font-size: 22px;
	}
	.rosco .letter {
		width: 26px;
		height: 26px;
		margin-left: -15px;
		margin-top: -15px;
		line-height: 26px;
		text-align: center;
		font-size: 22px;
	}
	.interface.full {
		box-sizing: border-box;
		padding: 0 10px;
	}
	.close {
		right: 10px;
	}
	.back {
		left: 10px;
	}
	.bars {
		height: 10px;
		background-size: 5px;
	}
	.bars.bottom {
		bottom: 0px;
	}
	.game-wrapper {
		padding: 10px 0;
	}
	p.question {
		width: calc(100% - 30px);
		left: calc(50% + 30px);
	}
}
.code {
	font-size: 12px;
	text-align: right;
	position: absolute;
	bottom: -40px;
	right: 20px;
}