/* CSS Document */



body {
background:#323333;
}


.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-gap: 3rem;
  width:80%;
  margin: 0 auto;
  margin-top:11em;
}


.wrapper > div > img {

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
 width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:15px;
}


.animate {
  opacity:0;
}

.fadein {
    animation:fadeIn 1s infinite ease-in;
 animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-duration: 1s;    
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        
         opacity:1;
    }
}

.slide_text_right {
 animation:textSlideRight 1.2s ease-out infinite;
 animation-iteration-count: 1;
animation-fill-mode: forwards;

}

@keyframes textSlideRight {
    0% {
        transform: translateX(10%);
        opacity:0;
        text-shadow:none;
    }
    50% {
        opacity:1;
    }
    100% {
        transform: translateX(0%);
        opacity:1;
        text-shadow: 0 -10px 0 #FFFFFF;
    }
}

.slide_text_left {
 animation:textSlideLeft 1.2s ease-out infinite;
 animation-iteration-count: 1;
animation-fill-mode: forwards;

}

@keyframes textSlideLeft {
    0% {
        transform: translateX(-10%);
        opacity:0;
        text-shadow:none;
    }
    50% {
        opacity:1;
    }
    100% {
        transform: translateX(0%);
        opacity:1;
        text-shadow: 0 -10px 0 #FFFFFF;
    }
}


/*About us*/
.box1 {
   grid-column:8/11;
    grid-row:1;
      z-index:1;
    justify-self:end;
    font-size:17vw;
    line-height:0px;
    margin:0px;
    padding:0px;
    color:#f098ad;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    text-shadow: 0 -10px 0 #FFFFFF;
    
    

}

/*Hero Image - currently rings*/
.box2 {

   grid-column:1/11;
    grid-row:2;

}

/*US*/
.box3 {
    grid-column:1/4;
    grid-row:3;
      z-index:1;
    font-size:17vw;
    line-height: 0px;
    margin:0px;
    padding:0px;
    color:#f098ad;
    font-family: 'Lato', sans-serif;
    font-weight:900;


}


/*Bio Copy*/
.box4 {
    grid-column:7/11;
    grid-row:3;
    padding:0;
    color:white;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    font-size:1.2vw;
    align-self:center;

}


/*Serious on set pic*/
.box5 {
    grid-column:1/7;
    grid-row:3;
    background-color:#f098ad; 
     border-radius:15px;
}

/*Jamie yelling*/
.box6 {
    grid-column:7/11;
    grid-row:4;
    background-color:#f098ad;
         border-radius:15px;
}

/*Will eye tape*/
.box7 {
    grid-column:6/11;
    grid-row:5;
    background-color:#f098ad; 
         border-radius:15px;

}

/*lottie*/
.box8 {
  grid-column:1/7;
    grid-row:4;
    background:#f098ad;
    align-self:center;
    width:100%;
    justify-self:end;
     border-radius:15px;
}

/*sunsets*/
.box9 {
  grid-column:1/6;
    grid-row:5;
   background-color:#f098ad;  
      border-radius:15px;
}

.lottie {
    max-height:500px;
    max-width:70%;
    overflow:hidden;
  

}


footer {
   width:100%;
   min-height:10em;
    
}

@media only screen and (max-width: 1200px) and (min-width: 471px)  {
   .wrapper {
  grid-template-columns: repeat(1fr);
   grid-template-rows:  repeat(5, minmax(50px, auto));
   width:80%;
   margin-top:1em;
   grid-gap: 1rem;

}

/*About us*/
.box1 {

      grid-column:4/5; 
    grid-row:1;
    align-self:end;
   font-size:15vw;
    text-align: center;
  
}


/*Hero Image */
.box2 {
grid-column:1/5;
    grid-row:2;

}

/*US*/
.box3 {
   align-self:center;
  grid-column:1;
  grid-row:3;
  width:100%;
  font-size:15vw;
  align-self:start;
  text-align: center;


}

/*Bio Copy*/
.box4 {
   align-self:center;
     grid-column:3/5;
    grid-row:3;
    width:100%;
    font-size:1vw;
    padding-left:1.5rem;
    padding-right:1.5rem;
    width:100%;

}

/*insta 1*/
.box5 {
  grid-column:1/3;
    grid-row:3;


}

/*insta 2*/
.box6 {
 grid-column:3/5;
    grid-row:4;
}


/*lottie*/
.box8 {
 grid-column:1/3;
    grid-row:4;

    
}


/*insta 3*/
.box7 {
    grid-column:1/3;
    grid-row:5;


}


/*insta 4*/
.box9 {
 grid-column:3/5;
    grid-row:5;
    
}


}

@media only screen and (max-width: 470px) {
    
.wrapper {
  grid-template-columns: repeat(1fr);
   grid-template-rows:  repeat(6, minmax(100px, auto));
     width:80%;
      margin-top:3em;
        grid-gap: 1rem;

}

.wrapper > div {
  grid-column:1; 
  width:100%;

    
}

/*About us*/
.box1 {

    grid-row:1;
    align-self:center;
   font-size:20vw;
    text-align: center;
  
  
}

/*Hero Image - currently rings*/
.box2 {

    grid-row:2;
    height:100%;
    

}

/*US*/
.box3 {
   align-self:center;
  grid-row:3;
  width:100%;
  font-size:20vw;
  text-align: center;


}


/*Bio Copy*/
.box4 {
   align-self:center;
    grid-row:4;
    width:100%;
    font-size:4vw;
    padding:0;
    width:100%;

}


/*Serious on set pic*/
.box5 {
 
    grid-row:5;


}

/*Jamie yelling*/
.box6 {

    grid-row:6;
}

/*Will eye tape*/
.box7 {
   
    grid-row:7;


}

/*lottie*/
.box8 {

    grid-row:8;

    
}

/*sunsets*/
.box9 {

    grid-row:9;
    
}

@keyframes textSlideRight {
    0% {
        transform: translateX(10%);
        opacity:0;
        text-shadow:none;
    }
    50% {
        opacity:1;
    }
    100% {
        transform: translateX(0%);
        opacity:1;
        text-shadow: 0 -5px 0 #FFFFFF;
    }
}


@keyframes textSlideLeft {
    0% {
        transform: translateX(-10%);
        opacity:0;
        text-shadow:none;
    }
    50% {
        opacity:1;
    }
    100% {
        transform: translateX(0%);
        opacity:1;
        text-shadow: 0 -5px 0 #FFFFFF;
    }
}



}