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

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

body {
   background-color: black;
   font-color: white;
   font-family: 'Lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

.container {
   height:100vh;
   overflow-y: hidden;
}

#project {
}

.footerHome {
/*   transform: translateY(-200px); */
  transform: rotate(90deg) translateX(220px) translateY(-190px);
/*  bottom: 20px;*/
  top:0;
  right: 20px;
  align-items: center;
  position: fixed;
}

.footerHome a {
  text-align: center;
  color: white;

  background: transparent;
  border: solid white;
  font-size: 13px;
  margin: 5px;
  padding: 5px;
  letter-spacing: 2px;
  text-decoration: none;
  box-shadow: 2px 2px 2px white;
}

/*#toggleBox {
  transform: rotate(90deg) translateX(180px) translateY(-130px);
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
}

.b1, .b2, .b3, .b4 {
  color: white;
  background: transparent;
  border: solid white;
  font-size: 13px;
  margin: 5px;
  padding: 5px;
  letter-spacing: 2px;
}*/

.detail1 {
/*  white-space:nowrap;*/
}

.landing {
  height:100vh;
  z-index: -1;
}

.landing img {
/*  opacity: 0.3;*/
}

#box1 {
  padding-right: 400px;
  margin-right: 100px;
}

#box1 h1{  
/*  border: 2px solid white;*/

  white-space:nowrap;
  position: absolute;
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    #ff86e9 24%,
    #a8ff82 50%,
    #4fffe2 75%,
    #ffffff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 100px;

  letter-spacing: 8px;
  
  margin-top: 273px;
  padding-left: 30px;
  padding-right: 30px;

  backdrop-filter: blur(3px) saturate(100%);
  margin-bottom: auto;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


#box1 h2{  
/*  border: 2px solid white;*/

  white-space:nowrap;
  position: absolute;
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    /*#4577a8 24%,
    #0b3866 50%,
    #004c9c 75%,*/
    #ffffff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
/*  color: #36da3a;*/
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 50px;
  letter-spacing: 4px;

  backdrop-filter: blur(3px) saturate(100%);

  margin-top: 393px;
  padding-left: 30px;
  padding-right: 30px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

#box1 h3 {  
/*  border: 2px solid white;*/

  white-space:nowrap;
  position: absolute;
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    /*#4577a8 24%,
    #0b3866 50%,
    #004c9c 75%,*/
    #ffffff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
/*  color: #36da3a;*/
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 30px;
  letter-spacing: 4px;

  backdrop-filter: blur(3px) saturate(100%);

  margin-top: 470px;
  padding-left: 30px;
  padding-right: 30px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

#box1 h4 {
  position: fixed;
  right:15px;
  bottom:10px;
  color: white;
  letter-spacing: 1.5px;
}

#home1 {
   color: white;
   position: absolute;
   top: 60px;
   left: 1550px;

/*   letter-spacing: 1.5px;
   word-spacing: 2px;
   line-height: 30px;*/

   letter-spacing: 1.2px;
   word-spacing: 1px;
   line-height: 20px;
   font-size: 14px;

   border-radius: 10px;
   height: 100vh;

   padding: 20px;
/*   padding-right: 50px;*/


/*   background: 
    linear-gradient(#ff62e2, transparent),
    linear-gradient(to top left, #ff00ac, transparent),
    linear-gradient(to top right, #00fffb, transparent);

   background-blend-mode: screen;*/

}

#home1 p {
  width: 100%;
}

.aa1 {
  width: 600px;
  top: -15px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  position: absolute;
}

.graph {
  position: absolute;
  left: 800px;
  top: -50px;
  width: 420px;
/*  border: 3px solid yellow;*/
}
.graph img{
  width: 600px;
}

.ab1 {
  width: 500px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  position: absolute;
  left: 950px;
}

.ac1 {
  width: 800px;
  padding: 10px;
  border: 1px solid whitesmoke;
  word-wrap: break-word;
  overflow: hidden;
  position: absolute;
  left: 1200px;
}

.ad1 {
  width: 800px;
  padding: 10px;
  border: 1px solid whitesmoke;
  word-wrap: break-word;
  overflow: hidden;
  position: absolute;
  left: 2000px;
}

/*.infographic {
  border: 3px solid yellow;
  width: 30%;
  position: absolute;
  bottom: 0;
  right: 0;
}*/

/*box office*/
.detail2 {
/*  display: none;*/
/*  white-space: nowrap;*/
}

