body{
	margin-top:50px;
}

.green{
	color:#016333;
}

a{
	color:#9e8d5c;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	font-size:23px;
	text-transform:uppercase;
	color:#000;
}

h2{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:400;
	font-size:21px;
	text-transform:uppercase;
	color:#9e8d5c;
}

h3{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	font-size:18px;
	text-transform:uppercase;
	color:#016333;
}

h4{
	color:#016333;
}

.seperator{
	display:block;
	width:40px;
	height:2px;
	background-color:#000;
	margin:20px auto 40px auto;
}

.brand-trespa-header{
	display: none;
}

#header-logo{
	width:145px;
	height:28px;
}

.navbar-brand {
	position: relative;
    padding: 10px 15px;
}

.navbar a{
	font-size:12px;
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:400;
	text-transform:uppercase;
}

.navbar .nav > li > a {
	padding-left:5px;
	padding-right:5px;
}
.navbar-brand .header-logo-trespa{
	display: inline;
	position: relative;
	top:-6px;
	left: 25px;
	width:80px;
	height:30px;
}
.navbar-inverse{
	background-color:#FFF;
	border:none;
}

.navbar-inverse .navbar-nav > li > a {
    color: #000;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #FFF;
    color: #939598;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #939598;
  background-color: transparent;
}

.navbar-inverse .navbar-toggle{
	border-radius:0px;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: #CCC;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #016333;
}

.navbar-inverse .navbar-toggle:hover{
    background-color: #6d6e71;
}

.navbar-inverse .navbar-toggle:hover .icon-bar {
    background-color: #FFF;
}

.navbar-inverse .navbar-toggle {
    border:none;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000000;
    background-color: transparent;
}

.dropdown-menu{
	background-color:#343a3f;
	box-shadow:none;
	border-radius:0px;
}

.dropdown-menu > li > a {
    color: #939598;
	text-transform:uppercase;
}


/* BUTTONS */

.btn-default{
	border-radius:0px;
	border:2px solid #016333;
	text-transform:uppercase;
	color:#016333;
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:600;
	background-color:transparent;
	margin-bottom:10px;
}

.btn-narrow{
	border-radius:0px;
	border:0px solid #bcbec0;
	text-transform:uppercase;
	color:#FFF;
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:600;
	background-color:#bcbec0;
	padding:1px 15px;
}

/* SECTIONS */

#home-intro{
	padding-top:70px;
	padding-bottom:70px;
}

#home-intro h2{
	font-family:"Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	font-size:18px;
	text-transform:none;
	color:#016333;
	margin-bottom:20px;
}

#home-intro p{
	margin-top:30px;
	margin-bottom:30px;
}

#home-main-img, #architects-main-img{
	padding:0px;
	overflow:hidden;
}

.img-pane h3{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	text-align:center;
	font-size:17px;
	color:#FFF;
	font-weight:600;
}

.img-pane h3 .seperator{
	background-color:#FFF;
}

#home-top-top-img{
	background-image:url(images/home-top-top-img-bg.jpg);
	background-position:right;
	background-repeat:no-repeat;
	height:217px;
}

#home-top-bottom-img{
	background-color:#016333;
	height:217px;
}

#home-page-mobile{
	background-image:url(images/home-top-left.jpg);
	background-position:center center;
}

#home-page-mobile h1{
	color:#fff;
	text-align:center;
	margin-top:150px;
	margin-bottom:150px;
	font-size:40px;
	text-shadow: 0 0 4px #000;
}

.architects-button{
	margin-top:20px;
}

#eye-break {
  background: url(images/para-scroll-motat.jpg) 50% 0 repeat fixed;
  min-height: 380px;
  height: 100px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

#tryptic{
	padding-top:60px;
	min-height:100px;
	padding-bottom:60px;
}

#tryptic h2{
	margin-top:0px;
	margin-bottom:20px;
	font-size:22px;
}

#tryptic p{
	margin-bottom:30px;
}

