/*********************

    Template Name: Black&White
    Template URL: http://dev.valthemes.com/bw/
    Author: Valthemes
    Version: 1.3

-----------------------

// Structure of general.css file //

	1. Body
	2. Transitions
	3. Common styles
	4. Page preloader
	5. Grid
	6. Section separators
	7. Buttons
	8. Header & navigation
		8.1 Logo
		8.2 First screen
		8.3 Video container
		8.4 Additional effects & classes
	9. About block
	10. Promo-box block
	11. Team block
	12. Services block
	13. Portfolio block
	14. Pricing tables block
	15. Latest from blog block
	16. Testimonials block
	17. Clients block
	18. Contacts block
	19. Map block
	20. Footer
	21. Breadcrumbs
	22. Sidebar
	23. Blog pagination
	24. Blog content
	25. Blog Masonry
	26. Classic sections(without separators)
	27. 404 page
	28. Portfolio masonry
	29. Portfolio Single
	30. Coming Soon Page
	
	
*********************/

/******************** 1. Body ********************/
@charset "utf-8";

@font-face {
    font-family: 'futura_ltregular';
    src: url('fonts/futuralt-webfont.eot');
    src: url('fonts/futuralt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/futuralt-webfont.woff') format('woff'),
         url('fonts/futuralt-webfont.ttf') format('truetype'),
         url('fonts/futuralt-webfont.svg#futura_ltregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background: #fff none repeat scroll 0 0;
  color: #333;
  font-family: "Abel",sans-serif;
  font-size: 16px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/******************** 2. Transitions ********************/
a,
button,
.p-filters li,
.table-item,
.date,
#brands img,
.flogo img,
.btn-show,
.owl-theme .owl-controls .owl-page span,
.recent-item img{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
	transition: all .3s ease;
	text-decoration:none
}
/******************** 3. Common styles ********************/
::-moz-selection {
       background-color: #000;
       color: #fff;
}
::selection {
       background-color: #000;
       color: #fff;
}
a img { 
	border:0;
}
a{
	color:#999;
}
a:hover{
	color:#000;
}
a:focus{
	outline:none
}
h3, h4, h5, h6, body, form, ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:400;
	position:relative;
	font-family: 'Abel', sans-serif;
}
h1{
	font-size:50px;
	line-height:50px;
	text-transform:uppercase;
	margin:0 0 30px 0
}
h3{
	font-size:24px;
	line-height:24px;
	text-transform:uppercase;
	margin:0 0 50px 0
}
h4{
	font-size:20px;
	line-height:20px;
	margin:0 0 30px 0
}
h6{
	font-size:16px;
	line-height:16px;
	margin:0 0 20px 0
}
select,
input,
textarea,
button{
	font-family: 'Roboto', sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}
section{
	position:relative;
}
input,
textarea{
    display: block;
    position: relative;
    background: none;
    font-size: 14px;
    height: 50px;
    line-height: 49px;
    font-weight: 400;
    padding: 0;
	margin:0 0 10px 0;
    width: 100%;
	border-left:0;
	border-right:0;
	border-top:0;
    border-bottom: 1px solid;
    outline: none;
    border-radius: 0!important;
    -webkit-appearance: none;
	-moz-transition: border ease-in-out .3s;
    -o-transition: border ease-in-out .3s;
    -webkit-transition: border ease-in-out .3s;
    transition: border ease-in-out .3s;
}
textarea{
	height:90px;
	resize:none;
	line-height:20px;
	margin-top: 19px;
}
button{
    outline: none;
    -webkit-appearance: none;
    border-radius: 0!important;
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.parallax-block, 
.text-rotate{
	background-repeat: no-repeat;
	background-position: 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.round {
    -webkit-border-radius: 150%;
    -moz-border-radius: 150%;
    -o-border-radius: 150%;
    border-radius: 150%;
}
.bolder{
	font-weight:700
}
.heading{
	padding-bottom: 20px;
	color: #000;
}

.heading:after{
	width:110px;
	content:"";
	display:block;
	height:1px;
	background:#666;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-55px;
}
.heading:before{
	width:5px;
	height:5px;
	content:"";
	display:block;
	background:#000;
	position:absolute;
	bottom:-2px;
	left:50%;
	border-radius:6px;
	margin-left:-3px;
}
.colored {
  color: #000 ! important;
}
.colored2{
	color:#dcdcdc;
}
.colored3{
	color:#bbb;
}
.required.error  {
    border-color: #ff0000!important;
}
label.error{
	display:none!important;
}
.smaller{
	font-size:14px;
	font-style:italic;
	color:#000;
}
.no-italic{
	font-style:normal;
}
/******************** 4. Page preloader ********************/
#page-preloader{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	background:#2A2016;
	z-index:9999;
}
.spinner{
	width:100px;
	height:100px;
	display:inline-block;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;
}

.spinner img{
	width:100%;
	display:block;
	margin:0 auto;
}
.dotted{
	width:16px;
	height:16px;
	display:inline-block;
	background:#000;
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/******************** 5. Grid ********************/
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	width: 1200px;
}
.container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.container:before,
.container:after,
.clearfix:before,
.row:before,
.clearfix:after,
.row:after {
	display: table;
	content: " ";
}
.container:after,
.clearfix:after,
.row:after {
	clear: both;
}
.row {
	margin-right: -15px;
	margin-left: -15px;
}
.col-lg-offset-12 {
	margin-left: 100%;
}
.col-lg-offset-11 {
	margin-left: 91.66666666666666%;
}
.col-lg-offset-10 {
	margin-left: 83.33333333333334%;
}
.col-lg-offset-9 {
	margin-left: 75%;
}
.col-lg-offset-8 {
	margin-left: 66.66666666666666%;
}
.col-lg-offset-7 {
	margin-left: 58.333333333333336%;
}
.col-lg-offset-6 {
	margin-left: 50%;
}
.col-lg-offset-5 {
	margin-left: 41.66666666666667%;
}
.col-lg-offset-4 {
	margin-left: 33.33333333333333%;
}
.col-lg-offset-3 {
	margin-left: 25%;
}
.col-lg-offset-2 {
	margin-left: 16.666666666666664%;
}
.col-lg-offset-1 {
	margin-left: 8.333333333333332%;
}
.col-lg-offset-0 {
	margin-left: 0;
}
.col-lg-offset-right-12 {
	margin-right: 100%;
}
.col-lg-offset-right-11 {
	margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
	margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
	margin-right: 75%;
}
.col-lg-offset-right-8 {
	margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
	margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
	margin-right: 50%;
}
.col-lg-offset-right-5 {
	margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
	margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
	margin-right: 25%;
}
.col-lg-offset-right-2 {
	margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
	margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
	margin-right: 0;
}
.col-lg-1, 
.col-lg-2, 
.col-lg-3, 
.col-lg-4, 
.col-lg-5, 
.col-lg-6, 
.col-lg-7, 
.col-lg-8, 
.col-lg-9, 
.col-lg-10, 
.col-lg-11 {
  float: left;
}
.col-xs-1,
.col-sm-1, 
.col-md-1, 
.col-lg-1, 
.col-xs-2, 
.col-sm-2, 
.col-md-2, 
.col-lg-2, 
.col-xs-3, 
.col-sm-3, 
.col-md-3, 
.col-lg-3, 
.col-xs-4, 
.col-sm-4, 
.col-md-4, 
.col-lg-4, 
.col-xs-5, 
.col-sm-5, 
.col-md-5, 
.col-lg-5, 
.col-xs-6, 
.col-sm-6, 
.col-md-6, 
.col-lg-6, 
.col-xs-7, 
.col-sm-7, 
.col-md-7, 
.col-lg-7, 
.col-xs-8, 
.col-sm-8, 
.col-md-8, 
.col-lg-8, 
.col-xs-9, 
.col-sm-9, 
.col-md-9, 
.col-lg-9, 
.col-xs-10, 
.col-sm-10, 
.col-md-10, 
.col-lg-10, 
.col-xs-11, 
.col-sm-11, 
.col-md-11, 
.col-lg-11, 
.col-xs-12, 
.col-sm-12, 
.col-md-12, 
.col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
.col-lg-12 {
	width: 100%;
	}
.col-lg-11 {
	width: 91.66666667%;
	}
.col-lg-10 {
	width: 83.33333333%;
	}
.col-lg-9 {
	width: 75%;
	}
.col-lg-8 {
	width: 66.66666667%;
	}
.col-lg-7 {
	width: 58.33333333%;
	}
.col-lg-6 {
	width: 50%;
	color:rgb(255,193,120);
	}
.col-lg-5 {
	width: 41.66666667%;
	}
.col-lg-4 {
	width: 33.33333333%;
	}
.col-lg-3 {
	width: 25%;
	}
.col-lg-2 {
	width: 16.66666667%;
	}
.col-lg-1 {
	width: 8.33333333%;
}
/******************** 6. Section separators ********************/
.top-left-separator{
    width: 0;
    position: absolute;
    top: -180px;
    left: 0;
    height: 0;
    border-style: solid;
   /*  border-width: 180px 0 0 100vw; */
    border-color: transparent transparent transparent #fff;

	
	
}
.top-right-separator{
    width: 0;
    position: absolute;
    top: -180px;
    right: 0;
    height: 0;
    border-style: solid;
   /*  border-width: 0 0 180px 100vw; */
    border-color: transparent transparent rgb(255,193,120) transparent;
}
.bottom-left-separator{
    width: 0;
	z-index:3;
    position: absolute;
    bottom: -180px;
    left: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 180px 100vw;
    border-color: transparent transparent transparent #fff;
	
}
.bottom-right-separator{
    width: 0;
    z-index: 3;
    position: absolute;
    bottom: -180px;
    right: 0;
    height: 0;
    border-style: solid;
    border-width: 180px 0 0 100vw;
    border-color: #f00 transparent transparent transparent;
	
}
.bottom-separator,
.top-separator{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 185px 0 185px;
	border-color: #2a2016  transparent transparent transparent;
	position:absolute;
	bottom: -50px;
    left: 50%;
    margin-left: -185px;
    z-index: 9;

}
/******************** 7. Buttons ********************/
.btn,
button{
	display:inline-block;
	width:160px;
	height:50px;
	border:1px solid;
	font-weight:500;
	text-align:center;
	line-height:48px;
	text-transform:uppercase;
}
button{
	height:auto;
}
.btn-larger{
	border:2px solid;
	line-height:46px;
}
.small-btn{
	width:100px;
	height:40px;
	line-height:38px;
}
.color1{
	color:#fff;
	background: #fff;
	border-color:#fff;
    background: linear-gradient(to right, #ffffff 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
.color2{
	color:#fff;
	border-color:#fff;
	background: #000;
    background: linear-gradient(to right, #000000 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
.color3{
	color:#555;
	border-color:#333;
	background:rgb(255,193,120);
    background: linear-gradient(to right, #fff 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
.color1:hover{
	background-position:left bottom;
	color:#000;
	border-color:#fff;
}
.color2:hover{
	background-position:left bottom;
	color:#fff;
	border-color:#000;
}
.color3:hover{
	background-position:left bottom;
	color:#555;
	border-color:#333;
	
}
/******************** 8. Header & navigation ********************/
header{
	width:100%;
	padding:15px 50px;
	position:fixed;
	color:#fff;
	top:0;
	background:none;
	z-index:100;
	transition: all 0.3s ease-in-out;
}
nav {
    position: fixed;
    top: 0;
    right: -18rem;
    z-index: 19;
    width: 8rem;
    height: 100%;
    background: #2A2016;
    padding: 70px 0;
    color: #fff;
    overflow-y: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.social-fb {
    margin-right: 15px;
    margin-left: 12px;
}
.social-ins{
	
}
.fixed {
  background: #2A2016 none repeat scroll 0 0;
  color: #fff;
  padding: 10px 50px;
}
/******************** 8.1 Logo ********************/
.logo{
	display:inline-block;
	float:left;
}
.logo img{
	height:50px;
	display:block;
}
/******************** 8.2 First screen ********************/
#top{
	position:relative;
    height: 100%;
    width: 100%;
}
.caption h1,
.caption h3{
	letter-spacing:6px;
	font-family: 'futura_ltregular', sans-serif;
	font-weight:normal;
	background:rgba(34,34,34,0.5);
	line-height:1.4em;
	width:60%;
	margin:0em auto;
	color:rgb(255,193,120);
	
	
}
.caption h3{
	font-weight:300;
	font-size:30px;
}
.top-outer,
.p-item-outer,
.member-item-outer{
	position: relative;
    z-index: 0;
	top:0;
    display: table;
	height:100%;
    width: 100%;

}
.caption,
.p-item-inner,
.member-item-inner {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}
.scroll-down{
	position:absolute;
	bottom:40px;
	display:inline-block;
	font-size:32px;
	line-height:32px;
	left:50%;
	z-index:3;
	margin-left:-16px;
	color:#000;
	-webkit-animation: scrolling 1s infinite;
	animation: scrolling 1s infinite;
}
.scroll-down:hover {
    opacity:0.6;
	filter: Alpha(Opacity=60);
}
@-webkit-keyframes scrolling {
  0%, 100% {
    bottom:30px;
  }
  50% {
    bottom:40px;
  }
}
@keyframes scrolling {
  0%, 100% {
    bottom:30px;
  }
  50% {
    bottom:40px;
  }
}
/******************** 8.3 Video container ********************/
.video{
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.video:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.video .top-outer{
    z-index: 1;
}
/******************** 8.4 Additional effects & classes ********************/

/*Ken Burns effect */
@-webkit-keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2);
        opacity: 0;
    }
}
@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2);
        opacity: 0;
    }
}
/*Gray filter*/
.gray {
	-webkit-filter: grayscale(100%);
	filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='gray'><feColorMatrix in='SourceGraphic' type='saturate' values='0' /></filter></svg>#gray");
	filter:grayscale(100%);
}
/******************** 9. About block ********************/
#about {
  background: #fff none repeat scroll 0 0;
  padding: 100px 0;
}
.heading-text{
	line-height:22px;
	color:#999;
	font-size:16px;
	font-style:italic;
	margin:0 0 50px 0;
}
.ico-box{
	font-size:48px;
	line-height:48px;
	margin-bottom:20px;
}
.counters-box {
	margin-top:50px;
}
.count-box{
	border-right:1px solid #dcdcdc;
	padding:0;
}
.count-box:last-child{
	border-right:0;
}
.count-box p{
	margin:20px 0 0 0;
	color:#000;
}
.counter{
	font-size:18px;
	font-weight:700;
	color:#000;
}
.paraStyle {
  color: #999;
  font-size: 14px;
  font-style: italic;
  line-height: 22px;
  margin: 50px 25px;
  text-align: justify;
}

/******************** 10. Promo-box block ********************/
#promo{
	padding:0 0 100px 0;
	background:#2A2016;
}

#promo p{
	margin:0 0 30px 0;
	color:#999;
	font-style:italic
}
/******************** 11. Team block ********************/
#team {
    padding: 0;
}
#team .heading:after,
#blog .heading:after{
	left:auto;
	right:0;
	margin-left:0;
}
#team .heading:before,
#blog .heading:before{
	left:auto;
	right:55px;
	margin-left:0;
	margin-right:-3px;
}
#team .col-lg-6{
	padding:0;
}
#team .member-pic{
	height:500px;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#team .ico-soc{
	width:32px;
	display:inline-block;
	height:32px;
	border:1px solid #333;
	color:#333;
	text-align:center;
	font-size:14px;
	line-height:30px;
	margin-right:5px;
	background: #333;
    background: linear-gradient(to right, #333333 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
#team .ico-soc:hover{
	color:#fff;
	background-position:left bottom;
}
/* .member-item-inner{
	color:#333;
	background:rgba(255,255,255,0.9);
} */
.member-item-outer{
	border:10px solid transparent;
	background:none!important;
}
.member-pic:hover .member-item-outer{
	opacity:1;
}
/******************** 12. Services block ********************/
#service{
	padding:100px 0 80px 0;
	color:#fff;
}
#service .heading::after, #service .heading::before {
  background: #fff none repeat scroll 0 0;
}
#service h3{
	margin:0 0 50px 0;
}
.service-p{
	font-size:16px;
	font-style:italic
}
#service p{
	margin:0 0 50px 0;
