@charset "utf-8";
/* CSS Document */
@font-face
{
    src: url('../fonts/raleway/Raleway-Light.ttf');
	    font-family:raleway_thin;
}
@font-face
{
    src: url('../fonts/raleway/Raleway-ExtraBold.ttf');
	font-family:raleway_bold;
}
@font-face
{
    src: url('../fonts/raleway/Raleway-Regular.ttf');
	font-family:raleway_reg;
}
@font-face{ src: url('../fonts/open-sans/OpenSans-Regular.ttf');
	font-family:open;}
@font-face{ src: url('../fonts/open-sans/OpenSans-Bold.ttf');
	font-family:open_bold;}

.slider{height:600px;}
.header{ position:fixed; z-index:100; width:100%; padding:5px 15px}
.header #logoo{ max-height:150px; }
.quote{ background-color:#e3e3e3; padding:5px 2%; color:#505152;}
.quote i{padding:7px 10px; font-size:15px;}
.quote .fa-envelope:hover{ background-color:#B9C4C1; color:#FFFFFF; transition:0.2s}
.quote .fa-facebook:hover{ background-color:#3B5998; color:#FFFFFF; transition:0.2s}
.quote .fa-instagram:hover{ background-color:#E1306C; color:#FFFFFF; transition:0.2s}
.quote .fa-youtube-play:hover{ background-color:#CC181E; color:#FFFFFF; transition:0.2s}
.quote .fa:not(:hover){transition:0.2s}
.quote span{ margin-right:30px; font-family:open; font-size:13px; color:rgba(0,0,0,0.88)}
.quote .col-md-7{padding-top:4px}
.quote .col-md-2{padding-top:2.8px}
.quote .col-md-7 .fa{font-size:13px; color:#999999}
.quote span:last-child{margin-right:0px;}
.quote .col-md-3 .btn{ background-color:rgba(255,87,34,0.93); color:#FFFFFF; text-transform:uppercase}
.quote .col-md-3 .btn:hover{background-color:rgba(255,87,34,1)}

.breadcrumb{font-family:raleway_reg; color:#333333}
.breadcrumb .active{ color:#333333}
.lgoo{max-height:120px}



#nav_btn{max-height:30px; float:right; display:none;}
#nav_btn1{max-height:30px; text-align:right;right:15px; position:absolute}


nav{ width:auto; margin-top:20px; text-align:right;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
/*#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}*/
#cssmenu #head-mobile{display:none}

#cssmenu{font-family:raleway_reg;float:right;  position:relative; text-align:right; padding-right:25px}



#cssmenu > ul{margin-bottom:0px; text-align:right}
#cssmenu > ul > li{float:left; border-right:0.5px solid #ededed;padding:0px 10px 0 10px}
#cssmenu ul li a span{}
#cssmenu ul li:last-child{border-right:0px}
#cssmenu > ul > li > a{/*width:130px;*/;text-decoration:none;color:#FFFFFF; font-family:open;font-size:14px;text-transform:uppercase;}/* width of a tag */
/*#cssmenu > ul > li:before{content:'|';position:absolute;top:18px}*/

#cssmenu ul li.active a{}/* ---- */
#cssmenu > ul > li:hover > a{opacity:0.84}
#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{color:#003399;background-color:rgba(255,255,255,0.4)!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;color:white}
/*#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:8px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:5px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}*/
#cssmenu > ul > li.has-sub:hover > a:before{top:20px;height:0;z-index:200}
#cssmenu ul ul{position:absolute;left:-9999px;padding:0px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease; margin-top:0}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto; margin-top:0px}
#cssmenu li:hover > ul > li{height:37px;border-bottom:1px solid #fff}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{padding:12px 15px 12px 15px;text-decoration:none;background-color:rgba(0,0,0,0.93); text-transform:uppercase; color:#FFFFFF;font-size:14px; text-transform:capitalize; border-bottom:1px solid #fff}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#003366;background-color:rgb(255,255,255)}/* under list hover*/
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#9999FF}/*--*/
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border:1px solid #333}







.about .abt1{ padding:10px 42%; position:relative; margin-top:-120px;}
.about .abt1 img{ max-width:100%;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.58);}
.about .abt2{padding:10px 5% 20px;}
h2{font-family:raleway_thin; text-transform:uppercase; color:#000000; font-size:24px;letter-spacing: -0.04em;}
.about .abt2 .col-md-6{padding-bottom:10px;}
h2 span{font-family:raleway_bold;}
.about .abt2 .abt11{text-align:right; border-right:1px solid rgba(211,211,211,0.56)}
.about .abt2 p{font-family:open; font-size: 14px;line-height: 1.85714286em;letter-spacing: 1px;color: #777;-webkit-font-smoothing: antialiased;}
.about h6{text-align:center;clear: both;
    margin-top: 0px;
    margin-bottom: 0px; }
.about h6 img{max-height:20px}

.portfolio .col-md-3 .col-md-12{padding:0px; margin-top:30px}
.portfolio .col-md-3 .col-md-12:hover{box-shadow: 0 0 24px 2px rgba(0,0,0,.43); cursor:pointer; filter: grayscale(100%); }
.portfolio .col-md-3 .col-md-12:not(:hover){transition:0.1s}
.portfolio .col-md-3 .col-md-12 img{width:100%;}
.portfolio .col-md-3 .col-md-12 a{display:block}
.portfolio{ padding:60px 5% 50px; border-top:1px solid #eaeaea}
.price h2, .portfolio h2{text-align:center;}
.portfolio .drive-link{text-align:center; margin-bottom:15px}
.portfolio .drive-link a{display:inline-block; background-color:rgba(255,87,34,0.93); color:#FFFFFF; font-family:raleway_reg; text-transform:uppercase; padding:10px 25px; text-decoration:none}
.portfolio .drive-link a:hover{background-color:rgba(255,87,34,1); color:#FFFFFF}
.coverr{background-image:url(../images/oireui.jpg); height:400px; background-repeat:no-repeat; background-size:cover; background-position:center center}
.coverr .col-md-12{height:100%; background-color:rgba(0,0,0,0.48);}
.coverr .col-md-12 h2{line-height:350px; text-align:center; color:#FFFFFF; font-family:raleway_bold; font-size:30px}

/* The Modal (background) */
.modl {
  display: none;
  position: fixed;
  z-index:22222;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color:rgba(0,0,0,0.95);
}
.mySlide img{filter:brightness(110%); max-width:100%;margin:auto;vertical-align:middle;box-shadow: 0px 0px 10px 0px rgba(211,211,211,0.58);}
.mySlide{display:table}

/* Modal Content */
.modl-content {
  position: relative;
  margin: auto;
  padding: auto;
  width: 90%;
  text-align:center;
}

/* The Close Button */
.cls {
  color: white;
  position: absolute;
  top:10px;
  right: 10px;
  opacity:1;
    padding:0px 12px 0px 12px;
  font-size: 50px;
  font-weight: bold;
}

.cls:hover,
.cls:focus {
  color:#d40b0b;
  text-decoration: none;
  cursor: pointer;
transition:0.6s ease;
z-index:22225;
  background-color:rgba(255,255,255,0.9);
}

.mySlide {
  display: none;
  
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255,255, 0.8);
  color:#d40b0b;
  text-decoration:none;
}
#pcls{top:13px; right:13px;position:fixed;z-index:1000;cursor:pointer;font-size:48px;color:#999999;max-height:70px;padding:8px;border-radius:6px}
#pcls:hover{background-color:#000000;color:#CCCCCC;cursor:pointer;transition:0.5s}

.testimonial{ background-image:url(../images/balance-865091_1920.jpg); background-position:center; background-size:cover; background-attachment:fixed;}
.testimonial h2{color:#FFFFFF; margin-top:40px; text-align:center;}
.testimonial .col-md-12{background-color:rgba(0,0,0,0.66); padding:40px 0px 20px}
.exp h1{font-family:open_bold; color:#000000;}
.exp{padding:60px 5%}
.exp h3{font-size:20px; font-family:raleway_thin; text-transform:uppercase; color:#000000; padding-bottom:10px}
.exp h3 span{font-family:raleway_bold}
.exp h3 label{ border-bottom:0.7px solid #000000; font-weight:lighter;padding-bottom:10px}
.price{ background-color:#f7f7f7; padding:50px 0px 70px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea}
.price .col-md-4{padding:0px 2%; margin-top:30px;}
.price .col-md-4 .col-md-12{ border:1px solid #333333}
.price .one .col-md-12{ background-image:url(../images/588ba993dbbdc$!900x.jpg); background-size:100% 400px; background-position:center;}
.price .col-md-4 .col-md-12 .row{ background-color:rgba(255,255,255,0.65); padding-top:12px; padding-right:15px}
.price .three .col-md-12{ background-image:url(../images/studioo.JPG); background-size:100% 600px; background-position:center;}
.price .two .col-md-12{ background-image:url(../images/c399fbfc79phy.jpg); background-size:100% 550px; background-position:center;}
.price .col-md-4 .col-md-12 .row h2{padding-left:15%; margin-top:8px; text-align:left}
.price .col-md-4 .col-md-12 .row h4{text-align:right; color:#000000; font-family:open; margin-right:6%}
.price .col-md-4 .col-md-12 .row ul li{line-height:38px; font-size:14px; color:#000; font-family:raleway_bold;}
.price .col-md-4 .col-md-12 .row ul li span{font-family:open_bold}

.contact{ background-image:url(../images/parallaxuy7u.jpg); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; color:#FFFFFF}
.contact .col-md-12{ height:100%; background-color:rgba(0,0,0,0.47); padding:40px 55% 80px 5%}
.contact h2{ color:#FFFFFF; margin-bottom:20px}
.contact form input{width:46%; background:none; border:0px; border-bottom:1px solid #999999; padding:10px 10px 10px 0px; margin-bottom:20px; float:left; margin-left:3%}
.contact form textarea{width:100%; background:none; border:0px; border-bottom:1px solid #999999}
.contact form input[type=text]{width:48%; margin-left:0px}
.contact button{background-color:#000000; color:#FFFFFF; font-family:raleway_reg; padding:15px 30px; margin-top:25px; border:0px;border:1.2px solid #000000}
.contact button:hover{background:none; transition:0.4s}
.contact button:not(:hover){transition:0.4s}

.footer{background-color:#111; padding:40px 6% 0px; color:#FFFFFF; font-family:raleway_reg}
.footer .col-md-12 .col-md-4:first-child{text-align:left}
.footer .col-md-12 .col-md-4:last-child{text-align:right}
.footer .col-md-12 .col-md-4{text-align:center}
.footer h5{font-size:14px; font-family:open; line-height:25px; letter-spacing:1px;}
.footer h2{color:#FFFFFF; margin-top:0px}
.footer h4{font-size:14px; font-family:raleway_reg; line-height:22px}
.footer .col-md-12 {border-bottom:0.5px solid #191919; padding-bottom:30px}
.footer .cpy{padding:10px; border-top:0.5px solid #262626;}
.footer .cpy h5{text-align:center; font-family:raleway_reg; font-size:14px}
.footer .cpy h5 a{font-size:11px; color:#ededed; text-decoration:none; cursor:pointer}


.frame {
     /* equals max image height */
	 height:100%;
    width: 100%;
    white-space: nowrap;
    text-align: center;
	 /*background-color:#006633;*/
	

}
.helper {
    /*display: inline-block;*/
	display:inline-block;
	background-color:#00FF99;
    height: 100%;
    vertical-align: middle;
		
}
.service h2{text-align:center}
.service{padding:55px 1% 80px; border-top:1px solid #ededed;background-color:#f7f7f7;}
.service .col-md-4{ margin-top:30px}
.service .col-md-4 .col-md-12{border:1px solid #ededed;  background-color:#FFFFFF}
.service .col-md-4 .col-md-12:hover{box-shadow:1px 2px 13px rgba(0,0,0,.11); cursor:pointer}

.service .col-md-4 .one{ background-color:#D7ECCF}
.service .col-md-4 .one:hover{ background-color:#f6ffdb}

.service .col-md-4 .two{ background-color:#AFE4DF}
.service .col-md-4 .two:hover{ background-color:#f6ffdb}

.service .col-md-4 .tre{ background-color:#FAE5DC}
.service .col-md-4 .tre:hover{ background-color:#dcf5fa}

.service .col-md-4 .for{ background-color:#dcf5fa}
.service .col-md-4 .for:hover{ background-color:#FAE5DC}

.service .col-md-4 .fiv{ background-color:#ffdbf6}
.service .col-md-4 .fiv:hover{ background-color:#FAE5DC}

.service .col-md-4 .six{ background-color:#f6ffdb}
.service .col-md-4 .six:hover{ background-color:#D7ECCF}

.homi{float:right; max-height:60px}









@media screen and (max-width:1100px) and (min-width: 801px)
{
.slider{height:450px;}
.about .abt1{ padding:10px 39%; position:relative; margin-top:-80px;}
.about h6{display:none}
}



@media screen and (max-width:800px)
{
#nav_btn{display:none}
#cssmenu{display:block; margin-top:0px}


.slider{height:300px;}
.about .abt1{ padding:10px 37%; position:relative; margin-top:-50px;}
.about h6{display:none}

nav{width:100%;text-align:left}
#cssmenu{text-align:left}
#cssmenu ul li a span{border:0}
#cssmenu ul{width:100%;display:none;height:auto;background-color:white;margin-left:0px;padding:0px;text-align:left}
#cssmenu ul li{width:100%;margin:0;text-align:left;}
#cssmenu ul li:hover{background-color:rgba(0,0,0,0.2);}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{padding:15px;width:100%;border-bottom:1px solid rgba(211,211,211,0.46); color:#000000;font-size:13px;margin:0;background-color:#FFFFFF}
#cssmenu ul li a:hover{background-color:rgba(211,211,211,0.48)}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{color:#000000;font-family:open_reg;}
#cssmenu ul ul li{/*background:#333!important;*/}
#cssmenu ul ul li:hover{background-color:rgba(211,211,211,0.46)!important}
#cssmenu > ul > li:hover > a{border-bottom:0px solid #FFFFFF;}
#cssmenu ul ul ul li a{/*padding-left:35px*/}
#cssmenu ul ul li a{color:#000000;background:white}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#000000;background-color:rgba(211,211,211,0.48)}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}

#cssmenu #head-mobile{display:block;padding:22px;font-family:aharoni;font-size:18px; color:#FFFFFF;)}
.button{width:55px;height:45px;position:absolute;right:0;top:0px;cursor:pointer;z-index: 12399994; color:#FFFFFF;background-color:rgba(0,0,0,0.3)}
.button:after{position:absolute;color:#000000;top:22px;right:20px;display:block;height:4px;width:20px;border-top:1px solid rgb(255,255,255);border-bottom:1px solid rgb(211,211,211);content:''}
.button:hover{ background-color:rgba(51,51,51,0.98);color:#000000; }
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px; color:#333333;display:block;height:2px;width:20px;background:#ddd;content:'';color:#000000}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#ddd;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #ddd;height:45px;width:43px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{color:#666666; background-color:rgba(211,211,211,0.6)}
#cssmenu ul ul .submenu-button{height:36px;width:36px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff; color:#000000;}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}


.portfolio .col-xs-3 .col-md-12{padding:0px; margin-top:12px; padding:0px}
.portfolio .col-xs-3{padding-left:6px; padding-right:6px}

#pcls{max-height:40px}
.contact .col-md-12{ padding:40px 30px 80px }
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding:2px 8px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255,255, 0.8);
  color:#d40b0b;
  text-decoration:none;
}
.modl-content{width:80%}
.about .abt2 .abt11{text-align:left; border-right:0px solid rgba(211,211,211,0.56)}
}