@font-face {
    font-family: "emoji";
    src: url("font/emoji.woff") format('woff');
}
* {
	box-sizing: border-box;
}
html,body {
	font-family: 'Lato', sans-serif;
	margin: 0;
	padding: 0;
	background: transparent;
}
html {
	font-size: 62.5%;
	background: url(../img/background.jpg) center center no-repeat;
	background-attachment: fixed;
    background-size: cover;
}
.header {
	position: relative;
	background-color: #13249A;
	font-size: 0;
	margin: 0;
	border-top: 1.6rem solid #ffba00;
	border-bottom: 1.6rem solid #ffba00;
	opacity: 0.8;
}
.logo {
	background: url(../img/logo.png) no-repeat center center white;
	position: relative;
	padding: .5rem;
	height: 13.5rem;
	width: 90%;
	border-radius: 0 1rem 1rem 0;
	margin: 0 -1.5rem;
}
.header .phrasediv {
	height: 13.5rem;
	float: left;
	width: 60%;
	position: relative; 
}
.header .phrase {
	font-weight: 700;
	color: white;
	text-align: center;
	font-size: 2rem;
	position: absolute;
	width: 90%; 
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.container {
	border: 0;
	/*border-top: 1.6rem solid #ffba00; */
	/*border-radius: 0 0 .6rem .6rem;*/
	padding: 6rem 3rem;
	width: 100%;
}
.container.admin {
	overflow: visible;
	height: auto;
	background:white;
}





/**** LOGIN *****/

.login p {
	font-size: 1.6rem;
}
.login .content {
	font-size: 1.6rem;
	width: 80%;
	position: relative;
	margin: 0 auto;
}
.alert-dismissable .close, 
.alert-dismissible .close {
	top: 0;
}





/*** QUESTIONS ****/
.question legend {
	font-size: 2.4rem;
}
.answers-table {
	padding: 2rem 0;
	margin: 0 -1rem;
}
.answers-table .answer {
	display: inline-block;
	text-align: center;
	height: 100%;
	padding: 3.2rem;
	min-width: 10rem;
	border-radius: .6rem;
	font-size: 1.8rem;
	/*border: 1px solid #2196f3;*/
}
/*
.answers-table .answer:hover,
.answers-table .answer.active {
	background-color: #2196f3;
	color: #fff;
}
*/
.answers-table .answer.active {
	box-shadow: 0 0 .5rem #999;
	font-weight: 700;
}
.answers-table .answer.inactive {
	opacity: .6;
}
.answers-table .answer .image {
	margin: 0 auto;
	position: relative;
	max-width: 14rem;
	border-radius: .6rem;
	background-color: #fff;
	padding: 1rem;
	margin-bottom: 1rem;
}
.answers-table .answer:hover .image,
.answers-table .answer.active .image {
	box-shadow: 0 0 .3rem #000;
}
.answers-table .answer .image:empty {
	display: none;
}
.answers-table .answer .image img {
	max-height: 20rem;
	width: auto;
	max-width: 100%;
}
button#sendAnswer {
	padding: 2rem 3rem;
}
fieldset.question {
	margin-top: 5rem;
}
fieldset.question:first-child {
	margin-top: 0;
}
.send-answer {
	padding: 6rem 0;
	text-align: center;
}
.send-answer button {
	font-size: 1.8rem;
	font-weight: 700;
}
.container .presentation {
	font-size: 2rem;
	padding: 3rem;
	width: 85%;
	margin: 0 auto;
}
.select-language {
	display: block;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
}
.select-language span {
	display: block;
	padding: 1rem 0;
	font-size: 1.8rem;
}
.select-language.mini {
	position: fixed;
	width: auto;
	top: 50%;
	left: initial;
	right: 0;
	transform: translateY(-50%);
	background: white;
	border-radius: 2rem 0 0 2rem;
	box-shadow: 0 0 5px -2px black;
	transition: all .4s;
}
.select-language.mini:hover {
	padding: 0 2rem;
}
.select-language.mini a {
	display: block;
	margin: 2.6rem 1rem;
}
.select-language.mini a img {
	width: 3.6rem;
}
.select-language.mini a:hover img {
	width: 4.8rem;
	margin: -.6rem;
}
.select-language a {
	transition: all .5s ease-in-out;
	opacity: .75;
	text-decoration: none;
	margin: 1rem 2.6rem;
	display: inline-block;
	vertical-align: middle;
}
.select-language a:hover {
	opacity: 1;
}
.select-language a img {
	transition: all .3s ease-in-out;
	border: 0;
	width: 12.8rem;
	height: auto;
}
.select-language a:hover img {
	width: 14.8rem;
	margin: -1rem;
}
.sending-answer {
	display: none;
	z-index: 1000;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .92);
	font-size: 3rem;
}
.sending-answer .centered {
	text-align: center;
	position: absolute;
	min-width: 70%;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #2196f3;
}
.sending-answer .answer-timeout {
	display: none;
	background-color: #fff;
	border-radius: .7rem;
	padding: 2rem;
	font-size: 1.6rem;
}
.sending-answer .answer-timeout button {
	font-size: 1.6rem;
}
.sending-answer .answer-completed {
	display: none;
}