/* 	text-align:justify; */
}
#service h6 {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
  text-transform: uppercase;
}
/******************** 13. Portfolio block ********************/
#portfolio .top-right-separator{
    border-color: transparent transparent #fff transparent;
}
#portfolio .heading{
	color:rgb(255,193,120);
	text-align:left;
	
}
#portfolio .heading:after{
	left:0;
	margin-left:0;
}
#portfolio .heading:before{
	left:55px;
}
#portfolio {
    position: relative;
    padding: 10px 150px 10px 150px;
}
.portfolio-b{
	margin:10px;
}
.p-filters{
	margin-bottom:50px;
}
.p-filters li{
	display:block;
	float:left;
	padding-right:50px;
	font-size:14px;
	text-transform:uppercase;
	color:#fff;
	cursor:pointer;
}
.p-filters li.is-checked, .p-filters li:hover {
  color: #666;
}
.grid-sizer,
.p-item{
	width:25%;
	
}
.p-item--width2{
	width:50%;
}
.p-item--height2{
	height:450px;
}
.p-item--height1{
	height:225px;
}
.p-item{
	margin:0;
	display:block;
	border:3px solid #fff;
	padding:0;
	overflow:hidden;
	background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-position:center;
	-webkit-transition:background-position .2s ease-in;  
    -moz-transition:background-position .2s ease-in;  
    -o-transition:background-position .2s ease-in;  
    transition:background-position .2s ease-in; 
}
.p-item-outer,
.member-item-outer{
	 background:#2a2016; 
	color:#333;
	-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
	opacity:0;
}
.p-item-inner{
	color:#fff;
	text-align:center;
	opacity:1.2;
}
.p-item:hover{
	background-position:left top;
	
}
.p-item:hover .p-item-outer{
	opacity:0.8;	
}

