/* Add here all your CSS customizations */

/*box head news*/



.box-item {

    float: left;

    opacity: 1;

    overflow: hidden;

    position: relative;

}



.box-item img {

    width: 100%;

}

.box-item a {color:#FFF;}



.box-item .box-post span.meta {

    font-family:  sans-serif;

    font-size: 12px;

    color: #fff;

    margin-top: 15px;

    display: block;

}



.box-item .box-post span.meta span {

    margin-right: 15px;

}



.box-item .box-post {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    background:rgba(0,0,0,0.6);

    padding: 30px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.box-item .box-post h1.post-title {  

   margin-bottom:10px;

}



.row.display-flex {

  display: flex;

  flex-wrap: wrap;

}

.row.display-flex > [class*='col-'] {

  display: flex;

  flex-direction: column;

}



/*

* Box depan

*/

.custom-thumb-info-4 {

	border: none;

	padding-bottom: 10px;

	overflow: initial;

    max-width:100%;     

}



.custom-thumb-info-4:hover .thumb-info-wrapper:before {

	background: rgba(0, 0, 0, 0.25);

}

.custom-thumb-info-4:hover .thumb-info-wrapper:after {

	top: 50%;

	opacity: 1;

}

.custom-thumb-info-4 a {

	cursor: pointer;

}

.custom-thumb-info-4 .thumb-info-wrapper:before {

	-webkit-transition: background 0.2s;

	-moz-transition: background 0.2s;

	transition: background 0.2s;

	background: transparent;

	content: "";

	display: block;

	position: absolute;

	left: 0;

	top: 0;

	bottom: 0;

	right: 0;

	z-index: 2;

}

.custom-thumb-info-4 .thumb-info-wrapper:after {

	-webkit-transition: top 0.2s, opacity 0.2s;

	-moz-transition: top 0.2s, opacity 0.2s;

	transition: top 0.2s, opacity 0.2s;

	background: transparent;

	color: #FFF;

	font-size: 30px;

	height: 30px;

	position: absolute;

	top: 30%;

	margin-top: -15px;

	display: block;

	text-align: center;

	width: 100%;

	opacity: 0;

	z-index: 3;

}

.custom-thumb-info-4 .thumb-info-wrapper.active {

	box-shadow: 0px 0px 60px -3px #8b8b8b;

}

.custom-thumb-info-4 .thumb-info-caption {

	position: relative;

	display: block;

	width: 90%;

	margin: -37px auto 0;

	padding: 5px;

	background: #FFF;

	z-index: 1;

    border-bottom : 1px solid #d2322d;

}

.custom-thumb-info-4 .thumb-info-caption .thumb-info-caption-text {

	padding: 0;

}

.custom-thumb-info-4 .thumb-info-caption h4 {

	margin: 0;

	line-height: 1.5;

}









<style>

   div{

     width: 80px;

     height: 80px;

     float: left;

     margin: 20px;

     text-align: center;

   }

   .satu {

    border: 2px solid black; }

   .dua { border: 10px dotted green; }

   .tiga { border: 10px dashed green; }

   .empat { border: 10px double green; }

   .lima { border: 10px groove green; }

   .enam { border: 10px ridge green; }

   .tujuh { border: 10px inset green; }

   .delapan { border: 10px outset green; }

   .img{

		border-width: 1px;

		border-style: solid;

		border-color: red;

}

/* halaman berita */
.imgberita{
	width:100%;
	min-height:80px;
	max-height:80px;
}
@media (max-width: 920px){
  .imgberita{
	 width: 100%;
	 min-height:315px;
	 max-height:315px;
 }
}
@media (max-width: 720px){
  .imgberita{
	 width: 100%;
	 min-height:300px;
	 max-height:300px;
 }
}
@media (max-width: 480px){
  .imgberita{
	 width: 100%;
	 min-height:190px;
	 max-height:190px;
 }
}
@media (max-width: 360px){
  .imgberita{
	 width: 100%;
	 min-height:150px;
	 max-height:150px;
 }
}
/* end halaman berita */

/* video */
/* ukuran video lama width="350" height="210" */
/* ukuran radio lama style="max-width: 100%;" width="350" height="227" */
.videocontent{
	width: 100%;
	height: 220px;
}

@media (max-width: 920px){
  .videocontent{
	 width: 100%;
	 min-height:410px;
	 max-height:410px;
 }
}
@media (max-width: 720px){
  .videocontent{
	 width: 100%;
	 min-height:270px;
	 max-height:270px;
 }
}
@media (max-width: 480px){
  .videocontent{
	 width: 100%;
	 min-height:270px;
	 max-height:270px;
 }
}
@media (max-width: 360px){
  .videocontent{
	 width: 100%;
	 min-height:220px;
	 max-height:220px;
 }
}
/* end video */

/* image sambutan*/
.imgsambutan{
	 	width: 330px;
		height: 330px;
		float: left;
		margin: 3px 4px 0px 0px;
}

@media (max-width: 920px){
  .imgsambutan{
	 width: 100%;
	 min-height:480px;
	 max-height:480px;
 }
}
@media (max-width: 720px){
  .imgsambutan{
	 width: 100%;
	 min-height:380px;
	 max-height:380px;
 }
}
@media (max-width: 480px){
  .imgsambutan{
	 width: 100%;
	 min-height:300px;
	 max-height:300px;
 }
}
@media (max-width: 360px){
  .imgsambutan{
	 width: 100%;
	 min-height:280px;
	 max-height:280px;
 }
}
/* end image sambutan */

</style>