@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Fruity microfont';
	src: url('fonts/Fruitymicrofont.woff2') format('woff2'), url('fonts/Fruitymicrofont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Prototype';
	src: url('fonts/Prototype.woff2') format('woff2'), url('fonts/Prototype.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Inconsolata';
	src: url('fonts/Inconsolata-Bold.woff2') format('woff2'), url('fonts/Inconsolata-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Inconsolata';
	src: url('fonts/Inconsolata-Regular.woff2') format('woff2'), url('fonts/Inconsolata-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Bold.woff2') format('woff2'), url('fonts/Comfortaa-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Light.woff2') format('woff2'), url('fonts/Comfortaa-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Regular.woff2') format('woff2'), url('fonts/Comfortaa-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
/* MENU HAMBURGER */
.ham {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 400ms;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.hamRotate.active {
	transform: rotate(45deg);
}
.hamRotate180.active {
	transform: rotate(180deg);
}
.line {
	fill: none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: #fff;
	stroke-width: 5.25;
	stroke-linecap: round;
}
.ham4 .top {
	stroke-dasharray: 40 121;
}
.ham4 .bottom {
	stroke-dasharray: 40 121;
}
.ham4.active .top {
	stroke-dashoffset: -68px;
}
.ham4.active .bottom {
	stroke-dashoffset: -68px;
}

/* INDEX GRID REGULAR */
@media screen and (max-width: 2000px) {
/* STICK CATEGORIES CSS */

		/*.content_containerWhat .cbp-wrapper-outer {
			overflow: visible !important;
		} */
		
.stickyCats {
	position: fixed;
	top: 0;
	width:  100%;
	z-index: 2000;
	background-color: #fff;
	right: 0;
	box-shadow: .5px 0px 4px rgba(0, 0, 0, .3);
}
.xpadding {
	padding-top: 72px !important;
	margin-bottom: 110px !important;
}
.whatContent {
	right: 0;
	position: absolute;
}
.cbp-l-project-container {
	clear: none !important;
	min-width: 45%;
	max-width: 45%;
}
#contentCaption {
	position: absolute;
	z-index: 10000;
	margin: auto !important;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	padding: 5px 12px 6px 12px;
	top: 0;
	text-align: center;
	left: 0;
	right: 0;
	max-width: 35%;
	font-size: 13px;
	line-height: 13px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.cbp-slider .cbp-nav-pagination {
	/*top: 103.5%;*/
	position: relative;
	max-width: 600px;
	float: right;
}
:root {
 --border: 1px dotted #b9c6d4;
 --symbol-color: #888888;
}
.grid {
	height: 100%;
	display: grid;
	grid-template-columns: repeat(2, calc(800px/2));
	grid-template-rows: repeat(2, calc(800px/2));
	margin: auto;
}
.child {
	display: flex;
	align-items: center;
	align-content: center;
	color: var(--symbol-color);
	font-family: 'Inconsolata';
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 150%;
}
.child:nth-child(-n+2) {
	border-bottom: var(--border);
}
.child:nth-child(2n+5) {
	border-right: var(--border);
}
.child:nth-child(2n) {
	border-left: var(--border);
}
.child:nth-child(n+5) {
	border-top: var(--border);
}
}

/* INDEX MOBILE */
@media screen and (max-width: 700px) {
/* STICK CATEGORIES CSS */

		/*.content_containerWhat .cbp-wrapper-outer {
			overflow: visible !important;
		} */
		
.stickyCats {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
	background-color: #fff;
	right: 0;
	box-shadow: .5px 0px 4px rgba(0, 0, 0, .3);
}
.xpadding {
	padding-top: 72px !important;
	margin-bottom: 110px !important;
}
.whatContent {
	right: 0;
	left: 0;
	position: inherit;
}
.cbp-l-project-container {
	clear: both !important;
	min-width: 95%;
	max-width: 95%;
}
.cbp-l-project-details {
	margin-top: 0 !important;
}
.cbp-l-project-container {
	position: relative !important;
}
.cbp-nav-pagination {
	text-align: center !important;
}
#contentCaption {
	position: absolute;
	z-index: 10000;
	margin: auto !important;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	padding: 5px 12px 6px 12px;
	top: 0;
	text-align: center;
	left: 0;
	right: 0;
	max-width: 90%;
	font-size: 13px;
	line-height: 13px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
/*	
.cbp-slider .cbp-nav-pagination {
	top: 123.5%;
	max-width: 600px;
}
.cbp-l-project-container {
	margin: 180px auto 0 !important;
}*/
.child {
	display: flex;
	align-items: center;
	align-content: center;
}
.child:nth-child(-n+2) {
	border-bottom: none;
}
.child:nth-child(2n+1) {
	border-right: none;
}
.child:nth-child(2n) {
	border-left: none;
}
.child:nth-child(n+1) {
	border-top: none;
}
}
#parent {
	display: table;
	height: 80px;
}
#child2 {
	display: table-cell;
	vertical-align: middle;
	width: 320px;
	margin-top: -10px;
	padding: 0 0 18px 12px;
}
/* HEADER CONTAINERS */
.hdrcontainer {
	max-width: 950px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	min-height: 280px;
}
.hdrcontainerWhat {
	max-width: 950px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	min-height: 280px;
}
.hdrcontainerSmall {
	max-width: 950px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	height: 125px;
}
/* REGULAR HEADER */
.hdr1 {
	width: 2.25%;
	background-color: #fff;
	text-align: right;
}
.hdr2 {
	width: 78.5%;
	background-color: #354954;
	border-radius: 0 0 8px 8px;
	position: relative;
	background-image: url(../img/tt_hdr_fx.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 70%;
}
.hdr2s {
	background-image: url(../img/tt_hdr_fx.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 170%;
}
.hdr3 {
	width: 6.25%;
	background-color: #ed8723;
	border-radius: 0 0 8px 8px;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
}
.hdr4 {
	width: 5%;
	background-color: #646e78;
	border-radius: 0 0 8px 8px;
	border-right: 3px solid #fff;
}
.hdr5 {
	width: 5.75%;
	background-color: #4babc1;
	border-radius: 0 0 8px 8px;
	position: relative;
}
.hdr6 {
	width: 2.25%;
	background-color: #fff;
}

/* MOBILE HEADER */
@media screen and (max-width: 600px) {
.hdrcontainer {
	min-height: 125px;
}
.hdr6 {
	width: auto;
}
.hdr2 {
	border-radius: 0 0 5px 5px;
}
.hdr3 {
	border-radius: 0 0 5px 5px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.hdr4 {
	border-radius: 0 0 5px 5px;
	border-right: 1px solid #fff;
}
.hdr5 {
	border-radius: 0 0 5px 5px;
}
}
/* MISC STYLES */
body {
	padding: 0;
	margin: 0;
	font-family: 'Inconsolata' !important;
	font-size: 13px;
	color: #888888 !important;
	line-height: 1.3 !important;
}
img {
	border: none;
}
.content_container {
	max-width: 900px;
	margin: 29px auto 9px auto;
	padding: 0 22px 0 22px;
}
.content_containerWhat {
	max-width: 950px/*98% 925px*/;
	margin: 0 auto 20px auto;
}
.mainMenu {
	bottom: 0;
	right: 0;
	margin: 12px -7px 7px 20px;
	position: absolute;
	text-align: right;
}
.menulink {
	font-family: 'Comfortaa';
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1;
	color: #ffffff;
	text-decoration: none;
	margin: 0 18px 0 0;
}
.menulinkSB {
	font-family: 'Comfortaa';
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1;
	color: #ffffff;
	text-decoration: none;
	margin: 0 18px 0 0;
	padding: 0 0 8px 0;
	font-size: 12px;
	line-height: 1.8 !important;
}
.menulinkSB:hover {
	color: #ed8723;
	font-weight: bold;
}
.menulink:hover {
	color: #ed8723;
	font-weight: bold;
}
.menulink:active {
	color: #ed8723;
	font-weight: bold;
}
.mobmenulink {
	font-family: 'Comfortaa';
	font-weight: normal;
	font-style: normal;
	color: #354954;
	font-size: 11px;
}
.mobmenulink:hover {
	color: #ed8723;
}
/*.cbp-popup-content {
	margin-top: 125px;
}*/


#return-to-top {
	position: fixed;
	bottom: 78px;
	right: 20px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	width: 50px;
	height: 50px;
	display: block;
	text-decoration: none;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	display: none;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 4500;
}
#return-to-top i {
	color: #fff;
	margin: 0;
	position: relative;
	left: 16px;
	top: 13px;
	font-size: 19px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#return-to-top:hover {
	background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
	color: #fff;
	top: 5px;
}
.cbp-l-filters-work .cbp-filter-item {
	margin: 0 !important;
	line-height: 2.5 !important;
}
.cbp-l-filters-work .cbp-filter-counter {
	line-height: 2.5 !important;
}
.cbp-wrapper-outer {
	height: calc(100% + 30px) !important;
}
.hdr2s .cbp-filter-item {
	background-color: transparent !important;
	text-transform: none !important;
	font-family: 'Comfortaa' !important;
	font-size: 11px !important;
	margin: 0 !important;
	line-height: 2.2 !important;
}
.hdr2s .cbp-filter-counter {
	margin: 0 !important;
	line-height: normal !important;
}
.cbp-popup-singlePage-sticky .cbp-popup-navigation-wrap {
	border-radius: 0 0px 12px 12px !important;
}

@media screen and (max-width: 2000px) {
.ttbc_hdr {
	background-image: url(../gfx/tt_hdr_top_v2.png);
	background-size: cover;
	width: 100%;
	height: 18vh;
	background-repeat: no-repeat;
	position: sticky;
	z-index: 200;
	text-align: left;
	background-position: left bottom;
	top: 0;
}
.hdr_logo {
	max-width: 15.25% !important;
	top: 0;
	margin: -59px 0 0 0;
}
.index_inner {
	width: 84%;
	margin: 28px auto 0 auto;
}
.footer {
	position: sticky;
	width: 98%;
	margin: auto;
	border-top: 1px dotted #b9c6d4;
	padding-top: 12px;
	text-align: left;
	font-family: Inconsolata;
	color: #959ba2;
	font-size: 80%;
	letter-spacing: 0;
	line-height: normal;
	bottom: 16px;
	left: 0;
	right: 0;
}
.indexLogo {
	margin: 4.75% 15px 0 0;
}
.indexText {
	margin: auto 0 auto 0;
	padding: 0 62px 0 0;
}
}

@media screen and (max-width: 1000px) {
.ttbc_hdr {
	background-image: url(../gfx/tt_hdr_top_v2.png);
	background-size: cover;
	width: 100%;
	height: 25vh;
	background-repeat: no-repeat;
	position: sticky;
	z-index: 200;
	top: 0;
	background-position: left bottom;
}
.hdr_logo {
	max-width: 25% !important;
	top: 0;
	margin: 0 0 0 0;
}
.index_inner {
	width: 95%;
	margin: auto;
	text-align: center;
}
.footer {
	position: relative;
	clear: both;
}
.indexLogo {
	margin: 12px auto 0 auto;
	text-align: center;
}
.indexPic {
	margin: 12px auto 0 auto;
	text-align: center;
}
.indexText {
	margin-bottom: 0;
	margin-top: 12px;
	margin-right: auto;
	margin-left: calc(8% + 12px);
}
}

@media screen and (max-width: 600px) {
.ttbc_hdr {
	background-image: url(../gfx/tt_hdr_top_v2.png);
	background-size: cover;
	width: 100%;
	height: 25vh;
	background-repeat: no-repeat;
	position: sticky;
	z-index: 200;
	top: 0;
	background-position: left bottom;
}
.hdr_logo {
	max-width: 45% !important;
	top: 0;
	margin: 0 0 0 0;
}
.index_inner {
	width: 100%;
	margin: auto;
	text-align: center;
}
.footer {
	position: relative;
	clear: both;
}
.indexLogo {
	margin: 12px auto 0 auto;
}
.indexText {
	margin-bottom: 0;
	margin-top: 17px;
	margin-right: auto;
	margin-left: calc(8% + 12px);
	padding: 0 12px 0 0;
}
.indexPic {
	margin: auto;
	text-align: center;
}
}