.item-caption h5{
	font-size:18px;
	margin:0 0 15px 0;
}
.item-caption p{
	margin:0;
	font-style:italic;
	color:#666;
}
/******************** 14. Pricing tables block ********************/
#pricing{
	padding:100px 0;
	background:#f7f7f7
}
.table-item{
	border:1px solid #ccc;
	padding:50px 0;
	background:rgba(255,255,255,0);
}
.table-item:hover,
.popular{
	background:rgba(255,255,255,1);
}
.table-item ul{
	padding-bottom:20px;
}
.table-item ul li{
	display:block;
	margin:0 0 30px 0;
}
#pricing h4{
	font-weight:700;
	padding:0 0 20px 0;
	margin:0 0 20px 0;
	position:relative;
}
#pricing h4:after,
#clients h4:after {
    width: 30px;
    content: "";
    display: block;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
}
.price{
	margin:0 0 50px 0;
	font-size:30px;
	font-weight:300;
}
#pricing .bottom-right-separator{
	border-color: #f7f7f7 transparent transparent transparent;
}
/******************** 15. Latest from blog block ********************/
#blog{
	padding:280px 0 100px 0;
}
.img-caption{
	overflow:hidden;
	position:relative;
	max-height:350px;
	max-height:350px;
	display:block;
}
.img-caption:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.15);
    z-index: 0;
}
.img-caption img{
	width:100%;
	height:auto;
	display:block;
	-moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}
