* {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 1);
  font-family: 'ProximaNova';
  -webkit-font-smoothing: antialiased; }

h1 {
  font-size: 40px;
  font-weight: 500;
  line-height: 45px; }

.invisible {
  opacity: 0; }

.clearfix {
  clear: both; }
  .clearfix:before {
    content: '';
    display: table; }
  .clearfix:after {
    content: '';
    display: block;
    clear: both; }

.btn {
  display: inline-block;
  vertical-align: top;
  min-width: 130px;
  padding: 3px 15px;
  border: 3px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'ProximaNova';
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  -webkit-transition: all 0.3s ease ;
  -moz-transition: all 0.3s ease ;
  -ms-transition: all 0.3s ease ;
  -o-transition: all 0.3s ease ;
  transition: all 0.3s ease ; }
  .btn:hover {
    background: rgba(255, 255, 255, 0); }

.soc__list {
  list-style: none;
  font-size: 0; }

.soc__item {
  display: inline-block;
  vertical-align: top;
  margin: 0; }

.soc__link {
  display: block;
  width: 2vw;
  height: 2vw;
  line-height: 2vw;
  color: rgba(255, 255, 255, 1);
  font-size: 1.5vw;
  text-decoration: none;
  text-align: center; }

.container {
  width: 100%;
  height: 100%; }
  .container_flex {
    display: flex; }
  .container#app {
    height: auto;
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 0; }

.counter {
  margin: 20px auto 20px;
  font-size: 23px;
  font-weight: bold; }

.question__text {
  line-height: 25px;
  font-size: 19px;
  margin-bottom: 35px;
  font-weight: 500; }

.question__img {
  display: none;
  width: 40%;
  margin: 30px auto 30px; }

.reaction {
  overflow: hidden;
  -webkit-transition: all 0.3s ease ;
  -moz-transition: all 0.3s ease ;
  -ms-transition: all 0.3s ease ;
  -o-transition: all 0.3s ease ;
  transition: all 0.3s ease ;
  padding: 8px 0 0; }
  .reaction__text {
    font-size: 17px;
    font-weight: 500;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.4); }

.answers {
  list-style: none; }

.answer {
  line-height: 25px;
  text-align: left;
  cursor: pointer; }
  .answer__radio {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 1);
    position: absolute;
    top: 7px;
    left: 0; }
  .answer__content {
    width: 80%;
    padding: 0 0 0 23px; }
  .answer__title {
    font-size: 19px; }
  .answer__description {
    font-size: 19px; }
  .answer__reaction {
    width: 100%;
    font-size: 19px; }
  .answer + .answer {
    margin-top: 15px; }
  .answers_selected .answer__radio {
    display: none; }
  .answers_selected .answer_selected .answer__radio {
    display: block;
    background: white; }

.answers_selected .answer {
  cursor: default; }

.oscar {
  display: none;
  vertical-align: top; }
  .oscar__icon {
    display: block;
    width: 10vw;
    height: 10vw;
    margin: 0 auto 0; }
  .oscar__wrapper {
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    -webkit-transition: all 1.5s ease ;
    -moz-transition: all 1.5s ease ;
    -ms-transition: all 1.5s ease ;
    -o-transition: all 1.5s ease ;
    transition: all 1.5s ease ; }
  .oscar__wrapper .oscar__icon {
    position: absolute;
    bottom: 0;
    left: 0; }

.result {
  max-width: 480px;
  margin: auto; }
  .result__title {
    line-height: 40px;
    font-size: 40px;
    font-weight: 400; }
  .result__text {
    font-size: 22px;
    font-weight: 500; }
  .result__restart {
    margin: 20px auto; }
  .result .oscar {
    margin: 30px auto; }
  .result .soc {
    margin: 20px auto 0; }

.preloading-images {
  width: 1px;
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden; }
  .preloading-images img {
    display: block; }

.app {
  height: auto;
  min-height: 100%;
  padding: 10px;
  text-align: center;
  background: white url(../images/1-screen.jpg) center center/cover no-repeat;
  -webkit-transition: all 0.3s ease ;
  -moz-transition: all 0.3s ease ;
  -ms-transition: all 0.3s ease ;
  -o-transition: all 0.3s ease ;
  transition: all 0.3s ease ; }
  .app_result {
    background: white url(../images/Final-screen.jpg) center center/cover no-repeat; }
  .app_q1 {
    background: white url(../images/Q-1.jpg) center center/cover no-repeat; }
  .app_q2 {
    background: white url(../images/Q-2.jpg) center center/cover no-repeat; }
  .app_q3 {
    background: white url(../images/Q-3.jpg) center center/cover no-repeat; }
  .app_q4 {
    background: white url(../images/Q-4.jpg) center center/cover no-repeat; }
  .app_q5 {
    background: white url(../images/Q-5.jpg) center center/cover no-repeat; }
  .app_q6 {
    background: white url(../images/Q-6.jpg) center center/cover no-repeat; }

.intro {
  max-width: 720px;
  margin: auto;
  font-family: Georgia;
  -webkit-transition: all 0.3s ease ;
  -moz-transition: all 0.3s ease ;
  -ms-transition: all 0.3s ease ;
  -o-transition: all 0.3s ease ;
  transition: all 0.3s ease ; }
  .intro__text {
    max-width: 570px;
    margin: 30px auto 30px;
    line-height: 25px;
    font-family: 'ProximaNova';
    font-size: 19px;
    font-weight: 500; }
  .intro.invisible {
    position: absolute; }

.test {
  max-width: 620px;
  margin: auto; }
  .test__icon {
    display: none;
    height: 61px;
    margin: 0px auto 0px; }
  .test__continue {
    margin-top: 25px; }
  .test .answers {
    max-width: 490px;
    margin: 0 0 0 auto; }
  .test.invisible {
    position: absolute; }

.main_content_container {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; }