body {padding:0;margin:0;}
  .body-text{max-width:740px; margin: 0 auto !important; display:block;}

   .ttl{font-size:90px;margin:0; line-height: 0.9; letter-spacing: 10px; font-weight:700;}

  h1{font-size:55px; margin: 10px auto; font-family: futura-pt,sans-serif;  letter-spacing: 4px; font-weight: 600;}
   h2{text-transform: uppercase; margin:10px auto;letter-spacing: 2px;max-width:800px;color:#FDCA00; font-size:30px;  padding:30px 15px 0 15px;}
  .longform-header-inner{max-width: 1200px; margin: 0 auto; }
  .longform-dek{line-height:1.25;color:#C083B4; line-height:1.5; font-size: 30px; font-weight:bold; font-family: futura-pt,sans-serif; margin: 20px auto; }
  .byline{margin: 12px;}.byline b{font-weight: 600;}
  span{margin:0; font-family: futura-pt,sans-serif; text-transform: uppercase; color:#EA528E;  display:block; font-size: 25px; font-weight: 700; letter-spacing: 2px;}
  a{color:#000;}a:link{color:#000; text-decoration:none;}
  p.body-text{line-height: 1.5; letter-spacing: 0.2px; font-size: 22px; padding: 10px 0; font-family: futura-pt,sans-serif; }
  p.body-text b{letter-spacing: 1.2px; color: #334f5a !important; padding: 20px 0 5px 0; font-family: futura-pt,sans-serif; font-weight: 600; }
  p.body-akreditasi{line-height: 1.5; letter-spacing: 0px; font-size: 13px; font-family: futura-pt,sans-serif; text-align:center; margin-bottom:30px;}
  p.body-dropcap{line-height: 1.5; letter-spacing: 0.2px; font-size: 20px; padding: 15px 0; font-weight:bold;}
  figcaption{line-height: 1.5; letter-spacing: 0.2px; font-size: 15px; padding: 20px 0; color:#999; text-align:center;}

.title{width: 100%; max-width: 800px; margin: 0 auto; height:auto; position:relative; display:block; z-index:998; left: 0; right: 0;}

p.text-first:first-child::first-letter{  color:#334f5a;  font-weight: normal;  float: left;  font-size: 4em;  line-height: .75;  letter-spacing: .15em;  margin-top: .1em;}
.text-first{line-height: 1.6; letter-spacing: 0.2px; font-size: 20px;}

.title img{width: 100%}
.imgh{display:block;}.imghm{display:none;}

b {  font-weight: 500;}
hr{
margin: 25px auto 40px auto;
background: #53425D33;
height: 3px;
border: 0;}
ul li{list-style: none; padding:0;}
  .slider {
  position:relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
   }
     ul.slider .photo{ margin-top: -30px;   }
video{margin:0 auto; display: block; width: 100%; max-width: 800px;}
.slider li {
  top:0;
  left:0;
  right: 0;
  text-align: center;

}

#viewport {
  overflow: hidden;
}

.draggable {max-width: 800px; margin: 0 auto;}

.draggable img{width:100%; }

.slider li img{width: 100%;}
h1 span{ font-size: 25px; padding: 0; padding: 0 0 5px 0;}
a.text {}
h1{line-height: 1;}
span{color:#EF4626;  font-family: futura-pt,sans-serif;}
h2{margin:0; font-family: futura-pt,sans-serif; font-weight:800;}
a:link{color: #009791;}
.title{ letter-spacing: 1.8px; font-family: futura-pt,sans-serif; }
p.head{font-size: 25px; font-family: futura-pt,sans-serif; font-weight: 600; color: #155BAA;}
ul.baris3 li{color: #E8568C !important;}
.btn {
    background: #FDCA004D 0% 0% no-repeat padding-box;
    border: 1px solid #25214B;
    opacity: 1;
    color: #25214B;
    text-align: center;
    font-family: futura-pt-bold,sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 15px;
    margin: 15px 0 20px !important;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
}
hr{max-width: 750px;}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul.slider li{height: auto !important;}

.video-bg-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
  max-height: 500px;
  max-width: 800px;
  margin: 0 auto;
}
.video-bg-player, .video-bg-overlay,
.video-bg iframe {position: absolute;}
.video-bg-player,
.video-bg iframe {
  pointer-events: none;
}
.video-bg-player {
  top: 50%;
  left: 50%;
  width: 120%;
  height: 0;
  padding-bottom: 66.25%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.video-bg-overlay,
.video-bg iframe {
  width: 100%;
  height: 100%;
}
.video-bg-overlay {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.video-bg-overlay--fadeOut {
  visibility: hidden;
  opacity: 0;
}
.video-bg iframe {
  top: 0;
  left: 0;
}

ul{position: relative;  display: flex;  margin: 0;  padding: 0;  left: 0; right: 0; margin: 0 auto; width: 100%;}
ul.baris1{bottom: 5%; }
ul.baris2{ bottom: -5%; color:#fff; }
ul.baris3{  bottom: -15%;     color: #DC9491;}

ul li{ width: 100%;   position: relative;  list-style: none;  box-sizing: border-box;  text-align: center;
  overflow: hidden;}
ul li:before
{
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  animation: animate 3s linear ;
}
@keyframes animate
{
  0%  { top: -200%; }
  25% {top: 0%; }
  50% {top: 0%; }
  95% {top: 0%; }
  100% {top: 0%;}
}
ul.baris1 li:nth-child(1):before{ animation-delay: 0.4s;}
ul.baris2 li:nth-child(1):before{ animation-delay: 0.5s;}
ul.baris3 li:nth-child(1):before{ animation-delay: 0.6s;}

hr{
margin: 25px 25px 40px 25px;
background: #53425D33;
height: 3px;
border: 0;}
blockquote {  font-size: 23px; text-align:center;}
blockquote q {  font-style: italic;  letter-spacing: .1rem;}
q {  quotes: "“" "”" "‘" "’";}
q:before {  position:relative; }
q:after {  content: close-quote; }
q:before, q:after {  color: #ccc;  font-size: 4rem; position: absolute;}
.longform-hed p{margin:0; top: 0px; position: relative; color: #25214B}
.longform-hed .text{font-size: 65px;}
.byline {font-family: futura-pt,sans-serif;}
a.r{ margin-right: -25px; position: relative; }
a.a{ margin-right: -30px; top: 5px; position: relative; }
a.i{ margin-right: -20px; top: 20px; position: relative;}
a.s{ margin-right: -25px; top: -10px; position: relative;}
a.sa{top: 5px; position: relative;}

.arrow{display: block; width: 100%; max-width:800px; margin: 0 auto;}
.arrow button{padding:15px; background:none; border:0; }
.arrow button a{color:#000; font-family: futura-pt,sans-serif; display:block;}

.photo {
  
  opacity: 0;
  -webkit-transition: opacity .35s linear;
  transition: opacity .35s linear;
  margin:0 auto;
  color: #6B6B6B;
  font-size: 12px;
  max-width: 800px;
}
.rl{margin: 0 auto;}
.df { display: flex;
}

.df img{
width: 50% !important;
    display: inline-block !important;
	height: 100%;
}
.photo a{ padding: 5px 0px ; max-width: 740px; font-family: futura-pt,sans-serif; color: #888; display: block; margin:0 auto;}
.photo b{ color: #6B6B6B}
.photo[data-scroll="in"] {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.section-2{}
.footer{font-size:15px !important; text-align: center;}

@media only screen and (max-width:600px){
 p.body-text{line-height: 1.5; letter-spacing: 0.2px; padding: 10px 15px; font-size: 20px;}
 p.head{font-size: 22px;}
  h2{color:#FDCA00; font-size:25px;}
 .text-first{font-size: 16px;}
.df { display: block;}
.df img{
width: 100% !important;
}
.imgh{display:none;}.imghm{display:block;}
.photo a{ padding: 5px 15px ;}
ul li{ width: 100%;   }
.slider { height: auto; }
.longform-dek{font-size:23px; padding: 15px;}
.longform-hed{padding: 15px;}
.longform-hed a{font-size: 30px;}
  .longform-hed .text{font-size: 40px;}
.footer{font-size:13px !important;}
 h1{font-size:40px;}
  #slider {  height: 750px;}
 .imgl img{margin: 0; max-width:100%; width:100%; float:none; }
.imgr img{ max-width:100%; width:100%; margin: 0; float:none; }
.imgl{display: block; margin: 0 !important; float:none; }
.imgr{display: block; margin: 0 !important; float:none; }
}
@media only screen and (max-width:500px){#slider {  height: 600px;}}
@media only screen and (max-width:415px){#slider {  height: 520px;}}
@media only screen and (max-width:360px){#slider {  height: 450px;}}