.date{
	width:200px;
	padding:30px 0;
	position:absolute;
	color:#fff;
	z-index:1;
	text-align:center;
	border:1px solid #fff;
	top:50px;
	left:50%;
	margin-left:-100px;
	border-right:0;
	border-left:0;
}
.n-item-b .date{
	top:auto;
	bottom:50px;
}
.n-item-b{
	margin-bottom:30px;
}
.date h4{
	margin:0 0 10px 0;
}
.date .smaller{
	color:#eee;
	font-size:12px;
}
.img-caption:hover .date{
	width:100%;
	left:0;
	margin-left:0;
}
.img-caption:hover img{
	    transform: scale(1.15, 1.15);
}
.news-info {
  background: #2a2016  none repeat scroll 0 0;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.negative-top{
	margin-top: -80px;
}
.negative-bottom{
	margin-bottom: -80px;
}
.news-info h5{
	font-size:16px;
	line-height:16px;
	font-weight:500;
	margin:0 0 20px 0;
}
.news-info h5 a {
	color:#666;
}
.news-info p{
	line-height:20px;
	color:#666;
}

#cofounder{ color:rgb(255,193,120);}

/******************** 16. Testimonials block ********************/
#testimonials{
	padding:120px 0;
	color:#fff;
}
#testimonials .heading:before,
#testimonials .heading:after{
	background:rgb(255,193,120);
}

