body {padding:0;margin:0;}
  .body-text{max-width:740px; margin: 10px auto !important; display:block;}
  h1{font-size:50px;margin:0; font-family: futura-pt,sans-serif; letter-spacing: 2px; font-weight:700;}
   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{text-align: center;max-width: 1200px;margin: 20px 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;}
  span{margin:0; font-family: futura-pt,sans-serif; text-transform: uppercase; color:#EA528E; padding: 0 15px 30px 15px; display:block; font-size: 18px; font-weight: bold;}
  a{color:#000;}a:link{color:#000; text-decoration:none;}
  p.body-text{line-height: 1.5; letter-spacing: 0.2px; font-size: 23px; padding: 15px 0; font-family: futura-pt,sans-serif;	}
  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{font-weight:bold;width: 100%; max-width: 800px; margin: 0 auto; height:auto; position:relative; display:block; background: #25214B; font-family: futura-pt,sans-serif; }

.title img{width: 100%}
ul.baris1
{
position: absolute;
top: 30%;
display: flex;
margin: 0;
padding: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 90%;
}
ul.baris2
{
  position: absolute;
  top: 50%;
  display: flex;
  margin: 0;
  padding: 0;
    left: 0;
right: 0;
margin: 0 auto;
width: 90%;
}
ul.baris1 li
{
font-size: 200px;
  width: 250px;
 height: 240px;
}
ul.baris2 li
{
  font-size:40px;
  width: 100px;
  height: 80px;
}
ul li
{
  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%;
    color: #25214B;
  animation: animate 3s linear infinite;
}



@keyframes animate
{
  0%  { left: -200%; }
  25% {left: 0%; }
  50% {left: 0%; }
    95% {left: 0%;  }
  100% {left: 0%;}
}
ul.baris1 li:nth-child(1):before{ animation-delay: 0s;}
ul.baris1 li:nth-child(2):before{ animation-delay: 0.1s;}
ul.baris1 li:nth-child(3):before{ animation-delay: 0.2s;}


ul.baris2 li:nth-child(1):before{ animation-delay: 0.5s;}
ul.baris2 li:nth-child(2):before{ animation-delay: 0.6s;}
ul.baris2 li:nth-child(3):before{ animation-delay: 0.7s;}
ul.baris2 li:nth-child(4):before{ animation-delay: 0.8s;}
ul.baris2 li:nth-child(5):before{ animation-delay: 0.9s;}
ul.baris2 li:nth-child(6):before{ animation-delay: 1.0s;}
ul.baris2 li:nth-child(7):before{ animation-delay: 1.1s;}
ul.baris2 li:nth-child(8):before{ animation-delay: 1.2s;}




  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.text { }
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; }

.photo {
  display: block;
  opacity: 0;
  -webkit-transition: opacity .35s linear;
  transition: opacity .35s linear;
}

.photo[data-scroll="in"] {
  opacity: 1;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
}
.section-2{}
.footer{font-size:18px !important;}

@media only screen and (max-width:600px){
 p.body-text{line-height: 1.5; letter-spacing: 0.2px; font-size: 18px; padding: 15px; }
  h2{color:#FDCA00; font-size:25px;}


ul.baris1{  top: 32%; left: 0; right: 0; margin: 0 auto; width: 90%; }
ul.baris2{  top: 55%; left: 0; right: 0; margin: 0 auto; width: 80%;}
ul.baris1 li{font-size: 110px;  width: 118px;  height: 140px;}
ul.baris2 li{  width: 40px;  height: 80px; font-size:30px;}


.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:15px !important;}
 h1{font-size:42px;margin:0}
  #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;}}