/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
@font-face {
  font-family: 'CenturySBK';
  src:  url(../fonts/century_gothic.woff2) format('woff2'),
        url(../fonts/century_gothic.woff)  format('woff'),
        url(../fonts/century_gothic.ttf) format('ttf');
}
body {
  font-family: 'CenturySBK', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


html {
  font-size: 16px;
}
body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.logo {
  position: fixed;
  top: 4rem;
  left: 4rem;
  background-color: white;
  background-image: url("../images/SBK_logo_header.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 6rem;
  width: 16rem;
  z-index: 100;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* page styles */
.slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: white;
  transition: opacity linear 0.4s;
  display: none;
}
.slide h1 {
  width: calc(100% - 40rem);
  /*margin-left: 17rem;*/
  text-align: left;
  font-size: 2.1rem;
  padding: 5rem 0 0 36.5rem;
  font-weight: 400;
}
.intro_text {
  padding: 10rem;
  font-size: 2.25rem;
}
.question_body {
  display: flex;
  align-items: top;
  flex-direction: row;
  position: absolute;
  top: 16rem;
  left: 0;
  width: 100%;
  height: calc(100% - 7.5rem);
  background-color: white;
}
[data-slide-number="0"] .question_body {
  align-items: flex-start;
}
.slide_image_container {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40%;
  height: 100%;
  margin-right: -5px;
  padding: 3rem 0 17rem 4rem;
  box-sizing: border-box;
}
.slide_image, .slide_image_answer {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  display: none;
}
.slide_image_answer {
  display: none;
}
.answers_container {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
  height: 100%;
  padding: 0 4rem 13rem 0;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  transform: translateZ(0);
}
.button-wrap {
  padding:1rem 2rem 2rem 2rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.button {
  flex: 0 1 auto;
  position: relative;
  left: 0;
  top: 0;
  align-self: center;
  width: 100%;
  height: 6rem;
  line-height: 6rem;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}
.answers_container .button-wrap:nth-child(1) .button {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
  transition-delay: 0.2s;
}
.answers_container .button-wrap:nth-child(2) .button {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
  transition-delay: 0.5s;
}
.answers_container .button-wrap:nth-child(3) .button {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
  transition-delay: 0.8s;
}
.button:focus {
  outline-style: none;
  outline: 0;
}
.button:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #f4822b 1%,#cb6c20 100%);
  border-radius: 2rem;
  top: 0;
  left: 0;
  content: '';
  z-index: -2;
  pointer-events: none;
}
.button:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eb7d29 1%,#b4611e 100%);
  border-radius: 2rem;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s ease-in;
  content: '';
  z-index: -1;
  pointer-events: none;
}
.button:hover:after {
  opacity: 1
}
.right_answer_container {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 60%;
  height: calc(100% - 10rem);
  padding: 2.5rem 5rem 0 0;
  box-sizing: border-box;
  display: none;
  /*transform: translateZ(0);*/
}
.right_answer_container h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  line-height: 1.2;
}
.right_answer_container p {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.button-wrong {
  left: 1500px;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
  transition-delay: 0.5s;
}
.button-wrong:before, .button-wrong:after {
  background: linear-gradient(to bottom, #cc1313 1%,#ae0c0c 100%) !important;
}
.button-right:before, .button-right:after {
  background: linear-gradient(to bottom, #3c9a09 1%,#348507 100%) !important;
}
.next_slide {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  width: 24rem;
  font-size: 2rem;
  background: linear-gradient(to bottom, #f4822b 1%,#cb6c20 100%);
  border-radius: 2rem;
  height: 6rem;
  margin: 2rem;
  line-height: 6rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.next_slide:focus {
  outline-style: none;
  outline: 0;
}
.next_slide:after {
  position:absolute;
  content:'';
  top:-2rem;
  right:-2rem;
  left:-2rem;
  bottom:-3rem;
}



.out_of_field {
  top: 1000px;
}
.progress-bar-holder {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0.5rem;
  width: 100%;
  background-color: rgba(200,0,0,0.1);

}
.progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0.5rem;
  width: 0%;
  background-color: #f4822b;
  transition: all ease-in 0.3s;
}



@media all and (max-width: 1400px) {
  html {
    font-size: 80%;
  }
}
@media all and (max-width: 1000px) {
  html {
    font-size: 50%;
  }
}
@media all and (max-width: 700px) {
  html {
    font-size: 40%;
  }
}