` for the content.
Currently this is just used as a DjangoCMS plugin. If you want to use it in a template, add the above JavaScript
snippet to the `extra_js` sekizai block.
The tabs currently support two styles: Bright and Dark.
If you want to add a new style, add it in the settings to `ACCORDION_PLUGIN_STYLES` and add CSS rules for it like it's
done with `.accordion--bright` and `.accordion--dark`.
*/
.accordion {
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
margin: 20px 0;
padding: 0 60px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
}
.accordion:hover {
-webkit-box-shadow: 0 0 30px 8px #a2babe;
-moz-box-shadow: 0 0 30px 8px #a2babe;
box-shadow: 0 0 30px 8px #a2babe;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.accordion--bright {
background-color: rgba(255, 255, 255, 0.8);
}
.accordion--bright:hover {
background-color: #ffffff;
}
.accordion--dark {
background-color: #dedad4;
}
.accordion--dark:hover {
background-color: #e1ddd8;
}
.accordion-title {
background-color: transparent;
color: #000000;
cursor: pointer;
padding: 20px 0;
width: 100%;
font-size: 1.27em;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordion-content {
height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-ms-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
}
/* The 'show class is added to the accordion panel when the user clicks on one of the buttons. */
.accordion-content.show {
opacity: 1;
height: auto;
padding-bottom: 30px;
}
.accordion-title .accordion-toggleIcon:after {
font-size: 13px;
content: '\e080';
}
.accordion-title.active .accordion-toggleIcon:after {
content: '\e114';
}
@media (max-width: 768px) {
.accordion-plugin .accordion {
padding: 0 30px;
}
}
.addressTile-title {
margin-top: 0;
margin-bottom: 20px;
}
.addressTile-map {
min-height: 230px;
margin-left: -25px;
margin-right: -25px;
margin-bottom: 20px;
}
.addressTile-link {
color: #a2a19f;
font-family: 'Humanist Condensed Bold';
text-decoration: none;
display: inline-block;
margin-top: 15px;
}
.addressTile-link:hover {
color: #7a1a38;
}
.addressTile-link:after {
content: '\e920';
font-family: 'ofa-icons' !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
font-weight: 900 !important;
font-size: 0.75em;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
margin-top: -2px;
margin-left: 7px;
}
.fullWidthSlider[data-color='black'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='black'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='black'] .slick-next:before,
.fullWidthSlider[data-color='black'] .slick-prev:before {
color: #000;
}
.fullWidthSlider[data-color='black'] > .dots > .slick-dots li button {
background-color: #000;
}
.fullWidthSlider[data-color='white'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='white'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='white'] .slick-next:before,
.fullWidthSlider[data-color='white'] .slick-prev:before {
color: #fff;
}
.fullWidthSlider[data-color='white'] > .dots > .slick-dots li button {
background-color: #fff;
}
.fullWidthSlider[data-color='brand-neutral'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='brand-neutral'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='brand-neutral'] .slick-next:before,
.fullWidthSlider[data-color='brand-neutral'] .slick-prev:before {
color: #a2a19f;
}
.fullWidthSlider[data-color='brand-neutral'] > .dots > .slick-dots li button {
background-color: #a2a19f;
}
.fullWidthSlider[data-color='memory'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='memory'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='memory'] .slick-next:before,
.fullWidthSlider[data-color='memory'] .slick-prev:before {
color: #a69965;
}
.fullWidthSlider[data-color='memory'] > .dots > .slick-dots li button {
background-color: #a69965;
}
.fullWidthSlider[data-color='memory-aloe-vera'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='memory-aloevera'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='memory-aloe-vera'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='memory-aloevera'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='memory-aloe-vera'] .slick-next:before,
.fullWidthSlider[data-color='memory-aloevera'] .slick-next:before,
.fullWidthSlider[data-color='memory-aloe-vera'] .slick-prev:before,
.fullWidthSlider[data-color='memory-aloevera'] .slick-prev:before {
color: #8a9644;
}
.fullWidthSlider[data-color='memory-aloe-vera'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='memory-aloevera'] > .dots > .slick-dots li button {
background-color: #8a9644;
}
.fullWidthSlider[data-color='lastofa'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='lastofa-forte'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='lastofa-baumwolle'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='lastofa-extra'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='lastofa'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='lastofa-forte'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='lastofa-baumwolle'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='lastofa-extra'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='lastofa'] .slick-next:before,
.fullWidthSlider[data-color='lastofa-forte'] .slick-next:before,
.fullWidthSlider[data-color='lastofa-baumwolle'] .slick-next:before,
.fullWidthSlider[data-color='lastofa-extra'] .slick-next:before,
.fullWidthSlider[data-color='lastofa'] .slick-prev:before,
.fullWidthSlider[data-color='lastofa-forte'] .slick-prev:before,
.fullWidthSlider[data-color='lastofa-baumwolle'] .slick-prev:before,
.fullWidthSlider[data-color='lastofa-extra'] .slick-prev:before {
color: #7a1a38;
}
.fullWidthSlider[data-color='lastofa'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='lastofa-forte'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='lastofa-baumwolle'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='lastofa-extra'] > .dots > .slick-dots li button {
background-color: #7a1a38;
}
.fullWidthSlider[data-color='gilofa'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='gilofa'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='gilofa-style'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='gilofa-travel'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='gilofa-2000'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='gilofa-fine'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='gilofa'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='gilofa'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='gilofa-style'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='gilofa-travel'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='gilofa-2000'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='gilofa-fine'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='gilofa'] .slick-next:before,
.fullWidthSlider[data-color*='gilofa'] .slick-next:before,
.fullWidthSlider[data-color='gilofa-style'] .slick-next:before,
.fullWidthSlider[data-color='gilofa-travel'] .slick-next:before,
.fullWidthSlider[data-color='gilofa-2000'] .slick-next:before,
.fullWidthSlider[data-color='gilofa-fine'] .slick-next:before,
.fullWidthSlider[data-color='gilofa'] .slick-prev:before,
.fullWidthSlider[data-color*='gilofa'] .slick-prev:before,
.fullWidthSlider[data-color='gilofa-style'] .slick-prev:before,
.fullWidthSlider[data-color='gilofa-travel'] .slick-prev:before,
.fullWidthSlider[data-color='gilofa-2000'] .slick-prev:before,
.fullWidthSlider[data-color='gilofa-fine'] .slick-prev:before {
color: #001d3b;
}
.fullWidthSlider[data-color='gilofa'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color*='gilofa'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='gilofa-style'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='gilofa-travel'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='gilofa-2000'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='gilofa-fine'] > .dots > .slick-dots li button {
background-color: #001d3b;
}
.fullWidthSlider[data-color*='o-motion'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='omotion'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='o-motion'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='omotion'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='o-motion'] .slick-next:before,
.fullWidthSlider[data-color*='omotion'] .slick-next:before,
.fullWidthSlider[data-color*='o-motion'] .slick-prev:before,
.fullWidthSlider[data-color*='omotion'] .slick-prev:before {
color: #b20b0f;
}
.fullWidthSlider[data-color*='o-motion'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color*='omotion'] > .dots > .slick-dots li button {
background-color: #b20b0f;
}
.fullWidthSlider[data-color='rathgeber'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='rathgeber'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='rathgeber'] .slick-next:before,
.fullWidthSlider[data-color='rathgeber'] .slick-prev:before {
color: #898278;
}
.fullWidthSlider[data-color='rathgeber'] > .dots > .slick-dots li button {
background-color: #898278;
}
.fullWidthSlider[data-color='pflege'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='pflege'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='pflege'] .slick-next:before,
.fullWidthSlider[data-color='pflege'] .slick-prev:before {
color: #898278;
}
.fullWidthSlider[data-color='pflege'] > .dots > .slick-dots li button {
background-color: #898278;
}
.fullWidthSlider[data-color='zubehor'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='zubehor'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='zubehor'] .slick-next:before,
.fullWidthSlider[data-color='zubehor'] .slick-prev:before {
color: #898278;
}
.fullWidthSlider[data-color='zubehor'] > .dots > .slick-dots li button {
background-color: #898278;
}
.slick-autoplay-toggle-button {
display: none !important;
}
.fullWidthSlider[data-color='ofa-fugleiter'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='ofa-fit-expert'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='ofa-grip'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='ofa-fit-flexi'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='callusan'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='ofa-clean'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='ofa-fugleiter'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='ofa-fit-expert'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='ofa-grip'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='ofa-fit-flexi'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='callusan'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='ofa-clean'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='ofa-fugleiter'] .slick-next:before,
.fullWidthSlider[data-color='ofa-fit-expert'] .slick-next:before,
.fullWidthSlider[data-color='ofa-grip'] .slick-next:before,
.fullWidthSlider[data-color='ofa-fit-flexi'] .slick-next:before,
.fullWidthSlider[data-color='callusan'] .slick-next:before,
.fullWidthSlider[data-color='ofa-clean'] .slick-next:before,
.fullWidthSlider[data-color='ofa-fugleiter'] .slick-prev:before,
.fullWidthSlider[data-color='ofa-fit-expert'] .slick-prev:before,
.fullWidthSlider[data-color='ofa-grip'] .slick-prev:before,
.fullWidthSlider[data-color='ofa-fit-flexi'] .slick-prev:before,
.fullWidthSlider[data-color='callusan'] .slick-prev:before,
.fullWidthSlider[data-color='ofa-clean'] .slick-prev:before {
color: #898278;
}
.fullWidthSlider[data-color='ofa-fugleiter'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='ofa-fit-expert'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='ofa-grip'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='ofa-fit-flexi'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='callusan'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='ofa-clean'] > .dots > .slick-dots li button {
background-color: #898278;
}
.fullWidthSlider[data-color='standard'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='standard'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='standard'] .slick-next:before,
.fullWidthSlider[data-color='standard'] .slick-prev:before {
color: #8c8c8c;
}
.fullWidthSlider[data-color='standard'] > .dots > .slick-dots li button {
background-color: #8c8c8c;
}
.fullWidthSlider[data-color*='psb'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='psb'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='psb'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='psb'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='psb'] .slick-next:before,
.fullWidthSlider[data-color='psb'] .slick-next:before,
.fullWidthSlider[data-color*='psb'] .slick-prev:before,
.fullWidthSlider[data-color='psb'] .slick-prev:before {
color: #d37125;
}
.fullWidthSlider[data-color*='psb'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='psb'] > .dots > .slick-dots li button {
background-color: #d37125;
}
.fullWidthSlider[data-color*='push'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='push'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='push'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='push'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='push'] .slick-next:before,
.fullWidthSlider[data-color='push'] .slick-next:before,
.fullWidthSlider[data-color*='push'] .slick-prev:before,
.fullWidthSlider[data-color='push'] .slick-prev:before {
color: #6d3e5a;
}
.fullWidthSlider[data-color*='push'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='push'] > .dots > .slick-dots li button {
background-color: #6d3e5a;
}
.fullWidthSlider[data-color*='dynamics'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='dynamics'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='dynamics'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='dynamics'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='dynamics'] .slick-next:before,
.fullWidthSlider[data-color='dynamics'] .slick-next:before,
.fullWidthSlider[data-color*='dynamics'] .slick-prev:before,
.fullWidthSlider[data-color='dynamics'] .slick-prev:before {
color: #009bdd;
}
.fullWidthSlider[data-color*='dynamics'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='dynamics'] > .dots > .slick-dots li button {
background-color: #009bdd;
}
.fullWidthSlider[data-color*='dynamics-plus'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='dynamics-plus'] .fullWidthSlider-headline,
.fullWidthSlider[data-color*='dynamics-plus'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='dynamics-plus'] .fullWidthSlider-subline,
.fullWidthSlider[data-color*='dynamics-plus'] .slick-next:before,
.fullWidthSlider[data-color='dynamics-plus'] .slick-next:before,
.fullWidthSlider[data-color*='dynamics-plus'] .slick-prev:before,
.fullWidthSlider[data-color='dynamics-plus'] .slick-prev:before {
color: #009bdd;
}
.fullWidthSlider[data-color*='dynamics-plus'] > .dots > .slick-dots li button,
.fullWidthSlider[data-color='dynamics-plus'] > .dots > .slick-dots li button {
background-color: #009bdd;
}
.fullWidthSlider[data-color='portal-blue'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='portal-blue'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='portal-blue'] .slick-next:before,
.fullWidthSlider[data-color='portal-blue'] .slick-prev:before {
color: #547a8b;
}
.fullWidthSlider[data-color='portal-blue'] > .dots > .slick-dots li button {
background-color: #547a8b;
}
.fullWidthSlider[data-color='push-sports'] .fullWidthSlider-headline,
.fullWidthSlider[data-color='push-sports'] .fullWidthSlider-subline,
.fullWidthSlider[data-color='push-sports'] .slick-next:before,
.fullWidthSlider[data-color='push-sports'] .slick-prev:before {
color: #00496f;
}
.fullWidthSlider[data-color='push-sports'] > .dots > .slick-dots li button {
background-color: #00496f;
}
.fullWidthSlider-headline {
font-size: 40px;
}
.fullWidthSlider-subline {
font-size: 20px;
}
.fullWidthSlider {
position: relative;
height: 600px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 150px;
}
.fullWidthSlider .slick-next:before,
.fullWidthSlider .slick-prev:before {
content: '\e921';
font-size: 35px;
}
.fullWidthSlider .slick-next {
right: 40px;
}
.fullWidthSlider .slick-prev {
left: 40px;
z-index: 300;
}
.fullWidthSlider .slick-next,
.fullWidthSlider .slick-prev {
height: 40px;
width: 40px;
}
.fullWidthSlider .slick-track,
.fullWidthSlider .slick-list {
height: 100%;
}
.fullWidthSlider > .dots {
position: absolute;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.fullWidthSlider > .dots .slick-dots {
position: relative;
padding-top: 55px;
bottom: auto;
width: 768px;
margin-left: auto;
margin-right: auto;
z-index: 2000;
text-align: left;
}
.fullWidthSlider > .dots .slick-dots li {
margin: 0;
}
.fullWidthSlider > .dots .slick-dots li button {
height: 6px;
width: 6px;
padding: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0.5;
background-color: #fff;
}
.fullWidthSlider > .dots .slick-dots li button:before {
content: '';
}
.fullWidthSlider > .dots .slick-dots li.slick-active button {
opacity: 1;
}
.fullWidthSlider-background {
position: absolute;
height: 100%;
width: 100%;
z-index: 100;
}
.fullWidthSlider-slide {
height: 100%;
background-size: cover;
display: block;
background-position: 50% 50%;
}
.fullWidthSlider-slideContent {
padding-top: 90px;
width: 768px;
margin-left: auto;
margin-right: auto;
}
.fullWidthSliderContent-container {
z-index: 200;
position: absolute;
top: 375px;
width: 1000px;
right: 50%;
}
.fullWidthSliderContent {
padding: 20px;
left: 50%;
position: relative;
background-color: #ffffff;
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.fullWidthSliderContent img {
display: inline-block;
max-width: 100px;
margin-bottom: 10px;
max-height: 100px;
}
.fullWidthSliderContent-slide {
padding: 10px 20px;
text-align: center;
}
.fullWidthSliderContent-slide:focus {
outline: 0;
}
.fullWidthSlider-contentHeadline {
min-height: 66px;
color: #000000;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.fullWidthSlider-contentText {
font-size: 1.27em;
}
.fullwidthSlider-link {
color: #547a8b;
font-size: 1.27em;
}
.fullwidthSlider-link:hover {
color: #346274;
}
.fullwidthSlider-link:after {
font-family: 'ofa-icons' !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
margin-top: -2px;
content: '\e920';
font-size: 11px;
margin-left: 5px;
}
@media (max-width: 1024px) {
.fullWidthSliderContent-container {
position: absolute;
width: 80%;
left: 10%;
bottom: -30%;
}
.fullWidthSliderContent-container .slick-dots {
position: relative;
bottom: auto;
margin-bottom: 0;
}
.fullWidthSliderContent-container .slick-dots li {
margin: 0;
}
.fullWidthSliderContent-container .slick-dots li button {
height: 3px;
width: 3px;
padding: 4px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0.5;
background-color: #a2a19f;
}
.fullWidthSliderContent-container .slick-dots li button:before {
content: '';
}
.fullWidthSliderContent-container .slick-dots li.slick-active button {
opacity: 1;
}
.fullWidthSliderContent {
left: auto;
}
}
@media (max-height: 800px) {
.fullWidthSlider {
height: 300px;
}
.fullWidthSliderContent-container {
top: 75px;
}
}
@media (max-height: 800px) and (max-width: 441px) {
.fullWidthSlider {
margin-bottom: 180px;
}
}
@media (max-height: 800px) and (max-width: 372px) {
.fullWidthSlider {
margin-bottom: 200px;
}
}
@media (max-height: 800px) and (max-width: 346px) {
.fullWidthSlider {
margin-bottom: 230px;
}
}
@media (max-height: 800px) and (min-width: 992px) {
.fullWidthSlider {
margin-bottom: 250px;
}
.fullWidthSliderContent-container {
top: 185px;
}
}
@media (max-height: 800px) and (min-width: 992px) and (max-width: 441px) {
.fullWidthSlider {
margin-bottom: 180px;
}
}
@media (max-height: 800px) and (min-width: 992px) and (max-width: 372px) {
.fullWidthSlider {
margin-bottom: 200px;
}
}
@media (max-height: 800px) and (min-width: 992px) and (max-width: 346px) {
.fullWidthSlider {
margin-bottom: 230px;
}
}
@media (max-height: 1024px) and (max-width: 768px) {
.fullWidthSlider {
height: 300px;
}
.fullWidthSliderContent-container {
top: 75px;
}
}
[class^='col-'] > .productGallery {
height: auto;
}
.productGallery:hover .slick-arrow {
opacity: 1;
}
.productGallery-thumbnail,
.productGalleryNav-thumbnail {
text-align: center;
}
.productGalleryNav-thumbnail {
min-height: 100px;
padding: 0 5px;
}
.productGalleryNav-thumbnail:focus,
.productGallery-thumbnail:focus {
outline: 0;
}
.productGallery-thumbnail > img,
.productGalleryNav-thumbnail > img {
display: inline-block;
}
.productGalleryNav-thumbnail > img {
max-width: 100%;
}
.productGallery--memory .slick-arrow {
background-color: #a69965;
}
.productGallery--memory-aloevera .slick-arrow {
background-color: #8a9644;
}
.productGallery--lastofa .slick-arrow {
background-color: #7a1a38;
}
.productGallery--gilofa .slick-arrow {
background-color: #001d3b;
}
.productGallery--o-motion .slick-arrow {
background-color: #b20b0f;
}
.productGallery--rathgeber .slick-arrow {
background-color: #898278;
}
.productGallery--pflege .slick-arrow {
background-color: #898278;
}
.productGallery--zubehor .slick-arrow {
background-color: #898278;
}
.productGallery--ofafit .slick-arrow {
background-color: #898278;
}
.productGallery--standard .slick-arrow {
background-color: #8c8c8c;
}
.productGallery--psb .slick-arrow {
background-color: #d37125;
}
.productGallery--push .slick-arrow {
background-color: #6d3e5a;
}
.productGallery--dynamics .slick-arrow {
background-color: #009bdd;
}
.productGallery--dynamics-plus .slick-arrow {
background-color: #009bdd;
}
.productGallery--push-sports .slick-arrow {
background-color: #00496f;
}
.productGallery--portal-blue .slick-arrow {
background-color: #547a8b;
}
.productGallery .slick-arrow {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-ms-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
content: ' ';
width: 45px;
height: 45px;
color: #ffffff;
z-index: 9998;
}
.productGalleryNav .slick-arrow:before {
color: #a2a19f;
font-size: 30px;
}
.productGalleryNav {
padding: 0 20px;
}
.slick-prev:before {
font-family: 'ofa-icons';
content: '\e920';
}
.slick-next:before {
content: '\e920';
font-family: 'ofa-icons';
}
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
-webkit-transform: scaleX(-1) translate(0, -50%);
-ms-transform: scaleX(-1) translate(0, -50%);
transform: scaleX(-1) translate(0, -50%);
}
.slick-lightbox-slick-item:focus {
outline: 0;
}
.productGalleryNav {
margin-top: 20px;
}
.imageRow {
margin: 0 20px;
padding: 0;
display: -webkit-flex;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
display: flex;
flex-wrap: wrap;
flex-direction: row;
list-style: none;
}
.imageRow-item:before {
content: none !important;
}
.imageRow-item {
min-width: 120px;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
padding: 15px 10px;
text-align: center;
}
.imageRow-imageCaption {
text-align: left;
margin: 0 auto;
}
.imageRow-imageCaption--centered {
text-align: center;
}
.imageSlider-container {
margin-left: -25px;
margin-right: -25px;
position: relative;
}
.imageSlider-title {
margin-top: 0;
min-height: 53px;
}
.imageSlider-thumbnail {
text-align: center;
min-height: 150px;
}
.imageSlider-thumbnail:focus {
outline: 0;
}
.imageSlider-thumbnail > img {
display: inline-block;
}
.imageSlider-thumbnail-title {
margin-top: 0;
min-height: 53px;
text-align: left;
padding-left: 25px;
padding-right: 60px;
}
.imageSlider-thumbnail-caption {
text-align: left;
margin-top: 10px;
padding: 0 25px;
}
.imageSlider-container .slick-arrow {
background-color: #a2a19f;
top: 10px;
z-index: 9998;
}
.imageSlider-container .slick-arrow:before {
font-size: 10px;
font-weight: 900;
opacity: 1;
}
.imageSlider-container .slick-next {
right: 10px;
}
.imageSlider-container .slick-prev {
right: 35px;
left: auto;
}
.news-readMore {
font-weight: bold;
text-decoration: none;
}
.news-readMore:after {
content: '\e920';
font-family: 'ofa-icons' !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
font-weight: 900 !important;
font-size: 0.8em;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
margin-top: -2px;
margin-left: 7px;
}
.news-plugin--landscape .news-plugin--image {
background-size: cover;
background-position: center;
margin-left: -25px;
margin-bottom: -25px;
margin-top: -25px;
margin-right: 5px;
}
.news-plugin--landscape.news-plugin-hasimage .news-content {
margin-left: 15px;
}
@media (max-width: 768px) {
.news-plugin--landscape .news-plugin--image {
height: 300px;
width: calc(100% + 2 * 25px);
margin-left: -25px;
margin-right: -25px;
margin-top: -25px;
margin-bottom: 10px;
}
}
@media (max-width: 479px) {
.news-plugin--landscape .news-plugin--image {
height: 200px;
}
}
.productTile {
text-align: center;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -25px;
display: table;
}
.productTile-headCell,
.productTile-bodyCell {
display: table-cell;
padding: 0;
}
.productTile-bodyCell {
vertical-align: bottom;
}
.productTile-bodyCell img {
margin-left: auto;
margin-right: auto;
}
.productTile-head {
text-align: left;
min-height: 120px;
display: table-row;
width: 100%;
}
.productTile-body {
display: table-row;
vertical-align: bottom;
text-align: center;
width: 100%;
}
.productTile-logo {
margin-bottom: 8px;
}
.productTile-image {
display: inline-block;
max-height: 220px;
}
.productTile-link {
display: block;
text-align: left;
font-family: 'Humanist Condensed Bold';
text-decoration: none;
font-size: 0.9em;
margin: 25px 0;
}
.productTile-link:after {
content: '\e920';
font-family: 'ofa-icons' !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
font-weight: 900 !important;
font-size: 0.8em;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
margin-top: -2px;
margin-left: 7px;
}
.ofa-tile--memory .productTile-link {
color: #a69965;
}
.ofa-tile--memory-aloe-vera .productTile-link {
color: #8a9644;
}
.ofa-tile--lastofa .productTile-link,
.ofa-tile--lastofa-forte .productTile-link,
.ofa-tile--lastofa-baumwolle .productTile-link,
.ofa-tile--lastofa-extra .productTile-link {
color: #7a1a38;
}
.ofa-tile--gilofa .productTile-link,
[class*='ofa-tile--gilofa'] .productTile-link,
.ofa-tile--gilofa-style .productTile-link,
.ofa-tile--gilofa-travel .productTile-link,
.ofa-tile--gilofa-2000 .productTile-link,
.ofa-tile--gilofa-fine .productTile-link {
color: #001d3b;
}
.ofa-tile--o-motion .productTile-link,
[class*='ofa-tile--omotion'] .productTile-link,
[class*='ofa-tile--o-motion'] .productTile-link {
color: #b20b0f;
}
.ofa-tile--rathgeber .productTile-link {
color: #898278;
}
.ofa-tile--pflege .productTile-link {
color: #898278;
}
.ofa-tile--zubehor .productTile-link {
color: #898278;
}
.ofa-tile--ofa-fugleiter .productTile-link,
.ofa-tile--ofa-fit-expert .productTile-link,
.ofa-tile--ofa-grip .productTile-link,
.ofa-tile--ofa-fit-flexi .productTile-link,
.ofa-tile--callusan .productTile-link,
.ofa-tile--ofa-clean .productTile-link {
color: #898278;
}
.ofa-tile--standard .productTile-link {
color: #8c8c8c;
}
.ofa-tile--psb .productTile-link,
[class*='ofa-tile--psb'] .productTile-link {
color: #d37125;
}
.ofa-tile--push .productTile-link,
[class*='ofa-tile--push'] .productTile-link {
color: #6d3e5a;
}
.ofa-tile--dynamics .productTile-link,
[class*='ofa-tile--dynamics'] .productTile-link {
color: #009bdd;
}
.ofa-tile--dynamics-plus .productTile-link,
[class*='ofa-tile--dynamics-plus'] .productTile-link {
color: #009bdd;
}
.ofa-tile--push-sports .productTile-link,
[class*='ofa-tile--push-sports'] .productTile-link {
color: #00496f;
}
.titleImage {
width: 100%;
max-width: 100%;
height: auto;
padding: 0;
}
.titleImage-content {
position: absolute;
width: 100%;
bottom: 0;
padding: 0;
padding-top: 15px;
overflow: hidden;
}
.titleImage-margin-top {
margin-top: 15px;
}
.titleImage-backlink {
margin-top: 15px;
float: right;
font-size: 1.2em;
}
.titleImage-headline {
margin-top: 15px;
}
.titleImage-subheadline {
font-size: 24px;
}
.titleImage-overlay {
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 20px 0 20px;
display: inline-block;
margin-left: -20px;
}
.titleImage-overlay--shadow {
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
}
.titleImage-content--noImage {
position: relative;
}
@media (max-width: 768px) {
.titleImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 250px;
}
.titleImage-content,
.titleImage-content > .col-md-10,
.titleImage-overlay {
position: relative;
top: 0;
width: calc(100% + 10px);
height: 100%;
}
.titleImage-overlay {
display: block;
margin: 0 -10px;
padding-left: calc(8.33333333% + 10px);
min-height: 170px;
margin-top: 6em;
}
}
.topic-headline {
min-height: 52px;
margin: 0 0 10px 0;
position: relative;
color: #000000;
}
.topic-compactForm:hover {
cursor: pointer;
}
.topic-link-compactForm {
position: absolute;
right: 0;
bottom: 0;
padding: 5px;
color: #ffffff;
background-color: #a2a19f;
cursor: pointer;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
.topic-link-compactForm:hover {
background-color: #346274;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
.topic-readMore {
color: #346274;
font-family: 'Humanist Condensed Bold';
text-decoration: none;
margin-top: 20px;
font-size: 0.9em;
}
.topic-readMore:after {
content: '\e920';
font-family: 'ofa-icons' !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
font-weight: 900 !important;
font-size: 0.8em;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
margin-top: -2px;
margin-left: 7px;
}
.video-js,
.video-js .vjs-tech {
position: relative !important;
width: 100% !important;
height: auto !important;
}
.vjs-poster {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.vjs-skin-ofa {
color: #a2a19f;
}
.vjs-skin-ofa .vjs-control-bar {
background: rgba(255, 255, 255, 0.8);
}
.vjs-skin-ofa .vjs-progress-holder {
background: #ffffff;
}
.vjs-skin-ofa .vjs-play-progress {
background: #a2a19f;
}
.vjs-skin-ofa .vjs-load-progress {
background: rgba(162, 161, 159, 0.15);
}
.vjs-skin-ofa .vjs-big-play-button {
border-radius: 100%;
height: 1.5em;
width: 1.5em;
background-color: transparent;
color: #ffffff;
}
.vjs-skin-ofa .vjs-big-play-button {
margin-top: -0.75em;
margin-left: -0.75em;
}
.vjs-skin-ofa .vjs-big-play-button:hover {
color: #a2a19f;
background-color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.8);
}
.vjs-skin-ofa.video-js:hover .vjs-big-play-button {
background-color: transparent;
}
.plugin-videoplayer {
margin: 15px 0;
}
.plugin-videoplayer--textParent {
width: 30%;
max-width: 100%;
float: left;
margin: 15px;
}
@media screen and (max-width: 480px) {
.plugin-videoplayer--textParent {
width: 100%;
margin: 15px 0;
}
}
.veinCheck-container {
padding: 135px 0;
background-size: cover;
background-repeat: no-repeat;
margin-top: -26px;
}
.veinCheck-progressbar {
margin-top: 20px;
width: 100%;
height: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.veinCheck-progressbarProgress {
background: #6e8ea2;
background: -moz-linear-gradient(top, #6e8ea2 0%, #465e6b 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #6e8ea2), color-stop(100%, #465e6b));
background: -webkit-linear-gradient(top, #6e8ea2 0%, #465e6b 100%);
background: -o-linear-gradient(top, #6e8ea2 0%, #465e6b 100%);
background: -ms-linear-gradient(top, #6e8ea2 0%, #465e6b 100%);
background: linear-gradient(to bottom, #6e8ea2 0%, #465e6b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e8ea2', endColorstr='#465e6b', GradientType=0);
-webkit-box-shadow: 0 0 10px 2px #a2a19f;
-moz-box-shadow: 0 0 10px 2px #a2a19f;
box-shadow: 0 0 10px 2px #a2a19f;
height: 100%;
width: 0;
}
.veinCheck-progressbarBubble {
position: relative;
background: #fff;
width: 50px;
margin-left: -25px;
margin-top: 15px;
line-height: 25px;
text-align: center;
-webkit-box-shadow: 0 0 18px 1px #8f8f8f;
-moz-box-shadow: 0 0 18px 1px #8f8f8f;
box-shadow: 0 0 18px 1px #8f8f8f;
}
.veinCheck-progressbarBubble:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #fff;
border-width: 7px;
margin-left: -7px;
}
.veinCheck-question {
height: 120px;
}
.veinCheck-questions {
margin-top: 80px;
list-style: none;
padding: 0;
margin-bottom: 0;
}
.veinCheck-answers {
list-style: none;
padding: 0;
}
[class^='veinCheck-result--'] {
display: none;
}
.veinCheck-results {
margin-top: 80px;
display: none;
}
.veinCheck-resultSkin {
display: none;
}
@media (max-width: 1024px) {
.veinCheck-container {
padding: 20px 0;
}
}
.fc-list-heading {
display: none;
}
.fc-list-view {
border-style: none;
}
.fc-list-table td {
border-width: 0;
}
.fc-unthemed .fc-list-empty {
background-color: transparent;
}
.fc-list-empty {
vertical-align: top;
}
.fc-scroller {
height: auto !important;
}
#calendar {
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
#calendar .fc-toolbar.fc-header-toolbar {
padding-top: 10px;
}
#calendar .fc-view-container {
min-height: 110px;
padding: 0 30px;
}
#calendar .fc-toolbar button {
border: 0;
background: transparent;
box-shadow: unset;
font-size: 25px;
height: auto;
line-height: 30px;
color: #346274;
outline: none;
}
#calendar tr {
border-top: 1px solid #c0d0d3;
}
#calendar .event-link {
white-space: nowrap;
}
@media (max-width: 700px), (min-width: 992px) and (max-width: 1350px) {
#calendar .fc-list-table td {
display: block;
}
}
.fc-center button {
vertical-align: middle;
color: grey;
font-size: 1.2em;
}
#filtered-calendar .fc-toolbar {
display: none;
}
#filtered-calendar table {
border-collapse: separate;
border-spacing: 0 30px;
border: 0;
padding: 0 15px;
}
#filtered-calendar .fc-view-container {
transform: translateY(-30px);
}
#filtered-calendar td {
border: solid 1px;
padding: 0;
}
#filtered-calendar .fc-view {
margin-left: -15px;
margin-right: -15px;
}
#filtered-calendar .event-row {
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
#filtered-calendar .event-previewed {
background-color: #eaeae9;
}
#filtered-calendar .event {
margin: 8px;
border: 0;
padding: 10px 15px 10px 15px;
font-size: 0.9em;
}
#filtered-calendar .event-title {
font-size: 1.5em;
margin: 5px 0;
}
#filtered-calendar .event-image {
border: 0;
text-align: center;
vertical-align: middle;
width: 130px;
}
#filtered-calendar .fc-list-empty-wrap2 {
position: relative;
margin-top: 30px;
}
#filtered-calendar .fc-list-empty-wrap2 .fc-list-empty {
padding-left: 15px;
text-align: left;
}
/* This file contains merely CSS rules which can be applied by the user */
.table--borderless {
max-width: 100% !important;
border: 0;
}
.table--borderless tr,
.table--borderless td,
.table--borderless th {
border: 0;
}
.table--lowerLine {
max-width: 100%;
border-spacing: 10px 0;
margin-left: -10px;
border-collapse: separate;
}
.table--lowerLine tr,
.table--lowerLine td,
.table--lowerLine th {
border: 0;
}
.table--lowerLine td {
border-bottom: 1px solid #000000;
}
.table--lowerLine th {
border-bottom: 2px solid #000000;
font-family: 'Humanist Condensed Bold';
}
/* Filters */
.filter-headline {
cursor: pointer;
}
.filter-headline:after {
font-family: 'Glyphicons Halflings';
content: '\e080';
float: right;
font-size: 0.8em;
line-height: 21px;
color: #a2a19f;
}
.filter-headline[aria-expanded='true']:after {
content: '\e114';
}
.filter-headline.filter-set:after {
display: none;
}
.filter-label {
display: block;
font-weight: normal;
cursor: pointer;
padding: 2px 5px;
transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
width: 130px;
padding-right: 10px;
}
.filter-label:hover {
transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
background-color: #c0d0d3;
}
.filter-label.is-active {
border: solid 1px #000000;
}
.filter-label.is-active:after {
/* Set the remove-glyphicon */
line-height: 21px;
font-size: 10px;
float: right;
color: #000000;
}
.filter-input {
display: none;
}
.filter-deleteAll {
/* The sidebar has a padding of 10px 30px. This class makes childs "fullwidth" in the sidebar */
margin-left: -30px;
margin-right: -30px;
margin-bottom: -10px;
/* To get rid of the sidebars padding */
margin-top: 20px;
padding: 20px;
text-align: center;
color: #ffffff;
background-color: #a2a19f;
font-weight: bold;
cursor: pointer;
}
.filter-deleteAll .glyphicon {
margin-right: 5px;
}
.filter-deleteAll--disabled {
pointer-events: none;
opacity: 0.5;
}
/* Utilities */
.sidebar-fullwidthChild {
/* The sidebar has a padding of 10px 30px. This class makes childs "fullwidth" in the sidebar */
margin-left: -30px;
margin-right: -30px;
}
hr.sidebar-fullwidthChild {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eeeeee;
}
/* ShadowBox */
.shadowBox {
box-sizing: border-box;
display: inline-block;
padding: 10px 30px;
-webkit-box-shadow: 0 0 20px 2px #bbb;
-moz-box-shadow: 0 0 20px 2px #bbb;
box-shadow: 0 0 20px 2px #bbb;
background-color: white;
}
.shadowBox--noTopShadow {
-webkit-box-shadow: 0 5px 20px -1px #bbb;
-moz-box-shadow: 0 5px 20px -1px #bbb;
box-shadow: 0 5px 20px -1px #bbb;
}
.shadowBox-headline {
margin: 20px 0;
color: #a2a19f;
font-size: 1.27em;
font-family: 'Humanist Condensed Bold';
}
.table-cell-wrap {
white-space: normal;
}
.table-link > a {
color: #547a8b !important;
}
.linkGenerator {
margin-left: -30px;
margin-right: -30px;
margin-bottom: -10px;
margin-top: 10px;
padding: 20px;
text-align: center;
color: #a2a19f;
background-color: #ffffff;
font-weight: bold;
cursor: pointer;
}
@media (max-width: 767px) {
.center-mobile {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
}
@media (max-width: 520px) {
.downloadFilesTable th:nth-child(4),
.downloadFilesTable td:nth-child(4),
.downloadFilesTable th:nth-child(5),
.downloadFilesTable td:nth-child(5) {
display: none;
}
}
.rightsOfUseModal {
max-height: 100vh;
}
.rightsOfUseModal--scrollArea {
max-height: calc(100vh - 400px);
overflow-y: auto;
border: 1px solid #c0d0d3;
}
.rightsOfUse--label {
font-weight: bold;
}
.paginate_button {
display: inline-block;
text-align: center;
line-height: 26px;
border: 2px solid #eaeae9;
height: 30px;
width: 30px;
margin-right: 3px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.paginate_button.current {
border-color: #a2a19f;
background-color: #c0d0d3;
}
.paginate_button:hover {
color: #ffffff;
background-color: #a2a19f;
border-color: #a2a19f;
cursor: pointer;
}
.paginate_button.disabled {
display: none;
}
.dataTables_paginate {
display: inline-block;
padding-left: 20px;
margin: 20px 0;
border-radius: 0;
float: right !important;
}
/****************************************************************************************************************
*
* BEGIN OF FONTS
*
* The base for all the fonts is Humanist Condensed.
* Font faces are defined in fonts.less.
*
* FONT WEIGHTS
*/
/*
* Basic component fonts
*
* Starting with headline stuff
*/
/*
* Tables
*/
/*
* Tag Label
*/
/*
* Filter
*/
/*
* Pagination
*/
/*
* Label
*/
/*
* Buttons
*/
/*
* Anchors
*/
/*
* Body Text
*/
/*
* FONT SIZES
*/
/*
* Button font sizes
*/
/*
* END OF FONTS
****************************************************************************************************************/
/*
* MEDIA QUERIES
****************************************************************************************************************/
/*
* END OF MEDIA QUERIES
****************************************************************************************************************/
/****************************************************************************************************************
*
* BEGIN OF COLORS
*
*
* Official Ofa brand colors
*/
/*
* Generics
*/
/*
* Ofa blues
*/
/*
* Every product brand has a different main color.
*/
/*
* Button colors
*/
/*
* textInput variables
*/
/*
* Input Groups
*/
/*
* hints
*/
/*
* placeholder variables
*/
/*
* textLabel variables
*/
/*
* Navbar Item
*/
/*
* Shadow Box
*/
/*
* Sidetabs
*/
/*
* keyValue component
*/
/*
* Message
*/
/*
* Select Dropdown component
*/
/*
* Table component
*/
/*
* Modal Header
*/
/*
* Hints
*/
/*
* Login Overlay
*/
/*
* Horizontal lines
*/
/*
* Tiles
*/
/*
* END OF FONTS
****************************************************************************************************************/
/****************************************************************************************************************
*
* BEGIN OF MEDIA QUERIES
*
*
* Media-Queries used in the project.
* Use in less files: @media @media--tablet-portrait { .selectEverything{ ... } }
*/
/*
* Input fields2
*
* This file contains all styles for inputs including text, number, radio, checkbox and dropdown.
* It also contains all styles for labels.
*/
label {
font-weight: normal;
/* Override bootstraps label font-weight: bold; */
}
.inputGroup {
display: block;
}
.inputGroup--inline {
display: inline-block;
}
.inputGroup--sub {
margin-top: -30px;
}
.inputGroup-headline {
font-size: 1.27em;
color: #a2a19f;
font-family: 'Humanist Condensed Bold';
}
.inputGroup-numberInput,
.inputGroup-textInput,
.inputGroup-textArea {
background-color: #ffffff;
border-width: 1px;
border-color: #a2a19f;
border-style: solid;
color: #000000;
display: inline-block;
font-family: 'Humanist Condensed Light';
font-size: 1em;
padding: 3px 6px;
margin: 18px 0;
/* 18px = 20px - 1px (border) -1px (padding) */
line-height: 16px;
}
.inputGroup-numberInput,
.inputGroup-textInput {
height: 26px;
width: 200px;
}
.inputGroup-textArea {
height: 8em;
width: 90%;
}
.u-patientForm .inputGroup-textInput,
.u-patientForm .inputGroup-numberInput {
width: 300px;
}
.inputGroup-numberInput {
width: auto;
}
.inputGroup--firstName-input {
width: 166px !important;
/* Patient Create View */
}
.inputGroup--birthday-input {
width: 40px !important;
margin-right: 0 !important;
}
/* Patient Create View */
.inputGroup--birthyear-input {
width: 106px !important;
margin-right: 0 !important;
}
.inputGroup-textInput--noMargin,
.inputGroup-textInput--noMargin:focus {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
}
.inputGroup-textInput--autoWidth {
width: auto;
}
.inputGroup-textInput--newsletter {
width: 140px;
height: 26px;
vertical-align: top;
border: 0;
margin: 0;
}
.inputGroup--postcode-textInput {
margin-right: 0 !important;
width: 130px !important;
/* IMPORTANT! Note this is dependent on the width of inputGroup-textInput (above). */
/* Both added up (inputGroup--postcode-textInput and inputGroup--city-textInput) + borderWidth*2 should result
* in the width of inputGroup-textInput. */
}
.inputGroup--city-textInput {
margin-right: 0 !important;
width: 166px !important;
/* IMPORTANT! Note this is dependent on the width of inputGroup-textInput (above). */
/* Both added up (inputGroup--postcode-textInput and inputGroup--city-textInput) + borderWidth*2 should result
* in the width of inputGroup-textInput. */
}
.inputGroup--street-textInput {
margin-right: 0 !important;
width: 206px !important;
/* Patient Create View */
}
.inputGroup--housenumber-textInput {
margin-right: 0 !important;
width: 90px !important;
/* Patient Create View */
}
.inputGroup--accountPostcode-textInput {
margin-right: 0 !important;
width: 105px !important;
/* IMPORTANT! Note this is dependent on the width of inputGroup-textInput (above). */
/* Both added up (inputGroup--postcode-textInput and inputGroup--city-textInput) + borderWidth*2 should result
* in the width of inputGroup-textInput. */
}
.inputGroup--accountCity-textInput {
margin-right: 0 !important;
width: 141px !important;
/* IMPORTANT! Note this is dependent on the width of inputGroup-textInput (above). */
/* Both added up (inputGroup--postcode-textInput and inputGroup--city-textInput) + borderWidth*2 should result
* in the width of inputGroup-textInput. */
}
/* The following inputGroup fields are used in the basket for the custom delivery address on each line */
.inputGroup-basket--firstName,
.inputGroup-basket--lastName {
width: 188px;
}
.inputGroup-basket--postcode {
width: 105px;
}
.inputGroup-basket--city {
width: 271px;
}
.inputGroup-numberInput:focus,
.inputGroup-textInput:focus {
margin-right: -2px;
padding-left: 5px;
padding-right: 5px;
}
.inputGroup-numberInput:focus,
.inputGroup-textInput:focus,
.inputGroup-textArea:focus {
border-color: #547a8b;
border-width: 2px;
outline: 0;
}
.inputGroup-customAddressCheckbox:not(:checked) ~ .inputGroup-customAddressContainer {
display: none !important;
}
.inputGroup-customAddressCheckbox:checked ~ .inputGroup-customAddressContainer {
display: block;
}
.inputGroup-textArea:focus {
padding: 2px 5px;
}
.text-right .inputGroup-numberInput:focus,
.text-right .inputGroup-textInput:focus {
margin-left: -2px;
margin-right: 0;
}
.inputGroup-customAddressCheckbox:not(:checked) ~ .u-inlineBlock .select2 {
opacity: 0.5;
}
.inputGroup-customAddressCheckbox:checked ~ .u-inlineBlock .select2 {
opacity: 1;
}
.inputGroup-textInput.is-faulty,
.inputGroup-numberInput.is-faulty {
color: #b0053a;
border-color: #b0053a;
}
.inputGroup-textLabel {
color: #000000;
display: inline-block;
width: 200px;
/* IMPORTANT there is a dependency to keyValue-key in the layout!!! */
font-size: 1em;
font-family: 'Humanist Condensed Light';
line-height: 20px;
vertical-align: top;
margin: 20px 0;
box-sizing: border-box;
}
.inputGroup-hint {
font-family: 'Humanist Condensed Italic';
}
.inputGroup-input {
margin: 20px 0;
display: inline-block;
}
.inputGroup-checkBoxLabel {
margin-right: 10px;
}
.inputGroup-checkBoxLabel:last-of-type {
margin-right: 0px;
}
.inputGroup-checkBoxLabel:before {
content: '';
background-image: url(d966a58b68573fa04951.png);
display: inline-block;
width: 14px;
height: 14px;
margin-bottom: -2px;
margin-right: 3px;
background-repeat: no-repeat;
cursor: pointer;
}
.inputGroup-checkBoxInput + .inputGroup-checkBoxLabel:before {
background-position: -5px -101px;
}
.inputGroup-checkBoxInput:checked + .inputGroup-checkBoxLabel:before {
background-position: -5px -5px;
}
.inputGroup-checkBoxInput {
display: none;
}
.inputGroup-radioLabel {
margin-right: 30px;
margin-bottom: 16px;
}
.inputGroup-radioLabel div {
font-family: 'Humanist Condensed Italic';
}
.inputGroup-radioLabel:last-of-type {
margin-right: 0;
}
.inputGroup-radioLabel:before {
content: '';
background-image: url(d966a58b68573fa04951.png);
display: inline-block;
width: 17px;
height: 17px;
margin-bottom: -3px;
margin-right: 5px;
background-repeat: no-repeat;
}
.inputGroup-radioInput + .inputGroup-radioLabel:before {
background-position: -4px -218px;
}
.inputGroup-radioInput:checked + .inputGroup-radioLabel:before {
background-position: -4px -192px;
}
.inputGroup-radioInput {
display: none;
pointer-events: none;
}
.inputGroup-radioInput:disabled + .inputGroup-radioLabel,
.inputGroup-radioInput:not(:checked) ~ div > .subChoiceLabel {
opacity: 0.5;
}
.inputGroup-selectInput {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-width: 2px;
border-color: #c0d0d3;
background-color: transparent;
padding: 5px 35px 5px 5px;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(d966a58b68573fa04951.png);
background-repeat: no-repeat;
background-position: right -5px top -151px;
background-size: 40px;
}
.inputGroup-sizeLabel,
.inputGroup-radioLabel,
.inputGroup-variationLabel,
.inputGroup-gripTopLabel {
cursor: pointer;
display: inline-block;
}
.inputGroup-sizeLabel {
display: inline-block;
height: 35px;
min-width: 35px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
border-width: 2px;
line-height: 31px;
font-size: 16px;
border-style: solid;
text-align: center;
margin-right: 10px;
border-color: #a2a19f;
background-color: #ffffff;
color: #a2a19f;
padding: 0 7px;
}
.inputGroup-radioInput:checked + .inputGroup-sizeLabel {
background-color: #a2a19f;
color: #ffffff;
}
.inputGroup-errors {
color: #b0053a;
font-family: 'Humanist Condensed Italic';
margin-top: -15px;
margin-left: 205px;
padding: 0;
list-style: none;
}
.inputGroup--noInline-errors {
margin-left: 0;
}
.inputGroup-radioLabel img,
.inputGroup-variationLabel img,
.inputGroup-gripTopLabel img {
pointer-events: none;
}
.inputGroup-variationLabel,
.inputGroup-gripTopLabel {
text-align: center;
border: 2px solid #ffffff;
padding: 4px 10px;
vertical-align: top;
}
.inputGroup-gripTopLabel {
width: 120px;
display: inline-block;
}
.inputGroup-gripTopLabel img {
max-width: 100px;
height: 70px;
}
.inputGroup-radioInput:checked + .inputGroup-variationLabel,
.inputGroup-radioInput:checked + .inputGroup-gripTopLabel {
border: 2px solid #a2a19f;
}
.inputGroup-additionalLabel {
font-family: 'Humanist Condensed Italic';
color: #a2a19f;
display: inline-block;
vertical-align: bottom;
margin-bottom: 20px;
margin-left: -40px;
}
/*
* Sometimes label and input are not inline
* Use inputGroup--noInline-textInput for that.
*/
.inputGroup-textInput.u-noInline {
display: block;
margin: 5px 0;
}
.inputGroup-textLabel.u-noInline {
display: block;
margin-bottom: 0;
}
.inputGroup-errors.u-noInline {
margin-left: 0;
margin-top: 5px;
}
/*
* Button for input-files
* Checkout the button in the image_field.html as an example for html + JS(!).
*/
.inputfile-button {
width: 0.1px;
height: 0.1px;
visibility: hidden;
overflow: hidden;
}
.inputfile-button + label {
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.textInput--supplementProduct {
width: 50px;
}
.inputGroup-amountInput {
display: inline-block;
vertical-align: top;
margin: 0;
}
.inputGroup-helptext {
margin-top: -17px;
}
/*
* Some input specific utilities
*/
.inputGroup-checkBoxInput + label + .inputGroup-reason {
display: none;
}
.inputGroup-checkBoxInput:checked + label + .inputGroup-reason {
display: block;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type='text']:disabled,
input[type='number']:disabled {
background-color: #f2f2f2;
cursor: not-allowed;
}
/*
* PLACEHOLDER
*/
::-webkit-input-placeholder {
color: #a2a19f;
font-family: 'Humanist Condensed Italic';
}
::-moz-placeholder {
color: #a2a19f;
font-family: 'Humanist Condensed Italic';
}
:-ms-input-placeholder {
color: #a2a19f;
font-family: 'Humanist Condensed Italic';
}
input:-moz-placeholder {
color: #a2a19f;
font-family: 'Humanist Condensed Italic';
}
@media (max-width: 1400px) {
.inputGroup-gripTopLabel {
width: 110px;
}
.inputGroup-gripTopLabel img {
max-width: 80px;
height: 50px;
}
}
@media (max-width: 1280px) {
.input-search {
width: 120px;
}
.inputGroup-textInput--newsletter {
width: 125px;
}
}
.productionNumberInput-input {
font-size: 18px;
width: 140px !important;
height: 25px !important;
}
.select2-search {
display: none;
}
.selection:focus,
.select2-container:focus,
.select2-selection:focus {
outline: 0;
}
.select2-dropdown,
.select2-container--default .select2-selection--single {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-width: 1px;
border-style: solid;
}
.select2-container .select2-selection--single {
height: 26px;
margin-top: -2px;
}
.select2-container--default .select2-selection--single {
border-color: #a2a19f;
}
.select2-container--focus .select2-selection--single {
border-color: #547a8b;
border-width: 2px;
}
.select2-dropdown,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #547a8b;
border-width: 2px;
z-index: 20000;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border: 0;
height: 26px;
width: 28px;
background-image: url(d966a58b68573fa04951.png);
background-position: -5px -156px;
position: relative;
display: block;
top: 0;
right: 0;
left: auto;
margin: 0;
}
.select2-container--focus .select2-selection--single .select2-selection__arrow b {
background-position: -5px -126px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single b {
background-position: -5px -126px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
width: 28px;
top: -2px;
right: 0;
}
.select2-results {
-webkit-box-shadow: 0 5px 20px 2px #bbb;
-moz-box-shadow: 0 5px 20px 2px #bbb;
box-shadow: 0 5px 20px 2px #bbb;
}
.select2-container--default .select2-results__option[aria-selected='true'] {
background-color: #eaeae9;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #c0d0d3;
color: #000000;
}
.select2-results__option[aria-selected]:hover {
background-color: #c0d0d3;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #000000;
line-height: 25px;
padding-right: 25px;
padding-left: 8px;
}
.select2-container--focus .select2-selection--single .select2-selection__rendered {
line-height: 23px;
padding-left: 7px;
}
.select2-container.is-faulty {
border: 1px solid #b0053a;
}
/* Different widths for dropdowns */
.u-w80 > .select2-container {
width: 80px !important;
}
.u-w90 > .select2-container {
width: 90px !important;
}
.u-w100 > .select2-container {
width: 100px !important;
}
.u-w130 > .select2-container {
width: 130px !important;
}
.u-w150 > .select2-container {
width: 150px !important;
}
.u-w200 > .select2-container {
width: 200px !important;
}
.u-w250 > .select2-container {
width: 250px !important;
}
.u-w300 > .select2-container {
width: 300px !important;
}
.u-w380 > .select2-container {
width: 380px !important;
}
.u-w400 > .select2-container {
width: 400px !important;
}
/* Widths that adapt according to screen size */
.u-w350A > .select2-container {
width: 200px !important;
}
@media (min-width: 768px) {
.u-w350A > .select2-container {
width: 300px !important;
}
}
@media (min-width: 992px) {
.u-w350A > .select2-container {
width: 350px !important;
}
}
.u-w100P > .select2-container {
max-width: 100% !important;
width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--focus .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
margin: 0;
}
/****************************************************************************************************************
*
* BEGIN OF FONTS
*
* The base for all the fonts is Humanist Condensed.
* Font faces are defined in fonts.less.
*
* FONT WEIGHTS
*/
/*
* FONT SIZES
*/
/*
* MEDIA QUERIES
****************************************************************************************************************/
/*
* END OF MEDIA QUERIES
****************************************************************************************************************/
/****************************************************************************************************************
*
* BEGIN OF COLORS
*
*
* Official Ofa brand colors
*/
/*
* Generics
*/
/*
* Ofa blues
*/
/*
* Every product brand has a different main color.
*/
/*
* FONT FACES
*
* All fonts are defined in this file. Never define a new font anywhere else in the project.
* Always use TTF, WOFF, EOT and SVG files to ensure cross browser compatibility.
*/
@font-face {
font-family: 'Humanist Condensed Light';
src: url(88917ceee3663696f409.eot);
/* IE9 */
src: url(88917ceee3663696f409.eot?#iefix) format('embedded-opentype'), url(7af82e7d5d7dca50ee7e.woff) format('woff'), url(6e79144f92df185487b5.ttf) format('truetype'), url(1a29540c7c6a7506379b.svg) format('svg');
}
@font-face {
font-family: 'Humanist Condensed Bold';
src: url(9f3356e7f7ee194cbd1b.eot);
/* IE9 */
src: url(9f3356e7f7ee194cbd1b.eot?#iefix) format('embedded-opentype'), url(31c40b8ccccd636c0d19.woff) format('woff'), url(c066f8b4c1884219e65e.ttf) format('truetype'), url(41d7b65cb6358682bc9e.svg) format('svg');
}
@font-face {
font-family: 'Humanist Condensed Italic';
src: url(39ef0a303379dd748e8e.eot);
/* IE9 */
src: url(39ef0a303379dd748e8e.eot?#iefix) format('embedded-opentype'), url(87dee3a7202eb1b7f08c.woff) format('woff'), url(14ee6b26d4a531143f66.ttf) format('truetype'), url(b67cd2f568acbc544f77.svg) format('svg');
}
@font-face {
font-family: 'AGaramondPro-Italic';
src: url(1813b9da9327b3a2160e.eot?#iefix) format('embedded-opentype'), url(9a84e6aa05d16babfc5f.otf) format('opentype'), url(7c61321828595b720d27.woff) format('woff'), url(d4b6a972db4e1273870d.ttf) format('truetype'), url(6d8feb38ab9e95c11a50.svg#AGaramondPro-Italic) format('svg');
font-weight: normal;
font-style: normal;
}
.ofa-dropShadow-default {
-webkit-box-shadow: 0 0 18px 2px #d1d1cf;
-moz-box-shadow: 0 0 18px 2px #d1d1cf;
box-shadow: 0 0 18px 2px #d1d1cf;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.ofa-dropShadow-hover {
-webkit-box-shadow: 0 0 30px 8px #a2babe;
-moz-box-shadow: 0 0 30px 8px #a2babe;
box-shadow: 0 0 30px 8px #a2babe;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.tab-shadow {
-webkit-box-shadow: 0 0 29px 2px #a2babe;
-moz-box-shadow: 0 0 29px 2px #a2babe;
box-shadow: 0 0 29px 2px #a2babe;
}
.tab-shadow--active {
-webkit-box-shadow: 0 0 29px 2px #b8b8b5;
-moz-box-shadow: 0 0 29px 2px #b8b8b5;
box-shadow: 0 0 29px 2px #b8b8b5;
}
.ofa-dropShadowBlue-default {
-webkit-box-shadow: 0 0 18px 2px #97aeba;
-moz-box-shadow: 0 0 18px 2px #97aeba;
box-shadow: 0 0 18px 2px #97aeba;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.ofa-dropShadowBlue-hover {
-webkit-box-shadow: 0 0 30px 8px #7694a4;
-moz-box-shadow: 0 0 30px 8px #7694a4;
box-shadow: 0 0 30px 8px #7694a4;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
/*doc
---
title: Tabs
name: tabs
category: Basics
---
Tabs are used to create a more compact rendering of complex content.
```html_example
Some content
Some other content
Some more other content
```
Every tab is represented by an `
` element within the `.nav-tabs` list and an `