/***************** ** ** Projekt: aliud.de Startseite ** ** ******************/ /**************************************** ** TOC ***************************************** ** 01. Basic Colors ** 02. Corporate Colirs ****************************************/ /**************************************** ** 01. Basic Colors ****************************************/ /* Created on : 26.03.2014, 15:29:56 Author : chris @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee @brand-primary: #d10019; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f; @brand-text: #58585a; */ /**************************************** ** 02. Corporate Colors ****************************************/ /**************************************** ** 03. Dimensions ****************************************/ /**************************************** ** 04. Fonts ****************************************/ /* //** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px //** By default, this inherits from the ``. @headings-font-family: inherit; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit; */ /**************************************** ** 04. Border ****************************************/ * { box-sizing: border-box; } /***************** ** ** Slider ** ** ******************/ div#slider { width: 100%; height: auto; position: relative; overflow: hidden; float: left; background-color: #ffffff; padding-bottom: 20px; /* Slider Items */ } @media all and (min-width: 940px) { div#slider { padding-bottom: 0; } } div#slider * { box-sizing: border-box; } div#slider .slider-controls { position: absolute; left: 50%; bottom: 20px; z-index: 200; width: 200px; margin-left: -100px; overflow: hidden; } div#slider .slider-controls a { display: block; float: left; width: 10px; height: 10px; margin-right: 5px; border: #58585a solid 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } div#slider .slider-controls a.current { background-color: #d10019; } div#slider div.slider-item { width: 100%; height: auto; position: relative; display: none; overflow: hidden; } div#slider div.slider-item img { display: block; width: 100%; height: auto; } div#slider div.slider-item:first-child { display: block; } div#slider div.slider-item.type-1 .inner p sup { font-size: 10px; line-height: 0; } div#slider div.slider-item.type-2 .inner p { color: #58585a; } @media screen and (min-width: 940px) { div#slider div.slider-item.type-2 .inner p { color: #ffffff; } } div#slider div.slider-item.type-2 .inner p sup { color: #58585a; font-size: 10px; line-height: 0; } @media screen and (min-width: 940px) { div#slider div.slider-item.type-2 .inner p sup { color: #ffffff; } } div#slider div.slider-item.type-3 div.inner { display: none; } div#slider div.slider-item div.inner { width: 100%; } @media all and (min-width: 940px) { div#slider div.slider-item div.inner { position: absolute; width: 470px; top: 50px; right: 0; z-index: 1; } } div#slider div.slider-item div.inner h1 sup { font-weight: normal !important; font-size: 20px !important; line-height: 0 !important; color: #ffffff; } div#slider div.slider-item div.inner h1 { font-family: Arial, sans-serif; color: #58585a; font-size: 20px; line-height: 24px; font-weight: normal; padding: 15px 15px 0 15px; } @media all and (min-width: 940px) { div#slider div.slider-item div.inner h1 { width: 470px; padding: 30px; background-color: #d10019; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomleft: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; font-size: 30px; line-height: 34px; color: #ffffff; } } div#slider div.slider-item div.inner * { font-family: Arial, sans-serif; color: #58585a; font-size: 13px; line-height: 19px; text-decoration: none; } div#slider div.slider-item div.inner p { padding: 15px; } @media all and (min-width: 768px) { div#slider div.slider-item div.inner p { background-color: #ffffff; } } @media all and (min-width: 940px) { div#slider div.slider-item div.inner p { padding: 0 30px 0 30px; background-color: transparent; } } div#slider div.slider-item div.inner a { font-family: Arial, sans-serif; color: #d10019; font-size: 13px; line-height: 19px; } div#slider div.slider-item div.inner a sup { color: #d10019 !important; } div#slider div.slider-item div.inner a:hover { border-bottom: #d10019 1px solid; } #audio-container { padding-left: 15px; padding-right: 15px; } @media all and (min-width: 940px) { #audio-container { padding-left: 30px; padding-right: 60px; } } .countdown-wrap { width: 100%; height: 184px; -moz-box-shadow: inset 4px 4px 16px 10px rgba(100, 100, 100, 0.2); -webkit-box-shadow: inset 4px 4px 16px 10px rgba(100, 100, 100, 0.2); box-shadow: inset 4px 4px 16px 10px rgba(100, 100, 100, 0.2); /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */ } .countdown-wrap .timer-container { margin: 0 auto; width: 100%; padding-left: 20px; /* Animation end */ } @media all and (min-width: 768px) { .countdown-wrap .timer-container { width: 100%; } } @media all and (min-width: 940px) { .countdown-wrap .timer-container { width: 420px; padding-left: 0; } } .countdown-wrap .timer-container .time { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); display: inline-block; text-align: center; position: relative; height: 100px; width: 17%; margin: 30px 0 0 8%; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; perspective: 500px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @media all and (min-width: 768px) { .countdown-wrap .timer-container .time { width: 60px; margin: 30px 0 0 24px; } } @media all and (min-width: 940px) { .countdown-wrap .timer-container .time { width: 75px; margin: 30px 0 0 36px; } } .countdown-wrap .timer-container .time .label { position: absolute; top: 105px; left: 0; width: 100%; margin-top: 5px; font-weight: bold; } .countdown-wrap .timer-container .count { background: #202020; color: #f8f8f8; display: block; font-family: 'Arial', sans-serif; font-weight: bold; font-size: 2.8em; line-height: 2.8em; overflow: hidden; position: absolute; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); top: 0; width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; transform-style: flat; /* Animation start */ } .countdown-wrap .timer-container .count.top { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); height: 50%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .countdown-wrap .timer-container .count.bottom { background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), transparent); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1), transparent); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1), transparent); border-top: 1px solid #000; border-bottom: 1px solid #000; line-height: 0; height: 50%; top: 50%; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .countdown-wrap .timer-container .count.curr.top { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 3; } .countdown-wrap .timer-container .count.next.bottom { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); z-index: 2; } .countdown-wrap .timer-container .flip .count.curr.top { -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms linear; transition: all 250ms ease-in-out; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); } .countdown-wrap .timer-container .flip .count.next.bottom { -webkit-transition: all 250ms ease-in-out 250ms; -moz-transition: all 250ms ease-in-out 250ms; -ms-transition: all 250ms linear 250ms; transition: all 250ms ease-in-out 250ms; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .countdown-wrap .time:first-child { margin-left: 0; }