/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
min-height: 4.5em;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ===============
GRID
=============== */
.xs-col1,
.xs-col2,
.sm-col1,
.sm-col2,
.md-col1,
.md-col2,
.md-col3,
.md-col4,
.md-col5,
.md-col6,
.md-col7,
.md-col8,
.md-col9,
.md-col10,
.md-col11,
.md-col12,
.lg-col1,
.lg-col2,
.lg-col3,
.lg-col4,
.lg-col5,
.lg-col6,
.lg-col7,
.lg-col8,
.lg-col9,
.lg-col10,
.lg-col11,
.lg-col12,
.xl-col1,
.xl-col2,
.xl-col3,
.xl-col4,
.xl-col5,
.xl-col6,
.xl-col7,
.xl-col8,
.xl-col9,
.xl-col10,
.xl-col11,
.xl-col12,
.item,
.row,
.row:after,
* {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row { margin-left: -5px; margin-right: -5px; }
.row.xs-nopadding,
.row.nopadding { margin-left: -15px; margin-right: -15px; }
.row:after {
content: "";
clear: both;
display: table;
}
.sm-col1,
.xs-col1 { width: 50%; }
.sm-col2,
.xs-col2 { width: 100%; }
.xs-col-push1 { margin-left: 50%; }
.xs-col1,
.xs-col2,
.sm-col1,
.sm-col2,
.md-col1,
.md-col2,
.md-col3,
.md-col4,
.md-col5,
.md-col6,
.md-col7,
.md-col8,
.md-col9,
.md-col10,
.md-col11,
.md-col12,
.lg-col1,
.lg-col2,
.lg-col3,
.lg-col4,
.lg-col5,
.lg-col6,
.lg-col7,
.lg-col8,
.lg-col9,
.lg-col10,
.lg-col11,
.lg-col12,
.xl-col1,
.xl-col2,
.xl-col3,
.xl-col4,
.xl-col5,
.xl-col6,
.xl-col7,
.xl-col8,
.xl-col9,
.xl-col10,
.xl-col11,
.xl-col12 { position: relative; float: left; min-height: 1px; padding-left: 5px; padding-right: 5px; margin-top: 5px; margin-bottom: 5px; }
.equal-height {
margin-top: 5px;
margin-bottom: 5px;
height: 100%;
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.equal-height > div {
height: 100%;
vertical-align: top;
display: table-cell;
float: none;
}
.foldout-toggle.sm-col-push-right,
.sm-col-push-right {
float: right;
}
.xs-col-break,
.sm-col-break {
content: "";
clear: both;
display: table;
}
.sm-col-only,
.md-col-only,
.lg-col-only {
display: none;
}
.xsm-col-only {
display: block;
}
.sm-col-inlineblock-only,
.md-col-inlineblock-only,
.lg-col-inlineblock-only {
display: none;
}
.xsm-col-inlineblock-only {
display: inline-block;
}
.padding {
padding: 20px;
}
.col-nopadding { padding-left: 0; padding-right: 0; }
.col-nomargin { margin-top: 0; margin-bottom: 0; }
.nopadding-left { padding-left: 0; }
.nopadding-right { padding-right: 0; }
.nopadding-top { padding-top: 0; }
.nopadding-bottom { padding-bottom: 0; }
.extra-padding-top {
padding-top: 40px;
}
.extra-padding-bottom {
padding-bottom: 40px;
}
.extra-padding-left {
padding-left: 40px;
}
.extra-padding-right {
padding-right: 40px;
}
.margin-top.clearfix:after,
.margin-top { margin-top: 10px; }
.margin-bottom.clearfix:after,
.margin-bottom { margin-bottom: 10px; }
.margin-left.clearfix:after,
.margin-left { margin-left: 20px; }
.margin-right.clearfix:after,
.margin-right { margin-right: 20px; }
.nomargin-left { margin-left: 0; }
.nomargin-right { margin-right: 0; }
.nomargin-top { margin-top: 0; }
.nomargin-bottom { margin-bottom: 0; }
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.container {
padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 {}
/* ===============
Fonts
=============== */
.header nav a {
font-family: Georgia, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
.font-headline,
h1, h2,
h3, h4, h5, h6,
.main h1 + p,
.font-teaser-headline,
.font-body-headline {
font-family: "Benton Mod Disp Ultra Bla It", Georgia, Helvetica, Arial, sans-serif;
font-weight: Normal;
font-style: Italic;
letter-spacing: 0.00em;
}
.font-headline,
h1, h2 {
font-size: 28px;
line-height: 32px;
letter-spacing: 0.01em;
}
article.title h1 {
font-family: "ff-basic-gothic-web-pro", Helvetica, Arial, sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: -0.01em;
line-height: 30px;
text-transform: uppercase;
}
label,
input,
textarea,
select,
.category-item h5,
.font-teaser-headline,
h3, h4 {
font-size: 19px;
line-height: 23px;
}
.font-body-headline,
.main h1 + p,
.courses .head p,
.courses .load-content > p:first-child,
h5, h6 {
font-family: "Benton Mod Disp Bd It", Georgia, Helvetica, Arial, sans-serif;
font-size: 22px;
line-height: 24px;
}
.font-body,
body {
font: 14px/17px Arial, sans-serif;
}
.control-group.focus label,
.control-group.filled label,
.vcard .headline,
footer.container {
font: 11px/13px Arial, sans-serif;
}
.label.new {
font: 10px/12px Arial, sans-serif;
}
/*
.font-headline {
font-weight: 600;
}
body,
h3, h4, h5, h6,
.font-body,
.font-body-headline,
.font-teaser-headline {
font-weight: 400;
}
*/
/* ===============
COLOURS
=============== */
/* transparent */
input::-webkit-input-placeholder {
color: transparent;
}
input:-ms-input-placeholder {
color: transparent;
}
input:-ms-input-placeholder {
color: transparent;
}
body {
background-color: #fafaf8;
}
/* Lightest grey #efefef */
/* Lighter grey */
.header li.md-dropdown > a,
.dropdown .foldout-toggle,
.category-item a:after,
.category-item .img:after,
.bg-grey {
background-color: #dcdcdc;
}
.faq section {
border-color: #dcdcdc;
}
/* Light grey */
.slideshow .slide-bullets a {
background-color: #b4b4b4;
}
.txt-lightgrey {
color: #b4b4b4;
}
input.validate,
select.validate,
textarea.validate {
border-color: #b4b4b4;
}
/* grey */
.header input::-webkit-input-placeholder {
color: #8c8c8c;
}
.header input:-ms-input-placeholder {
color: #8c8c8c;
}
.header input:-ms-input-placeholder {
color: #8c8c8c;
}
.control-group.focus label,
.control-group.filled label,
.main h1 + p,
.txt-grey {
color: #8c8c8c;
}
/* dark grey */
.bg-darkgrey {
background-color: #575757;
}
/* dark dark grey */
.bg-darkdarkgrey,
.big-dropdown > div,
.header .big-dropdown li a {
background-color: #444;
}
/* Black */
.search-result.show-result:before,
.header.show-nav-mobile:before,
.slideshow .slide-bullets .selected a,
.category-item.invert a:after,
.category-item.invert .img:after,
.category-item.alternate.invert a:after,
.category-item.invert,
.category-item.invert div,
.category-item.with-button a:hover .link,
.invert.header:before,
.container.fullwidth.scroll-images:after,
.big-dropdown:before,
.sm-pinable-toggle,
.header .menutoggle,
.header li.md-dropdown > a,
.bg-white .btn,
.bg-black {
background-color: #292929;
}
.category-item header,
.category-item.billboard section,
.top-carroussel .slides > li,
.header li a,
.btn:hover:visited,
input.button:hover,
input[type="button"]:hover,
.btn:hover,
input.button:active,
input[type="button"]:active,
.btn:active,
.bg-white .btn:hover,
.billboard.invert.with-button a:hover .link,
.header nav a,
.header li.selected a,
.header li a:hover,
.foldout-toggle:hover,
.dropdown li a:hover,
.show-foldout .foldout-toggle,
.dropdown li.selected a:hover,
.sm-pinable-toggle:hover,
.sm-pinable-toggle:hover h4,
h1, h2, h3, h4, h5, h6,
.course-choices li span,
.courses h3.foldout-toggle,
.main {
color: #292929;
}
input.button,
input[type="button"],
.btn,
.category-item.with-button .link {
border: 1px solid #292929;
}
.bg-white .btn,
nav .secondary,
h2.big:after {
border-color: #292929;
}
.shadow:before {
background-color: transparent;
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(250,250,248,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=0 );
}
/* White */
#overlay,
.header,
.header:after,
.header .spinner-container,
.header a,
.header button .bar,
.header input,
.header nav,
.dropdown ul,
.big-dropdown.white > div,
.big-dropdown.white li a,
input.button:hover,
input[type="button"]:hover,
.btn:hover,
input.button:active,
input[type="button"]:active,
.btn:active,
.billboard.invert.with-button a:hover .link,
.sm-pinable.show-sm-pinable,
.bg-white {
background-color: #fff;
}
input.button,
input[type="button"],
.btn,
.btn:visited,
.btn:link,
.error-message,
.category-item.invert header,
.category-item.billboard.invert section,
.category-item.invert h5,
.category-item.invert h2,
.top-carroussel.one-slide .invert p,
.top-carroussel.one-slide .invert h2,
.category-item.invert a:hover h5,
.category-item.invert a:hover h2,
.category-item.with-button:not(.invert) a:hover .link,
.sm-pinable-toggle,
.sm-pinable-toggle h4,
.top-carroussel .slides > li h2,
.top-carroussel .slides > li p,
.bg-black h6,
.bg-darkgrey h6,
.bg-darkturquise h6,
.bg-darksummeryellow h6,
.bg-darkgrey,
.bg-black,
.bg-blue {
color: #fff;
}
.category-item.invert.with-button .link,
input.button,
input[type="button"],
.btn {
border-color: #fff;
}
/* Purple */
/* Red #f12b3b */
.bg-red,
.error-message {
background-color: #f12b3b;
}
input.validate.invalid,
select.validate.invalid,
textarea.validate.invalid,
input.validate.required.invalid {
border-color: #f12b3b;
}
.error-message:before {
border-right-color: #f12b3b;
}
.error-message:after {
border-left-color: #f12b3b;
}
/* Yellow */
.bg-yellow {
background-color: #fff433;
}
.bg-black h5,
.bg-darkgrey h2,
.bg-darkgrey h5 {
color: #fff433;
}
.bg-white .btn:hover,
.top-carroussel h2.big:after {
border-color: #74c5c6;
}
/* Dark purple */
.show-foldout .foldout-toggle,
.bg-blue {
background-color: #4e1a5d;
}
.txt-blue {
color: #4e1a5d;
}
/* Golden */
a.close:before,
a.close:after,
.bg-golden {
background-color: #a3988b;
}
h3 div,
h5 div,
a,
a:visited,
a:link,
a:active,
a:hover,
.txt-golden {
color: #a3988b;
}
/* Light golden */
a.close:hover:before,
a.close:hover:after,
.bg-lightgolden,
.social_share a:hover {
background-color: #c8b8a3;
}
/* Green */
input.validate.valid,
select.validate.valid,
textarea.validate.valid {
border-color: #48ac54;
}
.txt-green {
color: #48ac54;
}
/* Pink */
.bg-pink {
background-color: #e4c4d2;
}
.top-carroussel,
.bg-darkpink {
background-color: #bd888e;
}
.bg-pink h5 {
color: #bd888e;
}
/* turquise */
ul li:before,
.sm-pinable-toggle:hover,
.bg-white .btn:hover,
.foldout-toggle:hover,
.dropdown li a:hover,
.dropdown li.hover a,
.dropdown li.selected a,
.dropdown li.selected a:hover,
.social_share a,
.header li.selected a,
.header li a:hover,
.header li.hover > a,
.bg-turquise {
background-color: #b5dfdc;
}
.bg-darkturquise {
background-color: #74c5c6;
}
.bg-turquise h5 {
color: #58999a;
}
.bg-black h2 {
color: #b5dfdc;
}
/* summer yellow */
.bg-summeryellow {
background-color: #ffe174;
}
.bg-darksummeryellow {
background-color: #eeb319;
}
.bg-summeryellow h5 {
color: #eeb319;
}
/* rose grey */
.bg-rosegrey {
background-color: #c0b2b9;
}
.bg-darkrosegrey {
background-color: #78405c;
}
.bg-rosegrey h5 {
color: #78405c;
}
/* cool grey */
.bg-coolgrey {
background-color: #c5c7ca;
}
.bg-darkcoolgrey {
background-color: #8b8b8b;
}
.bg-coolgrey h5 {
color: #8b8b8b;
}
/* ===============
IMAGES
=============== */
/* Icons */
/* Logos */
.header header h2 {
background: transparent url('../img/logo-pos.svg') no-repeat center center;
}
.header header h2 {
width: 128px;
height: 48px;
background-size: 128px 48px;
}
/* Arrow small sizing reset */
.category-item.invert h5:after,
.category-item.invert h2:after,
.category-item.invert.billboard h5:after,
.category-item.invert.billboard h2:after,
.category-item.invert .link:after,
.category-item.invert.with-button .link,
.top-carroussel.one-slide .invert a h2:after,
.header nav .home:before,
.header nav .dropdown > a:before,
.sm-pinable-toggle h4:after,
.header .dropdown > a:after,
.header .md-dropdown > a,
.foldout-toggle:after,
.spinner:before,
.spinner:after {
content: "";
display: inline-block;
vertical-align: baseline;
width: 18px;
height: 11px;
margin-right: -18px;
background-repeat: no-repeat;
background-position: 80% center;
background-size: 8px 11px;
}
input.button:hover,
input[type="button"]:hover,
.btn:hover,
input.button:active,
input[type="button"]:active,
.btn:active,
.billboard.invert.with-button a:hover .link,
.billboard.with-button .link {
background-image: url("../img/icon-arrow-small-black.svg");
}
.billboard.invert:not(.with-button) .link:after,
.billboard.invert.with-button .link,
.billboard.with-button:not(.invert) a:hover .link,
.top-carroussel.one-slide .invert a h2:after,
.breadcrumb a:after,
input.button,
input[type="button"],
.btn {
background-image: url("../img/icon-arrow-small-white.svg");
}
.category-item.invert.with-button .link {
background-position: 92% center;
}
select {
/* background-image: url("../img/icon-arrow-down-small-grey.svg");*/
background-size: 11px 8px;
}
select::-ms-expand{
display:none;
}
select:hover,
.sm-pinable-toggle:after,
.sm-pinable-toggle:hover h4:after,
.header .md-dropdown.hover > a,
.header .md-dropdown > a:hover,
.foldout-toggle:after {
background-image: url("../img/icon-arrow-down-small-black.svg");
background-size: 11px 8px;
}
.sm-pinable-toggle h4:after,
.header .md-dropdown > a,
.foldout-toggle:hover:after {
background-image: url("../img/icon-arrow-down-small-white.svg");
background-size: 11px 8px;
}
.sm-pinable-toggle.show-sm-pinable h4:after,
.show-foldout .foldout-toggle:after {
background-image: url("../img/icon-arrow-up-small-white.svg");
background-size: 11px 8px;
}
.sm-pinable-toggle.show-sm-pinable:hover h4:after,
.sm-pinable-toggle.show-sm-pinable:after {
background-image: url("../img/icon-arrow-up-small-black.svg");
background-size: 11px 8px;
}
.course-choices li a.delete {
background-image: url("../img/icon-delete-blue.svg");
background-size: 15px 16px;
}
input.button,
input[type="button"],
.btn,
.category-item.with-button .link {
background-repeat: no-repeat;
background-position: 95% center;
background-size: 8px 11px;
}
.social_share .facebook {
background-image: url('../img/icon-facebook-sm-white.svg');
}
.social_share .linkedin {
background-image: url('../img/icon-linkedin-sm-white.svg');
}
.social_share .twitter {
background-image: url('../img/icon-twitter-sm-white.svg');
}
.lazy-img-bg {
background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
}
.spinner:before,
.spinner:after {
background-image: url("../img/icon-spinner-lg-grey.svg");
background-size: contain;
position: absolute;
}
.spinner:after {
background-image: url("../img/icon-spinner-lg-red.svg");
}
.spinner.small:before {
background-image: url("../img/icon-spinner-sm-grey.svg");
}
.spinner.small:after {
background-image: url("../img/icon-spinner-sm-red.svg");
}
/*
input[type=radio]:hover,
input[type=checkbox]:hover {
background-image: url("../img/icon-ok-icon-small-lightgrey.svg");
}
input[type=radio]:checked,
input[type=checkbox]:checked {
background-image: url("../img/icon-ok-icon-small-blue.svg");
}
*/
.header nav .home:before,
.header nav .dropdown > a:before {
width: 12px;
margin-right: 0.4em;
}
.header nav .home:before {
background-image: url("../img/icon-home-small-black.svg");
background-size: 12px 14px;
height: 14px;
}
.header nav .dropdown > a:before {
background-image: url("../img/icon-burger-sm-black.svg");
background-size: 10px 12px;
height: 12px;
}
.header nav .dropdown.hover > a:before {
background-image: url("../img/icon-close-sm-black.svg");
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
overflow-x: hidden;
padding-bottom: 10em;
}
hr {
border: none;
height: 1px;
margin-top: 20px;
margin-bottom: 20px;
}
input,
select,
textarea {
background-color: transparent;
display: block;
padding: 0.2em 0 0.2em;
margin: 0;
width: 100%;
text-overflow: ellipsis;
-webkit-appearance: none;
border: none;
border-radius: 0;
border-bottom-style: solid;
border-bottom-width: 3px;
-webkit-transition: color 0.5s, border-color 0.3s;
transition: color 0.5s, border-color 0.3s;
}
textarea:focus,
select:focus,
input:focus {
outline-width: 0;
}
input.dkzip,
input.dkzip-city {
display: inline-block;
}
input.dkzip {
width: 30%;
}
input.dkzip-city {
width: 69%;
float: right;
}
input::-webkit-input-placeholder {
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
input::-moz-placeholder {
transition: color 0.5s;
}
input:-ms-input-placeholder {
transition: color 0.5s;
}
input[type=radio],
input[type=checkbox] {
width: 20px;
height: 20px;
margin-right: 0.5em;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-size: contain;
}
input[type=radio] {
-moz-border-radius: 11px;
border-radius: 11px;
width: 22px;
height: 22px;
}
select {
padding-right: 9%;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 97% center;
}
label {
display: block;
}
input[type=radio].validate,
input[type=checkbox].validate {
border: none;
}
.error-message {
position: absolute;
padding: 0.5em;
width: 90%;
min-width: 148px;
left: 5%;
top: 100%;
margin-top: 7px;
z-index: 10;
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
display: none;
}
.error-message.show.warning,
.error-message.show.focus {
display: block;
}
.error-message:before,
.error-message:after {
content: "";
position: absolute;
top: -7px;
border-top: 7px solid transparent;
}
.error-message:before {
left: 25px;
border-right-style: solid;
border-right-width: 7px;
}
.error-message:after {
left: 32px;
border-left-style: solid;
border-left-width: 7px;
}
.error-message.warning {
bottom: 100%;
top: auto;
margin-top: 0;
margin-bottom: 7px;
}
.error-message.warning:before,
.error-message.warning:after {
top: auto;
bottom: -7px;
border-top: none;
border-bottom: 7px solid transparent;
}
.control-group {
margin: 2em 0 0.5em;
}
label {
position: absolute;
-moz-transition: font-size 0.3s, top 0.4s;
transition: font-size 0.3s, top 0.4s;
}
.control-group.focus label,
.control-group.filled label {
top: -1.2em;
}
.btn-signin {
min-width: 12em;
margin-top: 1.5em;
}
.vertical-middle.login {
margin-top: 40px;
}
.foldout {
clear: both;
-webkit-transition: margin-top 0.2s 0.1s, margin-bottom 0.2s 0.1s;
transition: margin-top 0.2s 0.1s, margin-bottom 0.2s 0.1s;
padding: 0;
margin: 0;
}
.foldout.show-foldout {
z-index: 30;
}
.tab-animate-height,
.foldout-animate-height {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.tab-animate-height,
.foldout-animate-height {
padding: 0;
}
.tabs .tab-animate-height.show-tab,
.foldout.show-foldout .foldout-animate-height {
max-height: 1800px;
}
.tabs .tab-animate-height,
.foldout .foldout-animate-height {
padding: 0;
margin: 0;
}
/*
.foldout:before,
.foldout:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 50%;
top: -10px;
opacity: 0;
z-index: 10;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.foldout:before {
border-left: 10px solid transparent;
margin-left: -10px;
}
.foldout:after {
border-right: 10px solid transparent;
margin-right: -10px;
}
.foldout.show-foldout:before,
.foldout.show-foldout:after {
opacity: 1;
}*/
.foldout-toggle {
padding-right: 20px;
margin-right: 0;
width: auto;
height: auto;
display: block;
z-index: 1;
cursor: pointer;
}
a.foldout-toggle:hover {
text-decoration: none;
}
.foldout-toggle:after {
position: absolute;
right: 33px;
top: 50%;
margin-top: -6px;
}
.dropdown {
z-index: 20;
}
.dropdown .foldout-toggle {
padding: 10px 30px 10px 15px;
}
.dropdown ul {
position: absolute;
left: 0;
right: 0;
-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
.dropdown li {
margin: 0;
}
.dropdown li:before {
display: none;
}
.dropdown li a {
display: block;
padding: 8px 15px;
cursor: pointer;
}
.dropdown .category li a:after {
content: "";
width: 0.8em;
height: 0.8em;
margin-top: -0.4em;
position: absolute;
right: 17px;
top: 50%;
}
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }
h3, h4 { margin-bottom: 10px; }
p { margin: 1em 0; }
h6 + p { margin-top: 0; }
h5 + h6 { margin-top: 1em; }
img { width: 100%; max-width: 100%; }
img.img-noscale {
width: auto;
max-width: 100%;
}
a,
a:hover,
a:visited,
a:active,
a.link,
.btn:hover,
a.link:hover { text-decoration: none; }
.header ul a:hover,
footer a:hover { text-decoration: underline; }
input.button,
input[type="button"],
.btn,
.category-item.with-button .link {
padding: 10px 12px 10px 10px;
}
input.button,
input[type="button"],
.btn {
display: inline-block;
padding-right: 1.5em;
border-width: 2px;
cursor: pointer;
}
.category-item.with-button section p.link,
.category-item.with-button .link {
display: inline-block;
min-width: 200px;
width: 28%;
max-width: 400px;
border-width: 2px;
text-align: center;
padding-right: 20px;
}
.category-item.with-button .link,
.category-item.invert.with-button .link {
height: auto;
}
.btn-teaser {
margin-top: 10px;
padding: 10px 15px;
width: 100%;
border: none;
}
.btn-teaser h5 + p {
margin-top: 0;
}
.btn-teaser p:last-child {
margin-bottom: 0;
}
.search-result:before,
.header:before,
.header:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.header header {
clear: both;
}
.header input,
.header header {
min-height: 48px;
}
.header {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 101;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.search-result:before,
.header:before {
position: fixed;
bottom: 100%;
opacity: 0;
-moz-transition: opacity 0.3s, bottom 0.3s;
transition: opacity 0.3s, bottom 0.3s;
}
.search-result.show-result:before,
.header.show-nav-mobile:before {
z-index: -1;
bottom: -100px;
opacity: 0.9;
}
.header .menutoggle {
position: absolute;
display: block;
top: 0;
right: 0;
z-index: 100;
padding: 5px 12px 6px;
background-image: none;
border: 1px solid transparent;
width: 50px;
}
.header .menutoggle .bar {
display: block;
height: 2px;
margin: 7px 0 8px;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
.header nav {
overflow: hidden;
max-height: 0px;
clear: left;
position: absolute;
left: 0;
right: 0;
top: 48px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header.show-nav-mobile nav {
max-height: 500px;
}
.header.show-nav-mobile .menutoggle .bar {
opacity: 0;
}
.header.show-nav-mobile .menutoggle .bar:first-child {
-webkit-transform: translate(0px, 10px) rotate(45deg);
transform: translate(0px, 10px) rotate(45deg);
opacity: 1;
}
.header.show-nav-mobile .menutoggle .bar:last-child {
-webkit-transform: translate(0px, -10px) rotate(-45deg);
transform: translate(0px, -10px) rotate(-45deg);
opacity: 1;
}
.header.show-nav-mobile .menutoggle:before,
.header.show-nav-mobile .menutoggle:after {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
bottom: -21px;
}
.header .menutoggle:before {
right: 24px;
border-left: 10px solid transparent;
}
.header .menutoggle:after {
right: 14px;
border-right: 10px solid transparent;
}
.header header > a {
display: block;
z-index: 10;
float: left;
}
.header h2 {
text-indent: -999px;
overflow: hidden;
}
.header h3 {
position: absolute;
top: 0;
left: 60px;
margin: 13px 1em 0;
}
.header ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
.header ul ul {
margin-top: 0;
}
.header li {
display: block;
}
.big-dropdown li a,
.big-dropdown li p,
.big-dropdown li h5,
.header li a {
padding: 12px 10px 10px;
}
.big-dropdown li a h5,
.big-dropdown li a p {
margin: 0;
padding: 0;
}
.big-dropdown li:not(:last-child) h5,
.big-dropdown li:not(:last-child) p {
padding-bottom: 0;
}
.big-dropdown img {
margin-bottom: 0.8em;
}
.header li a {
display: block;
}
.header li a:hover {
text-decoration: none;
}
.searchfield-container button,
.header .spinner-container,
.header button {
display: none;
float: right;
position: relative;
}
.header form {
position: absolute;
top: 0;
padding: 0 51px 0 58px;
width: 100%;
display: block;
overflow: hidden;
}
.searchfield-container > div,
.header form div {
overflow: hidden;
}
.searchfield-container input,
.header input {
float: left;
line-height: 20px;
padding: 14px 3px 14px 14px;
margin: 0;
height: 48px;
}
.header .spinner-container {
height: 48px;
width: 34px;
}
.searchfield-container button[type="reset"],
.searchfield-container button[type="submit"],
.header .spinner-container,
.header button[type="reset"],
.header button[type="submit"] {
border: 1px solid transparent;
overflow: hidden;
text-indent: -999px;
}
.searchfield-container .show-result button[type="reset"],
.searchfield-container button[type="submit"],
.searchfield-container .show-spinner .spinner-container,
.header .show-spinner .spinner-container,
.header .show-result button[type="reset"],
.header button[type="submit"] {
display: block;
}
.searchfield-container .show-spinner button[type="submit"],
.header .show-spinner button[type="submit"],
.searchfield-container .show-result button[type="submit"],
.header .show-result button[type="submit"] {
display: none;
}
.header > div > a {
margin-bottom: 1em;
}
/* dropdown */
.header .dropdown {
z-index: 101;
cursor: pointer;
}
.header dropdown li {
margin: 0;
}
.header .dropdown ul:before {
content: "";
position: absolute;
display: block;
right: 0;
height: 1px;
width: 31px;
}
.header .dropdown.hover ul,
.header dropdown > a {
display: block;
}
/*.header .dropdown > a {
cursor: pointer;
text-indent: -999px;
overflow: hidden;
margin: 0 0 0 1px;
width: 31px;
height: 48px;
background-position: center center;
}*/
/*
.header .dropdown > div,
.header .dropdown ul {
display: none;
position: absolute;
top: 0;
left: 60px;
right: 0;
}
.header .dropdown.hover > div {
display: block;
}
.header .dropdown > div {
}*/
.header .dropdown > div > div,
.header .dropdown li:first-child {
padding-top: 1px;
}
.header .dropdown li {
float: none;
}
.header .dropdown > div a
.header .dropdown li a {
padding: 10px 10px 8px;
text-align: left;
min-width: 150px;
}
/* big dropdown */
.header .dropdown > div,
.header .dropdown ul,
.big-dropdown {
position: absolute;
top: 67px;
left: 120%;
right: -10px;
z-index: 110;
overflow: hidden;
-moz-transition: margin-left 0.3s ease-out, left 0.3s ease-out;
transition: margin-left 0.3s ease-out, left 0.3s ease-out;
box-shadow: 0px 1px 0px 10px rgba(0,0,0,0.3);
}
.big-dropdown img {
display: none;
}
.header .dropdown > div,
.header .dropdown ul {
top: 0;
}
.header .dropdown.hover > div,
.header .dropdown.hover ul,
.show-nav-mobile .big-dropdown.hover {
left: 60px;
}
.big-dropdown > div {
min-width: 290px;
}
.show-nav-mobile .big-dropdown.hover > div {
}
.big-dropdown ul {
float: none;
margin: 0;
width: 100%;
padding-right: 2.5%
}
.big-dropdown ul:first-child li { margin-top: 0; }
.big-dropdown ul:last-child li { margin-bottom: 0; }
/* md-dropdown */
.header .md-dropdown {
margin-left: 0;
margin-right: 0;
}
.header .md-dropdown > a {
display: none;
}
nav .secondary {
border-top-style: solid;
border-top-width: 4px;
}
.top-carroussel .slides > li {
text-align: center;
}
h2.big {
font-style: italic;
padding-bottom: 30px;
margin-bottom: 20px;
}
h2.big:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
display: block;
border-top-style: solid;
border-top-width: 2px;
height: 3px;
border-bottom-style: solid;
border-bottom-width: 4px;
width: 50px;
margin-left: -25px;
}
article.title {
margin-top: -90px;
margin-bottom: -10px;
z-index: 12;
}
article.billboard {
margin-bottom: 0;
}
article header h1 {
margin: 0 0 33px;
}
article header p,
article header .foldout .foldout-animate-height p {
margin: 0 0 10px;
}
article.main header span {
display: inline-block;
margin-bottom: 5px;
}
article.main > section,
article.main > header {
float: none;
}
article h3,
article h4,
article:not(.billboard) h5,
article h6 {
margin: 40px 0 0;
}
article section h3:first-child,
article section h4:first-child,
article section h5:first-child,
article section h6:first-child {
margin: 0;
}
article.main section img {
width: auto;
margin: 0 0 2em 1em;
float: right;
clear: right;
}
article.main section img.photo {
max-width: 20%;
margin: 0 1em 2em 0;
}
article.main section img.fullwidth {
max-width: none;
width: 100%;
}
article.main section img.fullwidth {
margin: 1em 0;
}
article.main section img.photo {
float: left;
clear: left;
}
article.main section img.fullwidth {
float: none;
clear: both;
}
ul,
ol {
padding: 0 20px;
margin: 20px 0;
clear: left;
}
ul:first-child,
ol:first-child {
margin-top: 0;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
ul {
list-style-type: none;
}
article ul li:before {
content: "";
width: 4px;
height: 14px;
position: absolute;
left: -20px;
top: 2px;
transform: rotate(-45deg);
}
ol > li:before {
display: none;
}
li {
margin: 10px 0;
}
blockquote {
max-width: 85%;
padding: 0;
margin: 2em auto;
white-space: normal;
}
blockquote .statement {
margin-bottom: 0.5em;
}
.label {
margin-right: 0.7em;
display: inline-block;
}
.label.new {
vertical-align: baseline;
padding: 2px 4px;
letter-spacing: 1px;
text-transform: uppercase;
}
.social_share {
z-index: 10;
margin-top: 1px;
margin-bottom: 10px;
float: right;
}
.label.length {
display: inline;
}
.social_share a {
display: inline-block;
float: left;
overflow: hidden;
padding-left: 32px;
text-indent: -999px;
min-width: 32px;
height: 32px;
margin: 0 1px 0 2px;
background-position: 0px center;
background-size: 32px 32px;
width: auto;
}
.social_share a:hover {
text-decoration: none;
}
.social_share a > div {
display: none;
text-indent: 0;
padding: 2px 5px;
height: 32px;
font-size: 9px;
line-height: 30px;
white-space: nowrap;
}
.spinner:before,
.spinner:after {
top: 0;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
}
.header .spinner-container {
text-indent: 0;
}
.spinner.small:before,
.spinner.small:after {
width: 16px;
height: 16px;
margin-top: 3px;
}
.spinner.small:before,
.spinner.small:after {
margin-left: -8px;
}
.spinner-container .spinner.small {
width: 20px;
height: 20px;
}
.spinner-container .spinner,
.spinner-container:after {
display: inline-block;
vertical-align: middle;
}
.spinner-container:after {
content: "";
height: 97%;
margin-left: -0.005em;
}
.spinner:before {
-webkit-animation: rotateCounter360 2.2s linear infinite;
animation: rotateCounter360 2.2s linear infinite;
}
.spinner:after {
-webkit-animation: rotate360 1.3s linear infinite;
animation: rotate360 1.3s linear infinite;
}
@-webkit-keyframes rotate360 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotateCounter360 {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes rotateCounter360 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
a.close {
position: absolute;
top: 10px;
right: 11px;
width: 30px;
height: 30px;
z-index: 60;
cursor: pointer;
}
a.close:before,
a.close:after {
content: "";
width: 30px;
height: 2px;
position: absolute;
top: 14px;
opacity: 0;
-moz-transition: opacity 0.3s 0.2s, -moz-transform 0.5s 0.5s;
transition: opacity 0.3s 0.2s, transform 0.5s 0.5s;
}
a.close:before {
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.show-foldout a.close:before {
opacity: 1;
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.show-foldout a.close:after {
opacity: 1;
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
aside.md-col-push-right,
aside.lg-col-push-right {
min-height: 62px;
}
.sm-pinable {
padding: 10px 0;
margin-top: 0;
position: absolute;
z-index: 100;
left: 5px;
right: 5px;
}
.sm-pinable.pinned {
background-color: #fff;
box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
}
.sm-pinable .support {
margin: 0;
height: 26px;
max-height: 0;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
overflow: hidden;
background-color: transparent;
text-align: center;
}
.sm-pinable-animate-height {
display: none;
}
.sm-pinable.show-sm-pinable .sm-pinable-animate-height {
display: block;
}
.sm-pinable-toggle {
display: block;
text-align: center;
}
.show-sm-pinable .sm-pinable-toggle:after {
height: 22px;
right: 5px;
position: absolute;
}
.sm-pinable-hide {
display: none;
}
.sm-pinable.pinned {
position: fixed;
top: 0;
}
.sm-pinable-toggle {
padding: 9px 20px 8px;
cursor: pointer;
-webkit-transition: background-color 0.2s, color 0.2s, border 0.2s;
transition: background-color 0.2s, color 0.2s, border 0.2s;
}
.sm-pinable-toggle h4 {
display: inline-block;
margin: 0;
}
.vcard {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 15px;
color: #fff;
background-color: rgba(36, 36, 36, 0.56);
}
.vcard a {
color: #fff;
}
.vcard li {
margin: 0;
}
.vcard .tel {
white-space: nowrap;
}
.slideshow {
margin: 80px 0;
}
.slideshow .slide-bullets {
padding: 0;
}
.slideshow .slide-bullets li {
width: 9px;
height: 9px;
padding: 0;
cursor: pointer;
display: inline-block;
margin-left: 7px;
}
.slideshow .slide-bullets li:first-child {
margin-left: 0;
}
.slideshow .slide-bullets a {
cursor: pointer;
display: block;
width: 100%;
height: 100%;
}
.slideshow .slides {
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
z-index: 100;
}
.slideshow .slides > li {
display: inline-block;
vertical-align: top;
width: 100%;
margin: 0;
z-index: 0;
white-space: normal;
-webkit-transition: left 0.5s ease-out;
transition: left 0.5s ease-out;
}
.slideshow ul li:before {
display: none;
}
.slideshow .slides > .selected {
z-index: 20;
}
.slideshow img {
max-height: 60px;
}
.slideshow img.loaded,
.slideshow img.loading {
max-height: none;
}
.teasers .slideshow img {
max-height: none;
max-width: 50%;
width: auto;
display: block;
margin: 0 auto 2em;
}
.teasers .slideshow li > .customer {
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.teasers .slideshow .slide-bullets {
text-align: center;
}
.top-carroussel.slideshow {
margin: 0;
}
.top-carroussel .img {
height: 148px;
background-size: cover;
background-position: center center;
}
.top-carroussel .img canvas,
.top-carroussel .img video {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}
.top-carroussel article {
white-space: normal;
padding: 0 20px 0;
}
.top-carroussel article > div {
padding-top: 17px;
padding-bottom: 17px;
}
.top-carroussel article p {
margin-bottom: 0;
}
.top-carroussel article h2 {
margin: 0;
text-align: center;
}
.top-carroussel .slides > li {
display: block;
margin: 10px 10px;
width: auto;
}
.top-carroussel .slides > li.selected {
pointer-events: auto;
}
.top-carroussel a:hover {
text-decoration: none;
}
.top-carroussel .slide-bullets {
display: none;
}
.front .support-toggle {
float: none;
text-align: center;
margin: 17px 0 5px;
}
/* other styles */
.top-carroussel.one-slide {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.top-carroussel.small.one-slide,
.top-carroussel.small.one-slide.slideshow {
position: relative;
margin: 0;
bottom: auto;
left: 0;
right: 0;
min-height: 400px;
max-height: 1000px;
height: 70%;
height: 70vh;
overflow: hidden;
}
.top-carroussel.one-slide.slideshow {
margin: 0;
}
.top-carroussel.one-slide .slides > li {
pointer-events: none;
}
.top-carroussel.one-slide ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.top-carroussel.one-slide .content {
height: 100%;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.top-carroussel.one-slide .content > li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: block;
background-color: transparent;
}
.top-carroussel.one-slide .content > li.selected {
display: block;
}
.top-carroussel.one-slide .img,
.top-carroussel.one-slide img {
position: absolute;
width: 100%;
max-width: 100%;
height: auto;
max-height: none;
opacity: 0;
transform: perspective(700px) translate3d(0px,0px,400px);
transition: transform 1.6s, opacity 1.6s;
}
.top-carroussel.one-slide.portrait img {
width: initial;
max-width: none;
height: 100%;
max-height: 100%;
}
.top-carroussel.one-slide .img {
height: 100%;
}
.top-carroussel.one-slide article {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
transform: perspective(700px) translate3d(0px,20px,630px);
transition: transform 1.8s, opacity 0.7s;
opacity: 0;
z-index: 100;
}
.top-carroussel.one-slide article > div,
.top-carroussel.one-slide article > a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
/*
.top-carroussel.one-slide article:after {
content: "";
position: absolute;
top: -70%;
left: 0;
width: 100%;
height: 170%;
z-index: -1;
opacity: 0.97;
}
*/
.top-carroussel.one-slide article.vertical-middle {
height: 100%;
text-align: center;
}
.top-carroussel.one-slide article.vertical-middle:before,
.top-carroussel.one-slide article.vertical-middle > a,
.top-carroussel.one-slide article.vertical-middle > div {
display: inline-block;
vertical-align: middle;
}
.top-carroussel.one-slide article.vertical-middle:before {
content: "";
height: 97%;
margin-left: -0.005em;
}
/*
.top-carroussel.one-slide article.vertical-middle:after {
height: 90%;
width: 300%;
top: -100%;
left: -10%;
opacity: 0.8;
-moz-transform-origin: 0% 100%;
-moz-transform: rotate(90deg);
-ms-transform-origin: 0% 100%;
-ms-transform: rotate(90deg);
transform-origin: 0% 100%;
transform: rotate(90deg);
}
*/
.top-carroussel.one-slide article.vertical-middle > a,
.top-carroussel.one-slide article.vertical-middle > div {
width: 99%;
margin-left: -1%;
margin-top: 0;
margin-bottom: 100px;
}
.top-carroussel.one-slide article.invert:after {
opacity: 0.8;
}
.top-carroussel.one-slide .selected.loaded .img,
.top-carroussel.one-slide .selected.loaded img {
transform: translateZ(0);
opacity: 1;
}
.top-carroussel.one-slide .selected.loaded article {
transform: perspective(700px) translate3d(0px,0px,0px);
opacity: 1;
}
.top-carroussel.one-slide .animate-out.loaded .img,
.top-carroussel.one-slide .animate-out.loaded img {
transform: perspective(700px) translate3d(0px,0px,0px);
opacity: 0;
}
.top-carroussel.one-slide .animate-out.loaded article {
transform: perspective(700px) translate3d(-6px,20px,120px);
transition: transform 1s, opacity 1s;
opacity: 0;
}
.top-carroussel.one-slide a h2:after {
height: 16px;
}
.top-carroussel.one-slide p {
max-height: 100px;
margin: 1em 0 0;
padding: 0;
overflow: hidden;
transition: max-height 0.5s, margin 0.5s, opacity 0.5s;
}
.category-item {
position: relative;
}
.category-item > div:last-child,
.category-item > a > div:last-child,
.category-item section { z-index: 1; }
.category-item section p:last-child { margin-bottom: 0; }
.category-item section p:first-child { margin-top: 0.2em; }
.category-item > div,
.category-item > a > div {
margin-left: 25%;
}
.category-item a {
background-repeat: no-repeat;
background-size: 50%;
background-position: -12.5% 50%;
display: block;
}
.list-item a:hover,
.category-item a:hover {
text-decoration: none;
}
.list-item .img:after,
.category-item > a:after {
content: "";
opacity: 0.35;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
top: 0;
position: absolute;
width: 25%;
height: 100%;
z-index: 2;
}
.list-item:hover .img:after,
.category-item > a:hover:after {
opacity: 0;
}
.list-item .img,
.category-item .img {
position: absolute;
width: 25%;
height: 100%;
left: -25%;
bottom: 0;
z-index: 2;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.list-item,
.category-item > a {
min-height: 116px;
}
.category-item header p {
margin: 0;
padding: 0;
border: none;
}
.category-item ul:first-child,
.category-item ul:first-child {
margin-top: 1em;
}
.category-item li {
margin: 2px 0;
}
.category-item li:first-child {
margin-top: 0;
}
.category-item li:last-child {
margin-bottom: 0;
}
.category-item.alternate a:after {
opacity: 0;
}
.category-item.alternate a:hover:after {
opacity: 0.7;
}
.category-item.alternate.svg .img {
background-size: contain;
background-position: center center;
}
.category-item.large .label {
margin-top: 0.3em;
}
.square-col {
padding: 50%;
width: 0;
height: 0;
}
.square-col > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.square-col.img {
background-size: 100%;
background-size: cover;
}
.center-content-div:before,
.center-content-div > div {
display: inline-block;
vertical-align: middle;
}
.center-content-div:before {
content: "";
height: 97%;
margin-left: -0.005em;
}
.center-content-div > div {
width: 96%;
text-align: center;
}
.center-content-div > div > p:last-child {
margin-bottom: 0;
}
.center-content-div > div > p:first-child {
margin-top: 0;
}
.center-content-div > .padding {
padding: 0 10px;
}
.center-content-div img {
max-width: 40%;
margin-bottom: 0.8em;
}
.scroll-images {
height: 600px;
height: 40vh;
min-height: 140px;
max-height: 340px;
width: 100%;
}
.container.fullwidth.scroll-images {
overflow: hidden;
margin-bottom: 5px;
}
.container.fullwidth.scroll-images:before,
.container.fullwidth.scroll-images:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
z-index: 10;
}
.container.fullwidth.scroll-images:after {
z-index: -1;
height: 100%;
}
.container.fullwidth.scroll-images:before {
opacity: 0.7;
transform: rotate(180deg);
}
.scroll-images.overlap-top {
margin-top: -140px;
}
.scroll-images img {
width: 20%;
min-width: 130px;
position: absolute;
}
.scroll-images img:nth-child(13n+1) { left: 31%; top: 140px; margin-top: 0; }
.scroll-images img:nth-child(13n+2) { left: 85%; top: 100px; margin-top: 0; }
.scroll-images img:nth-child(13n+3) { left: -5%; top: 30px; margin-top: 0; }
.scroll-images img:nth-child(13n+4) { left: 67%; top: 60px; margin-top: 0; }
.scroll-images img:nth-child(13n+5) { left: 13%; top: 0px; margin-top: 0; }
.scroll-images img:nth-child(13n+6) { left: 49%; top: 80px; margin-top: 0; }
.scroll-images img:nth-child(13n+7) { left: 20%; top: 120px; margin-top: 0; }
.scroll-images img:nth-child(13n+8) { left: 58%; top: 150px; margin-top: 7%; }
.scroll-images img:nth-child(13n+9) { left: 0%; top: 150px; margin-top: 7%; }
.scroll-images img:nth-child(13n+10) { left: 72%; top: 180px; margin-top: 7%; }
.scroll-images img:nth-child(13n+11) { left: 41%; top: 160px; margin-top: 7%; }
.scroll-images img:nth-child(13n+12) { left: 90%; top: 210px; margin-top: 7%; }
.scroll-images img:nth-child(13n+13) { left: 17%; top: 80px; margin-top: 14%; }
article.main .scroll-images img:nth-child(3n+2) {
width: 30%;
margin-left: -5%;
}
.print-page {
display: none;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: -100px;
z-index: 100;
opacity: 0.95;
}
p a:hover {
text-decoration: underline;
}
.print-header,
.print-only {
display: none;
}
.lightbox {
cursor: pointer;
cursor: zoom-in;
width: auto;
}
.lightbox-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 1000;
text-align: center;
display: none;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
cursor: pointer;
cursor: zoom-out;
}
.lightbox-container.visible {
display: block;
opacity: 1;
}
.lightbox-container.animate-in,
.lightbox-container.animate-out {
opacity: 0;
}
.lightbox-container:before,
.lightbox-container > div,
.lightbox-container > div:before,
.lightbox-container > div > .lightbox-img {
display: inline-block;
vertical-align: middle;
}
.lightbox-container:before,
.lightbox-container > div:before {
content: "";
height: 97%;
margin-left: -0.005em;
}
.lightbox-container > div {
width: 100%;
height: 100%;
padding: 20px;
}
.lightbox-img {
}
/* ==========================================================================
Media Queries
========================================================================== */
/* TOP MENU */
@media only screen and (min-width: 700px) {
/* Fonts */
.big-dropdown a {
font: 14px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
nav .secondary > li > a {
font-size: 10px;
line-height: 11px;
}
/* Colours */
/* White */
.big-dropdown.white,
.header .big-dropdown.white li a {
background-color: #fff;
}
/* Turquise */
.big-dropdown.white li a:hover h5,
.big-dropdown.white li.selected a h5 {
background-color: #b2e3e2;
}
/* Black */
.header nav .secondary > li.hover > a,
.header nav .secondary > li > a:hover,
.big-dropdown.white li a h5 {
color: #000;
}
.big-dropdown,
.header .big-dropdown li a {
background-color: #292929;
}
/* Grey */
.header nav .secondary > li > a {
color: #8c8c8c;
}
/* Images */
.header nav .secondary > li.hover > a:after,
.header nav .secondary > li > a:hover:after,
.header .dropdown > a:after {
background-image: url("../img/icon-arrow-down-small-black.svg");
background-size: 11px 8px;
}
.header nav .secondary > li > a:after {
background-image: url("../img/icon-arrow-down-small-grey.svg");
background-size: 11px 8px;
}
/* Other */
.header:before {
display: none;
}
.header .menutoggle {
display: none;
}
/*.header header > a {
float: left;
}*/
.header nav {
clear: none;
float: right;
position: relative;
left: auto;
right: auto;
top: 0;
max-height: none;
overflow: visible;
}
.header ul {
margin: 0;
}
.header li {
display: block;
float: left;
}
.header .dropdown > div,
.header .dropdown ul {
left: 0;
overflow: visible;
-moz-transition: none;
transition: none;
box-shadow: none;
}
.header .dropdown.hover > div,
.header .dropdown.hover ul {
display: block;
left: 0;
}
.big-dropdown li a,
.big-dropdown li p,
.big-dropdown li h5,
.header li a {
padding: 4px 4px 4px;
line-height: 18px;
}
.header form {
position: relative;
width: auto;
padding: 0 0 0 1px;
}
/* md-dropdown */
.header li {
margin: 16px 8px 0;
}
.header .md-dropdown {
z-index: 101;
}
.header nav ul ul li,
.header .md-dropdown li {
margin: 0;
}
/*
.header .dropdown:before,
.header .dropdown ul:before,
.header .md-dropdown ul:before {
content: "";
position: absolute;
display: block;
right: 0;
height: 1px;
width: 31px;
}
*/
.header .md-dropdown.hover ul,
.header .md-dropdown > a {
display: block;
}
.header .md-dropdown > a {
cursor: pointer;
text-indent: -999px;
overflow: hidden;
margin: 0 0 0 1px;
width: 31px;
height: 26px;
background-position: center center;
}
.header .dropdown > div,
.header .dropdown ul,
.header .md-dropdown ul {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 150px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.header .md-dropdown li:first-child {
padding-top: 1px;
}
.header .md-dropdown li {
float: none;
}
.header nav ul ul a,
.header .md-dropdown li a {
padding: 10px 10px 8px;
text-align: left;
min-width: 150px;
}
/*
.header .dropdown:before {
display: none;
width: 100%;
bottom: -5px;
height: 5px;
}
*/
.header nav .dropdown > a:before {
display: none;
}
.header .dropdown > a:after {
margin-right: -2px;
margin-left: 6px;
width: 11px;
}
.big-dropdown {
right: -20px;
top: 48px;
-moz-transition: none;
transition: none;
}
.big-dropdown > div {
max-height: 0;
overflow: hidden;
-moz-transition: max-height 0.4s, padding 0.4s;
transition: max-height 0.4s, padding 0.4s;
}
.big-dropdown.hover > div {
padding-top: 30px;
max-height: 1200px;
}
.big-dropdown img {
display: block;
}
.header .big-dropdown,
.show-nav-mobile .big-dropdown.hover {
right: 0;
left: 0;
}
.big-dropdown:before {
display: none;
}
.big-dropdown.hover,
.header .dropdown.hover:before {
display: block;
}
.big-dropdown ul {
float: left;
clear: none;
min-height: 120px;
padding-right: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.big-dropdown li,
.big-dropdown li a {
float: none;
width: 100%;
}
.big-dropdown h5 {
display: inline;
}
.big-dropdown li:not(:last-child) h5,
.big-dropdown li:not(:last-child) p {
padding-bottom: 0;
}
.big-dropdown ul,
.header .big-dropdown li,
.big-dropdown li a {
display: block;
margin: 0;
}
.big-dropdown {
box-shadow: 0 5px 5px rgba(0,0,0,0.17);
}
.big-dropdown li a {
padding: 15px;
}
.big-dropdown .md-col1 { width: 8.33333333%; }
.big-dropdown .md-col2 { width: 16.66666666%; }
.big-dropdown .md-col3 { width: 25%; }
.big-dropdown .md-col4 { width: 33.33333333%; }
.big-dropdown .md-col5 { width: 41.66666666%; }
.big-dropdown .md-col6 { width: 50%; }
.big-dropdown .md-col7 { width: 58.33333333%; }
.big-dropdown .md-col8 { width: 66.66666666%; }
.big-dropdown .md-col9 { width: 75%; }
.big-dropdown .md-col10 { width: 83.33333333%; }
.big-dropdown .md-col11 { width: 91.66666666%; }
.big-dropdown .md-col12 { width: 100%; }
nav .secondary {
position: absolute;
right: 0;
top: -30px;
z-index: 120;
border-top: none;
}
nav .secondary > li:last-child {
margin-right: 0;
}
nav .secondary li a {
padding: 3px 4px 3px;
line-height: 13px;
}
.header nav .home {
text-indent: -999px;
min-width: 23px;
overflow: hidden;
}
.header nav .home:before {
position: absolute;
top: 6px;
left: 6px;
}
}
@media only screen and (min-width: 900px) {
.header li {
font-size: 14px;
margin: 16px 5px 0;
}
.header .md-dropdown ul {
display: block;
position: relative;
top: auto;
right: auto;
box-shadow: none;
}
.header .md-dropdown > a {
display: none;
}
.header .md-dropdown li {
float: left;
margin: 0 4px;
}
.header .md-dropdown li a {
padding: 4px 4px 4px;
min-width: 0;
}
.header .md-dropdown li:first-child {
padding-top: 0;
}
.header .md-dropdown ul:before {
display: none;
}
nav .secondary > li:last-child {
margin-right: 8px;
}
}
/* PAGE CONTENTS */
@media only screen and (max-width: 639px) {
.sm-col-nopadding-bottom { padding-bottom: 0 !important;}
.sm-col-nopadding-top { padding-top: 0 !important; }
.sm-col-nomargin-bottom { margin-bottom: 0 !important; }
.sm-col-nomargin-top { margin-top: 0 !important; }
.sm-pinable {
-webkit-transition: box-shadow 0.1s 0.1s;
transition: box-shadow 0.1s 0.1s;
}
.sm-pinable.pinned,
.sm-pinable.show-sm-pinable {
position: fixed;
top: 0;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding-left: 10px;
padding-right: 10px;
}
.sm-pinable.show-sm-pinable {
max-height: 100%;
overflow-y: auto;
z-index: 110;
}
.sm-pinable.show-sm-pinable,
.sm-pinable.pinned.show-sm-pinable {
box-shadow: 0 0 0 1200px rgba(0, 0, 0, 0.2);
}
.sm-pinable .padding {
padding-left: 10px;
padding-right: 10px;
}
.top-carroussel .slides img {
margin-left: 0 !important;
margin-top: 0 !important;
}
}
@media only screen and (min-width: 640px) and (max-width: 859px) {
.md-col-nopadding-bottom { padding-bottom: 0 !important; }
.md-col-nopadding-top { padding-top: 0 !important; }
}
@media only screen and (min-width: 860px) {
.lg-col-nopadding-bottom { padding-bottom: 0 !important; }
.lg-col-nopadding-top { padding-top: 0 !important; }
}
@media only screen and (min-width: 340px) {
/* fonts */
h2.big,
.top-carroussel.one-slide h2.big {
font-size: 40px;
line-height: 48px;
letter-spacing: -0.01em;
}
.category-item.billboard h2,
.category-item.billboard h5 {
font-size: 28px;
line-height: 32px;
letter-spacing: 0.01em;
}
}
@media only screen and (min-width: 480px) {
.row.xs-nopadding { margin-left: -5px; margin-right: -5px; }
.row.sm-nopadding,
.row.nopadding { margin-left: -15px; margin-right: -15px; }
.sm-col1 { width: 50%; }
.sm-col2 { width: 100%; }
.sm-col-push1 { margin-left: 50%; }
.xsm-col-only,
.md-col-only,
.lg-col-only {
display: none;
}
.sm-col-only {
display: block;
}
.xsm-col-inlineblock-only,
.md-col-inlineblock-only,
.lg-col-inlineblock-only {
display: none;
}
.sm-col-inlineblock-only {
display: inline-block;
}
blockquote {
max-width: 75%;
}
.top-teaser .img:after {
width: 115%;
opacity: 0.85;
}
.top-teaser article header h1,
.top-teaser article header p,
.top-teaser article header .foldout .foldout-animate-height p {
max-width: 65%;
}
.center-content-div img {
display: none;
}
}
@media only screen and (min-width: 640px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
.row.sm-nopadding { margin-left: -5px; margin-right: -5px; }
.row.md-nopadding,
.row.nopadding { margin-left: -25px; margin-right: -25px; }
.md-col1 { width: 8.33333333%; }
.md-col2 { width: 16.66666666%; }
.md-col3 { width: 25%; }
.md-col4 { width: 33.33333333%; }
.md-col5 { width: 41.66666666%; }
.md-col6 { width: 50%; }
.md-col7 { width: 58.33333333%; }
.md-col8 { width: 66.66666666%; }
.md-col9 { width: 75%; }
.md-col10 { width: 83.33333333%; }
.md-col11 { width: 91.66666666%; }
.md-col12 { width: 100%; }
.md-equal-height {
margin-top: 50px;
margin-bottom: 5px;
height: 100%;
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.md-equal-height > div {
height: 100%;
vertical-align: top;
display: table-cell;
float: none;
}
.sm-col-push-right {
float: left;
}
.md-col-push-right {
float: right;
}
.md-col-push1 { margin-left: 8.33333333%; }
.md-col-push2 { margin-left: 16.66666666%; }
.md-col-push3 { margin-left: 25%; }
.md-col-push4 { margin-left: 33.33333333%; }
.md-col-push5 { margin-left: 41.66666666%; }
.md-col-push6 { margin-left: 50%; }
.md-col-push7 { margin-left: 58.33333333%; }
.md-col-push8 { margin-left: 66.66666666%; }
.md-col-push9 { margin-left: 75%; }
.md-col-push10 { margin-left: 83.33333333%; }
.md-col-push11 { margin-left: 91.66666666%; }
.sm-col-break {
display: none;
}
.md-col-break {
content: "";
clear: both;
display: table;
}
.xsm-col-only,
.sm-col-only,
.lg-col-only {
display: none;
}
.md-col-only {
display: block;
}
.xsm-col-inlineblock-only,
.sm-col-inlineblock-only,
.lg-col-inlineblock-only {
display: none;
}
.md-col-inlineblock-only {
display: inline-block;
}
/* fonts */
.top-carroussel h2:not(.big),
.list-item h2,
.list-item h3,
.list-item h4,
.sm-pinable .support h4,
.sm-pinable .support ul,
.funnel .basket h4:first-child {
font-family: "lust", Georgia, Helvetica, Arial, sans-serif;
font-weight: 400;
}
.top-carroussel h2:not(.big),
.list-item h2,
.list-item h3,
.list-item h4,
.sm-pinable .support h4,
.sm-pinable .support ul,
.funnel .basket h4:first-child {
font-size: 19px;
line-height: 23px;
}
/* colors */
/* Black */
.sm-pinable-toggle h4 {
color: #292920;
}
.top-carroussel .invert p,
.top-carroussel .invert h2 {
color: #fff;
}
.top-carroussel article:after {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(30%,#ffffff), color-stop(50%,rgba(255,255,255,0.8)), color-stop(90%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
background: linear-gradient(to top, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
}
.top-carroussel article.invert:after {
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #000000 30%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(30%,#000000), color-stop(50%,rgba(0,0,0,0.8)), color-stop(90%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, #000000 0%, #000000 30%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, #000000 0%, #000000 30%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, #000000 0%, #000000 30%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
background: linear-gradient(to top, #000000 0%, #000000 30%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
}
/* images */
.top-carroussel .invert a h2:after {
background-image: url("../img/icon-arrow-small-white.svg");
}
/* other styles */
.header {
padding-top: 20px;
}
.sm-pinable {
box-shadow: none;
position: static;
bottom: auto;
top: 0;
}
.sm-pinable > div {
margin-top: 10px;
}
.sm-pinable,
.sm-pinable.show-sm-pinable {
padding: 0;
background-color: transparent;
box-shadow: none;
-webkit-transition: none;
transition: none;
}
.sm-pinable {
position: relative;
left: 0;
}
.sm-pinable-hide {
display: block;
}
.sm-pinable.pinned,
.sm-pinable.pinned.show-sm-pinable {
position: fixed;
box-shadow: none;
}
.sm-pinable.show-sm-pinable {
position: relative;
}
.sm-pinable.show-sm-pinable .sm-pinable-animate-height {
height: auto;
text-align: left;
max-height: none;
}
.sm-pinable-toggle,
.sm-pinable-toggle:hover {
padding-left: 0;
text-align: left;
background-color: transparent;
cursor: text;
}
.sm-pinable .sm-pinable-animate-height {
display: block;
box-shadow: 0 0 0 10px rgba(250,250,248, 1);
}
.sm-pinable-toggle,
.sm-pinable-toggle h4:after {
display: none;
}
/* Slideshow */
.top-carroussel {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
/*z-index: -1;*/
z-index: 0;
}
.top-carroussel.small,
.top-carroussel.small.slideshow,
.top-carroussel.small.one-slide,
.top-carroussel.small.one-slide.slideshow {
position: relative;
margin: 0;
bottom: auto;
left: 0;
right: 0;
min-height: 500px;
max-height: 1000px;
height: 70%;
height: 70vh;
overflow: hidden;
}
.top-carroussel.one-slide article.vertical-middle > a,
.top-carroussel.one-slide article.vertical-middle > div {
margin-bottom: 50px;
}
.top-carroussel.slideshow {
margin: 0;
}
.top-carroussel .slides > li {
pointer-events: none;
}
.top-carroussel ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.top-carroussel .content {
height: 100%;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.top-carroussel .content > li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: block;
background-color: transparent;
}
.top-carroussel .content > li.selected {
display: block;
}
.top-carroussel .img,
.top-carroussel img {
position: absolute;
width: 100%;
max-width: 100%;
height: auto;
max-height: none;
opacity: 0;
-webkit-transform: translate3d(0px,0px,100px);
-webkit-transition: -webkit-transform 1.6s, opacity 1.6s;
transform: perspective(700px) translate3d(0px,0px,100px);
transition: transform 1.6s, opacity 1.6s;
}
.top-carroussel.portrait img {
width: initial;
max-width: none;
height: 100%;
max-height: 100%;
}
.top-carroussel .img {
height: 100%;
}
.top-carroussel article {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
-webkit-transform: translate3d(0px,0px,110px);
-webkit-transition: -webkit-transform 1.8s, opacity 0.7s;
transform: perspective(700px) translate3d(0px,20px,110px);
transition: transform 1.8s, opacity 0.7s;
/*-webkit-transition: opacity 0.6s;*/
opacity: 0;
z-index: 100;
}
.top-carroussel article > div,
.top-carroussel article > a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
.top-carroussel .slide-bullets {
display: inline-block;
padding: 10px;
pointer-events: auto;
}
/*
.top-carroussel article:after {
content: "";
position: absolute;
top: -70%;
left: 0;
width: 100%;
height: 170%;
z-index: -1;
opacity: 0.97;
}
*/
.vertical-middle {
text-align: center;
}
.vertical-middle > div {
max-width: 99%;
text-align: left;
}
.vertical-middle.login {
margin-top: 20px;
height: 90%;
height: 90vh;
}
body.login {
overflow-x: hidden;
padding-bottom: 0;
}
.top-carroussel article.vertical-middle {
height: 100%;
text-align: center;
}
.vertical-middle:before,
.vertical-middle > div,
.top-carroussel article.vertical-middle:before,
.top-carroussel article.vertical-middle > a,
.top-carroussel article.vertical-middle > div {
display: inline-block;
vertical-align: middle;
}
.vertical-middle:before,
.top-carroussel article.vertical-middle:before {
content: "";
height: 97%;
margin-left: -0.005em;
}
.top-carroussel article.vertical-middle:after {
height: 50%;
top: 50%;
}
.top-carroussel article.vertical-middle > a,
.top-carroussel article.vertical-middle > div,
.top-carroussel.one-slide article.vertical-middle > a,
.top-carroussel.one-slide article.vertical-middle > div {
text-align: center;
width: 99%;
margin-bottom: 70px;
}
.top-carroussel article.invert:after {
opacity: 0.8;
}
.top-carroussel .selected.loaded .img,
.top-carroussel .selected.loaded img {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
.top-carroussel .selected.loaded article {
-webkit-transform: translate3d(0px,0px,0px);
transform: perspective(700px) translate3d(0px,0px,0px);
opacity: 1;
}
.top-carroussel .animate-out.loaded .img,
.top-carroussel .animate-out.loaded img {
-webkit-transform: translate3d(0px,0px,0px);
transform: perspective(700px) translate3d(0px,0px,0px);
opacity: 0;
}
.top-carroussel .animate-out.loaded article {
-webkit-transform: translate3d(6px,0px,70px);
-webkit-transition: -webkit-transform 1s, opacity 1s;
transform: perspective(700px) translate3d(-6px,20px,120px);
transition: transform 1s, opacity 1s;
opacity: 0;
}
.top-carroussel a h2:after {
height: 16px;
}
.top-carroussel.one-slide p,
.top-carroussel p {
max-height: 100px;
margin: 1em 0 0;
padding: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s, margin 0.5s, opacity 0.5s;
transition: max-height 0.5s, margin 0.5s, opacity 0.5s;
}
.top-carroussel .slide-bullets-container {
position: relative;
left: 0;
bottom: 37px;
/*padding: 0 10em 0 30px;*/
padding: 0 10px 0 20px;
margin: 0 auto;
text-align: right;
z-index: 1000;
pointer-events: all;
}
.slideshow .slide-bullets li {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 10px;
pointer-events: auto;
}
article.support,
.category-item {
height: 162px;
overflow: hidden;
}
article.support {
margin-bottom: 0;
}
.category-item section {
overflow: hidden;
text-overflow: ellipsis;
max-height: 0;
opacity: 0;
-webkit-transition: max-height 0.4s ease-in-out, opacity 0.4s;
transition: max-height 0.4s ease-in-out, opacity 0.4s;
}
.category-item a {
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
}
.category-item a:after {
z-index: 0;
left: 0;
right: 0;
}
.category-item > div,
.category-item a div {
margin: 0;
}
.category-item .padding {
min-height: 0;
}
.category-item a:hover section {
max-height: 140px;
opacity: 1;
}
.category-item a h5:after,
.category-item a h2:after {
display: none;
}
.category-item .img {
width: 100%;
height: 65%;
left: 0;
z-index: 0;
}
.teasers .category-item .img {
height: 49%;
}
.teasers .category-item.alternate .img {
height: 100%;
}
.category-item.alternate div {
background-color: transparent;
height: 100%;
}
.category-item.alternate section {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
opacity: 1;
overflow: visible;
max-height: none;
-webkit-transition: none;
transition: none;
}
.category-item.alternate.svg .img {
position: absolute;
width: 42.5%;
height: 90%;
top: 5%;
left: 55%;
padding: 0;
}
.category-item.large {
height: 334px;
}
.category-item.large .padding {
min-height: 80px;
}
.category-item.large .img {
height: 78%;
}
.category-item section > ul:not(:first-child),
.category-item section > ol:not(:first-child),
.category-item section > div:not(:first-child),
.category-item section > p:not(:first-child) {
margin-top: 0.4em;
}
.category-item section > ul:not(:last-child),
.category-item section > ol:not(:last-child),
.category-item section > div:not(:last-child),
.category-item section > p:not(:last-child) {
margin-bottom: 0.4em;
}
.category-item a,
.category-item a:after {
width: 100.5%;
height: 100.5%;
}
.category-item.billboard {
height: 440px;
}
.category-item.billboard.large {
height: 678px;
}
.category-item.billboard .padding {
height: auto;
width: 99%;
}
.category-item.billboard .padding,
.category-item.billboard:before,
.category-item.billboard > a:before {
display: inline-block;
vertical-align: middle;
}
.category-item.billboard:before,
.category-item.billboard > a:before {
content: "";
height: 97%;
margin-left: -0.005em;
}
.category-item.billboard > a {
position: absolute;
top: 0;
bottom: 0;
}
.category-item.billboard > a:hover section {
max-height: none;
}
.category-item.billboard section {
position: relative;
padding: 0;
margin-top: 40px;
bottom: auto;
}
.category-item.billboard a h5:after,
.category-item.billboard a h2:after {
display: inline-block;
width: 35px;
height: 22px;
background-size: 15px 20px;
}
.category-item.billboard .link {
margin-top: 1em;
}
.category-item.billboard h5,
.category-item.billboard p {
padding-right: 45%;
}
blockquote {
max-width: 85%;
}
article {
/*padding-right: 2em;*/
}
article.main {
margin-top: 10px;
}
.print-page {
display: block;
clear: right;
margin-top: 2em;
}
aside > div {
margin-top: 10px;
}
.teaser-boxes {
position: absolute;
right: 0;
bottom: -15px;
}
.social_share a {
padding-left: 16px;
min-width: 16px;
height: 16px;
background-position: 0px center;
background-size: 16px 16px;
}
.social_share a > div {
padding: 2px 3px;
height: 16px;
font-size: 9px;
line-height: 13px;
}
.info-faq,
.info-stedet {
min-height: 500px;
}
}
@media only screen and (min-width: 860px) {
.container {
padding-left: 30px;
padding-right: 30px;
}
.row.md-nopadding { margin-left: -5px; margin-right: -5px; }
.row.lg-nopadding,
.row.nopadding { margin-left: -35px; margin-right: -35px; }
.lg-col-padding-left { padding-left: 20px; }
.lg-col-padding-right { padding-right: 20px; }
.lg-col-extra-padding-left { padding-left: 40px; }
.lg-col-extra-padding-right { padding-right: 40px; }
.big-dropdown .lg-col1,
.lg-col1 { width: 8.33333333%; }
.big-dropdown .lg-col2,
.lg-col2 { width: 16.66666666%; }
.big-dropdown .lg-col3,
.lg-col3 { width: 25%; }
.big-dropdown .lg-col4,
.lg-col4 { width: 33.33333333%; }
.big-dropdown .lg-col5,
.lg-col5 { width: 41.66666666%; }
.big-dropdown .lg-col6,
.lg-col6 { width: 50%; }
.big-dropdown .lg-col7,
.lg-col7 { width: 58.33333333%; }
.big-dropdown .lg-col8,
.lg-col8 { width: 66.66666666%; }
.big-dropdown .lg-col9,
.lg-col9 { width: 75%; }
.big-dropdown .lg-col10,
.lg-col10 { width: 83.33333333%; }
.big-dropdown .lg-col11,
.lg-col11 { width: 91.66666666%; }
.big-dropdown .lg-col12,
.lg-col12 { width: 100%; }
.lg-equal-height {
margin-top: 5px;
margin-bottom: 5px;
height: 100%;
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.lg-equal-height > div {
height: 100%;
vertical-align: top;
display: table-cell;
float: none;
}
.sm-col-push-right,
.md-col-push-right {
float: left;
}
.lg-col-push-right {
float: right;
}
.md-col-push1,
.md-col-push2,
.md-col-push3,
.md-col-push4,
.md-col-push5,
.md-col-push6,
.md-col-push7,
.md-col-push8,
.md-col-push9,
.md-col-push10,
.md-col-push11,
.md-col-push12 { margin-left: 0; }
.lg-col-push1 { margin-left: 8.33333333%; }
.lg-col-push2 { margin-left: 16.66666666%; }
.lg-col-push3 { margin-left: 25%; }
.lg-col-push4 { margin-left: 33.33333333%; }
.lg-col-push5 { margin-left: 41.66666666%; }
.lg-col-push6 { margin-left: 50%; }
.lg-col-push7 { margin-left: 58.33333333%; }
.lg-col-push8 { margin-left: 66.66666666%; }
.lg-col-push9 { margin-left: 75%; }
.lg-col-push10 { margin-left: 83.33333333%; }
.lg-col-push11 { margin-left: 91.66666666%; }
.md-col-break {
display: none;
}
.lg-col-break {
content: "";
clear: both;
display: table;
}
.xsm-col-only,
.sm-col-only,
.md-col-only {
display: none;
}
.lg-col-only {
display: block;
}
.xsm-col-inlineblock-only,
.sm-col-inlineblock-only,
.md-col-inlineblock-only {
display: none;
}
.lg-col-inlineblock-only {
display: inline-block;
}
/* fonts
.lg-col8 .lg-col6 h5,
.font-body-headline {
font-size: 19px;
line-height: 23px;
}*/
h2.big,
.top-carroussel.one-slide h2.big {
font-size: 60px;
line-height: 68px;
}
.category-item.billboard h2,
.category-item.billboard h5 {
font-size: 40px;
line-height: 48px;
letter-spacing: -0.01em;
}
/* other */
article {
padding-right: 0;
}
.main h1 + p {
width: 80%;
}
.center-content-div img {
display: inline-block;
}
.category-item.billboard h5,
.category-item.billboard p {
padding-right: 55%;
}
blockquote {
max-width: 70%;
}
/*body > .container > .row {
overflow: hidden;
}*/
img.print-only {
display: none !important;
}
}
@media only screen and (min-width: 1000px) {
h2.big,
.top-carroussel.one-slide h2.big {
font-size: 70px;
line-height: 78px;
}
/*.category-item.billboard h2,
.category-item.billboard h5 {
font-size: 60px;
line-height: 68px;
}*/
}
@media only screen and (min-width: 1200px) {
.xl-col-extrabig-padding-left { padding-left: 80px; }
.xl-col-extrabig-padding-right { padding-right: 80px; }
.big-dropdown .xl-col1,
.xl-col1 { width: 8.33333333%; }
.big-dropdown .xl-col2,
.xl-col2 { width: 16.66666666%; }
.big-dropdown .xl-col3,
.xl-col3 { width: 25%; }
.big-dropdown .xl-col4,
.xl-col4 { width: 33.33333333%; }
.big-dropdown .xl-col5,
.xl-col5 { width: 41.66666666%; }
.big-dropdown .xl-col6,
.xl-col6 { width: 50%; }
.big-dropdown .xl-col7,
.xl-col7 { width: 58.33333333%; }
.big-dropdown .xl-col8,
.xl-col8 { width: 66.66666666%; }
.big-dropdown .xl-col9,
.xl-col9 { width: 75%; }
.big-dropdown .xl-col10,
.xl-col10 { width: 83.33333333%; }
.big-dropdown .xl-col11,
.xl-col11 { width: 91.66666666%; }
.big-dropdown .xl-col12,
.xl-col12 { width: 100%; }
.xl-equal-height {
margin-top: 5px;
margin-bottom: 5px;
height: 100%;
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.xl-equal-height > div {
height: 100%;
vertical-align: top;
display: table-cell;
float: none;
}
}
@media only screen and (min-height: 640px) {
}
@media only screen and (min-width: 640px) and (min-height: 748px) {
}
@media only screen and (min-width: 1020px) {
}
@media only screen and (min-width: 1160px) {
.container:not(.fullwidth) {
max-width: 1160px;
}
}
@media only screen and (min-width: 1260px) and (min-height: 600px), only screen and (min-width: 640px) and (min-height: 800px) {
}
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
/* ===============
COLOURS
=============== */
/* Lighter grey */
.courses .evlille.evstor.revision.bogholderi.obligatorisk .category:before,
.courses .evlille.evstor.revision.bogholderi.obligatorisk > .foldout-toggle:after,
.courses .evlille.evstor.revision.bogholderi.obligatorisk .print-only {
border-color: #dcdcdc;
}
/* Purple */
.dropdown .category .obligatorisk a:after,
.courses .obligatorisk > .foldout-toggle:after,
.courses .obligatorisk .category:before,
.legend.category .obligatorisk:before,
.courses .obligatorisk .print-only,
.courses > .obligatorisk {
border-color: #9461a5;
}
.courses > .evlille.evstor.revision.bogholderi.obligatorisk,
.courses .obligatorisk > .foldout-toggle:after {
border-bottom-color: #9461a5;
}
/* Blue */
.dropdown .category .evlille a:after,
.courses .evlille > .foldout-toggle:after,
.courses .evlille .category:before,
.legend.category .evlille:before,
.courses .evlille .print-only,
.courses > .evlille {
border-color: #002776;
}
/* Light blue */
.dropdown .category .evstor a:after,
.courses .evstor > .foldout-toggle:after,
.courses .evstor .category:before,
.legend.category .evstor:before,
.courses .evstor .print-only,
.courses > .evstor {
border-color: #90c7e7;
}
/* Light Green */
.dropdown .category .revision a:after,
.courses .revision > .foldout-toggle:after,
.courses .revision .category:before,
.legend.category .revision:before,
.courses .revision .print-only,
.courses > .revision {
border-color: #c9dd53;
}
/* Dark Green */
.dropdown .category .bogholderi a:after,
.courses .bogholderi > .foldout-toggle:after,
.courses .bogholderi .category:before,
.legend.category .bogholderi:before,
.courses .bogholderi .print-only,
.courses > .bogholderi {
border-color: #3c8a2e;
}
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
font-size:0.8em;
font-weight:normal;
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
/*
.md-col1 { width: 8.33333333%; }
.md-col2 { width: 16.66666666%; }
.md-col3 { width: 25%; }
.md-col4 { width: 33.33333333%; }
.md-col5 { width: 41.66666666%; }
.md-col6 { width: 50%; }
.md-col7 { width: 58.33333333%; }
.md-col8 { width: 66.66666666%; }
.md-col9 { width: 75%; }
.md-col10 { width: 83.33333333%; }
.md-col11 { width: 91.66666666%; }
.md-col12 { width: 100%; }
.md-col-push-right {
float: right;
}
.md-col-push1 { margin-left: 8.33333333%; }
.md-col-push2 { margin-left: 16.66666666%; }
.md-col-push3 { margin-left: 25%; }
.md-col-push4 { margin-left: 33.33333333%; }
.md-col-push5 { margin-left: 41.66666666%; }
.md-col-push6 { margin-left: 50%; }
.md-col-push7 { margin-left: 58.33333333%; }
.md-col-push8 { margin-left: 66.66666666%; }
.md-col-push9 { margin-left: 75%; }
.md-col-push10 { margin-left: 83.33333333%; }
.md-col-push11 { margin-left: 91.66666666%; }
*/
aside,
header h1 + p,
.header header > a,
.header header a:after,
.header header nav,
.header header button,
.header .menutoggle,
.courses .foldout.show-foldout .print-only,
.courses .foldout > .foldout-toggle:after,
.courses .add strong,
.dropdown {
display: none;
}
body > .header {
width: 157px;
margin-top: 0;
}
.print-header,
.print-only {
display: block;
}
.print-header {
position: absolute;
display: block;
left: 0;
right: 0;
height: 2em;
z-index: 1000;
margin-right: -0.6em;
margin-top: 3em;
}
/* .print-header.bottom {
position: fixed;
bottom: 0.5em;
margin-top: 0;
margin-right: 0.1em;
}*/
.print-header > div {
position: absolute;
top: 1em;
height: 1em;
width: 2.45em;
}
.print-header > div > div {
font-size: 0.6em;
}
.print-header .title {
top: 0em;
right: 55px;
width: 6em;
}
.print-header .day1.title {
right: 20px;
}
.main {
margin: 0;
}
.legend,
.legend div,
.legend ul,
.legend li {
display: inline;
width: auto;
margin: 0;
padding: 0;
float: none;
}
section.legend {
border-top: 1px solid #eee;
margin-bottom: 4em;
margin-top: 1em;
padding: 0.5em 0 5em 0;
}
.legend .legend li {
display: inline-block;
margin: 0.1em 0 0.1em 2em;
}
.legend > div > div:first-child {
margin-left: 0;
}
.legend li:before {
border: none;
border-right: 12px;
border-style: solid;
width: 0;
}
.evlogo {
position: absolute;
right: 0;
margin-top: 20px;
}
.courses {
page-break-before: left;
margin-top: 5em;
}
.courses .foldout {
font-size: 7px;
border-top: 1px solid #eee;
border-top-color: #eee !important;
}
.courses h3.foldout-toggle {
font-size: 8px;
line-height: 10px;
width: 50%;
padding-bottom: 0;
padding-top: 0;
}
.courses .foldout.show-foldout h3 {
font-size: 20px;
line-height: 24px;
}
.courses .print-only {
-webkit-print-color-adjust: exact;
position: absolute;
display: block;
height: 12px;
top: 50%;
margin-top: -6px;
color: #fff;
border-right-style: solid;
border-right-width: 33px;
}
.courses .print-only div {
font-size: 8px;
line-height: 13px;
text-align: center;
width: 33px;
left: 33px;
color: #fff !important;
}
.select-course {
text-decoration: none !important;
}
.print-only.day1 { margin-right: 310px; }
.print-only.day2 { margin-right: 155px; }
.print-only.day3 { margin-right: 0em; }
.print-only.h08_00 { right: 105px; }
.print-only.h10_30 { right: 70px; }
.print-only.h13_30 { right: 35px; }
.print-only.h16_00 { right: 0em; }
.print-only.extra { opacity: 0.5; }
}