.landingBox {
  height:100vh;
/*  padding-top: 20px;*/
/*  padding-left: 50px;*/
}

.landingBox img {
  opacity: 0.3;
}

#box2 h1 {
  position: absolute;

  overflow: auto;

  white-space:nowrap;
  background-image: linear-gradient(
    -225deg,
    #ffe700 0%,
    #ff8126 29%,
    #ffbe4e 67%,
    #00c1ff 87%,
    #a7f0ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip2 2s linear infinite;
  display: inline-block;
  font-size: 80px;

  letter-spacing: 10px;
  
  margin-top: 40px;
  padding-left: 30px;
  padding-right: 30px;
}

@keyframes textclip2 {
  to {
    background-position: 200% center;
  }
}

#box2 h4 {
  position: fixed;
  right:15px;
  bottom:10px;
  color: white;
  letter-spacing: 1.5px;
  z-index: 1;
}

.WonkaPoster {
  width: 160px;
  position: absolute;
  left: 660px;
  top: 270px;
}

.DunePoster {
  width: 160px;
  position: absolute;
  left: 660px;
  top: 520px;
}

.boxofficeT {
  width: 410px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  color: white;

  color: white;
  position: absolute;
  top: 5px;
  left: 1040px;
  margin-right: 20px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;
  border: 1px solid white;
  background: black;
  box-shadow: 6px 8px 20px rgba(255, 255, 255, 0.4);
}

/*BARBIE BLOCK*/
#bo1 {
   color: white;
   position: absolute;
   top: 0;
   left: 1830px;

   border-radius: 10px;
   height: 100vh;

/*   padding: 20px;*/
/*   padding-right: 650px;*/

   letter-spacing: 1.2px;
   word-spacing: 1px;
   line-height: 20px;
   font-size: 14px;

/*   background: 
    linear-gradient(#ff62e2, transparent),
    linear-gradient(to top left, #ff00ac, transparent),
    linear-gradient(to top right, #00fffb, transparent);

   background-blend-mode: screen;*/
}

#bo1 h2 {
  background-image: linear-gradient(
    -225deg,
    #ff097c 0%,
    #001fc4 29%,
    #ffb0fa 67%,
    #00d4ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 40px;
  line-height: 80px;  
  letter-spacing: 3.5px;
  padding-top: 10px;

  width: 800px;

  margin-top: auto;
  margin-bottom: auto;
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.aa2 {  
  width: 500px;
  position: relative;
  word-wrap: break-word;
  overflow: hidden;
/*  left: -150px;*/
}

.ab2 {
  width: 520px;
  left: 570px;
  top: 20px;
  position: absolute;
  word-wrap: break-word;
  overflow: hidden;
}

/*.sourcesBarbie p {
  text-align: center;
  font-size: 10px;
}
*/

/*.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}*/

/*.active {
  background-color: #717171;
}*/

/* Fading animation */
/*.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}*/

/*@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}*/

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.BarbiePoster {
  position: absolute;
  left: 1520px;
  top:50px;
  width: 280px;
}

.BarbieCap {
  color: white;
  display: block;
  position: absolute;
  left: 1520px;
  top: 460px;
/*  transform: rotate(-90deg);*/
  font-size: 8px;
  width: 450px;
  font-style: italic;
}

/*.acc {
  position: absolute;
  left: 1550px;
  bottom: 300px;
  width: 200px;
}*/

.ac2 {
  position: absolute;
  margin:auto;
  left: 1500px;
  top: 500px;

  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: end;

/*  background-color: hotpink;*/
}

.barbieQ {
  position: absolute;
  width: 350px;
  left: 1050px;
  top: 50px; 
  color: white;

  font-size: 15px;

  letter-spacing: 3px;
  line-height: 35px;
}



.photoBar {
  position: relative;
  overflow: hidden;
  margin: 20px;
  margin-bottom: 0px;
}

.photoBar img {
  width: auto;
  height: 220px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  opacity: 0; 
  transition: opacity 0.3s ease; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.overlay p {
    color: white; 
    font-size: 12px; 
}

.overlay a {
  color: white;
}

.overlay a:hover {
  color: hotpink;
}

.photoBar:hover .overlay {
    opacity: 1;
}

#bo2 {
   color: black;
   position: absolute;
   top: 0;
   left: 3000px;

   border-radius: 10px;
   height: 100vh;

/*   padding: 20px;
   padding-right: 650px;*/

   letter-spacing: 1.2px;
   word-spacing: 1px;
   line-height: 20px;
   font-size: 14px;

/*   background: 
    linear-gradient(#8f3800, transparent),
    linear-gradient(to top left, #580087, transparent),
    linear-gradient(to top left, #fa00c5, transparent);*/
}

#bo2 h2 {
  width: 120%;
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    #5c008e 29%,
    #fff400 67%,
    #8f3800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 40px;
  line-height: 80px;
  letter-spacing: 3.5px; 
  padding-top: 10px; 

  margin-top: auto;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.ad2 {
  width: 560px;
/*  padding-left: 25px;
  padding-right: 100px;*/
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  color: whitesmoke;
}

.ae2 {
  position: absolute;
  left: 550px;
  bottom: 20px;
}

.Wonkahistory {
  width: 650px;
}

#text2 {
  font-size: 14.5px;
}