#testi{
	font-style:italic;
	
}
#testi p{
	color:#fff;
	line-height:22px;
	font-size:16px;
	margin:0 0 30px 0;
}
.avatar{
	display:inline-block;
	overflow:hidden;
	width:100px;
	height:100px;
	margin:0 0 20px 0;
}
.avatar img{
	width:100%;
}
.u-title{
	margin-bottom:20px;


}
/******************** 17. Clients block ********************/
#clients {
  background: #fff none repeat scroll 0 0;
  padding: 80px 0 100px;
}
.top-separator{
	top:-50px;
	bottom:auto;
	border-width: 0 185px 50px 185px;
	border-color: transparent transparent #fff transparent;
}
#clients h4{
	text-transform:uppercase;
	position:relative;
	padding:0 0 20px 0;
	margin:0 0 50px 0;
}
#clients .top-separator:after{
	display:none;
}
#brands img{
	opacity:0.7;
	height:100px;
}
#brands img:hover{
	opacity:1;
}
/******************** 18. Contacts block ********************/
#contacts .bottom-separator {
  border-color: #2a2016 transparent transparent;
  bottom: auto;
  top: 0;
  z-index: 10;
}
.btn-show:after,
.top-separator:after{
	top: 20px;
	font-size:24px;
    left: 50%;
	margin-left:-12px;
    content: "\e956";
    position: absolute;
    font-family: 'bwicons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btn-show{
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	z-index:11;
	cursor:pointer;
	text-transform:uppercase;
	font-weight:700;
}
.btn-show:hover{
	color:#999;
}
.btn-show:before {
	content: "show contacts"; 
}
.btn-show.open:before {
	content: "hide contacts";
}
.btn-show.open:after{
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg);
}
.pop-wrap{
    top: 0;
    background: #2A2016;
    color: #fff;
    padding: 100px 0 100px 0;
    z-index: 9;
    width: 100%;
}
.contacts-info{
	padding-bottom:20px;
	color:#555;
}
.contacts-info li{
	display:block;
	position:relative;
	padding-left:13px;
	margin-bottom:10px;
	color:rgb(255,193,120);
}
.contacts-info li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 3px;
    height: 3px;
	background:#666;
}
.contacts-info li a{
	color:rgb(255,193,120);
}
.contacts-text{
	padding-right:100px;
	color:#555;
	position:relative;
	padding-top:30px;
	margin-bottom:10px;
}
.contacts-text:after{
    width: 50px;
    content: "";
    display: block;
    height: 1px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
}
.main-form input,
.main-form textarea{
	border-color:#333;
	color:#fff;
}
.main-form input:focus,
.main-form textarea:focus {
    border-color: #fff;
}
.main-form button{
	width:100%;
	margin-top:10px;
	height:50px;
}
.main-form ::-webkit-input-placeholder{
	color:#555;
}
.main-form ::-moz-placeholder{
	color:#fff;
}
.main-form :-ms-input-placeholder{
	color:#555;
}

.main-form :focus::-webkit-input-placeholder, 
#searchform  :focus::-webkit-input-placeholder,
#notify input  :focus::-webkit-input-placeholder,
#comment input:focus::-webkit-input-placeholder,  
#comment textarea:focus::-webkit-input-placeholder{
	color:transparent
}

.main-form :focus::-moz-placeholder, 
#searchform :focus ::-moz-placeholder,
#notify input  :focus ::-moz-placeholder, 
#comment input:focus ::-moz-placeholder,  
#comment textarea:focus ::-moz-placeholder{
	color:transparent
}

