/* © copyright Intouch Interactive Marketing - Carl-Heinz Benseler :: the css gods will strike down on tables with great vengence! */
html, body, div, h1, h2, h3, h4, h5, h6, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, figure, hr{margin:0; padding:0; font-size:100%; } 
h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%; line-height:160%;}
input[type="submit"]{cursor:pointer}img{border:none}ul,ol{padding:0 0 0 30px; margin:0; text-align:left}
@font-face {font-family:"Font-Regular"; src:url("../fonts/Font-Regular.eot"); src:url("../fonts/Font-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Font-Regular.woff") format("woff"), url("../fonts/Font-Regular.ttf") format("truetype"), url("../fonts/Font-Regular.svg#Font-Regular") format("svg"); font-weight:normal; font-style:normal;}
@font-face {font-family:"Font-Light"; src:url("../fonts/Font-Light.eot"); src:url("../fonts/Font-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Font-Light.woff") format("woff"), url("../fonts/Font-Light.ttf") format("truetype"), url("../fonts/Font-Light.svg#Font-Light") format("svg"); font-weight:normal; font-style:normal;}
@font-face {font-family:"Font-Bold"; src:url("../fonts/Font-Bold.eot"); src:url("../fonts/Font-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Font-Bold.woff") format("woff"), url("../fonts/Font-Bold.ttf") format("truetype"), url("../fonts/Font-Bold.svg#Font-Bold") format("svg"); font-weight:normal; font-style:normal;}
@font-face {font-family:"Font-Black"; src:url("../fonts/Font-Black.eot"); src:url("../fonts/Font-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Font-Black.woff") format("woff"), url("../fonts/Font-Black.ttf") format("truetype"), url("../fonts/Font-Black.svg#Font-Black") format("svg"); font-weight:normal; font-style:normal;}

