/*desktop first*/



@media screen and (max-width: 1378px) {
  .logoArea p {
    left: 0;
    text-align: left;
  }
}



@media screen and (max-width: 1320px) {
  .cloud-4 {
    right: 18%;
  }

  #intro {
    /*top: 0;*/
  }
  #intro .img{
    width: 88%;
  }
  #intro .time-based {
    bottom: -4rem;
  }
  #intro .time-based.visible {
    bottom: -4rem;
  }
  #questions .number {
    left: 0;
  }
  .fish-counter {
    transform: scale(.6);
    transform-origin: center center;
  }
  .footer-links ul li a {
    font-size:1.2rem;
  }
  #results .timer .timer-intro {
    right: 9rem;
  }
  #results .timer .sek {
    top: -13.4rem;
  left: -2rem;
  }
  .results .clock {
    right: 17%;
  }
}


@media screen and (max-width: 1024px) {
  #intro .select-mode {
    left: -11rem;
  }
  #intro .time-based {
    left: 20%;
    bottom: -1rem;
  }
  #intro .time-based.visible {
    left: 55%;
    bottom: -1rem;
  }
  #submit form {
    background-color: #fff;
    padding: 1rem;
    width: 67%;
  }
  #submit p.info {
    margin-left: 8rem;
    width: 68%;
  }
  #results .timer .timer-intro {
    top: -4rem;
    right: 12rem;
  }
  #results .timer .sek {
  left: -6rem;
  }
}


@media screen and (max-width: 767px) {
  .header {
    height: 16rem;
  }
  .supporters img {
    height:3rem;
  }
  .cloud {
    background-size: 4rem 2rem;
    width: 4rem;
    height: 2rem;
  }
  .logoArea {
    transform: scale(.6);
    transform-origin: left center;
    width: 16rem;
  }
  .wave img {
    width: 130%;
  }
  .mainWhiteBox {
    height: 10rem;
    background: #fff;
    margin: 0 2rem 2rem;
  }

  .questions .mainWhiteBox,
  .results .mainWhiteBox,
  .submit .mainWhiteBox,
  .end .mainWhiteBox {
    height: 100%; /*23*/
   }
  #intro {
    top: -3rem;
  }
  #intro .select-mode {
    transform: scale(.5);
    /*margin: auto auto auto -2rem;*/
    top: -5rem;
    left: -2rem;
  }
  #intro .time-based {
    transform: scale(.6);
    left: 13%;
  }
  #intro .time-based.visible {
    bottom: -4rem;
    left: 13%;
  }
  #questions {
    margin-top: 4rem;
    top: auto;
  }
  #questions h2 {
    margin-left: 3rem;
  }
  #questions .number {
    font-size: 10rem;
    top: -8rem;
  }
  #questions .a-style-list {
    margin-left: 2rem;
    min-height: 17rem;
    background-position: right -6rem bottom 0rem;
  }
  #questions .a-style-fish {
    margin: 3rem 0 0 0;
  }
  #questions .q9 .a-style-list {
    column-count: 1;
    margin: 1rem;
  }
  /*#questions, */
  #results {
    /*transform: scale(0.4);*/
    transform-origin: top left;
  }
  #submit, #end {
    /*transform: scale(0.6);*/
    transform-origin: top left;
  }
  #submit {
    margin-top: 2rem;
    top: auto;
  }
  #submit p.info {
    left: auto;
    margin-left: 1rem;
    width: 97%;
  }
  #submit form {
    margin-left: 1rem;
    width: auto;
    background-color: transparent;
    padding: 0;
  }
  #submit .s1 {
    right: 1rem;
  }
  #results {
      margin-top: 4rem;
      top: auto;
  }
  #results p.slogan, #results h3, #results h1 {
    margin-left: 1rem;
    width: auto; /*just h3-le vaja, kas tesised ok?*/
  }
  #results .bonus-game {
    bottom: 1rem;
    right: 1rem;
  }
  /*test*/
  #results .timer .sek {
    top: -8rem;
    left: -3.5rem;
    height: auto;
    width: auto;
    -webkit-clip-path: none;
    clip-path: none;
  }
  #results .timer .sek p {
    top: 1.5rem;
  background-color: #085D82;
  padding: 1rem;
  margin-right: 1rem;
  border-radius: 5rem;
  }
  #results .timer .timer-intro {
    clip-path: none;
  -webkit-clip-path: none;
  width: auto;
  background: none;
  position: static;
  right: 10rem;
  }
  #results .timer .timer-intro p {
    padding: 1rem;
    background-color: #085D82;
    border-radius: 5rem;
    margin: 0;
    top: -2rem;
    left: -4rem;
    font-size: 1.4rem;
  }
  /*end*/
  #end p {
    top: 0rem;
  }
  .results .clock {
    right: 0rem;
    top: 1rem;
  }
  .fish-counter {
    display: none !important;
  }
  .clock {
    transform: scale(.4);
    transform-origin: top right;
    right: -1rem;
  }
  .fisherMan {
    left: 18%;
    width: 330px;
    margin-top:2rem;
  }
  .footer-links {
    margin-top: 20rem;
    top: auto;
  }
  .footer-links ul li {
    height: 9rem;
  }
  .footer-links ul li:last-child {
    margin-top: 4rem;
  }
}


@media screen and (max-width: 527px) { /*iphone 6 jm vahepealsete jaoks*/
  #questions .a-style-list {
    min-height: 16rem;
    background-position: right -8rem bottom 0rem;
  }
  #questions .a-style-list span {
    font-size: 1.5rem;
    left: auto;
    bottom: .5rem;
  }
  #questions .a-style-list .radio-button {
    height: 2rem;
  }
  #questions .a-style-fish {
    margin: 0 5rem;
  }
  .footer-links {
    margin-top: 15rem;
  }
}
@media screen and (max-width: 374px) {
  .mainWhiteBox {
    margin: 0 1rem 1rem;
  }
  .supporters img {
    height:2rem;
  }
  .footer-links {
    margin-top: 12rem;
  }
  #questions .number {
    font-size: 7rem;
  }
  #questions h2 {
    margin: 0 1rem;
    top: -2rem;
  }
  #questions .a-style-fish {
    margin: 0 5rem;
  }
  #questions .a-style-list {
    margin-left: 0;
    min-height: 16rem;
    background-position: right -8rem bottom 0rem;
  }
  #questions .a-style-list span {
    font-size: 1.5rem;
    left: auto;
    bottom: .5rem;
  }
  #questions .a-style-list .radio-button {
    height: 2rem;
  }
  /*#questions .q9 .a-style-list {
    column-count: 1;
    margin: 1rem;
  }*/
  #results .bonus-game {
    bottom: 3rem;
  }
  #submit .s1 {
        top: 0rem;
  }
  #submit .s1 input[type=submit] {
    background-color: transparent;
    left: 8rem;
    top: -2rem;
  }
  /*#submit ul li .checkbox-button {
    top: -1.7rem;
    left: 13rem;
  }*/
}
@media screen and (max-width: 326px) {
  #submit ul li .checkbox-button {
    top: -1.7rem;
    left: 13rem;
  }
}