/*swipe slider*/ .swiper-container.stage-slider:not(.tabs) { margin-bottom: 20px; } .stage.gallery-top .swiper-container , .gallery-thumbs.swiper-container { width: 100%; margin: 0 auto; } .gallery-thumbs.swiper-container { margin-bottom: 40px; } .stage.gallery-top.swiper-container .swiper-wrapper .swiper-slide , .gallery-thumbs.swiper-container .swiper-wrapper .swiper-slide { background-size: cover; background-position: center; text-overflow: ellipsis; overflow: hidden; } .stage.gallery-top.swiper-container .swiper-wrapper { margin-bottom: -3px; } .stage.gallery-top.swiper-container .swiper-wrapper .swiper-slide img, .gallery-thumbs.swiper-container .swiper-wrapper .swiper-slide img{ width: 100%; } .stage.gallery-top { width: 100%; margin-bottom: 40px; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 0 0 0 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide .swiper-slide-text { display: none; } .gallery-thumbs .swiper-slide-active { opacity: 1; } .stage.gallery-top .swiper-pagination.numbers { bottom: 7px; display: block; left: 7px; width: calc(100% - 14px); } .stage.gallery-top .swiper-pagination.numbers.left{ text-align: left; } .stage.gallery-top .swiper-pagination.numbers.right{ text-align: right; padding-right: 20px; } .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet { width: 24px; height: 24px; text-align: center; font-weight: bold; line-height: 24px; font-size: 11px; color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.3); margin: 0px 1px; border-radius: 0; } .ie8 .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet, .ie7 .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet { filter: alpha(opacity=40); } .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet.active { background-color : transparent; background-color: #DD0202; } .ie8 .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet.active, .ie7 .stage.gallery-top .swiper-pagination.numbers .swiper-pagination-bullet.active { filter: alpha(opacity=100); } /* pagination */ .stage.swiper-pagination { width: 100%; position: relative; display: flex; /* margin: 10px 0 0 0; */ margin-top: -1px; text-align: left; /*top: -5px;*/ /*background-color: #dedede;*/ } .stage.swiper-pagination.tabs { margin-bottom: 20px; } .stage.tabs .swiper-pagination-bullet { display: inline-block; background-color: #ECECEC; border-radius: 0; height: 80px; padding: 8px 14px; margin: 0 1px 0 0; font-family: wuerthbold,Arial,Helvetica,sans-serif; font-size: 16px; opacity: 1; color: #858585; box-sizing: border-box; width: 100%; /*testen*/ } .stage.tabs .swiper-pagination-bullet:last-child { margin-right: 0; } .swiper-pagination.dots .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #cc0000; } .stage.tabs .swiper-pagination-bullet.swiper-pagination-bullet-active{ color: #605d5d; background-color: #DEDEDE; } .stage.tabs .swiper-pagination-bullet .stage-item-title { font-size: 14px; font-family: wuerthbold,Arial,Helvetica,sans-serif; display: inline-block; font-weight: normal; } .stage.tabs .swiper-pagination-bullet .stage-item-descr { font-size: 16px; line-height: 17px; font-family: wuerthextra_bold_cond,Arial,Helvetica,sans-serif; font-weight: normal; text-transform: uppercase; display: inline-block; margin-top: 5px; } .stage .swiper-pagination-button{ height: 52px; width: 40px; position: absolute; top: 50%; margin-top: -26px; z-index: 10; text-align: center; cursor: pointer; } .stage .swiper-prev-button{ left: 0px; } .stage .swiper-next-button{ right: 0px; } .stage .swiper-pagination-button .icon-interface-left, .stage .swiper-pagination-button .icon-interface-right { font-size: 40px; line-height: 47px; padding-top: 5px; color: #fff; background-color: rgba(0,0,0,.3); padding-left: 0; } .stage .swiper-pagination-button .icon-interface-left { //padding-left: 10px; //padding-right: 0; text-align: left; } .stage .swiper-pagination-button .icon-interface-right { //padding-right: 10px; padding-left: 5px; text-align: right; } .stage .swiper-pagination-button:hover .icon-interface-left, .stage .swiper-pagination-button:hover .icon-interface-right { color: #000; background-color: rgba(255,255,255,.85); } .stage .invisible-button{ display : none; } /* SLIDER IN IE8 and lower */ .ie8 .swiper-slide .white.slider-backgroundbox, .ie8 .swiper-slide .whitefull.slider-backgroundbox{ background-color: #fff; } .ie8 .swiper-slide .transparent.slider-backgroundbox{ filter: alpha(opacity=40); } .ie8 .swiper-slide.hidden { display: none; } .ie8 .swiper-pagination-button .icon-interface-left, .ie8 .swiper-pagination-button .icon-interface-right, .ie8 .swiper-pagination-button:hover .icon-interface-left, .ie8 .swiper-pagination-button:hover .icon-interface-right { background-color: #000; filter: alpha(opacity=40); color: #fff; } /*end pagination */ /*end swipe slider*/ /* timeline-slider */ .timeline { border: 1px solid #959595; box-sizing: border-box; margin-bottom: 0 !important; } .timeline .swiper-slide { padding: 10px; box-sizing: border-box; } .timeline .swiper-slide h4 { font-family: wuerthbold, Arial, Helvetica, "Microsoft Yahei", "微软雅黑", sans-serif; color: #cc0000; font-size: 20px; line-height: 1.2; padding: 0; margin: 0 0 10px 0; display: block; text-transform: none; } .timeline .swiper-slide ul { list-style-type: none; } .gallery-thumbs .swiper-slide { text-align: center; background-color: #dedede; padding: 12px; box-sizing: border-box; cursor: pointer; border-right: 1px solid #959595; width: 20%; } .gallery-thumbs .swiper-slide:hover, .gallery-thumbs .swiper-slide.swiper-slide-active { background-color: #959595; } .timeline .swiper-slide .left-container, .timeline .swiper-slide .right-container { margin-right: 4%; float: left; } .timeline .swiper-slide .right-container { margin-right: 0; } .timeline .swiper-slide .left-container.half, .timeline .swiper-slide .right-container.half { width: 48%; } .timeline .swiper-slide .left-container.twothirds { width: 64%; } .timeline .swiper-slide .right-container.onethird { width: 32% } .timeline .swiper-slide div img { width: 100%; height: auto; display:block; } /* end of timeline */ .stageSlider .jcarousel-wrapper { margin: 20px auto; position: relative; z-index: 0; width: 974px; height: 350px; } .stageSlider .jcarousel { position: relative; overflow: hidden; } .stageSlider .jcarousel ul { width: 15000em; position: relative; list-style: none; margin: 0; padding: 0; } .stageSlider .jcarousel ul li{ float: left; } .stageSlider .jcarousel-pagination { display: inline; position: absolute; left: 10px; bottom: 0px; z-index: 1000; } .stageSlider .jcarousel-pagination.right { left: auto; right: 10px; } .stageSlider .jcarousel-pagination.centered{ left: 0px; } .stageSlider .jcarousel-pagination a { float: left; text-decoration: none; } .stageSlider .jcarousel-pagination.dots { bottom: 13px; } .stageSlider .jcarousel-pagination.dots a { width: 10px; height: 10px; background: #959595; text-indent: -9999px; overflow: hidden; margin: 0px 3px; border-radius: 10px; } .stageSlider .jcarousel-pagination.dots a.active { background-color: #cc0000; } .stageSlider .jcarousel-pagination.numbers { bottom: 0px; } .stageSlider .jcarousel-pagination.numbers a { width: 24px; text-align: center; font-weight: bold; line-height: 18px; font-size: 11px; color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.3); margin: 0px 1px; } .ie8 .stageSlider .jcarousel-pagination.numbers a, .ie7 .stageSlider .jcarousel-pagination.numbers a { filter: alpha(opacity=40); } .stageSlider .jcarousel-pagination.numbers a.active { background-color : transparent; background-color: #DD0202; } .ie8 .stageSlider .jcarousel-pagination.numbers a.active, .ie7 .stageSlider .jcarousel-pagination.numbers a.active { filter: alpha(opacity=100); } @media screen and (min-width: 200px) and (max-width:660px){ .gallery-thumbs .swiper-slide .swiper-slide-text { display: block; position: relative; border-right: solid 1px #959595; /*border-bottom: solid 1px #959595;*/ padding: 2px 0; text-align: center; width: 100%; margin-top: -5px; font-size: 12px; } .gallery-thumbs .swiper-slide .swiper-slide-text:hover { cursor: pointer; } .gallery-thumbs .swiper-slide:first-child .swiper-slide-text { border-left: solid 1px #959595; } .gallery-thumbs .swiper-slide img { display: none; } /* pagination */ .stage.tabs .swiper-pagination-bullet { padding: 5px; font-size: 12px; } /*end pagination */ .timeline .swiper-slide .left-container, .timeline .swiper-slide .right-container { margin-right: 0%; width: 100%; } .timeline .swiper-slide .right-container { margin-right: 0; } .timeline .swiper-slide .left-container.half, .timeline .swiper-slide .right-container.half { width: 100%; } .timeline .swiper-slide .left-container.twothirds { width: 100%; } .timeline .swiper-slide .right-container.onethird { width: 100% } }