/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++                           MIXINS.LESS
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++
++ [All-In-One Syntax]
++	font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]
++	background: [bg-color] [bg-image] [position/bg-size] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment]
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++   [  BASIC mixins  ] Frequently used mixins
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*--------------------------[               Box options              ]-------------------------*/
/** Box outside border. */
/*---------------------------------------------------------------------------------------------*/
/*------------------------[               Images options              ]------------------------*/
/** Convert img to "black and white" depending on $scale from 0 (no change) to 1 (totally grayscales).
	Also known as desaturating.
1st June 2015: mobile support is around 80% and computer support around 82% */
/** This removes a grayscale created by the previous call.
	Example of use:	.thing { grayscale(); } .thing:hover { no-filter(); }
	*/
/** This is for counteracting the browser's anti-aliasing which makes the image look blurry. Image render makes it look more pixelated.
Browsers:
	- Edge: Not supported, everything looks fine anyway.
	- IE: Supports only -ms-interpolation-mode: nearest-neighbor but doesn't change much so better without.
	- Firefox: Supports most of these (-moz-crisp-edges, pixelated, optimizeSpeed) but they all look bad, forget about it.

	Only Chrome uses anti-aliasing to the point the images look blurry which is why we only use this webkit property, other browsers are ok.
*/
/*---------------------------------------------------------------------------------------------*/
/*-------------------------[               TEXT options              ]-------------------------*/
/** User can't select text in the box anymore. But inputs still work. */
/** This adds "..." if the text is longer than it's box. Give the box's height. */
/** Same as ellipsis but with customizable number of lines to show.
.source: http://codepen.io/martinwolf/pen/qlFdp (added lines for webkit, 8 sept 2015)
$param lines-shown: the number of lines we want to show
$param line-height: setting line-height
$param font-size: setting font-size
$param max-width: setting max-width
 */
/** This function will vertically center a text in a div of $height innerheight size, and set also the div height.
  Need to be in box-sizing:content to work.
  That's just a shortcut cause I'm lazy.
  */
/*---------------------------------------------------------------------------------------------*/
/*------------------------[         POSITION and ROTATE options        ]-----------------------*/
/*---------------------------------------------------------------------------------------------*/
/*---------------------------[            OTHERS options           ]---------------------------*/
/*---------------------------------------------------------------------------------------------*/
/*------------------------[          FLEX and ARRANGE options         ]------------------------*/
/** [OLD] Flex function for simple needs.
	$dir (direction) can also be "column".
	*/
/** Use with previous function. Any child that must be of fixed width, say it here.
	$width in px, em.. any unit.
	*/
/** Use with 2 previous functions. Any child that you want of bigger width, say it here.
	$w no unit. 1 is same with. 2 is double width. (it's flex-grow)
	*/
/*---------------------------------------------------------------------------------------------*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++   [  NEW mixins  ] Useful additions
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* [NEW] Here we have an extension of mixins for flexbox with more options.
 .flex remains because it is used for the moment and in other places in the game.
 Flexbox display
 */
/** When the parent container has a display:flex;. We can effortlessly rearrange the child's elements into it:
 To work correctly, all child elements must have a flex-order!
 param $val - <integer> (1 - first position, 2 - second position and etc..)
*/
/** $content - applies to: multi-line flex containers
 - can be: flex-start | flex-end | center | space-between | space-around | stretch
 param $items - applies to: flex containers
 - can be: flex-start | flex-end | center | baseline | stretch
 $self - applies to: flex items
 - can be: auto | flex-start | flex-end | center | baseline | stretch
 */
/* .flex-short - Collects the most important flexbox mixins.
 We do not write 5 lines to call 5 mixes, but only 1 in which we have the most important thing to arrange our containers.
 */
