/* TasBlock CSS UNDER CONSTRUCTION */

html, body, * { padding:0; margin:0; font-family: "Oswald", Helvetica, san-serif; font-weight: 200; font-size: 18px; }
html, body { height: 100%; }

blockquote { margin: 20px; }

strong { font-weight: 400; }

img { border:0px none; }

ul { margin: 0 20px; }

a { text-decoration: none; transition: all ease-in-out 0.5s; cursor: pointer; }

.tbNoSelect { 
	-webkit-touch-callout: none; /* iOS Safari */ 
	-webkit-user-select: none; /* Safari */ 
	-khtml-user-select: none; /* Konqueror HTML */ 
	-moz-user-select: none; /* Firefox */ 
	-ms-user-select: none; /* Internet Explorer/Edge */ 
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ 
}

.tbHeader { width: 100%; height:130px; position: fixed; top:0; left: 0; z-index: 900; pointer-events: none; }
.tbHeader div { position: absolute; top:50%; transform: translateY(-50%); pointer-events: auto; }
.tbHeader div:nth-child(1) { left:40px; }
.tbHeader div:nth-child(2) { right:40px; }
.tbHeader div:nth-child(2) { transition: all ease-in-out 3s; top:-50%; }
.tbHeader div:nth-child(2).showNavBtn { transition: all ease-in-out 1s; top:50%; }

