kHeader {
width: 100%; height: 400px; background-image: url(/assets/img/Next.jpg); background-position: center; background-size: cover; h1 { font-size: 1.8em; font-weight: bold; } .carousel-inner { width: 100%; height: 100%; } .carousel-item { color: #EEE; width: 100%; height: 100%; } .carousel-item-content { width: 100%; height: 90%; display: flex; flex-direction: column-reverse; margin: auto; @media(min-width: 768px) { flex-direction: row; align-items: center; height: 100%; } @media(min-width: 1100px) { max-width: 1140px; width: 100%; } } .slide-background { width: 100%; flex-grow: 2; background-size: contain; background-position: center; background-repeat: no-repeat; @media(min-width: 768px) { flex: 2 1 auto; height: 100%; } } .carousel-text-overlay { flex-shrink: 2; text-align: center; margin: auto; width: 100%; padding: 30px 0 10px 0; color: #FFF; h1 { font-size: 1.2em; @media(min-width: 1100px) { margin-bottom: 16px; } } p { line-height: 1.4em; } @media(min-width: 768px) { flex: 1 3 auto; position: unset; border: none; background: none; text-align: left; color: #FFF; font-size: 1em; padding: 0 10px 0 15px; } @media(min-width: 1100px) { font-size: 1.3em; padding: 0 40px 0 15px; } } .learn-more { color: #54a3d8; } @media(min-width: 768px) { height: 500px; } @media(min-width: 1100px) { height: 700px; }
}
kHeaderCarousel::before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);
}
.product-anchor {
display: block; position: relative; top: -52px; /* compensate for sticky header */ visibility: hidden;
}
.main {
.block:nth-of-type(odd) { background-color: #eff1f1; } .block:nth-of-type(even) { background-color: #fff; }
}
.light-text {
h1 { color: #EEE; } a { color: #abdaf9; }
}
.kAppInfo {
display: flex; flex-direction: column-reverse; img { max-width: 100%; @media(min-width: 768px) { max-width: 40%; height: auto; margin: 15px; } } .kappInfo-content { margin: 15px; } @media(min-width: 768px) { flex-direction: row; align-items: center; }
}
akonadi-logo {
width: 50%; height: auto; margin: auto; @media(min-width: 768px) { max-width: 30%; }
}
@media (min-width: 768px) {
div.block:nth-of-type(odd) .kAppInfo { flex-direction: row-reverse; }
}