@keyframes clockwise{
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-webkit-keyframes counterclockwise{
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}
@keyframes counterclockwise{
    from {
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    to{
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes counterclockwise2{
    from {
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    to{
        -webkit-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
}
@keyframes counterclockwise2{
    from {
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    to{
        -ms-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -webkit-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
}



/* ----------------------------------------------
 * Generated by Animista on 2019-7-10 2:54:49
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
.slide-top {
	-webkit-animation: slide-top 1s ease-in reverse both;
	        animation: slide-top 1s ease-in reverse both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

.slit-in-vertical {
	-webkit-animation: slit-in-vertical 0.45s ease-out both;
	        animation: slit-in-vertical 0.45s ease-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-7-11 0:53:22
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slit-in-vertical
 * ----------------------------------------
 */
@-webkit-keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
}














/* Smartphones (portrait and landscape) ----------- */
/*@media only screen and (min-device-width : 320px) and (max-device-width : 480px) */
@media only screen and (orientation: portrait)
{
    #submenu
    {
        display: none;
    }
/* Styles */
    .desktop-only
    {
        display: none;
    }
    
    #container
    {
        height: auto;
        overflow-y: scroll;
        position: absolute;
    }
    
    li
    {
        font-size: 2.5vh;
    }
    
    #section-wrapper
    {
        position: relative;
        z-index: 20;
    }
    
    #beam2
    {
        left: -6vw;
    }
    #beam3
    {
        left:-2vw;
    }
    #beam4
    {
        left: -70vw;
    }
    #beam5
    {
        right: -70vw;
    }
    
    .section
    {
        margin: 0;
        display: block !important;
    }
    
    .section_third
    {
        display: block;
        width: 90vw;
        height: auto;
        margin: 0;
        text-align: center;
    }
    
    #overview_image, #feature_image, #download_image
    {
        margin: 0;
        padding: 0;
        width: 90vw;
        margin-top: 12%;
        display: block;
        margin-bottom: 10%;
    }
    
   
    
    h2
    {
        display: none;
    }
    
    #overview h4
    {
        font-size: 7vw;
    }
    
    h3
    {
        display: block;
        text-align: center;
        margin-top: 0;
        font-weight: 400;
        font-size: 8vw;
    }
    
    h4
    {
        font-size: 5.4vw;
        text-align: center;
        margin-top: 10%;
        margin-bottom: 20%;
    }
    
    #overview h4:first-of-type
    {
        margin-bottom: 0;
    }
    
    #google_play_button
    {
        display: block;
        width: 100%;
    }
    #google_play_button img
    {
        display: block;
        width: 60%;
        margin: 0 auto;
    }
    
    .mobile_spacer
    {
        height: 1vh;
        display: block;
        width: 100%;
    }
    
      
    #drawer_icon
    {
        margin-bottom: 8%;
    }
    
    #company
    {
        display: none;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/*@media only screen and (min-width: 600px)*/
@media only screen and (orientation: landscape)
{
    .mobile_spacer
    {
        display: none;
    }
    
    li
    {
        font-size: 2vh;
    }
    
    #section_wrapper
    {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .section
    {
        text-align: center;
        margin: 0 auto;
    }
        .section_third
        {
            width: 25%;
            display: inline-block;
            vertical-align: middle;
        }
        
        .section_third:nth-child(2)
        {
            width: 40%;
        }

        h2
        {
            font-weight: 400;
            font-size: 8vh;
            margin-bottom: 0;
            text-align: left;
        }
    
        h3
        {
            font-size: 2.4vw;
            text-align: left;
        }
    
        h4
        {
            font-size: 1.3vw;
            text-align: left;
        }

        #overview_image, #feature_image, #download_image
        {
            max-height: 80vh;
            max-width: 40vw;
            width: 70%;
            margin-top: 10%;
        }
    
        #overview .section_third:first-child, #overview .section_third:last-child, #features .section_third:first-child, #features .section_third:last-child{
            padding-top: 0%;
            text-align: left;
        }
        
    #google_play_button
    {
        margin-left: -5%;
    }
    
    #google_play_button img
    {
        display: block;
        width: 60%;
    }
        
    #drawer_icon
    {
        margin-bottom: -8%;
    }
    
    #company
    {
        position:absolute;
        bottom: 0; right: 0; 
    }
    
}