.tryp-inner{
	position:relative;
	background-color:#f1f2f2;
	padding:30px;
}

.tryp-panel-img{
	min-height:150px;
	margin-bottom:20px;
}

.home-page #tryp1 .tryp-panel-img{
	background: url(images/tryp-1-bg.jpg) center center;

}

.home-page #tryp2 .tryp-panel-img{
	background: url(images/tryp-2-bg.jpg) center center;
}

.home-page #tryp3 .tryp-panel-img{
	background: url(images/tryp-3-bg.jpg) center center;
}

.arch-page #tryp1 .tryp-panel-img{
	background: url(images/Architect-boxout-Masterspec.jpg) center center;

}

.arch-page #tryp2 .tryp-panel-img{
	background: url(images/Architect-boxout-Green-Building.jpg) center center;
}

.arch-page #tryp3 .tryp-panel-img{
	background: url(images/Architect-boxout-Think-Trespa.jpg) center center;
}

#recent-projects{
	background-color:#e6e7e8;
	padding-top:20px;
	padding-bottom:60px;
}

#recent-projects h3{
	font-weight:600;
	margin-top:30px;
}

#recent-projects-carousel .item{
	position:relative;
	z-index:1;
	display: block;
	cursor: pointer;
	margin: 5px;
	text-align: center;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	overflow:hidden;
}

#recent-projects-carousel .item img{
	display: block;
	width: 100%;
	height: auto;
}

#recent-projects-carousel .blacken{
	position:absolute;
	background-color:#000;
	opacity:0;
	z-index:1;
	min-height:1000px;
}

#recent-projects-carousel .item h3{
	position:absolute;
	font-weight:600;
	color:#fff;
	padding:0 10px;
	line-height:25px;
	text-align:center;
	margin:0px;
	z-index:10;
	opacity:0;
}

#recent-projects-carousel .item h3 .small{
	color:#FFF;
	font-size:14px;
	font-weight:600;
}

/* Brand header */

#brand-page-header{
	margin-bottom:10px;
}

.brand-page-header-container{
	height:300px;
	background-color:#f1f2f2;
	background-position:center;
}

#brand-page-header-left{
	float:left;
	background-image:url(images/page_header/left1.jpg);
}

#brand-page-header-right{
	float:right;
	background-image:url(images/page_header/right1.jpg);
}

/* /. Brand header */

/* Products section */

#products-grid{
	padding-top:40px;
	padding-bottom:40px;
}

#products-grid .thumbnail{
	border:none;
}

#products-grid a{
	text-decoration:none;
	color:#333;
}

#products-grid .caption{
	background-color:#f1f2f2;
	/*width:210px;*/
	width:100%;
	margin:0 auto;
	padding-left:15px;
	padding-right:15px;
}

#products-grid .caption h3{
	font-family:"Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	font-size:17px;
	margin-top:10px;
}

#products-grid .double .caption{
	width:100%;
}

/* /. Products section */

/* Architects section */

#architects-main-img{
	overflow:hidden;
}

.architects-form{
	background-color:#d1d3d4;
	padding-top:20px;
	padding-bottom:30px;
	margin-top:10px;
}

.architects-form h3{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	color:#58595b;
	font-size:14px;
	margin-top:10px;
}

.architects-form p{
	font-family:"Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	font-size:11px;
	line-height:14px;
}

.architects-form label{
	font-family:"Raleway", "Helvetica Neue", Arial, sans-serif;
	font-weight:500;
	color:#58595b;
	font-size:12px;
	text-transform:uppercase;
	margin-bottom:2px;
}

.architects-form .form-control{
	border-radius:0px;
	height:22px;
	font-size:10px;
}

.architects-form .form-group{
	margin-bottom:6px;
}

.architects-form .checkbox{
	margin-top:0px;
	margin-bottom:2px;
	position:relative;
	top:-1px;
}

.architects-form .text-area label{
	display:block;
}

.architects-form #details{
	width:300px;
	height:150px;
}

/* /. Architects section */

/* Generic Page section */

