/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

a{
   color: #FDEE04;
   text-decoration:underline;
}

.denise {
   position: absolute;
   top: 25%;
   right: -2%;
   width: 700px;
   transform: rotate(5deg);

}

.videotag {
   position: absolute;
   transform: rotate(5deg);
   top: 147%;
   right: 27%;
}


.header {
   z-index: -3;
   position: relative;
}

.header video{
   width: 100%;
}

.headbyline {
/*   margin-top: -70%;*/
/*   padding-left: 150px;*/
/*   z-index: 2;*/
   position: absolute;
   bottom: 16%;
   left: 20%;
   align-content: center;
}

.headbyline p{
   position: absolute;
   bottom: -26%;
   color: black;
   font: 1em "Helvetica";
   line-height: 1.5;
   text-align: center;
   left: 30%;
}


.headline{
   color: #FDEE04;
   font: 5em "Helvetica";
   font-weight: bold;
   width: 80%;
   text-align: center;
   letter-spacing: -1px;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
   transform: rotate(-6deg);
}

.subhead{
   color: white;
   font: 3em "Helvetica";
   font-weight: bold;
   width: 80%;
   text-align: center;
   letter-spacing: -1px;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
   margin-top: -2%;
   transform: rotate(-3deg);
}

.headbyline img{
   width: 20px;
   padding: 2px;
}

.mail{
   position: absolute;
   bottom: -29%;
   left: 35%;
   text-align:center;
}


.main {
   position:relative;
   padding-top: 5%;
   padding-left: 20%;
   padding-right: 20%;
   padding-bottom: 5%;
}

.sectionheader h1{
   color: white;
   font: 1.5em "Helvetica";
   font-weight: bold;
   letter-spacing: 1px;
   text-align: center;
   line-height: -1;
   padding-bottom:3%;

}

.main p{
   font-family: 'Helvetica';
   letter-spacing: .5px;
   line-height: 2;
   color: #FDEE04;
}

.text{
   padding: 3%;
   background-color: rgba(0,0,0,.6)
}

.abs {
   position: absolute;
   right: 300%;
   z-index:-1;
   transform: rotate(-10deg);

}

.ari{
   position:absolute;
   top: 43%;
   left: 200%;
   z-index: -3;
   transform: rotate(10deg);

}

.v{
   position:absolute;
   top: 10%;
   right: 200%;
   width: 800px;
   z-index: -1;
   transform: rotate(10deg);

}

.rm{
   position:absolute;
   top: 36%;
   left: 200%;
   z-index: -1;
   transform: rotate(3deg);

}

.taylor{
   position:absolute;
   top: 17%;
   right: 200%;
   z-index: -1;
   transform: rotate(-10deg);

}

.kim{
   position: absolute;
   top: 35%;
   left: 300%;
   z-index: -1;
   transform: rotate(12deg);

}


.float1 {
   position: relative;
   background-color: white;
   width: 100%;
   padding: 5%;

   /*overflow:hidden;*/
}

.float1 h1{
   position:absolute;
   bottom:5%;
   line-height: 1em;
   font: 4em "Helvetica";
   color: #FDEE04;
   font-weight: bold;
   width: 800px;
   text-align: left;
   letter-spacing: -1px;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   z-index: 3;

}

.caption {
   position: absolute;
   color:black;
   letter-spacing: 1px;
   left: 25%;
   transform: rotate(2deg);
   z-index: 4;
}

.captiona{
   display:none;
}



.float1 img{
   position: relative;
   left: 60%;
   top: 40%;
   height: 500px;
   margin: 10px;
   transform: rotate(15deg);
   border: 2px solid black;

}

.float1 video{
   position: absolute;
   top: 10%;
   left: 10%;
   width: 500px;
   border: 2px solid black;
   transform: rotate(-10deg);

}

.allisoncontrols{
   display:none;
   
}

.float2 {
   position: relative;
   background-color: white;
   padding: 5%;
   height: 100%;
   padding-bottom: 200px;
   z-index: 5;
  
   
}

.float2 h1{
   position:absolute;
   top:5%;
   left: 40%;
   line-height: 1em;
   font: 4em "Helvetica";
   color: #FDEE04;
   font-weight: bold;
   width: 650px;
   text-align: left;
   letter-spacing: -1px;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   z-index: 3;

}