#logout {
	position: absolute;
	right: 2rem;
	top: 2rem;
	color: white;
	z-index: 999;
	text-decoration: none;
	font-size: 1.4rem;
	cursor: pointer;
	font-weight: 700;
}
#logout:hover {
	color: yellow;
}




/*** ADMIN ***/
.btn-admin {
	display: block;
	text-align: left;
	margin: 1rem 0;
}
.btn-admin.bold {
	font-weight: 700;
}
.btn-admin .fa {
	margin-right: .5rem;
	width: 2rem;
}
#adminContents {
	margin: 0 5rem;
}
.buttons-admin {
	margin: 2rem;
}
.help-screen {
	position: fixed;
	z-index: 1000;
	top: 20%;
	left: 20%;
	width: 48rem;
	height: 37rem;
	display: none;
	border: .2rem solid #2196f3;
	border-radius: .6rem;
	background-color: #fff;
	box-shadow: 0 0 .4rem #000;
	overflow: auto;
}
.help-screen.maximized {
	width: 100%;
	height: 100%;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
}
.help-screen .title {
	background-color: #2196f3;
	color: #fff;
	cursor: grab;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: .3rem .3rem 0 0;
	padding: 1rem;
	margin: 0;
}
.help-screen.maximized .title {
	cursor: default;
}
.help-screen .help-content {
	margin-top: 5rem;
	height: calc(100% - 5rem);
	overflow: auto;
	padding: 1.6rem;
}
.help-screen .help-screen-btns {
	position: absolute;
	top: .5rem;
	right: 4rem;
	font-size: 2rem;
	color: #fff;
	opacity: .7;
	z-index: 100;
	cursor: pointer;
}
.help-screen .help-screen-btns:first-child {
	right: 1rem;
}
.help-screen .help-screen-btns:hover {
	opacity: 1;
}
.admin h2 {
	margin-bottom: 4rem;
}
.admin h4 {
	color: #2196f3;
}

.admin .questions-history {
	margin: 1rem;
}
.admin .questions-history .questions {
	padding: 2rem 1rem;
	clear: both;
	margin-top: 3rem;
	width: 100%;
}
.admin .questions-history .questions .title {
	font-size: 1.6rem;
	color: #2196f3;
}
.admin .questions-history .questions .title small {
	font-size: 1.2rem;
	color: #13249A;
}
.admin .questions-history .questions .title .langs-config {
	font-size: 1.2rem;
}
.admin .questions-history .questions .title .langs-config img {
	width: 2.4rem;
	height: auto;
	margin: 0 .5rem;
}
.admin .questions-history .questions td,
.admin .questions-history .questions th {
	vertical-align: top;
	padding: 1rem;
}
.admin .questions-history .questions tbody tr:nth-child(odd) {
	background-color: #efefef;
}
.admin .questions-history .questions thead tr th,
.admin .questions-history .questions tbody tr td {
	border: .1rem solid #dedede;
	border-width: .1rem 0;
}
.admin .questions-history .questions thead tr th:first-child,
.admin .questions-history .questions tbody tr td:first-child {
	border-left-width: .1rem;
	width: 50%;
}
.admin .questions-history .questions thead tr th:last-child,
.admin .questions-history .questions tbody tr td:last-child {
	border-right-width: .1rem;
	width: 10%;
	white-space: nowrap;
}
.admin .questions-history .questions tr.question-open td {
	background-color: #fdfdde;
}
.admin .questions-history .questions tr td.options {
	font-size: 2rem;
}
.admin .questions-history .questions tr td.options a {
	padding: .4rem 1rem;
	margin: 0 1rem;
}
.admin .questions-history .questions tr td.options a:hover {
	background-color: #2196f3;
	color: #fff;
	text-shadow: .1rem .1rem .1rem #000;
}
.admin .form-control.jscolor {
	padding: 0 .5rem;
	border-radius: .3rem;
}




h2 {
	font-weight: 200;
}

