body {padding:0;margin:0;}
.breaker-ad-text, hr, picture, figcaption, .image-credit, .pullquote, .body-dropcap, .body-text{max-width:800px; margin: 10px auto !important; display:block;}
h1{font-size:70px; margin:0; padding: 0 15px; font-family: skippy-sharp, sans-serif; font-style: normal; font-weight: 450; text-align: center;}
h2{margin:0; font-family: skippy-sharp, sans-serif; font-style: normal; font-weight: 400; font-size:41px; text-align: center;}

.frame{border: 15px solid #FFD119; z-index: 2; position:relative; background:#fff; padding: 20px;   max-width: 400px; max-height: 400px; overflow: hidden;}
.frame-2{border: 15px solid #F59923; z-index: 2; position:relative; background:#fff; padding: 20px; max-width: 400px; max-height: 400px; overflow: hidden;}
.frame-3{border: 15px solid #97BD35; z-index: 2; position:relative; background:#fff; padding: 20px; max-width: 400px; max-height: 400px; overflow: hidden;}
.frame-4{border: 15px solid #00AFD8; z-index: 2; position:relative; background:#fff; padding: 20px; max-width: 400px; max-height: 400px; overflow: hidden;}
ul.body-text  {list-style: none; width: 150px; margin: 0 auto !important;}
ul.body-text li {width:50px; float:left;}
.anim{-webkit-transform-origin: top center;
transform-origin: bottom center;
-webkit-animation-name: swing;
animation-name: swing;
animation: swing 5000ms infinite;}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

.site-content{   width: 100%;  max-width: 800px; margin: 0 auto;}
section{position: relative;}
.sec-1{background:#FFF5C9;}
.sec-2{background:#FFF1DE;}
.sec-3{background:#F9FFE8;}
.sec-4{background:#F2FDFF;}

.box2 img{max-width:50px; width:100%; display:block;}
.box3 img{max-width:50px; width:100%; display:block;}
.box4 img{max-width:50px; width:100%; display:block;}
.box5 img{max-width:50px; width:100%; display:block;}

.box2 img.l{text-align: left; padding: 50px 20px;}
.box2 img.r{float: right; padding: 50px 20px;}

.box3 img.l{text-align: left; padding: 50px 20px;}
.box3 img.r{float: right; padding: 50px 20px;}

.box4 img.l{text-align: left; padding: 50px 20px;}
.box4 img.r{float: right; padding: 50px 20px;}

.box5 img.l{text-align: left; padding: 50px 20px;}
.box5 img.r{float: right; padding: 50px 20px;}

.box2 {
  padding-top: 20p;
  background-color: #FFF5C9;
  width: 100%;
  max-width: 800px; 
  height: 100vh;
  color: black;
position:absolute;
  font-size: 50px;
  justify-content: center;
  align-items: center;
  color: white;
    left: 0 !important;
  right:0 !important;
z-index: 1;
}

.box3 {
  background-color: #FFF1DE;
  width: 100%;
   max-width: 800px; 
  height: 100vh;
  color: black;
position:absolute;
  font-size: 50px;
  justify-content: center;
  align-items: center;
  color: white;
    left: 0 !important;
  right:0 !important;
z-index: 1;
}

.box4 {
  background-color: #F9FFE8;
  width: 100%;
   max-width: 800px; 
  height: 100vh;
  color: black;
position:absolute;
  font-size: 50px;
  justify-content: center;
  align-items: center;
  color: white;
    left: 0 !important;
  right:0 !important;
z-index: 1;
}

.box5 {
  background-color: #F2FDFF;
  width: 100%;
   max-width: 800px; 
  height: 100vh;
  color: black;
position:absolute;
  font-size: 50px;
  justify-content: center;
  align-items: center;
  color: white;
    left: 0 !important;
  right:0 !important;
z-index: 1;
}
.longform-header-inner{text-align: center;max-width: 400px; height: 400px; margin: -100px auto 0 auto; background-image: url(img/title_bubble.svg); background-size: 100%; background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.longform-header-inner, .body-text{z-index: 999; position:relative;}
.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;}
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;}

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: -30px; position: relative;}

.byline {font-family: futura-pt,sans-serif;font-size: 25px;}
a.text {-webkit-text-fill-color: transparent;-webkit-text-stroke-width: 2px;-webkit-text-stroke-color:#E8568C;background: none;font-size: 150px;font-family: futura-pt,sans-serif;font-weight: bold; }
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:#888; font-weight:bold;}
.photo {
display: block;

z-index: 2;
position: relative;
}

.photo[data-scroll="in"] {

}

.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: 20px; padding: 15px; }
.longform-dek{font-size:23px; padding: 15px;}
.longform-hed{padding: 15px;}
.footer{font-size:15px !important;}
h1{font-size:50px;margin:0; padding: 0 15px;}

.longform-header-inner{max-width: 300px; height: 300px; }

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