@charset "utf-8";
/**
 **************************************************
 * CARL CLOOS SCHWEISSTECHNIK GMBH - WELD YOUR WAY
 * main.css
 *
 * @author:conception Kommunikationsagentur GmbH
 * @version:1.0
 * @updated:2014-03-04
 **************************************************
**/

/**
 **************************************************
 * CSS RESET
 **************************************************
**/

* {-webkit-margin-top-collapse:collapse; -webkit-margin-bottom-collapse:collapse; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
table {	border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, strong, b, th, dt {	font-size:100%; font-weight:normal; }
ol, ul { list-style:none; }
caption, th { text-align:left; }
img, abbr, acronym { border:0; }
em, i, dfn, cite, var, address { font-style:normal; }
pre, code { font-family:'courier new', courier, mono; font-size:12px; }
q:before, q:after { content:''; }
:focus { outline:0; }

/**
 **************************************************
 HELPER
 **************************************************
**/
.clearOnly { clear:both; }
.clear { clear:both; height:0; font-size:0; line-height:0; }
.left { float:left; }
.right { float:right; }
.noPadding { padding:0 !important; }
.noMargin { margin:0 !important; }
.none { display:none !important; }
.hidden { visibility:hidden !important; }
.error { color:red;	border-color:red; }
.sprite, .sprite a { text-indent:-9999px; font-size:0; line-height:0; }
.clearfix:after { content:"."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
li.clearfix {float:inherit !important; clear:both;}
/* Hide from IE Mac \*/.clearfix { display:block; }

.cFont { font-family: 'PT Sans Caption', sans-serif; font-weight: 400; }
.txt10 { font-size:10px; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt13 { font-size:13px; }
.txt14 { font-size:14px; }
.txt16 { font-size:16px; }
.txt17 { font-size:17px; }

.divider {border-top:1px solid #fff; border-bottom:1px solid #ccc; margin: 10px 0;}

span.blue {color: #063d76;}

.bottom {position:absolute; bottom:0;}

a {color: #333; text-decoration:none;}
a:hover {text-decoration:underline;}

/* BUTTONS */
.button { display:inline-block; height: 24px;  background:#063d76; color: #fff; line-height:1.0; padding: 11px 14px 0 14px; font-size:14px; letter-spacing:0;  border:none; text-decoration:none !important; font-family:Arial; }
.blue .button { background: #fff; color: #000; }
.button:hover {	background:#f2f2f2; color: #000; border:none; text-decoration:none;}
.contentBox .box:hover .button { background:#063d76; color: #fff; }
.blue .button:hover,
.contentBox .box.blue:hover .button { background: #063d76; color:#fff; }
.button.bottom { position:absolute; bottom:0; }
.button.grey {background: #f2f2f2; color:#000;}
.button.grey:hover {background: #063d76; color:#fff;}
.button.hWhite:hover {background:#fff; background:#fff; color: #063d76; border:none; text-decoration:none;}

/* LOGOS */
.logo { display: inline-block; width: 137px; height: 33px; background-image: url('../img/logo.png'); background-repeat: no-repeat; background-position:0 0; background-size:137px auto; font-size: 0; }
.logo.white { background-image: url('../img/logo-white.png'); }

/**
 **************************************************
 GENERAL
 **************************************************
**/

html {  font-size:75.01%; }

html.jsEnabled .page { display:none; }

body {  font-family: 'PT Sans Caption', sans-serif;  font-size:14px; line-height:1.2; color:#000; }

div { display: inline-block; }
div { display: block; }

h1 { font-family: 'PT Sans Caption', sans-serif; font-size:24px; letter-spacing:-0.02em; margin-bottom:14px; color: #000; }
h2 { font-family: 'PT Sans Caption', sans-serif; font-size:17px; letter-spacing:-0.01em; margin-bottom:5px;	color: #063d76; }
h3 { font-family: 'PT Sans Caption', sans-serif; font-size:14px; margin-bottom:2px; color: #063d76; }
h4, h5, h6 { font-size:12px; font-weight:bold; margin-bottom:6px; }
h5, h6 { margin-bottom:0; }
p, ol, ul, dl { margin-bottom:8px; }
img {vertical-align:bottom;}

.page {width: 100%; height: 100%; position:absolute;}
.section {width: 100%;}
.section .inner {width: 1200px; height: 100%; margin: 0 auto; position:relative;}
.section.teaser {position:absolute; height: 100%;}
.section.teaser.start { background:url(../img/teaser/wyw-start.jpg); background-position:top center; background-repeat:no-repeat; background-size:cover; }
.section.content {position:absolute; top: 100%; min-height: 300px}

/* SECTION GLOBAL */
.section .microsite-title {width: 700px; height: 50px; }
.section .microsite-title .logo {float:left; padding-right: 19px; border-right:1px solid #fff;}
.section .microsite-title h1 {float:left; padding-left:17px; margin:-9px 0 0 0; color: #fff; line-height:1.2; font-size:42px;}
.section .microsite-title h2 {float:left; padding-left:17px; margin:-9px 0 0 0; color: #444; line-height:1.2; font-size:42px;  letter-spacing:-0.02em;}

.section.teaser .microsite-title.content {top:37px; }
.section .microsite-title.content .logo-bg {width: 170px; background: #063D76; height: 83px; position:absolute; left: 0; top: -37px; }
.section .microsite-title.content .logo {position:absolute; border:none; left: 16px;  }
.section .microsite-title.content h1 {position:absolute; left: 170px; margin-top:-7px; }

.section .nav-button {display:block; position:absolute; right: 50%; margin-right:-600px; top: 33px; z-index:1000; height: 35px; padding: 15px 15px 0 42px; color: #fff; line-height:1.0; font-size:20px; background-image:url(../img/menu-ico.png); background-repeat:no-repeat; background-position: 13px 18px; background-size: 20px auto; text-decoration:none; background-color:#063D76; }
.section .nav-home {position:absolute; right: 120px; top: 33px; z-index:1000; height: 50px; width:50px; color: #fff; font-size:0px; background-image:url(../img/home-ico-hover.png); background-repeat:no-repeat; background-position: center center; background-size: 28px auto; line-height:1.0; text-decoration:none; background-color:#063D76; z-index:998;}
.section .nav-home:hover {background-image:url(../img/home-ico.png);}
.section .nav-popup {display:none; width: 550px; min-height: 200px; position:absolute; right: 50%; margin-right:-600px; top: 32px; z-index:999;}
.section .nav-popup .nav-title {height: 35px; background: #063D76; font-size:18px; color: #fff; padding: 15px 0 0 20px;}
.section ul {margin-top:1px;}
.section ul li {padding-bottom:1px;}
.section ul li a {display:block; height: 35px; color: #063D76; background: url(../img/bg-nav-white-translucent.png); font-size:18px; text-decoration:none; padding: 15px 0 0 20px;}
.section ul li a:hover,
.section ul li a.active  {background: #fff;}
.section .nav-overlay {display:none; width: 100%; height: 100%; position:absolute; left: 0; top: 0; background: url(../img/bg-overlay.png); z-index:100; }
.nav-active .nav-popup {display:block;}
.nav-active .nav-overlay {display:block;}

.section .page-headlines {position:absolute; top: 290px; left:0; line-height:0.9;}
.section .page-headlines .headline {float:left; font-size:42px; line-height: 33px; letter-spacing:-0.02em; background: #063d76; color: #fff; padding: 18px 40px 0 18px;}
.section .page-headlines .headline.min425 {min-width: 362px;}
.section .page-headlines .headline.min470 {min-width: 412px;}
.section .page-headlines .headline.multiline {line-height:1.35; padding-top:12px; padding-bottom:18px;}
.section .page-headlines .headline.first {padding: 20px 40px 6px 18px;}
.section .page-headlines .headline.last {padding-bottom: 13px;}
.section .page-headlines .headline.multiline.last {padding-bottom: 13px;}
.section .page-headlines .text {float:left; width: 382px; background: #063d76; color: #fff; font-size:17px; letter-spacing:-0.01em; line-height: 1.6; padding: 0 20px 24px 23px; }
.section .page-headlines .text.w470 {min-width: 427px}
.section .page-headlines .text .button {margin-top:20px;}

.section .scroll-down {display:block; height: 31px; position:absolute; left: 0; bottom: 0; font-size:17px; letter-spacing:-0.01em; color: #fff; text-decoration:none; padding: 11px 15px 0 15px; margin-left: 43px;  background: #063d76;}
.section .scroll-down span {position:absolute; left:-43px; top:0; width: 42px; height: 42px; background-image: url(../img/arrow-down.png); background-color: #063d76; background-position:6px 15px; background-repeat:no-repeat; background-size:30px auto;}
.section .company-name {display:block; height: 31px; position:absolute; right: 0; bottom: 0; font-size:17px; letter-spacing:-0.01em; color: #fff; text-decoration:none;padding-top:11px;}

/* SECTION TEASER */
.section.teaser .microsite-title {position:absolute; left:0; top: 46px; }
.section.teaser .inner {position:absolute; left:50%; margin-left:-600px; z-index:99;}
.section.teaser .play-btn {display:block; position:absolute; text-align:center; left: 50%; top:370px; padding-top:106px; margin-left: 100px; width: 140px; height: 22px; background-image:url(../img/play-btn.png); background-position:top center; background-repeat:no-repeat; background-size:106px auto; font-size:17px; letter-spacing:-0.01em; color: #fff; text-decoration:none; text-shadow:1px 1px 7px rgba(0,0,0,0.9); z-index: 999;}

.video {width: 100%; height: 0; position:absolute; background:#000; overflow:hidden; }
.video-overlay { position:absolute; width: 100%; height: 100%; background:url(../img/teaser/wyw-start.jpg); background-position:top center; background-repeat:no-repeat; background-size:cover; z-index:50;}
.video-obj {width: 100%; height: 100%; position:absolute; top:0; margin:0 auto; background:#000; z-index:0;}
.close-video {display:block; height: 31px; position:absolute; right: 50%; margin-right:-600px; top: 0; font-size:17px; letter-spacing:-0.01em; color: #fff; text-decoration:none; padding: 11px 15px 0 15px; margin-left: 43px; background: #063d76; z-index: 1000;}
.close-video span {position:absolute; left:-43px; top:0; width: 42px; height: 42px; background-image: url(../img/close.png); background-color: #063d76; background-position:center center; background-repeat:no-repeat; background-size:24px auto;}

.section.teaser .slider {width: 100%; height: 100%; position:absolute; top:0; left:0;}
.section.teaser .slider .slides {width: 100%; height: 100%; overflow:hidden; position:absolute;}
.section.teaser .slider .slides .slide-element {width: 100%; height: 100%; background-position:center center; background-repeat:no-repeat; background-size:cover;}

.section.teaser .flex-control-nav {z-index:100; width: 300px; left: 50%; margin-left: 300px; position: absolute; bottom: 0px; text-align: right;}
.section.teaser .flex-control-nav li {margin: 0 0 0 1px;}
.section.teaser .flex-control-nav li a {display: block; text-align: center; padding: 11px 0 0 0; width: 42px; height: 31px; background: #063d76; font-family: 'PT Sans Caption', sans-serif; font-weight: 400; font-size: 17px; color: #fff; text-decoration: none;  transition: background 0.2s ease; text-indent: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
.section.teaser .flex-control-nav li a.flex-active,
.section.teaser .flex-control-nav li a:hover  {background-color: #2b5a8a;}

/* SECTION CONTENT */
.section.content {padding: 60px 0 100px 0;}
.section.content .microsite-title {width: auto;}
.section.content .microsite-title .logo {border-right:1px solid #ccc;}

.section.content .microsite-title.small .logo {float:none; border-right:0;}
.section.content .microsite-title.small {height: auto;}
.section .microsite-title.small h2 {float:none; padding: 0; margin: 10px 0 0 0; border-bottom:1px solid #fff;}

.section.content .column {float:left; width: 355px; min-height: 150px; padding: 35px 65px 0 0; }
.section.content .column.large {float:none; min-height: 130px; width: auto; max-width: 830px; padding: 35px 65px 0 0; }
.section.content .column.last {padding-right:0;}
.section.content h3 {font-size:19px; letter-spacing:-0.01em; margin-bottom:8px; color: #333;}
.section.content p {font-family:Arial; font-size: 14px; color: #333; line-height:1.8; padding-bottom: 20px;}

.section.content .video-embed {padding: 9px; border:1px solid #E0E0E0; margin-bottom:20px; }
.section.content .content-image {padding: 9px; border:1px solid #E0E0E0; margin-bottom:20px;}
.section.content .content-image img {max-width:100%;}

.section.footer {position: absolute; bottom:0; left: 0; width: 100%; height: 50px; background: #f2f2f2; border-top:1px solid #fff; font-family:Arial; font-size: 13px; color: #333;}
.section.footer .inner {}
.section.footer .bordertop {width: 100%; height:1px; background: #f2f2f2; position:absolute; left:0; top:-2px;}
.section.footer a.scroll-top {display:block; height: 32px; padding: 11px 52px 0 0; position:absolute; right: 0; font-size:14px; text-align:right; top:-42px; color: #333; text-decoration:none;}
.section.footer a.scroll-top:hover {text-decoration:underline;}
.section.footer a.scroll-top span {width: 42px; height: 43px; background-image: url(../img/arrow-up.png); background-color: #f2f2f2; background-position:8px 13px; background-repeat:no-repeat; background-size:26px auto; position:absolute; right: 0; top:0;}
.section.footer .address {float:left; margin-top:18px; }
.section.footer .footer-links {float:right; text-align:right; margin-top:18px;}
.section.footer .footer-links a {display:inline-block; margin-left: 20px;}

.section.footer .languages {position:absolute; left: 0; top: -32px;}
.section.footer .languages a.language {display:block; padding: 5px 20px 0 40px; height: 18px; position:relative; background-image:url(../img/arrow-small.png); background-position:center right; background-size: 7px auto; background-repeat:no-repeat; }
.section.footer .languages a.language span {display:block; position:absolute; left: 0; top:0; width: 24px; height: 15px; padding: 3px; border:1px solid #CCCCCC; background-repeat:no-repeat; background-size:24px auto; background-position:3px 3px; }
.section.footer .languages a.language.de span {background-image:url(../img/flag-de.png); }
.section.footer .languages a.language.en span {background-image:url(../img/flag-en.jpg); }
.section.footer .languages .language-popup {width: 220px; display:none; position:absolute; top: -8px; left:-8px; background: #fff; box-shadow: 2px 2px 6px rgba(0,0,0,0.4);padding: 8px; }
.section.footer .languages .language-popup .language {margin-bottom: 8px; background:none;}
.section.footer .languages .language-popup .language.last {margin-bottom:0px; }
.section.footer .languages:hover .language-popup {display:block;}





/****************/
/** RESPONSIVE **/
/****************/

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
   .logo { background-image: url('../img/logo-2x.png');}
   .logo.white { background-image: url('../img/logo-white-2x.png'); }
   .close-video span{ background-image: url('../img/close-2x.png'); }
   .section .navigation .nav-button {background-image:url(../img/menu-ico-2x.png); }
   .section .scroll-down span {background-image: url(../img/arrow-down-2x.png);}
   .section.teaser .video-overlay .play-btn {background-image:url(../img/play-btn-2x.png);}
   .section.footer a.scroll-top span {background-image: url(../img/arrow-up-2x.png);}
   .section.footer .languages a.language { background-image:url(../img/arrow-small-2x.png);}
   .section.footer .languages a.language.de span {background-image:url(../img/flag-de-2x.png); }
   .section.footer .languages a.language.en span {background-image:url(../img/flag-en-2x.jpg); }
}

@media (max-width: 1254px) {
	
	.section .inner { width:94%; position:absolute; min-height:100%; left:50% !important; margin-left:-47% !important;}
	.section.teaser .flex-control-nav { width:47%; position:absolute; left:50% !important; margin-left:0% !important;}
	.close-video {right: 50%; margin-right:-47%; }
	.section .nav-button,
	.section .nav-popup {position:absolute; right: 50%; margin-right:-47%;}
	.section.content .column {float:left; width: 30%; min-height: 300px; padding: 45px 30px 0 0; }
	.section.content .inner {position:relative; margin-left:0; margin:0 auto; }
	
	
	
}

@media (max-height: 800px) {
	.section.teaser {height: 100%; }	
	.section.content {top:100%;}
	
}