.logoimage{  background-image:url(../img/espresso_logo_icon.png)}
.center_img{ text-align:center; width:100%; margin-bottom:26px;}
p.subtitll{ color:#909090; font-size:24px; text-align:center; text-transform:uppercase; margin-top:50px;font-family: 'FuturaLTLight';}
p.font27{color:#000; font-size:27px; text-align:center;}
p.font24{ color:#FFF; font-size:24px; margin:0;}
p.font15{ font-size:15px;color:#FFF; text-align:center; width:100%; float:left;line-height:1.4; margin-bottom:50px}
.meroon_bg h3{ color:#e74011; line-height:44px; margin-bottom:20px;}
.meroon_bg p{ color:#FFF; margin-top:16px;}
.our_work .col-lg-10{ width:84%;}
.contact{ background:url(../img/border.png) repeat-x top center; width: 38%;margin: 10px auto; min-height:60px; padding:10px;}
.contact p.mail{ background:url(../img/mail.png) no-repeat center left; font-size:17px; padding-left:34px;  color:#FFF; background-size:21px 18px;}
.contact p.phone{ background:url(../img/phone.png) no-repeat center left; color:#FFF; font-size:17px; padding-left:34px; background-size:17px 17px;}
p.location_map{ font-size:15px; color:#fff4f1; margin:0; text-transform:uppercase; font-family: 'FuturaLTCondensed'; text-align:center;}
.lets_talk .center_img{ margin-bottom:0px;}
.lets_talk h3, .lets_talk p.text{ color:#FFF; margin-bottom:20px;}
.black-bg .down-arrow{ background:none; border-radius:0;}
.black-bg .down-arrow i{ background:url(../img/down_arrow1.png) no-repeat center; background-size:initial;}

@media all and (min-width:200px) and (max-width:979px) {
    .lets_talk .quote h3.has-line{ color:#FFF; margin-top:60px;}
	.lets_talk .down-arrow{ bottom:0px !important; left:47px !important;}
	.lets_talk .down-arrow i{ margin-top:0px; }
}
@media all and (min-width:1440px) and (max-width:1600px) { 
	.video-banner, .image-banner{ height:613px !important;}
	.banner-background{height:613px !important;}
	.video-banner video, .image-banner video{ height:613px !important;}
	.home .content{ top:631 !important;}
}
@media all and (min-width:1281px) and (max-width:1366px) { 
	.contact{ width:40% !important; min-height:60px !important;}
	.video-banner, .image-banner{ height:635px !important;}
	.banner-background{height:635px !important;}
	.video-banner video, .image-banner video{ height:635px !important;}
	.image_grid li.portfolio7{ margin-right:10px;}
	.home .content{ top:635 !important;}
}
@media all and (min-width:1025px) and (max-width:1280px) {
	.video-banner, .image-banner{ height:600px !important;}
	.video-banner video, .image-banner video{ height:600px !important;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
	.video-banner video{ display:none !important; } 
	.video-banner.fixed{ position:inherit !important;}
	.contact{min-height:110px ;}
	.contact P{ text-align:center}
	.banner-background{height:691px !important; position:inherit !important;}
	.video-banner{ height:691px !important; }
	.home .content{ top:0px !important;}
	.banner-background{ display: block;}
}
@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 767px)  {
	.video-banner video{ display:none !important; } 
	.banner-background{height:691px !important; top:84px !important;display: block; }
	.video-banner{ height:691px !important; }
	.home .content{ top:691px !important;}
	.text{ font-size:17px !important;}
	p.font15{ font-size:22px ;}
	.contact p.mail{ font-size:40px !important; background-size:34px 30px; padding-left:50px !important;}
	.contact p.phone{  font-size:40px !important; background-size:30px 30px; padding-left:50px !important;}
	.our_work .col-lg-10{ width:100%;}
	.contact{ min-height:130px !important; width:70% !important; }
	.quote.col-xs-12 .text{ font-size:12px!important;}
	.scrollToTop{ display:none !important;}
	.black-bg .down-arrow i{ background-size:35px 30px; height:30px; width:35px}
}
@media only screen and (max-device-width : 500px)  {
	.quote.col-xs-12 .text{ font-size:12px!important;}
	.cbp-spmenu a.close-menu svg { width:60px; height:60px; margin-top: -40px;margin-left: -70px;}
	.cbp-spmenu a{ font-size:32px;}
}


/**
 * CSS For Portfolios Styles
 *
**/
.effects .img {
  position: relative;
  float: left;
  margin-bottom: 7px;;
  overflow: hidden;
}


.effects .img:nth-child(n) {
  margin-right: 7px;
}
.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}
.effects .img1 { width:29.5%;}
.effects .img1 p.expand{ background:url(../img/atlantis.png) no-repeat center center; background-size: 210px 52px;}
.effects .img2 { width:19.4%;}
.effects .img2 p.expand{ background:url(../img/shara_investment.png) no-repeat center center; background-size: 214px 73px;}
.effects .img3 { width:49%;}
.effects .img3 p.expand{ background:url(../img/jumeirah.png) no-repeat center center; background-size: 154px 99px;}
.effects .img4 { width:39%;}
.effects .img4 p.expand{ background:url(../img/pecific_venture.png) no-repeat center center; background-size: 224px 67px;}
.effects .img5 { width:29.44%; float:right; right:12px;}
.effects .img5 p.expand{ background:url(../img/national_bonds.png) no-repeat center center; background-size: 193px 174px;}
.effects .img6 { width:29.5%;}
.effects .img6 p.expand{ background:url(../img/meluha.png) no-repeat center center; background-size: 131px 131px;}
.effects .img7 { width:39%;}
.effects .img7 p.expand{ background:url(../img/meydan_shoba.png) no-repeat center center; background-size: 206px 64px;}
.effects .img8 { width:49.2%;}
.effects .img8 p.expand{ background:url(../img/royal_estates.png) no-repeat center center; background-size: 156px 146px;}
.effects .img9 { width:49.2%;}
.effects .img9 p.expand{ background:url(../img/coming_soon.png) no-repeat center center; background-size: 164px 49px;}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

p.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}
p.close-overlay.hidden {
  display: none;
}

p.expand {
  display: block;
  position: absolute;
  z-index: 100;
  text-align: center;
  width:100%;
  height:174px;
}


/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
#effect-2 .overlay {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
#effect-2 .overlay p.expand {
  left: 0;
  right: 0;
  top: 50%;
  margin: -90px auto 0 auto;
}
#effect-2 .img.hover .overlay {
  height: 100%;
}


/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media only screen and (max-width: 1225px) {
  .effects .img:nth-child(n) {
    margin-right: 5px;
  }
  .effects .img {
	margin-bottom:5px
  }

}

@media only screen and (max-width: 1100px) {
  .effects .img:nth-child(n) {
    margin-right: 4px;
  }
  .effects .img {
	margin-bottom:4px
  }

}
@media only screen and (max-width: 705px) {
  .effects .img:nth-child(n) {
    margin-right: 2px;
  }
  .effects .img {
	margin-bottom:3px
  }

}
@media only screen and (max-width: 720px) {
  .effects .img {
    width: 100%;
  }
  .effects .img:nth-child(n) {
    margin-right: 0;
  }
  .effects .img p.expand{ background-size:auto !important;}
}
@media (max-width:1870px) {
	.effects .img5 { right:10px }
}
@media (max-width:1600px) {
	.effects .img5 { right:8px }
}
@media (max-width:1440px) {
	.effects .img5 { right:3px }
}
@media (max-width:1366px) {
	.effects .img5 { right:3px }
}
@media (max-width:1224px) {
	.effects .img5 { right:5px }
}
@media (max-width:768px) {
	.effects .img5 { right:0px }
}

@media all and (min-width:721px) and (max-width:1365px) {
	.effects .img1 p.expand{ background-size: 100px 25px;}
	.effects .img2 p.expand{ background-size: 86px 29px;}
	.effects .img3 p.expand{ background-size: 87px 56px;}
	.effects .img4 p.expand{ background-size: 130px 39px;}
	.effects .img5 p.expand{ background-size: 128px 115px;}
	.effects .img6 p.expand{ background-size: 60px 60px;}
	.effects .img7 p.expand{ background-size: 150px 47px;}
	.effects .img8 p.expand{ background-size: 96px 90px;}
}