/* 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

*/
*{
   box-sizing: border-box;
}

img {
   display: block;
}

/*h2, p {
   color: black;
}*/

html, body {
  overflow: hidden;
}

a {
  color: mediumvioletred;
  text-decoration: none;
  font-weight: bold;
}


.titlebox {
  width: 35%;
  padding: 1px;
  padding-top: 0.25px;
  padding-bottom: 0.25px;
  margin: auto;
  background-color: rgba(199, 21, 133, 0.8);
  border: solid 2px white;
  margin-bottom: 2%;
}

.title {
  z-index: 0;
  margin: auto;
  display: inline;
}

.title h1 {
  color: white;
  font-size: 45px;
  text-align: center;
  font-family: 'UnifrakturMaguntia', cursive;
}


.titlebox2 {
  width: 15%;
  padding: 1px;
  padding-top: 0.25px;
  padding-bottom: 0.25px;
  background-color: rgba(199, 21, 133, 0.8);
  border: solid 2px white;
  margin: auto;
  margin-top: 0.5%;
  margin-bottom: 5%;
}

.byline {
  /*background-color: mediumvioletred;*/

  
  /*width: 20%;*/
  display: inline;
  margin: auto;

  /*padding: 2px;*/
}

.byline p {
 
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0, 0.9);
}

.overlay video {
  width: 100%;
  top: 0;
  left: 0;
  /* object-fit: cover; */
  position: absolute;
}

.start {
  width: 30%;
  height: 50%;
  margin: auto;
  margin-left: 35%;
  margin-top: 18%;
  background-color: transparent;
  border: 0px;
  position: relative;
  cursor: pointer;
}

.start img {
  width: 100%;
  margin: auto;
  margin-bottom: 5%;
  cursor: pointer;
}

.guidepeeps {
  border: 2px solid white;
  color: white;
  padding: 12px;
  z-index: 200;
  font-weight: 700;
  text-align: center;
  display: inline;
  text-transform: uppercase;
  cursor: pointer;
}

.continue {
   background-color: white;
   color: black;
   padding: 12px;
   z-index: 200;
   position: absolute;
   top: 30px;
   right: 50px;
   cursor: pointer;
   display: none;
   font-weight: 700;
   text-align: center;
}


.letswatch video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  object-fit: cover;
}

.cooltings {
  width: 100%;
  height: 100vh;
  top: 0;
  padding: 0%;
  overflow: hidden;
  margin: 0;
}

.lebackground {
  /*background: black;*/
  z-index: -100;

}

.lebackground video {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  object-fit: cover;
  z-index: -100;
}

.lebackground img {
  width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  object-fit: cover;
  z-index: -100;
}

.fancy {
   width: 55%;
   margin-left: 5%;
   margin-bottom: 100vh;
   border: solid white 2px;

}

.fancy2 {
   width: 55%;
   margin-left: 40%;
   margin-bottom: 100vh;
   border: solid white 2px;

}
.textholder {
   background-color: rgba(255,255,255,0.8);
   width: 90%;
   margin: auto;
   margin-top: 5%;
   margin-bottom: 5%;
   padding: 20px;
   /*text-align: justify;*/
   line-height: 1.4em;
   /* margin-bottom: 100vh;*/
   /*box-shadow: 5px 5px 5px black; */
}

.textholder p, .textholder h2 {
   text-align: justify;
   color: black;
}

.textholder h2 {
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
}


.dropcap {
   font-size: 3em;
   color: mediumvioletred;
}

.getright {
   border: solid 2px white;
   width: 20%;
   margin-top: 5%;
   margin-right: 5%;
   margin-bottom: 5%;
  /* margin-left: 45%;*/
  float: right;
  padding: 2%;

}

.getleft {
   border: solid 2px white;
   width: 20%;
   margin-top: 5%;
   margin-left: 5%;
   float: left;
   padding: 2%;

}

.getright img, .getleft img {
   width: 100%;
   border: solid 2px white;
   margin-bottom: 5%;

}

.getright p, .getleft p {
  border: solid white 2px;
  padding: 2%;
  background-color: rgba(0, 0, 0, 0.8);
}


.cuatro {
   width: 50%;
   margin: auto;
   margin-bottom: 2%;
   border: solid 2px white;
   background-color: rgba(0,0,0,0.8);
}

.cuatro p, h2 {
   text-align: center;
   color: white;
}


/*Multimedia Elements

/*BEGIN GLOSSARY */

.glosshead {
   width: 50%;
   margin: auto;
   margin-bottom: 2%;
   border: solid 2px white;
   background-color: rgba(0, 0, 0, 0.8);

}

