/*---------------------------------------
  01- Mixin & Variables
----------------------------------------*/
/*  Global variables
----------------------------------------*/
/*  Global mixin
----------------------------------------*/
/*  Global font-face mixin
----------------------------------------*/
/*---------------------------------------
  02- Class building and customization
----------------------------------------*/
/*  Quiz area: item radio
----------------------------------------*/
.bar-header {
  background: #241d10;
  border-bottom-width: 0px;
  font-size: 134%; }

.bar.bar-stable {
  background: #241d10;
  color: #ffffff;
  border: none; }
  .bar.bar-stable .title {
    color: #ffffff;
    font-weight: bold; }
  .bar.bar-stable .button.button-clear {
    color: #ffffff; }

.answer {
  padding: 20px 5px;
  background: #00b2f2;
  overflow: hidden;
 }
 .answer .col:nth-child(even) {
  margin-left: 2%;
 }
 .answer .col-50 {
  float: left;
  margin-bottom: 10px;
  width: 49%;
 }
  .answer .item {
    padding: 0; }

.clearfix {
  padding: 0 20px; }

.item-radio {
  margin: 7px 0; }
  .item-radio .item-content {
    /*background: url('../img/bg/bt-check-list.png') repeat-x;*/
    color: #33485d;
    background: #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold; }
  .item-radio .radio-icon {
    padding: 4px 14px;
    color: #ffffff; }
.card .item:first-child .item-content, .list-inset .item:first-child .item-content, .padding > .list .item:first-child .item-content {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.card .item:last-child .item-content, .list-inset .item:last-child .item-content, .padding > .list .item:last-child .item-content {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.list-inset .item:first-child,
.list-inset .item:last-child {
  border-radius: 0px;
  webkit-border-radius: 0px;
  moz-border-radius: 0px; }

.item-radio input[type="radio"][disabled] + .radio-content .item-content {
  background: #545a5b;
  color: #6f7876; }

.item-radio input:checked +
.radio-content .item-content {
  background: #35e67e;
  color: #ffffff; }

.item-complex .item-content,
.item-radio .item-content {
  padding: 10px 49px 10px 16px;
  height: 40px; }

.item-radio input[type="radio"][disabled] + .radio-content .item-content {
  background: #4dc9f6;
  color: #319ec6; }

/*  Quiz area: other elements
----------------------------------------*/
.quiz-area .step {
  background: #ffdd3e;
  color: #1e1a07;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase; }
  .quiz-area .step.button:hover {
    border: none; }

.quiz-area .score {
  font-weight: bold;
  font-size: 18px; }

.quiz-area .label-notify {
  background: #fb0a15;
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 10px;
}

.quiz-area .label-right {
  background: #297509;
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  color: #ffffff;
  opacity: 0.7; margin-bottom: 10px; }
/*  Styling for application
----------------------------------------*/
#quizContent .scroll-content {
  background: url("../img/bg/bg-geo.jpg") repeat left top;
  /*-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }*/
  background: #ecf0f1;
}

.card, .list-inset {
  background: none;
  margin: 0; }

.item-body {
  overflow: hidden; }

.item-body .row {
  padding: 0 5px; }

.item {
  background: none;
  border: none;
  padding: 5px; }

#notification {
  height: 60px;
}

.has-header {
  -webkit-transition: 200ms top; }

.col {
  padding: 0px; }

#result {
  height: 40px;
  background: #00b5f7;
  border-bottom: 2px solid #0090c5;
  position: relative; }
  #result .order {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 30px; }
  #result .score {
    color: #ffffff;
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 20px; }
    #result .score .point {
      color: #ffffff; }

/*  Styling left menu
----------------------------------------*/
.menu {
  background: none; }
  .menu .list .item {
    padding: 0; }
  .menu .list .item-complex .item-content,
  .menu .list .item-radio .item-content {
    background: url('../img/bg/bg-top-header.png') repeat-x;
    color: #0F8590;
    font-weight: bold; }

.menu .scroll-content {
  background: #2c2b2a; }

.btn-start {
  /*background: url('../img/bg/bt-check-list.png') repeat-x;*/
  color: #ffffff;
  background: #00b2f2;
  font-weight: bold;
  line-height: 40px;
  text-transform: uppercase; }
  .btn-start.button:hover {

    border: none; }

.intro-text {
  font-size: 22px;
  line-height: 22px;
  margin-top: 22px; }

.guess {
  margin-top: 22px !important; }
.guess .full-image {
  width: 110%;
  margin-left: -10px;
}
.result-info {
  text-align: center;
  margin-bottom: 15px; }

#trophy {
  background: #142b36;
  border: 4px solid #f29136;
  margin: 10px 10px 10px 10px; }
  #trophy p {
    color: #f29136;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0; }
  #trophy .btn-opt {
    border-color: transparent;
    background-color: #f8f8f8;
    color: #444;
    min-height: 35px;
    text-align: center;
    font-size: 12px;
    line-height: 32px;
    text-align: left;
    background: #056873;
    color: #55c0a4;
    font-weight: bold;
    text-transform: uppercase; }
    #trophy .btn-opt .point {
      float: right;
      color: #ffffff; }

.icon-trophy {
  margin-top: 15px; }

button:focus {
  outline: 0 !important; }
.reset {
  left: 45%;
  position: absolute;
  color: #85b24f;
  top: 5px;
  font-weight: bold;
}
.popup-head {
  background: #ffdd3e;
  color: #ffffff;
}
.popup {
  background: #056873;
}
.popup-buttons .button {
  background: #241d10;
  color: #ffdd3e;
}
.no-under {
  text-decoration: none;
}
.country-name {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}
@font-face {
  font-family: 'Cabbagetown';
  src: url('../font/cabbagetown.ttf')  format('truetype');
}
@font-face {
  font-family: 'LuckiestFont';
  src: url('../font/luckiestguy.ttf')  format('truetype');
}
.item p.country-name {
  color: #3a5169;
  font-size: 9px;
  margin-bottom: 20px;
  padding: 10px 0;
  margin: 0px;
  font-family: Cabbagetown;
}
.popup-container .popup {
  width: 90%;
  max-height: auto;
}
.more .item-thumbnail-left > img:first-child, .more .item-thumbnail-left .item-image, .more .item-thumbnail-left .item-content > img:first-child, .more .item-thumbnail-left .item-content .item-image {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: 50px;
  max-height: 50px;
  width: 100%;
  height: 100%;
}
.more .item.item-thumbnail-left, .more .item.item-thumbnail-left .item-content {
  padding-top: 8px;
  padding-left: 60px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: #ddd;
}
.more .item h2 {
  font-family: LuckiestFont;
  color: #0c759c;
  font-size: 14px;
}
.popup-container .popup {
  background: #ffffff;
}