#base-page-content{
	background-color:#f1f2f2;
	padding-top:40px;
	padding-bottom:40px;
}

.img-column{
	margin-top:40px;
}

#base-page-content p.intro{
	color:#016333;
	font-weight:600;
	font-size:15px;
}

/* /. Generic Page section */

footer{
	font-size:12px;
	text-transform:uppercase;
	padding-top:40px;
	padding-bottom:40px;
	text-align:center;
}

.footer-details{
	margin-bottom:30px;
}

.legal-title{
	opacity:0;
	display:none;
}

footer h4{
	font-size:12px;
	font-weight:700;
}

footer img{
	margin-left:20px;
}

/* Project Section */

ul.project-details-list{
	list-style-type:none;
	padding-left:0px;
	color:#9e8d5c;
	font-size:14px;
	margin-top:20px;
	margin-bottom:20px;
}

ul.project-details-list li{
	margin-top:10px;
	margin-bottom:10px;
}

#gallery-section{
	padding-top:30px;
	padding-bottom:40px;
}

#gallery-section h2{
	text-align:center;
}

/* /. Project Section */

/* Stuff */

.slideshowlink{
	display:none;
}

@media (min-width: 514px) {
	#products-grid .caption{
		width:210px;
	}

	#products-grid .double .caption{
		width:447px;
	}
}

/* RESPONSIVE MEDIA QUERIES */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.navbar .container{
	padding:0px;
}

body{
	margin-top:100px;
}
.brand-trespa-header{
	display: block;
	height: 70px;
	position: relative;
}
.header-logo-dtech{
	position: absolute;
	top:30px;
	left:0px;
}
.header-logo-trespa{
	position: absolute;
	top: 10px;
	left: 300px;
}
#header-logo{
	display:none;
}
.navbar{
	min-height:100px;
}
.navbar-brand .header-logo-trespa{
	display: none;
}
.navbar-right {
    float: right !important;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: #939598;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #FFF;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #939598;
    color: #FFF;
}

/* FOOTER */
footer{
	text-align:left;
}

.footer-details{
	margin-bottom:30px;
}

footer h4{
	font-size:12px;
	font-weight:700;
}

footer .footer-logos{
	text-align:right;
}

footer img{
	margin-left:20px;
}

/*SECTIONS*/
.tryptic-panel{
	padding-left:5px;
	padding-right:5px;
}
#tryp1{
	padding-left:15px;
}

#tryp3{
	padding-right:15px;
}
#tryptic h2{
	margin-top:0px;
	margin-bottom:20px;
	font-size:22px;
	min-height:100px;
}
.tryp-inner{
	min-height:340px;
}

.tryp-inner a{
	position:absolute;
	bottom:20px;
}

/*HOME PAGE TOP */

#home-main-img, #architects-main-img{
	margin-bottom:5px;
}

#home-top-top-img{
	height:217px;
	width:370px;
	margin-right:10px;
}
#home-top-bottom-img{
	height:217px;
	width:370px;
}

/* Products section */

#products-grid .caption, #products-grid .double .caption{
	width:100%;
}

/* /. Products section */

/* Architects page */

.architects-form{
}

/* /. Architects page */

/* App Section */

.session_error{
	font-weight:bold;
	color:#CC0000;
}

/* /. App Section */

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
body{
	margin-top:135px;
}
#header-logo{
	display: none;
}
.navbar .nav > li > a {
	padding-top:30px;
}
.navbar-right {
    float: right !important;
}

.navbar .container{
	padding:0px 15px;
}
/*
.dropdown-menu{
	top:-1px;
}
*/
/* FOOTER */
.legal-title{
	opacity:0;
	display:block;
}

#tryptic h2{
	margin-top:40px;
	margin-bottom:20px;
	font-size:22px;
	min-height:80px;
}
.tryp-inner{
	min-height:370px;
}

/*HOME PAGE TOP */

#home-main-img, #architects-main-img{
	background:none;
	margin-left:15px;
	margin-right:0;
	padding:0px;
	width:595px;
}

