/*
 * Author: Encik Sepi
 * Project name: Saji.my
 * URL: http://saji.my
 * Version: 1.0
 */

/* General */ 

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i");

@import url('https://fonts.googleapis.com/css?family=Caveat:400,700');

body {
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 70px;
}

.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}
.pt60 {padding-top: 60px;}
.pt70 {padding-top: 70px;}
.pt80 {padding-top: 80px;}
.pt90 {padding-top: 90px;}
.pt100 {padding-top: 100px;}
.pt120 {padding-top: 120px;}
.pt150 {padding-top: 150px;}
.pt180 {padding-top: 180px;}

.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb60 {padding-bottom: 60px;}
.pb70 {padding-bottom: 70px;}
.pb80 {padding-bottom: 80px;}
.pb90 {padding-bottom: 90px;}
.pb100 {padding-bottom: 100px;}
.pb120 {padding-bottom: 120px;}

.mt-100 {margin-top: -100px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}
.mt100 {margin-top: 100px;}
.mt150 {margin-top: 150px;}
.mt200 {margin-top: 200px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.mb100 {margin-bottom: 100px;}
.mb150 {margin-bottom: 150px;}
.mb200 {margin-bottom: 200px;}

.ml25 {margin-left: 25px;}

.brand-bg { background: url('../../assets/images/branding-1.png') left bottom no-repeat; margin-bottom: -100px; padding-bottom: 250px !important;}

/* Navigation */

.navi .hr {position: absolute; top:66px; height: 1px; width: 100%; margin-left: -16px;}

.navi {
  padding:6px 16px; 
  background-color: #fff;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 2;
  box-shadow: -5px 0 29px 6px rgba(0,0,0,.05);
}

.nav-up {
    top: -67px;
}

.navi .navbar-brand, .navi .navbar-brand a {
  color:#f10001; 
  text-transform: uppercase; 
  font-size: 24px;
  line-height: 48px;
  letter-spacing: 1.6px;
  font-weight: 700;
}

.navi .navbar-brand img {margin-right: 8px; margin-top: 14px; margin-left: 16px; height: 24px;}

.navi button {
  outline: none !important;
}

.navi .nav-link {
  padding-left: 0 !important; 
  padding-right: 0 !important; 
  margin-right: 1rem; 
  margin-left: 1rem;
}

.navi ul li {font-size: 16px; letter-spacing: 1px; font-weight: 600;}

.navi ul li a.active {
  color: #999; 
}

.navi ul li a {
  text-transform: uppercase;
  color: #000;  
  line-height: 10px;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
  outline: 0;
}

.navi ul li a:hover {
  color: #f10001;
}

.navi svg {
  fill: #000;
  width: 18px;
  margin-right: 8px;
  margin-top: -4px;
  vertical-align: middle;
  font-weight: bold;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

.navi svg:hover {fill: #f10001;}

.navi .dropdown-menu {
  border-radius: 0;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  padding: 8px 24px 8px 8px;
  margin-top: 8px;
  min-width: 360px;
  width: 100%;
}

.navi .dropdown-menu a {padding: 16px 24px; font-size: 14px; font-weight: 600;}

.navi .dropdown-menu a:hover {background-color: #faf9f8;}

@media (max-width:760px) { 
  .navi .navbar-collapse {
    height: 100%; overflow: scroll;
    margin: 0px -16px 400px;
    transition: height .2s;
  }
  .navi .navbar-collapse.collapsing {
    height: -2px !important;
  }
  .navi {
    padding: 0px 16px;
  }
  .navi .nav-link {
    margin:8px 0;
  }
  .navi ul { 
    padding:0px 16px 80px;
  }
  .navi .navbar-brand img {height: 18px; margin-top: 18px; margin-left: 8px;}
  #navbars-drop {height: 100vh; overflow: auto; max-height: none;}
  .navi ul li {border-bottom: 1px solid #eee; padding: 8px 16px; margin: 0 -16px; font-size: 16px;}
  .navi .dropdown-menu {left: auto; right: auto; transform: translate(0, 0); border: 0; background-color: #faf9f8;}
  .navi .dropdown-menu a {font-size: 14px;}
  .navi .carian {position: absolute; right: 48px; top: 19px;}
  .navi svg {fill: #B6B6B6; width: 17px;}
  .navi svg:hover {fill: #B6B6B6;}
  .navi .navbar-brand, .navi .navbar-brand a {font-size: 20px;}
  .navi .navbar-toggler {padding-right: 0;}
  .navi .hr {top:58px;}
}

/* Search Form */

#searchbox {background-color: #fff; position: absolute; top:66px; left: 16px; width: 100%; margin-left: -16px; padding: 0px 16px; border-top:1px solid #eee; border-bottom: 1px solid #eee; max-height: none;}

#searchbox .input-group {padding: 4px 0;}

#searchbox .input-group .form-control {border: 0; box-shadow: none; height: 48px; padding-left: 0; font-size: 18px; color: #999;}

#searchbox .btn-cari {margin-top: 4px; margin-right: 24px; padding: 6px 32px; border-radius: 0px; background-color: #f10001; color: #fff; font-weight: 700; text-transform: uppercase;}

@media (max-width:1024px) { 
  #searchbox {top:65.5px;}
}

@media (max-width:760px) { 
  #searchbox {top:58px; padding: 0;}
  #searchbox .btn-t {margin-right: 0;}
  .navi .hr {border-bottom: 1px solid #eee;}
}

@media (max-width:425px) { 
  #searchbox .input-group .form-control {font-size: 16px;}
}

/* Navbar Collapse */

.icon-bar {
  width: 22px; 
  height: 2px;
  background-color: #B6B6B6;
  display: block;
  transition: all 0.3s;
  margin-top: 4px
}
 
.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

/* Location */

#lokasi-top { background: #f6f1ee url('../../assets/images/lokasi-top.jpg') no-repeat center center; -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  height: 346px;
}

#lokasi-buffer-top {}

#lokasi {background-color: #f6f1ee ;padding: 96px 16px 0px; position: relative; 
background:#f6f1ee url('../../assets/images/map.png') repeat-x center 70%;}

#lokasi-buffer-bottom { height: 160px; 
  transform:skew(0deg,2deg);
-ms-transform:skew(0deg,2deg); /* IE 9 */
-webkit-transform:skew(0deg,2deg); /* Safari and Chrome */
top: -100px; z-index: -1; position: relative; margin-bottom: -80px;
background-color: #f6f1ee
}

#lokasi-title h1 {font-family: 'Caveat', cursive; font-weight: bold; font-size: 64px; text-align: center;}

#lokasi-title .after {
  /*Font*/
  font-family: 'Caveat', cursive;
  font-size: 56px;
  font-weight: 500;
  color: #ffda00;
  margin-top: -32px;
  text-align: center;
}

#pilih-lokasi ul {list-style: none; padding: 0; margin: 0;}

#pilih-lokasi ul li {padding-bottom: 16px;}

#pilih-lokasi ul li a {color: #333; font-size: 17px; letter-spacing: 0.5px; font-weight: 500;}

#pilih-lokasi ul li a:hover {color:#f10001; text-decoration: none; border-bottom: 2px solid #f10001;}

#lokasi-title i {font-size: 32px; color: #f10001; margin-left: 8px;}

#lokasi-title a {color: #000;}

#lokasi-title a {text-decoration: none;}

#lokasi .collapse {display: block;}

@media (max-width:425px) { 
  #lokasi {padding: 40px 16px 8px;}
  #lokasi-title h1 {font-family: 'Caveat', cursive; font-weight: bold; font-size: 40px; text-align: center;}
  #lokasi .collapse {display: none;}
  #lokasi .collapse.show {display: block;}
  #lokasi-buffer-bottom {height: 0px;margin-bottom: 16px;}
}



/* Featured Post */

#featured .featured-box {height: 480px; 
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#featured .featured-box .tint {height: 100%; width: 100%;
  background:linear-gradient(0deg, #000, transparent 70%) bottom;}

#featured .featured-box .tint:hover {background:linear-gradient(0deg, #000, transparent 30%) bottom;}

#featured .feed {padding:24px 40px 16px; position: absolute; bottom: 32px}

#featured .feed h1 {font-size: 38px; line-height: 48px; color: #fff; font-weight: 600; font-family: 'Caveat', cursive; margin-top:8px;}

#featured .feed .author {color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 12.5px; text-transform: uppercase; background-color: #f10001; padding: 4px 10px;}

#featured .feed .tempat {color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 12.5px; text-transform: uppercase; background-color: #f10001; padding: 4px 10px; display: inline-block;}

#featured a {color: #fff;}

#featured a:hover {color: #ffda00; text-decoration: none;}

@media (max-width:425px) { 
  #featured {margin-top: -32px;}
  #featured .featured-box {height: 260px;}
  #featured .feed {padding: 24px 16px 16px; bottom: 10px;}
  #featured .feed h1 {font-size: 30px; line-height: 40px; }
}


/* Content Section */

#content {padding: 80px 16px;}

#content .title-section {margin-bottom: 8px;}

#content .title-section h1 {font-family: 'Caveat', cursive; font-size: 36px; font-weight: 500;}

#content .title-section .after{
  font-family: 'Caveat', cursive;
  font-size: 40px;
  font-weight: 500;
  color: #ffda00;
  margin-top: -24px;
}

#content .article-post {border-bottom: 1px solid #eee; padding:56px 24px;}

#content .article-post .article-image {
  height: 200px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex; align-items: center; justify-content: center;
}

#content .article-post .article-image:hover {opacity: 0.9;}

#content .article-post .feed h1 {font-family: 'Caveat', cursive; font-size: 36px; line-height: 48px; font-weight: 600; margin-top: 16px;}

#content .article-post .feed .excerpt {font-size: 18px; color: #666;}

#content .article-post .feed .author {font-size: 12px; letter-spacing: 1px; color: #999; text-transform: uppercase; margin-top: 16px;}

#content .article-post .feed .author a {color:#999; }

#content .article-post .feed .categories {color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 12.5px; text-transform: uppercase; background-color: #f10001; padding: 4px 10px;}

#content .article-post .feed .categories a {color: #fff;}

#content .article-post .feed .categories a:hover {color: #ffda00;}

#content .article-post .feed a {color: #000;}

#content .article-post .feed a:hover {color:#f10001; text-decoration: none;}

#content .btn-s { margin-top: 72px; font-size: 24px; font-weight: 600; border-radius: 0;}

@media (max-width:425px) { 
  #content {padding: 48px 0px;}
  #content .article-post {padding: 24px 0;}
  #content .article-post .feed h1 {font-size: 26px; line-height: 36px; font-weight: 600; margin-top: 16px;}
  #content .article-post .article-image {height: 160px;}
  #content .article-post .article-image {margin-bottom: -25px;}
}

/* Sidebar */

#content .sidebar {background-color: #fff; padding: 32px 0;}

#content .sides {text-align: center;}

#content .sides h1 {font-size: 26px !important;}



/* Button Lagi */

.btn-s {color: #000; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 12px; line-height: 24px; background: linear-gradient( #fff 60%, #ffda00 20%); border: 0;}

.btn-s:hover {background: #ffda00;} 

.btn-s:focus, .btn-t:active, .btn-t.active, .btn-t:focus:active {
  background-image: none;
  
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

@media (max-width:425px) { 
  #content .btn-s  {font-size: 20px; margin-top: 48px;}
}

/* Video Section */

#video {padding: 80px 16px 88px; background-color: #ffda00; border-top:40px solid #f10001; border-right:16px solid #f10001; }

#video .title-section {margin-bottom: 24px;}

#video .title-section h1 {font-family: 'Caveat', cursive; font-size: 36px; font-weight: 500;}

#video .title-section .after{
  font-family: 'Caveat', cursive;
  font-size: 40px;
  font-weight: 500;
  color: #f10001;
  margin-top: -24px;
}

#video .video-post .video-image {
  height: 200px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex; align-items: center; justify-content: center;
}

#video .video-post .feed h1 {font-family: 'Caveat', cursive; font-size: 28px; margin-top: 16px; font-weight: 600;}

#video a {color: #000;}

#video a:hover {text-decoration: none;}

.video-icon {background-color: #f10001; border-radius: 50%; height: 56px; width: 56px; text-align: center; transition: all .2s ease-in-out;}

.video-icon i {color: #fff; font-size: 20px; line-height: 58px; margin-left: 5px;}

#video .video-post:hover .video-icon {transform: scale(1.1);}

#video .video-post:hover h1 {color: #f10001;}

#video .btn-s { margin-top: 40px; font-size: 24px; font-weight: 600; background: linear-gradient( #ffda00 60%, #f10001 20%); border-radius: 0;}

#video .btn-s:hover {background: #f10001; color: #fff;}

@media (max-width:768px) { 
  #video .video-post {margin-bottom: 40px;}
}

@media (max-width:425px) { 
  #video {padding: 80px 0px 88px;}
  #video .video-post .video-image {height: 160px;}
  #video .video-post .feed h1 {font-size: 26px;}
}

/* Senarai Top */

#senarai-top {padding: 80px 16px 88px; background-color: #f6f1ee;}

#senarai-top h1 {font-family: 'Caveat', cursive; font-size: 32px; font-weight: 500; margin-top: 0;}

#senarai-top .after{
  font-family: 'Caveat', cursive;
  font-size: 40px;
  font-weight: 500;
  color: #ffda00;
  margin-top: -24px;
}

#senarai-top ul {list-style: none; margin: 0; padding: 0;}

#senarai-top ul li {padding-bottom: 6px; font-size: 18px;}

#senarai-top ul li a {color: #000;}

#senarai-top ul li a:hover {text-decoration: none; color: #f10001;}

@media (max-width:425px) { 
  #senarai-top ul {margin-bottom: 40px;}
  #senarai-top {padding: 40px 16px;}
}


/* Subscribe v2 */

#subscribes {background-color: #f10001; padding: 48px 0 8px; margin-top: 100px;}

#subscribes h1 {font-family: 'Caveat', cursive; font-size: 56px; font-weight: 600; color: #fff; text-align: right;}

#subscribes .form-control {
  height: 56px;
  border: 0px solid #f10001;
  background-color: #f10001;
  border-bottom: 6px solid #fff;
  padding-left: 24px;
   border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  font-size: 24px;
}

#subscribes .form-control:focus {
  border-color: #f10001; 
  border-bottom: 6px solid #ffda00;
  box-shadow: none;
  outline: 0;
  background-color: #f10001;
  border-right: 0;
}

#subscribes .form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
#subscribes .form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
#subscribes .form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
#subscribes .form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
#subscribes .form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

#subscribes .btn-t {
  height: 56px; padding: 0 48px 0 40px; 
  position: static;
  z-index: 1;
  background-color: #ffda00;
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600;
  font-size: 18px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
}

@media (max-width:768px) { 
  #subscribes h1 {text-align: center; margin-bottom: 32px;}
}

@media (max-width:425px) { 
  #subscribes h1 {font-size: 32px;}
  #subscribes .form-control {font-size: 18px; height: 48px;}
  #subscribes .btn-t {font-size: 16px; height: 48px;}
}


/* Footer */

#footer {background-color: #000; padding: 32px 16px 16px; text-align: center; margin-bottom: -30px;}

#footer .social-media ul {}

#footer .social-media ul li {font-size: 32px; padding: 8px 16px;}

#footer .social-media ul li a {color: #ccc;}

#footer .social-media ul li a:hover {color:#ffda00; }

#footer .pautan ul {}

#footer .pautan ul li {font-size: 16px; padding: 0px 4px; font-weight: 600;}

#footer .pautan ul li a {color: #ccc;}

#footer .pautan ul li a:hover {color:#ffda00;}

#footer p {font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: #ccc;}

#footer .bidadari a {color: #ff749d;}

#footer .ilabur a {color: #00a2ea;}


@media (max-width:425px) { 
  #footer .pautan ul li {padding-bottom: 8px;}
}

/* Single Page Article */

#single-article {}

#single-article .featured-image {min-height: 320px; 
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#single-article .featured-image .tint {min-height: 320px; width: 100%;
  background:rgba(0, 0, 0, 0.3);}

#single-article .double-tint {background:linear-gradient(0deg, #000, transparent 70%) bottom; min-height: 320px; width: 100%;} 

#single-article .feed {text-align: center; padding: 48px 40px 56px; width: 100%; margin-top: 60px;}

#single-article .feed h1 {font-size: 64px; color: #fff; font-weight: 600; font-family: 'Caveat', cursive; margin-top: 16px;}

#single-article .feed .categories {color: #fff; background-color: #f10001; display: inline-block; padding: 6px 16px; font-weight: 800; letter-spacing: 2px; font-size: 12.5px; text-transform: uppercase;}

#single-article .feed .categories a {color: #fff;}

#single-article .feed .categories a:hover {color: #ffda00;}

#single-article .feed a:hover {text-decoration: none;}

#single-article .feed .author {color: #ccc; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-top: 24px;}

#single-article .feed .author a {color: #ccc;}

#single-article .feed .after{
  font-family: 'Caveat', cursive;
  font-size: 56px;
  font-weight: 500;
  color: #ffda00;
}

#single-article .feed .cat-desc {color: #ddd; font-size: 16px;}

@media (max-width:425px) { 
 #single-article {margin-top: -32px;}
 #single-article .feed {padding: 24px 16px 16px;}
 #single-article .feed h1 {font-size: 40px;}
 #single-article .feed .author {font-size: 12px; line-height: 24px;}
 #single-article .feed .cat-desc {font-size: 14px;}
}


/* Single Content */

#single-article .konten {padding: 64px 0px;}

#single-article .konten p {font-size: 21px; line-height: 34px; padding-bottom: 8px; }

#single-article .konten ol {padding-bottom: 8px;}

#single-article .konten ol li {font-size: 21px; line-height: 34px; padding-bottom: 4px; }

#single-article .konten ul {padding-bottom: 8px; list-style: none;}

#single-article .konten ul li {font-size: 21px; line-height: 34px; padding-bottom: 4px; }

#single-article .konten ul li::before {
  content: "• ";
  color: #f10001; /* or whatever color you prefer */
  font-size: 32px;
  padding-right: 8px;
}

#single-article .konten h2 {font-size: 40px; color: #000; font-weight: 600; font-family: 'Caveat', cursive; margin-top: 48px; margin-bottom: 32px;}

#single-article .konten h3 {font-size: 32px; color: #000; font-weight: 600; font-family: 'Caveat', cursive; margin-top: 48px; margin-bottom: 24px;}

#single-article .konten img {margin-top: 24px; margin-bottom:40px;}

#single-article .konten .wp-caption img {margin-top: 24px; margin-bottom:40px;}

#single-article .konten .wp-caption-text {font-size: 15px; margin-top: -36px; color: #999; letter-spacing: 1px;}

#single-article .konten a {color: #f10001; padding-bottom: 2px; border-bottom: 2px solid #ffda00;}

#single-article .konten a:hover {text-decoration: none; color:#ffda00; }

#single-article .konten blockquote {font-family: 'Caveat', cursive; font-size: 36px; letter-spacing: 0.5px; line-height: 46px; color: #333; display:block; position: relative; padding: 48px 24px 24px 64px; margin-top: 88px; margin-bottom: 72px; margin-left: -64px; background-color: #ffda00; border-bottom: 16px solid #f10001;}

#single-article .konten blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: 'Caveat', cursive;
  font-size: 200px;
  font-weight: 700;
  color: #f10001;
  
  /*Positioning*/
  position: absolute;
  left: 0px;
  top:5px;
}