#rotatingText {
  animation-name: rotate-circle2;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  fill: white;
  position: absolute;
  top: 10px;
  left: 1075px;
}

@keyframes rotate-circle2 {
      to {
        transform: rotate(1turn);
      }
}

.wonkaQ {
  position: absolute;
  width: 330px;
  left: 1060px;
  top: 400px; 
  color: white;

  font-size: 15px;

  letter-spacing: 3px;
  line-height: 35px;
}

#bo3 {
   letter-spacing: 1.5px;
   word-spacing: 2px;
   line-height: 30px;

   color: white;
   position: absolute;
   top: 0;
   left: 4800px;
   border-radius: 10px;

/*   padding: 20px;
   padding-right: 650px;*/

   letter-spacing: 1.2px;
   word-spacing: 1px;
   line-height: 20px;
   font-size: 14px;

/*   background: 
    linear-gradient(#631c06, transparent),
    linear-gradient(to top left, #b06700, transparent),
    linear-gradient(to top right, #ffc560, transparent),
    linear-gradient(to top right, #637700, transparent);*/
  }

#bo3 h2 {
  width: 110%;
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    #880000 29%,
    #ffb400 67%,
    #8f3800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 40px;
  line-height: 80px;
  letter-spacing: 3.5px; 
  padding-top: 10px;

  margin-right: 150px;

  margin-top: auto;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.af2 {
  width: 750px;
/*  padding: 10px;*/
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
}


.duneMap {
  height: 50vh;
  position: relative;
  left: -65px;
  z-index: -1;
}

.duneQ {
  position: absolute;
  width: 450px;
  left: 100px;
  top: 450px; 
  color: white;

  font-size: 15px;

  letter-spacing: 3px;
  line-height: 35px;
}


.WonkaP {
  position: absolute;
  top: 11px;
  left: 830px;
  width: 300px;
  padding-right: 40px;
}

.Flor {
  position: absolute;
  top: 410px;
  left: 850px;
  width: 300px;
  padding-right: 40px;
}

.Zen {
  position: absolute;
  top: 20px;
  left: -300px;
  width: 250px;
}

.Tim {
  position: absolute;
  top: 410px;
  left: -300px;
  width: 250px;
}

/*indie*/
.detail3 {
/*  display: none;*/
/*  white-space: nowrap;*/
}

.landingIndie {
  height:100vh;
  
}

.landingIndie img {
  opacity: 0.3;
}

#box3 h1 {
  position: absolute;

  overflow: auto;

  white-space:nowrap;
  background-image: linear-gradient(
    -225deg,
    #000000 0%,
    #fff6ff 29%,
    #7fff57 67%,
    #ffffff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip3 2s linear infinite;
  display: inline-block;
  font-size: 80px;
  letter-spacing: 10px;
  
  margin-top: 30px;
  padding-left: 40px;
/*  padding-right: 30px;*/
}

@keyframes textclip3 {
  to {
    background-position: 200% center;
  }
}

#box3 h2 {
  position: absolute;

  overflow: auto;

  white-space:nowrap;
  background-image: linear-gradient(
    -225deg,
    #00508f 0%,
    #cbe8ff 29%,
    #5eb6fb 67%,
    #012b4b 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip3 2s linear infinite;
  display: inline-block;
  
  margin-top: 130px;
  padding-left: 40px;
/*  padding-right: 30px;*/
  letter-spacing: 3px;

}

@keyframes textclip3 {
  to {
    background-position: 200% center;
  }
}

#box3 h4 {
  position: fixed;
  right:15px;
  bottom:10px;
  color: white;
  letter-spacing: 1.5px;
}

