@CHARSET "ISO-8859-1";
/* © copyright Intouch Interactive Marketing - Carl-Heinz Benseler :: the css gods will strike down on tables with great vengence! pew pew*/
/* Reset CSS --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0;}
a{text-decoration:none;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal; font-style: normal;}
strong{font-weight: bold;}
ol,ul {list-style:none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%; margin:0; padding:0; color:#f2f2f2;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

@font-face {font-family: "DINProLight"; src:url("../fonts/dinpro-light.eot"); src:url("../fonts/dinpro-light.eot?#iefix") format("embedded-opentype"), url("../fonts/dinpro-light.woff") format("woff"), url("../fonts/dinpro-light.ttf") format("truetype"), url("../fonts/dinpro-light.svg#DINProRegular") format("svg"); font-weight: normal; font-style: normal;}
@font-face {font-family: "DINProRegular"; src:url("../fonts/dinpro-regular.eot"); src:url("../fonts/dinpro-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/dinpro-regular.woff") format("woff"), url("../fonts/dinpro-regular.ttf") format("truetype"), url("../fonts/dinpro-regular.svg#DINProRegular") format("svg"); font-weight: normal; font-style: normal;}

/* Custom CSS --------------------------------------- */
body,html{height:100% !important}
body{font-family:'DINProRegular', sans-serif; color: #fff; background:#00aeef;}
	
	#resolution{ width:60px; background:#FFF; color:#000; position:fixed; top:0; right:0; font-size:12px; text-align:center; z-index:110;}

	a {color:#60c9f0; cursor:pointer; outline:none;}
	a:link,  a:visited {color:#60c9f0; cursor:pointer;}
	a:hover, a:active {color:#fff; cursor:pointer;}
	
	a,input,button{transition:all 0.2s ease}
	.hide{display:none}
	.table{width:100%; height:100%; display:table;}
		.table > div{width:100%; height:100%; display:table-cell; vertical-align:middle;}

/* Navigation --------------------------------------- */
#navigation{width:0%; height:100%; position:fixed; top:0; left:0; text-align:center; overflow:hidden; transition:all 0.4s ease; background:rgba(0,174,239,0.9); /*background:#00aeef;*/ z-index:17}
#navigation.change{width:15%;}
	#navigation .logo{width:50%; padding:0 25%; position:absolute; top:30px; left:0; margin:auto}
		#navigation .logo img{ width:100%; display:block;}
		#menu > li{margin:10px 0;}
		#menu > li > a{ color:#c0e3f0; text-decoration:none; font-size:110%; font-family:'DINProLight', sans-serif;}
		#menu > li > a:hover{color:#fff;}
		#menu > li.active > a{color:#fff; font-size:150%;}
		#menu > li.active > a:before{content:'- '}
		#menu > li.active > a:after{content:' -'}
		
		.sub-menu{ height:0; overflow:hidden; transition:all 0.4s ease;}
			.sub-menu li{padding:5px;}
			.sub-menu li a{ color:#005270; text-decoration:none; font-size:90%; font-family:'DINProLight', sans-serif;}
			.sub-menu li a:hover{color:#000;}
			.sub-menu li.active a{color:#000; font-size:100%;}
			.sub-menu li.active a:before{content:'\2022\ '}
			.sub-menu li.active a:after{content:' \2022'}
			
		.leaders.change{height:auto;}

.section{background-size:cover;}
	.iframe{width:80%; height:60%; margin-left:10%; margin-top:-60px;}
		.iframe .extra{background:rgba(0,174,239,0.8); overflow: hidden}
		.iframe .extra a{padding:10px 20px; margin:10px; line-height:20px; display:inline-block; color:#fff; border:1px solid #c0e3f0}
		.iframe .extra a:hover{border-color:#fff; background:#FFF; color:#00aeef}
	
	.content{width:100%; height:100%; transition: all 0.4s ease; position:relative}
		.content.change{width:85%; margin-left:15%}
		
		.arrow-down{width:60px; height:60px; background: url(../images/arrows_vertical_1.png) 0 0; position:fixed; bottom:-60px; left:50%; margin:0 0 0 -30px; z-index:2}
		.arrow-down.change{bottom:40px;}
		.arrow-up{width:60px; height:60px; background: url(../images/arrows_vertical_1.png) 0 -70px; position:fixed; top:-60px; left:50%; margin:0 0 0 -30px; z-index:2}
		.arrow-up.change{top:40px;}
		
		.line{width:100%; height:80px; position:absolute; top:50%; left:0; margin-top:-40px}
			.line h2{line-height:50px; font-size:500%; font-family:'DINProLight', sans-serif; margin:0 20px; float:left}
			.line p{position:absolute; top:75px; left:20%; text-transform:uppercase; text-align:left}
			.line-left{width:10%; height:2px; margin:39px 0; background:#FFF; float:left; transition:all 0.4s ease;}
			.line-right{ width:0; height:2px; margin:39px 0; background:#FFF; transition:all 1s ease; position:absolute; right:0; top:0;}
			.line-through{width:100%; height:2px; margin:39px 0; background:#FFF; float:left; transition:all 0.4s ease;}
		
		/*HOME*/
		.annual-report{width:500px; padding:60px 80px; border:2px solid #fff; background:rgba(0,174,239,0.8); margin:auto }
			.annual-report img{ width:100%; display:block; }
		
		/*LEADERS*/
		#section2 .line{top:20%}
			.leaders-navigation{width:80%; position:absolute; top:30%; left:10%; overflow:hidden}
				.leaders-navigation a{width:14.666%; height:250px; margin-right:2%; margin-bottom:20px; float:left; overflow:hidden; /*box-shadow: 0 0 0 2px #fff*/}
				.leaders-navigation a img{ width:100%; display:block;}
		
		.person{ width:80%; margin:auto; overflow:hidden;}
			.picture{width:25%; height:300px; float:left; overflow:hidden; background:#FFF; /*box-shadow: 0 0 0 2px #fff*/}
				.picture img{ width:100%; display:block;}
			.title{width:71%; height:260px; padding:20px 2%; background:rgba(0,174,239,0.8); float:left; font-family:'DINProLight', sans-serif; text-align:left;}
			.title h2{ font-size:200%}
			.title p{font-size:150%; color:#c0e3f0}
			.title a.back{ display:inline-block; border:1px solid #fff; color:#fff; padding:10px 20px; margin-top:10px;}
			.title a.back:hover{border-color:#fff; background:#FFF; color:#00aeef }
		
		#section0{text-align:center}
		
		/*THOUGHTS*/
		#section3 .line{top:20%;}
		
		.thoughts-navigation{ width:80%; position:absolute; left:10%; top:30%; text-align:left;}
			.thoughts-navigation h2{ display: block; padding:5px 0;}
			
			.thoughts-navigation .person{width:100%; margin-bottom:30px;}
			.thoughts-navigation .picture{width:20%; height:250px;}
			.thoughts-navigation .title{width:76%; height:210px;}
			.thoughts-navigation .title blockquote{font-size:120%; quotes:"\201C""\201D""\2018""\2019"; color:#c0e3f0}
			.thoughts-navigation .title blockquote:before{content:open-quote; font-size:20px; line-height:10px; margin-right:5px; vertical-align:0px;}
			.thoughts-navigation .title blockquote:after{content:close-quote; font-size:20px; line-height:10px; margin-left:5px; vertical-align:0px;}
			.thoughts-navigation .title a{display:inline-block; padding:10px 20px; margin-top:10px; color:#fff; border:1px solid #c0e3f0}
			.thoughts-navigation .title a:hover{border-color:#fff; background:#FFF; color:#00aeef}

		/*REPORT*/
		#section4 .line{top:20%;}
		
		.report-navigation{width:30%; position:absolute; left:10%; top:30%; text-align:left; margin: 0 0 0 0; padding:20px 1.5%; background:rgba(0,174,239,0.8); font-family:'DINProLight', sans-serif;}
			.report-navigation a{ font-size:110%; display: block; padding:5px 0; color:#fff}
			.report-navigation a:hover{color:#c0e3f0;}
			.report-navigation a.active{color:#c0e3f0; font-size:120%; }
			.report-navigation a.active:before{content:'- '}
			.report-navigation a.active:after{content:' -'}
			
		/*DONWLOAD*/
		#section5 .line{top:40%;}
		a.download-button{padding:50px 2%; position:absolute; top:40%; left:10%; margin:80px 0 0 0; display:block; color:#fff; background:rgba(0,174,239,0.8); font-size:400%; font-family:'DINProLight', sans-serif;}
			a.download-button:hover{ color:#00aeef; background-color:rgba(255,255,255,0.8);}

/* STANDARD STYLES */
#intouch{position:fixed; bottom:0; right:0px; z-index:100}
#advantage{position:fixed; bottom:0; right:130px; z-index:100}

#pre_load{width:100%; height:100%; position:fixed; top:0; left:0; background: url(http://www.mtc.com.na/images/mtc_logo_blue.png) center no-repeat #f9f9f9; display:table; z-index:10}
	#pre_load div{width:100%; height:100%; display:table-cell; vertical-align:middle; text-align:center}
	#pre_load img{margin-top:130px;}


@media (max-width:1600px) {
body{font-size:80%;}

.arrow-down{width:50px; height:50px; background: url(../images/arrows_vertical_2.png) 0 0; margin:0 0 0 -25px;}
.arrow-down.change{bottom:15px;}
.arrow-up{width:50px; height:50px; background: url(../images/arrows_vertical_2.png) 0 -60px; margin:0 0 0 -25px;}
.arrow-up.change{top:15px;}

}

@media (max-width:1366px) {
body{font-size:80%;}

#navigation.change{ width:20%}
.content.change{ width:80%; margin-left:20%}

#section2 .line{top:15%;}
.leaders-navigation{top:22%;}
	.leaders-navigation a{height:200px;}

#section3 .line{ top:15%;}
.thoughts-navigation{top:22%;}
	.thoughts-navigation .picture{width:20%; height:200px;}
	.thoughts-navigation .title{width:76%; height:160px;}

#section4 .line{ top:15%;}
.report-navigation{ width:45%; left:10%; top:22%;}

#section5 .line{ top:15%;}
a.download-button{ top:22%; margin:0}

.line-left{ margin:30px 0;}
.line-right{ margin:30px 0;}
.line h2{font-size:400%;}
.line p{top:55px;}

}

@media (max-width:1024px) {
body{font-size:100%;}

#navigation.change{ width:30%}
.content.change{ width:70%; margin-left:30%}

}

@media (max-width:799px) {
body{font-size:100%;}

.annual-report{width:60%; padding:20px 30px}

#navigation.change{ width:30%;}
.content.change{ width:70%}

.arrow-down{width:40px; height:40px; background: url(../images/arrows_vertical_3.png) 0 0; bottom:10px; margin:0 0 0 -20px;}
.arrow-up{width:40px; height:40px; background: url(../images/arrows_vertical_3.png) 0 -50px; top:10px; margin:0 0 0 -20px;}

#menu > li{ margin:5px 0}
#menu > li > a{ font-size:90%}
#menu > li.active > a{font-size:90%;}
#menu > li.active > a:before{content:''}
#menu > li.active > a:after{content:''}

#section1 .line{height:auto; position:relative; top:auto; left:auto; overflow:hidden; margin-bottom:10px; margin-top:0}
#section1 .line p,#section1 .line h2{ height:auto; position:relative; top:auto; left:auto; float:none; overflow:hidden; margin:0 10px;}
#section1 .line h2{line-height:100%}
#section1 .line p{font-size:70%}

#section2 .line{height:auto; position:relative; top:auto; left:auto; overflow:hidden; margin-bottom:10px; margin-top:0}
#section2 .line p,#section2 .line h2{ height:auto; position:relative; top:auto; left:auto; float:none; overflow:hidden; margin:0 10px;}
#section2 .line h2{line-height:100%}
#section2 .line p{font-size:70%}
.leaders-navigation,.person{ width:90%; height:auto; position:relative; top:auto; left:auto; margin:0 0 0 5%}
	.leaders-navigation a{ width:23%; height:60px; box-shadow:none; margin-bottom:5px}

#section3 .line{height:auto; position:relative; top:auto; left:auto; overflow:hidden; margin-bottom:10px; margin-top:0}
#section3 .line p,#section3 .line h2{ height:auto; position:relative; top:auto; left:auto; float:none; overflow:hidden; margin:0 10px;}
#section3 .line h2{line-height:100%}
#section3 .line p{font-size:70%}
.thoughts-navigation{ width:90%; height:auto; position:relative; top:auto; left:auto; margin:0 0 0 5%}
	.thoughts-navigation .person{ margin:0 0 10px 0;}
	.thoughts-navigation .picture{ display:none;}
	.thoughts-navigation .title{ width:90%; height:auto; padding:5px 5%; border: none;}
	.thoughts-navigation .title blockquote{ height:45px; line-height:100%; font-size:90%; overflow:hidden }
	.thoughts-navigation .title a{ padding:5px 10px; font-size:90%; margin:5px 0}

#section4 .line{height:auto; position:relative; top:auto; left:auto; overflow:hidden; margin-bottom:10px; margin-top:0}
#section4 .line p,#section4 .line h2{ height:auto; position:relative; top:auto; left:auto; float:none; overflow:hidden; margin:0 10px;}
#section4 .line h2{line-height:100%}
#section4 .line p{font-size:70%}
.report-navigation{width:80%; height:auto; position:relative; top:auto; left:auto; margin:0 0 0 5%; padding:5px 5%; border:none; line-height:100%}
	.report-navigation a{ font-size:80%;}
	.report-navigation a.active{ font-size:80%}

#section5 .line{height:auto; position:relative; top:auto; left:auto; overflow:hidden; margin-bottom:10px}
#section5 .line p,#section5 .line h2{ height:auto; position:relative; top:auto; left:auto; float:none; overflow:hidden; margin:0 10px;}
#section5 .line h2{line-height:100%}
#section5 .line p{font-size:70%}
	a.download-button{ width:80%; font-size:110%; left: auto; top:auto; position:relative; margin:0 0 0 5%; padding: 10px 5%;}

.slide .line{display:none}
.slide:first-of-type .line{display:block}
.picture{ width:100%; max-height:200px; height:auto; box-shadow: none}
.title{height:auto; width:90%; padding:10px 5%; float:left}
.title h2{ font-size:90%;}
.title p{ font-size:80%;}
.title a.back{padding:5px 10px; font-size:90%; margin:5px 0}

.line-left{ width:0%;}
.line-right{ margin:29px 0;}
.line h2{font-size:200%; text-align:left; margin:0 10px;}
.line p{top:55px; left:10px;}

.iframe{ margin-left:5%; width:90%;}
.iframe .extra a{ display:block; float:none !important; padding:5px 10px; font-size:90%}

#intouch{ display:none}
#advantage{ display:none}

}

#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! */