/* Animation */
/* Colors */
/* Animation */
/* Typography */
@font-face {
  font-family: MetaBlackRoman;
  src: url("../fonts/MetaBlack-Roman.otf");
}
@font-face {
  font-family: MetaBoldItalic;
  src: url("../fonts/MetaBold-Italic.otf");
}
@font-face {
  font-family: MetaNormalLFRoman;
  src: url("../fonts/MetaNormalLF-Roman.otf");
}
h1 {
  text-transform: uppercase;
  text-align: center;
  color: #282828;
  font-size: 80px;
  margin-bottom: 0;
  margin-bottom: 20px;
}
p {
  font-family: MetaNormalLFRoman;
  font-size: 18px;
}
p.center {
  text-align: center;
  font-size: 26px;
}
/* Generel styling */
#finish {
  display: block;
}
div#main #navigation #init form input {
  display: block;
}
div#main #navigation #init .container .row .columns {
  text-align: center;
}
div#main #navigation #init .container .row .columns #placeholder-country {
  margin: 0 auto;
  width: 100%;
}
div#main #navigation #init .container .row .columns #placeholder-country:hover {
  cursor: pointer;
}
div#main #navigation #init .container.country-selection {
  width: 100%;
  height: calc(100% - 100px);
  overflow-y: scroll;
  position: absolute;
  margin: 0 auto;
  top: 0px;
  left: 0;
  right: 0;
  padding: 50px 0;
  background-color: #FFF;
  display: none;
  z-index: 100;
}
div#main #navigation #init .container.country-selection .row {
  position: relative;
}
div#main #navigation #init,
div#main #navigation #presentation,
div#main #navigation #vote,
div#main #navigation #revise-vote,
div#main #navigation #quiz {
  overflow-y: scroll;
}
.container .row .columns.country {
  transition: all ease 350ms;
  opacity: 0.8;
  margin-bottom: 15px;
}
.container .row .columns.country.chosen-country {
  opacity: 1;
}
.container .row .columns.country.chosen-country p {
  font-weight: bold;
}
.container .row .columns.country.country:hover {
  cursor: pointer;
  opacity: 1;
}
.container .row .columns.country p {
  margin-bottom: 0;
}
.container .row .columns.country h4 {
  margin-bottom: 15px;
  min-height: 60px;
}
#main {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#main #navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300vh;
}
#main #navigation > div {
  display: block;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 50px;
  padding-bottom: 50px;
}
#main #navigation #init,
#main #navigation #presentation,
#main #navigation #vote,
#main #navigation #revise-vote,
#main #navigation #quiz {
  position: relative;
  display: block !important;
}
#main #navigation #presentation {
  display: none;
  background: #f2f2f2;
}
#main #navigation #presentation .container .row .columns p {
  margin-bottom: 10px;
}
#main #navigation #presentation .container .row .columns p.uppercase {
  font-family: MetaBlackRoman;
  text-transform: uppercase;
  font-size: 22px;
}
#main #navigation #presentation .container .row .columns p:first-of-type {
  font-family: MetaBoldItalic;
}
#main #navigation #presentation .container .row .columns img {
  width: 100%;
  height: auto;
}
#main #navigation #presentation .container .row .columns#active-player {
  text-align: right;
  display: none;
}
#main #navigation #presentation .container .row .columns#active-player h2,
#main #navigation #presentation .container .row .columns#active-player img {
  vertical-align: top;
}
#main #navigation #presentation .container .row .columns#active-player h2 {
  display: inline-block;
  margin-right: 10px;
}
#main #navigation #presentation .container .row .columns#active-player img {
  width: 50px;
}
#main #navigation #presentation .container .row .columns#solution {
  display: none;
}
#main #navigation #vote .container,
#main #navigation #revise-vote .container {
  /*&.nav-tool{
                    display: none; // TODO: Make "Gå til quiz"-button visible when group has voted.
                }*/
}
#main #navigation #vote .container#quiz-link,
#main #navigation #revise-vote .container#quiz-link {
  display: none;
}
#main #navigation #vote .container .row .player-submition,
#main #navigation #revise-vote .container .row .player-submition {
  display: none;
}
#main #navigation #vote .container .row .columns,
#main #navigation #revise-vote .container .row .columns {
  margin-bottom: 20px;
}
#main #navigation #vote .container .row .columns:last-of-type,
#main #navigation #revise-vote .container .row .columns:last-of-type {
  margin-bottom: 0;
}
#main #navigation #vote .container .row .columns input,
#main #navigation #revise-vote .container .row .columns input,
#main #navigation #vote .container .row .columns label,
#main #navigation #revise-vote .container .row .columns label {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
#main #navigation #vote .container .row .columns label,
#main #navigation #revise-vote .container .row .columns label {
  margin-left: 20px;
  cursor: pointer;
  outline: none !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  opacity: 0.6;
}
#main #navigation #vote .container .row .columns label:focus,
#main #navigation #revise-vote .container .row .columns label:focus {
  outline: none;
}
#main #navigation #vote .container .row .columns input:checked + label,
#main #navigation #revise-vote .container .row .columns input:checked + label {
  opacity: 1 !important;
}
#quiz-wrapper {
  overflow-x: hidden;
}
#quiz-wrapper #slide {
  left: 0;
  transition: all 500ms ease-in-out;
}
#quiz-wrapper #slide #quiz-form {
  display: inline-block;
  float: left;
}
#quiz-wrapper #slide #quiz-res {
  display: none;
  width: 100%;
}
#quiz-wrapper #slide #quiz-res #quiz-result {
  text-align: center;
}
#quiz-wrapper #slide .question {
  margin-left: 0;
  margin-bottom: 50px;
}
#quiz-wrapper #slide .question:last-child {
  margin-bottom: 0;
}
#quiz-wrapper #slide .question h4 {
  margin-bottom: 20px;
}
#quiz-wrapper #slide .question #quiz-result {
  text-align: center;
}
#quiz-wrapper #slide .question fieldset {
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  margin: 0;
  overflow: hidden;
}
#quiz-wrapper #slide .question fieldset:first-of-type {
  border-top: 1px solid black;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#quiz-wrapper #slide .question fieldset:last-of-type {
  border-bottom: 1px solid grey;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#quiz-wrapper #slide .question fieldset .choices {
  overflow: hidden;
}
#quiz-wrapper #slide .question fieldset .choices input[type="radio"] {
  display: none;
}
#quiz-wrapper #slide .question fieldset .choices label {
  padding: 15px;
  transition: all ease 350ms;
}
#quiz-wrapper #slide .question fieldset .choices label:hover {
  cursor: pointer;
}
#quiz-wrapper #slide .question fieldset .choices input[type="radio"]:checked + label {
  background-color: #438ec3;
}
#quiz-wrapper #slide .question fieldset .choices input,
#quiz-wrapper #slide .question fieldset .choices label {
  margin-bottom: 0;
}
#quiz-wrapper #slide .question fieldset .choices input p,
#quiz-wrapper #slide .question fieldset .choices label p {
  margin-bottom: 0;
  display: inline;
}
.player-topic {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.player-topic div p {
  font-family: MetaNormalLFRoman;
  width: 100%;
}
.player-topic div p:first-of-type,
.player-topic div p:first-child {
  font-family: MetaNormalLFRoman !important;
}
.player-topic div p.kursiv {
  font-family: MetaBoldItalic;
}
.player-topic.bg-eu {
  background-image: url('../../assets/images/map/mobile/eu.png');
}
.player-topic.bg-austria {
  background-image: url('../../assets/images/map/mobile/austria.png');
}
.player-topic.bg-croatia {
  background-image: url('../../assets/images/map/mobile/croatia.png');
}
.player-topic.bg-denmark {
  background-image: url('../../assets/images/map/mobile/denmark.png');
}
.player-topic.bg-finland {
  background-image: url('../../assets/images/map/mobile/finland.png');
}
.player-topic.bg-france {
  background-image: url('../../assets/images/map/mobile/france.png');
}
.player-topic.bg-germany {
  background-image: url('../../assets/images/map/mobile/germany.png');
}
.player-topic.bg-greatbritain {
  background-image: url('../../assets/images/map/mobile/greatbritain.png');
}
.player-topic.bg-greece {
  background-image: url('../../assets/images/map/mobile/greece.png');
}
.player-topic.bg-hungary {
  background-image: url('../../assets/images/map/mobile/hungary.png');
}
.player-topic.bg-ireland {
  background-image: url('../../assets/images/map/mobile/ireland.png');
}
.player-topic.bg-italy {
  background-image: url('../../assets/images/map/mobile/italy.png');
}
.player-topic.bg-litauen {
  background-image: url('../../assets/images/map/mobile/litauen.png');
}
.player-topic.bg-luxembourg {
  background-image: url('../../assets/images/map/mobile/luxembourg.png');
}
.player-topic.bg-malta {
  background-image: url('../../assets/images/map/mobile/malta.png');
}
.player-topic.bg-netherlands {
  background-image: url('../../assets/images/map/mobile/netherlands.png');
}
.player-topic.bg-poland {
  background-image: url('../../assets/images/map/mobile/poland.png');
}
.player-topic.bg-slovakia {
  background-image: url('../../assets/images/map/mobile/slovakia.png');
}
.player-topic.bg-spain {
  background-image: url('../../assets/images/map/mobile/spain.png');
}
.player-topic.bg-sweden {
  background-image: url('../../assets/images/map/mobile/sweden.png');
}
/* Errors messages */
.error {
  display: none;
  color: red;
}
/* Responsive */
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 200px) {
  /* Typography 80px */
  .player-submition p {
    font-size: 36px;
    text-align: center;
  }
  .player-submition p span.player-answer {
    display: block;
  }
  h1 {
    font-size: 40px;
  }
  #quiz-wrapper #slide .question h4 {
    text-align: center;
  }
  #quiz-wrapper #slide .question fieldset {
    width: 100%;
    box-sizing: border-box;
  }
  #quiz-result {
    font-size: 22px;
  }
  h2 {
    margin-bottom: 20px;
  }
  .player-topic[data-topic="1"] {
    display: none;
    height: calc(100vh - 200px);
  }
  #revise-presentation .player-topic[data-topic="2"] {
    display: block !important;
    height: calc(100vh - 200px);
  }
  .nav-tool {
    margin-bottom: 50px;
  }
  #vote .container {
    width: 100%;
  }
  .vote-choices {
    display: table !important;
    height: calc(100vh - 160px);
    width: 50% !important;
    margin-left: 0;
    transition: 350ms all ease;
    width: 50%;
    overflow: hidden;
    font-size: 28px;
    margin-bottom: 0 !important;
  }
  .vote-choices:hover {
    opacity: 1;
  }
  .vote-choices:first-of-type label {
    background-color: #a125bf;
  }
  .vote-choices input[name="solution"] {
    display: none !important;
  }
  .vote-choices input[name="solution"]:checked > .vote-choices label {
    opacity: 0.5 !important;
  }
  .vote-choices label {
    width: 100%;
    display: table-cell !important;
    text-align: center !important;
    color: #141414;
    background-color: #438ec3;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    text-transform: uppercase;
    color: #FFF !important;
    font-size: 32px !important;
    transition: all ease 350ms;
  }
  /* Input fields */
  input[name="gameCode"] {
    width: 100%;
    text-align: center;
    height: 50px;
    font-size: 18px;
    border-radius: 0;
  }
  .container .row .columns.country img {
    height: auto;
  }
}
/* Buttons */
button,
.button,
input[type="submit"] {
  width: 100%;
  height: auto;
  background-color: #282828;
  border: none;
  color: #FFF;
  transition: background ease-in-out 500ms;
  line-height: 1;
  margin-bottom: 0;
  transition: all ease 350ms;
  font-size: 22px;
  border-radius: 0;
  vertical-align: top;
  padding: 20px;
}
button:hover,
.button:hover,
input[type="submit"]:hover {
  color: #FFF;
  background-color: #3F3F3D;
}
#end {
  display: none;
}
/* Responsive design */
/* Max*/
@media screen and (max-width: 768px) {
  #init,
  #presentation,
  #vote,
  #revise-vote,
  #quiz {
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 425px) {
  .container .row .columns.country {
    width: calc(50% - 5px);
  }
  .container .row .columns.country:first-of-type,
  .container .row .columns.country:nth-last-of-type(2) {
    margin-right: 10px;
  }
}
/* Larger than tablet */
@media (min-width: 750px) {
  .button {
    width: auto;
  }
  h1 {
    font-size: 40px;
  }
}
/* Larger than desktop */
@media (min-width: 1000px) {
  #quiz-wrapper #slide .question h4 {
    text-align: left;
  }
  #quiz-wrapper #slide .question fieldset {
    width: 50%;
  }
  #quiz-result {
    font-size: 36px;
  }
  .player-topic p {
    width: 70%;
  }
}
/* Larger than Desktop HD */
/*# sourceMappingURL=player.css.map */