.boxofficeT2 {
  width: 630px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  color: white;

  color: white;
  position: absolute;
  top: 155px;
  left: 30px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;
}


#i1 {
  width: 100%;
  letter-spacing: 1.5px;
  word-spacing: 2px;
  line-height: 30px;

  color: white;
  position: absolute;
  top: 0;
  left: 1500px;

  height: 100%;

  border-radius: 10px;

  padding: 20px;
  padding-top: 10px;
  padding-right: 650px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;

/*  background: 
    linear-gradient(#631c06, transparent),
    linear-gradient(to top left, #b06700, transparent),
    linear-gradient(to top right, #ffc560, transparent),
    linear-gradient(to top right, #637700, transparent);*/
}

#i1 h2 {
  background-image: linear-gradient(
    -225deg,
    #f8ff00 0%,
    #ffb02c 29%,
    #1d60ff 67%,
    #001e3e 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 30px;
  line-height: 80px;
  letter-spacing: 3.5px;  

  margin-left: -50px;
  margin-top: 20px;

/*  margin-top: auto;*/
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.aa3 {
  width: 500px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  margin-top: 100px;
}

.goodSide {
  position: absolute;
  left: 550px;
  top: 13px;
  width: 550px;
}

.ac3 {
  width: 500px;
  position: absolute;
  left: 40px;
  top: 580px;

  color: white;

  font-size: 15px;

  letter-spacing: 3px;
  line-height: 35px;
}

#i2 {

  letter-spacing: 1.5px;
  word-spacing: 2px;
  line-height: 30px;

  color: white;
  position: absolute;
  top: 0;
  left: 3550px;

  height: 100%;

  border-radius: 10px;

  padding: 20px;
  padding-right: 650px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;

/*  background: 
    linear-gradient(#631c06, transparent),
    linear-gradient(to top left, #b06700, transparent),
    linear-gradient(to top right, #ffc560, transparent),
    linear-gradient(to top right, #637700, transparent);*/
}

#i2 h2 {
/*  width: 900px;*/
  background-image: linear-gradient(
    -225deg,
    #38ff01 0%,
    #00d47f 29%,
    #ff00e1 67%,
    #0300ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 30px;
  line-height: 80px;
  letter-spacing: 3.5px;  

  position: absolute;
  left: -90px;
  z-index: 1;

  margin-top: auto;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.ad3 {
  width: 450px;
  padding: 10px;
  padding-left: 20px;
  padding-right: 5px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
  position: absolute;
  top: 90px;
}

/*.ae3 {
  width: 700px;
  padding: 10px;
  border: 1px solid whitesmoke;
  word-wrap: break-word;
  overflow: hidden;
}*/

.wildA {
  position: absolute;
  left: -870px;
  top: 23px;
  width: 870px;
}

#i3 {

  letter-spacing: 1.5px;
  word-spacing: 2px;
  line-height: 30px;

  color: white;
  position: absolute;
  top: 0;
  left: 4800px;

  height: 100%;

  border-radius: 10px;

  padding: 20px;
  padding-right: 800px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;

 /* background: 
    linear-gradient(#631c06, transparent),
    linear-gradient(to top left, #b06700, transparent),
    linear-gradient(to top right, #ffc560, transparent),
    linear-gradient(to top right, #637700, transparent);*/
}

#i3 h2 {
/*  width: 900px;*/
  background-image: linear-gradient(
    -225deg,
    #00fbff 0%,
    #25d2ff 29%,
    #ffbc00 67%,
    #a45a00 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 30px;
  line-height: 40px;
  letter-spacing: 3.5px; 

  position: absolute; 
  top: 25px;
  left: -50px;
  z-index: 1;
  width: 100%;

  margin-top: auto;
  margin-bottom: auto;

/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
.af31 {
  width: 430px;
  padding: 10px;
  padding-right: 30px;

/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;

  position: absolute;
  top: 100px;
  z-index: 1;
  left: 340px;
}

.af3 {
  width: 830px;
  padding: 10px;
  padding-right: 30px;

/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;

  position: absolute;
  top: 265px;
  z-index: 1;
  left: -50px;
}

.Ameri {
  position: absolute;
  left: -660px;
  top: 30px;
  width: 1000px;
}

/*.ag3 {
  width: 700px;
  padding: 10px;
  border: 1px solid whitesmoke;
  word-wrap: break-word;
  overflow: hidden;
}*/

#i4 {
   color: white;
   position: absolute;
   top: 25px;
   left: 6200px;

   border-radius: 10px;

   padding: 20px;
   padding-right: 650px;

   letter-spacing: 1.2px;
   word-spacing: 1px;
   line-height: 20px;
   font-size: 13px;

/*   background: linear-gradient(to right, rgb(140, 232, 255, 1), rgb(255, 198, 255, 0.7), rgb(250, 0, 197, 0));*/
}

