/* styles.css 
   Project: 
   Author: 
   Date: 
	
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Raleway&family=Roboto&display=swap');

/*main css*/


* {
  box-sizing: border-box;
}

img, video {
  width: 100%;
  display: block;
}

audio {
  display: block;
}

/*PAGE COLORS, use div ID for each*/
#jung {
  background: #ca342f;
}

#hunie {
  background: #4eab58;
}

#bryce {
  background: #2b6bb1;
}

#biggermeaningsection{
  background: #f57c20;
}

#slowingdown {
  background: #ca342f;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background-color: white !important; /* important is to override*/
}

/*DROP CAPS */
.dropcap {
  font-size: 4em;
  float: left;
  margin-right: 0.1em;
  margin-bottom: 0.2em;
}

/*LANDING PAGE ------*/
/*the navigation bar at the top*/
nav {
  position: absolute;
  width: 100%;
  margin: auto; 
  /* (requires width) looks @ width of element, calculates how much left and right margin to put */
  color:white;
  z-index: 100;
}

nav a {
  color: white;
  text-decoration: none;
}

nav h3 {
  display: inline-block;
/* makes it not line by line */
  padding: 15px;
  float: right;
}

.videobackground {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.videobackground video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
}

.storytitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.storytitle img {
  max-width: 100%;
  height: auto;
}

/*END LANDING PAGE ------*/


/*JUNG PAGE -----*/
.jungtext {
  max-width:50%;
  margin: auto;
  color: white;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  font-family: SF Pro Display;
  padding-left: 100px;
  padding-right: 100px;
  font-weight: 400;
}

.rightsidetext{
  max-width:100%;
  color: white;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  font-family: SF Pro Display;
  padding: 50px;
  margin-top: 78px;
  font-weight: 400;
}

.jungtext h1 {
  font-size: 9.8em;
  line-height: .9em;
  margin-top:70px;
}


/*two column container for jung and stop motion*/
.smcontainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

.caption-container {
  display:flex;
  flex-direction: column;
  margin-right: 100px;
  margin-top: -70px;
}

#target-area {
  width: 93%;
  margin-top: 50px;
}

.caption {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  color: white;
  text-align: center;
}

.jungpic {
/*  display: block;*/
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}

#falcon {
  margin-top: 50px;
}

.socialexplainer {
  width: 80%;
  height: 80%;
  margin-left: 50px;
}

.rightsidetext{ 
  margin-top: -50px;
 }
/*end of container*/
/*END JUNG PAGE-----*/





/*HUNIE PAGE -----*/
/*two column container for hunie and timeline*/
.titlecontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hunietimelapse {
  margin-top: -325px;
  text-align: center;
  padding-left: 50px;
  width: 80%;
  margin-left: 50px;
  position: relative;
}

.tape {
  position: absolute;
  width: 100px;
  width: 100px;
  margin-left: 285px;
  margin-top: -60px;
}

.huniecollage {
  margin-top: 50px;
}
  
.titlecontainer h1 {
  font-size: 10em;
  line-height: .9em;
  color: white;
  padding-right: 100px;
  padding-left: 100px;
  margin-top: 30px;
  font-family: SF Pro Display;

}

.timelinecontainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

.timeline {
  margin: 20px;
  text-align: center;
}

.hunietext {
  max-width:100%;
  color: white;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: left;
  padding-left: 10%;
  padding-right: 10%;
  font-family: SF Pro Display;
  font-weight: 400;
  text-align: justify;
}

/*end of container*/

.mercedesamg {
  margin-bottom: -100px;
}
/*END HUNIE PAGE -----*/





/*BRYCE PAGE -----*/
.brycetext {
  max-width:100%;
/*  margin: auto;*/
  color: white;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  padding-left: 50px;
  padding-right: 50px;
  font-family: SF Pro Display;
  font-weight: 400;

}

/*three column container for Bryce and TikTok*/
.tiktokcontainer {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  margin: 30px;
  position:relative;
  margin-top:100px;
}

#bodybuild {
  margin-bottom: 30px;
}

#stardestroyer {
  margin-top: 30px;
  z-index: 1;
}

.ttsticky {
  position: absolute;
  margin-bottom: 50px;
  z-index: 2;
}

.ttsticky img {
  max-width: 50%;
  max-height: 50%;
}

.bryceheadercontainer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 750px; /* Set a fixed height to accommodate both the image and the text */
}

.brycepic {
  position: relative;
  height: 100%; /* Set the height to 100% to fill the parent container */
}

.brycepic img {
  width: 1440px;
  height: 780px;
}

#bryceheader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  width: 100%;
}

#bryceheader h1 {
  font-size: 10em;
  line-height: .9em;
  color: white;
  padding: 100px;
  font-family: SF Pro Display;
}

/*END BRYCE PAGE ------*/




/*BIGGER MEANING PAGE*/

.biggermeaningheader {
  text-align: center;
  margin-bottom: -20px;
}

.biggermeaningheader h1{
  font-size: 10em;
  line-height: .2em;
  color: white;
  font-family: SF Pro Display;
}

.biggermeaningcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 410px;
  overflow: hidden;
  margin-bottom: 100px;
}

.bmjung .bmhunie .bmbryce {
  height: 100%;
  width: auto;
}

.bmhunie {
  margin-top: 47px;
}

.biggermeaningtextcontainer {
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.fivetext{
  color:white;
  max-width:100%;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
  font-family: SF Pro Display;
  font-weight: 400;
  text-align: justify;

}

.et {
  max-width: 100%;
  width: 80%;
  height:80%;
  margin-top: -50px;
}

.linkedin {
  max-width: 100%;
  margin-top: -600px;
  width: 80%;
  height:80%;
}


/*END BIGGER MEANING PAGE-----*/


/*SLOWING DOWN PAGE -----*/
.sixtext {
  color:white;
  max-width:100%;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  padding-right: 50px;
  font-family: SF Pro Display;
  font-weight: 400;
}

.theendheadercontainer {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.investments {
  margin-right: 50px;
}

.theendcontainer {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  overflow: hidden;
}

.jdcurrent{
  margin-top: 50px;
}