.tbNav { transition: all ease-in-out 0.3s; width: 440px; height:100%; background-color: #191919; position: fixed; top:0; right: 0; z-index: 950; }
.tbNav.hideNav { transition: all ease-in-out 0.3s; right:-440px; }

#tbNavOverlay { width: 100%; height:100%; position: fixed; top:0; right: 0; z-index: 940; }
#tbNavOverlay.hideOverlay { top:100%; }

.tbNavHeader { width: 100%; height:130px; position: relative; }

#tbCloseNav { transition: all ease-in-out 1s; transform:rotate(0deg); position: absolute; top:50%; right:40px; transform: translateY(-50%); }
#tbCloseNav.hideCloseNav { transition: all ease-in-out 0.5s; transform:rotate(-180deg); top: -50%; }

.tbNavLinks { width: 100%; position: absolute; top:50%; left:40px; transform: translateY(-50%); }
.tbNavLinks a { display: block; color: #FFF; font-size: 36px; font-weight: 200; line-height: 40px; text-transform:uppercase; }
.tbNavLinks a:hover { color: #52a9b0; }

.tbRegion { width:100%; height: 100%; color: #FFF; }
.tbRegion.tbInnerPage { width:60%; margin-left:40%; color: auto; }

.tbSection { display:block; width:100%; height:100%; overflow: hidden; background: url() center center no-repeat; background-size: cover; position: relative; }
.tbSection > div { position:absolute; width:90%; top:50%; left:50%; transform:translate(-50%,-50%); text-align: center; }
.tbSection > div > h1 { font-weight: 400; font-size: 60px; text-transform: uppercase; } 
.tbSection > div > h2 { font-weight: 200; font-size: 36px; }
.tbSection > div > a { display:block; margin:20px auto; font-weight: 300; font-size: 20px; text-transform: uppercase; padding:5px; width: 140px; color: #333; background-color: #FFF; }
.tbSection > div > a:hover { color: #FFF; background-color: #333; }

.tbSideBar { display:block; width:40%; height:100%; overflow: hidden; background: url() left center no-repeat; background-size: cover; position:fixed; top:0; left:0; }
.tbSideBar > div { position:absolute; bottom:45px; left:50px; right:50px; color: #FFF; text-align: right; }
.tbSideBar > div > h1 { font-weight: 400; font-size: 60px; text-transform: uppercase; }
.tbSideBar > div > h2 { font-weight: 200; font-size: 36px; }

.tbInnerPage .tbSection { height: auto; min-height: 120%; }
.tbInnerPage .tbSection > div { position:relative; top:140px; left:0; margin:0 40px 250px; transform: translate(0%,0%); text-align:left; }
.tbInnerPage .tbSection > div h1 { font-size: 36px; font-weight: 300; text-transform: capitalize; color:#52a9b0; }
.tbInnerPage .tbSection > div h2 { font-size: 25px; font-weight: 400; text-transform: capitalize; padding:30px 0 10px; }
.tbInnerPage .tbSection > div p { font-size: 18px; font-weight: 200; padding:15px 0; }
.tbInnerPage .tbSection img { max-width: 100%; }

.tbInnerPage { position: relative; }
ul.tbsiNav { display:block; position:relative; margin:0; margin-bottom: 60px; }
ul.tbsiNav li { display: inline-block; margin:0; list-style-type: none; }
ul.tbsiNav li a { padding:5px; font-size: 18px; font-weight: 200; text-transform:uppercase; background-color: transparent; color:#52a9b0; }
ul.tbsiNav li a:hover, 
ul.tbsiNav li a.tbsiActive { background-color: #52a9b0; color: #FFF; }

.tbBODBox { display: table; width: 100%; table-layout: fixed; padding:20px 0; border-bottom: 1px solid #bdbdbd; }
.tbBODBox:last-child { border-bottom: 0px none; }
.tbBODBox > div:nth-child(1) { display: table-cell; width: 60%; vertical-align: bottom; padding-right:20px; }
.tbBODBox > div:nth-child(2) { display: table-cell; width: 40%; vertical-align: middle; }
.tbBODBox > div:nth-child(2) > img { max-width: 100%; overflow: hidden; }
.tbBODBox { -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: gray; filter: grayscale(100%); transition: all ease-in-out 0.5s; }
.tbBODBox:hover { -webkit-filter: grayscale(0); -webkit-filter: grayscale(0%); filter: none; filter: grayscale(0%); transition: all ease-in-out 0.5s; }

.tbInnerPage .tbSection > div div.tbProjectTN { margin: 0 auto; display: block; text-align:left; width: 100% }
.tbInnerPage .tbSection > div div.tbProjectTN > a { -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: gray; filter: grayscale(100%); transition: all ease-in-out 0.5s; }
.tbInnerPage .tbSection > div div.tbProjectTN > a:hover { -webkit-filter: grayscale(0); -webkit-filter: grayscale(0%); filter: none; filter: grayscale(0%); transition: all ease-in-out 0.5s; }
.tbInnerPage .tbSection > div div.tbProjectTN > a > img { width:170px; }

.tbFooter { font-weight: 200; font-size: 16px; height:100px; position: relative; background: url(../img/layout/tb-logo.svg) center center no-repeat; background-color:#FFF; color: #333; }
.tbFooter a:hover { -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: gray; filter: grayscale(100%); transition: all ease-in-out 0.5s; }
.tbFooter div { position: absolute; top:50%; transform: translateY(-50%); }
.tbFooter div:nth-child(1) { left:40px; }
.tbFooter div:nth-child(2) { right:40px; }

.tbsOurProducts { background-image: url(../img/bg/bg-ourproducts.jpg); }
.tbsAboutUs { background-image: url(../img/bg/bg-aboutus.jpg); }
.tbsProjects { background-image: url(../img/bg/bg-completedprojects.jpg); }
.tbsContact { background-image: url(../img/bg/bg-contact.jpg); }
.tbsDark { background-color:#333; color: #FFF; }
.tbsBright { background-color:#d3d3d3; color: #333; }

.tbSeparator20px { display: inline-block; height:20px; }
.tbSeparator40px { display: inline-block; height:40px; }

@media (max-width: 1150px) {
	.tbInnerPage .tbFooter { text-align:center; height:auto; padding: 30px 10px; background-position: center 30px; }
	.tbInnerPage .tbFooter div { position: relative; top:0; transform: translateY(0%); }
	.tbInnerPage .tbFooter div:nth-child(1) { left:0; margin-top:60px; }
	.tbInnerPage .tbFooter div:nth-child(2) { right:0; margin-top: 10px; }
}

@media (max-width: 1000px) {
	.tbSideBar { width:100%; position:relative; height: 350px; }
	.tbRegion.tbInnerPage { width:100%; margin-left:0; }
	.tbInnerPage .tbSection { height: auto; min-height: auto; }
	.tbInnerPage .tbSection > div { top:0; left:0; margin:140px 40px; }
	ul.tbsiNav { display:none; }
}

@media (max-width: 700px) {
	.tbInnerPage .tbSection > div div.tbProjectTN { text-align:center; }
	.tbInnerPage .tbSection > div div.tbProjectTN > a { display: inline-block; }
	.tbInnerPage .tbSection > div div.tbProjectTN > a > img { width:100px; }

	.tbFooter { text-align:center; height:auto; padding: 30px 10px; background-position: center 30px; }
	.tbFooter div { position: relative; top:0; transform: translateY(0%); }
	.tbFooter div:nth-child(1) { left:0; margin-top:60px; }
	.tbFooter div:nth-child(2) { right:0; margin-top: 10px; }
}

@media (max-height: 600px and orientation: landscape) {
	.tbSideBar { height: 250px; }

	.tbSection > div > h1 { font-size: 45px; }
	.tbSection > div > h2 { font-size: 20px; }
	.tbSideBar > div > h1 { font-size: 45px; }
	.tbSideBar > div > h2 { font-size: 20px; }

	.tbInnerPage .tbSection > div { margin:40px 20px; }
}

@media (max-width: 600px) {
	.tbHeader { background-color: rgba(0,0,0,0.7); height:100px; }
	.tbHeader div:nth-child(1) { left:20px; }
	.tbHeader div:nth-child(2) { right:20px; }
	.tbNavHeader { height:100px; }
	#tbCloseNav { right:20px; } 

	.tbSection > div > h1 { font-size: 45px; }
	.tbSection > div > h2 { font-size: 20px; }

	.tbSideBar { height: 430px; }
	.tbSideBar > div { text-align: center; bottom:20px; right:0; left:0; display: block; margin:0 auto; }
	.tbSideBar > div > h1 { font-size: 45px; }
	.tbSideBar > div > h2 { font-size: 20px; }

	.tbInnerPage .tbSection > div { margin:40px 20px; }

	.tbBODBox { display: block; }
	.tbBODBox > div:nth-child(1) { display: block; width: 100%; padding-right:0; }
	.tbBODBox > div:nth-child(2) { display: table-cell; width: 100%; }
	.tbBODBox > div:nth-child(2) > img { display: block; margin: 0 auto; max-width:80%; }
}

@media (max-width: 440px) {
	.tbNav { width: 100%; }
}