a {color:#00aeef; cursor:pointer; outline:none !important;}
a:link,  a:visited {color:#00aeef; cursor:pointer;}
a:hover, a:active {color:#00aeef; cursor:pointer;}


body{font-family:"Font-Regular", sans-serif; font-size:16px; color:#808285; background:#fff; line-height:160%;}

input, select, textarea, button{font-family:"Font-Regular", sans-serif; font-weight:normal; resize:none; color:#666; -webkit-appearance: none; font-size:100%; border:none; padding:10px 20px}
a,button,.animate{-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}
button{ cursor:pointer !important}

hr{width:100%; height:1px; border:none; margin:10px 0}
strong{font-family:"Font-Bold", sans-serif; font-weight:normal}
.hide{display:none}

.display-table{width:100%; height:100%; display:table;}
.display-table > div{height:100%; display:table-cell; vertical-align: middle;}

#pre_load{width:100%; height:100%; position:fixed; top:0; left:0; background:url(../images/mtc_logo_blue.png) no-repeat center rgba(255,255,255,0.9); z-index:10;}
#pre_load > div{position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0); margin-top:40px;}
#pre_load .dot {width:20px; height:20px; border: 2px solid #0080c0; border-radius: 50%; float: left; margin:0 5px; -webkit-transform: scale(0); transform: scale(0); 
	-webkit-animation: fx 1000ms ease infinite 0ms; animation: fx 1000ms ease infinite 0ms;}
#pre_load .dot:nth-child(2) {-webkit-animation: fx 1000ms ease infinite 300ms; animation: fx 1000ms ease infinite 300ms;}
#pre_load .dot:nth-child(3) {-webkit-animation: fx 1000ms ease infinite 600ms;  animation: fx 1000ms ease infinite 600ms;}

@-webkit-keyframes fx {50% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  100% {opacity: 0; }
}
@keyframes fx {50% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  100% {opacity: 0; }
}

/*
Yellow b8993f - 184,153,63
Blue 0080c0 - 0,128,192
LightGray edeeea
*/


@keyframes zoomIn {
  from {opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg);}
  50%{opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(45deg)}
  to {opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg);}
}
.zoomIn {animation-duration: 1s; animation-fill-mode: both; animation-name: zoomIn;}

@keyframes zoomOut {
  from {opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg);}
  to {opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(45deg);}
}
.zoomOut {animation-duration: 1s; animation-fill-mode: both; animation-name: zoomOut;}

@keyframes fadeIn {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes fadeOut {
  from {opacity: 0;}
  to {opacity: 1;}
}

.main{width:100%; height:100%; /*position:absolute;*/ background:#00aeef;}
.main > div{width:95.2%; height:100%; position:absolute; background:#fff}
.bubble-top{width:100%; position:absolute; top:0; left:0; z-index:1}
.bubble-bot{width:100%; position:absolute; bottom:0; left:0; z-index:1}
.bubble-top > img,.bubble-bot > img{width:100%; display:block}
.bubble-logo{width:100%; height:80%; position:absolute; right:0; text-align:right;}
.bubble-social{width:100%; height:60%; position:absolute; right:0; text-align:left;}
a.social,a.link{display:inline-block; color:#fff; font-size:160%;}
.body{height:100%; position:relative; z-index:2; padding:2.6% 4% 8.9% 4%;}
.body h2{font-size:600%; font-family:'Font-Black'; letter-spacing:-2px; text-transform:uppercase; line-height:100%; color:#00aeef}

#fullpage{ z-index:0;}
#board-members h2,#exco-members h2,#our-report h2,.bullets{margin-bottom:50px;}
#board-members h3,#exco-members h3,#our-thoughts h3{margin-top:20px; font-family:'Font-Bold';}
#board-members p,#exco-members p{}
.bullets{color:#00aeef; font-size:140%; line-height:160%; text-transform:uppercase; }
.bullets li{margin-bottom:5px}

#CL-link,#MD-link{}
#CL-pic,#MD-pic{cursor:pointer; opacity:0.2; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}
#CL-pic:hover,#MD-pic:hover{opacity:1}
#CL-link.active,#MD-link.active{}
#CL-pic.active,#MD-pic.active{opacity:1;}
#CL-text p,#MD-text p{ padding:0 0 10px 0;}
.overflow-text{ width:100%; display:none; overflow:auto; height:65vh; position: absolute; top:0; right:0; bottom:0}
.overflow-text.active{display:block}
.overflow-text h3{ font-size:160%; color:#00aeef; margin:0; margin-bottom:10px; font-family:'Font-Bold'; text-transform:uppercase}
.overflow-text h3 a{ font-size:14px; line-height:160%; font-family:'Font-Regular';}
.overflow-text iframe{ height:55vh}
.download{width:20%}

.big-molecule{width:42%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%) scale(0); z-index:1;}
.big-molecule:after{content: ""; display: block; padding-bottom: 100%;}
.big-molecule img{width:100%; position:absolute; top:0; left:0;}

a.sml-molecule{background:#c5c7c8; position:absolute; border-radius:50%; padding:2.5%; color:inherit; z-index:1;}
.sml-molecule:hover{padding:1%;}
.sml-molecule > div{background:#fff; border-radius:50%; overflow:hidden; position:relative; cursor:pointer; line-height:100%; text-transform:uppercase; font-family:'Font-Bold';}
.sml-molecule > div:after{content: ""; display: block; padding-bottom: 100%;}
.sml-molecule > div > div{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.sml-molecule:nth-child(1) > div{ font-size:140%}/*exco*/
.sml-molecule:nth-child(2) > div{ font-size:100%;}/*boar*/
.sml-molecule:nth-child(3) > div{ font-size:100%}/*thou*/
.sml-molecule:nth-child(4) > div{ font-size:110%}/*repo*/
.sml-molecule:nth-child(5) > div{ font-size:70%}/*down*/

.framed-text,a.framed-text{ width:12%; display:inline-block; background:#c5c7c8; color:#808285; padding:1.5%; border-radius:50%; position:relative; z-index:2}
.framed-text:hover{padding:0.5%;}
.framed-text > div{font-size:180%; text-transform:uppercase; font-family:'Font-Bold'; background:#fff; border-radius:50%; overflow:hidden; position:relative; cursor:pointer}
.framed-text > div:after{content: ""; display: block; padding-bottom: 100%;}
.framed-text > div > div{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.framed-text.download{width:20%}

.framed-people{display:inline-block; background:#bcbdc0; padding:12%; border-radius:50%; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}
.framed-people:hover{padding:6%;}
.framed-people:hover > div > img{transform: translate(0, 10%) scale(1.1);}
.framed-people > div{background:#fff; border-radius:50%; overflow:hidden;}
.framed-people > div > img{display:block; width:100%; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}

/*
Yellow b8993f - 184,153,63
Blue 0080c0 - 0,128,192
LightGray edeeea
*/

/*GOOGLE MAP POPUPS*/
.map_pop{ font-size:90%; line-height:20px;}
.map_pop p.head{ font-family:'Font-Bold'; margin-bottom:5px}
.map_pop p{margin:0}
.map_pop strong{}
.map_pop a{color:#111}

.container{position:relative; z-index:1; margin-right:auto; margin-left:auto}
@media (min-width:768px) {.container{width:760px;} .container-home{width:760px;}}
@media (min-width:992px) {.container{width:970px;} .container-home{width:970px;}}
@media (min-width:1200px) {.container{width:1170px;} .container-home{width:1170px;}}
@media (min-width:1600px) {.container{width:1200px;} .container-home{width:1600px;}}


.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.col-xs-15 {width: 20%; float: left;}
@media (min-width: 768px) {.col-sm-15 {width: 20%; float: left;}}
@media (min-width: 992px) {.col-md-15 {width: 20%; float: left;}}
@media (min-width: 1200px) {.col-lg-15 {width: 20%; float: left;}}

@media (max-width:1600px){
	body{font-size:12px}
	.body h2{ font-size:500%}
	#board-members h2, #exco-members h2, #our-report h2, .bullets{ margin-bottom:20px}
	.big-molecule{ width:37%}
	.sml-molecule:nth-child(1) > div{ font-size:130%}/*exco*/
	.sml-molecule:nth-child(2) > div{ font-size:90%;}/*boar*/
	.sml-molecule:nth-child(3) > div{ font-size:90%}/*thou*/
	.sml-molecule:nth-child(4) > div{ font-size:100%}/*repo*/
	.sml-molecule:nth-child(5) > div{ font-size:60%}/*down*/
	
}
@media (max-width:1200px){
	body{font-size:12px}
	
}
@media (max-width:992px){
	body{font-size:11px;}
	.big-molecule{ width:80%}
	.framed-text, a.framed-text{ width:30%}
	.framed-text.download{width:40%}
	
}
@media (max-width:750px){
	body,input,section,h1,h2,h3,h4,blockquote{ font-size:14px}
	.bubble-top,.bubble-bot{ width:120%; position:fixed; left:auto; right:0;}
	.main > div{ width:100%;}
	.body{ height:auto}
	.body h2{ font-size:250%}
	.bullets{ font-size:100%}
	.overflow-text h3{ font-size:140%;}
	a.social, a.link{ font-size:100%;}
	a.social:first-of-type{ margin-left:20% !important}
	.big-molecule{width:110%}
	a.sml-molecule{ padding:1%;}
	a.sml-molecule:hover{ padding:0.5%;}
	.sml-molecule:nth-child(1) > div{ font-size:80%}/*exco*/
	.sml-molecule:nth-child(2) > div{ font-size:60%;}/*boar*/
	.sml-molecule:nth-child(3) > div{ font-size:60%}/*thou*/
	.sml-molecule:nth-child(4) > div{ font-size:70%}/*repo*/
	.sml-molecule:nth-child(5) > div{ font-size:50%}/*down*/
	.framed-text, a.framed-text{width:30%; }
	.framed-text > div{font-size:100%; line-height:100%;}
	.overflow-text{overflow:visible; height:auto; position:relative; top:auto; right:auto;}
	
}





#javaMessage{width:100%; height:100%; line-height:40px; background: url(../images/background_1.png); text-align:center; color:#333; position:absolute; top:0; left:0; z-index:100; display:none}

/* © copyright Intouch Interactive Marketing - Carl-Heinz Benseler :: the css gods will strike down on tables with great vengence! */