/*-----------------------------------------------------------------------------------

    Template Name: Proto One Page Portfilio Template
    Template URI: http://bootexperts.com
    Description: This is html5 template
    Author:Devitems
    Author URI: http://devitems.com
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Theme Default CSS (body, link color, section etc)
    2. header 
		3. Slider
		4. Be creative area
		5. we cando area
    6. gallery area
    6. Client say area
    7. creative team area
    8. Contact us area
    9. Footer area
-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html, body {height: 100%;}
.floatleft {float:left}
.floatright {float:right}
.alignleft {float:left;margin-right:15px;margin-bottom: 15px}
.alignright {float:right;margin-left:15px;margin-bottom: 15px}
.aligncenter {display:block;margin:0 auto 15px}
a:focus {outline:0px solid}
img {max-width:100%;height:auto}
.fix {overflow:hidden}
p {margin:0 0 15px;}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 15px;
}
a {transition: all 0.3s ease 0s;text-decoration:none;color:#777}
a:hover {
  color: #ec4445;
  text-decoration: none;
}
a:active, a:hover {
  outline: 0 none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
body {
  font-family: 'Raleway', sans-serif;
}
.clear{clear:both}
/* ==========================================================================
 2. Header
 ========================================================================== */
header{
  position: absolute;
  width: 100%;
  top: 101px;
  z-index: 2;
}
.logo{

}
.logo h3{
  font-family: 'Raleway', sans-serif;
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  margin-top: 25px;
}
.mainmenu{
  margin-bottom: 125px;
  margin-top: 138px;
}
.navbar-brand{
  display: none;
}
ul.nav{}
ul.nav li{
  margin-right: 113px;
}
ul.nav li:last-child{
  margin-right:inherit;
}
ul.nav li a{
  border: 1px solid #fff;
  border-radius: 100%;
  color: #fff;
  font-size: 18px;
  height: 125px;
  padding-top: 50px;
  text-align: center;
  width: 125px;
}
.nav > li > a:focus, .nav > li > a:hover {
  background-color: #E36968;
  border-color: #e36968;
  text-decoration: none;
}
.is-sticky .mainmenu{
  background: rgba(227, 105, 104, 0.78);
  margin-top: 0;
  padding-top: 20px;
  width: 100%; 
}
.is-sticky .navbar-brand{
  display: block;
}
.is-sticky .navbar-brand img{
  margin-left: 350px;
  margin-right: 62px;
  width: 130px;
  margin-top: -8px;
}
.is-sticky ul{
  float: right;
}
.is-sticky ul li{
  margin-right: 10px;
  color: #000;
}
.is-sticky ul li.current{
  color: #fff;
}
.is-sticky ul li a{
  border:none;
  border-radius: inherit;
  height: inherit;
  width: inherit;
  color: inherit;
  padding-top: 10px;
}
.is-sticky ul li a:hover{
  color: #fff;
  background: inherit;
}
.line {
  margin-top: 230px;
}
.sticky-wrapper {
    z-index: 1000;
    margin-bottom: -95px !important;
}
/* ==========================================================================
 3. Slider
 ========================================================================== */ 