#single-article .konten blockquote::after{
  /*Reset to make sure*/
  content: "";
}

#single-article .konten blockquote small {display: block; margin-top: 24px; letter-spacing: 1px; font-size: 75%;}

#single-article .konten blockquote small::before {content: "—"; margin-right: 8px;}

#single-article .konten blockquote small::after{
  /*Reset to make sure*/
  content: "";
}

@media (max-width:425px) { 
 #single-article .konten p {font-size: 18px; line-height: 28px;}
 #single-article .konten ul {padding-left: 0;}
 #single-article .konten ul li {font-size: 18px; line-height: 28px;}
 #single-article .konten ul li::before {font-size: 24px;}
 #single-article .konten ol li {font-size: 18px; line-height: 28px;}
 #single-article .konten blockquote {margin-left: 0; padding: 48px 24px 24px; font-size: 26px; line-height: 36px; margin-bottom: 48px;}
 #single-article .konten h2 {font-size: 32px;}
 #single-article .konten h3 {font-size: 24px;}
}

/* Social Share */

#single-article .social-share {text-align: center; margin-bottom: 32px; }

#single-article .social-share h1 {font-family: 'Caveat', cursive; font-size: 32px;}

#single-article .after{
  font-family: 'Caveat', cursive;
  font-size: 40px;
  font-weight: 500;
  color: #ffda00;
  margin-top: -24px;
}