.main-form :focus:-ms-input-placeholder, 
#searchform :focus::-ms-input-placeholder,  
#comment input :focus::-ms-input-placeholder,
#notify input  :focus::-ms-input-placeholder,   
#comment textarea :focus::-ms-input-placeholder{
	color:transparent
}
.results{
	text-align:center;
}
/******************** 19. Map block ********************/
#map{
	height:500px;
}
img[src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5.png"]{
	top:-15px!important;
}
.gmnoprint, .gm-style-cc{
	bottom:180px!important;
}
.marker-wrap h4{
	font-size:16px;
	margin:0 0 10px 0;
	font-weight:500;
}
/******************** 20. Footer ********************/
footer {
  background-color: #2a2016;
  padding: 0 0 50px;
  position: relative;
}
footer .top-right-separator{
	border-color: transparent transparent rgb(255,193,120) transparent;
}
.flogo{
	margin-bottom:20px;
	padding-top: 40px;
}
.flogo img {
  height: 200px;
  width: 200px;
}
.flogo img:hover{
	opacity:1;
}
.social{
	margin:0 0 20px 0;
	padding:0 0 20px 0;
	position:relative;
}
.social ul li{
	display:inline-block;
	padding:0 15px;
    font-size: 18px;
    line-height: 18px;

}
.social ul li a
	color:#222;
}
.copy a{
	color:#222;
}


