/*
//////////////////////////////////////////////////////////////////////////
// Copyright © 2010-2016 Artefacts Studio, all rights reserved.
//////////////////////////////////////////////////////////////////////////
*/

@import "../vendor/less-prefixer/less/prefixer.less";

@colorA: #000000;
@colorB: #79b3b4;
@colorC: #FFFFFF;
@blinkDuration: 0.5s;
@blinkFastDuration: 0.15s;

@font-face { font-family: 'User-Font'; src: url('fonts/fontUser.ttf') format('truetype'); }

body { background-color: @colorC; font-family: 'User-Font'; overflow-x: hidden; }


/* ==========================================================================
= .view-intro
========================================================================== */
.view-intro .intro { margin: 80px 20px 20px 20px; padding-bottom: 20px; border-top: 1px dashed @colorA; border-bottom: 1px dashed #e6e6e6; }
.view-intro .intro h1 { color: @colorA; font-size: 3em; line-height: 100px; }
.view-intro .intro .box { background-color: @colorA; padding-top: 10px; min-height: 200px; }
.view-intro .intro .box .splashscreen { max-width: 100%; max-height: 150px; }
.view-intro .intro h2 { color: @colorC; font-size: 2.8em; margin-top: 0px; margin-bottom: 10px; line-height: 50px; }

.view-intro .startQuizz { cursor: pointer; font-size: 2em; color: @colorA; text-decoration: none; }
.view-intro .startQuizz img { max-height: 68px; display: block; margin-left: auto; margin-right: auto; background-color: @colorB; border-radius: 50%; transition: background-color @blinkDuration ease 0s; }


/* ==========================================================================
= .view-questions
========================================================================== */
.view-questions .menu { padding: 10px 5px 10px 5px; border: 1px dashed @colorA; background-color: @colorC; margin-right: 10px; }
.view-questions .menu h1 { color: @colorA; font-size: 1.8em; word-wrap: break-word; margin-top: 0px; margin-bottom: 20px; text-align: center; }
.view-questions .menu .index { color: @colorB; font-size: 2.5em; line-height: 1em; word-wrap: break-word; text-align: center; }
.view-questions .menu .index .total { color: @colorA; word-wrap: break-word; text-align: center; }
.view-questions .menu .squareContainer { position: relative; overflow: hidden; margin-top: 20px; margin-bottom: 20px; }
.view-questions .menu .squareContainer .square { background-color: @colorA; float: left; margin-left: 10%; margin-top: 10%; padding-bottom: 12%; width: 12%; }
.view-questions .menu .squareContainer .square.selected { background-color: @colorB; }

.view-questions .validate { display: block; cursor: pointer; text-decoration: none; width: 100%; margin-top: 10px; padding-right: 10px; text-align: center; }
.view-questions .validate img { width: 64px; margin-right: 10px; background-color: @colorB; border-radius: 50%; transition: background-color @blinkDuration ease 0s; }
.view-questions .validate span { color: @colorA; font-size: 2em; line-height: 64px; }

.view-questions { padding: 0px; }
.view-questions .header .question { background-image: url("../asset/questionHeader.png"); background-size: 100% 100%; height: 100%; width: 100%; padding: 10px 35px 10px 35px; text-align: center; }
.view-questions .header .question { background: none; position: relative; z-index: 1; overflow: hidden; }
.view-questions .header .question .title { color: @colorC; font-size: 2.7em; line-height: 1em; }
.view-questions .header .question .help { color: @colorC; font-size: 1.5em; line-height: 1em; margin-top: 10px; }
.view-questions .image { margin-top: 10px; width: 100%; text-align: center; }
.view-questions .image img { max-width: 30em; }

/* animation header */
.view-questions .header .question::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .transform-origin(center center); background-image: url("../asset/questionHeader.png"); background-size: 100% 100%; z-index: -1; }
.view-questions .header .question::before { .animation(question-header-background normal @blinkDuration); .animation-iteration-count(1); }
.view-questions .header .question span.title::before { position: absolute; width: 100%; left: 50%; .transform(translate(-50%, 0)); padding: 0px 35px; content: attr(title); .animation(question-header-push normal @blinkDuration); .animation-iteration-count(1); }
.view-questions .header .question span.title span { opacity: 0; }


