@font-face {
    font-family: 'nexa';
    src: url('../fonts/nexaregular-webfont.eot');
    src: url('../fonts/nexaregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexaregular-webfont.woff') format('woff'),
         url('../fonts/nexaregular-webfont.ttf') format('truetype'),
         url('../fonts/nexaregular-webfont.svg#nexa_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nexa';
    src: url('../fonts/nexa-bold-webfont.eot');
    src: url('../fonts/nexa-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexa-bold-webfont.woff') format('woff'),
         url('../fonts/nexa-bold-webfont.ttf') format('truetype'),
         url('../fonts/nexa-bold-webfont.svg#nexa_boldregular') format('svg');
    font-weight: bold;

}

@font-face {
    font-family: 'nexa';
    src: url('../fonts/nexa-light-webfont.eot');
    src: url('../fonts/nexa-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nexa-light-webfont.woff') format('woff'),
         url('../fonts/nexa-light-webfont.ttf') format('truetype'),
         url('../fonts/nexa-light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: light;

}

body { font-family: nexa, sans-serif; font-size: 15px; margin: 0;  color: #fff;  background: #282828 url(../gfx/switch_bg.jpg) top center no-repeat; }
a:link, a:visited { color: #4a4a4a; }
a:hover { color: #fff; }

.clearfix { clear: both; }
.wrapper {  }

.layout { background: url(../gfx/welt_weiche_layout.jpg) top center no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.2; display: none; }



.switch-page { width: 100%; position: relative; }

.switch-logo { background: url(../gfx/p7s1welt_logo_weiche.png) top center no-repeat; width: 272px; height: 121px; margin: 20px auto; background-size: contain; }
.switch-description { width: 50%; margin: 30px auto; text-align: center; }
.switch-menu { width: 100%; }
.switch-menu-web, .switch-menu-tv  { float: left; width: 50%; cursor: pointer; }
.switch-menu-tv-arrow { width: 57px; height: 109px; background: url(../gfx/switch_arrow_left.png) no-repeat; float: left; margin-left: 10%; display: none; }
.switch-menu > div:hover .switch-menu-tv-arrow { background: url(../gfx/switch_arrow_left_a.png) no-repeat; }
.switch-menu-web-arrow { width: 57px; height: 109px; background: url(../gfx/switch_arrow_right.png) no-repeat; float: right; margin-right: 10%; display: none;}
.switch-menu > div:hover .switch-menu-web-arrow { background: url(../gfx/switch_arrow_right_a.png) no-repeat; }
.switch-menu a{ color: #fff; }
.switch-menu-tv-button, .switch-menu-web-button { width: 200px; text-align: center; border: 4px solid #383838; float: left; font-size: 2rem; margin-top: 30px; background: #db0024; background-size: 100% 100%; padding: 5px 10px; text-transform: uppercase; }
.switch-menu-tv-button {  margin-right: 100px; float: right; }
.switch-menu-web-button {  margin-left: 100px; }
.switch-menu-tv-button:hover, .switch-menu-web-button:hover { background: #fff; color: #db0024; }
.switch-menu-more { text-decoration: underline; color: #e50131; text-transform: uppercase; margin-left: 30%; margin-top: 10px; }

.switch-visual {  background: url(../gfx/switch_world.png) no-repeat top center; width: 100%; height: 420px; z-index: -10; opacity: 1; }

.switch-footer {  background: rgba(40,40,40,1); width: 100%; height: 43px; position: fixed; bottom: 0; left: 0;  }
.switch-footer-link { float: left; width: 25%; text-align: center; line-height: 43px; text-transform: uppercase; font-weight: bold; font-size: 0.8rem;  }
.switch-footer-btn-down { background: url(../gfx/switch_btn_down.png) no-repeat center center; width: 40px; position: absolute; bottom: 2px; left: calc( 50% - 20px ); height: 40px; z-index: 100; display: none; }
.switch-footer-btn-down:hover { background: url(../gfx/switch_btn_down_a.png) no-repeat center center; }

.switch-info { background: rgba(40,40,40,0.75); width: 100%; min-height: 240px; margin-top: -86px; margin-bottom: 60px; }
.switch-info-label { color: #6e6e6f; }
.switch-info-web .switch-info-label { color: #e50131; }
.switch-info a { color: #e50131;   }
.switch-info a:hover { color: #fff;   }
.switch-info-tv { float: left; width: 40%; text-align: right; }
.switch-info-web { float: right; width: 40%;  }
.switch-info-web p { padding-right: 10px;  }
.switch-btn-close { background: url(../gfx/switch_btn_close.png) no-repeat center center; width: 30px; height: 30px; position: absolute; top: 5px; right: 5px; background-size: contain; }

.switch-push {  width: 100%; height: 15vh; top: calc(100vh + 200px); position: absolute; z-index: -100;}





@media screen and (max-height: 768px) {		
	.witch-visual {  background: url(../gfx/switch_world.jpg) no-repeat top center; width: 100%; position: absolute; bottom: auto; top: -100px; left: 0; height: calc( 100% - 143px ); z-index: -10; opacity: 1; }
	
}

@media screen and (max-width: 460px) {	
	.switch-page { overflow: hidden; padding-bottom: 100px; }
	
	h3 { font-size: 0.7rem; } 
	.layout { background: url(../gfx/welt_weiche_layout_mobile.jpg) top center no-repeat; background-size: 100% 100%; display: none; }
	
	.mobile-hide { display: none; }
	.switch-logo { width: 100%; height: 45px; margin-top: 20px;  }
	.switch-description { width: 93%; margin: 20px auto; margin-top: 70px; text-align: left; font-size: 0.7rem; }
	.switch-menu-web, .switch-menu-tv  { float: none;  width: 100%; cursor: pointer; padding-left: 0;}
	.switch-menu-tv-arrow , .switch-menu-web-arrow  { display: none;  }
	.switch-menu-tv-button, .switch-menu-web-button { float: none; display: inline-block; margin-left: 30%; width: 120px; font-size: 1rem; margin-top: 10px; border: 0px solid #34f; }
	.switch-menu-web-button {  }
	.switch-footer-link{ font-size: 0.4rem; }
	.switch-footer-link.mobile { float: none; width: 100%;  }
	
	.switch-visual {  background-size: contain; height: 200px; margin-top: 20px; }
	
	.switch-info { font-size: 0.75em; }
	.switch-info-tv { width: auto; position: relative; padding: 10px; text-align: left; background: rgba(40,40,40,0.9); float: none; border-top: 1px solid #e50131; margin-top: 0px;  }
	.switch-info-web { width: auto; position: relative; padding: 10px; background: rgba(40,40,40,0.9); float: none; border-top: 1px solid #e50131; margin-top: 0px; margin-bottom: 100px;  }
}

@media screen and (min-width: 768px) {
	.mobile { display: none; }
}