/* SUB SLIDER */ #subslider { background-color: #f9f9f9; position: relative; color: #403d3d; opacity: 0; } #subslider { -webkit-transition: height .3s ease-in-out, opacity 0.5s linear; -moz-transition: height .3s ease-in-out, opacity 0.5s linear; -o-transition: height .3s ease-in-out, opacity 0.5s linear; transition: height .3s ease-in-out, opacity 0.5s linear; } #subslider .flexslider .slides > li { background-position: center; height: 100%; width: 100%; -webkit-backface-visibility: hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #subslider .flexslider-container, #subslider .flexslider .slides, #subslider .flex-viewport { height: 100%; } #subslider ul.slides { margin: 0; padding: 0; } #subslider .flexslider { margin: 0; padding: 0; border: 0px; overflow: hidden; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #subslider .flex-direction-nav a, #subslider .flex-direction-nav a:before { font-size: 40px; width: 20px; height: 40px; margin: -30px 0 0; display: inline-block; color: rgba(255, 255, 255, 0.7); /* text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); */ text-shadow: none; } #subslider.greyboxl .flex-direction-nav a, #subslider.greyboxl .flex-direction-nav a:before { color: rgba(0, 0, 0, 0.7); } #subslider .flex-control-nav { width: 100%; position: absolute; bottom: 20px; left: 20px; text-align: left; display: block; } #subslider .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } #subslider .flex-control-paging li a { width: 15px; height: 15px; display: block; background-color: rgba(255,255,255,0); border: 2px solid #fff; cursor: pointer; text-indent: 9999px; position: relative; z-index: 10; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; opacity: 0.8; } #subslider .flex-control-paging li:hover a { opacity: 1.0; } #subslider .flex-control-paging li a.flex-active { background-color: #fff; cursor: default; opacity: 0.8; } #subslider .flexslider .slide-overlay-container { float: none; position: relative; overflow: hidden; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; } #subslider .flexslider .slide-overlay-bg { padding-bottom: 100px; padding-top: 20px; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } /* NEU Position bottom */ #subslider .flexslider .slide-overlay { position: relative; height: 100%; /* display: none; */ opacity: 0; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s; -webkit-transition: padding-top .3s ease-in-out; -moz-transition: padding-top .3s ease-in-out; -o-transition: padding-top .3s ease-in-out; transition: padding-top .3s ease-in-out; -webkit-transition: opacity 2.3s ease-in-out; -moz-transition: opacity 2.3s ease-in-out; -o-transition: opacity 2.3s ease-in-out; transition: opacity 2.3s ease-in-out; } #subslider .flexslider .slide-overlay-content { margin: 0; text-align: center; } @media only screen and (max-width:767px) { #subslider #icon-scroll { display: none; opacity: 0; } #subslider .flex-direction-nav { display: none; } } #subslider .slide-overlay-content h1:last-child, #subslider .slide-overlay-content h2:last-child, #subslider .slide-overlay-content p:last-child { margin: 0; } .slidertxt { padding-right: 50px !important; padding-left: 50px !important; } .sliderpic { padding-right: 30px !important; padding-left: 30px !important; } @media only screen and (max-width:767px) { .sliderpic { margin-bottom: 30px; } } /* PORTAL SLIDER */ #portalslider { height: 1300px; background-color: #ececec; color: #403d3d; -webkit-transition: all 0.7s linear; -o-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -ms-transition: all 0.7s linear; -kthtml-transition: all 0.7s linear; transition: all 0.7s linear; } #portalslider .flexslider .slides > li { background-position: center; height: 100%; /* width: 100%; */ -webkit-backface-visibility: hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #portalslider .flexslider-container, #portalslider .flexslider .slides, #portalslider .flex-viewport { height: 100%; } #portalslider ul.slides { margin: 0; padding: 0; } #portalslider .flexslider { margin: 0; padding: 0; border: 0px; overflow: hidden; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-transition: all 0.7s linear; -o-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -ms-transition: all 0.7s linear; -kthtml-transition: all 0.7s linear; transition: all 0.7s linear; } #portalslider .flexslider .slide-overlay-container { position: relative; overflow: hidden; } #portalslider .videocontainer { position: relative; width: 100%; height: 100%; overflow: hidden; } #portalslider video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); /* neu */ height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ } #portalslider .flex-direction-nav a, #portalslider .flex-direction-nav a:before { font-size: 60px; width: 30px; height: 80px; margin: -20px 0 0; display: inline-block; color: rgba(0, 0, 0, 0.7); /* text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); text-shadow: none; */ text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); } /*MITTIG*/ #portalslider .flex-direction-nav a, { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; cursor: pointer; color: rgba(0, 0, 0, 0.7); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); overflow: visible; } #portalslider .flex-direction-nav a, #portalslider .flex-direction-nav a:before { color: rgba(255, 255, 255, 1.0); } #portalslider .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.8; left: 20px; } #portalslider .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } #portalslider .flexslider:hover .flex-direction-nav .flex-next { opacity: 0.8; right: 20px; } #portalslider .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } #portalslider .flex-control-nav { width: 100%; position: absolute; bottom: 20px; left: 20px; text-align: left; display: block; } @media only screen and (max-width:767px) { #portalslider .flex-control-nav { display: none; } } #portalslider .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } #portalslider .flex-control-paging li a { width: 15px; height: 15px; display: block; background-color: rgba(255,255,255,0); border: 2px solid #fff; cursor: pointer; text-indent: 9999px; position: relative; z-index: 10; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; opacity: 0.8; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); } #portalslider .flex-control-paging li:hover a { opacity: 1.0; } /* #header.background--light + #portalslider .flex-control-paging li a { border: 2px solid #605e5e; } */ #portalslider .flex-control-paging li a.flex-active { background-color: #fff; cursor: default; opacity: 0.8; } /* #header.background--light + #portalslider .flex-control-paging li a.flex-active { background-color: #605e5e; } */ #portalslider .flexslider .slide-overlay-container { float: none; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; } /* #header.background--dark + #portalslider .flexslider .slide-overlay-container { background-color: rgba(0, 0, 0, 0.4); } #header.background--light + #portalslider .flexslider .slide-overlay-container { background-color: rgba(255, 255, 255, 0.4); } */ #portalslider .flexslider .slide-overlay-container { position: relative; } #portalslider .flexslider .slide-overlay-container-bgcolor { /* background-color: rgba(50, 38, 38, 0.2); */ } #portalslider .flexslider .slide-overlay-bg { padding-bottom: 100px; padding-top: 20px; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #portalslider .flexslider .slide-overlay, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay h4, #portalslider .flexslider .slide-overlay h5, #portalslider .flexslider .slide-overlay p, #portalslider .flexslider .slide-overlay a { text-decoration: none; } #portalslider .flexslider .slide-overlay h1, #portalslider .flexslider .slide-overlay h2, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay p { display: inline-block; /* keep the background color wrapped tight */ margin: 0; float: left; clear: left; } @media only screen and (max-width:1400px) { #portalslider .flexslider .slide-overlay h1, #portalslider .flexslider .slide-overlay h2, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay p { } } @media only screen and (max-width:1199px) { #portalslider .flexslider .slide-overlay h1, #portalslider .flexslider .slide-overlay h2, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay p { } } @media only screen and (max-width:991px) { #portalslider .flexslider .slide-overlay h1, #portalslider .flexslider .slide-overlay h2, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay p { } } @media only screen and (max-width:767px) { #portalslider .flexslider .slide-overlay h1, #portalslider .flexslider .slide-overlay h2, #portalslider .flexslider .slide-overlay h3, #portalslider .flexslider .slide-overlay p { } } /* NEU Position bottom */ #portalslider .flexslider .slide-overlay { position: relative; height: 100%; display: none; } #portalslider .flexslider .slide-overlay-content { position: absolute; bottom: 100px; margin: 0; left: 30px; padding:20px 60px; background-color:#ffffff; } @media only screen and (max-width:1400px) { #portalslider .flexslider .slide-overlay-content { bottom: 100px; left: 20px; padding:20px 40px; } } @media only screen and (max-width:1199px) { #portalslider .flexslider .slide-overlay-content { bottom: 100px; left: 15px; padding:15px 30px; } } @media only screen and (max-width:991px) { #portalslider .flexslider .slide-overlay-content { bottom: 90px; left: 15px; padding:15px 20px; } } @media only screen and (max-width:767px) { #portalslider .flexslider .slide-overlay-content { bottom: 90px; left: 15px; padding:10px 15px; } } @media only screen and (max-width:767px) { #portalslider .flex-direction-nav { display: none; } } #portalslider .flexslider .slide-overlay-content.captl { left: 0; right: auto; } #portalslider .slide-overlay-content h1:last-child, #portalslider .slide-overlay-content h2:last-child, #portalslider .slide-overlay-content p:last-child { margin: 0; } #portalslider .flexslider .slide-overlay .text-center>* { -webkit-transition-delay: .17s; -moz-transition-delay: .17s; transition-delay: .17s; -webkit-transition-duration: .52s; -moz-transition-duration: .52s; transition-duration: .52s } @media only screen and (max-width:1199px) { #portalslider .flexslider .slide-overlay h5 { font-size: 1.5em; } #portalslider .flexslider .slide-overlay h1 a, #portalslider .flexslider .slide-overlay h1 a p { font-size: 40px; line-height: 1.0em; } #portalslider .flexslider .slide-overlay .btn { font-size: 1.0em; } } @media only screen and (max-width:991px) { #portalslider .flexslider .slide-overlay h5 { font-size: 1.2em; } #portalslider .flexslider .slide-overlay h1 a, #portalslider .flexslider .slide-overlay h1 a p { font-size: 30px; } #portalslider .flexslider .slide-overlay .btn { font-size: 0.9em; } } @media only screen and (max-width:767px) { #portalslider .flexslider .slide-overlay h5 { font-size: 0.9em; } #portalslider .flexslider .slide-overlay h1 a, #portalslider .flexslider .slide-overlay h1 a p { font-size: 20px; } #portalslider .flexslider .slide-overlay .btn { font-size: 0.7em; } } .johnDynamicContentTemplate { display: flex; display: -webkit-flex; } .johnDynamicContentTemplate > div{ flex: auto; } .johnDynamicContentAddNew { width: 100%; background-color: #FC0; } .johnDynamicContentAddNew span, .johnDynamicContentAddNew form, .johnDynamicContentAddNew select { display: inline-block; font-size: 11px; } .johnDynamicContentEditControl { font-size: 11px; line-height: normal; position: absolute; right: 0px; background-color: rgba(255,255,255,0.8); background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(200,200,200,0.8) 100%); z-index: 99; padding: 2px 5px; opacity: 0.2; } .johnDynamicContentEditControl:hover{ opacity: 1; } .johnDynamicContentEditControl .hidenInfos { display: none; } .johnDynamicContentEditControl:hover .hidenInfos { display: block; } .johnDynamicContentAddNew button, .johnDynamicContentEditControl button { background-color: transparent; border: none; margin: 0; padding: 0!important; } .johnDynamicContentAddNew button img, .johnDynamicContentEditControl button img{ cursor: pointer; margin: 1px 2px; } .johnDynamicContentEditControl:hover .hidenInfos, .johnDynamicContentEditControl:focus-within .hidenInfos { display: block; } .johnDynamicContentEditControl:hover, .johnDynamicContentEditControl:focus-within { opacity: 1; }