#i4 h2 {
/*  width: 900px;*/
  background-image: linear-gradient(
    -225deg,
    #ff097c 0%,
    #001fc4 29%,
    #ffb0fa 67%,
    #00d4ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 40px;
  line-height: 80px;  

  margin-top: auto;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.ah3 {
  width: 700px;
  padding: 10px;
/*  border: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
}

/*student*/
.detail4 {
/*  display: none;*/
/*  white-space: nowrap;*/
}

/*.landingStudent {
  height:85vw;
  margin-left: 100px;
  position: absolute;
  bottom: 160px;
}
*/
.landingStudent {
  width:95vw;
  margin-top: 150px;
/*  padding-top: 20px;*/
/*  padding-left: 50px;*/
}

.landingStudent img {
  opacity: 0.3;
}

#box4 h1 {
  white-space:nowrap;
  position: absolute;
  background-image: linear-gradient(
    -225deg,
    #00d2ff 0%,
    #25ffce 29%,
    #a925ff 67%,
    #be95ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip4 2s linear infinite;
  display: inline-block;
  font-size: 80px;

  letter-spacing: 10px;
  
  margin-top: -120px;
  margin-left: 50px;
  padding-right: 30px;
}

@keyframes textclip4 {
  to {
    background-position: 200% center;
  }
}

#box4 h4 {
  position: fixed;
  right:15px;
  bottom:10px;
  color: white;
  letter-spacing: 1.5px;
}

.boxofficeT3 {
  width: 500px;
  padding: 10px;
  border: 1px solid whitesmoke;
  word-wrap: break-word;
  overflow: hidden;
  color: white;

  color: white;
  position: absolute;
  top: 80px;
  left: 900px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;
}

.studentQ {
  position: absolute;
  width: 1000px;
  left: 60px;
  top: 650px; 
  color: white;

  font-size: 15px;

  letter-spacing: 3px;
  line-height: 35px;
}

#sf1 {

  letter-spacing: 1.5px;
  word-spacing: 2px;
  line-height: 30px;

  color: white;
  position: absolute;
  top: 40px;
  left: 1550px;

  height: 100%;

  border-radius: 10px;

/*  padding: 20px;*/
  padding-right: 800px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;

/*  background: 
    linear-gradient(#631c06, transparent),
    linear-gradient(to top left, #b06700, transparent),
    linear-gradient(to top right, #ffc560, transparent),
    linear-gradient(to top right, #637700, transparent);*/
}

#sf1 h2 {
/*  width: 900px;*/
  background-image: linear-gradient(
    -225deg,
    #7dff00 0%,
    #00be66 29%,
    #fff025 67%,
    #95ecff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 30px;
  line-height: 80px;
  letter-spacing: 3.5px;  

  margin-top: auto;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.aa4 {
  width: 600px;
/*  padding: 10px;*/
/* order: 1px solid whitesmoke;*/
  word-wrap: break-word;
  overflow: hidden;
}

.containerSF {
  width: 600px;
  top: 150px;
  position: absolute;
  left: 2250px;
}

.sourcesSF p {
  text-align: center;
  font-size: 10px;
  color: white;
}

.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.concludeT {
    background-image: linear-gradient(
    -225deg,
    #f7b5ff 0%,
    #f9efbc 29%,
    #67fc99 67%,
    #25cbff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;

  font-size: 30px;
  line-height: 80px;
  letter-spacing: 3.5px;  

  margin-top: 90px;
  margin-left: 60px;
  margin-bottom: auto;
/*  padding-left: 20px;*/
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.conclusion {
  width: 600px;
  word-wrap: break-word;
  overflow: hidden;
  color: white;
  position: absolute;
  top:210px;
  left: 60px;

  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;
}

.videoEx {
  color: white;
  letter-spacing: 1.2px;
  word-spacing: 1px;
  line-height: 20px;
  font-size: 14px;
  position: absolute;
  left: 700px;
  top: 480px;
  font-style: italic;
  width: 600px;
  word-wrap: break-word;
  overflow: hidden;
  z-index: 1;
}

/*media query for responsive design */

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


}