.workareas {}

.workareas .rec {position: relative; width: 100%; height: 310px; margin-bottom: 28px; padding-left: 7px; padding-right: 7px;}

.workareas .rec .areatext {margin-top:30px;}
.workareas .rec h3.areaname {display: inline-block; color:#fff; font-size:42px; line-height:1.2; text-align: right; margin:auto; margin-bottom: 26px; padding: 5px; padding-right: 30px; width: 69%; position: absolute; top:50%; transform: translateY(-50%); z-index: 1; background: rgba(0,0,0,0.24);}
.workareas .rec h3.areaname a {color:#fff; text-decoration: none;}

.workareas .rec .photo {height: 310px; position: relative; overflow: hidden;}
.workareas .rec .photo img {min-width: 100%; min-height: 100%; margin: auto; top:0; right:0; left:0; bottom:0;}


.workareas .rec1 h3.areaname {width: 59%;}
.workareas .rec1 .photos {width:100%; height:310px; position: relative;}
.workareas .rec1 .photo-blur {width:100%; height:310px; position: absolute;  overflow:hidden; top:-16px; left:-16px;}
.workareas .rec1 .photo-blur img {min-width: 100%; min-height: 100%; margin: auto; top:0; right:0; left:0; bottom:0;
  -webkit-filter: blur(20px) brightness(124%) contrast(94%);
  -moz-filter: blur(20px) brightness(124%) contrast(94%);
  -o-filter: blur(20px) brightness(124%) contrast(94%);
  -ms-filter: blur(20px) brightness(124%) contrast(94%); 
  filter: blur(20px) brightness(124%) contrast(94%);
  
}
.workareas .rec1 .photo { 
    -webkit-box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);
    box-shadow: 3px 9px 36px 0px rgba(0,0,0,0.26);   
}
.workareas .rec1 .photo img {min-width: 100%; min-height: 100%; margin: auto; top:0; right:0; left:0; bottom:0;}

@media  (max-width:1430px)  {


/*.workareas .rec .photo {position: relative;  width: calc(100% + 30px);} */
 
}

@media (max-width:991px)
{

}

@media (max-width:575px)
{

    
}