/********/
/* GSAP */
/********/
#section-scrollanimation {
  overflow:hidden !important; 
  z-index:5; 
  /*margin-top:100vh; */
  position:relative;
}

.outer-line {
  width: 100%;
  max-width: 99%;
  height: 2px;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  background-color: rgba(223,223,223,1);
}

.line {
  width: 0%;
  max-width: 100%;
  height: 2px;
  position: absolute;
  display: inline-block;
  background-color: rgba(243,149,7,1);
}
/*
#section-scrollanimation {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
*/

#section-scrollanimation > .frame-inner > .container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.panel .col-nr-1.col-12 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  box-sizing: border-box;
  padding: 0;
}

.panel .text-box {
  position: relative;
  height: 300px;
  width:16.6667%; 
  max-width: 50%;
  min-width:16.6667%; 
  padding-right: 10px;
}

.wrap-scrollanim {
  display:flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 640px;
}

.animation-topcontent {
  position:absolute; 
  width: 640px;
  height:640px;
  aspect-ratio:1/1;
}
.animation-topcontent  .ce-intext.ce-right .ce-gallery, 
.animation-topcontent .ce-intext.ce-left .ce-gallery, 
.animation-topcontent .ce-above .ce-gallery,
.animation-topcontent .ce-gallery .ce-column {
  margin-bottom: 0px !important;
}


#animation-one.animation-topcontent {
  width:100% !important;
	max-width:100% !important; 
}

#animation-one {
  top:18%; 
}


#animation-one h1 {
  font-size: 80px;
  position:relative;
  /* top:38%; */
}

#animation-one h5 {
  display:block;
   max-width:980px; 
   margin: 0 auto;
   text-align:center; 
}


#animation-one h2 {
  font-size:24px;
  text-transform:none !important; 
  line-height:140%; 
  display:block;
  max-width:980px; 
  margin: 0 auto;
  text-align:center; 
}



#animation-two,
#animation-three,
#animation-four {

}

#box-two h3,
#box-three h3,
#box-four h3 {
    opacity:50%;
}

#box-two p,
#box-three p,
#box-four p {
    opacity:0%;
}


/*
 #box-four {
    display:none; 
}
*/


#gsap-slider-nav {
   
}


#prev, #next {
  position: absolute;
  margin-top: -200px;
  margin-bottom: 200px;
  z-index: 100;
  cursor: pointer;
}

#prev {
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Icons/circle-arrow-link-left.svg');
  background-size: 60px 60px;
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  float: left;
}

#prev:hover {
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Icons/circle-arrow-link-left-hover.svg');
}

#next {
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Icons/circle-arrow-link-right.svg');
  background-size: 60px 60px;
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  float: right;
}

#next:hover {
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Icons/circle-arrow-link-right-hover.svg');
}



/*@media screen and (max-height: 960px) and (max-width: 1180px) {*/

@media screen and (max-height: 960px) {

  .animation-topcontent {
    width: auto;
    height: 480px;
   }

  .wrap-scrollanim {
    height: 480px;
  }
  
}


@media screen and (max-height: 860px) {

  #animation-one h5 {
    font-size: 20px;
  }
  #animation-one h2 {
    font-size: 20px;
  }


  .animation-topcontent {
    width: auto;
    height: 380px;
   }

  .wrap-scrollanim {
    height: 380px;
  }

}



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

  #animation-one h1 {
    font-size: 68px;
  }
}



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

  .panel .col-nr-1.col-12 {
    flex-direction: column;
  }

  .panel .text-box {
    position: relative;
    max-width: 100%;
    width: 100%;
  }

  .panel .text-box p {
    height: auto;
  }

  .animation-topcontent {
    /*height: 480px; */
    width: auto;
    height:400px;
  }

  .wrap-scrollanim {
    height: 400px;
  }

  #animation-one h1 {
    font-size: 58px;
   /* transform: translateY(80%); */
  }

  #box-one h3,
  #box-two h3,
  #box-three h3,
  #box-four h3 {
    opacity:100%;
  }

  #box-one p,
  #box-two p,
  #box-three p,
  #box-four p {
    opacity:100%;
  }

}


@media screen and (max-width: 767.5px) {
  
  #animation-one h1 {
    font-size:48px;
  }
}

@media screen and (max-width: 575.5px) {
  
  #animation-one h1 {
      font-size: 38px;
    }
}

@media screen and (max-width: 480px) {
  
  .animation-topcontent {
    width: auto;
    height:360px;
  }

  .wrap-scrollanim {
    height: 360px;
  }

  #animation-one h1 {
    font-size: 30px;
  }

  #animation-one h2 {
    font-size: 20px;
    line-height:130%; 
  }
}