#metro-grid {
width:100%;
height:100%;
-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}

.metro-grid-col-1 {
float:left;
width:100%;
}

.metro-grid-col-2 {
float:left;
width:100%;
}

.metro-grid-col-3 {
float:left;
width:100%;
}

.grid-col-1 {
float:left;
width:20%;
height:560px;
}

.grid-col-2 {
float:left;
width:20%;
}

.grid-col-3{
float:left;
width:20%;
height:560px;
}

.grid-col-4{
float:left;
width:20%;
}

.grid-col-5{
float:left;
width:20%;
}

.grid-col-6{
float:left;
width:40%;
height:280px;
overflow:hidden; 
z-index:1;
}

.grid-col-7{
float:left;
width:20%;
}

.grid-col-8{
float:left;
width:20%;
}

.grid-col-9{
float:left;
width:20%;
}

.grid-block,.slide-box img,.slide-box-2 img  {
width:100%;
height:280px;
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .4);
box-shadow: 0 0 40px rgba(0, 0, 0, .4);
}

.slide-box-3 {
z-index:1;
}

.grid-block-duo {
width:100%;
}

 a.readmore:before{
content:"\f065";
font-family:fontawesome;
color:#fff;
} 

a.readmore {
float:right; 
width:15px;
height:15px;
color:#fff;
margin-right:20px;
margin-top:1px;
text-decoration: none; 
}

.grid-block img {
width:100%;
height:280px;
padding:0;
margin:0;
z-index:1 !important;
}

.grid-slideshow {
float:left;
width:60%;
height:560px;
overflow:hidden !important;

}

.grid-slideshow img {
 height:560px; 
background-size:cover;
}

.scale-up {
}

.scale-up:hover {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .4);
box-shadow: 0 0 40px rgba(0, 0, 0, .4);
z-index: 9999 ;
-webkit-transition: 0.3s;
transition: 0.3s;
}

h3.title{
text-transform:uppercase;
padding:30px 10px 0px 30px;
margin:0 !important;
font-weight:bold;
}

p.author {
padding:5px 0 60px 30px;
margin:0 !important;
font-size: 13px;
}

h5.date{
font-size: 14px;
color:#fff;
text-transform:capitalize;
letter-spacing: 0px;
padding:30px 30px 10px ;
margin:0;
font-weight:700;
}

p.text{
text-transform:capitalize;
letter-spacing: 0px;
padding:0px 20px 10px 30px;
margin:0;
font-weight:normal;
}

ul.slick-dots {
position: absolute;
top: 50px;
right: 19px;
bottom: initial;
height: 70px;
display: inline-flex;
flex-direction: column;
width: auto;
}

ul.slick-dots li {
position: relative;
width: 10px;
height: 10px;
margin-top: 10px;
border: 1px solid #fff;
border-radius:30px;
display:inline;
}

.slick-dots li::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0.3);
transform: translate(-50%, -50%) scale(0.3);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: 0.3s;
transition: 0.3s;
width: 100%;
height: 100%;
background-color: #fff;
}

.slick-dots li:hover::before,
.slick-dots li.slick-active::before {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
border-radius:30px;
}

div.grid-slideshow div.slide.slick-initialized.slick-slider.slick-dotted ul.slick-dots {
top:250px;
right:15px;
}

/*=====================
 Responsive-CSS
======================*/

@media only screen and (min-width: 600px) and (max-width: 1424px) {

.grid-col-1 {
width:50%;
}

.grid-col-2 {
width:50%;
}

.grid-col-3 {
width:50%;
}

.grid-col-4 {
width:50%;
}

.grid-col-5{
width:100%;
}

.grid-col-6{
width:100%;
}

.grid-col-7{
width:100%;
}

.grid-col-8{
width:50%;
}

.grid-col-9{
width:50%;
}

.grid-slideshow {
width:100%;
height:560px;
}

figure, figcaption,img{
width:100% !important;
object-fit: none !important;
}

}

@media only screen and (min-width: 0px) and (max-width: 599px) {
.grid-col-1 {
width:100%;
}

.grid-col-2 {
width:100%;
}

.grid-col-3 {
width:100%;
}

.grid-col-4 {
width:100%;
}

.grid-col-5{
width:100%;
}

.grid-col-6{
width:100%;
}

.grid-col-7{
width:100%;
}

.grid-col-8{
width:100%;
}

.grid-col-9{
width:100%;
}

.grid-slideshow {
width:100%;
height:300px;
}

.grid-slideshow img {
 height:300px; 
background-size:cover;
object-fit: none;
}

 
div.grid-slideshow div.slide.slick-initialized.slick-slider.slick-dotted ul.slick-dots {
top:110px;
right:15px;

}

 figure, figcaption,img {
width:100% !important;
object-fit: none !important;
}

}