#single-article .social-share .fb {background-color: #3b5796; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .twitter {background-color: #55aded; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .link {background-color: #ffe102; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .gplus {background-color: #dd4b39; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .wasap {background-color: #0ae06e; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .telegram {background-color: #0779b8; color: #fff; padding: 16px 0; font-size: 24px;}

#single-article .social-share .emel {background-color: #e23f5c; color: #fff; padding: 16px 0; font-size: 24px;}

@media (max-width:425px) { 
 #single-article .social-share .fb, #single-article .social-share .twitter, #single-article .social-share .link, #single-article .social-share .wasap, #single-article .social-share .telegram, #single-article .social-share .emel {margin-bottom: 16px;}
}

/* Author Box */

#single-article .author-box {background-color: #f6f1ee; padding: 40px; text-align: center;}

#single-article .author-box h1 {font-size: 24px; font-weight: 600; margin-bottom: 16px;}

#single-article .author-box h1 a {color: #000; text-decoration: none;}

#single-article .author-box h1 a:hover {color:#ffda00; }

#single-article .author-box p {font-size: 17px;}

#single-article .author-box ul {margin-bottom: 0;}

#single-article .author-box i {font-size: 24px; padding-right: 8px;}

#single-article .author-box a i {color: #333;}

#single-article .author-box a i:hover {color: #ffda00;}