/*** admin ajax ***/
#closeAjaxWindow {
	position: absolute;
	top: 0rem;
	right: 1rem;
	font-size: 2rem;
	padding: 1rem;
}
#realTime {
	position: absolute;
	top: 0rem;
	right: 5rem;
	font-size: 2rem;
	padding: 1rem;
}
#realTime:hover,
#realTime:focus,
#realTime:active {
	text-decoration: none;
}
#realTime span {
	font-size: 1.6rem;
}
#realTime.disabled {
	color: red;
	text-decoration: line-through;
}
#realTime:not(.disabled) .anim,
#realTime.disabled .noanim {
	display: inline-block;
}
#realTime:not(.disabled) .noanim,
#realTime.disabled .anim {
	display: none;
}
.ajax-window {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .93);
	z-index: 900;
	display: none;
}
.ajax-window .ajax-content {
	position: absolute;
	width: 86rem;
	min-height: 40rem;
	max-height: 80%;
	background-color: #fff;
	border: .1rem solid #f5f5f5;
	border-radius: .76rem;
	box-shadow: 0 0 4.3rem -2.83rem #000;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.ajax-window .ajax-content .ajax-title h3 {
	font-size: 2rem;
	padding: 2rem 1rem;
	font-weight: 200;
	color: #2196f3;
	margin: 0;
	border-bottom: .1rem solid #2196f3;
}
.ajax-window .ajax-content .ajax-body {
	min-height: 40rem;
	max-height: 65vh;
	overflow: auto;
	background-color: #fff;
	padding: 1rem 3rem;
}
.ajax-window .question-language {
	display: block;
	background-color: #ffba00;
	padding: 1rem 3rem;
	font-size: 1.8rem;
	margin: -1rem -3rem;
	margin-top: 4.6rem;
}
.ajax-window .q-lang:first-child .question-language {
	margin: -1rem -3rem;
}
.ajax-window .question-language img {
	width: 5.6rem;
	height: auto;
}
.ajax-window .editing-question .option {
	font-weight: 700;
	margin: 0;
	margin-top: 2rem;
}
.ajax-window .editing-question .option.big {
	font-size: 2rem;
	margin-top: 4rem;
}
.ajax-window .editing-question .input {
	padding: 0 2.4rem;
	position: relative;
}
.ajax-window .editing-question .input.zones::before {
	content: "\f1b3"; 
}
.ajax-window .editing-question .input::before {
	content: "\f040"; 
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: .3rem;
	font-size: 1.8rem;
	color: #b0b0b0;
}
.ajax-window .editing-question .input .form-control:focus {
	color: #000;
}
.ajax-window .centered {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.ajax-window .editing-answers {
	margin: 2rem 0;
}
.ajax-window .editing-answers h4 {
	font-size: 2rem;
	font-weight: 200;
	border-bottom: .1rem solid #2196f3;
	padding: 1rem 3rem;
	margin: 0 -3rem;
}

.ajax-window .adding-answers {
	padding: 2rem 0;
}/*
.ajax-window .adding-answers .add-answer::before {
	content: "\f192";
	font-family: FontAwesome;
	font-size: 2rem;
	position: absolute;
	left: 0;
}*/
.ajax-window .adding-answers .add-answer {
	font-size: 0;
	position: relative;
	padding: 1rem 0rem 1rem 0rem;
}
.ajax-window .adding-answers .add-answer .input {
	width: calc(55% - 1rem);
	display: inline-block;
	vertical-align: top;
	font-size: 1.4rem;
}
.ajax-window .adding-answers .add-answer .lang {
	width: 6%;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.4rem;
	text-align: left;
}
.ajax-window .adding-answers .add-answer .lang img {
	width: 1.6rem;
	height: auto;
}
.ajax-window .adding-answers .add-answer .image {
	width: 35%;
	display: inline-block;
	vertical-align: top;
	font-size: 1.4rem;
	text-align: center;
}
.ajax-window .adding-answers .add-answer .image .image-wrapper {
	height: 3.6rem;
	width: 5.6rem;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	position: relative;
	margin-left: 1rem;
}
.ajax-window .adding-answers .add-answer .image .image-wrapper .emoji {
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.ajax-window .adding-answers .add-answer .image .image-wrapper .image {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
.ajax-window .adding-answers .add-answer .image .image-wrapper .image img {
	width: auto;
	height: 100%;
}
.ajax-window .adding-answers .add-answer .delete {
	width: 10%;
	display: inline-block;
	vertical-align: top;
	font-size: 1.4rem;
	text-align: center;
}
.ajax-window .adding-answers .add-answer .input input {
	width: 100%;
}
.ajax-window .editing-answers .answers-end {
	margin: 2rem 0;
}


.emoji {
	font-size: 3rem;
	display: inline-block;
}
.answers-table .answer .emoji {
	font-size: 6rem;
}
.emojis-window,
.upload-window,
.files-window {
	display: none;
	background: white;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.emojis-window .emojis-title h3,
.upload-window .upload-title h3,
.files-window .files-title h3 {
	font-size: 2rem;
	padding: 2rem 1rem;
	font-weight: 200;
	color: #2196f3;
	margin: 0;
	border-bottom: .1rem solid #2196f3;
}
.emojis-window .emojis-body,
.upload-window .upload-body,
.files-window .files-body {
	min-height: 40rem;
	max-height: 65vh;
	overflow: auto;
	background-color: #fff;
	padding: 2rem 4rem;
}
.emojis-window .emojis-body .emoji,
.upload-window .upload-body .emoji,
.files-window .files-body .emoji {
	font-size: 6rem;
}
#closeEmojiWindow,
#closeUploadWindow,
#closeFilesWindow {
	position: absolute;
	top: 0rem;
	right: 1rem;
	font-size: 2rem;
	padding: 1rem;
}
.files-window .files-body .files {
	margin: 2rem 0;
}
.files-window .files-body .files .file {
	cursor: pointer;
	padding: 1.5rem;
	height: 11.5rem;
	text-align: center;
}
.files-window .files-body .files .file:hover {
	transition: all ease-in-out .5s;
	background-color: #efefef;
	box-shadow: 0 0 1rem -.5rem rgba(0,0,0,.6);
}
.files-window .files-body .files .file .filename {
	display: block;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: .8rem;
}
.files-window .files-body .files .file img {
	height: 6rem;
	width: auto;
	max-width: 100%;
}
#progress-wrp {
	display: none;
    border: .1rem solid #0099CC;
    padding: .1rem;
    position: relative;
    height: 3rem;
    border-radius: .3rem;
    margin: 2rem 0;
    text-align: left;
    background: #fff;
    box-shadow: inset .1rem .3rem .6rem rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
    height: 100%;
    border-radius: .3rem;
    background-color: #b0b0b0;
    width: 0;
    box-shadow: inset .1rem .1rem 1rem rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
    top: .3rem;
    left: 50%;
    position: absolute;
    display: inline-block;
    color: #000000;
}
.preview-result-upload {
	display: none;
	max-width: 100%;
	height: auto;
}


.stats-question {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
.stats-question-chart {
	width: 45%;
	margin-left: 2%;
	display: inline-block;
	vertical-align: top;
	padding: 1rem 0;
}
.questions-stats-results,
.questions-stats-percent {
	position: relative;
	padding: 2rem 0;
	min-height: 10rem;
}
.question-result {
	font-size: 0;
}
.question-result:nth-child(odd) {
	background-color: #f0f0f0;
}
.question-result .answer {
	display: inline-block;
	vertical-align: middle;
	width: 45%;
	padding: 0 1rem;
	font-size: 1.6rem;
}
.question-result .emoji {
	display: inline-block;
	vertical-align: middle;
	width: 12%;
	padding: 0 1rem;
	font-size: 2.4rem;
}
.question-result .emoji img {
	max-width: 100%;
	max-height: 6rem;
	width: auto;
}
.question-result .date {
	display: inline-block;
	vertical-align: middle;
	width: 28%;
	padding: 0 1rem;
	font-size: 1.2rem;
}
.question-result .zone {
	display: inline-block;
	vertical-align: middle;
	width: 15%;
	padding: 0 1rem;
	font-size: 1.2rem;
}







/** checks ***/
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + span {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;/* Likely future */
}
input[type="checkbox"] + span::before {
	font-family: FontAwesome;
	width: 2rem;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	font-size: 2rem;
	color: #000;
	content: "\f096";
	cursor: pointer;
}
input[type="checkbox"]:checked + span::before {
	color: #2196f3;
	content: "\f046";
}



.form-control[disabled], fieldset[disabled] .form-control {
	opacity: .35;
}






/*** media queries ***/
@media all and (max-width: 980px) {
	.logo {
		width: 100%;
	}
	.header .phrasediv {
		width: 100%;
		height: 5rem;
	}
	.header .phrasediv .phrase {
		font-size: 1.8rem;
	}
	
	.answering-question tr, 
	.answering-question tr td,
	.answering-question tr td .answer {
		display: block;
		width: 100%;
		margin: 1rem 0;
	}

}