#home-top-top-img{
	width:345px;
	height:174px;
	padding:0px 15px;
	margin-left:10px;
}

#home-top-bottom-img{
	width:345px;
	height:173px;
	padding:0px 15px;
	margin-top:10px;
	margin-left:10px;
}

/* Generic Page section */

.img-column img{
	margin-bottom:10px;
}

/* /. Generic Page section */

/* Architects Page */

.architects-form{
	background-color:#d1d3d4;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	height:358px;
}
/* /. Architects Page */
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body{
	margin-top: 100px;
}
.brand-trespa-header{
		display: none;
}
.navbar-brand .header-logo-trespa{
	display: block;
	width:140px;
	height:56px;
	top:10px;
	left:300px;
	position: absolute;
}
.navbar .nav > li > a {
	padding-top:40px;
}
#header-logo{
	display: block;
	width:251px;
	height:48px;
	margin-top:15px;
}
.navbar-right {
    float: right !important;
}
.dropdown-menu{
	top:99px;
}
/* HOME PAGE TOP */

#home-main-img, #architects-main-img{
	background:none;
	margin-left:15px;
	margin-right:0px;
	padding:0px;
	width:765px;
	height:460px;
}

#home-top-top-img{
	width:376px;
	height:225px;
	padding:0px 15px;
	margin-left:10px;
}

#home-top-bottom-img{
	width:376px;
	height:224px;
	padding:0px 15px;
	margin-top:10px;
	margin-left:10px;
}

/* Architects Page */

.architects-form{
	height:460px;
	width:374px;
	margin-left:10px;
}

/* /. Architects Page */
}

/* INTERACTIVE */

#interactive{
	width:780px;
	height:401px;
	position:relative;
}

.int_img{
	position:absolute;
	left:0;
	top:0;
}

.int_thumb{
 	cursor:pointer;
 }

a.dot{
 	background-image:url("images/interactive/button.png");
    background-position:center center;
    background-repeat:no-repeat;
    height:50px;
    text-decoration:none;
    width:50px;
	z-index:100;
	position:absolute;
}

a.dothover{
	background-image:url("images/interactive/button_over.png");
	background-position:center center;
    background-repeat:no-repeat;
}

#dot_3d_01{
	left:120px;
	top:105px;
}

#dot_3d_02{
	left:20px;
	top:145px;
}

#dot_3d_03{
	left:245px;
	top:260px;
}

#dot_3d_04{
	left:645px;
	top:280px;
}

#dot_3d_05{
	left:280px;
	top:303px;
}

#dot_3d_06{
	left:600px;
	top:200px;
}

#dot_3d_07{
	left:165px;
	top:190px;
}

#dot_3d_08{
	left:610px;
	top:80px;
}

#dot_3d_09{
	left:380px;
	top:120px;
}

#dot_3d_10{
	left:615px;
	top:315px;
}

#dot_3d_12{
	left:245px;
	top:100px;
}

#dot_3d_13{
	left:573px;
	top:140px;
}

#dot_3d_14{
	left:295px;
	top:170px;
}

#dot2_3d_01{
	left:170px;
	top:105px;
}

#dot2_3d_02{
	left:175px;
	top:265px;
}

#dot2_3d_03{
	left:245px;
	top:145px;
}

#dot2_3d_04{
	left:285px;
	top:320px;
}

#dot2_3d_05{
	left:340px;
	top:160px;
}

#dot2_3d_06{
	left:340px;
	top:230px;
}

#dot2_3d_07{
	left:615px;
	top:75px;
}

#dot2_3d_08{
	left:380px;
	top:90px;
}

#dot2_3d_09{
	left:405px;
	top:135px;
}

#dot2_3d_10{
	left:385px;
	top:315px;
}

#dot2_3d_11{
	left:140px;
	top:180px;
}

#dot2_3d_12{
	left:245px;
	top:95px;
}

#dot2_3d_13{
	left:293px;
	top:90px;
}