@questions-button-size: 4em;
.view-questions .answers .answer { display: block; cursor: pointer; position: relative; text-decoration: none; margin-top: 20px; overflow: hidden; width: 100%; padding: 0px; }
.view-questions .answers .answer .button { margin: 10px; float: left; height: @questions-button-size; width: @questions-button-size; border-radius: 50%; background: rgba(0, 0, 0, 0) url("../asset/Handle.png"); background-color: @colorB; background-size: 100% 100%; }
.view-questions .answers .answer .textContainer { display: block; color: @colorC; font-size: 2.7em; line-height: 1em; padding: 10px 10px 10px 1em; }
.view-questions .answers .answer .imageContainer { float: left; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; }
.view-questions .answers .answer .imageContainer img { max-height: 10em; }


/* ==========================================================================
= .view-questions / question
========================================================================== */
.view-questions .questions .qcm .answer {  }

.view-questions .questions .qcm .answer::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: @colorA; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .qcm .answer::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .transform(scaleY(-0.1)); .transform-origin(bottom center); background: @colorB; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .qcm .answer.selected::after { .transform(scaleY(1)); }
html:not(.is-touch) .view-questions .questions .qcm .answer:hover::after { .transform(scaleY(1)); .opacity(0.5); }
html:not(.is-touch) .view-questions .questions .qcm .answer.selected:hover::after { .opacity(0.75); }


.view-questions .questions .shortList { max-width: 40em; margin-left: auto; margin-right: auto; margin-top: 10px; padding-left: 1.5%; }
.view-questions .questions .shortList .order { float: none; display: table-cell; margin-right: 1%; width: 30%; overflow: hidden; background: none; margin: 1%; padding: 0px; }
.view-questions .questions .shortList .order1 { width: 100%; }
.view-questions .questions .shortList .order2 { width: 48%; }
.view-questions .questions .shortList .order3 { width: 30%; }
.view-questions .questions .shortList .order .answerContainer { display: table; height: 100%; color: @colorC; font-size: 1.8em; line-height: 1em; padding: 10px; }
.view-questions .questions .shortList .order .answerContainer .wrap { display: table-cell; vertical-align: middle; text-align: center; position: relative; overflow: hidden; padding: 10px; }
.view-questions .questions .shortList .order .answerContainer .wrap img { width: 100%; max-height: 100%; }

.view-questions .questions .shortList .order .answerContainer .wrap::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: @colorA; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .shortList .order .answerContainer .wrap::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .transform(scaleY(-0.1)); .transform-origin(bottom center); background: @colorB; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .shortList .order.selected .answerContainer .wrap::after { .transform(scaleY(1)); }
html:not(.is-touch) .view-questions .questions .shortList .order .answerContainer .wrap:hover::after { .transform(scaleY(1)); .opacity(0.5); }
html:not(.is-touch) .view-questions .questions .shortList .order.selected .answerContainer .wrap:hover::after { .opacity(0.75); }


.view-questions .questions .pairing .pair { margin-top: 10px; clear: both; overflow: hidden; display: table; width: 100%; padding: 5px; }
.view-questions .questions .pairing .answer { position: relative; overflow: hidden; display: table-cell; cursor: pointer; width: 40%; color: @colorC; height: 100px; font-size: 1.5em; text-align: center; vertical-align: middle; }
.view-questions .questions .pairing .answer span { display: block; width: 100%; padding: 10px; word-wrap: break-word; }
.view-questions .questions .pairing .answer span img { max-width: 7em; }

.view-questions .questions .pairing .answer span::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: @colorA; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .pairing .answer span::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .transform(scaleY(-0.1)); .transform-origin(bottom center); background: @colorB; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-questions .questions .pairing .answer.selected span::after { .transform(scaleY(1)); }
.view-questions .questions .pairing .answer.connected span::after { .transform(scaleY(1)); background: fade(@colorB, 80%); }
html:not(.is-touch) .view-questions .questions .pairing .answer span:hover::after { .transform(scaleY(1)); .opacity(0.5); }
html:not(.is-touch) .view-questions .questions .pairing .answer.connected span:hover::after { .opacity(0.75); }