.float2 video {
   /* position: absolute;*/
   top: 20%;
   width: 450px;
   transform: rotate(-10deg);
   border: 3px solid black;
}

.youtubevid {
   position: absolute;
   width: 560px;
   transform: rotate(5deg);
   top: 51%;
   left: 45%;
}

.caption2 {
   position: absolute;
   color:black;
   letter-spacing: 1px;
   left: 8%;
   bottom: 10%;
   transform: rotate(-5deg);
   font: "Helvetica";
   font-style: italic;
   z-index: 3;

}

.caption2a {
   display:none;
}

.float3 {
   position: relative;
   padding: 5%;
   height: 100%;
   padding-bottom: 200px;
}

.float3 h1 {
   position:absolute;
   top:5%;
   line-height: 1em;
   font: 4em "Helvetica";
   color: #FDEE04;
   font-weight: bold;
   width: 600px;
   text-align: left;
   letter-spacing: -1px;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   z-index: 3;

}



.footer{
   position: absolute;
   width:  200px;
   font: .75em "Helvetica";
   text-align: center;
   bottom: -100%;
   left: 45%;
   padding-left: 10px;
   padding-right: 10px;
   background-color:rgba(0,0,0,.6);

}

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

   body {

      }

   .header{
      margin-bottom: 100px;
   }

   .headbyline {
   position: absolute;
   top: 10%;
   left: 20%;
   align-content: center;
}

   .headline {
      font-size: 4em;
   }

   .subhead {
      font-size: 2em;
      -webkit-text-stroke-width: .5px;
      -webkit-text-stroke-color: black;
      letter-spacing: 1px;
   }

   .headbyline p{
      font-size: .75em;
      left: 30%;
      bottom: -70%;
      line-height: 1;

   }

   .mail{
      display:none;
   }

   .main {
      position:relative;
      padding-top: 5%;
      padding-left: 10%;
      padding-right: 10%;
      padding-bottom: 5%;
}

   .float2 {
      position:relative;
      display:block;
      background-color: white;
      padding: 5%;
      height: 100%;
      padding-bottom: 200px;
      z-index: 5;
  
   
   }

   .float2 h1{
      top:50%;
      left: 5%;
      line-height: 1em;
      font: 3em "Helvetica";
      color: #FDEE04;
      font-weight: bold;
      width: 60%;
      text-align: left;
      letter-spacing: -1px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
      z-index: 3;

   }

   .float2 video {
      width: 450px;
      border: 3px solid black;
      transform: rotate(-4deg);
   }

   .youtubevid {
     display:none;
   }

   .caption2 {
      display:none;

   }

   .caption2a{
      position: absolute;
      display:block;
      color:black;
      letter-spacing: 1px;
      left: 10%;
      bottom: 4%;
      transform: rotate(2deg);
      font: "Helvetica";
      font-style: italic;
      z-index: 3;

   }

   .float1 {
      position: relative;
      background-color: white;
      width: 100%;
      height: 600px;
      padding: 5%;

      /*overflow:hidden;*/
   }

   .float1 h1{
      position:absolute;
      bottom:5%;
      line-height: 1em;
      font: 3em "Helvetica";
      color: #FDEE04;
      font-weight: bold;
      width: 60%;
      text-align: left;
      letter-spacing: -1px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
      z-index: 3;

   }

   .caption {
      display:none;
      
   }

   .captiona{
      display:block;
      position: absolute;
      color:black;
      letter-spacing: 1px;
      left: 25%;
      transform: rotate(2deg);
      z-index: 4;
      bottom: -2%;

   }


   .ig{
      display:none;
   }

   .allison{
      display:none;
   }


   .allisoncontrols {
      display:block;
      position: absolute;
      top: 10%;
      left: 10%;
      width: 500px;
      border: 2px solid black;
      transform: rotate(0deg);

   }

   .float3 {
      position: relative;
      padding: 5%;
      height: 100%;
      padding-bottom: 200px;
   }

   .float3 h1 {
      position:absolute;
      top:5%;
      line-height: 1em;
      font: 3em "Helvetica";
      color: #FDEE04;
      font-weight: bold;
      width: 60%;
      text-align: left;
      letter-spacing: -1px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
      z-index: 3;

   }

   .denise {
      position: absolute;
      right: 4%;
      top: 50%;
      width: 500px;
      transform: rotate(5deg);
   }

   .videotag{
      display:none;
   }

   .footer {
      display:none;
   }