mobilequery.css

/*

Make input range bigger on Start Screen, maybe bellow everything, then...
Make range input slide bellow logo on top of screen upon application start
Make nav full width with the close (slide to left button on top) button somewhere (look for inspiration on other apps)
Make infowindow full width with the close button exactly like the nav close



*/

@media screen and (max-width: 720px){

body{
  overflow-y: hidden;
  position: relative;
}

footer{
  height: 30px;
  bottom: 30px;
}
@-webkit-keyframes moveCreditsAnim{
    0%{bottom: 10vh;}
    100%{bottom: 0vh;}

}

.moveDown{
  -webkit-animation: moveCreditsAnim 0.05s 0.0s;
  -webkit-animation-fill-mode:forwards;
}


 /*START SCREEN -----------------------------------------------------------*/

  .earthImg{
    height: 40vh;
    width: 200vw;
    overflow-x: hidden;
  }

  #startScreen>h1{
    font-size: 30px;
    width: 70vw;
  }

  #startScreen>p{
    width: 70vw;
    font-size: 20px;
  }

  #startScreen>p, #startScreen>h1{
    top: 20vh;
    right: 10vw;
  }

  .controller-container {
    padding-top: 15px;
  }

  .controller{
    max-width: 100vw;
    width: 90vw;
    top: 55vh;
    background: rgba(239, 239, 239, 1);
    /*border-radius: 5px;*/
    padding: 0 5vw;
    margin: 0 auto;
    border-bottom: 5px solid #777777;
    height: 100px;

  }

  .controller h2 {
    font-size: 20px;
    color: black;
    margin-top: 0;
    color: black;
    display: initial;

  }

  .controller p{
    font-size: 14px;
    width: 100%;
    background: none;
    font-weight: 900;
    margin: 0;
    padding: 0;
    text-align: center !important;
    position: initial;
    transform: none;
  }

  @-webkit-keyframes moveRange{
    from{
      top: 60vh;
      height: auto;
    }

    to{
      top: 80px;
      height: 80px;
    }
  }
  @-moz-keyframes moveRange{
    from{
      top: 60vh;
      height: auto;
    }

    to{
      top: 80px;
      height: 80px;
    }
  }
  @-o-keyframes moveRange{
    from{
      top: 60vh;
      height: auto;
    }

    to{
      top: 80px;
      height: 80px;
    }
  }

  @-webkit-keyframes changeWidth{
    from{
     
    }
    to{
      
    }
  }
  @-moz-keyframes changeWidth{
    from{
     
    }
    to{
      
    }
  }
  @-o-keyframes changeWidth{
    from{
     
    }
    to{
      
    }
  }

  @-webkit-keyframes fontSizeAnim{
    0%{
      font-size: 14px;
    }
    100%{
      font-size: 14px;
    }
  }
  @-moz-keyframes fontSizeAnim{
    0%{
      font-size: 14px;
    }
    100%{
      font-size: 14px;
    }
  }
  @-o-keyframes fontSizeAnim{
    0%{
      font-size: 14px;
    }
    100%{
      font-size: 14px;
    }
  }

  @-webkit-keyframes blinkAnim{
    0%{
      opacity: 1;
    }
    100%{
     opacity: 1;
    }
  }
  @-moz-keyframes blinkAnim{
    0%{
     opacity: 1;
    }
    100%{
      opacity: 1;
    }
  }
  @-o-keyframes blinkAnim{
    0%{
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
  }

.moveUp{
  -webkit-animation: moveRange 0.5s 0.7s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation: moveRange 0.5s 0.7s;
  -moz-animation-fill-mode:forwards;
  -o-animation: moveRange 0.5s 0.7s;
  -o-animation-fill-mode:forwards;
}


  input[type=range] {
    -webkit-appearance: none; 
    width: 90vw; 
    background: transparent;

  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 30px;
    width: 20px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -2vh; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
  }
  input[type=range]::-moz-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 30px;
    width: 20px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -2vh; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
  }
  input[type=range]::-ms-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 30px;
    width: 20px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -2vh; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
  }

  .logo{
    width: 60px;
    height: auto;
    bottom: 18vh;
  }

  /*Logo ----------------------------------------------------------------------------------------*/
  .logoBG {
    height: auto;
  }

  .logoBG>img {
    margin: 0vh auto;
    display: block;
    width: 200px;
    height: auto;
  }
  /*NAV ------------------------------------------------------------------------------------------*/

  nav{
    width: 100vw;
    top: 85px;
    margin: 0 0 0 -100vw;
    height: calc(100% - 85px); 
  }

  input[type="checkbox"]:checked ~ nav{ /*Slide action*/
    margin:0px;
  }

/*get the label down, and only display it when nav is closed*/
  label{
    top: 40vh;
    padding-left: 5vw;
  }

  input[type="checkbox"]:checked ~ label{
    margin-left: -50vw;
  }
  input[type="checkbox"]:checked ~ label img{
    transform: rotate(0deg);
  }

  /*Note/InfoWindow -------------------------------------------------------*/

  #note{
    width: 100vw;
    top: 10.7vh;
    height: calc(100% - 10.7vh);
  }

  @-webkit-keyframes slideDown {
    0%{ -webkit-transform: translateX(100vw); } 
    100%/*, 90%*/ { -webkit-transform: translateX(0vw); } 
  }
  @-moz-keyframes slideDown {
    0%{ -webkit-transform: translateX(100vw); }
    100%/*, 90%*/ { -webkit-transform: translateX(0vw); }
  }
  @-o-keyframes slideDown {
    0%{ -webkit-transform: translateX(100vw); }
    100%/*, 90%*/ { -webkit-transform: translateX(0vw); }
  }
  @-webkit-keyframes slideUp{
    0% { -webkit-transform: translateX(0vw); }
    100%/*, 90%*/ { -webkit-transform: translateX(100vw); } /*Initial position*/ 
  }
  @-moz-keyframes slideUp {
    0% { -webkit-transform: translateX(0vw); }
    100%/*, 90%*/ { -webkit-transform: translateX(100vw); }
  }
  @-o-keyframes slideUp {
    0% { -webkit-transform: translateX(0vw); }
    100%/*, 90%*/ { -webkit-transform: translateX(100vw); }
  }

  #note.open{
    -webkit-transform: translateX(100vw);
    -webkit-animation: slideDown 1.6s 1.7s 1 ease forwards;
    -moz-transform: translateX(100vw);
    -moz-animation: slideDown 1.6s 1.7s 1 ease forwards;
    -o-transform: translateX(100vw);
    -o-animation: slideDown 1.6s 1.7s 1 ease forwards;
  } 

  #note.close{
    -webkit-transform: translateX(100vw);
    -webkit-animation: slideUp 1.6s 0.0s 1 ease forwards;
    -moz-transform: translateX(100vw);
    -moz-animation: slideUp 1.6s 0.0s 1 ease forwards;
    -o-transform: translateX(100vw);
    -o-animation: slideUp 1.6s 0.0s 1 ease forwards;
  }


  .infoContent{
    width: 100vw;
  }

  .infoContent>p{
    font-size: 0.9em;
  }

  #closeWindow{
    padding: 0vh 4vw;
    margin-left: 10px;
    top: 2vh;
    font-size: 18px;
    right: 4vw;
    left: auto;

  }

  /*Move Earth -------------------------------------------------------------------*/

  .moveEarth{
    top: 5vh;
  }









}