.slider {
  background: rgba(0, 0, 0, 0) url("img/slider.jpg") repeat-x fixed center center / cover ;
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden;
}
#slider-bg{
  width: 100%;  
}
.slider::before {
  background: #000;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
/* ==========================================================================
 4. Be creative area
 ========================================================================== */
.be-creative-area{}
.section-title{
  margin-top: 100px;
}
.section-title h1{
  font-size: 60px;
  line-height: 64px;
  text-transform: uppercase;
}
.section-title h1 span{
  color: #e36968;
}
.section-title p{
  color: #000;
  font-size: 18px;
  line-height: 22px;
  margin-top: -4px;
}
.be-creative-area img{
  margin-top: 80px;
}
.percree-now-area{
  background: rgba(0, 0, 0, 0) url("img/percess-now.png") repeat-x scroll center center / cover ;
  height: 100%;
  left: 0;
  padding-bottom: 70px;
  padding-top: 85px;
  position: relative;
  top: 0;
  width: 100%;
}
.percree-now{
  position: relative;
  z-index: 1;
}
.percree-now h2{
  color: #fff;
  float: left;
  font-size: 28px;
  line-height: 32px;
  text-transform: uppercase;
  width: 80%;
}
.percree-now a{
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 13px 22px;
  text-transform: uppercase;
}
.percree-now a {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 

.percree-now a:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
}
.percree-now-area:after{
  content: "";
  background: #e36968;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.8;
}
/* ==========================================================================
 5. we cando area
 ========================================================================== */
.we-cando-area .section-title{
  margin-bottom: 93px;
}
.we-can-box{
  margin-bottom: 91px;
} 
.we-can-box i{
  color: #e36968;
  font-size: 60px;
  margin-bottom: 25px;
}
.we-can-box h3{
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
  text-transform: uppercase;
} 
.we-can-box p{
  margin-top: 7px;
}
/* ==========================================================================
 6. gallery area
 ========================================================================== */
.gallery-area{}
.gallery-top{
  background: rgba(0, 0, 0, 0) url("img/gallery-bg.jpg") repeat-x fixed center center / cover ;
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}
.gallery-top:after{
  content: "";
  background: #e27473;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  opacity: 0.8;
}
.gallery-text{
  position: relative;
  z-index: 1;
}
.gallery-top h2{
  color: #fff;
  font-size: 48px;
  margin-top: 91px;
  text-transform: uppercase;
}
.gallery-top h3{
  color: #3a3a3a;
  font-size: 24px;
  margin-bottom: 213px;
  text-transform: uppercase;
}
.gallery-filter{
  margin-top: -155px;
}
.gallery-menu{
  position: relative;
  z-index: 1;
}
.gallery-menu ul{
  margin-bottom: 33px;
}
.gallery-menu ul li{
  color: #fff;
  cursor: pointer;
  display: inline;
  font-size: 18px;
  padding: 16px;
  position: relative;
}
.gallery-menu ul li:hover,.gallery-menu .active {
  color: #000;
}
.mix{
  display:none;
}
.gallery-box{}
.gallery-box ul{}
.gallery-box ul li{
  float: left;
  height: 399px;
  width: 38%;  
}
.gallery-box ul li:first-child{
  width: 18.8%!important;
}
.gallery-box ul li:last-child{
  width: 18.8%!important;
}
.gallery-image{
  position: relative;
}
.gallery-image:after{
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.78);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 500ms;
}
.gallery-image:hover:after{
  opacity: 1;
}
.gallery-image:hover .gallery-hover{
  opacity: 1;
}
.gallery-image img{}
.gallery-hover{
  margin-top: -200px;
  padding-bottom: 15px;
  transition: all 500ms;
  opacity: 0;
}
.gallery-hover i{
  color: #fff;
  font-size: 24px;
  margin-bottom: 85px;
  position: relative;
  z-index: 2;
}
.gallery-hover h3{
  color: #fff;
  font-size: 24px;
  position: relative;
  z-index: 2;
}
.gallery-hover p{
  position: relative;
  z-index: 2;
  color: #fff;
}
.proto-service{}
.proto-service .section-title h1{
  font-size: 48px;
}
.proto-service .section-title h3{
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 71px;
  text-transform: uppercase;
}
.proto-box{
  margin-bottom: 98px;
}
.proto-box h3{
  color: #000000;
  font-size: 18px;
  margin-bottom: 46px;
  position: relative;
  text-transform: uppercase;
}
.proto-box h3:after{
  content: "";
  position: absolute;
  left: 0;
  top: 36px;
  background: #E36968;
  height: 1px;
  width: 68px;

}
.proto-box p{}
/* ==========================================================================
 6. Client say area
 ========================================================================== */
.client-say-area{
  background: rgba(0, 0, 0, 0) url("img/client-bg.jpg") repeat fixed 0 0;
  height: 782px;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}
.client-say-area:after{
  content: "";
  background: #e36968;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.8;  
}
.client-say{
  position: relative;
  z-index: 1;
  color: #fff;
}
.client-say h1{
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  margin-top: 100px;
  margin-bottom: 55px;
}
.client-say-box{}
.client-say-box img{}
.client-say-box p{
  font-size: 24px;
}
.client-say-box h3{
  font-size: 24px;
  margin-bottom: 5px;
}
.client-say-box h5{}
.our-client-area{
  background: #e57776 none repeat scroll 0 0;
  margin: 100px 0;
  padding: 45px 0;
}
#owl-demo .owl-pagination {
  bottom: 0;
  position: absolute;
  right: 50px;
}
#owl-demo.owl-theme .owl-controls .owl-page span {
  background: inherit;
  border: 1px solid #fff;
  border-radius: 100%;
  display: block;
  height: 20px;
  margin: 5px 7px;
  width: 20px;
  opacity: inherit;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
  background: #fff!important;
  border: 1px solid #fff;
}
#owl-demo.owl-theme .owl-controls .owl-page .active {
  background: inherit;
}
.our-client{
  position: relative;
  z-index: 1;
}
.our-client img{
  margin-right: 75px;
}
.our-client img:last-child{
  margin-right: 0px!important;
}
/* ==========================================================================
 7. creative team area
 ========================================================================== */
