/*========================================
    =RESET 
=========================================*/

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, ol, ul, li, textarea,
fieldset, form, input, button, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size:100%;
	vertical-align:baseline;
	text-decoration:none; }
	
ol, ul { }


/*------=box sizing is set to border box (width = content + padding + border !)-----------*/

* { 		
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box; }

/*========================================
		=MIXED
=========================================*/
			
/*------=body, =html-------------------*/		

html { -webkit-text-size-adjust: none; }

body {
	line-height: 1.8;
	font-size:.75em;
	text-align:left;
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	}
		
html, body { height:100%;  } 

/*------=global fonts-----------*/	

/* font familiy */
body { font-family: MS Sans Serif, Geneva, sans-serif; } /* main body font */
hgroup {padding: 2.5em 0 0 2.5em; text-align: center;}
/* italic style */
figcaption, blockquote, .flex-caption, #caption p, div.tooltip { font-style:italic; } 

/* font colors */
h1, h2, h4, th, label, .red { color:#FB574C;  }
h1, h2 {text-transform: uppercase;}

body, input, textarea  { color:#444; }

a, code { color:#FB574C; }

#copyright_info, #copyright_info a { color:#fff; }
hr {border: 1px dotted #444;}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

#reviews h4 {
padding-top: 100px;
margin-top: -100px;
}

.critic-reviews {
text-align: center;
padding: 1em 0;
}

/*------=global backgrounds-----------*/	

/* 'gray sand' texture */
.separator, input[type=submit], input[type=button], button, .button,
.flex-direction-nav a, #controls a, #google_map .close, div.tooltip { background:#444; }

/* 75% transprarent white */
body>header, #caption h3, #caption p, 
.flex-control-nav li a, .flex-caption { background:url(../images/white_75_bg.png); } 

/* 50% transprarent white */
table, .styled { background:url(../images/white_50_bg.png); } 


/*------=global transitions-----------*/		

.next_slide, input[type=submit], input[type=button], button, .button, #mobile_nav,
.navigation li a, .flex-direction-nav a, ul.thumbs li a img, #controls a, #google_map .close  {
	-webkit-transition:all .3s; 
	-moz-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;	}
	
	
	
/*------=section-------------------*/

.slide, .page { min-height:100%;}
	 
.slide > .container,
.page > .container { padding:125px 0 50px 0; }

/*------=columns-------------------*/

.text-columns{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    }
    
    .text-columns2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    }
/*------=h-------------------*/
			
h1, h2, h3, h4, h5, h6 { width:100%; }	
	
h1 { 
	line-height:1.5; }

hgroup { margin-bottom:25px; }	
hgroup > h2 { 
	text-align:center;
	font-size:1.05em;
	position:relative;
	font-style:italic;
	margin-bottom:0; }
	
h1 { font-size:2.25em; margin-bottom:.4em; }
h2 { font-size:2em; margin-bottom:.3em; }
h3 { font-size:1.8em; margin-bottom:.15em; }
h4 { font-size:1.3em; margin-bottom:.1em; line-height: 1.5em;}
h5 { font-size:1.2em; margin-bottom:.1em; font-weight: bold; }
h6 { font-size:1.1em; margin:1em 0; }

 .fa-book:before{content:"\f02d"}	
	
/*------=p-------------------*/

p { margin-bottom:1em; }

.small {font-size: .85em;}

.center { 
	float:none; 
	text-align:center; }
.align_left { float:left; }
.align_right { float:right; text-align:right; }

.circle {border-radius: 50%; width: 300px; height: 300px;}
/*------=a-------------------*/

a { cursor:pointer; }		
a:hover { }
	
a.button { display:inline-block; }	

li.active>a, a.active, a.current, a:hover  { color:#000; }
a.current { }	
	
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a { 
	font-size:inherit;
	text-decoration:none;
	color:inherit; }		
	
/*------=ul, =ol, =dl-------------------*/

.slide ul, .slide ol, .slide dl,
.page ul, .page ol, .page dl { margin-bottom:1em; }
	
ul.filter a, ul.curly_brackets, a ul.tabs a { font-size:1.05em; }	


/*------=div-------------------*/

.container { 
	position:relative;
	clear:both; 
}
	
.fixed_pos { position:fixed; }
	
.separator { 
	box-shadow:1px 1px 1px white;
	clear:both; 
	width:50px;
	margin:0 auto 50px auto; }
	
.space { 	
	clear:both;
	height:80px; } 
	
	
/*-------=form elements-------*/

input, textarea { 
	width:100%;
	background:none;
	border:1px solid #000;
	margin-bottom:50px;	
	float:left;
	clear:right;	
	-webkit-transition:border-color .2s;
	-moz-transition:border-color .2s;
	transition:border-color .2s; }
	
input:hover, textarea:hover,
input:focus, textarea:focus { border:1px solid #000; }
	
textarea { height:230px; }

label { 
	float:left;
	margin-bottom:5px; }
input[type=submit], input[type=button], button, .button {
	color:white; 
	padding: .75em 2em;
	border-radius:10px;
	border:none;
	cursor:pointer;
	width:auto;
	display:block;
	text-align:center;
	margin:0 auto 1em auto;
	float:none;
	clear:both; 
	text-transform: uppercase;
	font-size: 1.25em; }	
		
input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover { 
	opacity:.8;
	text-decoration:none; }
	
	
/*------=img, =figure-------------------*/

img {  /* make img fluid */
    max-width: 100%;  
    height: auto;  
    width: auto\9; /* ie8 */ }

figcaption { text-align:center; }
	
img.align_left, figure.align_left { margin-right:1em; }
img.align_right, figure.align_right { margin-left:1em; }
	
		
/*----- =blockquote -----------*/

blockquote { 
	text-align:center;
	position:relative;
	padding:0 3em 0 3em;
	margin:0 0 1em 0;
	font-size: 1.4em; }
	
blockquote:before { 
	font-size:3em;
	color:#ccc;
	opacity:.5;
	position:absolute;
	font-style:normal;
	top:-30px; }
	
blockquote:after { 
	font-size:3em;
	color:#ccc;
	opacity:.5;
	position:absolute;
	font-style:normal;
	top: 1.5em; }

/* adding quotation marks before and after blockquote */
blockquote:before { 
	content: '\201C'; 
	left:0; }
	
blockquote:after { 
	content: '\201D';
	right:0;  }
	
	
/*------=selection color ------*/

*::-moz-selection { background:#444; color:white;  }
*::selection, mark { background:#444; color:white;}

	
/*========================================
		=HEADER
=========================================*/

body>header { 
	top:0; 
	padding:1em;
	position:fixed;
	z-index:1000;
	width:100%;
	}
	
body>header * {	vertical-align:middle; }
	
header .container { padding:0; }

#logo { 
	font-size:2em;
	text-align:left;
	margin-bottom:0; }
	
		
/*------=navigation menu ------*/
		
#mobile_nav	{ display:none; }

.navigation { 
	width:100%;
	display:block;
		text-align: center;
		background-color: rgba(0,0,0,.75);
 }
	 
.navigation li { 
	display:inline-block;	
	margin: 0 .25em;
}
	
.navigation li a { 
	display:inline-block;
	text-decoration:none;
	font-size:1.2em; 
	padding: 1.25em 1em;
	font-style:normal;
	color: #fff;
	font-family: MS Sans Serif, Geneva, sans-serif;

}

.fa {color: #fff;}

		
.navigation li.active a { color:#444; opacity: .25;}
.navigation li a:hover {background-color: #444; color:#fff;}

.sub-nav a {color: #444;}

			
/*========================================
		=PORTFOLIO
=========================================*/

/*-------=filter list-------------------*/

ul.filter { 
	text-align:center;
	position:relative; 
	clear:both; }	
	
ul.filter li { 
	display:inline;
	margin:0 .5em; }
	
ul.filter li.active a {  }

p.proj-title {
	margin-bottom: 5px;
	padding-bottom: 2px;
	color: #000;
}

p.proj-desc {
	margin-bottom: 35px;
	padding-bottom: 2px;
	border-bottom: 1px solid #d3d3d3;
	font-size: .85em;
}

.sample-item {margin: 1em 0;}


/*-------=thumbs list-------------------*/

ul.thumbs li { 
	margin-bottom:30px;
	display:block; }
	
ul.thumbs li a { 
	margin:0; 
	padding:0;
	display:block; }
	
ul.thumbs li a img {
	margin:0;
	display:block; }
		
ul.thumbs li a img:hover { opacity:.8;  }

ul.thumbs li .caption { display:none; }


/*========================================
		=CONTACT
=========================================*/

			
/*-------=response after clicking submit button-------*/
	
#response li { 
	color:#dc6120; 
	text-align:center;}
	
#response li:last-child { margin-bottom:30px; } 

#response li.success { color:#dca020; }

#preloader { 
	width:16px; height:16px;
	position:absolute;
	left:50%;
	margin:-24px 0 0 -8px; }
	
	
	
/*========================================
		=FOOTER
=========================================*/	

body>footer { 
	padding:20px 0 0 0;
	margin-top:-90px; /* pushing footer inside the last slide section */
	position:relative;
	background-color: #444;
	color: #fff; }
	
#copyright_info { margin-top:.7em; font-size: .75em; }


/*------=social icons---------*/

#social_icons { 
	float:right;
	padding:0; }
	
#social_icons li { 
	display:inline-block;
	margin:6px 0 0 10px; }
	
#social_icons li a { 
	display:inline-block;
	text-align:center;
	color:#fff;
	font-size:1.4em; }
	
#social_icons li a:hover { text-decoration:none; }

body>footer .container { padding:0; }


/*------=tooltips---------*/

div.tooltip { 
	color:white; 
	font-size:.9em;
	padding:8px 15px;
	border-radius:20px; }
	
div.tooltip:after { /* tooltip arrow */
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 5px solid transparent;
	border-top-color: #444;
	top: 100%;
	left: 50%;
	margin-left: -5px; }
	
	
/*========================================
		=MEDIA QUERIES (RESPONSIVE D.)
=========================================*/	

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	
	/*-------=portfolio slideshow-------------------*/
	
	/* slideshow image height on this resolution is scalled down to 456px, 
	so we need to add additional 18px for padding and border 
	to our slideshow <div> (456+18px=474px) */	
	#slideshow { height:474px; }		
	
	.container  ul.thumbs .one-third { margin-bottom:20px; }
	
	#controls { right:20px; }						
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) { }

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	/*-------=footer-------------------*/
	
	body > footer {
		height:125px;
		margin-top:-125px;
		color: #fff; }
	
	#social_icons, #copyright_info { 
		text-align:center; 
		float:none; 
		margin-bottom:0; }
		
	#social_icons li:first-child { margin-left:0; }
	

	
	/*-------=mobile navigation-------------------*/
			
	#mobile_nav {
		display:block;
		position:absolute;
		right:0;
		top:0;
		line-height:100%;
		margin-bottom:0;
		font-size:1.5em; }
					
	#mobile_nav:hover { text-decoration:none; }	
	
	ul.navigation {
		clear: both;
		z-index: 10000;
		display: none;
		width:100%;
		margin:15px 0 10px 0;
		 }
	
	.navigation li {
		text-align:left;
		margin:0;
		display:block;
		width:100%; 
		
		}
	
	.navigation li a {
		 clear: both;
		 margin:0 15px 0 0;
		 padding:5px 15px;
		 width:100%;
		 display:block;
		 float:left; 		
		 background-color: #444;
		 opacity: .8;
}
		 
	.navigation li a:hover, .navigation li.active a {  background:#ccc; color: #444; }
		 

}

.smallscreen figure {display: none;}
.bigscreen figure {display: block;}

@media only screen and (min-width: 768px) {
	
	/*-------=mobile navigation-------------------*/
	        #top {padding-top: 35px}
			

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	ul.navigation { display:block !important; }	
	.text-columns{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
    -moz-column-gap: 25px; /* Firefox */
    column-gap: 25px;
    }	
    
    	.text-columns2{
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count: auto;
    -webkit-column-gap: auto; /* Chrome, Safari, Opera */
    -moz-column-gap: auto; /* Firefox */
    column-gap: auto;
    }	
    

    
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	
	

	#caption { padding-left:0; }
	
	.container  ul.thumbs .one-third  { 
		width:145px;
		margin:0 0 10px 10px; }
	.container ul.thumbs .one-third:nth-child(3n+1) { margin-left:10px; }		
	.container  ul.thumbs .one-third:nth-child(2n+1) { margin-left:0; }	

h1 { font-size:1.75em; margin-bottom:.4em; }
h2 { font-size:1.75em; margin-bottom:.3em; }
h3 { font-size:1.35em; margin-bottom:.15em; }
button { font-size: 1.25em;}
.tooltips {display: none;}
.text-columns, .text-columns2{
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count: auto;
    -webkit-column-gap: auto; /* Chrome, Safari, Opera */
    -moz-column-gap: auto; /* Firefox */
    column-gap: auto;
    }
    
    .slide > .container,
.page > .container { padding:35px 0; }
	
hgroup { padding:0; }

.smallscreen figure {display: block; margin-bottom: 15px;}
.bigscreen figure {display: none;}
}