/* Layout */

html {  height:100.1%, scroll-behavior: smooth; }

body {  background:#fff; overflow-x:hidden; font-family: 'Roboto', sans-serif; color:#000; overflow-x:hidden; }
body.normal { overflow-y: auto }
body.frozen { overflow-y: hidden }

body img { max-width:100% ; height:auto }
#wrapper { margin:0 auto }

@media screen and (min-width: 991px) { 
	header { background:#fff; position:sticky; top:0px; z-index:600; padding: 0 15px }
	header #header-topline { height:60px; padding-top: 10px; padding-bottom: 10px;   background:#fff; -webkit-box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5); box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5) }
	header #header-redirprog { padding: 8px 0 ; background:#d1d1d1 ; font-size:12px ; text-align:center }
	header #header-redirprog a { text-decoration:underline }
	header .select-lang { display:inline; margin:12px 0 0 0; width:50px; float:left }
	header ul.navi-main { margin:10px 0 0 0; padding:0;  list-style-type: none; float:left }
	header ul.navi-main li { display:inline-block }
	header ul.navi-main li { padding-right: 10px; margin-left:10px; border-right:1px solid #000 }
	header ul.navi-main li:first-of-type { margin-left:0px }
	header ul.navi-main li:last-of-type { border-right:0px }
	header ul.navi-main li a { color:#000; text-decoration:none; font-weight:400; font-size:14px }
	header ul.navi-main li a:hover { color:red }
	header #logo {float:right; width:200px; height:auto }
}

@media screen and (max-width: 990px) { 
	header { background:#fff; position:sticky; top:0px; z-index:600; padding: 0 15px }
	header #header-topline { height:60px; padding-top: 10px; padding-bottom: 10px;   background:#fff; -webkit-box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5); box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5) }
	header #header-redirprog { padding: 8px 0 ; background:#d1d1d1 ; font-size:12px ; text-align:center }
	header #header-redirprog a { text-decoration:underline }
	header ul.navi-main { display:none;}
	header .select-lang { position:absolute; left:15px; top:15px; }
	header #logo { width:100%; text-align:center; float:none }
	header #logo img { width:200px; height:auto }
}

@media ( max-width:767px ) {

	header #logo { text-align:left }
}


/* Mobile Menue */

#show-menue {position:relative; float:right; margin-left:20px; margin-top:10px; z-index:900 }
#show-menue i {cursor:pointer; color: #CC2026; font-size:28px }
#show-menue i:hover {color: #000 }

#mask { position: fixed; z-index: 800; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0, 0, 0, .8); cursor: pointer }
#container-mobile-menue.closed #mask { visibility: hidden; opacity: 0; transition: visibility 0s linear .75s, opacity 1s linear }
#container-mobile-menue.open #mask { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity .75s linear; }

#mobile-menue { position:fixed; z-index: 900; top:0px; right: 0px; width:300px; height:100vh; background:#fff; padding: 50px 45px 25px 25px; text-align:right }
#container-mobile-menue.closed #mobile-menue {right:-300px;  transition-property: right; transition-duration: 2s; }
#container-mobile-menue.open #mobile-menue {right:0px; transition-property: right;transition-duration: 1s }

#mobile-menue i.toggle-menue {position:absolute; top:12px; right: 36px; font-size:28px; cursor:pointer; color:#CC2026;  }
#mobile-menue i.toggle-menue:hover {color:#000;}

#mobile-menue h3 { font-weight:900; font-size:18px }
#mobile-menue ul { list-style-type:none; margin:0; padding:0;}
#mobile-menue li { border-bottom: 1px solid silver; padding:10px 0 }
#mobile-menue li:last-of-type { border-bottom:0 }
#mobile-menue a { color:#000; text-decoration:none } 
#mobile-menue a:hover { color:#CC2026 }


/* Main ##################################### */

#main { margin: 0 auto ; padding: 40px 0 }
#main .row  { position:relative }

#main-aside { right:0 }
#main-aside h3 { color:#CC2026; text-align:right; font-size:20px; font-weight:800 }
#main-aside h3:first-child { margin-top:0 }
#main-aside ul { list-style-type:none ; margin:0 ; text-align:right }
#main-aside ul li { padding: 3px 0 }
#main-aside ul li a { color:#000; text-decoration:none; font-size:16px; font-weight:400 }
#main-aside ul li a:hover { color:#CC2026 }
#main-aside > div { width:358px ; padding-left:70px }

footer { background:#000 ; width:100% ; text-align:center }
#footer-main img { width:100% ; max-width:1300px ; height:auto }

@media screen and (min-width: 991px) { 

	#footer-subline { background:#000 ; text-align:center ; padding: 40px 0 ; border-top: 1px solid #fff }
	#footer-subline ul { margin:0; padding:0; list-style-type:none }
	#footer-subline ul li { display:inline-block; border-right:1px solid #fff; padding-right: 15px; margin-left:15px }
	#footer-subline li:first-of-type { margin-left:0px }
	#footer-subline li:last-of-type { border-right:0px }
	#footer-subline ul li a { font-size:16px ; color:#fff ; text-transform:none ; text-decoration:none }
	#footer-subline ul li a:hover { text-decoration:underline }
}

@media screen and (max-width: 990px) { 

	#footer-subline { background:#000; text-align:center; padding:25px 10%; border-top:1px solid #fff }
	#footer-subline ul { margin:0; padding:0; list-style-type:none }
	#footer-subline ul li { display:block; border-bottom:1px solid #fff; padding:5px 0 }
	#footer-subline li:last-of-type { border-bottom:0px }
	#footer-subline ul li a { font-size:14px; color:#fff; text-transform:uppercase; text-decoration:none }
	#footer-subline ul li a:hover { text-decoration:underline }
}

/* Typo */

a { color:#CC2026 }
a:hover { color:#000 }

h1, h2, h3, h4 { font-family: 'Roboto', sans-serif }

h1 { font-size:36px; font-weight:600; color:#000 }
h2 { font-size:28px; font-weight:400; color:#000 }
h3 { font-size:24px; font-weight:400; color:#CC2026 }

h1 a, h2 a, h3 a { color:inherit }
h1 a:hover, h2 a:hover, h3 a:hover { color:#CC2026 }

.headline-divider a { text-decoration:none }
h2.headline-divider { font-size:20px }

h1.hero-header { position:relative; color:#000; font-weight:900; text-align:center; font-size:36px; margin:50px 0; }
h1.hero-header:before { position:absolute; top: -10px; left: calc(50% - 40px); content:''; width:80px; height:3px; background:#CC2026 }
h1.hero-header:after  { position:absolute; bottom: -10px; left: calc(50% - 40px); content:''; width:80px; height:3px; background:#CC2026 }
h1.hero-header a { color:#000 }
h1.hero-header a:hover { text-decoration:none }

button { background:#CC2026; border:0px; width:100%; text-align:center; padding:5px }
button a { color:#fff; font-weight:600; text-decoration:none } 
button a:hover { color:#fff; text-decoration: none }

.offer {margin-bottom:40px;}


/* Home ############################## */

#main.home { margin: 0; padding: 0 }

#main #main-teaser { clear:both; background: url('/images/relaunch/layout/bg-teaser.jpg'); min-height:450px; background-size:cover; background-position: right top;color:#fff; }

#main #main-teaser h1 { font-size:60px; font-weight:700; line-height:140%; margin-top:50px; color:#fff }
#main #main-teaser h1 .lite { font-size:48px; font-weight:100; color:#fff }
#main #main-teaser .container-video { margin-top:50px; background:#fff; width:80%; padding:20px }

@media screen and (max-width: 991px) {
	#main #main-teaser .container-video { margin-top:50px; background:#fff; width:100%; padding:20px }
} 

#main #main-teaser .container-video video.video-js { background-color:#fff!important ;
	position: relative; padding-bottom: 56%; padding-top: 30px; height: 0; overflow: hidden;
}

#main #main-teaser .button-header-download { color:#fff; background:#CC2026; height:43px; width:50%; font-size:18px; }

.teaser-text { padding:35px 5% }
.teaser-text h2 { font-size:42px; font-weight:300!important; line-height:150% }
.teaser-text h2 .brand { font-weight:900; color: #CC2026 }


@media screen and (max-width: 991px) { 
    
    #main #main-teaser .button-header-download { width:100%; }
    #main #main-teaser h1, #main #main-teaser h1 .lite { font-size:2rem ; text-align:center }
   .teaser-text h2 { font-size:24px; }
}


#main .moviebox-home h3 { text-align:center }
#main .moviebox-home .cover {margin-bottom:30px;}
#main .moviebox-home .cover img {width:100%; height:auto; padding:15px; background:#fff; box-shadow: 1px 4px 21px -1px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 4px 21px -1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 4px 21px -1px rgba(0,0,0,0.4);}

#main .moviebox-home .moviebox-item {clear:both; width:100%; float:left; padding:15px; }
#main .moviebox-home .moviebox-item:nth-child(odd) 	{background:#EEEEEE;}
#main .moviebox-home .moviebox-item:nth-child(even) {background:#E5E5E5;}
#main .moviebox-home .moviebox-item:after { display:block; content:''; width:100%; height:1px; clear:both;}

#main .moviebox-home .moviebox-item .container-img {float:left; width:20%; margin-right:15px;} 
#main .moviebox-home .moviebox-item .container-img img {width:100%; height:auto; }
#main .moviebox-home .moviebox-item .container-txt {	float:left; width:calc(80% - 15px) }
#main .moviebox-home .moviebox-item .container-txt p { margin:0; padding:0; }
#main .moviebox-home .moviebox-item a .container-txt { color:#000; }
#main .moviebox-home .moviebox-item a .container-txt:hover { color:#CC2026; }

/* Vorschau */

#main #main-center a.vidnavimain { display:block; text-align:center ; text-decoration:none; font-size:1.666rem; margin-bottom:8px; }
#main #main-center .vidnavitrh { margin-bottom:14px }
#main #main-center .vidnavitrh a { color:rgba(255, 255, 255, 0) }
#main #main-center .vidnavitrh img { padding:8px; background:#fff; -webkit-box-shadow: 4px 5px 8px 2px rgba(0,0,0,0.3); box-shadow: 4px 5px 8px 2px rgba(0,0,0,0.3); }

#main #main-center .vidnavitdh { float:left; clear:both; width:100%; padding:8px; }
#main #main-center .vidnavitdh:nth-child(odd) { background: #EEEEEE }
#main #main-center .vidnavitdh:nth-child(even) { background: #E5E5E5 }
#main #main-center .vidnavitdh a { display:block; color:#000; font-weight:bold; text-decoration:none;  }
#main #main-center .vidnavitdh a:hover { color:#CC2026; }
#main #main-center .vidnavitdh a img {float:left; width:30%; height:auto; padding:0px 5px 5px 0px ; margin-right:15px; }
#main #main-center .vidnavitdh a span { display:block; font-weight:normal;}

#features { margin-top:120px; padding-top: 120px }
#features .banner { margin-top: -185px }
#features .feature-boxes { width:90%; margin:70px auto 50px auto }
#features .feature-box { background:#fff; text-align:center; padding:40px }
@media screen and (max-width: 991px) { #features .feature-box { margin-bottom:25px } }
#features .feature-box .bold { font-size: 32px; font-weight:900 }
#features .feature-box .lite { font-size:24px; color:#CC2026; font-weight:300 }
#features .feature-box figure { border-bottom:1px solid #D4D4D4; padding-bottom:30px; margin-bottom:30px }
#features .feature-box figure img { width:auto; height:65px }
#features .feature-text  { font-size:22px; font-weight:300; padding: 0 ; margin:50px 0 }
#features .feature-text .highlight { color:#CC2026; font-weight:500}

/* Data ############################# */

.pagination-top { background:#CC2026 ; padding:5px ; color:#fff ; margin: 0 0 25px 0 ; text-align:center }
.pagination-top span { background:#fff!important }
.pagination-top a { color:#fff }
.pagination-top a b {background:#fff; color: #CC2026 }

.pagination-bottom { background:#CC2026 ; padding:3px ; color:#fff ; margin-top:25px ; text-align:center }
.pagination-bottom a { color:#fff }
.pagination-bottom a b {background:#fff; color: #CC2026 }

.cat-info { width:100%; border:1px solid #CC2026; padding:15px; background: #EEE; margin-bottom:30px }
.cat-info p { margin:0;}

button.preview a:after { margin-left:15px; font-family: FontAwesome;  content:'\f008' }
button.download a:before { margin-right:15px; font-family: FontAwesome;  content:'\f019' }
button.download a:after { margin-left:15px; font-family: FontAwesome;  content:'\f019' }

/* Template filme 1 */

.container-movie { margin-bottom:30px;  }
.container-movie h2 a { color:#000; font-weight: 600; text-decoration:none }
.container-movie .box { position:relative ; background:#EEE ; padding:15px }
.container-movie .box.boxr1 { padding-bottom:0 }
.container-movie .movie-cover { float:left; width:100%; padding:0px; }
.container-movie .movie-cover img { width:100%; height:auto; background:#fff; padding:15px; margin-bottom: 25px; float:left; }
.container-movie ul.thumbs {  display:block; width: 100%; margin:0; padding:5px; list-style-type:none; background:#fff; float:left }
.container-movie ul.thumbs li { display:inline-block; width:50%; float:left; padding:5px }
.container-movie ul.thumbs img { width:100%; height:auto }
.container-movie .movie-text { float:left; margin:15px 0 }

/* Template filme 2 */

.container-movie-info, .container-movie-scene { padding: 15px; background:#EEEEEE }
.container-movie-scene { margin-bottom:30px }

.container-movie-info .movie-cover img { width:100%; height:auto; background:#fff; padding:15px }
.container-movie-info .movie-meta h3 { margin-top:0 }
.container-movie-info .movie-preview  { position:relative; background:#fff; padding:15px; float:right; width:100% }

.container-movie-scene .movie-cover { float:left; background:#fff; padding:15px;  width:100%; margin-bottom:20px; }
.container-movie-scene .movie-cover h3 { margin-top:0 }
.container-movie-scene .movie-cover img { width:100%; height:auto; margin-bottom:15px; }

.container-movie-scene .box {background:#fff;}
.container-movie-scene ul.thumbs { display:block; width: 100%; margin:0; padding:0; list-style-type:none; background:#fff; float:left; height:100%; }
.container-movie-scene ul.thumbs li { display:inline-block; width:50%; float:left; padding:15px }
.container-movie-scene ul.thumbs img { width:100%; height:auto }

/* Template Kategorien 1 */

.container-cat { background:#EEEEEE; padding:15px; margin-bottom:35px }
.container-cat .cat-title a { display:flex; font-size: 18px; font-weight:600; display:block; text-align:center; color:#CC2026 }
.container-cat figure.catimage { display:flex; margin: 10px 0; width:100%; padding:10px; background:#fff }
.container-cat img { object-fit: cover; width: 100%!important; height: 200px; object-position: center center; }

.container-cat .cat-txt { text-align:center; min-height:60px }


/* Support ##################### */

.support-faq h2  { font-weight:600; font-size:16px }

.checkli {margin-top:20px;}
.checkli ul { list-style-type: none; margin:0; padding:0 }
.checkli ul li { margin-left:0px; padding-left:0px; line-height:225%; border-bottom: 1px solid #ccc }
.checkli ul li:last-of-type { border-bottom:0px; }
.checkli ul li:before { font-family:FontAwesome; content:'\f00c'; margin-right:15px; color: #CC2026 }

/* Startseite Members - Table User */

.table-user { background:red }

/* Hilfsklassen */

.affix-bottom { position:relative }
.extender { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%) }
.bg-light { background:#EEEEEE }
.spacer { position:relative; display:block; width:100%; height:30px }
.divider { position:relative; display:block; width:100%; height:1px; border-top:1px solid #CC2026; margin-top:40px; margin-bottom:40px }
.red { color: #CC2026 }
.row-flex { display: flex; flex-wrap: wrap; }
.content-box { height: 100%; }

@media screen and ( max-width:1199px ) {

	.hide-mobile {display:none;}
}

/* END */