.creative-team-area{}
.creative-title{
  margin-top: 100px;
}
.creative-title h1{
  font-size: 48px;
  line-height: 52px;
}
.creative-title p{
  font-size: 24px;
}
.creative-team-box{
  margin-bottom: 85px;
  margin-top: 75px;
  overflow: hidden;
}
.team-box-image img{
  width: 100%;
}
.team-box-image {
  position: relative;
  overflow: hidden;
}
.team-box p{
  background: #e36968 none repeat scroll 0 0;
  bottom: -60px;
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: all 300ms;
}
.team-box:hover p {
  bottom: -15px;
  opacity: 1;
}
.team-box p a{
  border-right: 1px solid #ccc;
  color: #fff;
  display: inline-block;
  padding: 12px 0;
  text-align: center;
  width: 50%;
}
.team-box p a:last-child{
  border-right: 0px solid #ccc;
}
.team-box p a i{}
.team-box h3{
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 0px;
}
.team-box h5{
  margin-top: 5px;
  font-size: 14px;
}
#map{
  width: 100%;
  height: 500px;
}
/* ==========================================================================
 8. Contact us area
 ========================================================================== */
.contact-us-area{}
.contact-title{}
.contact-title h1{
  font-size: 48px;
  margin-top: 82px;
}
.contact-title h3{
  font-size: 18px;
}
.contact-address{
  margin-bottom: 100px;
  margin-top: 76px;
  overflow: hidden;
}
.address-box{
  border: 1px solid #e36968;
  padding: 60px;
  transition: all 300ms;
}
.address-box:hover{
  border: 1px solid rgba(227, 105, 104, 0.8);
}
.address-box:hover i{
  color: rgba(227, 105, 104, 0.8);
}
.address-box i{
  color: #e36968;
  font-size: 72px;
  transition: all 300ms;
}
.address-box h2{
  font-size: 24px;
}
.address-box p{
  color: #000;
  margin-bottom: 0;
}
.contact-from{}
.contact-from h2{
  font-size: 24px;
  margin-bottom: 40px;
  margin-left: 15px;
}
.contact-from input[type=text],
.contact-from input[type=email]{
  border-radius: 0;
  color: #000;
  height: 55px;
  margin-bottom: 28px;
  padding-left: 14px;
}
.contact-from textarea{
  border-radius: 0;
  height: 138px;
  margin-bottom: 30px;
  padding-left: 17px;
  padding-top: 10px;
  resize:none;
}
.contact-from button{
  background: #e36968 none repeat scroll 0 0;
  border: inherit;
  border-radius: 0;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 70px;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
}
.contact-from button:hover{
  background: rgba(227, 105, 104, 0.77);
  color: #333;
}
/* ==========================================================================
 9. Footer area
 ========================================================================== */
footer{
  background: rgba(0, 0, 0, 0) url("img/footer-bg.jpg") repeat-x center center / cover ;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 35px;
  padding-left: 15px;
  padding-right: 15px;
}
footer:after{
  content: "";
  background: #e36968;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.8; 
}
.footer-text{
  position: relative;
  z-index: 2;
}
.copyright-text{}
.copyright-text p{
  color: #fff;
  font-size: 14px;
  margin-top: 17px;
}
.footer-sociul{}
.footer-sociul p{}
.footer-sociul p a{
  margin-right: 15px;
  display: inline-block;
}
.footer-sociul p a i{
  border: 1px solid #fff;
  color: #fff;
  display: table-cell;
  font-size: 18px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  width: 50px;
}
.footer-sociul p a i {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 
.copyright-text a {
  color: #333;
}
.footer-sociul p a i:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
}
.scroll-to-top{
  margin-top: -60px;
  position: relative;
  z-index: 5;
}
.scroll-to-top a{}
.scroll-to-top a i{
  background: #e36968 none repeat scroll 0 0;
  color: #fff;
  display: table-cell;
  font-size: 20px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  width: 40px;
}
.scroll-to-top{
 bottom: 25px;
 position: fixed;
 right: 25px;
 z-index: 999999;
}
a.bstore-scrollertop{
 background: #3a3d42 none repeat scroll 0 0;
 color: #fff;
 display: block;
 height: 40px;
 line-height: 44px;
 text-align: center;
 transition: all 0.3s ease 0s;
 width: 40px;
}
a.bstore-scrollertop i{
 font-size:22px;
}
.bstore-scrollertop:hover{
 background: #ff4f4f none repeat scroll 0 0;
}