/*-------------------------[               Transitions              ]--------------------------*/
/*---------------------------------------------------------------------------------------------*/
/*--------------------------[               Animation              ]---------------------------*/
/*---------------------------------------------------------------------------------------------*/
/*------------------------------[          ICONS mixin         ]-------------------------------*/
/*---------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 2500px) {
  nav.global-menu ul.the-menu li a {
    width: 445px !important;
    font-size: 22px !important; } }
@media only screen and (max-width: 995px) {
  .metro-view .main-content .inner-container {
    padding: 0px 15px 90px; }

  nav.global-mobile-nav {
    margin-bottom: 7px !important;
    padding: 11px 12px 12px 30px !important; }

  .row.modal-content {
    margin: 0 auto !important; }

  .msg-box.normal-margin {
    margin: 25px 0 70px 25px;
    flex-wrap: wrap; }
    .msg-box.normal-margin .icon {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%; }
      .msg-box.normal-margin .icon .quiz_mix_icn {
        margin: 0 auto; }
    .msg-box.normal-margin .msg {
      -webkit-flex: 0 0 60%;
      -ms-flex: 0 0 60%;
      flex: 0 0 60%; } }
@media only screen and (max-width: 995px) {
  .msg-box.normal-margin {
    margin: 25px -38px 70px -54px; } }
.modal#quiz-modal .modal-content {
  position: relative; }
.modal#quiz-modal .box-shadow {
  background-color: #e9f2fd !important; }
.modal#quiz-modal .logo-quiz {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 10px;
  left: 15px; }
  .modal#quiz-modal .logo-quiz img {
    max-width: 100%; }
.modal#quiz-modal .special-h1-edition {
  margin-top: 40px;
  text-align: center; }
  .modal#quiz-modal .special-h1-edition .h1-line {
    width: 15%;
    left: 50%;
    transform: translateX(-50%); }
.modal#quiz-modal p#question {
  margin-bottom: 40px; }

#quiz-card ul#answers {
  width: 80%;
  margin: 0 auto 40px; }
  #quiz-card ul#answers li {
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: no-wrap;
    -moz-flex-wrap: no-wrap;
    -ms-flex-wrap: no-wrap;
    flex-wrap: no-wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: flex-start;
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-self: unset;
    -moz-align-self: unset;
    -ms-align-self: unset;
    align-self: unset;
    background-color: #ffffff; }
    #quiz-card ul#answers li:hover {
      cursor: pointer; }
      #quiz-card ul#answers li:hover .symbol {
        background-color: #0066ff;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out; }
      #quiz-card ul#answers li:hover .identifier {
        background-color: #0066ff;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out; }
    #quiz-card ul#answers li.wrong.answered .symbol {
      background-color: #ff818f; }
      #quiz-card ul#answers li.wrong.answered .symbol.empty-answer span:before {
        content: "\00d7"; }
    #quiz-card ul#answers li.wrong.answered .identifier {
      background-color: #ff818f; }
    #quiz-card ul#answers li.correct.answered .symbol {
      background-color: #8ae6cf; }
      #quiz-card ul#answers li.correct.answered .symbol.empty-answer span:before {
        content: "\2713"; }
    #quiz-card ul#answers li.correct.answered .identifier {
      background-color: #8ae6cf; }
    #quiz-card ul#answers li.wrong:hover .symbol, #quiz-card ul#answers li.correct:hover .symbol {
      opacity: 0.60; }
    #quiz-card ul#answers li.wrong:hover .identifier, #quiz-card ul#answers li.correct:hover .identifier {
      opacity: 0.60; }
  #quiz-card ul#answers .symbol {
    -webkit-flex: 0 0 50px;
    -ms-flex: 0 0 50px;
    flex: 0 0 50px;
    height: 50px;
    background-color: #8cdafe;
    text-align: center; }
    #quiz-card ul#answers .symbol.empty-answer span:before {
      content: "\26AC"; }
    #quiz-card ul#answers .symbol span {
      display: block;
      font-size: 33px;
      color: #ffffff; }
  #quiz-card ul#answers .identifier {
    -webkit-flex: 0 0 13px;
    -ms-flex: 0 0 13px;
    flex: 0 0 13px;
    height: 50px;
    background-color: #8cdafe; }
  #quiz-card ul#answers p.text {
    text-align: left;
    flex-grow: 10;
    margin-bottom: 0;
    padding: 0 16px; }

#quiz-card .jump-to-question {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 7px;
  position: relative; }
  #quiz-card .jump-to-question p.steps {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%); }
  #quiz-card .jump-to-question .arrows {
    cursor: pointer;
    -webkit-flex: 0 0 25px;
    -ms-flex: 0 0 25px;
    flex: 0 0 25px;
    position: absolute;
    top: -20px; }
    #quiz-card .jump-to-question .arrows[previous_question] {
      left: 120px; }
    #quiz-card .jump-to-question .arrows[next_question] {
      right: 120px; }

@media only screen and (max-width: 995px) {
  .modal#quiz-modal .row > * {
    margin: 0;
    padding: 0; }
  .modal#quiz-modal .big-cover-card {
    padding: 25px 4px !important; }
  .modal#quiz-modal ul#answers {
    width: 97%; }
    .modal#quiz-modal ul#answers li {
      height: auto;
      min-height: 50px;
      display: block !important;
      position: relative; }
      .modal#quiz-modal ul#answers li .symbol {
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 53px;
        height: 100%;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center; }
      .modal#quiz-modal ul#answers li .text {
        padding: 7px 15px 7px 60px; }
      .modal#quiz-modal ul#answers li .identifier {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 10px;
        height: 100%; }
  .modal#quiz-modal .arrows {
    cursor: pointer;
    -webkit-flex: 0 0 25px;
    -ms-flex: 0 0 25px;
    flex: 0 0 25px;
    position: absolute;
    top: -20px; }
    .modal#quiz-modal .arrows[previous_question] {
      left: 20px; }
    .modal#quiz-modal .arrows[next_question] {
      right: 20px; } }

/*# sourceMappingURL=quiz-system.css.map */