* {
   box-sizing: border-box;
}

html, body {
   /*overflow-x: hidden;*/
}

body {
   font-family: 'Domine', serif;
   background-color: black; 
}

a {
   color: black;
}

.homecontainer {
   background-color: white;
   padding: 10vh 1vw 9vh 1vw;
   min-height: 100vh;
   width: 100%;
   overflow-x: hidden;   
}

.tvheader {
   max-width: 880px;
   margin: auto;
   position: relative;
   cursor: pointer;
}

.tvheader img {
   width: 100%;
}

.tvframe {
   position: relative;
}

.videoframe {
   position: absolute;
   top: 10%;
   left: 10%;
   width: 60%; 
   height: 70%;
   background-image: url('../img/static.gif');
   background-position: center;
   background-repeat: no-repeat; 
   background-size: cover;   
}

.videoframe video {
   width:  100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.85;
   animation: appear ease-in 0.6s;
}

@keyframes appear {
   0% {
      opacity: 0;
   }

   80% {
      opacity: 3;
   }

   100% {
      opacity: 0.85;
   }

}

.arrow {
   position: absolute;
   width: 13vw;
   top: 14%;
   right: -150%;
   animation: arrow ease-in 4s;
}

.arrow img {
   width: 100%;
}

@keyframes arrow {
   0% {
      right: -150%;
   }

   30% {
      right: -150%;
   }

   70% {
      right: -5%;
   }

   72% {
      right: -6%;
   }

   74% {
      right: -5%;
   }

   76% {
      right: -6%;
   }

   78% {
      right: -5%;
   }

   80% {
      right: -6%;
   }

   82% {
      right: -5%;
   }

   84% {
      right: -6%;
   }

   100% {
      right: -150%;
   }

}


.homeheader {

}

.homeheader h1 {
   font-size: 300%;
   margin: 0px;
   text-transform: uppercase;
}

.homeheader a, .homeitem a {
   text-decoration: none;
}

.fit {
   display: inline-block;
   white-space: nowrap;
}

.homemenu {
   display: grid;
/*   grid-template-columns: 2fr 2fr 1fr 1fr;*/
   grid-template-columns: 1fr 1fr;
   grid-gap: 1vw;
   padding-bottom: 1vh;
}

.homemenu a {
   text-decoration: none;  
}

.radiomenu {
   grid-template-columns: 1fr 1fr 1fr 1fr;
}

.homeitem {
   text-transform: uppercase;
   background-color: black; 
   padding: 2vw;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.5em;

}

/*.attention {
   animation: attention 1s 4;
}

@keyframes attention {
   10% {
      background-color: white;
      color: black;
   }

   20% {
      background-color: black;
      color: white;
   }

   30% {
      background-color: white;
      color: black;  
   }

   40% {
      background-color: black;
      color: white;
   }


   80% {
      transform: rotate(0deg);   
   }

   85% {
      transform: rotate(2deg);  
   }

   90% {
      transform: rotate(0deg); 
   }

   95% {
      transform: rotate(-2deg); 
   }

   100% {
      transform: rotate(0deg); 
   }   
}*/

.footer {
   text-align: center;
   color: white;
   padding: 1vh;
   font-size: 0.6em;
}

.footer a {
   color: white;
   text-decoration: none;
   text-transform: uppercase;
}

.title {
   min-height: 100vh;  
   color: white;
   text-transform: uppercase;
   padding: 1vh 1vw 1vh 1vw;    
}

.title h1 {
   font-size: 300%;
}

.container {
   height: 100vh;
   width: 100%;
   position: sticky;
   top: 0px;
   z-index: -1;
   margin: 0px;
}

