/* =Table of Contents
--------------------------------------------------------------
 - Common Styles
 - Typography
 - Intro Section
 - Services Section
 - Maps and Video Section
 - Portfolio Section
 - Features Section
 - Footer
 - Social
*/

/*******************************
		COMMON STYLES
*******************************/
body { 
	background: #fff;
	color: #424242;
	font: normal 15px "Open Sans", arial, helvetica, sans-serif;
	font-weight: 300;
}

section { overflow: hidden; }
::selection { background: #060606; color: #fff; }
::-moz-selection { background: #060606; color: #fff; }
#loading { display: none; }

/*******************************
		TYPOGRAPHY
*******************************/

p { color: #424242;
	line-height: 1.6em;
	margin: 0 0 20px;
}

em { font-style: italic; }
strong { font-weight: 400; }
small { font-size: 0.8em; }

h1,h2,h3,h4,h5,h6 {
	color: #060606;
	font-style: normal;
	font-weight: 300;
	line-height: 1.17em;
	margin: 0 0 20px;
}

h1 {
	font-size: 3.5em;
	text-transform: uppercase;
	letter-spacing: 0.20em;
}

h2 {
	font-size: 2em;
	text-transform: uppercase;
	letter-spacing: 0.20em;
}

h3 {
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-weight: 400;
}

h4 {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 400;	
}

h5 {
	font-size: 1em;
	font-weight: 400;
}

h6 {
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 400;
}
canvas {margin:30px 0 40px}

/*******************************
		INTRO SECTION
*******************************/
.intro{height:950px;background:url(../images/preload-bk.png);position:relative;}
.intro .container{padding-top:170px;}
.container{text-align:center;padding-top:70px;}
.intro .arrow{margin:100px 0 0 0}
.container-canvas{  position: absolute;  height: 100%;  width: 100%;}
.container-canvas canvas{margin:0}
.controls {
  font-smoothing: subpixel-antialiased;
  position: absolute;
  right: 20px;
  top: 0;
  height:8px !important;
}

.vignette {
  background-image: -webkit-radial-gradient(50% 50%, ellipse, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
  background-image: radial-gradient(50% 50%, ellipse, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
}
.noise {background-image: url("../images/noise.png"); opacity: 0.075;}
.big-separator-black{
	width:80px;
	height:3px;
	background:black;
	margin:0 auto;
	border-bottom:solid 1px white}
	
.title-separator2{
	width:180px;
	height:4px;
	background:white;
	margin:0 auto;}
	
.button-white {
	cursor: pointer;
	display: inline-block;
	padding: 10px 25px 10px 25px;
	letter-spacing: 3px;
	color: #fcf9ef;
	border: 1px solid #fcf9ef;
	text-decoration: none;
	font-family: 'bold';
	font-size: 11px;}

.button-white:hover { color: #000; background: #fcf9ef; }
	
.button-black {
	cursor: pointer;
	display: inline-block;
	padding: 10px 0 10px 0;
	width: 140px;
	border: 1px solid #000;
	letter-spacing: 3px;
	color: #000 !important;
	background: none;
	text-decoration: none;
	font-family: 'bold';
	font-size: 11px;}	
	
.button-black:hover { color: #fcf9ef; background: #000; border: 1px solid #fcf9ef; cursor: default; }
/*******************************
		SERVICES SECTION
*******************************/
.services{background:#222;}
.services .container {padding-bottom:50px}
.about-service {padding-bottom:40px;}
.services h2{color:white;text-shadow:none;}
.services h6{color:white;text-shadow:none;}
.services p{color:white;}

/*******************************
		MAPS and VIDEO SECTION
*******************************/
.gmap {height: 500px;}
.video{
	background:#121212 url(../images/default.jpg) no-repeat 50% 0;
	background-size: 100%;}
.video .fluid-width-video-wrapper{margin:45px 0 55px 0}
.video #section6 h2{color:white;text-shadow:none;}
.video #section6 p{color:white;}
.video iframe{width:960px; height:580px;border-width:0px}


/*******************************
		PORTFOLIO SECTION
*******************************/
.portfolio-container{padding:0 0 70px 0}
.tabs-portfolio{border-bottom:solid 1px #fff;height:39px;float:left;cursor:pointer}
.tabs-portfolio li{
	width:110px;
	float:left;
	border:solid 1px #D6D5D6;
	margin-right:-1px;
	position:relative;
	background:#fff;
}
.tabs-portfolio li:last-child{border-right:solid 1px #D6D5D6}
.tabs-portfolio a{display:block;height:37px;line-height:37px;text-align:center;color:#70767a;font-size:12px;}
.tabs-portfolio .selected{
	z-index:50;
	background:#000;
	color:#fff;
}
.tabs-portfolio .selected a{color:#fff;}
.tabs-portfolio li a:hover{color:#666 !important;}
nav.primary {
	width:auto;
	margin:30px auto 50px auto;
	display:table;
}

nav.primary ul li  {
	float:left;
	list-style:none;
}

.entry {
	position:relative;
	float:left;
	cursor:pointer;
	width:160px;
	height:160px;
	padding:0;
}

.portfolio { margin:0; }

.magnifier {
	background:rgba(0,0,0,.7) url(../images/magnifier.png) no-repeat center;
	position:absolute;
	top:10px;
	left:10px;
	bottom:10px;
	right:10px;
	opacity:0;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
.video-hover {
	background:rgba(0,0,0,.7) url(../images/video.png) no-repeat center;
	position:absolute;
	top:10px;
	left:10px;
	bottom:10px;
	right:10px;
	opacity:0;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}

.entry:hover .video-hover,
.entry:hover .magnifier { opacity:1; }

img {
	max-width:100%;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
        transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
   -moz-transition-property: height, width;
        transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property:    -moz-transform, opacity;
        transition-property:         transform, opacity;
}

/*******************************
		FEATURES SECTION
*******************************/
.features{background:#fafbfa}
#features{
	padding:15px 0 60px 0;
	position:relative;
	border-bottom:solid 1px #C5CAC5;
	background-color:#fafbfa;
}
#tabs{border-bottom:solid 1px #fff;height:39px;float:left;margin-left:100px;cursor:pointer}
#tabs li{
	width:120px;
	float:left;
	border:solid 1px #D6D5D6;
	margin-right:-1px;
	position:relative;
	background:#fff;
}
#tabs li:last-child{border-right:solid 1px #D6D5D6}
#tabs a{display:block;height:37px;line-height:37px;text-align:center;color:#70767a;font-size:12px;}
#tabs .active{
	border:solid 1px #C4C3C4;
	z-index:50;
	background:#000;
}
#tabs .active a{color:#fff;}
#tabs li a:hover{color:#666 !important;}
#tour-segments{clear:both;padding-top:40px;overflow:hidden;position:relative;height:640px}
#tour-segments .segment{
	height:610px;
	background:url("../images/iphone.png") 0 0 no-repeat;
	padding:50px 120px 0 420px;
	position:absolute;
	top:40px;
	left:0;
	opacity:0;
	z-index:10;
}
#tour-segments .segment.active{z-index:50}
#tour-segments .screen{position:absolute;top:110px;left:100px;height:408px;width:230px}
.feature-description{
	text-align:left;
	width:375px;
	margin-top:35px;
	border:solid 1px #C3C2C3;
	background:#fff;
	padding:0 20px;
}
.feature-description li{height:45px;line-height:45px;border-bottom:solid 1px #D6D5D6;box-shadow:0 1px 0 #F7F6F7;font-size:13px;}
.feature-description li:last-child{border-bottom:none;box-shadow:none}
#tour-segments .useEverywhere{position:absolute;bottom:60px;right:120px;width:375px;border-top:solid 1px #DADADA;box-shadow:inset 0 1px 0 #F8F8F8;padding:40px 0 0 0}
#tour-segments .useEverywhere h3{margin-bottom:15px;font-weight:bold;font-size:1.3em}

/*******************************
		FOOTER SECTION
*******************************/

footer { width: 100%; background: #111;}
footer h2{color:white;text-shadow:none}
.contact { text-align: center; }
.copyright{padding:50px 0 0 0}
.contact ::selection {
	background: #fff;
	color: #111; 
}

.contact ::-moz-selection { 
	background: #fff;
	color: #111; 
}

.contact li img { margin-bottom: 15px; }

.contact a {
	display: block;
	font-size: 12px;
}

/*******************************
		SOCIAL SECTION
*******************************/
.social {position:absolute;bottom:30px;width:100%}
.social img{border:0; width:20px; height: 20px;}
.social a{display:inline-block !important}
.social a:hover{padding:0;margin:0;background:transparent !important;}