/* ==========================================================================
= .view-questions / answer
========================================================================== */
.view-answers .comment { width: 100%; min-height: 80px; text-align: center; color: #ffffff; }
.view-answers .comment .rightOrWrong { margin-top: 10px; text-transform: uppercase; font-size: 4em; }
.view-answers .comment .details { margin-top: 10px; color: #ffffff; line-height: 1.2em; font-size: 2.5em; }

.view-answers .answers { position: relative; overflow: hidden; }
.view-answers .answers a.answer .wrap { display: table; width: 100%; height: 100%; }
.view-answers .answers a.answer img { position: relative; display: table-cell; width: @questions-button-size; margin: 10px; border-radius: 50%; background-color: @colorB; }
.view-answers .answers .next .textContainer { position: relative; display: table-cell; width: 100%; vertical-align: middle; text-align: left; line-height: 1em; padding: 0px; }

.view-answers .answers .next::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: @colorA; z-index: -1; .transition(transform (@blinkDuration / 3)); }
.view-answers .answers .next::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .transform(scaleY(-0.1)); .transform-origin(bottom center); background: @colorB; z-index: -1; .transition(transform (@blinkDuration / 3)); }
html:not(.is-touch) .view-answers .answers .next:hover::after { .transform(scaleY(1)); }


/* ==========================================================================
= .view-score
========================================================================== */
.view-score .score { margin: 80px 20px 20px 20px; padding-bottom: 20px; border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; }
.view-score .score .header { margin-top: 20px; background-image: url("../asset/questionHeader.png"); background-size: 100% 100%; height: 100%; width: 100%; padding: 10px; text-align: center; }
.view-score .score .header .title { color: @colorC; margin: 0px; text-transform: uppercase; }

.view-score .score .board { margin-top: 20px; }
.view-score .score .board .scoreContainer { border: 2px solid #ffffff; vertical-align: middle; font-size: 4em; }
.view-score .score .board .scoreContainer .yourScore { color: @colorB; }
.view-score .score .board .scoreContainer .total { color: @colorA; }

.view-score .score .board .message { background-color: @colorA; color: @colorC; vertical-align: middle; font-size: 3em; }

.view-score .startQuizz { cursor: pointer; font-size: 2em; color: @colorB; text-decoration: none; }
.view-score .startQuizz img { max-height: 68px; display: block; margin-left: auto; margin-right: auto; background-color: @colorB; border-radius: 50%; transition: background-color @blinkDuration ease 0s; }


/* ==========================================================================
= UTILS
========================================================================== */
/* columns of same height */
.row-height { display: table; table-layout: fixed; height: 100%; width: 100%; }
.col-height { display: table-cell; float: none; height: 100%; vertical-align: top; }
.inside-full-height { height: 100%; margin-top: 0; margin-bottom: 0; }

/* for bootstrap rows */
.no-gutter { margin-left: 0; margin-right: 0; }
.no-gutter > [class*="col-"] { padding-left: 0; padding-right: 0; }
.no-gutter.slider [class*="col-"] { padding-left: 0; padding-right: 0; }

.blink { .animation(blink normal @blinkDuration infinite); }
.blink.fast { .animation(blink normal @blinkFastDuration infinite); }
.fadingOutIn { .animation(fadingOutIn normal 1s 1); }


/* ==========================================================================
= TRANSITIONS
========================================================================== */
body {
	.keyframes(blink; { 0% { .opacity(0); } 100% { .opacity(1); }})
}
body {
	.keyframes(question-header-background; { 0% { transform: scaleX(-0.1); } 100% { transform: scaleX(1); }})
}
body {
	.keyframes(question-header-push; { 0% { .transform(translate(-50%, -1em)); } 100% { .transform(translate(-50%, 0)); }})
}


/* ==========================================================================
= MEDIA QUERIES
========================================================================== */
@media (max-width: 991px) {
	body { font-size: 7px; }
	.view-intro .intro { margin: 10px; padding-bottom: 5px; }
	.view-intro .intro h1 { margin: 5px; line-height: 1em; }
	.view-intro .intro h2 { line-height: 1em; }
	.view-intro .intro .box { padding-top: 5px; min-height: 150px; }
	.view-questions .validate img { width: 80%; max-width: 64px; margin-left: 10%; margin-right: 10%; }
	.view-questions .validate span { display: block; float: none; font-size: 3em; text-align: center; padding-right: 0px; }
	.view-questions .answers .answer { margin-top: 10px; }
}
@media screen and (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
	body { font-size: 14px; }
}
@media screen and (min-width: 1200px) {
	body { font-size: 14px; }
}