body {padding:0;margin:0;}

.site-content{  font-family: futura-pt,sans-serif; max-width:800px; margin: 0 auto;}
.longform-container{margin-top: 230px;}
.header-media{z-index: -1;  position:fixed; width: 100%; max-width: 800px; margin: -20px auto;}
.header-win{position: fixed; top: 0; z-index: 999; width: 100%; max-width: 800px;}

ul {margin: 0 auto; padding: 0; list-style-position: inside;}
ul li {margin: 0 auto; text-align: center; padding: 5px 0; color: #E6007E; font-size: 20px; list-style-position: inside;}

ul li.bold{  font-family: futura-pt-bold,sans-serif !important; list-style: none;}

ul li a{color: #000; }
  .breaker-ad-text, hr, picture, figcaption, .image-credit, .pullquote, .body-dropcap, 
  .body-text{ margin: 10px auto !important; display:block; text-align: center;}
  h1{text-transform: uppercase;font-size:40px;margin:0; font-family: futura-pt-bold,sans-serif; letter-spacing: 4px; line-height: 1.8;}
  
  h1 a{ color: #fff; background:#e6007e; padding: 0 15px;}
	  
  h2{font-family: futura-pt-bold,sans-serif;text-transform: uppercase; 
    margin:10px auto;letter-spacing: 2px;max-width:800px;color:#F2A8BC; font-size:30px; }
h3{color:#E6007E; margin: 15px 0 0 0; font-size:25px; font-family: futura-pt-bold,sans-serif;}
h4{margin: 0; color: #E6007E;}

h3.body-text a{padding: 0 10px; color:#E6007E; margin: 15px 0 0 0; font-size:20px; font-family: futura-pt-bold,sans-serif; text-transform: uppercase; letter-spacing: 3px; -webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.15); 
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.15);}
.body-content {margin-top: 80vh; background: #fff; padding-top: 20px;}

  .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-family: futura-pt,sans-serif; margin: 20px auto; }
  .byline{margin: 12px;}
  a{color:#000;}a:link{color:#000; text-decoration:none;}
  .body-text{line-height: 1.5; letter-spacing: 0.2px; font-size: 23px; font-family:"futura-pt";	}
  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 {   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{}

.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;
}
  
.imgl{display: block; margin: 15px 20px 0 0 !important; float:left; }
.imgl img{max-width:320px; width:100%; height: auto; display: block;}
.imgr{display: block; margin: 15px 0 20px 20px !important; float:right; }
.imgr img{max-width:320px; width:100%; height: auto; display: block; }

.footer{font-size:18px !important;}
.icon { display: inline-block; width: 15px;}
.back{font-family: futura-pt-bold,sans-serif; margin: 0 15px;}
.back a {font-family: futura-pt-bold,sans-serif; padding: 5px 15px; background: #E6007E; color:#fff; letter-spacing: 3px; font-size: 15px;}


.accordion input {
	display: none;
}

.box {
	position: relative;
	background: white;
    transition: all .15s ease-in-out;
	border-radius: 10px;
margin: 30px auto;
overflow: hidden;
display: table;
}
.box-title {
	width: auto;
	color:#fff;
	line-height: 50px;
	padding: 0 20px;
	display: inline-block;
	cursor: pointer;
	background: #e6007e;
	font-family: futura-pt-bold,sans-serif;
	letter-spacing: 3px;
}
.box-content {
	width: 100%;
	padding: 15px 0;
	
	color: rgba(0,0,0,.54);
	display: none;
	text-align : center;
}
.box-close {
	position: absolute;
	height: 50px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}
input:checked + .box {
	height: auto;
	
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(234, 234, 234, 0.32);
}

input:checked + .box .box-content,
input:checked + .box .box-close {
	display: block;
}
.arrows section .box-title {
	padding-left: 60px;
	position: relative;
display: inline-block;
}
.arrows section .box-title:before {
	position: absolute;
	display: block;
	content: '\2261';
	font-size: 18pt;
	left: 0;
	top: 0;
	transition: transform .15s ease-in-out;
	color: rgba(0,0,0,.54);
	color:#fff;
	background: #ba0066;
	width : 50px;
	text-align: center;
}
input:checked + section.box .box-title:before {	content: '\00D7';}
p.body-text{font-family: futura-pt-bold,sans-serif;}

@media only screen and (max-width:600px){
.longform-container{margin-top: 130px;}
	ul { max-width: 85%;}
ul li {font-size: 18px; }

	.body-content {margin-top: 50vh; padding-top: 10px;}
    h2{font-size:25px; }
h1{ margin: 0;}
 p.body-text{line-height: 1.5; letter-spacing: 0.2px; font-size: 20px; padding: 15px; font-family: futura-pt-bold,sans-serif;}
.longform-dek{font-size:23px; padding: 15px;}
.longform-hed{}
.footer{font-size:15px !important;}
 h1{font-size:24px;margin:0}

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