.container img {
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.vid video {
   width: 100%;
   height: 100%;
   object-fit: cover; 
   display: block;     
}

.simpvid video {
   object-position: 50% 80%; 
}

.freewayvid video {
   filter: grayscale(1); 
}

.narrow {
   display: none;
}


.text {
   min-height: 105vh;
   width: 100%;
   display: flex;
   align-items: center;
   position: relative;
   background-color: black;
   margin: -1px 0px;
   overflow-x: hidden;     
}

.words {
   width: 100%;
   padding: 10vh;
   background-color: white;
   text-align: center;
   font-size: 2em;
}

.words h1 {
   text-transform: uppercase;
   font-size: 16vw;
}

.words p {
   font-size: 1.8em;
}

.three img {
   object-position: 50% 100%;
}

.astronaut img {
   object-position: 50% 0%;  
}

.morroco img {
   object-position: 50% 75%;   
}

.skatepark img {
   object-position: 50% 60%;  
}

.chile img {
    object-position: 50% 100%;  
}

.noir img {
   object-position: 50% 25%;
}

.spacer {
   width: 100%;
   height:  10vh;
   background-color: black;
}

.radiobug {
   width: 10vw;
   margin: auto;
   position: relative;
}

.grow {
   animation: grow 1s infinite;
}

@keyframes grow {
   0% {
      transform: rotate(-2deg) scale(1);
      left: -10px;

   }

   25% {
      transform: rotate(0deg) scale(1.1);
      left: 0px;

   }


   50% {
      transform: rotate(2deg) scale(1);
      left: 10px;
   }


   75% {
      transform: rotate(0deg) scale(1.1);
      left: 0px;

   }

   100% {
      transform: rotate(-2deg) scale(1);
      left: -10px;

   }
}


.radiobug img {
   width: 100%;
}

.radiopage {
   width: 100%;
   height: 100vh;
   background-image: url('../img/static.gif');
   background-position: center;
   background-repeat: no-repeat; 
   background-size: cover;
   position: fixed;
   top: 0px;    
   left: 0px;
   z-index: -1;
}

.radiovideo {
   height: 100%;
   width: 100%;
}

.radiovideo video {
   opacity: 0.9;
   width: 100%;
   height: 100%;
   object-fit: cover;  
   display: black; 
   filter: grayscale(1);
}


.radioflex { 
   width: 100%; 
   min-height: 100vh;
   display: flex;
   align-items: center;  
   overflow-x: hidden;    
}

.radiowrapper {
   display: flex;
   background-color: rgba(255,255,255,0.6);
   align-items: center;
   width: 100%;    
}

.radio {
   padding: 10vh 0vh;
   width:  100%;
   position: relative;
   flex: 1;
}

.radio img {
   width: 100%;
}

.radioframe {
   max-width: 880px;
   margin: auto;
   cursor: pointer;
}

.radioarrow {
   width: 10vw;
   position: absolute;
   left: 35%;
   bottom: -10%;
   transform: rotate(80deg);
   animation: wiggle infinite 0.5s;
   cursor: pointer;
}

@keyframes wiggle {
   0% {
      bottom: -10%;
   }

   50% {
      bottom: -8%;
   }

   100% {
      bottom: -10%;
   }

}

.filler {
   flex: 0.8;
   background-color: black;
   padding: 10vh 0vh;   
}




@media only screen and (max-device-width: 820px), (max-width: 640px) {
   
   .homecontainer {
      padding-top: 5vh;
   }

   .tvheader {
      transform: scale(1.15);
      margin-bottom: 2vh;
   }

   .radio {
      transform: scale(1.15);
   }

   .homemenu {
      grid-template-columns: 1fr 1fr;
   }

   .arrow {
      width: 20vw;
      top: 12%;      
   }

   .title {
      min-height: 60vh;
      padding: 10vh 1vw 12vh 1vw;    
   }

   .words {
      padding: 5vh;     
   }

   .words p {
      font-size: 2.5em;
   } 

   .homeitem {
      font-size: 2.7em;
   }

   .page {
      grid-template-columns: 1fr;
      font-size: 4em;
      grid-gap: 1vw;          
   }

   .footer p {
      font-size: 3em;
   }  

   .wide {
      display: none;
   }

   .narrow {
      display: block;
   }

   .one img {
      object-position: 40% 50%; 
   }   

   .simpvid video {
      object-position: 92% 80%; 
   } 

   .astronaut img {
      object-position: 10% 0%;  
   }

   .radiobug {
      width: 30vw;
   }

   .radiowrapper {
/*      background-color: rgba(255,255,255,0);*/
/*      background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 80%);*/
   }

   .radioflex {
/*      display: block;*/
/*      margin-top: 10vh;*/
   }

   .radioarrow {
      width: 33vw;
      left: 40%;
   }

   @keyframes wiggle {
      0% {
         bottom: -5%;
      }

      50% {
         bottom: -3%;
      }

      100% {
         bottom: -5%;
      }

   }

}

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


   .words p, .homeitem, .footer p {
      font-size: 1.5em;
   }  

   .page {
      font-size: 2em;
   }

   .radio {
      transform: scale(1);
   }   

   .radioarrow {
      width: 25vw;
   }



}