@-ms-viewport { width:device-width ; } @viewport { width:device-width ; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display:block ; } html { font-family:sans-serif ; text-align:justify ; -webkit-text-size-adjust:100% ; -ms-text-size-adjust:100% ; } body { box-sizing:border-box ; overflow-y:-moz-scrollbars-vertical ; overflow-y:scroll ; padding:0; margin:0 auto ; overflow-x:hidden ; -epub-hyphens:auto ; -moz-hyphens:auto ; -o-hyphens:auto ; -webkit-hyphens:auto ; -ms-hyphens:auto ; hyphens:auto ; } .video_container{ min-width:88%; width:88%; padding-bottom:56.25%; position:relative; margin:0 7% 2% 7%; } .video{ display:inline; position:absolute; top:0; left:0; width:100%; height:100%; } #footer{ height: 3rem; } h1, h2, h3, h4, h5, h6, p, ul, ol { margin:0 ; } h1, h2, h3, h4, h5, h6, ul, ol { text-align:left ; } img { display:block ; width:88% ; margin: 0 7% 2% 7%; } #header img { display:block ; width:100% ; margin: 0 0 2% 0; } h1, h2, h3, h4 { font-weight:lighter ; text-decoration:none ; padding:0 6% 7px 7% ; } h1, h2 { font-size:xx-large ; } h1 { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#FFFFFF;font-weight: 200;font-size: 50px; font-size:3.5rem;font-size: 6.6vw; margin-top:1.1rem; font-size: 8.5vw !important; } h2, #blogH1 h1 { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;font-size: 25px; font-size: 1.5rem;font-size: 2.8vw;font-weight: 200;color:#000000; margin-top:0.75rem; } h3 { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#000000;font-weight: 200; } h4 { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#FFFFFF;font-size: 40px; font-size: 2.5rem;font-size: 3.5rem;font-size: 4vw;font-weight: 200; } p { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#000000; text-align:left !important; font-size:large !important; padding:0 7% 0.2% 7%; } #blogIntro p { font-weight:600; font-size: large; } a, a:visited { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;text-decoration:none;color:#000000; text-decoration:none; } a:focus { outline:thin dotted; } a:active, a:hover { text-decoration:none;color:#C0C0C0;font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif; opacity:0.9; outline:0; } ul { color: black; /*background-color:silver;*/ margin: 15px 7%; padding:15px 1% 15px 5% ; } ol { text-align:left; background-color:lightgray; padding:3% 1% 3% 3rem; } #breadcrumps { position: relative; display: block; width: 100%; font-size: 1rem; color: grey; text-decoration: none; left: 7%; margin-bottom:2%; } #breadcrumps a.parent { color: grey; text-decoration: none; } #breadcrumps a#active-child { text-decoration:none;color:#C0C0C0;font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif; } } #breadcrumps a:hover#active-child { text-decoration:underline; } #shareButtons { height: 4%; display: block; } #shareButtons img { height: auto; width:10vw; display: block; float: left; } .header-section-wrapper { position:relative; display:block; width:100%; } .header-section-wrapper .full-page-1, .header-section-wrapper .full-page-2, .header-section-wrapper .full-page-3, .header-section-wrapper .full-page-4 { position:relative; display:block; width:100%; margin: 0; padding:0; } .header-section-wrapper .text-1, .header-section-wrapper .text-2, .header-section-wrapper .text-3, .header-section-wrapper .text-4 { position: absolute; display: block; top: auto; bottom: 15px; margin: 0 3%; padding: 2% 3%; z-index: 3; /*background: rgba(0, 9, 0, 0.4);*/ } .header-section-wrapper .text-1 h1, .header-section-wrapper .text-2 h1, .header-section-wrapper .text-3 h1, .header-section-wrapper .text-4 h1 { color: white ; } .header-section-wrapper .text-1 h2, .header-section-wrapper .text-2 h2, .header-section-wrapper .text-3 h2, .header-section-wrapper .text-4 h2 { color: sliver ; } .header-section-wrapper .text-1 h3, .header-section-wrapper .text-2 h3, .header-section-wrapper .text-3 h3, .header-section-wrapper .text-4 h3 { color: silver ; } .header-section-wrapper .text-1 h4, .header-section-wrapper .text-2 h4, .header-section-wrapper .text-3 h4, .header-section-wrapper .text-4 h4 { color: silver ; } .header-section-wrapper .text-1 p, .header-section-wrapper .text-2 p, .header-section-wrapper .text-3 p, .header-section-wrapper .text-4 p { color: silver ; } .banner-text-1, .banner-text-2, .banner-text-3, .banner-text-4 { font-size: large; position: absolute; bottom: 5%; left: 3%; /*background-color:rgba(0, 9, 0, 0.4); */ padding:2%; } .text-1, .text-2, .text-3, .text-4 { width: 100%; position: relative; display: inline-block; top: auto; bottom: 15px; margin: 0; padding: 2% 0; z-index: 3; background: transparent; } .slider-text-1, .slider-text-2, .slider-text-3, .slider-text-4 { position: absolute; bottom: 5%; left: 3%; background-color:rgba(0, 9, 0, 0.4); padding:3%; } #main{ padding: 0; width: 90%; display: block; position: relative; margin: 0 auto 7% auto; } .inner-wrapper{ display:block; } #fader { display:none; } .arrow { display:none; } .bounce { display: none; } .button > a:link, .button > a:visited { -webkit-appearance: none; -ms-appearance: none; border: 1px solid; font-weight: 300;font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#3F4447;text-decoration:none;font-size: 25px; font-size: 1.5rem;font-size: 2.8vw; margin: 2% 7% 4% 7% !important; width: 81%; font-size:1.5rem; background-color:#FFFFFF; display: inline-block; padding: 3% 3vw 3% 3vw; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration:0.4s; transition-duration:0.4s; } .button > a:hover, .button > a:focus, .button > a:active { color:#FFFFFF; background-color:#3F4447; } input[type=submit] { -webkit-appearance: none; -ms-appearance: none; border: 1px solid; font-weight: 300;font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#3F4447;text-decoration:none;font-size: 25px; font-size: 1.5rem;font-size: 2.8vw; margin: 2% 7% 4% 10% !important; width: 81%; font-size:1.5rem; background-color:#FFFFFF; display: inline-block; padding: 3% 3vw 3% 3vw; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration:0.4s; transition-duration:0.4s; } input.custom:hover, input.custom:focus, input.custom:active { color:#FFFFFF; background-color:#3F4447; } #nav-container, #nav-container a, #nav-container li { color:white; font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif; display:block; z-index:999; position:relative; } #nav-title { display: none; } #invisible{ display: block; } #center-navigation { display: none; } #top{ display:block; height:0px; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration:0.4s; transition-duration:0.4s; } #nav{ display:block; position:absolute; position:fixed; background-color:#333; width:100%; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration:0.4s; transition-duration:0.4s; } #nav ul{ background-color: transparent; margin: 0 7%; padding:1rem 0 0 0; list-style:none; } #nav li{ display:inline-block; font-size:1em; line-height:2.9em; font-weight:0.5em; padding:0 0.3em 0 .3em ; } #nav li:hover, #nav li:focus, #nav li:active{ background-color:black; } #nav #btn-close{ height:0; width:0; } #top{ position:fixed;bottom:0; background-color:#333; display:block; width:100%; height: auto; padding:1% 0 .1% 0; border-bottom:1px solid #333; bottom: 0; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } #top #btn-phone { display:block; position:absolute; left:.5em; margin-top:5px; width:50px; height:50px; background:url('https://semsites.de/service/images/webicons/navigation-phone.png') left center no-repeat; background-size:100% 100%; border-radius:50%; } #top #btn-phone:hover, #top #btn-open:focus { -webkit-animation-name:shake; -webkit-animation-duration:0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-transform-origin:50% 100%; animation-name:shake; animation-duration:0.8s; animation-iteration-count:infinite; animation-timing-function:linear; transform-origin:50% 100%; } @-webkit-keyframes shake { 0%, 70% { -webkit-transform:translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform:translate(-1px, -2px) rotate(-2deg); } 20%, 60% { -webkit-transform:translate(-3px, 0px) rotate(3deg); } 30%, 90% { -webkit-transform:translate(0px, 2px) rotate(0deg); } 40%, 100% { -webkit-transform:translate(1px, -1px) rotate(1deg); } 50%, 80% { -webkit-transform:translate(-1px, 2px) rotate(-3deg); } } @keyframes shake { 0%, 70% { transform:translate(2px, 1px) rotate(0deg); } 10% {transform:translate(-1px, -2px) rotate(-2deg); } 20%, 60% {transform:translate(-3px, 0px) rotate(3deg); } 30%, 90% {transform:translate(0px, 2px) rotate(0deg); } 40%, 100% {transform:translate(1px, -1px) rotate(1deg); } 50%, 80% {transform:translate(-1px, 2px) rotate(-3deg); } } #top #nav-title{ display:block; float:right; max-width:100%; width:100%; text-align:center; } #top #nav-title a#nav-img, #top #nav-title a#nav-img img, #top #nav-mobile-title a#nav-mob-img, #top a#btn-phone img { display:inline-block; max-height:50px !important; height:50px; width:auto; max-width:250px !important; margin:3px auto 0 5px; } #top a#nav-mob-img { width: 100vw; display: inline-block; position:relative ; z-index: -1; float: left; } #top a#nav-mob-img img { position: relative; display: block; /* max-height: 50px !important; */ height: 50px; width: auto; max-width: 250px !important; margin: 3px auto 0 auto; } #top #btn-open { display:block; position:absolute; right:.5em; margin-top:5px; width:40px; height:40px; background:url('https://semsites.de/service/images/webicons/navigation-opener.png') left center no-repeat; background-size:100% 100%; border-radius:50%; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } #top #btn-open:hover, #top #btn-open:focus { -webkit-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg); } #btn-open:active { display:none; } #nav #btn-close{ display:block; position:fixed;bottom:0; right:0; margin-bottom:10px; margin-right:.5em; width:50px; height:50px; background:#333 url('https://semsites.de/service/images/webicons/navigation-opener.png') left center no-repeat; border-radius:50%; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } #nav #btn-close:hover, #top #btn-close:active, #top #btn-close:focus { -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); } #nav{ display:none; position:fixed;bottom:0px; background-color:#333; width:100%; height:100%; border-radius:0 0 1px 1px; opacity:0.88; padding-bottom:4px; overflow:scroll; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } #nav img{ display:none; } #nav:target{ display:block; margin-left:0; } #nav:target, #nav:active{ background-color:black; display:block; margin-left:0; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; transition-property:transform; } #nav li{ display:block; border-bottom:thin dashed #333; font-size:1.5em; line-height:1.7em; font-weight:0.5em; } .nav-sub { font-size: .6em; line-height:1.6em; } #lang_flags { z-index: 998; position: fixed !important; bottom: 4rem; right: 2%; } #lang_flags img { display: block; width: 100%; height: 100%; margin-bottom: 1rem; } .center_navibullets{ display:none; } #footer { /*z-index:999;*/ display:none; } #footer_navigation a{ display:none; } #legal { clear:both; padding-top:10%; border-top:solid 1px silver; margin:4% 10%; display: block; position: relative; } #legal_navigation{ clear:both; font-size: medium; color: #5A5A5A; background-color: none; z-index:998; position: relative; width: 94%; margin:0; padding:3%; /*line-height: 20px;*/ bottom: 75px; text-align:left; list-style-type: none; } #legal_navigation ul, #legal_navigation ul li{padding: 0; margin:0; list-style-type: none;background-color: none; } #legal_navigation a, #legal_navigation a:visited, #legal_navigation a:hover, #legal_navigation a:active, #legal_navigation a:focus { font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif; position:relative; max-width:94%; width:94%; word-break:keep-all; text-align:center; font-size: large; line-height: 2rem; margin:0 auto; padding:2% 3% 2% 3%; color:#5A5A5A !important; text-decoration:none; } .copyrights { font-size: small; color: #5A5A5A; background-color: white; z-index: 998; position: relative; left: 0; bottom: 75px; line-height: 20px; display: none; text-indent: 15px; list-style-type: none; } .copyrights a{font-size:small;} .box_one_quarter_round_wrapper { display:block; padding-left:15px; width:7rem; height:7rem; margin:2rem auto; overflow:hidden; } [class*='parallax_'] { display:none; } .parallax_1 { } .parallax_2 { } .parallax_3 { } .parallax_4 { } .section-wrapper { width: 100%; margin: 0 auto; } .media_img_container, .media_img_container img{ /*position:relative;*/ } .blog_image, .blog_image img{ clear:both; margin:4%; width:92%; } .top_video_container, .media_video_container { min-width:100%; width:100%; padding-bottom:56.25%; position:relative; margin:2% 0 2% 0; } .video, .media_video{ display:inline; position:absolute; top:0; left:0; width:100%; height:100%; } #content { padding: 0; display: block; position: relative; margin: 0 0 7% 0; } .top_of_page, .vertical_spacer, .navi_spacer, .blog_left, .top_text1, .top_text2, .blog_list, .full_screen, .box_half, .box_half_left, .box_half_right, .box_half_border_top, .box_half_border_top_left, .box_half_border_top_right, .box_one_quarter, .box_three_quarter, .box_one_third, .box_one_third_stretch, .box_two_third, .box_two_third_stretch, .top_textinline_right, .full_screen_left, .info_box_full_screen, .full_screen_round, { z-index:1; position:relative; width:100%; max-width:100%; padding:0 0 2% 0; top:0; left:0; text-align: left; } .blog_list a{ text-decoration: none; font-size: inherit !important; font-family: Arial, Helvetica, sans-serif; color: #C0C0C0 !important; } #back-to-topic{ vertical-align: middle; } #back-to-topic img{ float: left; width: 20px; height: 20px; margin: 0 2% 0 0; border: none; } #back-to-topic a{ float: left; } .info_box_full_screen{ width:100%; background-color: lightgray; margin: 2% 0 2% 0; text-align: left; } .vertical_spacer_line { clear:both; width:48%; border-top:solid 1px silver; margin:7% 23% 5% 25%; padding:0 0 ; text-align:center; font-size:small !important; } .one_quarter, .box_half_round, .box_half_border_top_round, .box_half_border_top_left, .box_one_quarter_left, .box_one_quarter_round { display: block; width: 100%; padding: 2%; float: left; text-align: center; } .box_one_third{ display: block; margin: 0 auto; width: 80%; padding: 2%; text-align: center; } .box_one_third_small_pic { display: block; width: 26%; padding: 2%; float: left; text-align: center; } .table_column{ margin:2%; transition: .5s; opacity: 1; break-inside: avoid; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } .image_table, .wide_sized{ border: 1px solid silver; padding: 1rem; margin: 0; } .image_table_list, .wide_sized_list{ display: block; } span.red_star { -webkit-appearance: none; -ms-appearance: none; float:left; line-height:15px; color:#FF0000; font-size:20px; width:16px; margin:0px; top:-0.5em; } span.no_star { -webkit-appearance: none; -ms-appearance: none; float:left; line-height:32px; color:#F1541B; font-size:20px; width:16px; margin:0px; visibility:hidden; } .input, .input_half_left, .input_half_right { -webkit-appearance: none; -ms-appearance: none; display:block; width:80% !important; margin:0 10%; font-size:medium; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } input:matches([type='date']) { display: block; font-size: large; width: 100% !important; float: left; margin-right: 1%; padding:5px; line-height: 2.5rem; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .input span { -webkit-appearance: none; -ms-appearance: none; position:absolute; z-index:1; cursor:text; pointer-events:none; color:#999; padding:7px; line-height:xx-large; margin-left:2px; } .input input, .input select { -webkit-appearance: none; -ms-appearance: none; z-index:0; padding:6px; margin:0.5% 0; font:inherit; line-height:xx-large; width:100% !important; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:solid 1px lightgrey; background-color:white; font-size:medium; } .input textarea { z-index:0; padding: 6px 0px 6px 18px; margin:0.5% 0% 0.5% 0%; font:inherit; line-height:xx-large; width:96% !important; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:solid 1px lightgrey; background-color:white; font-size:medium; } .input select { -webkit-appearance: none; -ms-appearance: none; padding:5px; height:31px; } #captcha-feld { width:220px; float:left; margin-top:5px; margin-right:0px; margin-left:11px; } p.errormsg { display :none; margin:5px; margin-left:0px; color:lightsteelblue; height:35px; } .error { font-weight: 400; /*font-size: 20px;*/ color: #ff6666; } #signup-form { position: relative; display: inline-block; margin: 0 10%; /*margin: 0 -10%;*/ bottom: 50%; height: 25%; width: 80%; opacity: .87; } #signup-form > .signup-field { line-height: 40px; border-radius: 2px; } @keyframes pulse_animation { 0% { transform: scale(1); } 30% { transform: scale(1.01); } 40% { transform: scale(1.01); } 50% { transform: scale(1); } 60% { transform: scale(1); } 70% { transform: scale(1.01); } 80% { transform: scale(1.01); } 100% { transform: scale(1); } } .pulse:hover { animation-name: pulse_animation; animation-duration: 4s; transform-origin:70% 75%; animation-iteration-count: infinite; animation-timing-function: linear; } input[type=text], input[type=password] { vertical-align: center; width: 100%; padding: 12px 20px; margin: 8px 2px; font-size: 15px; width:100%; box-sizing: border-box; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .calendar-image { margin:3%; } #calendar-image-wrapper{ margin-top: 1em; margin: 1rem; min-width: 60%; width: 60% display: inline-block; background- opacity: .9; } #calendar-image-wrapper a{ background-color:#3F4447; font-size:medium !important; display:inline-block; margin: 1.5rem 2%; font-size: xx-large !important; } #calendar-image-wrapper a:hover{ background-color:#FFFFFF; } .calendar-image-bottom {width:100%; display: block; background-color:#FFFFFF; } .calendar-image-bottom a { display: block; background-color:#FFFFFF; } .calendar-image-bottom .button { height:4%; text-align: center; } .calendar-image-bottom .button a{ margin: 2% auto !important; display: block; display: block; } #calendar-image-table{ border:1px solid ; padding:15px; font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#000000; font-size: x-large !important; background-color: white; width:100%; margin:0 auto; } @media only screen and (min-width: 375px) and (max-width: 699px){ #calendar-image-table{ border:1px solid ; padding:15px; font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#000000; font-size: xx-large; background-color: white; width:100%; margin:0 auto; }} #calendar_image_body{ display: block; width: 100%; } #calendar-image-column{ font-family:"Roboto Condensed","HelveticaNeueLight",Helvetica,sans-serif;color:#000000;; color:; padding: 0 0 1em 0; } .calendar_image_col{ padding: 0.5; } .mo-thu{color:;text-align: right;} .sat{color:;text-align: right;} .sun{color:#cc0000;text-align: right;} .today{background:#ff0000;} .today-day{ /*font-family:;*/ text-align: right; } .today-day-active{ color:#ffffff; } .fb-holder{/*margin-left:0% !important;*/} /* @import url('animation_top_down_3pic.css'); /* *{ margin: 0; padding: 0; }*/ /* ANIMATION */ @keyframes cycle1 { 0% { top:0px; } 16% { top:0px; } 30% { top:0px; opacity:1; z-index:0; } 35% { top:0px; opacity:0.5; z-index:0; } 50% { top:0px; display:none; opacity:0; z-index:-1; } 75% { top:0px; display:none; opacity:0; z-index:0; } 90% { top:0px; display:none; opacity:0; } 95% { top:0px; opacity:0.7;} 100%{ top:0px; opacity:1; } } @keyframes cycle2 { 0% { top:0px; display:none; opacity:0; } 30% { top:0px; display:none; opacity:0; } 35% { top:0px; opacity:0.7; } 45% { top:0px; opacity:1; } 60% { top:0px; opacity:1; z-index:0; } 65% { top:0px; opacity:0.5; z-index:0; } 100%{ top:0px; display:none; opacity:0; z-index:-1; } } @keyframes cycle3 { 0% { top:0px; display:none; opacity:0; } 60% { top:0px; display:none; opacity:0; } 65% { top:0px; opacity:0.7; } 70% { top:0px; opacity:1; } 90% { top:0px; opacity:1; z-index:0; } 95% { top:0px; opacity:0.5;z-index: 0;} 100%{ top:0px; display:none; opacity:0; z-index:0; } } @-webkit-keyframes cycle1 { 0% { top:0px; } 16% { top:0px; } 30% { top:0px; opacity:1; z-index:0; } 35% { top:0px; opacity:0; z-index:0; } 50% { top:0px; opacity:0; z-index:-1; } 75% { top:0px; opacity:0; z-index:0; } 90% { top:0px; opacity:0; } 95% { top:0px; opacity: 1;} 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycle2 { 0% { top:0px; opacity:0; } 30% { top:0px; opacity:0; } 35% { top:0px; opacity:1; } 45% { top:0px; opacity:1; } 60% { top:0px; opacity:1; z-index:0; } 65% { top:0px; opacity:0; z-index:0; } 100%{ top:0px; opacity:0; z-index:-1; } } @-webkit-keyframes cycle3 { 0% { top:0px; opacity:0; } 60% { top:0px; opacity:0; } 65% { top:0px; opacity:1; } 70% { top:0px; opacity:1; } 90% { top:0px; opacity:1; z-index:0; } 95% { top:0px; opacity:0;z-index: 0;} 100%{ top:0px; opacity:0; z-index:0; } } @-moz-keyframes cycle1 { 0% { top:0px; } 16% { top:0px; } 30% { top:0px; opacity:1; z-index:0; } 35% { top:0px; opacity:0; z-index:0; } 50% { top:0px; opacity:0; z-index:-1; } 75% { top:0px; opacity:0; z-index:0; } 90% { top:0px; opacity:0; } 95% { top:0px; opacity: 1;} 100%{ top:0px; opacity:1; } } @-moz-keyframes cycle2 { 0% { top:0px; opacity:0; } 30% { top:0px; opacity:0; } 35% { top:0px; opacity:1; } 45% { top:0px; opacity:1; } 60% { top:0px; opacity:1; z-index:0; } 65% { top:0px; opacity:0; z-index:0; } 100%{ top:0px; opacity:0; z-index:-1; } } @-moz-keyframes cycle3 { 0% { top:0px; opacity:0; } 60% { top:0px; opacity:0; } 65% { top:0px; opacity:1; } 70% { top:0px; opacity:1; } 90% { top:0px; opacity:1; z-index:0; } 95% { top:0px; opacity:0;z-index: 0;} 100%{ top:0px; opacity:0; z-index:0; } } .slider-1{ top:0; display: inline-block; position: absolute; width: 100%; animation: cycle1 15s infinite; } .slider{ } .slider-frame { display: block; position: relative; margin: 0 auto !important; width:100%; background-image:black ; /*min-height: 35rem;*/ } .slider-frame img{ width: 100%; height: auto; display: block; } .slider-1{ top:0; display: inline-block; position: absolute; width: 100%; animation: cycle1 15s infinite; } .slider-2{ top:0; display:inline-block; position:absolute; width:100%;animation: cycle2 15s infinite;} .slider-3{ top:0; display: inline-block; position: absolute; width: 100%; animation: cycle3 15s infinite;} #sliderborder img{ width: 100%; display: block; } .slider_text_center, .slider_text_left, .slider_text_right{ display: none; } .slider_text_center p, .slider_text_center a, .slider_text_left p, .slider_text_left a, .slider_text_right p, .slider_text_right a{ color: white; font-size: 1rem; text-align: left; padding: 0; } .slider_text_center h2, .slider_text_center h3, .slider_text_center h4, .slider_text_left h2, .slider_text_left h3, .slider_text_left h4, .slider_text_right h2, .slider_text_right h3, .slider_text_right h4{ color: white; padding: 0; text-align: left; } .slider_text_center h2, .slider_text_left h2, .slider_text_right h2{ font-size: 2rem; } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform:translateY(0); transform:translateY(0); } 40% { -moz-transform:translateY(-30px); transform:translateY(-30px); } 60% { -moz-transform:translateY(-15px); transform:translateY(-15px); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform:translateY(0); transform:translateY(0); } 40% { -webkit-transform:translateY(-30px); transform:translateY(-30px); } 60% { -webkit-transform:translateY(-15px); transform:translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform:translateY(0); -ms-transform:translateY(0); -webkit-transform:translateY(0); transform:translateY(0); } 40% { -moz-transform:translateY(-30px); -ms-transform:translateY(-30px); -webkit-transform:translateY(-30px); transform:translateY(-30px); } 60% { -moz-transform:translateY(-15px); -ms-transform:translateY(-15px); -webkit-transform:translateY(-15px); transform:translateY(-15px); } } #fader { width:25px; height:25px; position:absolute; bottom:2%; margin:0 auto 0 -15px; left:49%; } .arrow { border:solid 1px white; border-radius:100%; padding:1px; opacity:0.9; width:45px; height:45px; background-color:rgba(0,0,0,0.1); background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size:contain; } .bounce { -moz-animation:bounce 2s infinite; -webkit-animation:bounce 2s infinite; animation:bounce 2s infinite; z-index: 997; position: absolute; }