.glosshead h1 {
  text-align: center;
  color: white;
}

.glossy {
   background-color: rgba(0, 0, 0, 0.8);  /*NEED TO CHANGE*/
   padding: 5%;
   width: 50%;
   border: 2px solid white;
   margin: auto;
   margin-bottom: 100vh;
}

.glossy p {
   text-align: left;
   color: white;
}

.dic {
  font-size: 2em;
  color: white;
  text-transform: bold;
  text-align: left;
}

.glossy h2 {
  /*text-align: justify;*/
  color: white;
}


/*EVOLUTION OF FASHION */


.bigtext {
   background-color: rgba(0, 0, 0, 0.8);  /*NEED TO CHANGE*/
   padding: 2%;
   width: 50%;
   border: 2px solid white;
   margin: auto;
   margin-bottom: 5%;

}

.fashion {
   width: 80%;
   margin: auto;
   margin-bottom: 100vh;
  /* overflow-x: scroll; */
}

.fashion img {
   width: 100%;
}
.evoimg1, .evoimg2, .evoimg3 {
   width: 80%;
   display: inline-block;
   vertical-align: top;
  /* margin-bottom: 1%;*/
}

.evoimg1 {
margin-bottom: 5%;
background-color: rgba(152, 251, 152, 0.3);
/*float: right;*/
}

.evoimg2 {
margin-bottom: 5%;
background-color: rgba(152, 251, 152, 0.3);
/*float: left;*/
}

.evoimg3 {
 margin-bottom: 5%;
 background-color: rgba(152, 251, 152, 0.3);
}

.evocap1, .evocap2, .evocap3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 2px black;
  width: 80%;
  margin: auto;
  margin-right: 7%;
  padding: 2%;
}

.evocap1 {
  margin-bottom: 5%;

}

.evocap2 {
  margin-bottom: 5%;

}

.evocap3 {
  margin-bottom: 5%;

}

.evocap1 h3, .evocap1 p, .evocap2 h3, .evocap2 p, .evocap3 h3, .evocap3 p {
  text-align: center;
  color: black;
}




/*
SCROLLY GALLERY */

.gallery {
 /* height: 1000px;*/
  width: 100%;
  margin: auto;
  margin-bottom: 100vh;
}

.runway {
   width: 50%;
   margin: auto;
   border: solid 2px white;
   padding: 2%;
   margin-bottom: 2%;
   text-align: center;
}

.runway h2 {
   color: white;
}

.scrolly {
  display: flex;
  justify-content: center;
  align-items: center;
 /* margin-top: 40%;*/
  /*size: 100% 100vh;*/
 /* position: fixed 0px null null 0px;*/
}

.chav {
  flex: none;
  width: 30%;
  /*height: 100px;*/
  line-height: 100px;
  text-align: center;
  font-size: 25px;
  color: white;
  border: solid 1px;
  border-color: white;
 /* background: white;*/
  will-change: transform;
  padding: 2%;
}

.chav img {
   width: 100%
}

  :nth-of-type(2){

 }
  :nth-of-type(3){

 }
  :nth-of-type(4){

 }
  :nth-of-type(5){

 }
  :nth-of-type(6){

 }


/*BEGIN MAKEUP ROUTINE */
.getready {
   width: 50%;
   margin: auto;
   margin-bottom: 100vh;
   border: solid 2px white;
   padding:2%;

}

.getready iframe {
   width: 100%;
}

.makeuptext {
   width: 50%;
   margin: auto;
   margin-bottom: 2%;
   border: solid 2px white;
}

.makeuptext h2 {
   text-align: center;
   color: white;
}


/*BEGIN AUDIO TINGZ */

.audiogirl {
   background-color: rgba(0, 0, 0, 0.8);  /*NEED TO CHANGE*/
   padding: 2%;
   width: 50%;
   border: 2px solid white;
   margin: auto;
   margin-bottom: 100vh;
}

.audiogirl img {
   width: 100%;
}


.chat {
margin: auto;
/*margin-top: 5%;
margin-bottom: 5%;*/
padding: 2%;
width: 80%;

}

.chat h2, p {
   text-align: center;
   color: white;
}

.bigphoto {
   width: 80%;
   margin: auto;
   margin-bottom: 2%;
}

.bigphoto img, .minimal img {
   width: 100%;
   border: solid 2px palegreen;
}

.smallphoto {
 /* display: flex;*/
   display: flex;
   flex-direction: row-reverse;
}

.minimal {
   width: 20%;
   margin: 1%;
}

.leend {
  margin-bottom: 5%;
}
.leend p {
  color: white;
  font-weight: bold;
}


















/*media query for responsive design */

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


}