/* Theme Name: Impreza Child Template: Impreza Version: 1.0 Author: UpSolution Theme URI: http://impreza.us-themes.com/ Author URI: http://us-themes.com/ */ /*------------- --0---------0-- --0---------0-- --0-------- 0-- --0---------0-- --0----0----0-- --0---0-0---0-- --0--0---0--0-- --0-0-----0-0-- --0---------0-- --------------- Webmodus GmbH Rain 21 5000 Aarau --------------- www.webmodus.ch --------------- -------------*/ /******************************************************/ /** Colorbox Core Style **/ /******************************************************/ /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#f5f5f5;} #colorbox{outline:0;} #cboxContent{background:#f5f5f5; overflow:hidden;} .cboxIframe{background:#f5f5f5;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#fff;opacity:0;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#fff;opacity:0;} #cboxLoadingOverlay{background:url(./image/logo-preload.png) no-repeat center center;} #cboxLoadingGraphic{background:url(./image/logo-preload.png) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; top:0; left:0; background:rgba(0,0,0,.3) url(./image/arr1.png) no-repeat center center;background-size:30px 30px; width:50px; height:100%; text-indent:-9999px; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out;outline:none;} #cboxPrevious:hover{ background:rgba(0,0,0,.8) url(./image/arr1.png) no-repeat center center;background-size:30px 30px; width:100px;;outline:none;} #cboxNext{position:absolute; top:0; right:0; background:rgba(0,0,0,.3) url(./image/arr2.png) no-repeat center center;background-size:30px 30px; width:50px; height:100%; text-indent:-9999px; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out;outline:none;} #cboxNext:hover{ background:rgba(0,0,0,.8) url(./image/arr2.png) no-repeat center center;background-size:30px 30px; width:100px;;outline:none;} #cboxClose{position:absolute;border:1px solid #000;border-radius:50%; top:20px; left:50%;margin-left:-20px; background:url(./image/close.png) no-repeat center center;background-size:40px 40px; width:40px; height:40px;text-indent:-9999px; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out;outline:none;} #cboxClose:hover{ -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9);outline:none;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* The following provides PNG transparency support for IE6 Feel free to remove this and the /ie6/ directory if you have dropped IE6 support. */ .cboxIE6 #cboxTopLeft{background:url(./image//ie6/borderTopLeft.png);} .cboxIE6 #cboxTopCenter{background:url(./image//ie6/borderTopCenter.png);} .cboxIE6 #cboxTopRight{background:url(./image//ie6/borderTopRight.png);} .cboxIE6 #cboxBottomLeft{background:url(./image//ie6/borderBottomLeft.png);} .cboxIE6 #cboxBottomCenter{background:url(./image//ie6/borderBottomCenter.png);} .cboxIE6 #cboxBottomRight{background:url(./image//ie6/borderBottomRight.png);} .cboxIE6 #cboxMiddleLeft{background:url(./image//ie6/borderMiddleLeft.png);} .cboxIE6 #cboxMiddleRight{background:url(./image//ie6/borderMiddleRight.png);} .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); } /******************************************************/ /** Core Owl Carousel **/ /******************************************************/ /* * Core Owl Carousel CSS File * v1.24 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } /* CSS3 Transitions */ .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x : 50%; -webkit-perspective-origin-y : 50%; -moz-perspective : 1200px; -moz-perspective-origin-x : 50%; -moz-perspective-origin-y : 50%; perspective : 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ /*empty*/ @-webkit-keyframes empty { 0% {opacity: 1} } @-moz-keyframes empty { 0% {opacity: 1} } @keyframes empty { 0% {opacity: 1} } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8); } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } .owl-theme .owl-controls{ margin-top: 10px; text-align: center; } /* Styling Next and Prev buttons */ .owl-theme .owl-controls .owl-buttons div{ color: #FFF; display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ margin: 5px; padding: 3px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #869791; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none; } /* Styling Pagination*/ .owl-theme .owl-controls .owl-page{ display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span{ display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers{ height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading{ min-height: 150px; background: url(AjaxLoader.gif) no-repeat center center } /******************************************************/ /** WEBMODUS **/ /******************************************************/ /** Seiten blenden ein **/ /* Page Fade In */ body { animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } /* End: Page Fade In */ /** Accordion **/ /** Wichtig kein Margin **/ .webmodus-accordion-container { display: flex; flex-flow: column; } .webmodus-accordion-button { text-align: left !important; padding: 15px; background: #101214; /* Farbe des Hintergrund des Buttons ändern */ display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; } .webmodus-accordion-button p { color: #fff !important; /* Farbe der Schrift des Buttons ändern */ font-size: 20px; } .webmodus-accordion-button > p{ margin:0 !important; } .webmodus-accordion-icon{ color: #fff; /* Farbe der Schrift des Icons ändern */ } .webmodus-accordion-panel { background-color: transparent; /* Farbe des Hintergrund des Panels ändern */ /*color: red;*/ /* Farbe der Schrift des Panels ändern */ overflow: hidden; transition: all 300ms ease-in-out; height: 0; } .webmodus-accordion-panel p { padding: 1rem 0 !important; } .webmodus-accordion-panel *{ margin:0 !important; width: 100%; } /******************************************************/ .main-page-container{ margin-top:-400px; z-index:9; } @media screen and (min-width:812px) and (max-width:1950px){ .main-page-container{ margin-top:-550px; } } @media screen and (min-width:1951px){ .main-page-container{ margin-top:-450px; } } .ss-style-doublediagonal-container{ position: relative; padding-top: 20px; width: 100%; background: #fff; z-index: 2; height:375px; } .ss-style-doublediagonal { z-index: 100; padding-top: 6em; background: #fff; } .ss-style-doublediagonal::before, .ss-style-doublediagonal::after { position: absolute; content: ''; pointer-events: none; top: calc(-80% - 100px); left: -25%; z-index: 1; width: 150%; height: 75%; background: inherit; -webkit-transform: rotate(5deg); transform: rotate(5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .ss-style-doublediagonal::before { height: 50%; background: rgba(255,255,255,.3); -webkit-transform: rotate(3deg); transform: rotate(3deg); -webkit-transform-origin: 3% 0; transform-origin: 3% 0; } @media screen and (max-width: 1025px){ .ss-style-doublediagonal::before, .ss-style-doublediagonal::after { top: calc(-50% - 100px) } } @media screen and (max-width: 811px){ .ss-style-doublediagonal::before, .ss-style-doublediagonal::after { top: calc(-25% - 100px) } } /******************************************************/ /** Portfolio Grid **/ /******************************************************/ .cl-effect-7 a { padding: 12px 0; color: #000; text-shadow: none; font-weight: 400; } .cl-effect-7 a::before, .cl-effect-7 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,.5); content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .cl-effect-7 a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .cl-effect-7 a:hover::before, .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::before, .cl-effect-7 a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::after { top: 0%; opacity: 1; } #portfolio{ position: relative; width: 100%; background:#fff; padding-top:70px; overflow:hidden; z-index:2; } .portfolio-box .folio-mask1, .portfolio-box .folio-mask2{ background: #afcb24; } #portfolio p { text-align:center; } .portfolio-wrap{ position: relative; width: 100%; overflow:hidden; margin:0 !important; } .portfolio-box{ position: relative; width: 25%; overflow:hidden; display:inline-block; float:left; margin:0 !important; } .portfolio-box img{ width: 100%; height:auto; display:block; } .portfolio-box .folio-mask1{ position:absolute; top:0; left:-50%; width: 50%; height:100%; display:block; z-index:10; opacity:.9; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover .folio-mask1{ left:0; } .portfolio-box .folio-mask2{ position:absolute; top:0; right:-50%; width: 50%; height:100%; display:block; z-index:10; opacity:.9; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover .folio-mask2{ right:0; } .portfolio-box h6{ width:100%; text-align:center; color:#fff; position:absolute; top:0; left:0; opacity:0; margin-top:-30px; z-index:20; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover h6{ opacity:1; top:47.5%; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s; } .portfolio-box p{ width:100%; text-align:center; color:#fff; position:absolute; margin-bottom:-40px; opacity:0; bottom:0; left:0; z-index:20; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover p{ opacity:1; bottom:50%; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s; } .portfolio-box p span{ border-top:1px solid rgba(255,255,255,.7); padding-top:3px; } .owl-carousel.navpos_inside.navstyle_circle > .owl-nav button, .owl-carousel.navpos_inside.navstyle_block > .owl-nav button{ text-shadow: unset !important; color: transparent !important; } .owl-nav > button:first-child{ background: rgba(0,0,0,.4) url(./image/arr1.png) no-repeat center center !important; border-radius: 0 !important; margin-left:2rem; background-size:20px !important; } .owl-nav > button:hover:first-child{ background: rgba(0,0,0,.8) url(./image/arr1.png) no-repeat center center !important; background-size:20px !important; } .owl-nav > button:last-child{ background: rgba(0,0,0,.4) url(./image/arr2.png) no-repeat center center !important; border-radius: 0 !important; margin-right:2rem; background-size:20px !important; } .owl-nav > button:hover:last-child{ background: rgba(0,0,0,.8) url(./image/arr2.png) no-repeat center center !important; background-size:20px !important; } #portfolio-filter { position:relative; width:100%; text-align: center; } #filter { position:relative; width:100%; } #filter li { display: inline-block; } #filter li a { position: relative; display: inline-block; /*font-family: 'OpenSans-Light-webfont';*/ outline: none; color: #000; text-decoration: none; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: .8em; margin-left:10px; margin-right:10px; margin-bottom:20px; font-style: italic; } #filter li a:hover, #filter li a:focus { outline: none; } #filter li .current { font-style: normal; color: #afcb24 !important; } #filter .cl-effect-7 a { padding: 5px 0; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } #action { position: relative; width: 100%; background:#414141; padding-top:20px; padding-bottom:20px; z-index:2; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } #action:hover { background:#fff; } #action h6 { color: #fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } #action p { color: #fff; padding-top:20px; text-align:center; } #action:hover h6 { color:#000; } #action:hover p { color:#000; } #action span { border-top:1px solid #fff; padding-top:10px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } #action:hover span { border-top:1px solid #000; } /******************************************************/ /** Teams Carousel **/ /******************************************************/ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor: url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } /* CSS3 Transitions */ .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ /*empty*/ @-webkit-keyframes empty { 0% { opacity: 1 } } @-moz-keyframes empty { 0% { opacity: 1 } } @keyframes empty { 0% { opacity: 1 } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8); } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } .owl-theme .owl-controls { margin-top: 10px; text-align: center; } /* Styling Next and Prev buttons */ .owl-theme .owl-controls .owl-buttons div { color: #FFF; display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */ margin: 5px; padding: 3px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #869791; filter: Alpha(Opacity=50); /*IE7 fix*/ opacity: 0.5; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover { filter: Alpha(Opacity=100); /*IE7 fix*/ opacity: 1; text-decoration: none; } /* Styling Pagination*/ .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50); /*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { filter: Alpha(Opacity=100); /*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading { min-height: 150px; background: url(AjaxLoader.gif) no-repeat center center } /******************************************************/ /** Teams Carousel Custom **/ /******************************************************/ #team { position: relative; width: 100%; background: #fff; overflow: hidden; z-index: 2; } #team p, #team h5{ margin:0 !important; } #team a{ font-family: inherit !important; font-size:16px !important; } #team .owl-item > .item > p:nth-child(3){ display: none !important; } #sync1 .item { position: relative; width: 100%; background: #fff; padding-bottom: 30px; text-align: center; } #sync1 .item img { width: 300px; height: 300px; display: block; border-radius: 50%; text-align: center; margin: 0 auto; } #sync1 .item h5 { padding-top: 20px; text-align: center; } #sync1 .item p { text-align: center; padding-bottom: 20px; } #sync1 .item a { position: relative; display: inline-block; margin-top: 25px; font-family: 'OpenSans-Light-webfont'; outline: none; margin: 0 auto; text-align: center; margin-left: 7px; margin-right: 7px; text-decoration: none; text-transform: lowercase; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); font-size: .8em; color: #afcb24; } #sync1 .item a:hover, #sync1 .item a:focus { outline: none; color: #025864; } #sync1 .item .cl-effect-7 a { padding: 6px 0; } .facebook-color { color: #3b5998; } .twitter-color { color: #00aced; } .google-color { color: #dd4b39; } .vimeo-color { color: #aad450; } #sync2 .item { text-align: center; margin: 0 auto; cursor: pointer; } #sync2 .item img { margin-top: 20px; width: 100px; height: 100px; display: block; border-radius: 50%; border: 1px double rgba(255, 255, 255, .2); text-align: center; margin: 0 auto; padding: 10px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #sync2 .synced .item img { border: 1px dashed rgba(0, 0, 0, .7); } #sync2 .item img:hover { border: 1px dashed rgba(0, 0, 0, .7); } /******************************************************/ /** MEDIA QUERIES START **/ /******************************************************/ /** Laptop**/ @media screen and (max-width: 1200px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /** Landscape Tablet**/ @media screen and (max-width: 991px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /** Tablet**/ @media screen and (max-width: 900px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ /** Accordion **/ .panel .panel-bild-container a { width:48%; } } /** Mini Tablet**/ @media screen and (max-width: 768px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /** Mobile Landscape **/ @media screen and (max-width: 660px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /** Mobile Smartphone Gross **/ @media screen and (max-width: 480px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /** Mobile Smartphone Mini **/ @media screen and (max-width: 320px) { /** Allgemein **/ /** Bereich Header **/ /** Bereich Slider **/ /** Bereich Before Main **/ /** Bereich Main **/ /** Bereich After Main **/ /** Bereich Bottom **/ /** Bereich Footer **/ } /******************************************************/ /** MEDIA QUERIES ENDE **/ /******************************************************/