.flexslider-threeservice{display:inline-block; width:100%;margin: 0 0 2% 0 !important;float: left;}
.container {
display: flex;
width: 100%;
padding: 0% 0%;
box-sizing: border-box;
height: 100vh;
max-height: 450px;
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 0.5rem;
line-height: 0;
position: relative;
border-radius: 10px;
cursor:pointer;
}
.box > img {
width: 100%;
height: 100%;
object-fit: cover; 
transition: .5s;
}
.box .ic{display:none;transition: .5s;    width: 50px;
margin: 0 10px 0 0;} 
.box .iclink{display:none;transition: .5s;background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
vertical-align: middle;
padding: 0.7rem 1.5rem;
text-decoration: none;
font-size: 1rem;
line-height: 1;
border-radius: 5px;
cursor: pointer;} 
.box .content {    position: absolute;
bottom: 0;
color: #fff;
width: 90%;
display: inline-block;
padding: 5%;
left: 0;
}
.box .content > h2{
display: inline-block;
width: 90%;
font-size: 1.4rem;
line-height: 1.2;
margin: 0px;
font-weight: 600;
}
.box .content > h2 > span {display:none;}
.box .content > p{    display: none;
width: 50%;
font-size: 1rem;
line-height:1.5; font-weight:100;margin-right:40%;
}
.coverlay{display:none;    position: absolute;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;}
.box:hover .coverlay{display:inline-block;}
.box:hover { flex: 1 1 30%; }
.box:hover > img {
width: 100%;
height: 100%;
}
.box:hover .content > h2 > span {display:inline-block;}
.box:hover .content{ width:90%;}
.box:hover .content > p {
font-size: 1rem;
display: inline-block;
}
.box:hover .ic{display:inline-block;}
.box:hover .iclink{display:inline-block;}
.box:hover br{display:none;}
@media only screen and (max-width: 480px) and (min-width: 320px) 
{
.container {
display: inline-block;
width: 100%;
padding: 0% 0%;
box-sizing: border-box;
height: auto;
max-height: unset;
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 0% 2% 0;
line-height: 0;
position: relative;
border-radius: 10px;
cursor: pointer;
display: inherit;
width: 100%;
float: left;
}
.box .content > p {
display: inherit;
width: 100%;
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
margin-right: 0;
}
.flexslider-threeservice {
display: inline-block;
width: 100%;
margin: 0 0 -2% 0 !important;
float: left;
}
.box .ic {display: inline-block;margin-right: calc(100% - 40px);}
}
@media only screen and (max-width: 781px) and (min-width: 481px) 
{
.container {
display: inline-block;
width: 100%;
padding: 0% 0%;
box-sizing: border-box;
height: auto;
max-height: unset;
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 2% 2% 0;
line-height: 0;
position: relative;
border-radius: 10px;
cursor: pointer;
display: inherit;
width: 48%;
float: left;
}
.box .content > p {
display: inherit;
width: 100%;
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
margin-right: 0;
}
.flexslider-threeservice {
display: inline-block;
width: 100%;
margin: 0 0 -2% 0 !important;
float: left;
}
.box .ic {display: inline-block;margin-right: calc(100% - 40px);}
}
@media only screen and (max-width: 992px) and (min-width: 782px) 
{
.container {
display: inline-block;
width: 100%;
padding: 0% 0%;
box-sizing: border-box;
height: auto;
max-height: unset;
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 2% 2% 0;
line-height: 0;
position: relative;
border-radius: 10px;
cursor: pointer;
display: inherit;
width: 48%;
float: left;
}
.box .content > p {
display: inherit;
width: 100%;
font-size: 1rem;
line-height: 1.5;
font-weight: 100;
margin-right: 0;
}
.flexslider-threeservice {
display: inline-block;
width: 100%;
margin: 0 0 -2% 0 !important;
float: left;
}
.box .ic {display: inline-block;margin-right: calc(100% - 40px);}
}
@media only screen and (max-width: 1200px) and (min-width: 993px) 
{
}