.slider-pro {
    font-family: 'Open Sans', Arial;
}

/* Example 1 */

#example1 .sp-thumbnail {
	width: 100%;
	padding: 8px;
	background-color: #F0F0F0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#example1 .sp-thumbnail-title {
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #333;
}

#example1 .sp-thumbnail-description {
	font-size: 14px;
	color: #333;
}

@media (max-width: 860px) {
	#example1 .hide-medium-screen {
		display: none;
	}
}

@media (max-width: 640px) {
	#example1 .sp-layer {
		font-size: 12px;
	}

	#example1 .hide-small-screen {
		display: none;
	}
}

@media (max-width: 500px) {
	#example1 .sp-thumbnail {
		text-align: center;
	}

	#example1 .sp-thumbnail-title {
		font-size: 12px;
		text-transform: uppercase;
	}

	#example1 .sp-thumbnail-description {
		display: none;
	}
}

/* Example 3 */

#example3 .sp-selected-thumbnail {
	border: 4px solid #000;
}

/* Example 4 */

#example4 .sp-slides-container {
	background-color: #F4F4F4;
}

#example4 h3 {
	margin: 0 0 10px 0;
}

#example4 p {
	margin: 0 0 30px 0;
}

#example4 .sp-thumbnail-container {
	width: 200px;
	height: 130px;
	overflow: hidden;
	margin-bottom: 10px;
}

#example4 .sp-image-text {
	background: rgba( 80, 80, 80, 0.5 );
	color: #FFF;
	padding: 20px;
}

.links {
	text-align: center;
	margin-top: 10px;
}

/* Example 5 */

#example5 .sp-thumbnail-image-container {
	width: 100px;
	height: 80px;
	overflow: hidden;
	float: left;
}

#example5 .sp-thumbnail-image {
	height: 100%;
}

#example5 .sp-thumbnail-text {
	width: 170px;
    float: right;
    padding: 8px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#example5 .sp-thumbnail-title {
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #333;
}

#example5 .sp-thumbnail-description {
	font-size: 14px;
	color: #333;
}

@media (max-width: 500px) {
	#example5 .sp-thumbnail {
		text-align: center;
	}

	#example5 .sp-thumbnail-image-container {
		display: none;
	}

	#example5 .sp-thumbnail-text {
		width: 120px;
	}

	#example5 .sp-thumbnail-title {
		font-size: 12px;
		text-transform: uppercase;
	}

	#example5 .sp-thumbnail-description {
		display: none;
	}
}



.thumbnailpopup{
position: relative;
z-index: 0;
}

.thumbnailpopup:hover{
background-color: transparent;
z-index: 50;
}

.thumbnailpopup span{ /*CSS for enlarged image*/
position: absolute;
background-color: #fefefe;
padding:2px;
left: -300px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnailpopup span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnailpopup:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left:-300px; /*position where enlarged image should offset horizontally */

}
.kolomvideo{width:24%;float:left;margin:2px;position: relative;
		z-index: 1;overflow:hidden;}
.judulvideo{position: absolute;
		bottom:4px;padding:2px 4px;
		z-index: 3;
		  background: rgba(0, 0, 0, 0.8); 
		font-weight:600;
		color: #fff;}
.judulvideo:hover{color:#FF0000; background: rgba(0, 0, 0, 1); }	
.kolomvideo img:hover {transform: scale(2);filter: blur(1px);
  -webkit-filter: blur(1px);}
		
.fullfoto {overflow:hidden;}	
.imgfull img{width:100%;}
.isiberita ol {margin-left:2px;font-weight:600;max-width: 100%;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;}
.isiberita  ol li {margin: 0 0 0.8rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}

.isiberita ol.biasa {margin-left:2px;font-weight:600;max-width: 100%;

  list-style: none;
  padding-left: 40px;}
.isiberita  ol.biasa li {
margin: 0 0 0.8rem 0;
position: relative;
}


.isiberita ol li::before {
  content: counter(my-awesome-counter);
  color: #FFF;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 26px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
 /* transform: rotate(-10deg);*/
  background: #0078b8;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 2px 0 #999;
  }
  
  .isiberita ol.biasa li::before {
    color: #444;     background:none;box-shadow:none; font-size: 1rem;
  }
  .advsbkanan img{width:330px;padding:6px;border:1px solid #ccc;cursor:pointer;}
  .advsbkanan img:hover{transform: scale(1.5); border:none;z-index:999;-webkit-box-shadow: 1px 10px 23px 0px rgba(61,149,237,1);
-moz-box-shadow: 1px 10px 23px 0px rgba(61,149,237,1);
box-shadow: 1px 10px 23px 0px rgba(61,149,237,1);transition: transform .3s;}
.isiberita small {line-height:17px;margin:10px 4px;color:#666;font-weight:600;font-family: 'Titillium Web', sans-serif;display:block;border-bottom:1px dotted #999;font-size:13px;padding-bottom:6px;}
.fotoopini {margin-bottom:15px;}
.fotoopini img {  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);}
  .atan {width:30%;float:left;margin:10px 5px;max-height:244px;display:block;position: relative;
		z-index: 1;
		top: 0px;}
  .atan img {opacity:0.7; -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);}
  .atan img:hover,.atan img:focus{opacity:1; -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
  filter: blur(0px);
      
  }
  
.atan h3  { position:absolute;top: 30%;z-index: 2;color: #333;display:block;font-family: 'Permanent Marker', cursive;width:100%;text-align:center;	}
.atan:hover  h3 {opacity:0;}
.bacajuga {margin:10px;font-weight:600;color:#999;}
.bacajuga a {color:#fe950c;}