.social ul li a:hover,
.copy a:hover{
	color:#fff;
}
a.cropcirles{color:#fff;}
a.cropcirles:hover{ color:#fff;}

.social::after {
  background: #fff none repeat scroll 0 0;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 57%;
  margin-left: -185px;
  position: absolute;
  width: 198px;
}
.copy {
  color: #fff;
  font-size: 12px;
}
/******************** 21. Breadcrumbs ********************/
#crumbs{
	position:relative;
	padding:150px 0 200px 0;
	color:#fff;
}
#crumbs h1{
	margin:0 0 20px 0;
}
.breadcrumbs a{
	color:#fff;
}
.breadcrumbs .divider{
	display:inline;
	padding:0 10px;
}
.breadcrumbs .active,
.breadcrumbs a:hover{
	color:#bbb;
}
#crumbs .heading:before, 
#crumbs .heading:after{
	background:#fff;
}
/******************** 22. Sidebar ********************/
#searchform  ::-webkit-input-placeholder{
	color:#999;
}
#searchform ::-moz-placeholder{
	color:#999;
}
#searchform  :-ms-input-placeholder{
	color:#999;
}
.s-box .tag-item{
	float:left;
	margin-right:5px;
	margin-bottom:5px;
}
.s-box{
	margin-bottom:50px;
}
.s-box h5,
.comments-wrap h5{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    margin: 0 0 20px 0;
	text-transform:uppercase;
}
#searchform input, 
#comment input,
#notify input,
#comment textarea{
	border-color:#dcdcdc;
}
#searchform input:focus,
#comment input:focus,
#comment textarea:focus,
#notify input:focus{
	border-color:#000;
}
.s-box p{
	color:#666;
}
.s-box ul li,
.detail ul li {
    display: block;
    position: relative;
    padding: 0 0 0 13px;
    margin: 0 0 10px 0;
}
.s-box ul li:before,
.detail ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    background: #000;
    width: 3px;
    height: 3px;
}
.s-box ul li a {
    color: #666;
}
.s-box ul li:last-child{
	margin:0 0 0 0;
}
.s-box ul li a:hover{
	color:#000;
}
.recent-prev{
	float:left;
	width: 33.33333333%;
}
.recent-meta{
	float:left;
	width: 66.66666666666666%;
	padding-left:20px;
}
.recent-meta p{
	margin:0;
	color:#999;
}
.recent-item{
	margin-bottom:20px;
}
.recent-item:last-child{
	margin-bottom:0;
}
.recent-item img{
	display:block;
	width:100%;
}
.recent-item img:hover{
    opacity:0.6;
	filter: Alpha(Opacity=60);
}
.recent-item h6{
	font-weight:700;
	font-size:14px;
	margin:0 0 15px 0;
}
.recent-item h6 a{
	color:#333;
}
.recent-item h6 a:hover{
	color:#000;
}
/******************** 23. Blog pagination ********************/
.pagination{
	display:inline-block;
}
.pagination li{
	display:block;
	float:left;
	margin-right:10px;
}
.pagination .active{
	padding:10px 15px;
	background:#000;
	color:#fff;
	border:1px solid #000;
}
.pagination li a{
	height:39px;
}
.pagination li a,
.s-box .tag-item{
	display:block;
	padding:10px 15px;
	border:1px solid #dcdcdc;
	color:#999
}
.pagination li a:hover,
.s-box .tag-item:hover{
	background:#000;
	border-color:#000;
	color:#fff;
}
/******************** 24. Blog content ********************/
#content{
	padding:100px 0 250px 0;
}
.tags-entry, 
.comments-entry, 
.date-entry{
	display:inline-block;
	padding:0 10px 10px 0;
	color:#666;
	line-height:15px;
}
.tags-entry span,
.comments-entry span,
.date-entry span{
	font-size:15px;
	float:left;
	margin-right:5px;
}
.tags-entry a, 
.comments-entry a, 
.date-entry{
	color:#333;
	font-size:12px;
}
.tags-entry a:hover, 
.comments-entry a:hover{
	color:#000;
}
.post-meta{
	margin-bottom:15px;
}
#blog .post-meta{
	margin-bottom:10px;
}
.post-meta-a{
	color:#666 ;
	font-weight:500;
}
.post-meta-a:hover{
	color:#000;
}
.news-item-w2{
	margin-bottom:20px;
}
.pagination-wrap{
	padding-top:30px;
}
.top-line{
	height:1px;
	background:#dcdcdc;
	width:80%;
	margin:0 auto;
}
.detail blockquote{
	margin:30px 40px;
	padding:20px 30px;
	background:#f9f9f9;
	color:#666;
	font-style:italic;
	border-left:2px solid #333;
}
.detail .news-info{
	width:100%!important;
}
.detail .top-line{
	width:100%!important;
}
.detail img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto 15px auto;
}
.detail ul{
	margin-bottom:15px;
}
.share{
	color:#666;
}
.share a{
	color:#999;
}
.share a:hover{
	color:#000;
}
.comments-wrap{
	margin-top:20px;
	padding:0 30px;
}
#comment textarea{
	margin:19px 0 20px 0;
}
/******************** 25. Blog Masonry ********************/
.news-m .n-item-b{
	margin-bottom:30px;
}
.news-m{
	margin-bottom:20px;
}
.news-m .n-item-b .img-caption img{
	height: 400px;
    width: auto;
}
.news-m .n-item-b .img-caption{
	max-height: none;
}
.news-item-m .news-info{
	width:100%;
	padding:30px 0;
	background:none;
}
.news-item-border .news-info{
	border-bottom:1px solid #dcdcdc;
}
.news-item-m .img-caption img{
	display:block;
}
/******************** 26. Classic sections ********************/
.classic .scroll-down {
	color:#fff;
}
.classic .top-left-separator,
.classic .top-right-separator,
.classic .bottom-left-separator,
.classic .bottom-right-separator,
.classic .bottom-separator,
.classic .top-separator{
	display:none!important;
}
.classic #about,
.classic #promo,
.classic #service,
.classic #portfolio,
.classic #blog,
.classic #clients,
.classic #content,
.classic #crumbs{
    padding: 100px 0;
}
.classic .p-pager a{
	padding:50px 25px!important;
}
.classic footer{
	padding:50px 0;
}
/******************** 27. 404 page ********************/
.error404 h1{
	font-size:180px;
	line-height: 180px;
	font-weight:700;
	margin:0;
}
.error404 header{
	background:#111;
	padding: 10px 50px;
}
.error404 #content{
	padding:50px 0 180px 0;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.error-w p{
	font-size:20px;
}
/******************** 28. Portfolio masonry ********************/
.portfolio-grid{
	margin:0 0 30px 0;
}
.portfolio-grid .p-item{
	border: 0;
}
/******************** 29. Portfolio single ********************/
.pf-icon{
	font-size:64px;
	line-height:64px;
	margin:0 0 20px 0;
	color:#000;
}
.pf-col p{
	color:#666;
	line-height:20px;
	margin:0 0 30px 0;
}
.p-single #content{
	padding:100px 0;
}
.p-single .p-content{
	padding:100px 0 0 0;
}
.p-single .img-responsive{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
}
.p-single .slide{
	height:600px;
}
.p-single .p-pager{
	
}
.p-single .p-pager a{
	background:#222;
	position:relative;
	display:block;
	font-size: 24px;
    line-height: 24px;
	padding:50px 25px 230px 25px;
}
.p-single .p-pager .arr-left{
	position:absolute;
	left:50px;
}
.p-single .p-pager .arr-right{
	position:absolute;
	right:50px;
}
.p-single .p-pager a:hover{
	background:#222;
	color:#333;
}
/******************** 30. Coming Soon Page ********************/
.coming-soon .caption{
	padding:50px 0;
}
.coming-soon .logo{
	float:none;
	margin-bottom:100px;
}
.coming-soon img{
	height:100%;
}
.coming-soon #top .btn{
	margin-top:30px;
	margin-bottom:100px;
	background-position: left bottom;
    color: #000;
    border-color: #fff;
}
.coming-soon #top .btn:hover{
    border-color: #fff;
	color:#fff;
    background: linear-gradient(to right, #ffffff 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
#valslider{ 
	width:100%;
	height:100%;
	overflow: hidden;
	position:relative;
}
.slide-item{ 
	background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-position: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.countdown{
	display:block;
}
.countdown li {
    color: #fff;
    display: inline-block;
    margin: 0 15px;
}
.timer-block {
    font-size: 24px;
    line-height: 22px;
    font-weight: 400;
    background: none;
    padding: 25px 0;
    width: 70px;
    border: 1px solid #fff;
}
.countdown li p {
    font-size: 14px;
	font-weight: 300;
    text-transform: uppercase;
    margin: 10px 0 0 0;
}
.coming-soon .ico-soc{
	color:#fff;
	font-size:16px;
	padding:0 15px;
}
.coming-soon .ico-soc:hover{
	color:#999;
}
.head-form {
	font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    margin: 0 0 20px 0;
}
#notify button{
	margin-top:10px;
}
/*Pop-up form close effect*/
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