#single-article .author-box p a {color: #f10001; border-bottom: 1px solid #ffda00; }

#single-article .author-box p a:hover {text-decoration: none; color: #ffda00;}

#single-article .author-box img {height: 100px; border-radius: 50%; margin-bottom: 16px;}

@media (max-width:425px) { 
  #single-article .author-box h1 {font-size: 22px;}
 #single-article .author-box p {font-size: 16px;}
}

/* Sampaikan */

.sampaikan {margin: 70px 0 0px;}

.sampaikan::before {
    content: "\201C";
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: #eee;
    position: absolute;
    left: 47%;
    top: 0px;}

.sampaikan p {font-size: 17px; line-height: 36px; letter-spacing: 0.6px; color: #7f7f7f; font-style: italic; }

.sampaikan p .u { border-bottom: 1px solid #ffda00; padding-bottom: 2px;}  

@media (max-width:425px) { 
  .sampaikan {margin: 60px 0 0px;}
.sampaikan p {font-size: 16px; line-height: 28px;}
.sampaikan::before {left: 45%; top: -10px;}
}


/* Komen Box */

#single-article .komen-box {background-color: #eee; padding: 40px 0; margin-bottom: 40px; margin-top: 40px;}

#single-article .komen-box h1 {font-family: 'Caveat', cursive; font-size: 32px;}

@media (max-width:425px) { 
  #single-article .komen-box {padding: 40px 16px;}
}

/* Sidebar */

#single-article .sidebar {text-align: center; padding: 56px 0;}


/* Video Single Page */

#single-article .video-placement {background-color: #000;}

/*.video-container {
    position: relative;
    width: 100%;
    height: 56.25%; 
    background-color: #2a2926;
}

.video-container {
    position: relative;
    width: 100%;
    height: 520px; 
    background-color: #2a2926;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2a2926;
}*/

.video-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
    height: 0;
    display: block;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#single-article .video-container .fvp-onload {height: 0;}

@media (max-width:425px) { 
  #single-article .video-placement .container {padding-right: 0; padding-left: 0;}
  .video-container {height: 380px;}
}

/* Video Page */

.video-hack .video-post {margin-bottom: 48px;}


/* Page Section*/

#page #subscribes {border-bottom: 40px solid #f10001;}

#page #single-article .featured-image {}

@media (max-width:425px) { 
  #page #single-article .featured-image, #page #single-article .double-tint, #page #single-article .tint {min-height: 240px;}
}

/* Hack */

.subscribes-backup {border-bottom:16px solid #f10001;}

.video-saji {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.video-saji:before {
    content: "";
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    display: block;
    overflow: hidden;
}

.video-saji iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Wavy Dash */

#wavy-y {margin-right: auto; margin-left: auto; height: 24px; background: url('../../assets/images/wavy-yellow.svg') bottom repeat-x; margin-bottom: 32px;}

#wavy-r {margin-right: auto; margin-left: auto; height: 20px; background: url('../../assets/images/wavy-red.svg') bottom repeat-x; margin-bottom: 32px;}

#wavy-b {margin-right: auto; margin-left: auto; height: 20px; background: url('../../assets/images/wavy.svg') bottom repeat-x; margin-bottom: 32px;}

#wavy-senarai { height: 24px; background: url('../../assets/images/wavy-yellow.svg') bottom repeat-x; margin-bottom: 32px;}

.wavy-80 {width: 80px;}
.wavy-120 {width: 120px;}
.wavy-180 {width: 180px;}