@media screen and (max-width:767px){
.p-filters li {
  float: none;
  text-align: center !important;
}
}

.caption-1 {
  margin-top: 4% !important;
}
div.member-info{
	
	
}
div.member-info p{
	
	
}


@media screen and ( max-width:640px){
img.awards-style{
	width:55% ! important;	
}

.p-item-outer, .member-item-outer {
 background: #2a2016  none repeat scroll 0 0;  
  color: #fff;
  height: 5%;
 margin: 0% auto auto;
  opacity: 0.7;
  transition: all 0.6s ease 0s;
  vertical-align: middle;
  width: 100%;
  padding-top: 10px;
}

.bolder {
  color: #fff;
  font-weight: 700;
}
.item-caption p {
  color: #fff;
  font-style: italic;
  margin: 0;
}
}

p.designation{
	margin-left:35px;	
}

@media screen and (max-width:640px){
.custom-space{
	 margin-top:5px ! important;
	}
p.designation{
	margin-left:20px;
	}
}


a.viewmap:hover{
	color:#fff;	
}
div.architects{
	 margin-left:40px;	
	 font-size:25px;
}

.port-center {
 /*  height: 0%; */
  margin: 0% auto auto !important;
}

.no-margin {
  margin-left: -27px;
}
.to-bottom{
	margin-top:85px;
}
div.cat-menu {
  margin-top: 12px;
}
ul.sub-menu {
  margin: 0 ! important;
}
ul.sub-menu li {
  float: left;
  width: 100px;
}
ul.sub-menu li a {
  float: left;
}
ul.sub-menu li a:hover {
  color: #fff;
}



/*Strip the ul of padding and list styling*/
ul#menu {
  list-style-type: none;
  margin: 0 0 0 12%;
  padding: 0;
  position: absolute;
}

/*Create a horizontal list with spacing*/
ul#menu li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
ul#menu li a {
  color: #fff;
  display: block;
  height: 50px;
  line-height: 50px;
  min-width: 105px;
  text-align: center;
  text-decoration: none;
  font-size:14px;
}

/*Hover state for top level links*/
ul#menu li:hover a {
	
}

/*Style for dropdown links*/
ul#menu li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: #19c589;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
ul#menu li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    background: #2a2016 none repeat scroll 0 0;
    color: #fff;
    display: none;
    margin-top: 50px;
    padding: 5px 15px;
    position: absolute;
    text-decoration: none;
    width: 100%;
    left: 0;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media screen and (min-width : 768px) and (max-width:1024px){
.p-item-outer, .member-item-outer {
    background: #2a2016 none repeat scroll 0 0;
    color: #fff;
    height: 6%;
    margin: 0% auto auto;
    opacity: 0.7;
    transition: all 0.6s ease 0s;
    vertical-align: middle;
    width: 100%;
    padding-top: 10px;
}
}

/*Responsive Styles*/

@media screen and (max-width : 800px){
	/*Make dropdown links appear inline*/
	ul#menu {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	ul#menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul#menu li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
ul#menu li a {
  color: #fff;
  display: block;
  height: 7px;
  line-height: 50px;
  margin-left: -40px;
  margin-top: 40px;
  min-width: 105px;
  text-align: left;
  text-decoration: none;
}
}

nav ul li .sub-menu a {
  border: 0 none;
  font-size: 12px;
  padding: 10px 15px ! important;
}
div.swipe{
	text-align:center;
	margin-bottom:20px;
	display:none;
}


@media screen and (min-width : 320px) and (max-width:639px){
div.swipe{
	text-align:center;
	margin-bottom:20px;
	display:block;
}	
}
.awards-container{
	padding-right: 90px;
	padding-left: 90px;
}
@media screen and (min-width : 320px) and (max-width:1024px){

.p-item-outer, .member-item-outer {
    background: none;
    color: #333;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
	text-shadow: 3px 3px 2px #000;
	
}
}

@media screen and (min-width : 1024px) and (max-width:1024px){
.awards-gap{
	margin-top:6% ! important;
	margin-bottom:6% ! important;
}
	
}

@media screen and (min-width : 320px) and (max-width:768px){
.awards-container{
	padding-right: 0px;
	padding-left: 0px;
}
.news-info {
    width: 100% ! important;
}

	
}
.border10px{
	border: 2px solid #fff;	
}

@media screen and (min-width : 1024px) and  (max-width : 1024px){
	ul#menu li {
    display: inline-block;
    float: left;
    margin-right: -25px;
}
	
}
