.download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)}
.mod_visitors .invisible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
float: left;
width:0px;
height:0px;
}
/* Styles contao-ticker */
.mod_ticker .tickertext, .ce_ticker .tickertext { background-color:#eee; }
.mod_ticker .tickertext a, .ce_ticker .tickertext a { text-decoration:none; }
.mod_ticker .telex-msg, .ce_ticker .telex-msg { padding-top:0.3em; }
/* Farben Modules */
.mod_ticker .msg-red, .mod_ticker .msg-red a { background-color:#d32f2f; color:#ffcdd2; }
.mod_ticker .msg-pink, .mod_ticker .msg-pink a { background-color:#F8BBD0; color:#333; }
.mod_ticker .msg-purple, .mod_ticker .msg-purple a { background-color:#ce93d8; color:#333; }
.mod_ticker .msg-deeppurple, .mod_ticker .msg-deeppurple a { background-color:#4527a0; color:#ede7f6; }
.mod_ticker .msg-indigo, .mod_ticker .msg-indigo a { background-color:#9fa8da; color:#333; }
.mod_ticker .msg-blue, .mod_ticker .msg-blue a { background-color:#0d47a1; color:#e3f2fd; }
.mod_ticker .msg-lightblue, .mod_ticker .msg-lightblue a { background-color:#90caf9; color:#333; }
.mod_ticker .msg-cyan, .mod_ticker .msg-cyan a { background-color:#006064; color:#e0f7fa; }
.mod_ticker .msg-teal, .mod_ticker .msg-teal a { background-color:#B2DFDB; color:#333; }
.mod_ticker .msg-green, .mod_ticker .msg-green a { background-color:#1b5e20; color:#e8f5e9; }
.mod_ticker .msg-lightgreen, .mod_ticker .msg-lightgreen a { background-color:#aed581; color:#333; }
.mod_ticker .msg-lime, .mod_ticker .msg-lime a { background-color:#cddc39; color:#333; }
.mod_ticker .msg-yellow, .mod_ticker .msg-yellow a { background-color:#ffee58; color:#333; }
.mod_ticker .msg-amber, .mod_ticker .msg-amber a { background-color:#FFECB3; color:#333; }
.mod_ticker .msg-orange, .mod_ticker .msg-orange a { background-color:#ffb74d; color:#333; }
.mod_ticker .msg-deeporange, .mod_ticker .msg-deeporange a { background-color:#e64a19; color:#fbe9e7; }
.mod_ticker .msg-brown, .mod_ticker .msg-brown a { background-color:#5d4037; color:#efebe9; }
.mod_ticker .msg-grey, .mod_ticker .msg-grey a { background-color:#bdbdbd; color:#333; }
.mod_ticker .msg-bluegrey, .mod_ticker .msg-bluegrey a { background-color:#37474f; color:#eceff1; }
.mod_ticker .msg-white, .mod_ticker .msg-white a { background-color:#ffffff; color:#333; }
.mod_ticker .msg-black, .mod_ticker .msg-black a { background-color:#202020; color:#E0E0E0; }
/* Farben ContentElements */
.ce_ticker .msg-red, .ce_ticker .msg-red a { background-color:#d32f2f; color:#ffcdd2; }
.ce_ticker .msg-pink, .ce_ticker .msg-pink a { background-color:#F8BBD0; color:#333; }
.ce_ticker .msg-purple, .ce_ticker .msg-purple a { background-color:#ce93d8; color:#333; }
.ce_ticker .msg-deeppurple, .ce_ticker .msg-deeppurple a { background-color:#4527a0; color:#ede7f6; }
.ce_ticker .msg-indigo, .ce_ticker .msg-indigo a { background-color:#9fa8da; color:#333; }
.ce_ticker .msg-blue, .ce_ticker .msg-blue a { background-color:#0d47a1; color:#e3f2fd; }
.ce_ticker .msg-lightblue, .ce_ticker .msg-lightblue a { background-color:#90caf9; color:#333; }
.ce_ticker .msg-cyan, .ce_ticker .msg-cyan a { background-color:#006064; color:#e0f7fa; }
.ce_ticker .msg-teal, .ce_ticker .msg-teal a { background-color:#B2DFDB; color:#333; }
.ce_ticker .msg-green, .ce_ticker .msg-green a { background-color:#1b5e20; color:#e8f5e9; }
.ce_ticker .msg-lightgreen, .ce_ticker .msg-lightgreen a { background-color:#aed581; color:#333; }
.ce_ticker .msg-lime, .ce_ticker .msg-lime a { background-color:#cddc39; color:#333; }
.ce_ticker .msg-yellow, .ce_ticker .msg-yellow a { background-color:#ffee58; color:#333; }
.ce_ticker .msg-amber, .ce_ticker .msg-amber a { background-color:#FFECB3; color:#333; }
.ce_ticker .msg-orange, .ce_ticker .msg-orange a { background-color:#ffb74d; color:#333; }
.ce_ticker .msg-deeporange, .ce_ticker .msg-deeporange a { background-color:#e64a19; color:#fbe9e7; }
.ce_ticker .msg-brown, .ce_ticker .msg-brown a { background-color:#5d4037; color:#efebe9; }
.ce_ticker .msg-grey, .ce_ticker .msg-grey a { background-color:#bdbdbd; color:#333; }
.ce_ticker .msg-bluegrey, .ce_ticker .msg-bluegrey a { background-color:#37474f; color:#eceff1; }
.ce_ticker .msg-white, .ce_ticker .msg-white a { background-color:#ffffff; color:#333; }
.ce_ticker .msg-black, .ce_ticker .msg-black a { background-color:#202020; color:#E0E0E0; }
/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
* HTML5 display definitions
* ========================================================================== */
/* Corrects block display not defined in IE6/7/8/9 & FF3 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/* Prevents modern browsers from displaying 'audio' without controls
* Remove excess height in iOS5 devices */
audio:not([controls]) {
display: none;
height: 0;
}
/* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
* Known issue: no IE6 support */
[hidden] {
display: none;
}
/* =============================================================================
* Base
* ========================================================================== */
/* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
font-family: sans-serif;
}
/* Addresses font-family inconsistency between 'textarea' and other form elements. */
button,
input,
select,
textarea {
font-family: sans-serif;
}
/* Addresses margins handled incorrectly in IE6/7 */
body {
margin: 0;
}
/* =============================================================================
* Links
* ========================================================================== */
/* Addresses outline displayed oddly in Chrome */
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
/* Improves readability when focused and also mouse hovered in all browsers
* people.opera.com/patrickl/experiments/keyboard/test */
/* =============================================================================
* Typography
* ========================================================================== */
/* Addresses font sizes and margins set differently in IE6/7
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 */
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
/* Addresses styling not present in IE7/8/9, S5, Chrome */
abbr[title] {
border-bottom: 1px dotted;
}
/* Addresses style set to 'bolder' in FF3+, S4/5, Chrome */
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/* Addresses styling not present in S5, Chrome */
dfn {
font-style: italic;
}
/* Addresses styling not present in IE6/7/8/9 */
mark {
background: yellow;
color: black;
}
/* Addresses margins set differently in IE6/7 */
p {
margin: 1em 0;
}
pre {
margin: 1em 0;
font-family: monospace, serif;
_font-family: "courier new", monospace;
font-size: 1em;
}
/* Corrects font family set oddly in IE6, S4/5, Chrome
* en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: "courier new", monospace;
font-size: 1em;
}
/* Improves readability of pre-formatted text in all browsers */
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/* 1. Addresses CSS quotes not supported in IE6/7
* 2. Addresses quote property not supported in S4 */
/* 1 */
q {
quotes: none;
}
q:before,
q:after {
content: "";
content: none;
}
/* 2 */
small {
font-size: 75%;
}
/* Prevents sub and sup affecting line-height in all browsers
* gist.github.com/413930 */
sub {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.25em;
}
sub {
bottom: -0.2em;
}
/* =============================================================================
* Lists
* ========================================================================== */
/* Addresses margins set differently in IE6/7 */
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/* Addresses paddings set differently in IE6/7 */
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/* Corrects list images handled incorrectly in IE7 */
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* =============================================================================
* Embedded content
* ========================================================================== */
/* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
* 2. Improves image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */
}
/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
* Figures
* ========================================================================== */
/* Addresses margin not present in IE6/7/8/9, S5, O11 */
figure,
form {
margin: 0;
}
/* =============================================================================
* Forms
* ========================================================================== */
/* Corrects margin displayed oddly in IE6/7 */
/* Define consistent border, margin, and padding */
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/* 1. Corrects color not being inherited in IE6/7/8/9
* 2. Corrects text not wrapping in FF3
* 3. Corrects alignment displayed oddly in IE6/7 */
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */
}
/* 1. Corrects font size not being inherited in all browsers
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
* 3. Improves appearance and consistency in all browsers */
button,
input,
select,
textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */
}
/* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet */
button,
input {
line-height: normal;
/* 1 */
}
/* 1. Improves usability and consistency of cursor style between image-type 'input' and others
* 2. Corrects inability to style clickable 'input' types in iOS
* 3. Removes inner spacing in IE7 without affecting normal text inputs
* Known issue: inner spacing remains in IE6 */
button {
cursor: pointer;
/* 1 */
-webkit-appearance: button;
/* 2 */
*overflow: visible;
/* 3 */
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
/* 1 */
-webkit-appearance: button;
/* 2 */
*overflow: visible;
/* 3 */
}
/* Re-set default cursor for disabled elements */
button[disabled] {
cursor: default;
}
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* 1. Addresses box sizing set to content-box in IE8/9
* 2. Removes excess padding in IE8/9
* 3. Removes excess padding in IE7
* Known issue: excess padding remains in IE6 */
/* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */
/* Removes inner padding and search cancel button in S5, Chrome on OS X */
/* Removes inner padding and border in FF3+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* 1. Removes default vertical scrollbar in IE6/7/8/9
* 2. Improves readability and alignment in all browsers */
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* =============================================================================
* Tables
* ========================================================================== */
/* Remove most spacing between table cells */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ===========================================
* Icon classes
* ======================================== */
.icon-3d:before {
content: "\e150";
}
.icon-addressbook:before {
content: "\e001";
}
.icon-airplane:before {
content: "\e002";
}
.icon-amazon:before {
content: "\e004";
}
.icon-amazon-2:before {
content: "\e003";
}
.icon-ampersand:before {
content: "\26";
}
.icon-anchor:before {
content: "\e005";
}
.icon-android:before {
content: "\e006";
}
.icon-aperture:before {
content: "\e007";
}
.icon-apple:before {
content: "\e008";
}
.icon-arrow-2-down:before {
content: "\e009";
}
.icon-arrow-2-left:before {
content: "\e00a";
}
.icon-arrow-2-right:before {
content: "\e00b";
}
.icon-arrow-2-up:before {
content: "\e00c";
}
.icon-arrow-3-down:before {
content: "\2193";
}
.icon-arrow-3-down-left:before {
content: "\e00d";
}
.icon-arrow-3-down-right:before {
content: "\e00e";
}
.icon-arrow-3-left:before {
content: "\2190";
}
.icon-arrow-3-right:before {
content: "\2192";
}
.icon-arrow-3-up:before {
content: "\2191";
}
.icon-arrow-3-up-left:before {
content: "\e00f";
}
.icon-arrow-3-up-right:before {
content: "\e010";
}
.icon-arrow-4-down:before {
content: "\e011";
}
.icon-arrow-4-left:before {
content: "\e012";
}
.icon-arrow-4-right:before {
content: "\e013";
}
.icon-arrow-4-up:before {
content: "\e014";
}
.icon-arrow-5-down:before {
content: "\e015";
}
.icon-arrow-5-first:before {
content: "\e016";
}
.icon-arrow-5-last:before {
content: "\e017";
}
.icon-arrow-5-left:before {
content: "\e018";
}
.icon-arrow-5-right:before {
content: "\e019";
}
.icon-arrow-5-up:before {
content: "\e01a";
}
.icon-arrow-down:before {
content: "\e01d";
}
.icon-arrow-down-left:before {
content: "\e01b";
}
.icon-arrow-down-right:before {
content: "\e01c";
}
.icon-arrow-left:before {
content: "\e01e";
}
.icon-arrow-right:before {
content: "\e01f";
}
.icon-arrow-up:before {
content: "\e022";
}
.icon-arrow-up-left:before {
content: "\e020";
}
.icon-arrow-up-right:before {
content: "\e021";
}
.icon-at:before {
content: "\40";
}
.icon-award:before {
content: "\e023";
}
.icon-backspace:before {
content: "\e024";
}
.icon-baidu:before {
content: "\e025";
}
.icon-bars:before {
content: "\e026";
}
.icon-basket:before {
content: "\e027";
}
.icon-beaker:before {
content: "\e028";
}
.icon-bell:before {
content: "\e029";
}
.icon-binoculars:before {
content: "\e02a";
}
.icon-blogger:before {
content: "\e02c";
}
.icon-blogger-2:before {
content: "\e02b";
}
.icon-bluetooth:before {
content: "\e02d";
}
.icon-bolt:before {
content: "\2301";
}
.icon-bolt-2:before {
content: "\e02e";
}
.icon-book:before {
content: "\e031";
}
.icon-book-2:before {
content: "\e02f";
}
.icon-book-3:before {
content: "\e030";
}
.icon-bookmark:before {
content: "\e032";
}
.icon-box:before {
content: "\e033";
}
.icon-brush:before {
content: "\e034";
}
.icon-calc:before {
content: "\e035";
}
.icon-calendar:before {
content: "\e037";
}
.icon-calendar-stroke:before {
content: "\e036";
}
.icon-camera:before {
content: "\e038";
}
.icon-cart:before {
content: "\e03a";
}
.icon-cart-2:before {
content: "\e039";
}
.icon-case:before {
content: "\e03b";
}
.icon-cc:before {
content: "\e03c";
}
.icon-cd:before {
content: "\e03d";
}
.icon-chart:before {
content: "\25d5";
}
.icon-chart-down:before {
content: "\e03f";
}
.icon-chart-down-2:before {
content: "\e03e";
}
.icon-chart-up:before {
content: "\e041";
}
.icon-chart-up-2:before {
content: "\e040";
}
.icon-chat:before {
content: "\e043";
}
.icon-chat-stroke:before {
content: "\e042";
}
.icon-check:before {
content: "\2713";
}
.icon-check-2:before {
content: "\e044";
}
.icon-check-3:before {
content: "\2714";
}
.icon-chrome:before {
content: "\e045";
}
.icon-clef:before {
content: "\e047";
}
.icon-clef-2:before {
content: "\e046";
}
.icon-clipboard:before {
content: "\e048";
}
.icon-clock:before {
content: "\e049";
}
.icon-cloud:before {
content: "\2601";
}
.icon-cloud-download:before {
content: "\e04a";
}
.icon-cloud-upload:before {
content: "\e04b";
}
.icon-code:before {
content: "\e04c";
}
.icon-coffee:before {
content: "\e04d";
}
.icon-cog:before {
content: "\2699";
}
.icon-cogs:before {
content: "\e04e";
}
.icon-command:before {
content: "\e04f";
}
.icon-comment:before {
content: "\e053";
}
.icon-comment-2:before {
content: "\e051";
}
.icon-comment-2-stroke:before {
content: "\e050";
}
.icon-comment-stroke:before {
content: "\e052";
}
.icon-cone:before {
content: "\e055";
}
.icon-cone-2:before {
content: "\e054";
}
.icon-contao:before {
content: "\e056";
}
.icon-contrast:before {
content: "\e057";
}
.icon-creditcard:before {
content: "\e059";
}
.icon-creditcard-2:before {
content: "\e058";
}
.icon-css3:before {
content: "\e05a";
}
.icon-cursor:before {
content: "\2196";
}
.icon-curved-arrow:before {
content: "\e05b";
}
.icon-delicious:before {
content: "\e05c";
}
.icon-denied:before {
content: "\2298";
}
.icon-deviantart:before {
content: "\e05e";
}
.icon-deviantart-2:before {
content: "\e05d";
}
.icon-direction:before {
content: "\e05f";
}
.icon-document:before {
content: "\e06a";
}
.icon-document-add:before {
content: "\e060";
}
.icon-document-css:before {
content: "\e061";
}
.icon-document-excel:before {
content: "\e062";
}
.icon-document-openoffice:before {
content: "\e063";
}
.icon-document-pdf:before {
content: "\e064";
}
.icon-document-powerpoint:before {
content: "\e065";
}
.icon-document-remove:before {
content: "\e066";
}
.icon-document-word:before {
content: "\e067";
}
.icon-document-xml:before {
content: "\e068";
}
.icon-document-zip:before {
content: "\e069";
}
.icon-documents:before {
content: "\e06c";
}
.icon-documents-2:before {
content: "\e06b";
}
.icon-download:before {
content: "\e06d";
}
.icon-download-2:before {
content: "\2913";
}
.icon-dribbble:before {
content: "\e06f";
}
.icon-dribbble-2:before {
content: "\e06e";
}
.icon-dropbox:before {
content: "\e070";
}
.icon-eject:before {
content: "\23cf";
}
.icon-ember:before {
content: "\e071";
}
.icon-equalizer:before {
content: "\e072";
}
.icon-external:before {
content: "\e151";
}
.icon-eye:before {
content: "\e073";
}
.icon-eyedropper:before {
content: "\e074";
}
.icon-facebook:before {
content: "\e076";
}
.icon-facebook-2:before {
content: "\e075";
}
.icon-fan:before {
content: "\e077";
}
.icon-fax:before {
content: "\e078";
}
.icon-feed:before {
content: "\e07a";
}
.icon-feed-2:before {
content: "\e079";
}
.icon-female:before {
content: "\e07b";
}
.icon-firefox:before {
content: "\e07c";
}
.icon-firewire:before {
content: "\e07d";
}
.icon-first:before {
content: "\21e4";
}
.icon-flag:before {
content: "\e07f";
}
.icon-flag-2:before {
content: "\e07e";
}
.icon-flickr:before {
content: "\e081";
}
.icon-flickr-2:before {
content: "\e080";
}
.icon-floppy:before {
content: "\e082";
}
.icon-folder:before {
content: "\e083";
}
.icon-folders:before {
content: "\e084";
}
.icon-font:before {
content: "\e086";
}
.icon-font-2:before {
content: "\e085";
}
.icon-fork:before {
content: "\2443";
}
.icon-forrst:before {
content: "\e088";
}
.icon-forrst-2:before {
content: "\e087";
}
.icon-fullscreen:before {
content: "\e08a";
}
.icon-fullscreen-exit:before {
content: "\e089";
}
.icon-funnel:before {
content: "\e08b";
}
.icon-gallery:before {
content: "\e08c";
}
.icon-game:before {
content: "\e08d";
}
.icon-git:before {
content: "\e090";
}
.icon-git-2:before {
content: "\e08e";
}
.icon-git-3:before {
content: "\e08f";
}
.icon-github:before {
content: "\e093";
}
.icon-github-2:before {
content: "\e091";
}
.icon-github-cat:before {
content: "\e092";
}
.icon-glasses:before {
content: "\e094";
}
.icon-globe:before {
content: "\e095";
}
.icon-gplus:before {
content: "\e098";
}
.icon-gplus-2:before {
content: "\e096";
}
.icon-gplus-3:before {
content: "\e097";
}
.icon-grid:before {
content: "\e09a";
}
.icon-grid-2:before {
content: "\e099";
}
.icon-hash:before {
content: "\23";
}
.icon-hd:before {
content: "\e09b";
}
.icon-headphones:before {
content: "\e09c";
}
.icon-heart:before {
content: "\e09e";
}
.icon-heart-stroke:before {
content: "\e09d";
}
.icon-heartbeat:before {
content: "\e09f";
}
.icon-help:before {
content: "\e0a0";
}
.icon-home:before {
content: "\2302";
}
.icon-home-2:before {
content: "\e0a1";
}
.icon-html5:before {
content: "\e0a3";
}
.icon-html5-stroke:before {
content: "\e0a2";
}
.icon-ie:before {
content: "\e0a4";
}
.icon-infinity:before {
content: "\e0a5";
}
.icon-info:before {
content: "\2139";
}
.icon-info-2:before {
content: "\e0a6";
}
.icon-instagram:before {
content: "\e152";
}
.icon-ipad:before {
content: "\e0a7";
}
.icon-iphone:before {
content: "\e0a8";
}
.icon-ipod:before {
content: "\e0a9";
}
.icon-key:before {
content: "\e0ab";
}
.icon-key-stroke:before {
content: "\e0aa";
}
.icon-laptop:before {
content: "\e0ad";
}
.icon-laptop-2:before {
content: "\e0ac";
}
.icon-last:before {
content: "\21e5";
}
.icon-lastfm:before {
content: "\e0af";
}
.icon-lastfm-2:before {
content: "\e0ae";
}
.icon-layers:before {
content: "\e0b0";
}
.icon-leave:before {
content: "\e0b1";
}
.icon-left-quote:before {
content: "\201c";
}
.icon-left-quote-2:before {
content: "\e0b2";
}
.icon-like:before {
content: "\e0b3";
}
.icon-link:before {
content: "\e0b5";
}
.icon-link-2:before {
content: "\e0b4";
}
.icon-linkedin:before {
content: "\e0b6";
}
.icon-list:before {
content: "\e0b8";
}
.icon-list-2:before {
content: "\e0b7";
}
.icon-load-0:before {
content: "\e0b9";
}
.icon-load-1:before {
content: "\e0ba";
}
.icon-load-2:before {
content: "\e0bb";
}
.icon-load-3:before {
content: "\e0bc";
}
.icon-load-4:before {
content: "\e0bd";
}
.icon-load-5:before {
content: "\e0be";
}
.icon-load-6:before {
content: "\e0bf";
}
.icon-load-7:before {
content: "\e0c0";
}
.icon-lock:before {
content: "\e0c3";
}
.icon-lock-2:before {
content: "\e0c1";
}
.icon-lock-stroke:before {
content: "\e0c2";
}
.icon-loop:before {
content: "\27f3";
}
.icon-loop-double:before {
content: "\e0c4";
}
.icon-loop-left:before {
content: "\e0c6";
}
.icon-loop-left-2:before {
content: "\e0c5";
}
.icon-loop-right:before {
content: "\e0c8";
}
.icon-loop-right-2:before {
content: "\e0c7";
}
.icon-magnifying-glass:before {
content: "\e0cb";
}
.icon-magnifying-glass-2:before {
content: "\e0c9";
}
.icon-magnifying-glass-3:before {
content: "\e0ca";
}
.icon-mail:before {
content: "\2709";
}
.icon-mail-2:before {
content: "\e0cc";
}
.icon-mail-3:before {
content: "\e0cd";
}
.icon-mail-stroke:before {
content: "\e0ce";
}
.icon-male:before {
content: "\e0cf";
}
.icon-map-pin:before {
content: "\e0d3";
}
.icon-map-pin-2:before {
content: "\e0d1";
}
.icon-map-pin-2-stroke:before {
content: "\e0d0";
}
.icon-map-pin-stroke:before {
content: "\e0d2";
}
.icon-megaphone:before {
content: "\e0d4";
}
.icon-mic:before {
content: "\e0d6";
}
.icon-mic-2:before {
content: "\e0d5";
}
.icon-minus:before {
content: "\2212";
}
.icon-minus-2:before {
content: "\2296";
}
.icon-monitor:before {
content: "\e0d7";
}
.icon-moon:before {
content: "\e0d8";
}
.icon-moon-stroke:before {
content: "\263e";
}
.icon-mouse:before {
content: "\e0d9";
}
.icon-move:before {
content: "\e0da";
}
.icon-move-horizontal:before {
content: "\2194";
}
.icon-move-vertical:before {
content: "\2195";
}
.icon-movie:before {
content: "\e0db";
}
.icon-new-window:before {
content: "\e0dc";
}
.icon-news:before {
content: "\e0dd";
}
.icon-opera:before {
content: "\e0de";
}
.icon-paperclip:before {
content: "\e0df";
}
.icon-paperplane:before {
content: "\e0e0";
}
.icon-pause:before {
content: "\e0e2";
}
.icon-pause-2:before {
content: "\e0e1";
}
.icon-pen:before {
content: "\270f";
}
.icon-pen-2:before {
content: "\e0e4";
}
.icon-pen-2-stroke:before {
content: "\e0e3";
}
.icon-pen-3:before {
content: "\e0e5";
}
.icon-phone:before {
content: "\e0e8";
}
.icon-phone-2:before {
content: "\e0e6";
}
.icon-phone-mobile:before {
content: "\e0e7";
}
.icon-picasa:before {
content: "\e0ea";
}
.icon-picasa-2:before {
content: "\e0e9";
}
.icon-pilcrow:before {
content: "\b6";
}
.icon-pin:before {
content: "\e0eb";
}
.icon-pinterest:before {
content: "\e0ed";
}
.icon-pinterest-2:before {
content: "\e0ec";
}
.icon-play:before {
content: "\25b6";
}
.icon-play-2:before {
content: "\e0ee";
}
.icon-plus:before {
content: "\2b";
}
.icon-plus-2:before {
content: "\e0ef";
}
.icon-plus-3:before {
content: "\2295";
}
.icon-podcast:before {
content: "\e0f1";
}
.icon-podcast-2:before {
content: "\e0f0";
}
.icon-polaroids:before {
content: "\e0f2";
}
.icon-power:before {
content: "\e0f3";
}
.icon-printer:before {
content: "\e0f5";
}
.icon-printer-2:before {
content: "\e0f4";
}
.icon-puzzle:before {
content: "\e0f6";
}
.icon-question:before {
content: "\e0f7";
}
.icon-question-mark:before {
content: "\3f";
}
.icon-rain:before {
content: "\e0f8";
}
.icon-read:before {
content: "\e0f9";
}
.icon-recycle:before {
content: "\e0fa";
}
.icon-reload:before {
content: "\21bb";
}
.icon-responsive:before {
content: "\e0fb";
}
.icon-right-quote:before {
content: "\201d";
}
.icon-right-quote-2:before {
content: "\e0fc";
}
.icon-rocket:before {
content: "\e0fd";
}
.icon-rss:before {
content: "\e0ff";
}
.icon-rss-2:before {
content: "\e0fe";
}
.icon-ruler:before {
content: "\e100";
}
.icon-safari:before {
content: "\e101";
}
.icon-save:before {
content: "\e102";
}
.icon-seo:before {
content: "\e103";
}
.icon-share:before {
content: "\e105";
}
.icon-share-2:before {
content: "\e104";
}
.icon-shield:before {
content: "\e108";
}
.icon-shield-2:before {
content: "\e107";
}
.icon-shield-2-stroke:before {
content: "\e106";
}
.icon-shuffle:before {
content: "\e109";
}
.icon-skype:before {
content: "\e10a";
}
.icon-smiles:before {
content: "\e10b";
}
.icon-snowflake:before {
content: "\e10c";
}
.icon-soundcloud:before {
content: "\e10e";
}
.icon-soundcloud-2:before {
content: "\e10d";
}
.icon-speedometer:before {
content: "\e112";
}
.icon-speedometer-2:before {
content: "\e111";
}
.icon-speedometer-2-low:before {
content: "\e10f";
}
.icon-speedometer-2-medium:before {
content: "\e110";
}
.icon-spin:before {
content: "\e113";
}
.icon-star:before {
content: "\2605";
}
.icon-star-2:before {
content: "\e116";
}
.icon-star-2-half:before {
content: "\e114";
}
.icon-star-2-stroke:before {
content: "\e115";
}
.icon-star-half:before {
content: "\e117";
}
.icon-star-stroke:before {
content: "\e118";
}
.icon-stop:before {
content: "\25a0";
}
.icon-stop-2:before {
content: "\e119";
}
.icon-stumbleupon:before {
content: "\e11b";
}
.icon-stumbleupon-2:before {
content: "\e11a";
}
.icon-sun:before {
content: "\2600";
}
.icon-sun-stroke:before {
content: "\263c";
}
.icon-support:before {
content: "\e11c";
}
.icon-tag:before {
content: "\e120";
}
.icon-tag-left:before {
content: "\e11d";
}
.icon-tag-right:before {
content: "\e11e";
}
.icon-tag-stroke:before {
content: "\e11f";
}
.icon-target:before {
content: "\e122";
}
.icon-target-2:before {
content: "\e121";
}
.icon-temperature:before {
content: "\e124";
}
.icon-temperature-2:before {
content: "\e123";
}
.icon-thumb-down:before {
content: "\e125";
}
.icon-thumb-up:before {
content: "\e126";
}
.icon-tie:before {
content: "\e127";
}
.icon-tools:before {
content: "\e129";
}
.icon-tools-2:before {
content: "\e128";
}
.icon-transfer:before {
content: "\21c4";
}
.icon-trash:before {
content: "\e12d";
}
.icon-trash-2:before {
content: "\e12a";
}
.icon-trash-3:before {
content: "\e12c";
}
.icon-trash-3-stroke:before {
content: "\e12b";
}
.icon-truck:before {
content: "\e12e";
}
.icon-tumblr:before {
content: "\e130";
}
.icon-tumblr-2:before {
content: "\e12f";
}
.icon-twitter-bird:before {
content: "\e132";
}
.icon-twitter-bird-2:before {
content: "\e131";
}
.icon-umbrella:before {
content: "\2602";
}
.icon-undo:before {
content: "\238c";
}
.icon-unlock:before {
content: "\e134";
}
.icon-unlock-stroke:before {
content: "\e133";
}
.icon-upload:before {
content: "\e135";
}
.icon-upload:before {
content: "\2912";
}
.icon-usb:before {
content: "\e136";
}
.icon-user:before {
content: "\e138";
}
.icon-user-2:before {
content: "\e137";
}
.icon-users:before {
content: "\e139";
}
.icon-vcard:before {
content: "\e13a";
}
.icon-vector:before {
content: "\e13c";
}
.icon-vector-2:before {
content: "\e13b";
}
.icon-video:before {
content: "\e13d";
}
.icon-vimeo:before {
content: "\e13f";
}
.icon-vimeo-2:before {
content: "\e13e";
}
.icon-volume:before {
content: "\e141";
}
.icon-volume-mute:before {
content: "\e140";
}
.icon-wand:before {
content: "\e142";
}
.icon-warning:before {
content: "\e144";
}
.icon-warning-2:before {
content: "\e143";
}
.icon-windows:before {
content: "\e145";
}
.icon-wireless:before {
content: "\e146";
}
.icon-wordpress:before {
content: "\e148";
}
.icon-wordpress-2:before {
content: "\e147";
}
.icon-wrench:before {
content: "\e149";
}
.icon-x:before {
content: "\d7";
}
.icon-x-2:before {
content: "\2297";
}
.icon-x-2-stroke:before {
content: "\e14a";
}
.icon-xing:before {
content: "\e14b";
}
.icon-yahoo:before {
content: "\e14d";
}
.icon-yahoo-2:before {
content: "\e14c";
}
.icon-youtube:before {
content: "\e14f";
}
.icon-youtube-2:before {
content: "\e14e";
}
/*
* Main Stylesheet
*
* @copyright Copyright (c) 2012 rocksolidthemes.com
* @license https://rocksolidthemes.com/agb No free usage allowed
*/
/* ===========================================
* # Index: The structure of this stylesheet
*
* - Imports (Sass only)
* - Fonts
* - Basic settings (Sass only)
* - Colors (Sass only)
* - General
* - Buttons
* - Wrapper elements
* - Layout in order of appearance in HTML
* - Content
* - Forms
* - Content elements
* - Modules (Search, FAQ, News, Events, Comments)
* - Sidebar / Widgets
* - Footer
* - Slider
* - Grid (design + production helper)
* ======================================== */
/* ===========================================
* Fonts
* ======================================== */
@font-face {
font-family: "RockSolid Icons";
src: url("../../files/tao/fonts/rocksolid-icons.eot");
src: url("../../files/tao/fonts/rocksolid-icons.eot?#iefix") format('eot'), url("../../files/tao/fonts/rocksolid-icons.woff") format('woff'), url("../../files/tao/fonts/rocksolid-icons.ttf") format('truetype'), url("../../files/tao/fonts/rocksolid-icons.svg") format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lato";
font-weight: 300;
font-style: normal;
src: url("../../files/tao/fonts/lato-300.woff2") format("woff2");
}
@font-face {
font-family: "Lato";
font-weight: 400;
font-style: normal;
src: url("../../files/tao/fonts/lato-400.woff2") format("woff2");
}
@font-face {
font-family: "Lato";
font-weight: 700;
font-style: normal;
src: url("../../files/tao/fonts/lato-700.woff2") format("woff2");
}
/* ===========================================
* General
* ======================================== */
:root {
--main-padding-x: 2.5rem;
--safe-area-left: 0px;
--safe-area-right: 0px;
--safe-area-top: 0px;
--safe-area-bottom: 0px;
--page-padding-left: calc(var(--safe-area-left) + var(--main-padding-x));
--page-padding-right: calc(var(--safe-area-right) + var(--main-padding-x));
--page-inner-width: calc(100% - var(--page-padding-left) - var(--page-padding-right));
}
@media screen and (max-width: 1300px) {
:root {
--main-padding-x: 3.7037%;
}
}
@media screen and (max-width: 1100px) {
:root {
--main-padding-x: 5.55556%;
}
}
@supports (padding: calc(constant(safe-area-inset-left, 0px) / 1.5)) {
:root {
/* Non-standard iOS 11.1 syntax */
--safe-area-left: calc(constant(safe-area-inset-left, 0px) / 1.5);
--safe-area-right: calc(constant(safe-area-inset-right, 0px) / 1.5);
--safe-area-top: constant(safe-area-inset-top, 0px);
--safe-area-bottom: constant(safe-area-inset-bottom, 0px);
}
}
@supports (padding: calc(max(0px, env(safe-area-inset-left, 0px) - 14px))) and (padding: calc(max(0px, 1px))) {
:root {
/* W3C standard and iOS 11.2 syntax */
--safe-area-left: calc(max(0px, env(safe-area-inset-left, 0px) - 14px));
--safe-area-right: calc(max(0px, env(safe-area-inset-right, 0px) - 14px));
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
}
}
html {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 1.3rem/1.5625 Jost, sans-serif;
color: #555555;
-webkit-tap-highlight-color: #00a4b7;
}
@media screen and (max-width: 900px) {
html {
font-size: 1.1rem;
}
}
body {
background: #ffffff none 50% 0 no-repeat scroll;
background-size: auto;
}
body[class^="icon-"]:before,
body[class*=" icon-"]:before {
/* Ignore icon classes on the body element */
content: none;
}
body.background-variation-1 {
background: url("../../files/tao/img/demo/background-1.jpg") 50% 0 no-repeat;
background-attachment: fixed;
}
body.background-variation-2 {
background: url("../../files/tao/img/demo/background-10.jpg") 50% 0 no-repeat;
background-size: cover;
background-attachment: fixed;
}
* {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.rs-columns {
clear: both;
display: inline-block;
vertical-align: top;
width: 100%;
}
.rs-column {
float: left;
width: 100%;
margin-top: 6.25%;
margin-right: 6.25%;
}
.rs-column.-large-first {
clear: left;
}
.rs-column.-large-last {
margin-right: -5px;
}
.rs-column.-large-first-row {
margin-top: 0;
}
.rs-column.-large-col-1-1 {
width: 100%;
}
.rs-column.-large-col-2-1 {
width: 46.875%;
}
.rs-column.-large-col-2-2 {
width: 100%;
}
.rs-column.-large-col-3-1 {
width: 29.16667%;
}
.rs-column.-large-col-3-2 {
width: 64.58333%;
}
.rs-column.-large-col-3-3 {
width: 100%;
}
.rs-column.-large-col-4-1 {
width: 20.3125%;
}
.rs-column.-large-col-4-2 {
width: 46.875%;
}
.rs-column.-large-col-4-3 {
width: 73.4375%;
}
.rs-column.-large-col-4-4 {
width: 100%;
}
.rs-column.-large-col-5-1 {
width: 15%;
}
.rs-column.-large-col-5-2 {
width: 36.25%;
}
.rs-column.-large-col-5-3 {
width: 57.5%;
}
.rs-column.-large-col-5-4 {
width: 78.75%;
}
.rs-column.-large-col-5-5 {
width: 100%;
}
.rs-column.-large-col-6-1 {
width: 11.45833%;
}
.rs-column.-large-col-6-2 {
width: 29.16667%;
}
.rs-column.-large-col-6-3 {
width: 46.875%;
}
.rs-column.-large-col-6-4 {
width: 64.58333%;
}
.rs-column.-large-col-6-5 {
width: 82.29167%;
}
.rs-column.-large-col-6-6 {
width: 100%;
}
.rs-column.-large-col-7-1 {
width: 8.92857%;
}
.rs-column.-large-col-7-2 {
width: 24.10714%;
}
.rs-column.-large-col-7-3 {
width: 39.28571%;
}
.rs-column.-large-col-7-4 {
width: 54.46429%;
}
.rs-column.-large-col-7-5 {
width: 69.64286%;
}
.rs-column.-large-col-7-6 {
width: 84.82143%;
}
.rs-column.-large-col-7-7 {
width: 100%;
}
.tao-no-sidebar .rs-column,
.mega-dropdown .rs-column,
.page-footer .rs-column {
margin-top: 4%;
margin-right: 4%;
}
.tao-no-sidebar .rs-column.-large-last,
.mega-dropdown .rs-column.-large-last,
.page-footer .rs-column.-large-last {
margin-right: -5px;
}
.tao-no-sidebar .rs-column.-large-first-row,
.mega-dropdown .rs-column.-large-first-row,
.page-footer .rs-column.-large-first-row {
margin-top: 0;
}
.tao-no-sidebar .rs-column.-large-col-1-1,
.mega-dropdown .rs-column.-large-col-1-1,
.page-footer .rs-column.-large-col-1-1 {
width: 100%;
}
.tao-no-sidebar .rs-column.-large-col-2-1,
.mega-dropdown .rs-column.-large-col-2-1,
.page-footer .rs-column.-large-col-2-1 {
width: 48%;
}
.tao-no-sidebar .rs-column.-large-col-2-2,
.mega-dropdown .rs-column.-large-col-2-2,
.page-footer .rs-column.-large-col-2-2 {
width: 100%;
}
.tao-no-sidebar .rs-column.-large-col-3-1,
.mega-dropdown .rs-column.-large-col-3-1,
.page-footer .rs-column.-large-col-3-1 {
width: 30.66667%;
}
.tao-no-sidebar .rs-column.-large-col-3-2,
.mega-dropdown .rs-column.-large-col-3-2,
.page-footer .rs-column.-large-col-3-2 {
width: 65.33333%;
}
.tao-no-sidebar .rs-column.-large-col-3-3,
.mega-dropdown .rs-column.-large-col-3-3,
.page-footer .rs-column.-large-col-3-3 {
width: 100.0%;
}
.tao-no-sidebar .rs-column.-large-col-4-1,
.mega-dropdown .rs-column.-large-col-4-1,
.page-footer .rs-column.-large-col-4-1 {
width: 22%;
}
.tao-no-sidebar .rs-column.-large-col-4-2,
.mega-dropdown .rs-column.-large-col-4-2,
.page-footer .rs-column.-large-col-4-2 {
width: 48%;
}
.tao-no-sidebar .rs-column.-large-col-4-3,
.mega-dropdown .rs-column.-large-col-4-3,
.page-footer .rs-column.-large-col-4-3 {
width: 74%;
}
.tao-no-sidebar .rs-column.-large-col-4-4,
.mega-dropdown .rs-column.-large-col-4-4,
.page-footer .rs-column.-large-col-4-4 {
width: 100%;
}
.tao-no-sidebar .rs-column.-large-col-5-1,
.mega-dropdown .rs-column.-large-col-5-1,
.page-footer .rs-column.-large-col-5-1 {
width: 16.8%;
}
.tao-no-sidebar .rs-column.-large-col-5-2,
.mega-dropdown .rs-column.-large-col-5-2,
.page-footer .rs-column.-large-col-5-2 {
width: 37.6%;
}
.tao-no-sidebar .rs-column.-large-col-5-3,
.mega-dropdown .rs-column.-large-col-5-3,
.page-footer .rs-column.-large-col-5-3 {
width: 58.4%;
}
.tao-no-sidebar .rs-column.-large-col-5-4,
.mega-dropdown .rs-column.-large-col-5-4,
.page-footer .rs-column.-large-col-5-4 {
width: 79.2%;
}
.tao-no-sidebar .rs-column.-large-col-5-5,
.mega-dropdown .rs-column.-large-col-5-5,
.page-footer .rs-column.-large-col-5-5 {
width: 100.0%;
}
.tao-no-sidebar .rs-column.-large-col-6-1,
.mega-dropdown .rs-column.-large-col-6-1,
.page-footer .rs-column.-large-col-6-1 {
width: 13.33333%;
}
.tao-no-sidebar .rs-column.-large-col-6-2,
.mega-dropdown .rs-column.-large-col-6-2,
.page-footer .rs-column.-large-col-6-2 {
width: 30.66667%;
}
.tao-no-sidebar .rs-column.-large-col-6-3,
.mega-dropdown .rs-column.-large-col-6-3,
.page-footer .rs-column.-large-col-6-3 {
width: 48.0%;
}
.tao-no-sidebar .rs-column.-large-col-6-4,
.mega-dropdown .rs-column.-large-col-6-4,
.page-footer .rs-column.-large-col-6-4 {
width: 65.33333%;
}
.tao-no-sidebar .rs-column.-large-col-6-5,
.mega-dropdown .rs-column.-large-col-6-5,
.page-footer .rs-column.-large-col-6-5 {
width: 82.66667%;
}
.tao-no-sidebar .rs-column.-large-col-6-6,
.mega-dropdown .rs-column.-large-col-6-6,
.page-footer .rs-column.-large-col-6-6 {
width: 100%;
}
.tao-no-sidebar .rs-column.-large-col-7-1,
.mega-dropdown .rs-column.-large-col-7-1,
.page-footer .rs-column.-large-col-7-1 {
width: 10.85714%;
}
.tao-no-sidebar .rs-column.-large-col-7-2,
.mega-dropdown .rs-column.-large-col-7-2,
.page-footer .rs-column.-large-col-7-2 {
width: 25.71429%;
}
.tao-no-sidebar .rs-column.-large-col-7-3,
.mega-dropdown .rs-column.-large-col-7-3,
.page-footer .rs-column.-large-col-7-3 {
width: 40.57143%;
}
.tao-no-sidebar .rs-column.-large-col-7-4,
.mega-dropdown .rs-column.-large-col-7-4,
.page-footer .rs-column.-large-col-7-4 {
width: 55.42857%;
}
.tao-no-sidebar .rs-column.-large-col-7-5,
.mega-dropdown .rs-column.-large-col-7-5,
.page-footer .rs-column.-large-col-7-5 {
width: 70.28571%;
}
.tao-no-sidebar .rs-column.-large-col-7-6,
.mega-dropdown .rs-column.-large-col-7-6,
.page-footer .rs-column.-large-col-7-6 {
width: 85.14286%;
}
.tao-no-sidebar .rs-column.-large-col-7-7,
.mega-dropdown .rs-column.-large-col-7-7,
.page-footer .rs-column.-large-col-7-7 {
width: 100%;
}
@media screen and (max-width: 1100px) {
.rs-column,
.tao-no-sidebar .rs-column,
.mega-dropdown .rs-column,
.page-footer .rs-column {
margin-top: 6.25%;
margin-right: 6.25%;
}
.rs-column.-large-first,
.tao-no-sidebar .rs-column.-large-first,
.mega-dropdown .rs-column.-large-first,
.page-footer .rs-column.-large-first {
clear: none;
}
.rs-column.-large-last,
.tao-no-sidebar .rs-column.-large-last,
.mega-dropdown .rs-column.-large-last,
.page-footer .rs-column.-large-last {
margin-right: 6.25%;
}
.rs-column.-large-first-row,
.tao-no-sidebar .rs-column.-large-first-row,
.mega-dropdown .rs-column.-large-first-row,
.page-footer .rs-column.-large-first-row {
margin-top: 6.25%;
}
.rs-column.-medium-first,
.tao-no-sidebar .rs-column.-medium-first,
.mega-dropdown .rs-column.-medium-first,
.page-footer .rs-column.-medium-first {
clear: left;
}
.rs-column.-medium-last,
.tao-no-sidebar .rs-column.-medium-last,
.mega-dropdown .rs-column.-medium-last,
.page-footer .rs-column.-medium-last {
margin-right: -5px;
}
.rs-column.-medium-first-row,
.tao-no-sidebar .rs-column.-medium-first-row,
.mega-dropdown .rs-column.-medium-first-row,
.page-footer .rs-column.-medium-first-row {
margin-top: 0;
}
.rs-column.-medium-col-1-1,
.tao-no-sidebar .rs-column.-medium-col-1-1,
.mega-dropdown .rs-column.-medium-col-1-1,
.page-footer .rs-column.-medium-col-1-1 {
width: 100%;
}
.rs-column.-medium-col-2-1,
.tao-no-sidebar .rs-column.-medium-col-2-1,
.mega-dropdown .rs-column.-medium-col-2-1,
.page-footer .rs-column.-medium-col-2-1 {
width: 46.875%;
}
.rs-column.-medium-col-2-2,
.tao-no-sidebar .rs-column.-medium-col-2-2,
.mega-dropdown .rs-column.-medium-col-2-2,
.page-footer .rs-column.-medium-col-2-2 {
width: 100%;
}
.rs-column.-medium-col-3-1,
.tao-no-sidebar .rs-column.-medium-col-3-1,
.mega-dropdown .rs-column.-medium-col-3-1,
.page-footer .rs-column.-medium-col-3-1 {
width: 29.16667%;
}
.rs-column.-medium-col-3-2,
.tao-no-sidebar .rs-column.-medium-col-3-2,
.mega-dropdown .rs-column.-medium-col-3-2,
.page-footer .rs-column.-medium-col-3-2 {
width: 64.58333%;
}
.rs-column.-medium-col-3-3,
.tao-no-sidebar .rs-column.-medium-col-3-3,
.mega-dropdown .rs-column.-medium-col-3-3,
.page-footer .rs-column.-medium-col-3-3 {
width: 100%;
}
.rs-column.-medium-col-4-1,
.tao-no-sidebar .rs-column.-medium-col-4-1,
.mega-dropdown .rs-column.-medium-col-4-1,
.page-footer .rs-column.-medium-col-4-1 {
width: 20.3125%;
}
.rs-column.-medium-col-4-2,
.tao-no-sidebar .rs-column.-medium-col-4-2,
.mega-dropdown .rs-column.-medium-col-4-2,
.page-footer .rs-column.-medium-col-4-2 {
width: 46.875%;
}
.rs-column.-medium-col-4-3,
.tao-no-sidebar .rs-column.-medium-col-4-3,
.mega-dropdown .rs-column.-medium-col-4-3,
.page-footer .rs-column.-medium-col-4-3 {
width: 73.4375%;
}
.rs-column.-medium-col-4-4,
.tao-no-sidebar .rs-column.-medium-col-4-4,
.mega-dropdown .rs-column.-medium-col-4-4,
.page-footer .rs-column.-medium-col-4-4 {
width: 100%;
}
.rs-column.-medium-col-5-1,
.tao-no-sidebar .rs-column.-medium-col-5-1,
.mega-dropdown .rs-column.-medium-col-5-1,
.page-footer .rs-column.-medium-col-5-1 {
width: 15%;
}
.rs-column.-medium-col-5-2,
.tao-no-sidebar .rs-column.-medium-col-5-2,
.mega-dropdown .rs-column.-medium-col-5-2,
.page-footer .rs-column.-medium-col-5-2 {
width: 36.25%;
}
.rs-column.-medium-col-5-3,
.tao-no-sidebar .rs-column.-medium-col-5-3,
.mega-dropdown .rs-column.-medium-col-5-3,
.page-footer .rs-column.-medium-col-5-3 {
width: 57.5%;
}
.rs-column.-medium-col-5-4,
.tao-no-sidebar .rs-column.-medium-col-5-4,
.mega-dropdown .rs-column.-medium-col-5-4,
.page-footer .rs-column.-medium-col-5-4 {
width: 78.75%;
}
.rs-column.-medium-col-5-5,
.tao-no-sidebar .rs-column.-medium-col-5-5,
.mega-dropdown .rs-column.-medium-col-5-5,
.page-footer .rs-column.-medium-col-5-5 {
width: 100%;
}
.rs-column.-medium-col-6-1,
.tao-no-sidebar .rs-column.-medium-col-6-1,
.mega-dropdown .rs-column.-medium-col-6-1,
.page-footer .rs-column.-medium-col-6-1 {
width: 11.45833%;
}
.rs-column.-medium-col-6-2,
.tao-no-sidebar .rs-column.-medium-col-6-2,
.mega-dropdown .rs-column.-medium-col-6-2,
.page-footer .rs-column.-medium-col-6-2 {
width: 29.16667%;
}
.rs-column.-medium-col-6-3,
.tao-no-sidebar .rs-column.-medium-col-6-3,
.mega-dropdown .rs-column.-medium-col-6-3,
.page-footer .rs-column.-medium-col-6-3 {
width: 46.875%;
}
.rs-column.-medium-col-6-4,
.tao-no-sidebar .rs-column.-medium-col-6-4,
.mega-dropdown .rs-column.-medium-col-6-4,
.page-footer .rs-column.-medium-col-6-4 {
width: 64.58333%;
}
.rs-column.-medium-col-6-5,
.tao-no-sidebar .rs-column.-medium-col-6-5,
.mega-dropdown .rs-column.-medium-col-6-5,
.page-footer .rs-column.-medium-col-6-5 {
width: 82.29167%;
}
.rs-column.-medium-col-6-6,
.tao-no-sidebar .rs-column.-medium-col-6-6,
.mega-dropdown .rs-column.-medium-col-6-6,
.page-footer .rs-column.-medium-col-6-6 {
width: 100%;
}
.rs-column.-medium-col-7-1,
.tao-no-sidebar .rs-column.-medium-col-7-1,
.mega-dropdown .rs-column.-medium-col-7-1,
.page-footer .rs-column.-medium-col-7-1 {
width: 8.92857%;
}
.rs-column.-medium-col-7-2,
.tao-no-sidebar .rs-column.-medium-col-7-2,
.mega-dropdown .rs-column.-medium-col-7-2,
.page-footer .rs-column.-medium-col-7-2 {
width: 24.10714%;
}
.rs-column.-medium-col-7-3,
.tao-no-sidebar .rs-column.-medium-col-7-3,
.mega-dropdown .rs-column.-medium-col-7-3,
.page-footer .rs-column.-medium-col-7-3 {
width: 39.28571%;
}
.rs-column.-medium-col-7-4,
.tao-no-sidebar .rs-column.-medium-col-7-4,
.mega-dropdown .rs-column.-medium-col-7-4,
.page-footer .rs-column.-medium-col-7-4 {
width: 54.46429%;
}
.rs-column.-medium-col-7-5,
.tao-no-sidebar .rs-column.-medium-col-7-5,
.mega-dropdown .rs-column.-medium-col-7-5,
.page-footer .rs-column.-medium-col-7-5 {
width: 69.64286%;
}
.rs-column.-medium-col-7-6,
.tao-no-sidebar .rs-column.-medium-col-7-6,
.mega-dropdown .rs-column.-medium-col-7-6,
.page-footer .rs-column.-medium-col-7-6 {
width: 84.82143%;
}
.rs-column.-medium-col-7-7,
.tao-no-sidebar .rs-column.-medium-col-7-7,
.mega-dropdown .rs-column.-medium-col-7-7,
.page-footer .rs-column.-medium-col-7-7 {
width: 100%;
}
}
@media screen and (max-width: 900px) {
.rs-column,
.tao-no-sidebar .rs-column,
.page-footer .rs-column {
margin-right: 6.25%;
}
.rs-column.-medium-first,
.tao-no-sidebar .rs-column.-medium-first,
.page-footer .rs-column.-medium-first {
clear: none;
}
.rs-column.-medium-last,
.tao-no-sidebar .rs-column.-medium-last,
.page-footer .rs-column.-medium-last {
margin-right: 6.25%;
}
.rs-column.-medium-first-row,
.tao-no-sidebar .rs-column.-medium-first-row,
.page-footer .rs-column.-medium-first-row {
margin-top: 6.25%;
}
.rs-column.-small-first,
.tao-no-sidebar .rs-column.-small-first,
.page-footer .rs-column.-small-first {
clear: left;
}
.rs-column.-small-last,
.tao-no-sidebar .rs-column.-small-last,
.page-footer .rs-column.-small-last {
margin-right: -5px;
}
.rs-column.-small-first-row,
.tao-no-sidebar .rs-column.-small-first-row,
.page-footer .rs-column.-small-first-row {
margin-top: 0;
}
.rs-column.-small-col-1-1,
.tao-no-sidebar .rs-column.-small-col-1-1,
.page-footer .rs-column.-small-col-1-1 {
width: 100%;
}
.rs-column.-small-col-2-1,
.tao-no-sidebar .rs-column.-small-col-2-1,
.page-footer .rs-column.-small-col-2-1 {
width: 46.875%;
}
.rs-column.-small-col-2-2,
.tao-no-sidebar .rs-column.-small-col-2-2,
.page-footer .rs-column.-small-col-2-2 {
width: 100%;
}
.rs-column.-small-col-3-1,
.tao-no-sidebar .rs-column.-small-col-3-1,
.page-footer .rs-column.-small-col-3-1 {
width: 29.16667%;
}
.rs-column.-small-col-3-2,
.tao-no-sidebar .rs-column.-small-col-3-2,
.page-footer .rs-column.-small-col-3-2 {
width: 64.58333%;
}
.rs-column.-small-col-3-3,
.tao-no-sidebar .rs-column.-small-col-3-3,
.page-footer .rs-column.-small-col-3-3 {
width: 100%;
}
.rs-column.-small-col-4-1,
.tao-no-sidebar .rs-column.-small-col-4-1,
.page-footer .rs-column.-small-col-4-1 {
width: 20.3125%;
}
.rs-column.-small-col-4-2,
.tao-no-sidebar .rs-column.-small-col-4-2,
.page-footer .rs-column.-small-col-4-2 {
width: 46.875%;
}
.rs-column.-small-col-4-3,
.tao-no-sidebar .rs-column.-small-col-4-3,
.page-footer .rs-column.-small-col-4-3 {
width: 73.4375%;
}
.rs-column.-small-col-4-4,
.tao-no-sidebar .rs-column.-small-col-4-4,
.page-footer .rs-column.-small-col-4-4 {
width: 100%;
}
.rs-column.-small-col-5-1,
.tao-no-sidebar .rs-column.-small-col-5-1,
.page-footer .rs-column.-small-col-5-1 {
width: 15%;
}
.rs-column.-small-col-5-2,
.tao-no-sidebar .rs-column.-small-col-5-2,
.page-footer .rs-column.-small-col-5-2 {
width: 36.25%;
}
.rs-column.-small-col-5-3,
.tao-no-sidebar .rs-column.-small-col-5-3,
.page-footer .rs-column.-small-col-5-3 {
width: 57.5%;
}
.rs-column.-small-col-5-4,
.tao-no-sidebar .rs-column.-small-col-5-4,
.page-footer .rs-column.-small-col-5-4 {
width: 78.75%;
}
.rs-column.-small-col-5-5,
.tao-no-sidebar .rs-column.-small-col-5-5,
.page-footer .rs-column.-small-col-5-5 {
width: 100%;
}
.rs-column.-small-col-6-1,
.tao-no-sidebar .rs-column.-small-col-6-1,
.page-footer .rs-column.-small-col-6-1 {
width: 11.45833%;
}
.rs-column.-small-col-6-2,
.tao-no-sidebar .rs-column.-small-col-6-2,
.page-footer .rs-column.-small-col-6-2 {
width: 29.16667%;
}
.rs-column.-small-col-6-3,
.tao-no-sidebar .rs-column.-small-col-6-3,
.page-footer .rs-column.-small-col-6-3 {
width: 46.875%;
}
.rs-column.-small-col-6-4,
.tao-no-sidebar .rs-column.-small-col-6-4,
.page-footer .rs-column.-small-col-6-4 {
width: 64.58333%;
}
.rs-column.-small-col-6-5,
.tao-no-sidebar .rs-column.-small-col-6-5,
.page-footer .rs-column.-small-col-6-5 {
width: 82.29167%;
}
.rs-column.-small-col-6-6,
.tao-no-sidebar .rs-column.-small-col-6-6,
.page-footer .rs-column.-small-col-6-6 {
width: 100%;
}
.rs-column.-small-col-7-1,
.tao-no-sidebar .rs-column.-small-col-7-1,
.page-footer .rs-column.-small-col-7-1 {
width: 8.92857%;
}
.rs-column.-small-col-7-2,
.tao-no-sidebar .rs-column.-small-col-7-2,
.page-footer .rs-column.-small-col-7-2 {
width: 24.10714%;
}
.rs-column.-small-col-7-3,
.tao-no-sidebar .rs-column.-small-col-7-3,
.page-footer .rs-column.-small-col-7-3 {
width: 39.28571%;
}
.rs-column.-small-col-7-4,
.tao-no-sidebar .rs-column.-small-col-7-4,
.page-footer .rs-column.-small-col-7-4 {
width: 54.46429%;
}
.rs-column.-small-col-7-5,
.tao-no-sidebar .rs-column.-small-col-7-5,
.page-footer .rs-column.-small-col-7-5 {
width: 69.64286%;
}
.rs-column.-small-col-7-6,
.tao-no-sidebar .rs-column.-small-col-7-6,
.page-footer .rs-column.-small-col-7-6 {
width: 84.82143%;
}
.rs-column.-small-col-7-7,
.tao-no-sidebar .rs-column.-small-col-7-7,
.page-footer .rs-column.-small-col-7-7 {
width: 100%;
}
}
/* Resetting box model for moo_mediabox and j_colorbox */
#mbCenter,
#colorbox {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
::selection {
background: #00a4b7;
color: #ffffff;
text-shadow: none !important;
}
::-moz-selection {
background: #00a4b7;
color: #ffffff;
text-shadow: none !important;
}
button,
input,
select,
textarea {
font-family: inherit;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #b2b9c4;
border-radius: 0px;
background: #ffffff;
}
table th,
table td {
border: solid #e5e8ee;
border-width: 1px 0 0 1px;
}
table th:first-child,
table td:first-child {
border-left: 0;
}
table > thead > tr:first-child > th,
table > thead > tr:first-child > td,
table > tbody:first-child > tr:first-child > th,
table > tbody:first-child > tr:first-child > td,
table > tfoot:first-child + tbody > tr:first-child > th,
table > tfoot:first-child + tbody > tr:first-child > td {
/* First row of the table */
border-top: 0;
}
table th {
padding: 0.375em 0.625em;
font-weight: bold;
text-align: left;
}
table td {
padding: 0.375em 0.625em;
}
table thead {
background: rgba(0, 0, 0, 0.02);
}
table tfoot td {
font-style: italic;
}
strong,
b {
font-weight: bold;
}
a {
color: #00a4b7;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
a:hover,
a:active {
outline: 0;
}
a.external-link:after {
font: 0.8125em/1 "RockSolid Icons";
content: "\e151";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-left: 0.25em;
}
/* Icon attribute */
*[data-icon]:before,
*[class^="icon-"]:before,
*[class*=" icon-"]:before {
font: 100%/1 "RockSolid Icons";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.25em;
}
*[data-icon]:before {
content: attr(data-icon);
}
*[data-icon].after:before {
content: none;
}
*[data-icon].after:after {
font: 100%/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-left: 0.25em;
}
.clear {
clear: both;
}
.invisible {
position: absolute;
height: 1px !important;
width: 1px !important;
clip: rect(0 0 0 0);
margin: -1px;
padding: 0 !important;
overflow: hidden;
border: 0;
}
.-no-border {
border: 0 !important;
}
.no-margin {
margin: 0 !important;
}
.no-margin-top {
margin-top: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.left {
float: left;
}
.right {
float: right;
}
.margin-top-none {
margin-top: 0 !important;
}
@media screen and (max-width: 900px) {
.margin-top-none {
margin-top: 0 !important;
}
}
.margin-right-none {
margin-right: 0 !important;
}
@media screen and (max-width: 900px) {
.margin-right-none {
margin-right: 0 !important;
}
}
.margin-bottom-none {
margin-bottom: 0 !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-none {
margin-bottom: 0 !important;
}
}
.margin-left-none {
margin-left: 0 !important;
}
@media screen and (max-width: 900px) {
.margin-left-none {
margin-left: 0 !important;
}
}
.padding-top-none {
padding-top: 0 !important;
}
@media screen and (max-width: 900px) {
.padding-top-none {
padding-top: 0 !important;
}
}
.padding-right-none {
padding-right: 0 !important;
}
@media screen and (max-width: 900px) {
.padding-right-none {
padding-right: 0 !important;
}
}
.padding-bottom-none {
padding-bottom: 0 !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-none {
padding-bottom: 0 !important;
}
}
.padding-left-none {
padding-left: 0 !important;
}
@media screen and (max-width: 900px) {
.padding-left-none {
padding-left: 0 !important;
}
}
.margin-top-xxs {
margin-top: 10px !important;
}
@media screen and (max-width: 900px) {
.margin-top-xxs {
margin-top: 5px !important;
}
}
.margin-right-xxs {
margin-right: 10px !important;
}
@media screen and (max-width: 900px) {
.margin-right-xxs {
margin-right: 5px !important;
}
}
.margin-bottom-xxs {
margin-bottom: 10px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-xxs {
margin-bottom: 5px !important;
}
}
.margin-left-xxs {
margin-left: 10px !important;
}
@media screen and (max-width: 900px) {
.margin-left-xxs {
margin-left: 5px !important;
}
}
.padding-top-xxs {
padding-top: 10px !important;
}
@media screen and (max-width: 900px) {
.padding-top-xxs {
padding-top: 5px !important;
}
}
.padding-right-xxs {
padding-right: 10px !important;
}
@media screen and (max-width: 900px) {
.padding-right-xxs {
padding-right: 5px !important;
}
}
.padding-bottom-xxs {
padding-bottom: 10px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-xxs {
padding-bottom: 5px !important;
}
}
.padding-left-xxs {
padding-left: 10px !important;
}
@media screen and (max-width: 900px) {
.padding-left-xxs {
padding-left: 5px !important;
}
}
.margin-top-xs {
margin-top: 25px !important;
}
@media screen and (max-width: 900px) {
.margin-top-xs {
margin-top: 13px !important;
}
}
.margin-right-xs {
margin-right: 25px !important;
}
@media screen and (max-width: 900px) {
.margin-right-xs {
margin-right: 13px !important;
}
}
.margin-bottom-xs {
margin-bottom: 25px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-xs {
margin-bottom: 13px !important;
}
}
.margin-left-xs {
margin-left: 25px !important;
}
@media screen and (max-width: 900px) {
.margin-left-xs {
margin-left: 13px !important;
}
}
.padding-top-xs {
padding-top: 25px !important;
}
@media screen and (max-width: 900px) {
.padding-top-xs {
padding-top: 13px !important;
}
}
.padding-right-xs {
padding-right: 25px !important;
}
@media screen and (max-width: 900px) {
.padding-right-xs {
padding-right: 13px !important;
}
}
.padding-bottom-xs {
padding-bottom: 25px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-xs {
padding-bottom: 13px !important;
}
}
.padding-left-xs {
padding-left: 25px !important;
}
@media screen and (max-width: 900px) {
.padding-left-xs {
padding-left: 13px !important;
}
}
.margin-top-s {
margin-top: 50px !important;
}
@media screen and (max-width: 900px) {
.margin-top-s {
margin-top: 25px !important;
}
}
.margin-right-s {
margin-right: 50px !important;
}
@media screen and (max-width: 900px) {
.margin-right-s {
margin-right: 25px !important;
}
}
.margin-bottom-s {
margin-bottom: 50px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-s {
margin-bottom: 25px !important;
}
}
.margin-left-s {
margin-left: 50px !important;
}
@media screen and (max-width: 900px) {
.margin-left-s {
margin-left: 25px !important;
}
}
.padding-top-s {
padding-top: 50px !important;
}
@media screen and (max-width: 900px) {
.padding-top-s {
padding-top: 25px !important;
}
}
.padding-right-s {
padding-right: 50px !important;
}
@media screen and (max-width: 900px) {
.padding-right-s {
padding-right: 25px !important;
}
}
.padding-bottom-s {
padding-bottom: 50px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-s {
padding-bottom: 25px !important;
}
}
.padding-left-s {
padding-left: 50px !important;
}
@media screen and (max-width: 900px) {
.padding-left-s {
padding-left: 25px !important;
}
}
.margin-top-m {
margin-top: 75px !important;
}
@media screen and (max-width: 900px) {
.margin-top-m {
margin-top: 38px !important;
}
}
.margin-right-m {
margin-right: 75px !important;
}
@media screen and (max-width: 900px) {
.margin-right-m {
margin-right: 38px !important;
}
}
.margin-bottom-m {
margin-bottom: 75px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-m {
margin-bottom: 38px !important;
}
}
.margin-left-m {
margin-left: 75px !important;
}
@media screen and (max-width: 900px) {
.margin-left-m {
margin-left: 38px !important;
}
}
.padding-top-m {
padding-top: 75px !important;
}
@media screen and (max-width: 900px) {
.padding-top-m {
padding-top: 38px !important;
}
}
.padding-right-m {
padding-right: 75px !important;
}
@media screen and (max-width: 900px) {
.padding-right-m {
padding-right: 38px !important;
}
}
.padding-bottom-m {
padding-bottom: 75px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-m {
padding-bottom: 38px !important;
}
}
.padding-left-m {
padding-left: 75px !important;
}
@media screen and (max-width: 900px) {
.padding-left-m {
padding-left: 38px !important;
}
}
.margin-top-l {
margin-top: 100px !important;
}
@media screen and (max-width: 900px) {
.margin-top-l {
margin-top: 50px !important;
}
}
.margin-right-l {
margin-right: 100px !important;
}
@media screen and (max-width: 900px) {
.margin-right-l {
margin-right: 50px !important;
}
}
.margin-bottom-l {
margin-bottom: 100px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-l {
margin-bottom: 50px !important;
}
}
.margin-left-l {
margin-left: 100px !important;
}
@media screen and (max-width: 900px) {
.margin-left-l {
margin-left: 50px !important;
}
}
.padding-top-l {
padding-top: 100px !important;
}
@media screen and (max-width: 900px) {
.padding-top-l {
padding-top: 50px !important;
}
}
.padding-right-l {
padding-right: 100px !important;
}
@media screen and (max-width: 900px) {
.padding-right-l {
padding-right: 50px !important;
}
}
.padding-bottom-l {
padding-bottom: 100px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-l {
padding-bottom: 50px !important;
}
}
.padding-left-l {
padding-left: 100px !important;
}
@media screen and (max-width: 900px) {
.padding-left-l {
padding-left: 50px !important;
}
}
.margin-top-xl {
margin-top: 150px !important;
}
@media screen and (max-width: 900px) {
.margin-top-xl {
margin-top: 75px !important;
}
}
.margin-right-xl {
margin-right: 150px !important;
}
@media screen and (max-width: 900px) {
.margin-right-xl {
margin-right: 75px !important;
}
}
.margin-bottom-xl {
margin-bottom: 150px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-xl {
margin-bottom: 75px !important;
}
}
.margin-left-xl {
margin-left: 150px !important;
}
@media screen and (max-width: 900px) {
.margin-left-xl {
margin-left: 75px !important;
}
}
.padding-top-xl {
padding-top: 150px !important;
}
@media screen and (max-width: 900px) {
.padding-top-xl {
padding-top: 75px !important;
}
}
.padding-right-xl {
padding-right: 150px !important;
}
@media screen and (max-width: 900px) {
.padding-right-xl {
padding-right: 75px !important;
}
}
.padding-bottom-xl {
padding-bottom: 150px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-xl {
padding-bottom: 75px !important;
}
}
.padding-left-xl {
padding-left: 150px !important;
}
@media screen and (max-width: 900px) {
.padding-left-xl {
padding-left: 75px !important;
}
}
.margin-top-xxl {
margin-top: 200px !important;
}
@media screen and (max-width: 900px) {
.margin-top-xxl {
margin-top: 100px !important;
}
}
.margin-right-xxl {
margin-right: 200px !important;
}
@media screen and (max-width: 900px) {
.margin-right-xxl {
margin-right: 100px !important;
}
}
.margin-bottom-xxl {
margin-bottom: 200px !important;
}
@media screen and (max-width: 900px) {
.margin-bottom-xxl {
margin-bottom: 100px !important;
}
}
.margin-left-xxl {
margin-left: 200px !important;
}
@media screen and (max-width: 900px) {
.margin-left-xxl {
margin-left: 100px !important;
}
}
.padding-top-xxl {
padding-top: 200px !important;
}
@media screen and (max-width: 900px) {
.padding-top-xxl {
padding-top: 100px !important;
}
}
.padding-right-xxl {
padding-right: 200px !important;
}
@media screen and (max-width: 900px) {
.padding-right-xxl {
padding-right: 100px !important;
}
}
.padding-bottom-xxl {
padding-bottom: 200px !important;
}
@media screen and (max-width: 900px) {
.padding-bottom-xxl {
padding-bottom: 100px !important;
}
}
.padding-left-xxl {
padding-left: 200px !important;
}
@media screen and (max-width: 900px) {
.padding-left-xxl {
padding-left: 100px !important;
}
}
.font-size-xxs {
font-size: 0.6em !important;
}
@media screen and (max-width: 900px) {
.font-size-xxs {
font-size: 0.8em !important;
}
}
.font-size-xs {
font-size: 0.8em !important;
}
@media screen and (max-width: 900px) {
.font-size-xs {
font-size: 0.9em !important;
}
}
.font-size-s {
font-size: 0.9em !important;
}
@media screen and (max-width: 900px) {
.font-size-s {
font-size: 0.95em !important;
}
}
.font-size-m {
font-size: 1.2em !important;
}
@media screen and (max-width: 900px) {
.font-size-m {
font-size: 1.1em !important;
}
}
.font-size-l {
font-size: 1.5em !important;
}
@media screen and (max-width: 900px) {
.font-size-l {
font-size: 1.25em !important;
}
}
.font-size-xl {
font-size: 2em !important;
}
@media screen and (max-width: 900px) {
.font-size-xl {
font-size: 1.5em !important;
}
}
.font-size-xxl {
font-size: 2.5em !important;
}
@media screen and (max-width: 900px) {
.font-size-xxl {
font-size: 1.75em !important;
}
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.syndication {
margin: 0.75em 0 0 1.25em;
float: right;
}
.syndication a {
margin-left: 0.125em;
}
.mime_icon {
margin-bottom: -0.25em;
}
.download-element {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
.ce_toplink,
.toplink {
overflow: hidden;
margin: 1.5em 0;
}
.ce_toplink:after,
.toplink:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 0;
overflow: visible;
margin: 0 -100% 0 0.625em;
border-top: 1px solid #b2b9c4;
}
.ce_toplink > a:before,
.toplink > a:before {
font: 100%/1 "RockSolid Icons";
content: "\e00c";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.3125em;
}
/* Style for dlh_googlemaps (if you don't use the plugin, you might want to delete this) */
.dlh_googlemap {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.main-content .dlh_googlemap,
.sidebar .dlh_googlemap {
/* Setting the maps max-width to 100% is best practice, since it becomes fluid that way */
max-width: 100%;
}
.main-content .dlh_googlemap img {
max-width: none;
}
hr,
.headline-hr:before,
.headline-hr:after {
clear: both;
height: 0;
overflow: visible;
margin: 2.25em 0;
border: 0;
border-top: 1px solid #b2b9c4;
}
hr.-hr-dotted,
.headline-hr.-hr-dotted:before,
.headline-hr.-hr-dotted:after {
border-top-style: dotted;
border-top-color: #717c8e;
}
hr.-hr-shadow,
.headline-hr.-hr-shadow:before,
.headline-hr.-hr-shadow:after {
height: 8px;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 60%);
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 60%);
background: -o-radial-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 60%);
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 60%);
background-size: 100% 16px;
background-position: 50% -8px;
}
.headline-hr {
overflow: hidden;
}
.headline-hr:before,
.headline-hr:after {
display: inline-block;
vertical-align: middle;
width: 100%;
margin: 0 0.625em 0 calc(-100% - 0.625em);
}
.headline-hr:after {
content: "";
margin: 0 calc(-100% - 0.625em) 0 0.625em;
}
.headline-hr.-centered {
text-align: center;
}
.headline-hr.-centered:before {
content: "";
}
.headline-hr.-align-right {
text-align: right;
}
.headline-hr.-align-right:before {
content: "";
}
.headline-hr.-align-right:after {
content: none;
}
.icon-hr {
display: block;
}
.icon-hr:before {
position: relative;
display: block;
bottom: -0.5em;
width: 1.875em;
margin: 0;
background: #ffffff;
}
.icon-hr.-centered:before {
width: 2.25em;
margin: 0 auto;
text-align: center;
}
.icon-hr.-align-right:before {
margin: 0 0 0 auto;
text-align: right;
}
.icon-hr hr {
margin: 0;
}
.confirmation {
color: #00a4b7;
}
.information {
color: #00a4b7;
}
.warning {
color: #cc0000;
}
p.confirmation,
p.information,
p.warning,
div.confirmation,
div.information,
div.warning,
span.confirmation,
span.information,
span.warning {
position: relative;
display: block;
overflow: hidden;
margin: 1.5625em 0;
padding: 1em 6.25% 1em 12.5%;
border: 1px solid #b2b9c4;
border-radius: 0px;
color: #005f6b;
background: #ffffff;
}
@media screen and (max-width: 900px) {
p.confirmation,
p.information,
p.warning,
div.confirmation,
div.information,
div.warning,
span.confirmation,
span.information,
span.warning {
padding-left: 4em;
}
}
p.confirmation:before,
p.information:before,
p.warning:before,
div.confirmation:before,
div.information:before,
div.warning:before,
span.confirmation:before,
span.information:before,
span.warning:before {
font: 1.5em/1 "RockSolid Icons";
content: "\e044";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 50%;
left: -0.41667em;
width: 1.16667em;
height: 1.16667em;
margin: -1.25em 0 0;
padding: 0.66667em;
border-radius: 100%;
color: #ffffff;
text-align: center;
background: #00a4b7;
}
p.information,
div.information,
span.information {
color: #005f6b;
}
p.information:before,
div.information:before,
span.information:before {
content: "\e0a6";
background: #00a4b7;
}
p.warning,
div.warning,
span.warning {
color: #800000;
}
p.warning:before,
div.warning:before,
span.warning:before {
content: "\e143";
background: #cc0000;
}
p.drop-cap:first-letter,
span.drop-cap {
float: left;
margin: 0.11111em 0.33333em 0 0;
padding: 0.19444em;
border: 1px solid #b2b9c4;
border-radius: 0px;
font-size: 2.25em;
font-weight: normal;
/* Fixes line-height difference between gecko and webkit */
line-height: 0.7;
background: #ffffff;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
}
p.drop-cap:first-letter {
/* IE8 and IE9 calculate em's from the parent element */
margin: 0.25em 0.75em 0 0 \9;
}
code {
padding: 0.14286em 0.35714em;
font-family: "Lucida Console", monospace;
font-size: 0.875em;
line-height: 1.35786;
background-color: #e5e8ee;
border-radius: 0px;
}
pre {
margin: 1.71429em 0;
padding: 0.5em 1em;
display: block;
overflow: auto;
border-radius: 0px;
font-family: "Lucida Console", monospace;
font-size: 0.875em;
line-height: 1.715;
background-color: #e5e8ee;
}
pre .hljs,
pre code {
font-size: 1em;
padding: 0;
line-height: inherit;
background-color: transparent;
}
/* ===========================================
* Buttons
* ======================================== */
button.-secondary, .button.-secondary, input[type="submit"].-secondary, .header-login .formbody input[type=submit],
.header-dropdown > ul input[type=submit],
.pricing-table-plan.-highlighted a,
.feature-box-link.-secondary,
.headline-box-link.-secondary,
button.-tertiary,
.button.-tertiary,
input[type="submit"].-tertiary,
.rotating-boxes-item-content .rotating-boxes-item-link,
.pricing-table-plan a,
.feature-box-link.-tertiary,
.headline-box-link.-tertiary,
button.-quaternary,
.button.-quaternary,
input[type="submit"].-quaternary,
.feature-box-link.-quaternary,
.headline-box-link.-quaternary,
.highlight-box-link,
.feature-box-link,
.headline-box-link,
.footer-bar input[type=submit],
.footer-bar button,
button,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
padding: 0.64286em 1.42857em;
border: 1px solid;
border-color: #008d9e #007684 #005f6b;
border-radius: 0px;
outline: none;
font-size: 0.875em;
line-height: 1.42929;
color: #ffffff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #007684;
background: #00a4b7;
background: -webkit-linear-gradient(#00bbd1, #0096a8);
background: -moz-linear-gradient(#00bbd1, #0096a8);
background: -o-linear-gradient(#00bbd1, #0096a8);
background: linear-gradient(#00bbd1, #0096a8);
box-shadow: inset 0 1px #4cbfcc;
}
button.-secondary:hover, .button.-secondary:hover, input[type="submit"].-secondary:hover, .header-login .formbody input[type=submit]:hover,
.header-dropdown > ul input[type=submit]:hover, button.-tertiary:hover, .button.-tertiary:hover, input[type="submit"].-tertiary:hover, .rotating-boxes-item-content .rotating-boxes-item-link:hover, .pricing-table-plan a:hover, button.-quaternary:hover, .button.-quaternary:hover, input[type="submit"].-quaternary:hover, .highlight-box-link:hover, .feature-box-link:hover, .headline-box-link:hover, .footer-bar input[type=submit]:hover, .footer-bar button:hover, button.-secondary:focus, .button.-secondary:focus, input[type="submit"].-secondary:focus, .header-login .formbody input[type=submit]:focus,
.header-dropdown > ul input[type=submit]:focus,
button.-tertiary:focus,
.button.-tertiary:focus,
input[type="submit"].-tertiary:focus,
.rotating-boxes-item-content .rotating-boxes-item-link:focus,
.pricing-table-plan a:focus,
button.-quaternary:focus,
.button.-quaternary:focus,
input[type="submit"].-quaternary:focus,
.highlight-box-link:focus,
.feature-box-link:focus,
.headline-box-link:focus,
.footer-bar input[type=submit]:focus,
.footer-bar button:focus,
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
border-color: #004951 #003238 #001b1e;
text-decoration: none;
background-image: -webkit-linear-gradient(#00c9e0, #008998);
background-image: -moz-linear-gradient(#00c9e0, #008998);
background-image: -o-linear-gradient(#00c9e0, #008998);
background-image: linear-gradient(#00c9e0, #008998);
}
button.-secondary:active, .button.-secondary:active, input[type="submit"].-secondary:active, .header-login .formbody input[type=submit]:active,
.header-dropdown > ul input[type=submit]:active,
button.-tertiary:active,
.button.-tertiary:active,
input[type="submit"].-tertiary:active,
.rotating-boxes-item-content .rotating-boxes-item-link:active,
.pricing-table-plan a:active,
button.-quaternary:active,
.button.-quaternary:active,
input[type="submit"].-quaternary:active,
.highlight-box-link:active,
.feature-box-link:active,
.headline-box-link:active,
.footer-bar input[type=submit]:active,
.footer-bar button:active,
button:active,
.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background-image: -webkit-linear-gradient(#00b2c6, #009fb2);
background-image: -moz-linear-gradient(#00b2c6, #009fb2);
background-image: -o-linear-gradient(#00b2c6, #009fb2);
background-image: linear-gradient(#00b2c6, #009fb2);
}
#colorbox button.-secondary, #colorbox .button.-secondary, #colorbox input[type="submit"].-secondary, #colorbox .header-login .formbody input[type=submit], .header-login .formbody #colorbox input[type=submit],
#colorbox .header-dropdown > ul input[type=submit],
.header-dropdown > ul #colorbox input[type=submit],
#colorbox button.-tertiary,
#colorbox .button.-tertiary,
#colorbox input[type="submit"].-tertiary,
#colorbox .rotating-boxes-item-content .rotating-boxes-item-link,
.rotating-boxes-item-content #colorbox .rotating-boxes-item-link,
#colorbox .pricing-table-plan a,
.pricing-table-plan #colorbox a,
#colorbox button.-quaternary,
#colorbox .button.-quaternary,
#colorbox input[type="submit"].-quaternary,
#colorbox .highlight-box-link,
#colorbox .feature-box-link,
#colorbox .headline-box-link,
#colorbox .footer-bar input[type=submit],
.footer-bar #colorbox input[type=submit],
#colorbox .footer-bar button,
.footer-bar #colorbox button,
#colorbox button,
#colorbox .button,
#colorbox input[type="submit"],
#colorbox input[type="reset"],
#colorbox input[type="button"] {
/* Fix colorbox close button */
box-shadow: none;
}
button.-quaternary:hover,
button.-quaternary:focus,
.button.-quaternary:hover,
.button.-quaternary:focus,
input[type="submit"].-quaternary:hover,
input[type="submit"].-quaternary:focus {
border-color: currentColor;
}
button.-single,
.button.-single,
input[type="submit"].-single {
margin: 0.75em 0;
}
button.-small,
.button.-small,
input[type="submit"].-small {
padding: 0.41667em 0.83333em;
font-size: 0.75em;
}
button.-secondary, .button.-secondary, input[type="submit"].-secondary, .header-login .formbody input[type=submit],
.header-dropdown > ul input[type=submit],
.pricing-table-plan.-highlighted a,
.feature-box-link.-secondary,
.headline-box-link.-secondary {
border-color: #e2a600 #c89300 #af8100;
color: #ffffff;
text-shadow: 0 -1px 0 #c89300;
background: #fbb900;
background: -webkit-linear-gradient(#ffc216, #ecae00);
background: -moz-linear-gradient(#ffc216, #ecae00);
background: -o-linear-gradient(#ffc216, #ecae00);
background: linear-gradient(#ffc216, #ecae00);
box-shadow: inset 0 1px #fcce4c;
}
button.-secondary:hover, .button.-secondary:hover, input[type="submit"].-secondary:hover, .header-login .formbody input[type=submit]:hover,
.header-dropdown > ul input[type=submit]:hover, .pricing-table-plan.-highlighted a:hover, .feature-box-link.-secondary:hover, .headline-box-link.-secondary:hover, button.-secondary:focus, .button.-secondary:focus, input[type="submit"].-secondary:focus, .header-login .formbody input[type=submit]:focus,
.header-dropdown > ul input[type=submit]:focus,
.pricing-table-plan.-highlighted a:focus,
.feature-box-link.-secondary:focus,
.headline-box-link.-secondary:focus {
border-color: #956e00 #7c5b00 #624800;
background: -webkit-linear-gradient(#ffc625, #dca200);
background: -moz-linear-gradient(#ffc625, #dca200);
background: -o-linear-gradient(#ffc625, #dca200);
background: linear-gradient(#ffc625, #dca200);
}
button.-secondary:active, .button.-secondary:active, input[type="submit"].-secondary:active, .header-login .formbody input[type=submit]:active,
.header-dropdown > ul input[type=submit]:active,
.pricing-table-plan.-highlighted a:active,
.feature-box-link.-secondary:active,
.headline-box-link.-secondary:active {
background: -webkit-linear-gradient(#ffbf0b, #f6b500);
background: -moz-linear-gradient(#ffbf0b, #f6b500);
background: -o-linear-gradient(#ffbf0b, #f6b500);
background: linear-gradient(#ffbf0b, #f6b500);
}
button.-tertiary,
.button.-tertiary,
input[type="submit"].-tertiary,
.rotating-boxes-item-content .rotating-boxes-item-link,
.pricing-table-plan a,
.feature-box-link.-tertiary,
.headline-box-link.-tertiary {
border-color: #c8c8c8 #bbbbbb #aeaeae;
color: #555555;
text-shadow: 0 -1px 0 #d5d5d5;
background: #eeeeee;
background: -webkit-linear-gradient(#fbfbfb, #e6e6e6);
background: -moz-linear-gradient(#fbfbfb, #e6e6e6);
background: -o-linear-gradient(#fbfbfb, #e6e6e6);
background: linear-gradient(#fbfbfb, #e6e6e6);
box-shadow: none;
}
button.-tertiary:hover,
.button.-tertiary:hover,
input[type="submit"].-tertiary:hover,
.rotating-boxes-item-content .rotating-boxes-item-link:hover,
.pricing-table-plan a:hover,
.feature-box-link.-tertiary:hover,
.headline-box-link.-tertiary:hover,
button.-tertiary:focus,
.button.-tertiary:focus,
input[type="submit"].-tertiary:focus,
.rotating-boxes-item-content .rotating-boxes-item-link:focus,
.pricing-table-plan a:focus,
.feature-box-link.-tertiary:focus,
.headline-box-link.-tertiary:focus {
border-color: #bbbbbb #aeaeae #a2a2a2;
background: -webkit-linear-gradient(#ffffff, #dfdfdf);
background: -moz-linear-gradient(#ffffff, #dfdfdf);
background: -o-linear-gradient(#ffffff, #dfdfdf);
background: linear-gradient(#ffffff, #dfdfdf);
}
button.-tertiary:active,
.button.-tertiary:active,
input[type="submit"].-tertiary:active,
.rotating-boxes-item-content .rotating-boxes-item-link:active,
.pricing-table-plan a:active,
.feature-box-link.-tertiary:active,
.headline-box-link.-tertiary:active {
background: -webkit-linear-gradient(#f6f6f6, #ebebeb);
background: -moz-linear-gradient(#f6f6f6, #ebebeb);
background: -o-linear-gradient(#f6f6f6, #ebebeb);
background: linear-gradient(#f6f6f6, #ebebeb);
}
button.-quaternary,
.button.-quaternary,
input[type="submit"].-quaternary,
.feature-box-link.-quaternary,
.headline-box-link.-quaternary {
border: 2px solid #555555;
border-color: currentColor;
border-radius: 6px;
color: inherit;
text-shadow: none;
background: none;
box-shadow: none;
}
button.-quaternary:after,
.button.-quaternary:after,
input[type="submit"].-quaternary:after,
.feature-box-link.-quaternary:after,
.headline-box-link.-quaternary:after {
content: "";
position: absolute;
top: 100%;
right: 0;
bottom: 0;
left: 0;
background: currentColor;
opacity: 0.15;
-webkit-transition: top 0.4s ease-in;
-moz-transition: top 0.4s ease-in;
-o-transition: top 0.4s ease-in;
transition: top 0.4s ease-in;
}
button.-quaternary:hover,
.button.-quaternary:hover,
input[type="submit"].-quaternary:hover,
.feature-box-link.-quaternary:hover,
.headline-box-link.-quaternary:hover,
button.-quaternary:focus,
.button.-quaternary:focus,
input[type="submit"].-quaternary:focus,
.feature-box-link.-quaternary:focus,
.headline-box-link.-quaternary:focus {
background: none;
}
button.-quaternary:hover:after,
.button.-quaternary:hover:after,
input[type="submit"].-quaternary:hover:after,
.feature-box-link.-quaternary:hover:after,
.headline-box-link.-quaternary:hover:after,
button.-quaternary:focus:after,
.button.-quaternary:focus:after,
input[type="submit"].-quaternary:focus:after,
.feature-box-link.-quaternary:focus:after,
.headline-box-link.-quaternary:focus:after {
top: 0;
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
/* ===========================================
* Wrapper Elements
* ======================================== */
.header-bar-inner,
.header-navigation-inner,
.content-wrapper {
max-width: 1300px;
margin-right: auto;
margin-left: auto;
}
.centered-wrapper-inner,
.info-map-boxes {
max-width: 1203.7037037037px;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 1300px) {
.centered-wrapper-inner,
.info-map-boxes {
max-width: none;
margin-right: 3.7037%;
margin-right: var(--page-padding-right);
margin-left: 3.7037%;
margin-left: var(--page-padding-left);
}
}
@media screen and (max-width: 1100px) {
.centered-wrapper-inner,
.info-map-boxes {
margin-right: 5.55556%;
margin-right: var(--page-padding-right);
margin-left: 5.55556%;
margin-left: var(--page-padding-left);
}
}
.page {
zoom: 1;
position: relative;
margin: 0 auto;
padding-top: var(--safe-area-top);
padding-bottom: var(--safe-area-bottom);
background: #ffffff;
}
.page:before {
content: "";
display: table;
}
.page:after {
content: "";
display: table;
clear: both;
}
.tao-boxed .page {
max-width: 1300px;
border: solid #b2b9c4;
border-width: 0 1px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1300px) {
.page {
}
.tao-boxed .page {
border: 0;
box-shadow: none;
}
}
.tao-not-boxed .page {
max-width: none;
border: 0;
box-shadow: none;
}
/* ===========================================
* Layout in order of appearance in HTML
* ======================================== */
.page-header {
position: relative;
z-index: 20;
}
.page-header.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.header-bar {
zoom: 1;
border-bottom: 1px solid #e5e8ee;
font-size: 0.8125em;
background: #f5f5f5;
}
.header-bar:before {
content: "";
display: table;
}
.header-bar:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.header-bar {
display: none;
}
}
.tao-boxed .header-bar {
max-width: 1300px;
margin-right: auto;
margin-left: auto;
border-right: 1px solid #b2b9c4;
border-left: 1px solid #b2b9c4;
}
@media screen and (max-width: 1300px) {
.header-bar {
}
.tao-boxed .header-bar {
border-right: 0;
border-left: 0;
}
}
.tao-not-boxed .header-bar {
max-width: none;
border-right: 0;
border-left: 0;
}
.header-bar-inner {
color: #555555;
}
@media screen and (max-width: 1100px) {
.header-bar-inner {
padding-right: 5.55556%;
padding-right: var(--page-padding-right);
padding-left: 5.55556%;
padding-left: var(--page-padding-left);
}
}
.header-links {
float: left;
margin: 0 0 0 3.7037%;
margin-left: var(--page-padding-left);
padding: 0.61538em 0;
}
@media screen and (max-width: 1100px) {
.header-links {
float: none;
margin-left: 0;
}
}
.header-links.-right {
float: right;
margin: 0 3.7037% 0 0;
margin-right: var(--page-padding-right);
}
@media screen and (max-width: 1100px) {
.header-links.-right {
float: none;
margin-right: 0;
}
}
.header-links.-right a {
margin-right: 0;
margin-left: 1em;
}
.header-links li {
display: inline;
}
.header-links a {
display: inline-block;
color: inherit;
margin-right: 1em;
}
.header-links .icon-links-label {
color: inherit;
}
.header-links.-secondary {
padding-top: 0;
padding-bottom: 0;
}
@media screen and (max-width: 1100px) {
.header-links.-secondary > li:first-child > a {
margin-left: -0.625em;
}
}
.header-links.-secondary a {
float: left;
position: relative;
width: 2.76923em;
height: 2.76923em;
overflow: hidden;
margin: 0;
line-height: 0;
/* Fixes Chrome bug */
letter-spacing: -1em;
color: #555555;
text-indent: -99em;
text-decoration: none;
}
.header-links.-secondary a:before,
.header-links.-secondary a:after {
font: 1.15385em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 0;
left: 0;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 0.06667em;
line-height: 2.40067;
letter-spacing: 0;
text-align: center;
background: #f5f5f5;
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
.header-links.-secondary a:after {
top: 100%;
color: #ffffff;
background: transparent;
}
.header-links.-secondary a:hover:before,
.header-links.-secondary a:focus:before {
top: -100%;
}
.header-links.-secondary a:hover:after,
.header-links.-secondary a:focus:after {
top: 0;
}
.header-login,
.header-dropdown {
position: relative;
float: right;
z-index: 4;
margin: 0.30769em 0.76923em -0.15385em 0;
}
@media screen and (max-width: 1100px) {
.header-login,
.header-dropdown {
margin-right: -0.61538em;
margin-left: 1em;
}
}
.header-login > h1, .header-login > h2, .header-login > h3, .header-login > h4, .header-login > h5, .header-login > h6,
.header-dropdown > h1,
.header-dropdown > h2,
.header-dropdown > h3,
.header-dropdown > h4,
.header-dropdown > h5,
.header-dropdown > h6 {
position: relative;
z-index: 1;
margin: 0;
padding: 0.38462em 0.76923em 0.61538em;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 0px 0px 0 0;
outline: none;
font-weight: normal;
font-size: inherit;
line-height: 1.5;
color: inherit;
cursor: pointer;
}
.header-login > h1:hover, .header-login > h1:focus, .header-login > h2:hover, .header-login > h2:focus, .header-login > h3:hover, .header-login > h3:focus, .header-login > h4:hover, .header-login > h4:focus, .header-login > h5:hover, .header-login > h5:focus, .header-login > h6:hover, .header-login > h6:focus,
.header-dropdown > h1:hover,
.header-dropdown > h1:focus,
.header-dropdown > h2:hover,
.header-dropdown > h2:focus,
.header-dropdown > h3:hover,
.header-dropdown > h3:focus,
.header-dropdown > h4:hover,
.header-dropdown > h4:focus,
.header-dropdown > h5:hover,
.header-dropdown > h5:focus,
.header-dropdown > h6:hover,
.header-dropdown > h6:focus {
text-decoration: underline;
}
.header-login > h1:hover:after, .header-login > h1:focus:after, .header-login > h2:hover:after, .header-login > h2:focus:after, .header-login > h3:hover:after, .header-login > h3:focus:after, .header-login > h4:hover:after, .header-login > h4:focus:after, .header-login > h5:hover:after, .header-login > h5:focus:after, .header-login > h6:hover:after, .header-login > h6:focus:after,
.header-dropdown > h1:hover:after,
.header-dropdown > h1:focus:after,
.header-dropdown > h2:hover:after,
.header-dropdown > h2:focus:after,
.header-dropdown > h3:hover:after,
.header-dropdown > h3:focus:after,
.header-dropdown > h4:hover:after,
.header-dropdown > h4:focus:after,
.header-dropdown > h5:hover:after,
.header-dropdown > h5:focus:after,
.header-dropdown > h6:hover:after,
.header-dropdown > h6:focus:after {
text-decoration: none !important;
}
.header-login > h1:after, .header-login > h2:after, .header-login > h3:after, .header-login > h4:after, .header-login > h5:after, .header-login > h6:after,
.header-dropdown > h1:after,
.header-dropdown > h2:after,
.header-dropdown > h3:after,
.header-dropdown > h4:after,
.header-dropdown > h5:after,
.header-dropdown > h6:after {
font: 0.69231em/1 "RockSolid Icons";
content: "\e015";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
top: -0.11111em;
margin-left: 0.44444em;
}
.header-dropdown:hover {
color: #ffffff;
}
.header-login .formbody,
.header-dropdown > ul {
position: absolute;
top: 100%;
right: 0;
display: none;
margin-top: -1px;
padding: 1em 1.53846em 1.38462em;
border: 1px solid #b2b9c4;
border-radius: 0px 0 0px 0px;
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.header-login .formbody .error,
.header-dropdown > ul .error {
margin-top: 0;
margin-bottom: 1em;
min-width: 21.53846em;
}
.header-login .formbody .login_info,
.header-dropdown > ul .login_info {
margin-top: 0;
white-space: nowrap;
}
.header-login .formbody label,
.header-dropdown > ul label {
display: block;
margin: 0 0 0.3em;
font-size: 0.76923em;
text-transform: uppercase;
}
.header-login .formbody input,
.header-dropdown > ul input {
width: 100%;
margin: 0 0 1.07692em;
padding: 0.46154em 0.92308em;
border-radius: 0;
font-size: 1em;
}
.header-login .formbody input[type=submit],
.header-dropdown > ul input[type=submit] {
margin: 0;
}
.header-login .formbody .checkbox_container,
.header-dropdown > ul .checkbox_container {
border: 0;
margin: 0;
padding: 0;
}
.header-login .formbody .checkbox_container input,
.header-dropdown > ul .checkbox_container input {
margin-bottom: 0;
}
.header-login .formbody .checkbox_container label,
.header-dropdown > ul .checkbox_container label {
display: inline;
}
.header-login .formbody {
min-width: 16.92308em;
}
.header-dropdown > ul {
min-width: 150%;
padding: 0.76923em 0;
list-style: none;
}
.header-dropdown > ul li:before {
content: none;
}
.header-dropdown > ul a,
.header-dropdown > ul strong,
.header-dropdown > ul span.trail,
.header-dropdown > ul span.active,
.header-dropdown > ul span.forward {
display: block;
padding: 0.30769em 1.53846em;
color: inherit;
text-decoration: none;
}
.header-dropdown > ul a:hover,
.header-dropdown > ul a:focus {
text-decoration: underline;
}
.header-dropdown > ul span.trail,
.header-dropdown > ul span.active,
.header-dropdown > ul span.forward {
font-weight: bold;
}
.header-login.is-active > h1, .header-login.is-active > h2, .header-login.is-active > h3, .header-login.is-active > h4, .header-login.is-active > h5, .header-login.is-active > h6,
.header-dropdown:hover > h1,
.header-dropdown:hover > h2,
.header-dropdown:hover > h3,
.header-dropdown:hover > h4,
.header-dropdown:hover > h5,
.header-dropdown:hover > h6,
.header-dropdown:focus > h1,
.header-dropdown:focus > h2,
.header-dropdown:focus > h3,
.header-dropdown:focus > h4,
.header-dropdown:focus > h5,
.header-dropdown:focus > h6 {
border-color: #b2b9c4;
color: #ffffff;
background-color: #ffffff;
}
.header-login.is-active > h1:after,
.header-login.is-active > h2:after,
.header-login.is-active > h3:after,
.header-login.is-active > h4:after,
.header-login.is-active > h5:after,
.header-login.is-active > h6:after {
content: "\d7";
}
.header-login.is-active .formbody,
.header-dropdown:hover > ul,
.header-dropdown:focus > ul {
display: block;
}
.header-navigation {
zoom: 1;
position: relative;
border-bottom: 1px solid #e5e8ee;
background: #00a4b7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.header-navigation:before {
content: "";
display: table;
}
.header-navigation:after {
content: "";
display: table;
clear: both;
}
.tao-boxed .header-navigation {
max-width: 1300px;
margin-right: auto;
margin-left: auto;
border-right: 1px solid #b2b9c4;
border-left: 1px solid #b2b9c4;
}
@media screen and (max-width: 1300px) {
.header-navigation {
}
.tao-boxed .header-navigation {
border-right: 0;
border-left: 0;
}
}
.tao-not-boxed .header-navigation {
max-width: none;
border-right: 0;
border-left: 0;
}
.header-navigation-inner {
position: relative;
height: 5.25em;
min-height: 3.125em;
color: #ffffff;
}
@media screen and (max-width: 1100px) {
.header-navigation-inner {
height: auto;
min-height: 0;
}
}
.logo {
position: absolute;
top: 15%;
bottom: 13%;
left: 3.7037%;
left: calc(3.7037% + var(--safe-area-left));
margin: 0;
font-size: inherit;
}
@media screen and (max-width: 1100px) {
.logo {
position: static;
margin-left: 5.55556%;
margin-left: var(--page-padding-left);
padding-top: 1.5em;
padding-bottom: 0.75em;
}
}
@media screen and (max-width: 900px) {
.logo {
text-align: center;
margin-left: 0;
padding-top: 0.75em;
}
}
.logo a {
display: block;
height: 100%;
}
@media screen and (max-width: 1100px) {
.logo a {
display: inline;
}
}
.logo img {
display: block;
width: auto;
height: 100%;
}
@media screen and (max-width: 1100px) {
.logo img {
display: inline;
height: auto;
max-height: 4.0625em;
}
}
.main-navigation-wrapper {
position: relative;
clear: both;
border: 1px solid #b2b9c4;
background: #00a4b7;
background: -webkit-linear-gradient(#00adc1, #009bad);
background: -moz-linear-gradient(#00adc1, #009bad);
background: -o-linear-gradient(#00adc1, #009bad);
background: linear-gradient(#00adc1, #009bad);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.main-navigation {
float: right;
height: 100%;
margin-right: 5.55556%;
margin-right: calc(5.55556% + var(--safe-area-right));
padding-right: 2.75em;
}
@media screen and (max-width: 1100px) {
.main-navigation {
position: relative;
float: none;
height: 3.125em;
margin-right: 0;
padding-right: 1.5em;
padding-right: calc(1.5em + var(--safe-area-right));
padding-left: 1.5em;
padding-left: calc(1.5em + var(--safe-area-left));
}
}
@media screen and (max-width: 900px) {
.main-navigation {
display: none;
}
}
.main-navigation a,
.main-navigation strong,
.main-navigation span.active,
.main-navigation span.trail,
.main-navigation span.forward {
font-weight: inherit;
}
.main-navigation a:before,
.main-navigation strong:before,
.main-navigation span.active:before,
.main-navigation span.trail:before,
.main-navigation span.forward:before {
content: none;
display: none;
}
.main-navigation ul {
display: inline;
margin: 0;
padding: 0;
}
.main-navigation > ul > li {
position: relative;
float: left;
height: 100%;
}
.main-navigation > ul > li.-mega {
position: static;
}
.main-navigation > ul > li:before {
position: absolute;
top: 50%;
left: 0.5em;
margin-top: -0.33333em;
font-size: 0.75em;
}
.main-navigation > ul > li > a,
.main-navigation > ul > li > strong,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
position: relative;
float: left;
height: 100%;
padding: 0 1.429em;
font-size: 0.875em;
color: #ffffff;
}
.main-navigation > ul > li > a:before,
.main-navigation > ul > li > strong:before,
.main-navigation > ul > li > span.active:before,
.main-navigation > ul > li > span.trail:before,
.main-navigation > ul > li > span.forward:before {
content: "";
display: block;
height: 50%;
margin-bottom: -0.71429em;
}
.main-navigation > ul > li > a:after,
.main-navigation > ul > li > strong:after,
.main-navigation > ul > li > span.active:after,
.main-navigation > ul > li > span.trail:after,
.main-navigation > ul > li > span.forward:after {
content: "";
position: absolute;
top: -1px;
right: 50%;
left: 50%;
border-top: 2px solid #ffffff;
-webkit-transition: right 0.4s ease-out, left 0.4s ease-out;
-moz-transition: right 0.4s ease-out, left 0.4s ease-out;
-o-transition: right 0.4s ease-out, left 0.4s ease-out;
transition: right 0.4s ease-out, left 0.4s ease-out;
}
@media screen and (max-width: 1100px) {
.main-navigation > ul > li > a:after,
.main-navigation > ul > li > strong:after,
.main-navigation > ul > li > span.active:after,
.main-navigation > ul > li > span.trail:after,
.main-navigation > ul > li > span.forward:after {
top: auto;
bottom: -1px;
}
}
.main-navigation > ul > li > a:hover,
.main-navigation > ul > li > a:focus {
color: #fbb900;
text-decoration: none;
}
.main-navigation > ul > li > a.active,
.main-navigation > ul > li > a.trail,
.main-navigation > ul > li > a.forward,
.main-navigation > ul > li > strong.active,
.main-navigation > ul > li > strong.trail,
.main-navigation > ul > li > strong.forward,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
color: #00a4b7;
}
.main-navigation > ul > li > ul {
position: absolute;
top: 100%;
left: 0.5em;
display: block;
overflow: hidden;
max-height: 0;
min-width: 11.25em;
padding: 0;
border: solid #e5e8ee;
border-width: 1px 1px 2px;
border-top-color: #e5e8ee;
border-radius: 0 0 0px 0px;
background: #ffffff;
opacity: 0;
box-shadow: inset 0 6px 2px -5px rgba(0, 0, 0, 0.1);
-webkit-transition: max-height 0s, padding 0s, opacity 0.3s;
-webkit-transition-delay: 0.3s, 0.3s, 0s;
-moz-transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
-o-transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
pointer-events: none;
}
.main-navigation > ul > li > ul li {
position: relative;
display: block;
padding: 0.125em 0;
border-bottom: 1px solid #e5e8ee;
white-space: nowrap;
}
.main-navigation > ul > li > ul li li {
margin: 0;
border: 0;
}
.main-navigation > ul > li > ul li[data-icon]:before,
.main-navigation > ul > li > ul li[class^="icon-"]:before,
.main-navigation > ul > li > ul li[class*=" icon-"]:before {
position: absolute;
top: 0.64286em;
left: 0.28571em;
z-index: 1;
font-size: 0.875em;
}
.main-navigation > ul > li > ul li[data-icon] a,
.main-navigation > ul > li > ul li[data-icon] strong,
.main-navigation > ul > li > ul li[data-icon] span.active,
.main-navigation > ul > li > ul li[data-icon] span.trail,
.main-navigation > ul > li > ul li[data-icon] span.forward,
.main-navigation > ul > li > ul li[class^="icon-"] a,
.main-navigation > ul > li > ul li[class^="icon-"] strong,
.main-navigation > ul > li > ul li[class^="icon-"] span.active,
.main-navigation > ul > li > ul li[class^="icon-"] span.trail,
.main-navigation > ul > li > ul li[class^="icon-"] span.forward,
.main-navigation > ul > li > ul li[class*=" icon-"] a,
.main-navigation > ul > li > ul li[class*=" icon-"] strong,
.main-navigation > ul > li > ul li[class*=" icon-"] span.active,
.main-navigation > ul > li > ul li[class*=" icon-"] span.trail,
.main-navigation > ul > li > ul li[class*=" icon-"] span.forward {
padding-left: 1.71429em;
}
.main-navigation > ul > li > ul a,
.main-navigation > ul > li > ul strong,
.main-navigation > ul > li > ul span.active,
.main-navigation > ul > li > ul span.trail,
.main-navigation > ul > li > ul span.forward {
position: relative;
display: block;
padding: 0.21429em 0.42857em;
margin: 0;
font-size: 0.875em;
}
.main-navigation > ul > li > ul a {
border-radius: 0px;
color: #555555;
-webkit-transition: background-color 0.6s ease-in, color 0.6s ease-in;
-moz-transition: background-color 0.6s ease-in, color 0.6s ease-in;
-o-transition: background-color 0.6s ease-in, color 0.6s ease-in;
transition: background-color 0.6s ease-in, color 0.6s ease-in;
}
.main-navigation > ul > li > ul a:hover {
text-decoration: none;
color: #00a4b7;
background-color: #e5e8ee;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.main-navigation > ul > li > ul strong.active,
.main-navigation > ul > li > ul strong.trail,
.main-navigation > ul > li > ul strong.forward,
.main-navigation > ul > li > ul span.active,
.main-navigation > ul > li > ul span.trail,
.main-navigation > ul > li > ul span.forward {
color: #00a4b7;
}
.main-navigation > ul > li > ul ul {
display: block;
padding-left: 0.625em;
}
.main-navigation > ul > li:hover:after {
content: "";
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin-top: 0.625em;
}
.main-navigation > ul > li:hover > a,
.main-navigation > ul > li:hover > strong,
.main-navigation > ul > li:hover > span.active,
.main-navigation > ul > li:hover > span.trail,
.main-navigation > ul > li:hover > span.forward {
z-index: 2;
}
.main-navigation > ul > li:hover > a:after,
.main-navigation > ul > li:hover > strong:after,
.main-navigation > ul > li:hover > span.active:after,
.main-navigation > ul > li:hover > span.trail:after,
.main-navigation > ul > li:hover > span.forward:after {
right: 1.42857em;
left: 1.42857em;
-webkit-transition-duration: 0.1s, 0.1s;
-moz-transition-duration: 0.1s, 0.1s;
-o-transition-duration: 0.1s, 0.1s;
transition-duration: 0.1s, 0.1s;
}
.main-navigation > ul > li:hover > ul {
z-index: 1;
max-height: 9999px;
padding: 0.875em 1em;
opacity: 1;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
pointer-events: auto;
}
.modernizr-no-pointerevents .main-navigation > ul > li > ul {
border-width: 0;
}
.modernizr-no-pointerevents .main-navigation > ul > li:hover > ul {
border-width: 1px 1px 2px;
}
.main-navigation > ul > li.last > ul {
left: auto;
right: -0.125em;
}
.mega-dropdown {
position: absolute;
top: 100%;
left: 3.7037%;
left: var(--page-padding-left);
display: block;
width: 92.59259%;
width: var(--page-inner-width);
max-height: 0;
padding: 0;
overflow: hidden;
border: solid #e5e8ee;
border-width: 1px 1px 2px;
border-top-color: #e5e8ee;
border-radius: 0 0 0px 0px;
font-size: 0.875em;
background: #ffffff;
opacity: 0;
box-shadow: inset 0 6px 2px -5px rgba(0, 0, 0, 0.1);
-webkit-transition: max-height 0s, padding 0s, opacity 0.3s;
-webkit-transition-delay: 0.3s, 0.3s, 0s;
-moz-transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
-o-transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
transition: max-height 0s 0.3s, padding 0s 0.3s, opacity 0.3s;
pointer-events: none;
/* Fixes chrome text flicker */
-webkit-backface-visibility: hidden;
}
@media screen and (max-width: 1100px) {
.mega-dropdown {
background-image: none !important;
left: 0;
width: 100%;
}
}
li:hover > .mega-dropdown {
z-index: 1;
max-height: 9999px;
overflow: visible;
padding: 1.57143em 3.7037%;
opacity: 1;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
pointer-events: auto;
}
@media screen and (max-width: 1100px) {
li:hover > .mega-dropdown {
padding-right: 5.55556%;
padding-right: var(--page-padding-right);
padding-left: 5.55556%;
padding-left: var(--page-padding-left);
}
}
.modernizr-no-pointerevents .mega-dropdown {
border-width: 0;
}
.modernizr-no-pointerevents li:hover > .mega-dropdown {
border-width: 1px 1px 2px;
}
.mega-dropdown-column h1,
.mega-dropdown-column h2,
.mega-dropdown-column h3 {
margin: 0 0 0.71429em;
font-size: inherit;
font-weight: bold;
color: #00a4b7;
}
.mega-dropdown-column h1 a,
.mega-dropdown-column h2 a,
.mega-dropdown-column h3 a {
color: inherit;
}
.mega-dropdown-column p {
margin: 1em 0;
}
.mega-dropdown-column ul a {
display: inline-block;
padding: 0.28571em 0 0.21429em;
color: #555555;
}
.mega-dropdown-column ul a:hover {
color: #00a4b7;
}
.mega-dropdown-column li li {
margin-left: 1.42857em;
}
.mega-dropdown-image {
margin: 1.42857em 0;
}
.mega-dropdown-image img {
display: block;
width: 100%;
height: auto;
}
.main-navigation-search {
position: absolute;
top: 50%;
right: 3.7037%;
right: var(--page-padding-right);
z-index: 3;
height: 2.85714em;
min-width: 3.42857em;
margin-top: -1.35714em;
border-radius: 0px;
overflow: hidden;
font-size: 0.875em;
background: #00a4b7;
}
@media screen and (max-width: 1100px) {
.main-navigation-search {
right: 5.55556%;
right: var(--page-padding-right);
top: auto;
bottom: 4.6875em;
margin-top: 0;
z-index: 0;
}
}
@media screen and (max-width: 900px) {
.main-navigation-search {
display: none;
}
}
.main-navigation-search:after {
content: "";
position: absolute;
top: 50%;
left: 0;
height: 1.07143em;
margin: -0.5em 0 0;
border-left: 1px solid #e5e8ee;
}
.main-navigation-search input {
/* Fixes border-radius on iOS 7 */
-webkit-appearance: none;
float: right;
width: 11.78571em;
margin: 0.57143em 0.85714em 0 -10.35714em;
padding: 0.14286em 0 0.21429em;
border: 0;
border-bottom: 1px solid #00a4b7;
border-radius: 0;
font-size: inherit;
background: none;
box-shadow: none;
-webkit-transition: margin-left 0.2s ease-out;
-moz-transition: margin-left 0.2s ease-out;
-o-transition: margin-left 0.2s ease-out;
transition: margin-left 0.2s ease-out;
}
.main-navigation-search:hover,
.main-navigation-search.focus {
margin-right: -1px;
border: 1px solid #e5e8ee;
}
.main-navigation-search:hover input,
.main-navigation-search.focus input {
margin-left: 0.85714em;
border-color: #b2b9c4;
box-shadow: none;
}
.main-navigation-search:hover:after,
.main-navigation-search.focus:after {
content: none;
}
@media screen and (max-width: 1100px) {
.main-navigation-search {
margin-right: -1px;
border: 1px solid #e5e8ee;
}
.main-navigation-search input {
margin-left: 0.85714em;
border-color: #b2b9c4;
box-shadow: none;
}
.main-navigation-search:after {
content: none;
}
}
.main-navigation-search button {
position: absolute;
top: 0;
right: 0;
width: 3.57143em;
height: 100%;
margin: 0;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
text-indent: -99em;
text-shadow: none;
line-height: 0;
background: none;
box-shadow: none;
}
.main-navigation-search button:after {
font: 1.14286em/1 "RockSolid Icons";
content: "\e0cb";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
text-align: center;
}
.main-navigation-search button:hover,
.main-navigation-search button:focus {
color: #fbb900;
}
.main-navigation-mobile-open {
position: absolute;
top: 41px;
top: calc(41px + var(--safe-area-top));
left: 6.66667%;
left: calc(6.66667% + var(--safe-area-left));
width: 44px;
height: 39px;
margin: -20px 0 0 -11px;
padding: 11px;
display: none;
z-index: 200;
text-indent: -99em;
line-height: 0;
}
.main-navigation-mobile-open:after {
content: "";
display: block;
height: 3px;
border-radius: 2px;
background: #ffffff;
box-shadow: 0 7px #ffffff, 0 14px #ffffff;
}
@media screen and (max-width: 900px) {
.main-navigation-mobile-open {
display: block;
}
}
.main-navigation-mobile-close {
position: absolute;
top: 0;
right: -17.64706%;
display: none;
width: 17.64706%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0 !important;
text-indent: -99em;
background: none !important;
box-shadow: none !important;
}
.is-active > .main-navigation-mobile-close {
display: block;
}
.main-navigation-mobile {
/* Hide mobile navigation by default */
display: none;
padding: 0;
padding-top: var(--safe-area-top);
padding-bottom: var(--safe-area-bottom);
padding-left: var(--safe-area-left);
border-top: 1px solid #000000;
color: #ffffff;
background: #242424;
}
@media screen and (max-width: 900px) {
.main-navigation-mobile {
display: block;
}
}
.modernizr-js .main-navigation-mobile {
display: none;
}
.main-navigation-mobile.is-enabled {
position: absolute;
top: 0;
left: -85%;
z-index: 201;
width: 85%;
min-height: 100%;
-webkit-transition: left 0.2s ease-out;
-moz-transition: left 0.2s ease-out;
-o-transition: left 0.2s ease-out;
transition: left 0.2s ease-out;
}
@media screen and (max-width: 900px) {
.main-navigation-mobile.is-enabled {
display: block;
}
}
.modernizr-csstransforms3d .main-navigation-mobile.is-enabled {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.main-navigation-mobile.is-active {
left: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.modernizr-csstransforms3d .main-navigation-mobile.is-active {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.main-navigation-mobile ul {
display: block;
margin: 0;
padding: 0;
}
.main-navigation-mobile ul ul {
background: #242424;
box-shadow: inset 0 40px 40px -20px rgba(0, 0, 0, 0.04), inset 0 -40px 40px -20px rgba(0, 0, 0, 0.04);
}
.main-navigation-mobile .is-collapsed > ul {
display: none;
}
.main-navigation-mobile li {
position: relative;
display: block;
}
.main-navigation-mobile li:before {
content: none;
}
.main-navigation-mobile a,
.main-navigation-mobile strong,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail,
.main-navigation-mobile span.forward {
display: block;
padding: 0.64286em 0.92857em 0.57143em;
border-bottom: 1px solid #000000;
color: inherit;
background-color: #242424;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
-webkit-transition: background-color 0.6s ease-out;
-moz-transition: background-color 0.6s ease-out;
-o-transition: background-color 0.6s ease-out;
transition: background-color 0.6s ease-out;
}
.main-navigation-mobile a:before,
.main-navigation-mobile strong:before,
.main-navigation-mobile span.active:before,
.main-navigation-mobile span.trail:before,
.main-navigation-mobile span.forward:before {
margin-right: 0.42857em;
}
.main-navigation-mobile a:hover,
.main-navigation-mobile a:focus,
.main-navigation-mobile strong:hover,
.main-navigation-mobile strong:focus,
.main-navigation-mobile span.active:hover,
.main-navigation-mobile span.active:focus,
.main-navigation-mobile span.trail:hover,
.main-navigation-mobile span.trail:focus,
.main-navigation-mobile span.forward:hover,
.main-navigation-mobile span.forward:focus {
outline: none;
text-decoration: none;
background-color: #171717;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}
.main-navigation-mobile a.active,
.main-navigation-mobile a.trail,
.main-navigation-mobile strong.active,
.main-navigation-mobile strong.trail,
.main-navigation-mobile strong.forward,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail,
.main-navigation-mobile span.forward {
font-weight: bold;
}
.main-navigation-mobile a.active,
.main-navigation-mobile strong.active,
.main-navigation-mobile span.active {
background-color: #383838;
box-shadow: inset 0 0 5px #242424;
}
.main-navigation-mobile li li {
color: #bfbfbf;
}
.main-navigation-mobile li li a,
.main-navigation-mobile li li strong,
.main-navigation-mobile li li span.active,
.main-navigation-mobile li li span.trail,
.main-navigation-mobile li li span.forward {
padding-left: 1.85714em;
}
.main-navigation-mobile li li li a,
.main-navigation-mobile li li li strong,
.main-navigation-mobile li li li span.active,
.main-navigation-mobile li li li span.trail,
.main-navigation-mobile li li li span.forward {
padding-left: 2.78571em;
}
.main-navigation-mobile li li li li a,
.main-navigation-mobile li li li li strong,
.main-navigation-mobile li li li li span.active,
.main-navigation-mobile li li li li span.trail,
.main-navigation-mobile li li li li span.forward {
padding-left: 3.71429em;
}
.main-navigation-mobile li li li li li a,
.main-navigation-mobile li li li li li strong,
.main-navigation-mobile li li li li li span.active,
.main-navigation-mobile li li li li li span.trail,
.main-navigation-mobile li li li li li span.forward {
padding-left: 4.64286em;
}
.main-navigation-mobile .main-navigation-mobile-expand {
position: absolute;
top: 0.21429em;
right: 0;
overflow: hidden;
margin: 0;
padding: 0.57143em 0.92857em;
border: solid transparent;
border-width: 0.21429em 0;
box-shadow: inset 1px 0 #1f1f1f;
border-radius: 0;
outline: none;
line-height: 0;
color: inherit;
text-indent: -99em;
text-shadow: none;
background: none;
}
.main-navigation-mobile .main-navigation-mobile-expand:after {
font: 1.14286em/1 "RockSolid Icons";
content: "\e009";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
}
.main-navigation-mobile .is-expanded > .main-navigation-mobile-expand:after {
content: "\e00c";
}
.main-navigation-mobile-search {
position: relative;
margin: 5%;
}
.main-navigation-mobile-search input,
.main-navigation-mobile-search input:hover,
.main-navigation-mobile-search input:focus {
width: 100%;
border: 1px solid #000000;
background: transparent;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}
.main-navigation-mobile-search button {
position: absolute;
top: 0.07143em;
right: 0;
width: 3.57143em;
height: 100%;
margin: 0;
padding: 0;
border: 0;
text-align: left;
text-indent: -99em;
text-shadow: none;
line-height: 0;
background: none;
box-shadow: none;
}
.main-navigation-mobile-search button:after {
font: 1.14286em/1 "RockSolid Icons";
content: "\e0cb";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
text-align: center;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons {
margin: 1em 0;
text-align: center;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons li {
display: inline;
padding: 0;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons a {
display: inline-block;
width: 2.85714em;
height: 2.85714em;
overflow: hidden;
padding: 0;
border: 0;
border-radius: 0px;
box-shadow: none;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons a:before {
font-size: 1.28571em;
line-height: 2.22278;
margin: 0 0 100%;
color: #ffffff !important;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons a:hover:before {
color: inherit !important;
}
.tagline {
zoom: 1;
border-bottom: 1px solid #e5e8ee;
background: #ffffff;
}
.tagline:before {
content: "";
display: table;
}
.tagline:after {
content: "";
display: table;
clear: both;
}
.tagline .page-title {
float: left;
font-size: 20px;
font-weight: normal;
margin-top: 1.15789em;
}
@media screen and (max-width: 900px) {
.tagline .page-title {
float: none;
text-align: center;
}
}
.tagline .mod_breadcrumb {
float: right;
margin: 0;
padding: 2.15385em 0 1.84615em;
}
@media screen and (max-width: 900px) {
.tagline .mod_breadcrumb {
float: none;
margin: 1.69231em 0;
padding: 0;
text-align: center;
}
}
.tagline .image_container {
display: block;
clear: both;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.tagline img {
display: block;
}
.tagline-no-border .tagline {
border: 0;
}
.tagline-inner {
position: relative;
/* clearfix */
overflow: hidden;
color: #555555;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.content-wrapper {
zoom: 1;
}
.content-wrapper:before {
content: "";
display: table;
}
.content-wrapper:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 1300px) {
.content-wrapper {
padding-right: var(--safe-area-right);
padding-left: var(--safe-area-left);
}
}
.tao-fullwidth .content-wrapper {
max-width: none;
padding-right: 0;
padding-left: 0;
}
.centered-wrapper {
zoom: 1;
position: relative;
clear: both;
background: 50% 50% no-repeat;
background-size: cover;
}
.centered-wrapper:before {
content: "";
display: table;
}
.centered-wrapper:after {
content: "";
display: table;
clear: both;
}
.centered-wrapper.-border-top {
border-top: 1px solid #b2b9c4;
}
.centered-wrapper.-border-bottom {
border-bottom: 1px solid #b2b9c4;
}
.centered-wrapper.-color-inverted {
color: #ffffff;
}
.centered-wrapper.-highlight-color {
background-color: #00a4b7;
}
.centered-wrapper.-background-color-1 {
background-color: #353d47;
}
.centered-wrapper.-background-color-2 {
background-color: #f5f5f5;
}
.centered-wrapper.-small {
min-height: 300px;
}
@media screen and (max-width: 900px) {
.centered-wrapper.-small {
min-height: 200px;
}
}
.centered-wrapper.-medium {
min-height: 600px;
}
@media screen and (max-width: 900px) {
.centered-wrapper.-medium {
min-height: 400px;
}
}
.centered-wrapper.-large {
min-height: 900px;
}
@media screen and (max-width: 900px) {
.centered-wrapper.-large {
min-height: 600px;
}
}
.centered-wrapper.-background-mousemove,
.centered-wrapper.-background-mousemove-inverted,
.centered-wrapper.-background-parallax {
overflow: hidden;
}
.centered-wrapper-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
.centered-wrapper-background video {
/* Change this to `object-fit: cover;` once all browsers support it, */
/* see http://stackoverflow.com/a/20851590 */
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.-background-mousemove > .centered-wrapper-background,
.-background-mousemove-inverted > .centered-wrapper-background {
right: -12%;
}
.centered-wrapper-inner {
position: relative;
}
.centered-wrapper-inner.-fullwidth {
max-width: none;
margin: 0;
}
/* ===========================================
* Content
* ======================================== */
h1,
h2 {
line-height: 1.3;
}
h3,
h4,
h5,
h6 {
line-height: 1.5;
font-weight: normal;
}
.main-content {
float: right;
width: 59.25926%;
margin: 1.5em 7.40741% 3.75em 0;
}
@media screen and (max-width: 1100px) {
.main-content {
float: none;
width: auto;
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.tao-no-sidebar .main-content {
float: none;
width: auto;
margin-left: 3.57143%;
margin-right: 3.57143%;
}
@media screen and (max-width: 1100px) {
.tao-no-sidebar .main-content {
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.tao-sidebar-right .main-content {
float: left;
margin-right: 0;
margin-left: 7.40741%;
}
@media screen and (max-width: 1100px) {
.tao-sidebar-right .main-content {
float: none;
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.tao-fullwidth .main-content {
margin: 0;
}
.tao-3-columns .main-content {
width: 48.14815%;
margin-right: 25.92593%;
}
@media screen and (max-width: 1100px) {
.tao-3-columns .main-content {
width: auto;
margin-right: 5.55556%;
}
}
.main-content p,
.main-content ul,
.main-content ol,
.main-content table,
.main-content form,
.main-content fieldset {
margin-top: 0.75em;
margin-bottom: 1.5em;
}
.main-content p > span[style] {
padding: 0 0.1875em;
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
margin-top: 0.75em;
margin-bottom: 0.3em;
font-weight: normal;
}
.main-content h1 {
font-size: 2rem;
font-weight: bold;
color: #333333;
}
.main-content .-color-inverted h1 {
color: #ffffff;
}
.main-content h2 {
font-size: 2rem;
color: #333333;
}
.main-content .-color-inverted h2 {
color: #bbbbbb;
}
.main-content h3 {
font-size: 2rem;
}
.main-content h4 {
font-size: 1rem;
}
.main-content h5 {
font-size: 1rem;
line-height: 1.50056;
}
.main-content h6 {
font-size: 1rem;
line-height: 1.50063;
letter-spacing: 0.0625em;
color: #555555;
text-transform: uppercase;
}
.-color-inverted .main-content h6 {
color: #bbbbbb;
}
.main-content ul,
.main-content ol {
padding-left: 1.25em;
}
.main-content ul li[data-icon],
.main-content ul li[class^="icon-"],
.main-content ul li[class*=" icon-"],
.main-content ol li[data-icon],
.main-content ol li[class^="icon-"],
.main-content ol li[class*=" icon-"] {
padding-left: 0.25em;
list-style: none;
}
.main-content ul li[data-icon]:before,
.main-content ul li[class^="icon-"]:before,
.main-content ul li[class*=" icon-"]:before,
.main-content ol li[data-icon]:before,
.main-content ol li[class^="icon-"]:before,
.main-content ol li[class*=" icon-"]:before {
left: -1.5em;
width: 0;
margin-right: 0;
color: #00a4b7;
}
.main-content ul {
list-style: disc;
}
.main-content ul ul {
margin-top: 0;
}
.main-content ol {
padding-left: 1.25em;
list-style: decimal;
}
.main-content ol ol,
.main-content ol ul {
margin-top: 0;
}
.main-content ol ol {
padding-left: 1.5em;
list-style: upper-alpha;
}
.main-content ol ol ol {
list-style: lower-roman;
}
.main-content ol ol ol ol {
list-style: lower-alpha;
}
.main-content blockquote {
position: relative;
margin: 1.28571em 0 1.28571em 1.90476em;
font-size: 1.3125em;
line-height: 1.33381;
color: #555555;
}
.-color-inverted .main-content blockquote {
color: #bbbbbb;
}
@media screen and (max-width: 900px) {
.main-content blockquote {
margin-left: 12.5%;
}
}
.main-content blockquote small,
.main-content blockquote i,
.main-content blockquote em {
font-size: 0.7619em;
line-height: 1.5625;
font-style: normal;
}
.main-content blockquote:before {
content: "\201c";
position: absolute;
top: 0;
left: -0.47619em;
margin: 0.47619em 0 0 -0.08333em;
font-size: 4em;
font-weight: bold;
line-height: 0;
opacity: 0.5;
}
@media screen and (max-width: 900px) {
.main-content blockquote:before {
left: -12.5%;
margin-left: -0.11905em;
}
}
.main-content img {
max-width: 100%;
height: auto;
}
.main-content .gm-style img {
max-width: none;
}
.main-content .rsts-main {
margin: 24px 0;
}
.main-content .main-slider {
margin: 0;
}
/* ===========================================
* Forms
* ======================================== */
form h1,
form h2,
form h3,
form h4,
form h5,
form h6 {
clear: both;
}
form .widget {
position: relative;
clear: both;
}
form p b.error,
form p.error {
margin: 0;
display: block;
color: #cc0000;
}
input,
textarea {
padding: 0.85714em 1.35714em;
line-height: normal;
border: 1px solid #b2b9c4;
border-bottom-color: #a4acb9;
border-radius: 0px;
font-size: 0.875em;
color: inherit;
background: #ffffff;
}
.valid input,
.valid textarea {
border-color: #b5da44;
}
.invalid input,
input.error,
.invalid textarea,
textarea.error {
border-color: #cc0000;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
/* multiple rules, because user agents are required to ignore a rule with an unknown selector */
color: #98a0ab;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #98a0ab;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #98a0ab;
}
input::placeholder,
textarea::placeholder {
color: #98a0ab;
}
input:hover,
textarea:hover {
border-color: #a4acb9 #a4acb9 #98a1b0;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
input:focus,
textarea:focus {
border-color: #00a4b7;
}
.-color-inverted input,
.-color-inverted textarea {
background: #353d47;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"] {
outline: none;
}
input[type="checkbox"],
input[type="radio"],
input[type="image"] {
width: auto !important;
height: auto !important;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
}
input[type="checkbox"] {
vertical-align: middle;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
input[type="radio"] {
vertical-align: middle;
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
background: none;
}
input[type="file"] {
height: auto;
padding: 0;
border: 0;
/* IE8 and IE9 */
border: 1px solid #b2b9c4 \9;
background: none;
box-shadow: none;
}
button,
input[type="submit"] {
margin-top: 1.125em;
}
textarea {
height: 200px;
resize: vertical;
line-height: 1.5;
outline: none;
}
fieldset {
margin: 1.125em 0;
border: 1px solid #b2b9c4;
}
fieldset legend {
padding: 0 0.3125em;
}
fieldset + br {
/* Kill
that Contao injects */
display: none;
}
.main-content form .widget {
margin-top: 1.125em;
margin-bottom: 1.125em;
}
.main-content label {
display: block;
margin-bottom: 0.35714em;
font-size: 0.875em;
color: #555555;
}
.-color-inverted .main-content label {
color: #bbbbbb;
}
.main-content label .mandatory {
margin-left: 0.14286em;
color: #00a4b7;
}
.main-content input[type="checkbox"] + label {
display: inline;
}
.main-content fieldset p {
margin: 0;
}
.main-content fieldset label {
display: inline;
margin: 0;
}
.main-content fieldset label:after {
/* add line break after label */
content: "\A";
white-space: pre;
}
.main-content input,
.main-content textarea,
.main-content select,
.main-content fieldset {
width: 75%;
}
@media screen and (max-width: 900px) {
.main-content input,
.main-content textarea,
.main-content select,
.main-content fieldset {
width: 100%;
}
}
.main-content input[type="submit"] {
width: auto;
}
@media screen and (max-width: 900px) {
.main-content input[type="submit"] {
width: 100%;
}
}
.explanation p,
.captcha_text p {
margin: 0;
}
.explanation {
font-size: 0.875em;
margin: -0.85714em 0 1.71429em;
color: #555555;
}
.-color-inverted .explanation {
color: #bbbbbb;
}
.captcha_text {
display: block;
}
label .captcha_text {
display: inline;
}
.sidebar form input,
.sidebar form textarea,
.sidebar form select,
.sidebar form fieldset,
.sidebar form button {
width: 100%;
}
.sidebar form label {
display: block;
margin-bottom: 0.3125em;
font-size: 1em;
}
.sidebar form input[type="checkbox"],
.sidebar form input[type="radio"],
.sidebar form input[type="image"] {
width: auto;
}
/* ===========================================
* Content elements
* ======================================== */
.image_container {
position: relative;
display: inline-block;
max-width: 100%;
padding: 0.75em;
border: 1px solid #b2b9c4;
border-radius: 0px;
background: #ffffff;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.image_container.no-border,
.no-border .image_container {
padding: 0;
border: 0;
box-shadow: none;
background: none;
}
.image_container.float_above {
margin-top: 1.5em;
}
.image_container.float_below {
margin-bottom: 1.5em;
}
.image_container img {
display: block;
width: 100%;
height: auto;
}
.image_container a {
position: relative;
display: block;
overflow: hidden;
/* Fixes IE bug */
text-decoration: none;
}
.image_container a:hover:before,
.image_container a:focus:before {
}
.image_container a:hover:after,
.image_container a:focus:after {
}
.image_container a:hover img,
.image_container a:focus img {
}
.image_container figcaption,
.image_container .caption {
/* overwrite elements style attribute */
width: 100% !important;
padding: 0.42857em 0 0;
font-size: 0.875em;
color: #555555;
}
.image_container.float_right,
.image_container.float_left {
float: right;
width: 37.5% !important;
margin: 1.5em 0 1.125em 6.25%;
}
@media screen and (max-width: 900px) {
.image_container.float_right,
.image_container.float_left {
margin-left: 0;
float: none !important;
width: auto !important;
width: auto !important;
}
}
.tao-no-sidebar .image_container.float_right,
.tao-no-sidebar .image_container.float_left {
margin: 0.5em 0 1em 4%;
width: 24% !important;
}
@media screen and (max-width: 1100px) {
.tao-no-sidebar .image_container.float_right,
.tao-no-sidebar .image_container.float_left {
margin-left: 6.25%;
width: 37.5% !important;
}
}
@media screen and (max-width: 900px) {
.tao-no-sidebar .image_container.float_right,
.tao-no-sidebar .image_container.float_left {
margin-left: 0;
width: auto !important;
}
}
.no-resize .image_container.float_right,
.tao-no-sidebar .no-resize .image_container.float_right,
.image_container.float_right.no-resize,
.tao-no-sidebar .image_container.float_right.no-resize,
.no-resize .image_container.float_left,
.tao-no-sidebar .no-resize .image_container.float_left,
.image_container.float_left.no-resize,
.tao-no-sidebar .image_container.float_left.no-resize {
width: auto !important;
}
.image_container.float_left {
float: left;
margin: 0.5em 6.25% 1em 0;
}
@media screen and (max-width: 900px) {
.image_container.float_left {
margin-right: 0;
}
}
.tao-no-sidebar .image_container.float_left {
margin: 0.5em 3.84615% 1em 0;
}
@media screen and (max-width: 1100px) {
.tao-no-sidebar .image_container.float_left {
margin-right: 6.25%;
}
}
@media screen and (max-width: 900px) {
.tao-no-sidebar .image_container.float_left {
margin-right: 0;
}
}
.no-resize .image_container:not(.float_right):not(.float_left) img,
.image_container:not(.float_right):not(.float_left).no-resize img {
width: auto;
max-width: 100%;
}
.ce_youtube-wrapper,
.ce_vimeo-wrapper {
position: relative;
margin: 1.5em 0;
/* ratio 16 to 9 */
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.ce_youtube-wrapper iframe,
.ce_youtube-wrapper object,
.ce_youtube-wrapper embed,
.ce_vimeo-wrapper iframe,
.ce_vimeo-wrapper object,
.ce_vimeo-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mejs__video:not(.mejs__container-fullscreen),
.mejs__audio:not(.mejs__container-fullscreen) {
margin: 1.25em 0;
}
.mejs__video:not(.mejs__container-fullscreen) video,
.mejs__audio:not(.mejs__container-fullscreen) video {
object-fit: cover;
}
.mejs__video button,
.mejs__audio button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
border-radius: 0;
box-shadow: none;
}
.mejs__video button:hover,
.mejs__video button:focus,
.mejs__audio button:hover,
.mejs__audio button:focus {
background-image: url("../../assets/mediaelement/images/mejs-controls.svg");
}
.video_container video,
.audio_container audio {
display: block;
width: 100%;
}
.video_container video {
height: auto;
}
.video_container {
margin: 1.25em 0;
}
.video_container iframe {
border: 0;
}
.video_container .responsive {
position: relative;
padding-bottom: 56.25%;
}
.video_container .responsive.ratio-169 {
padding-bottom: 56.25%;
}
.video_container .responsive.ratio-1610 {
padding-bottom: 62.5%;
}
.video_container .responsive.ratio-219 {
padding-bottom: 42.85714%;
}
.video_container .responsive.ratio-43 {
padding-bottom: 75%;
}
.video_container .responsive.ratio-32 {
padding-bottom: 66.66667%;
}
.video_container .responsive iframe,
.video_container .responsive img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ce_gallery > ul.cols_1 > li {
width: 100%;
}
.ce_gallery > ul.cols_2 > li {
width: 49.25%;
}
.ce_gallery > ul.cols_3 > li {
width: 32.33333%;
}
.ce_gallery > ul.cols_4 > li {
width: 23.875%;
}
.ce_gallery > ul.cols_5 > li {
width: 18.8%;
}
.ce_gallery > ul.cols_6 > li {
width: 15.41667%;
}
.ce_gallery > ul.cols_7 > li {
width: 13%;
}
.ce_gallery > ul.cols_8 > li {
width: 11.1875%;
}
.ce_gallery > ul.cols_9 > li {
width: 9.77778%;
}
.ce_gallery > ul.cols_10 > li {
width: 8.65%;
}
.ce_gallery > ul.cols_11 > li {
width: 7.72727%;
}
.ce_gallery > ul.cols_12 > li {
width: 6.95833%;
}
@media screen and (max-width: 900px) {
.ce_gallery.ce_gallery > ul > li {
/* doubled class for specificity */
width: auto;
}
}
.ce_gallery.no-resize > ul > li {
width: auto;
}
.main-content .ce_gallery {
margin: 1.5em 0;
}
.ce_gallery > ul {
zoom: 1;
margin: 0 !important;
padding: 0 0 1.5% 0 !important;
list-style: none !important;
}
.ce_gallery > ul:before {
content: "";
display: table;
}
.ce_gallery > ul:after {
content: "";
display: table;
clear: both;
}
.ce_gallery > ul > li {
float: left;
width: 23.875%;
margin: 1.5% 0 0 1.5%;
}
@media screen and (max-width: 900px) {
.ce_gallery > ul > li {
margin-left: 0;
margin-right: 1.5%;
}
}
.ce_gallery > ul > li.col_first {
clear: left;
margin-left: 0;
}
@media screen and (max-width: 900px) {
.ce_gallery > ul > li.col_first {
clear: none;
}
}
.ce_gallery > ul > li.col_last {
/* for rounding failures */
margin-right: -1%;
}
@media screen and (max-width: 900px) {
.ce_gallery > ul > li.col_last {
margin-right: 1.5%;
}
}
.ce_gallery > ul > li > .image_container {
display: block;
width: 100%;
}
.ce_gallery img {
width: 100%;
height: auto;
}
.enclosure,
.sidebar .enclosure,
.ce_downloads,
.sidebar .ce_downloads {
margin: 1.6875em 0;
padding: 1.25em 1.875em;
border: 1px solid #b2b9c4;
border-radius: 0px;
}
.enclosure h1, .enclosure h2, .enclosure h3, .enclosure h4, .enclosure h5, .enclosure h6,
.sidebar .enclosure h1,
.sidebar .enclosure h2,
.sidebar .enclosure h3,
.sidebar .enclosure h4,
.sidebar .enclosure h5,
.sidebar .enclosure h6,
.ce_downloads h1,
.ce_downloads h2,
.ce_downloads h3,
.ce_downloads h4,
.ce_downloads h5,
.ce_downloads h6,
.sidebar .ce_downloads h1,
.sidebar .ce_downloads h2,
.sidebar .ce_downloads h3,
.sidebar .ce_downloads h4,
.sidebar .ce_downloads h5,
.sidebar .ce_downloads h6 {
margin: -1.75em -2.58333em 1.66667em;
padding: 0.66667em 1.66667em;
border-radius: 0px 0px 0 0;
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.08333em;
color: #ffffff;
text-transform: uppercase;
background: #333333;
}
.enclosure h1:before, .enclosure h2:before, .enclosure h3:before, .enclosure h4:before, .enclosure h5:before, .enclosure h6:before,
.sidebar .enclosure h1:before,
.sidebar .enclosure h2:before,
.sidebar .enclosure h3:before,
.sidebar .enclosure h4:before,
.sidebar .enclosure h5:before,
.sidebar .enclosure h6:before,
.ce_downloads h1:before,
.ce_downloads h2:before,
.ce_downloads h3:before,
.ce_downloads h4:before,
.ce_downloads h5:before,
.ce_downloads h6:before,
.sidebar .ce_downloads h1:before,
.sidebar .ce_downloads h2:before,
.sidebar .ce_downloads h3:before,
.sidebar .ce_downloads h4:before,
.sidebar .ce_downloads h5:before,
.sidebar .ce_downloads h6:before {
font: 1.16667em/1 "RockSolid Icons";
content: "\e06d";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
top: 0.07143em;
float: right;
}
.enclosure ul, .enclosure p,
.sidebar .enclosure ul,
.sidebar .enclosure p,
.ce_downloads ul,
.ce_downloads p,
.sidebar .ce_downloads ul,
.sidebar .ce_downloads p {
margin: 0;
padding: 0;
list-style: none;
}
.ce_accordion {
color: #555555;
}
.ce_accordion[data-icon],
.ce_accordion[class^="icon-"],
.ce_accordion[class*=" icon-"] {
position: relative;
}
.ce_accordion[data-icon]:before,
.ce_accordion[class^="icon-"]:before,
.ce_accordion[class*=" icon-"]:before {
position: absolute;
top: 0.75em;
left: 1em;
z-index: 1;
font-size: 1.25em;
}
.ce_accordion[data-icon] .toggler,
.ce_accordion[class^="icon-"] .toggler,
.ce_accordion[class*=" icon-"] .toggler {
padding-left: 3.125em;
}
.ce_accordion .toggler {
position: relative;
/* collapse borders */
margin-bottom: -2px;
padding: 0.6875em 2.5em 0.8125em 1.25em;
border: 1px solid #b2b9c4;
border-radius: 0px;
outline: none;
font-weight: bold;
cursor: pointer;
background: #ffffff;
}
.ce_accordion .toggler:after {
font: 0.8125em/1 "RockSolid Icons";
content: "\2b";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 1.38462em;
right: 1.53846em;
}
.ce_accordion .toggler:hover {
color: #00a4b7;
text-decoration: none;
}
.ce_accordion .toggler.ui-accordion-header-active:after {
content: "\2212";
}
.ce_accordion + .ce_accordion .toggler {
border-radius: 0 0 0px 0px;
}
.ce_accordion .accordion {
zoom: 1;
position: relative;
/* collapse borders */
margin-bottom: -2px;
padding: 0.0625em 1.25em;
border: 1px solid #b2b9c4;
border-top-color: #d8dce1;
border-radius: 0 0 0px 0px;
background: #e5e5e5;
}
.ce_accordion .accordion:before {
content: "";
display: table;
}
.ce_accordion .accordion:after {
content: "";
display: table;
clear: both;
}
.icon-boxes {
zoom: 1;
margin: 2.75em 0;
}
.icon-boxes:before {
content: "";
display: table;
}
.icon-boxes:after {
content: "";
display: table;
clear: both;
}
.icon-boxes > h1,
.icon-boxes > h2,
.icon-boxes > h3,
.icon-boxes > h4,
.icon-boxes > h5,
.icon-boxes > h6 {
margin-top: 0;
margin-bottom: 1em;
}
.icon-boxes-item {
position: relative;
display: block;
font-size: 0.875em;
color: #555555;
text-align: center;
text-decoration: none;
}
.icon-boxes-item.-align-left {
text-align: left;
}
.icon-boxes-item.-align-right {
text-align: right;
}
.icon-boxes-item.-color-inverted,
.-color-inverted .icon-boxes-item {
color: #ffffff;
}
.icon-boxes-item.-color-inverted:before,
.icon-boxes-item.-color-inverted.-inverted-icon:before,
.-color-inverted .icon-boxes-item:before,
.-color-inverted .icon-boxes-item.-inverted-icon:before {
border-color: #ffffff;
color: #ffffff;
background-color: transparent;
}
.icon-boxes-item.-color-inverted h3,
.-color-inverted .icon-boxes-item h3 {
color: #ffffff;
}
.icon-boxes-item.-boxed {
top: 1.78571em;
/* margin-top can not be used here because it's set by .rs-column */
margin-bottom: 1.78571em;
padding: 0 1.42857em 1.42857em;
border: 1px solid #b2b9c4;
border-radius: 0px;
}
.icon-boxes-item.-boxed.-headline-icon {
top: auto;
margin-bottom: 0;
padding-top: 1.42857em;
}
.icon-boxes-item.-boxed:before {
top: -0.46875em;
margin-top: -0.46875em;
margin-bottom: 0.125em;
}
.icon-boxes-item.-background-color {
padding: 1.42857em;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
.icon-boxes-item.-background-color:before {
background-color: inherit;
}
.icon-boxes-item.-background-color:hover:before,
.icon-boxes-item.-background-color:focus:before {
background-color: inherit;
}
.icon-boxes-item.-boxed.-background-color {
padding: 0 1.42857em 1.42857em;
}
.icon-boxes-item:hover,
.icon-boxes-item:focus {
text-decoration: none;
}
.icon-boxes-item:before {
width: 1em;
height: 1em;
margin: 0 0 0.59375em;
padding: 0.34375em;
border: 0.09375em solid #00a4b7;
border-radius: 100%;
font-size: 2.28571em;
color: #00a4b7;
text-align: center;
background: transparent;
-webkit-transition-property: opacity, -webkit-transform, color, background;
-moz-transition-property: opacity, -moz-transform, color, background;
-o-transition-property: opacity, -o-transform, color, background;
transition-property: opacity, transform, color, background;
-webkit-transition-duration: 0.2s, 0.2s, 0.2s, 0.8s;
-moz-transition-duration: 0.2s, 0.2s, 0.2s, 0.8s;
-o-transition-duration: 0.2s, 0.2s, 0.2s, 0.8s;
transition-duration: 0.2s, 0.2s, 0.2s, 0.8s;
}
.not-in-view > .icon-boxes-item:before,
.does-repeat.not-in-view > .icon-boxes-item:before,
.does-repeat .not-in-view > .icon-boxes-item:before {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.does-repeat.in-view > .icon-boxes-item:before,
.does-repeat .in-view > .icon-boxes-item:before,
.has-shown > .icon-boxes-item:before {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.icon-boxes-item:nth-of-type(12n+1):before {
-webkit-transition-delay: 0.1s, 0.1s, 0s, 0s;
-moz-transition-delay: 0.1s, 0.1s, 0s, 0s;
-o-transition-delay: 0.1s, 0.1s, 0s, 0s;
transition-delay: 0.1s, 0.1s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+2):before {
-webkit-transition-delay: 0.2s, 0.2s, 0s, 0s;
-moz-transition-delay: 0.2s, 0.2s, 0s, 0s;
-o-transition-delay: 0.2s, 0.2s, 0s, 0s;
transition-delay: 0.2s, 0.2s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+3):before {
-webkit-transition-delay: 0.3s, 0.3s, 0s, 0s;
-moz-transition-delay: 0.3s, 0.3s, 0s, 0s;
-o-transition-delay: 0.3s, 0.3s, 0s, 0s;
transition-delay: 0.3s, 0.3s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+4):before {
-webkit-transition-delay: 0.4s, 0.4s, 0s, 0s;
-moz-transition-delay: 0.4s, 0.4s, 0s, 0s;
-o-transition-delay: 0.4s, 0.4s, 0s, 0s;
transition-delay: 0.4s, 0.4s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+5):before {
-webkit-transition-delay: 0.5s, 0.5s, 0s, 0s;
-moz-transition-delay: 0.5s, 0.5s, 0s, 0s;
-o-transition-delay: 0.5s, 0.5s, 0s, 0s;
transition-delay: 0.5s, 0.5s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+6):before {
-webkit-transition-delay: 0.6s, 0.6s, 0s, 0s;
-moz-transition-delay: 0.6s, 0.6s, 0s, 0s;
-o-transition-delay: 0.6s, 0.6s, 0s, 0s;
transition-delay: 0.6s, 0.6s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+7):before {
-webkit-transition-delay: 0.7s, 0.7s, 0s, 0s;
-moz-transition-delay: 0.7s, 0.7s, 0s, 0s;
-o-transition-delay: 0.7s, 0.7s, 0s, 0s;
transition-delay: 0.7s, 0.7s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+8):before {
-webkit-transition-delay: 0.8s, 0.8s, 0s, 0s;
-moz-transition-delay: 0.8s, 0.8s, 0s, 0s;
-o-transition-delay: 0.8s, 0.8s, 0s, 0s;
transition-delay: 0.8s, 0.8s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+9):before {
-webkit-transition-delay: 0.9s, 0.9s, 0s, 0s;
-moz-transition-delay: 0.9s, 0.9s, 0s, 0s;
-o-transition-delay: 0.9s, 0.9s, 0s, 0s;
transition-delay: 0.9s, 0.9s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+10):before {
-webkit-transition-delay: 1s, 1s, 0s, 0s;
-moz-transition-delay: 1s, 1s, 0s, 0s;
-o-transition-delay: 1s, 1s, 0s, 0s;
transition-delay: 1s, 1s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+11):before {
-webkit-transition-delay: 1.1s, 1.1s, 0s, 0s;
-moz-transition-delay: 1.1s, 1.1s, 0s, 0s;
-o-transition-delay: 1.1s, 1.1s, 0s, 0s;
transition-delay: 1.1s, 1.1s, 0s, 0s;
}
.icon-boxes-item:nth-of-type(12n+12):before {
-webkit-transition-delay: 1.2s, 1.2s, 0s, 0s;
-moz-transition-delay: 1.2s, 1.2s, 0s, 0s;
-o-transition-delay: 1.2s, 1.2s, 0s, 0s;
transition-delay: 1.2s, 1.2s, 0s, 0s;
}
.icon-boxes-item.-inverted-icon:before {
border-color: #00a4b7;
color: #ffffff;
background-color: #00a4b7;
}
.icon-boxes-item.-large-icon:before {
font-size: 2.71429em;
/* IE9 - IE11 */
font-size: 2.375rem;
}
.icon-boxes-item.-headline-icon {
text-align: left;
}
.icon-boxes-item.-headline-icon:before {
float: left;
top: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.icon-boxes-item.-headline-icon h3 {
padding: 0.09524em 0 0 2.19048em;
}
.icon-boxes-item:hover:before,
.icon-boxes-item:focus:before {
color: #ffffff;
background-color: #00a4b7;
}
.icon-boxes-item:hover.-inverted-icon:before,
.icon-boxes-item:focus.-inverted-icon:before {
color: #00a4b7;
background-color: #ffffff;
}
.icon-boxes-item:hover.-headline-icon:before,
.icon-boxes-item:focus.-headline-icon:before {
color: #00a4b7;
background: none;
}
.icon-boxes-item h3 {
margin: 0 0 0.66667em;
font-family: Jost, sans-serif;
font-style: normal;
font-size: 1.5em;
color: #555555;
}
.icon-boxes-item p {
margin: 0.5em 0;
}
.icon-boxes-item-link.-link {
color: #00a4b7;
}
.icon-boxes-item:hover > .icon-boxes-item-link.-link,
.icon-boxes-item:focus > .icon-boxes-item-link.-link {
text-decoration: underline;
}
.-color-inverted .icon-boxes-item-link {
color: #ffffff;
}
.rotating-boxes {
zoom: 1;
margin: 4% 0;
}
.rotating-boxes:before {
content: "";
display: table;
}
.rotating-boxes:after {
content: "";
display: table;
clear: both;
}
.rotating-boxes-item {
position: relative;
color: #555555;
text-decoration: none;
-webkit-perspective: 750px;
-moz-perspective: 750px;
-ms-perspective: 750px;
-o-perspective: 750px;
perspective: 750px;
}
.rotating-boxes-item:hover,
.rotating-boxes-item:focus,
.rotating-boxes-item.hover {
text-decoration: none;
}
.rotating-boxes-item:hover > .rotating-boxes-item-cover,
.rotating-boxes-item:focus > .rotating-boxes-item-cover,
.rotating-boxes-item.hover > .rotating-boxes-item-cover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.rotating-boxes-item:hover > .rotating-boxes-item-content,
.rotating-boxes-item:focus > .rotating-boxes-item-content,
.rotating-boxes-item.hover > .rotating-boxes-item-content {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.rotating-boxes-item-cover,
.rotating-boxes-item-content {
position: relative;
border: 1px solid #b2b9c4;
border-radius: 0px;
background: #ffffff;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.rotating-boxes-item-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #00a4b7;
}
.rotating-boxes-item-cover:before,
.rotating-boxes-item-cover:after {
position: absolute;
top: 50%;
left: 50%;
}
.rotating-boxes-item-cover:before {
margin: -1em 0 0 -0.5em;
font-size: 2.625em;
}
.rotating-boxes-item-cover:after {
content: attr(data-headline);
left: 0;
width: 100%;
margin: 0.35714em 0 0;
font-size: 1.75em;
text-align: center;
}
.rotating-boxes-item-content {
overflow: hidden;
margin: -1em;
padding: 1em 3.14286em;
font-size: 0.875em;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.rotating-boxes-item-content:before {
position: absolute;
top: 0;
right: 0;
margin: -0.3em;
font-size: 14.28571em;
color: #00a4b7;
opacity: 0.2;
}
.rotating-boxes-item-content h3 {
position: relative;
margin: 0.66667em 0;
font-size: 1.5em;
color: #00a4b7;
}
.-color-inverted .rotating-boxes-item-content h3 {
color: #00a4b7;
}
.rotating-boxes-item-content p {
position: relative;
margin: 1em 0;
}
.rotating-boxes-item-content .rotating-boxes-item-link {
margin-top: 0;
}
.teaser-boxes,
.team-boxes {
margin: 2.5em 0;
zoom: 1;
}
.teaser-boxes:before,
.team-boxes:before {
content: "";
display: table;
}
.teaser-boxes:after,
.team-boxes:after {
content: "";
display: table;
clear: both;
}
.teaser-boxes > h1,
.team-boxes > h1,
.teaser-boxes > h2,
.team-boxes > h2,
.teaser-boxes > h3,
.team-boxes > h3,
.teaser-boxes > h4,
.team-boxes > h4,
.teaser-boxes > h5,
.team-boxes > h5,
.teaser-boxes > h6,
.team-boxes > h6 {
margin-top: 0;
margin-bottom: 1.5em;
}
.teaser-boxes-item,
.team-boxes-item {
font-size: 0.875em;
text-decoration: none;
color: inherit;
outline: none;
}
.teaser-boxes-item.-align-center,
.-align-center.team-boxes-item {
text-align: center;
}
.teaser-boxes-item.-align-right,
.-align-right.team-boxes-item {
text-align: right;
}
.-color-inverted .teaser-boxes-item,
.-color-inverted .team-boxes-item {
color: #bbbbbb;
}
.-boxed > .teaser-boxes-item,
.-boxed > .team-boxes-item {
color: #555555;
}
.teaser-boxes-item .image-wrapper,
.team-boxes-item .image-wrapper {
position: relative;
display: block;
overflow: hidden;
outline: none;
}
.teaser-boxes-item .image-wrapper.-image-circle,
.team-boxes-item .image-wrapper.-image-circle {
border-radius: 99em;
overflow: hidden;
/* Fixes hover in Chrome */
opacity: 0.99;
}
.teaser-boxes-item .image-wrapper.-image-circle img,
.team-boxes-item .image-wrapper.-image-circle img {
/* Fixes android bug with border-radius and overflow */
border-radius: 99em;
}
.teaser-boxes-item .image-wrapper,
.team-boxes-item .image-wrapper,
.teaser-boxes-item .no-image,
.team-boxes-item .no-image {
margin-bottom: 1.28571em;
}
.-boxed > .teaser-boxes-item .image-wrapper,
.-boxed > .team-boxes-item .image-wrapper,
.-boxed > .teaser-boxes-item .no-image,
.-boxed > .team-boxes-item .no-image {
margin: -1.42857em -1.42857em 1.28571em;
}
.-boxed > .teaser-boxes-item,
.-boxed > .team-boxes-item {
overflow: hidden;
padding: 1.42857em;
border: 1px solid #b2b9c4;
border-radius: 0px;
outline: none;
background-color: #ffffff;
}
.teaser-boxes-item img,
.team-boxes-item img {
display: block;
width: 100%;
height: auto;
}
.teaser-boxes-item .no-image,
.team-boxes-item .no-image {
display: block;
padding-top: 75%;
background: #e5e8ee;
}
.teaser-boxes-item h3,
.team-boxes-item h3 {
margin: 0 0 0.33333em;
font-size: 1.28571em;
font-weight: bold;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}
.-color-inverted .teaser-boxes-item h3,
.-color-inverted .team-boxes-item h3 {
color: #ffffff;
}
.-color-inverted .-boxed .teaser-boxes-item h3,
.-color-inverted .-boxed .team-boxes-item h3 {
color: #555555;
}
.teaser-boxes-item h4,
.team-boxes-item h4 {
margin: 0;
font-size: 1em;
font-weight: normal;
}
.teaser-boxes-item p,
.team-boxes-item p,
.teaser-boxes-item ul,
.team-boxes-item ul,
.teaser-boxes-item ol,
.team-boxes-item ol {
margin: 0.42857em 0;
}
.teaser-boxes-item a,
.team-boxes-item a {
margin-top: 0.57143em;
}
.-color-inverted .teaser-boxes-item a,
.-color-inverted .team-boxes-item a {
color: inherit;
}
.teaser-boxes-item .image-wrapper.-has-hover:hover, .team-boxes-item .image-wrapper.-has-hover:hover,
.teaser-boxes-item .image-wrapper.-has-hover:focus,
.team-boxes-item .image-wrapper.-has-hover:focus {
outline: none;
}
.teaser-boxes-item .image-wrapper.-has-hover:hover:before, .team-boxes-item .image-wrapper.-has-hover:hover:before,
.teaser-boxes-item .image-wrapper.-has-hover:focus:before,
.team-boxes-item .image-wrapper.-has-hover:focus:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
}
.teaser-boxes-item .image-wrapper.-has-hover:hover img, .team-boxes-item .image-wrapper.-has-hover:hover img,
.teaser-boxes-item .image-wrapper.-has-hover:focus img,
.team-boxes-item .image-wrapper.-has-hover:focus img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.teaser-boxes-item a.image-wrapper.-has-hover:hover, .team-boxes-item a.image-wrapper.-has-hover:hover,
.teaser-boxes-item a.image-wrapper.-has-hover:focus,
.team-boxes-item a.image-wrapper.-has-hover:focus {
/* Fixes IE bug */
text-decoration: none;
}
.teaser-boxes-item a.image-wrapper.-has-hover:hover:after, .team-boxes-item a.image-wrapper.-has-hover:hover:after,
.teaser-boxes-item a.image-wrapper.-has-hover:focus:after,
.team-boxes-item a.image-wrapper.-has-hover:focus:after {
font: 1.5em/1 "RockSolid Icons";
content: "\2b";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
margin: -0.5em;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.team-boxes-item h3 {
font-size: 1.14286em;
}
.team-boxes-item .hover-image {
position: absolute;
top: auto;
bottom: -100%;
left: 0;
width: 100%;
-webkit-transition: bottom 0.2s ease-out;
-moz-transition: bottom 0.2s ease-out;
-o-transition: bottom 0.2s ease-out;
transition: bottom 0.2s ease-out;
}
.team-boxes-item:hover .hover-image {
bottom: 0;
}
.team-boxes-item > ul {
margin: 0.57143em 0;
padding: 0;
list-style-type: none;
}
.team-boxes-item > ul li {
display: inline;
}
.team-boxes-item > ul a {
display: inline-block;
overflow: hidden;
padding: 0.57143em 0.57143em 0 0.07143em;
outline: none;
line-height: 0;
/* Fixes Chrome bug */
letter-spacing: -1em;
text-indent: -99em;
text-decoration: none;
}
.team-boxes-item > ul a:before {
content: none;
}
.team-boxes-item > ul a:after {
font: 1.28571em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
letter-spacing: 0;
color: #888888 !important;
}
.team-boxes-item > ul a:hover:after,
.team-boxes-item > ul a:focus:after {
color: inherit !important;
}
.highlight-box {
/* clearfix */
overflow: hidden;
display: table;
width: 100%;
margin: 1.5em 0;
padding: 1.11111em 1.11111em;
border: 1px solid #b2b9c4;
border-radius: 0px;
font-size: 1.125em;
line-height: 1.50056;
color: #555555;
}
.highlight-box-inner {
display: table-cell;
vertical-align: middle;
text-align: right;
}
@media screen and (max-width: 900px) {
.highlight-box-inner {
display: block;
margin-top: 1em;
text-align: left;
}
}
.highlight-box-inner:first-child {
width: 65%;
text-align: left;
}
@media screen and (max-width: 900px) {
.highlight-box-inner:first-child {
width: auto;
margin-top: 0;
}
}
.highlight-box-inner h1:first-child,
.highlight-box-inner h2:first-child,
.highlight-box-inner h3:first-child,
.highlight-box-inner h4:first-child,
.highlight-box-inner p:first-child,
.highlight-box-inner ul:first-child,
.highlight-box-inner ol:first-child {
margin: 0;
}
.highlight-box-inner p:last-child {
margin-bottom: 0;
}
.highlight-box-link {
font-size: 0.77778em;
}
.testimonial,
.main-content .testimonial {
margin: 1.5em 0;
font-size: 1em;
line-height: 1.56313;
}
.testimonial:before,
.main-content .testimonial:before {
content: none;
}
.-color-inverted .testimonial,
.-color-inverted .main-content .testimonial {
color: #ffffff;
}
.testimonial > p,
.main-content .testimonial > p {
position: relative;
margin: 0;
padding: 1.0625em 1.25em 1.125em;
border: 1px solid #b2b9c4;
border-radius: 0px;
}
.testimonial > p:before,
.testimonial > p:after,
.main-content .testimonial > p:before,
.main-content .testimonial > p:after {
content: "";
position: absolute;
top: 100%;
left: 4.375em;
width: 0;
height: 0;
border: solid transparent;
border-top-color: #a4acb9;
border-style: solid;
border-width: 16px 16px 0 0;
}
@media screen and (max-width: 900px) {
.testimonial > p:before,
.testimonial > p:after,
.main-content .testimonial > p:before,
.main-content .testimonial > p:after {
content: none;
}
}
.testimonial > p:after,
.main-content .testimonial > p:after {
margin-left: 1px;
border-top-color: #ffffff;
border-width: 14px 14px 0 0;
}
.testimonial.-large,
.main-content .testimonial.-large {
margin: 2em 0;
font-size: 1.125em;
text-align: center;
}
.testimonial.-large:before,
.main-content .testimonial.-large:before {
content: "\201c";
position: static;
display: block;
margin: 0 0 -0.05556em;
line-height: 1;
}
.testimonial.-large > p,
.main-content .testimonial.-large > p {
padding: 0;
border: 0;
font-size: 1.33333em;
font-weight: 300;
}
@media screen and (max-width: 900px) {
.testimonial.-large > p,
.main-content .testimonial.-large > p {
font-size: 1.11111em;
}
}
.testimonial.-large > p:before,
.testimonial.-large > p:after,
.main-content .testimonial.-large > p:before,
.main-content .testimonial.-large > p:after {
content: none;
}
.testimonial-author,
.testimonial .testimonial-author {
/* clearfix */
overflow: hidden;
padding: 1em 0 0 0;
font-size: 1em;
}
.testimonial-author img,
.testimonial .testimonial-author img {
float: left;
width: 3.25em;
height: auto;
margin-left: 1.3125em;
border: 1px solid #e5e8ee;
border: 1px solid rgba(113, 124, 142, 0.5);
border-radius: 100%;
}
@media screen and (max-width: 900px) {
.testimonial-author img,
.testimonial .testimonial-author img {
margin-left: 0;
}
}
.testimonial-author > small,
.testimonial .testimonial-author > small {
float: left;
margin: 0.375em 0 0 1.25em;
font-size: inherit;
line-height: 1.2;
}
.testimonial-author > small b,
.testimonial .testimonial-author > small b {
display: block;
font-size: 0.875em;
font-weight: 300;
}
.testimonial-author > img + small,
.testimonial-author > picture + small,
.testimonial .testimonial-author > img + small,
.testimonial .testimonial-author > picture + small {
margin-left: 0.875em;
}
.testimonial.-large .testimonial-author {
display: inline-block;
min-height: 5.33333em;
padding-top: 2em;
text-align: left;
}
@media screen and (max-width: 900px) {
.testimonial.-large .testimonial-author {
text-align: center;
}
}
.testimonial.-large .testimonial-author > small {
margin-left: 0;
text-align: center;
}
.testimonial.-large .testimonial-author img {
margin-left: 0;
}
@media screen and (max-width: 900px) {
.testimonial.-large .testimonial-author img {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
}
}
.testimonial.-large .testimonial-author > img + small,
.testimonial.-large .testimonial-author > picture + small {
margin-left: 0.875em;
text-align: left;
}
@media screen and (max-width: 900px) {
.testimonial.-large .testimonial-author > img + small,
.testimonial.-large .testimonial-author > picture + small {
margin-left: 0;
text-align: center;
}
}
.pricing-table {
zoom: 1;
margin: 2.75em 0;
}
.pricing-table:before {
content: "";
display: table;
}
.pricing-table:after {
content: "";
display: table;
clear: both;
}
.pricing-table > h1,
.pricing-table > h2,
.pricing-table > h3,
.pricing-table > h4,
.pricing-table > h5,
.pricing-table > h6 {
margin-top: 0;
}
.pricing-table-plan {
position: relative;
float: left;
width: 33.33333%;
margin: 0.875em -1px 0 0;
border: 1px solid #b2b9c4;
text-align: center;
}
@media screen and (max-width: 900px) {
.pricing-table-plan {
float: none;
width: auto !important;
border-radius: 0px;
margin-bottom: 1.6875em;
}
}
.pricing-table-plan:first-of-type {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.pricing-table-plan:last-of-type {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
@media screen and (max-width: 900px) {
.pricing-table-plan:last-of-type {
margin-bottom: 0;
}
}
.-columns-1 > .pricing-table-plan {
width: 100%;
}
.-columns-1 > .pricing-table-plan.-highlighted {
width: 103%;
}
.-columns-2 > .pricing-table-plan {
width: 50%;
}
.-columns-2 > .pricing-table-plan.-highlighted {
width: 53%;
}
.-columns-3 > .pricing-table-plan {
width: 33.33333%;
}
.-columns-3 > .pricing-table-plan.-highlighted {
width: 36.33333%;
}
.-columns-4 > .pricing-table-plan {
width: 25%;
}
.-columns-4 > .pricing-table-plan.-highlighted {
width: 28%;
}
.-columns-5 > .pricing-table-plan {
width: 20%;
}
.-columns-5 > .pricing-table-plan.-highlighted {
width: 23%;
}
.-columns-6 > .pricing-table-plan {
width: 16.66667%;
}
.-columns-6 > .pricing-table-plan.-highlighted {
width: 19.66667%;
}
.pricing-table-plan.-highlighted {
z-index: 1;
width: 36.33333%;
margin-right: -1.5%;
margin-left: -1.5%;
padding-bottom: 1.25em;
border-radius: 0px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pricing-table-plan.-highlighted h3 {
margin: -0.9375em -1px 0;
padding-top: 1.8125em;
border-radius: 0px 0px 0 0;
color: #ffffff;
background: #00a4b7;
}
.pricing-table-plan h3 {
margin: 0;
padding: 0.875em 0;
border-bottom: 1px solid #e5e8ee;
font-size: inherit;
font-weight: bold;
color: inherit;
}
.pricing-table-plan p {
margin: 0;
padding: 0.375em 0;
border-bottom: 1px solid #e5e8ee;
font-size: 3em;
line-height: 1;
}
.pricing-table-plan p b {
display: inline-block;
vertical-align: super;
margin-left: -0.83333em;
font-weight: normal;
font-size: 0.5em;
color: #555555;
}
.pricing-table-plan p i {
display: block;
font-style: normal;
font-size: 0.29167em;
color: #555555;
}
.pricing-table-plan ul {
margin: 0 0 -1px 0;
padding: 0;
list-style: none;
font-size: 0.875em;
color: #555555;
}
.pricing-table-plan li {
display: block;
padding: 0.5em;
border-bottom: 1px solid #e5e8ee;
-webkit-transition: background-color 0.3s ease-in;
-moz-transition: background-color 0.3s ease-in;
-o-transition: background-color 0.3s ease-in;
transition: background-color 0.3s ease-in;
}
.pricing-table-plan li:hover {
background-color: #e5e8ee;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.pricing-table-plan a {
font-size: 0.75em;
margin: 1.5em 0;
padding: 0.83333em 1.66667em 0.75em;
}
.info-table {
overflow: auto;
border: 0;
}
.info-table td,
.info-table th {
border-width: 0 0 1px;
}
.info-table .image-cell {
padding: 20% 10%;
text-align: center;
}
@media screen and (max-width: 1100px) {
.info-table .image-cell {
padding: 0 0 5%;
}
}
.feature-box {
zoom: 1;
position: relative;
overflow: hidden;
}
.feature-box:before {
content: "";
display: table;
}
.feature-box:after {
content: "";
display: table;
clear: both;
}
.feature-box.-image-centered {
text-align: center;
}
.feature-box.-vertical-centered {
display: table;
table-layout: fixed;
/* Fixes IE bug */
width: 100%;
}
@media screen and (max-width: 900px) {
.feature-box.-vertical-centered {
display: flex;
flex-direction: column;
justify-content: center;
}
}
.feature-box.-small {
min-height: 300px;
}
.feature-box.-small.-vertical-centered {
height: 300px;
}
@media screen and (max-width: 900px) {
.feature-box.-small {
min-height: 200px;
}
.feature-box.-small.-vertical-centered {
height: auto;
}
}
.feature-box.-medium {
min-height: 600px;
}
.feature-box.-medium.-vertical-centered {
height: 600px;
}
@media screen and (max-width: 900px) {
.feature-box.-medium {
min-height: 400px;
}
.feature-box.-medium.-vertical-centered {
height: auto;
}
}
.feature-box.-large {
min-height: 900px;
}
.feature-box.-large.-vertical-centered {
height: 900px;
}
@media screen and (max-width: 900px) {
.feature-box.-large {
min-height: 600px;
}
.feature-box.-large.-vertical-centered {
height: auto;
}
}
.feature-box.-headline-dropshadow h1,
.feature-box.-headline-dropshadow h2,
.feature-box.-headline-dropshadow h3 {
text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.feature-box-text {
margin: 6.25em 48% 6.25em 0;
color: #555555;
}
@media screen and (max-width: 1100px) {
.feature-box-text {
margin-right: 37.5%;
}
}
@media screen and (max-width: 900px) {
.feature-box-text {
margin: 2.25em 0;
}
}
.-image-left > .feature-box-text {
margin-right: 0;
margin-left: 48%;
}
@media screen and (max-width: 1100px) {
.-image-left > .feature-box-text {
margin-left: 37.5%;
}
}
@media screen and (max-width: 900px) {
.-image-left > .feature-box-text {
margin-left: 0;
}
}
.-image-centered > .feature-box-text {
margin-right: 16%;
margin-left: 16%;
}
@media screen and (max-width: 1100px) {
.-image-centered > .feature-box-text {
margin-right: 0;
margin-left: 0;
}
}
.-image-centered > .feature-box-text + .feature-box-image {
margin-top: -2.25em;
}
@media screen and (max-width: 900px) {
.-image-centered > .feature-box-text + .feature-box-image {
margin-top: 0;
}
}
.-vertical-centered > .feature-box-text {
display: table-cell;
vertical-align: middle;
width: 56.0%;
margin: 0;
padding: 4.5em 4% 4.5em 0;
}
@media screen and (max-width: 1100px) {
.-vertical-centered > .feature-box-text {
width: 68.75%;
}
}
@media screen and (max-width: 900px) {
.-vertical-centered > .feature-box-text {
display: block;
width: auto;
padding-right: 0;
}
}
.-vertical-centered.-image-left > .feature-box-text {
padding-right: 0;
padding-left: 4%;
}
@media screen and (max-width: 900px) {
.-vertical-centered.-image-left > .feature-box-text {
padding-left: 0;
}
}
.-vertical-centered.-image-centered > .feature-box-text {
width: 100%;
padding-right: 20%;
padding-left: 20%;
}
@media screen and (max-width: 1100px) {
.-vertical-centered.-image-centered > .feature-box-text {
padding-right: 0;
padding-left: 0;
}
}
.-no-image > .feature-box-text {
width: 100%;
}
.-color-inverted .feature-box-text {
color: #ffffff;
}
.no-margin .feature-box-text {
margin: 0;
padding: 0;
}
.no-margin-top .feature-box-text {
margin-top: 0;
padding-top: 0;
}
.no-margin-bottom .feature-box-text {
margin-bottom: 0;
padding-bottom: 0;
}
.feature-box-text h1,
.feature-box-text h2,
.feature-box-text h3 {
margin: 0;
color: #555555;
font-size: 2em;
font-weight: bold;
}
@media screen and (max-width: 900px) {
.feature-box-text h1,
.feature-box-text h2,
.feature-box-text h3 {
font-size: 1.57143em;
}
}
.feature-box-text h1 + a,
.feature-box-text h2 + a,
.feature-box-text h3 + a {
margin-top: 1.71429em;
}
.-color-inverted .feature-box-text h1,
.-color-inverted .feature-box-text h2,
.-color-inverted .feature-box-text h3 {
color: #ffffff;
}
.feature-box-text h1.-small,
.feature-box-text h2.-small,
.feature-box-text h3.-small {
font-size: 1.3125em;
}
.feature-box-text h1.-medium,
.feature-box-text h2.-medium,
.feature-box-text h3.-medium {
font-size: 2.375em;
}
@media screen and (max-width: 900px) {
.feature-box-text h1.-medium,
.feature-box-text h2.-medium,
.feature-box-text h3.-medium {
font-size: 1.875em;
}
}
.feature-box-text h1.-large,
.feature-box-text h2.-large,
.feature-box-text h3.-large {
font-size: 2.875em;
}
@media screen and (max-width: 900px) {
.feature-box-text h1.-large,
.feature-box-text h2.-large,
.feature-box-text h3.-large {
font-size: 2em;
}
}
.feature-box-text h1.-super-size,
.feature-box-text h2.-super-size,
.feature-box-text h3.-super-size {
font-size: 3.625em;
}
@media screen and (max-width: 900px) {
.feature-box-text h1.-super-size,
.feature-box-text h2.-super-size,
.feature-box-text h3.-super-size {
font-size: 2.25em;
}
}
.feature-box-text p {
font-size: 1.125em;
}
.feature-box-image {
display: block;
float: right;
width: 44%;
margin: 3em 0 3em 4%;
}
@media screen and (max-width: 1100px) {
.feature-box-image {
width: 31.25%;
}
}
@media screen and (max-width: 900px) {
.feature-box-image {
width: 100%;
}
}
.-image-left > .feature-box-image {
float: left;
margin-right: 4%;
margin-left: 0;
}
@media screen and (max-width: 900px) {
.-image-left > .feature-box-image {
float: none;
margin-right: 0;
}
}
.-image-centered > .feature-box-image {
float: none;
width: 64%;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 1100px) {
.-image-centered > .feature-box-image {
width: 100%;
}
}
.-image-centered > .feature-box-image + .feature-box-text {
margin-top: 3em;
}
.-image-top > .feature-box-image {
margin-top: 0;
}
.-image-bottom > .feature-box-image {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
}
@media screen and (max-width: 900px) {
.-image-bottom > .feature-box-image {
position: static;
margin-bottom: 3em;
}
}
.-image-bottom.-image-left > .feature-box-image {
right: auto;
left: 0;
}
.-vertical-centered > .feature-box-image {
display: table-cell;
vertical-align: middle;
float: none;
margin: 0;
padding: 3em 0;
}
@media screen and (max-width: 900px) {
.-vertical-centered > .feature-box-image {
display: block;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
}
.-image-rounded > .feature-box-image img {
border-radius: 99em;
}
.in-view > .feature-box-text,
.in-view > .feature-box-image {
-webkit-transition: opacity 0.6s linear, -webkit-transform 0.6s ease-out;
-moz-transition: opacity 0.6s linear, -moz-transform 0.6s ease-out;
-o-transition: opacity 0.6s linear, -o-transform 0.6s ease-out;
transition: opacity 0.6s linear, transform 0.6s ease-out;
}
.not-in-view > .feature-box-text.-fade,
.not-in-view > .feature-box-image.-fade {
opacity: 0;
}
.in-view > .feature-box-text.-fade,
.in-view > .feature-box-image.-fade {
opacity: 1;
}
.not-in-view > .feature-box-text.-move,
.not-in-view > .feature-box-image.-move {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.not-in-view > .feature-box-text.-move-right,
.not-in-view > .feature-box-image.-move-right {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.not-in-view > .feature-box-text.-move-top,
.not-in-view > .feature-box-image.-move-top {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.not-in-view > .feature-box-text.-move-bottom,
.not-in-view > .feature-box-image.-move-bottom {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.in-view > .feature-box-text.-move,
.in-view > .feature-box-image.-move {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.feature-box-text video,
.feature-box-text img, .feature-box-image video,
.feature-box-image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.counter-boxes {
zoom: 1;
text-align: center;
margin: 3.125em 0;
}
.counter-boxes:before {
content: "";
display: table;
}
.counter-boxes:after {
content: "";
display: table;
clear: both;
}
.counter-boxes > h2 {
margin: 0 0 1.1875em 0;
font-size: 1.75em;
font-weight: bold;
color: inherit;
}
.-color-inverted .counter-boxes > h2 {
color: #ffffff;
}
.counter-boxes > h3 {
margin: 0 0 1.80952em 0;
font-size: 1.3125em;
color: #555555;
}
.-color-inverted .counter-boxes > h3 {
color: #bbbbbb;
}
.-color-inverted.-highlight-color .counter-boxes > h3 {
color: #001b1e;
}
.counter-boxes > h2 + h3 {
margin-top: -1.33333em;
}
.counter-boxes-item {
text-decoration: none;
color: inherit;
}
.counter-boxes-item:link:hover,
.counter-boxes-item:link:focus {
text-decoration: none;
}
.counter-boxes-item:link:hover:before,
.counter-boxes-item:link:focus:before {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.counter-boxes-item:before {
margin: 0;
font-size: 2.25em;
color: #555555;
}
.-color-inverted .counter-boxes-item:before {
color: #bbbbbb;
}
.-color-inverted.-highlight-color .counter-boxes-item:before {
color: #001b1e;
}
.counter-boxes-item p {
margin: 0.06944em -0.5em 0.16667em;
font-size: 4.5em;
line-height: 1;
color: #00a4b7;
font-weight: 300;
}
@media screen and (max-width: 1100px) {
.counter-boxes-item p {
font-size: 2.875em;
}
}
@media screen and (max-width: 900px) {
.counter-boxes-item p {
font-size: 2.25em;
}
}
.-color-inverted.-highlight-color .counter-boxes-item p {
color: #001b1e;
}
.counter-boxes-item h3 {
margin: 0;
font-size: 1.5em;
font-weight: bold;
color: inherit;
}
@media screen and (max-width: 1100px) {
.counter-boxes-item h3 {
font-size: 1.25em;
}
}
.counter-boxes-item h4 {
margin: 0.28571em 0 0;
font-size: 0.875em;
color: #555555;
}
.-color-inverted .counter-boxes-item h4 {
color: #bbbbbb;
}
.headline-box {
margin: 2.25em 0;
text-align: center;
}
.headline-box.-align-left {
text-align: left;
}
.headline-box.-align-right {
text-align: right;
}
.headline-box:before {
display: block;
width: 1.95455em;
height: 1.95455em;
margin: 0 auto 0.27273em auto;
border-radius: 100%;
font-size: 2.75em;
font-weight: normal;
line-height: 2.00023;
text-align: center;
background: #ffffff;
background: rgba(255, 255, 255, 0.6);
}
.-color-inverted .headline-box:before {
background: #353d47;
background: rgba(53, 61, 71, 0.6);
}
.headline-box h2 {
margin: 0;
font-size: 1.5em;
font-weight: normal;
color: inherit;
}
.-color-inverted .headline-box h2 {
color: inherit;
}
@media screen and (max-width: 900px) {
.headline-box h2 {
font-size: 1.3125em;
}
}
.headline-box h2.-bold {
font-weight: bold;
}
.headline-box h2.-small {
font-size: 1.5em;
}
.headline-box h2.-medium {
font-size: 2em;
}
@media screen and (max-width: 900px) {
.headline-box h2.-medium {
font-size: 1.5em;
}
}
.headline-box h2.-large {
font-size: 2.25em;
}
@media screen and (max-width: 900px) {
.headline-box h2.-large {
font-size: 1.75em;
}
}
.headline-box h2.-super-size {
font-size: 2.625em;
}
@media screen and (max-width: 900px) {
.headline-box h2.-super-size {
font-size: 2em;
}
}
.headline-box h3 {
margin: 0.44444em 0 0;
font-size: 1.125em;
font-weight: normal;
line-height: 1.5;
color: #555555;
}
.-color-inverted.-highlight-color .headline-box h3 {
color: #001b1e;
}
.-color-inverted .headline-box h3 {
color: #bbbbbb;
}
.headline-box h3.-small {
font-size: 1.125em;
}
.headline-box h3.-medium {
font-size: 1.5em;
}
@media screen and (max-width: 900px) {
.headline-box h3.-medium {
font-size: 1.3125em;
}
}
.headline-box h3.-large {
font-size: 1.75em;
}
@media screen and (max-width: 900px) {
.headline-box h3.-large {
font-size: 1.5em;
}
}
.headline-box h3.-super-size {
font-size: 2.25em;
}
@media screen and (max-width: 900px) {
.headline-box h3.-super-size {
font-size: 1.625em;
}
}
.headline-box.-button-inline h2,
.headline-box.-button-inline h3 {
display: inline;
}
@media screen and (max-width: 900px) {
.headline-box.-button-inline h2,
.headline-box.-button-inline h3 {
display: block;
}
}
h2 + .headline-box-link,
h3 + .headline-box-link {
margin-top: 1.92857em;
}
.headline-box-link.-quaternary {
color: inherit;
}
.-align-left > .headline-box-link {
float: right;
margin: -0.14286em 0 0 3.14286em;
}
@media screen and (max-width: 900px) {
.-align-left > .headline-box-link {
float: none;
margin: 0 0 1em;
}
}
.-align-right > .headline-box-link {
float: left;
margin: -0.14286em 3.14286em 0 0;
}
@media screen and (max-width: 900px) {
.-align-right > .headline-box-link {
float: none;
margin: 0 0 1em;
}
}
.-button-inline > .headline-box-link {
margin: 0 0 0 2.14286em;
}
@media screen and (max-width: 900px) {
.-button-inline > .headline-box-link {
margin: 1em 0 0;
}
}
.projects {
zoom: 1;
clear: both;
}
.projects:before {
content: "";
display: table;
}
.projects:after {
content: "";
display: table;
clear: both;
}
.projects-item {
position: relative;
float: left;
overflow: hidden;
border-top: 5px solid #e5e8ee;
color: inherit;
}
.projects-item:nth-of-type(even) {
border-top-color: #b2b9c4;
}
.projects-item.-large-col-1-1 {
width: 100%;
}
.projects-item.-large-col-2-1 {
width: 50%;
}
.projects-item.-large-col-3-1 {
width: 33.33333%;
}
.projects-item.-large-col-4-1 {
width: 25%;
}
.projects-item.-large-col-5-1 {
width: 20%;
}
.projects-item.-large-col-6-1 {
width: 16.66667%;
}
.projects-item.-large-col-7-1 {
width: 14.28571%;
}
.projects-item.-large-col-8-1 {
width: 12.5%;
}
.projects-item.-large-col-9-1 {
width: 11.11111%;
}
.projects-item.-large-col-10-1 {
width: 10%;
}
@media screen and (min-width: 1300px) {
.projects-item.-verylarge-col-1-1 {
width: 100%;
}
.projects-item.-verylarge-col-2-1 {
width: 50%;
}
.projects-item.-verylarge-col-3-1 {
width: 33.33333%;
}
.projects-item.-verylarge-col-4-1 {
width: 25%;
}
.projects-item.-verylarge-col-5-1 {
width: 20%;
}
.projects-item.-verylarge-col-6-1 {
width: 16.66667%;
}
.projects-item.-verylarge-col-7-1 {
width: 14.28571%;
}
.projects-item.-verylarge-col-8-1 {
width: 12.5%;
}
.projects-item.-verylarge-col-9-1 {
width: 11.11111%;
}
.projects-item.-verylarge-col-10-1 {
width: 10%;
}
}
@media screen and (max-width: 1100px) {
.projects-item.-medium-col-1-1 {
width: 100%;
}
.projects-item.-medium-col-2-1 {
width: 50%;
}
.projects-item.-medium-col-3-1 {
width: 33.33333%;
}
.projects-item.-medium-col-4-1 {
width: 25%;
}
.projects-item.-medium-col-5-1 {
width: 20%;
}
.projects-item.-medium-col-6-1 {
width: 16.66667%;
}
.projects-item.-medium-col-7-1 {
width: 14.28571%;
}
.projects-item.-medium-col-8-1 {
width: 12.5%;
}
.projects-item.-medium-col-9-1 {
width: 11.11111%;
}
.projects-item.-medium-col-10-1 {
width: 10%;
}
}
@media screen and (max-width: 900px) {
.projects-item.-small-col-1-1 {
width: 100%;
}
.projects-item.-small-col-2-1 {
width: 50%;
}
.projects-item.-small-col-3-1 {
width: 33.33333%;
}
.projects-item.-small-col-4-1 {
width: 25%;
}
.projects-item.-small-col-5-1 {
width: 20%;
}
.projects-item.-small-col-6-1 {
width: 16.66667%;
}
.projects-item.-small-col-7-1 {
width: 14.28571%;
}
.projects-item.-small-col-8-1 {
width: 12.5%;
}
.projects-item.-small-col-9-1 {
width: 11.11111%;
}
.projects-item.-small-col-10-1 {
width: 10%;
}
}
.projects-item h3 {
position: absolute;
bottom: -3.125em;
left: 0;
width: 100%;
margin: 0;
padding: 0.625em 0 0.6875em;
font-size: 1em;
font-weight: bold;
color: inherit;
text-align: center;
background: #ffffff;
background: rgba(255, 255, 255, 0.9);
-webkit-transition: bottom 0.4s ease-out;
-moz-transition: bottom 0.4s ease-out;
-o-transition: bottom 0.4s ease-out;
transition: bottom 0.4s ease-out;
}
.projects-item h3:before {
content: "";
position: absolute;
left: 50%;
top: -8px;
width: 0;
height: 0;
border: 8px solid transparent;
border-color: rgba(255, 255, 255, 0);
border-top: 0;
border-bottom-color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.9);
}
.projects-item:hover h3,
.projects-item:focus h3 {
bottom: 0;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.projects-item-image {
position: relative;
display: block;
overflow: hidden;
}
.projects-item-image img {
display: block;
width: 100%;
height: auto;
}
.projects-item-image-hover {
position: absolute;
top: -100%;
left: 0;
width: 100%;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
-o-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
}
.projects-item:hover .projects-item-image-hover,
.projects-item:focus .projects-item-image-hover {
top: 0;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.google-map {
position: relative;
padding-bottom: 56.25%;
}
.google-map > a,
.google-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-map > a {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #e5e3df;
}
.info-map {
position: relative;
clear: both;
}
.info-map-gmap {
height: 29.375em;
}
@media screen and (max-width: 900px) {
.info-map-gmap {
height: 20em;
/* Add area for touch scrolling */
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.info-map-gmap:hover ~ .info-map-boxes {
opacity: 0.2;
}
.info-map-gmap.-no-hover:hover ~ .info-map-boxes {
opacity: 1;
}
.info-map-gmap > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #e5e3df;
}
.info-map-boxes {
zoom: 1;
position: relative;
margin-top: -7.25em;
margin-bottom: 2.75em;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.info-map-boxes:before {
content: "";
display: table;
}
.info-map-boxes:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.info-map-boxes {
margin-top: 1.375em;
}
}
.info-map-boxes-item {
padding: 0.71429em 1.42857em;
border-radius: 0px;
font-size: 0.875em;
color: inherit;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 7px rgba(0, 0, 0, 0.15);
}
.info-map-boxes-item:before {
float: right;
margin: 0;
padding: 0.15152em 0 0.45455em 0.30303em;
font-size: 4.71429em;
color: #00a4b7;
background: #ffffff;
}
.info-map-boxes-item:hover,
.info-map-boxes-item:focus {
text-decoration: none;
}
.info-map-boxes-item h3 {
margin: 0.57143em 0;
padding: 0 0 0.21429em;
border-bottom: 1px solid #e5e8ee;
color: #00a4b7;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
}
.info-map-boxes-item p {
margin: 0.57143em 0;
}
.info-map-boxes-item-link {
color: #00a4b7;
}
.icon-buttons {
text-align: center;
margin: 2.25em 0;
}
.icon-buttons h3 {
margin: 0;
font-size: 1.125em;
font-weight: normal;
}
.icon-buttons ul {
margin: 1.25em 0;
padding: 0;
list-style: none;
}
.icon-buttons li {
display: inline;
}
.icon-buttons a {
display: inline-block;
width: 2.5em;
height: 2.5em;
overflow: hidden;
margin: 0 0.5em;
border: 2px solid #555555;
border-radius: 0px;
color: inherit;
text-indent: -99em;
line-height: 0;
}
.icon-buttons a:before {
content: none;
}
.icon-buttons a:after {
font: 1.5em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
line-height: 1.58375;
}
.icon-buttons a:hover,
.icon-buttons a:focus {
text-decoration: none;
background: #555555;
background: rgba(85, 85, 85, 0.25);
}
.-color-inverted .icon-buttons a {
border-color: #ffffff;
}
.-color-inverted .icon-buttons a:hover,
.-color-inverted .icon-buttons a:focus {
background: #ffffff;
background: rgba(255, 255, 255, 0.25);
}
.icon-links li {
padding-bottom: 0.4375em;
}
.icon-links a {
text-decoration: none;
}
.icon-links a:hover span {
text-decoration: underline;
}
.icon-links-label {
color: #00a4b7;
}
.tab-navigation {
margin: 2.25em 0 0;
border: 1px solid transparent;
border-bottom-color: #b2b9c4;
text-align: center;
}
.tab-navigation ul,
.tab-navigation li {
margin: 0;
padding: 0;
}
.tab-navigation ul {
display: table;
table-layout: fixed;
display: flex;
align-items: flex-end;
width: 100%;
}
@media screen and (max-width: 900px) {
.tab-navigation ul {
display: inline;
}
}
.tab-navigation li {
display: table-cell;
flex-grow: 1;
list-style-type: none;
vertical-align: bottom;
}
@media screen and (max-width: 900px) {
.tab-navigation li {
display: block;
}
}
.tab-navigation li:first-child a {
margin-left: -1px;
}
.tab-navigation a {
position: relative;
display: block;
margin: -1px -1px 0 0;
padding: 0.5625em 1.75em;
letter-spacing: 0.1em;
text-transform: uppercase;
outline: none;
border: 1px solid #b2b9c4;
border-bottom-width: 0;
background-color: #ffffff;
}
@media screen and (max-width: 900px) {
.tab-navigation a {
margin: 0 -1px;
}
}
.tab-navigation a:hover,
.tab-navigation a:focus {
text-decoration: none;
}
.tab-navigation a.is-active {
z-index: 1;
box-shadow: 0 10px 0 -1px #ffffff, 0 -3px #00a4b7, -3px 0 3px -1px rgba(0, 0, 0, 0.1), 3px 0 3px -1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 900px) {
.tab-navigation a.is-active {
border-color: #00a4b7;
color: #ffffff;
background: #00a4b7;
box-shadow: 0 1px #00a4b7;
}
}
.tab-navigation.-image-tabs {
border: 0;
}
.tab-navigation.-image-tabs ul,
.tab-navigation.-image-tabs li {
display: inline;
}
.tab-navigation.-image-tabs a {
display: inline-block;
margin: 0;
padding: 0.5625em 1.75em;
border: 0;
font-size: 1em;
color: inherit;
background: none;
}
.tab-navigation.-image-tabs a:hover,
.tab-navigation.-image-tabs a:focus {
color: #00a4b7;
}
.tab-navigation.-image-tabs a.is-active {
color: #00a4b7;
box-shadow: none;
}
.tab-navigation.-image-tabs a.is-active:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.4375em;
border: 0.4375em solid transparent;
border-top-color: #00a4b7;
border-bottom: 0;
}
.tab-navigation.-image-tabs a:before {
display: block;
margin: 0 auto 0.25em;
font-size: 3em;
color: #00a4b7;
}
.tab-navigation.-image-tabs a img {
display: block;
margin: 0 auto 0.75em;
}
.-columns-1 .tab-navigation-item {
width: 100%;
}
.-columns-2 .tab-navigation-item {
width: 50%;
}
.-columns-3 .tab-navigation-item {
width: 33.33333%;
}
.-columns-4 .tab-navigation-item {
width: 25%;
}
.-columns-5 .tab-navigation-item {
width: 20%;
}
.-columns-6 .tab-navigation-item {
width: 16.66667%;
}
@media screen and (max-width: 900px) {
.tab-navigation-item.tab-navigation-item {
width: auto;
}
}
.tab-start.-has-border {
margin-top: -1px;
border: 1px solid #b2b9c4;
padding-right: 2.5em;
padding-left: 2.5em;
}
/* ===========================================
* Modules (Search, FAQ, News, Events, Comments, Sitemap etc.)
* ======================================== */
.fixed-note {
position: fixed;
display: table;
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
min-height: 3.75em;
padding: 0.75em 1.25em 0.75em 5em;
padding-right: calc(1.25em + var(--safe-area-right));
padding-bottom: calc(0.75em + var(--safe-area-bottom));
padding-left: calc(5em + var(--safe-area-left));
border-top: 1px solid #b2b9c4;
z-index: 99;
background-color: #ffffff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1100px) {
.fixed-note {
position: relative;
padding-top: calc(0.75em + var(--safe-area-top));
padding-bottom: 0.75em;
}
}
@media screen and (max-width: 900px) {
.fixed-note {
display: block;
padding-left: 1.25em;
padding-left: calc(1.25em + var(--safe-area-left));
}
}
.fixed-note:before {
position: absolute;
top: 50%;
margin-top: -0.5em;
left: 0.83333em;
left: calc(0.83333em + var(--safe-area-left));
font-size: 2.25em;
color: #00a4b7;
}
@media screen and (max-width: 1100px) {
.fixed-note:before {
top: 0.66667em;
margin-top: 0;
}
}
@media screen and (max-width: 900px) {
.fixed-note:before {
position: static;
}
}
.fixed-note h1,
.fixed-note h2,
.fixed-note h3 {
font-size: 0.9375em;
margin: 0.4em 0;
}
.fixed-note p {
font-size: 0.875em;
margin: 0.42857em 0;
}
@media screen and (max-width: 900px) {
.fixed-note p {
font-size: 1em;
}
}
.fixed-note-column {
display: table-cell;
vertical-align: middle;
padding: 0 0.625em;
}
.fixed-note-column:last-child {
text-align: right;
}
@media screen and (max-width: 1100px) {
.fixed-note-column:last-child {
text-align: left;
}
}
@media screen and (max-width: 1100px) {
.fixed-note-column {
display: block;
margin: 0.75em 0;
padding: 0;
}
}
.fixed-note-link,
.fixed-note-button {
white-space: nowrap;
}
.fixed-note-button {
margin: 0;
}
.fixed-note-closed {
position: fixed;
right: 1.875em;
right: calc(1.875em + var(--safe-area-right));
bottom: 0;
bottom: var(--safe-area-bottom);
z-index: 99;
padding: 0.5em 0.75em;
color: #ffffff;
text-decoration: none;
background: #00a4b7;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1300px) {
.fixed-note-closed {
right: 0;
right: var(--safe-area-right);
}
}
@media screen and (max-width: 1100px) {
.fixed-note-closed {
position: absolute;
top: 0.75em;
top: calc(0.75em + var(--safe-area-top));
right: 0.75em;
right: calc(0.75em + var(--safe-area-right));
bottom: auto;
padding: 0.25em 0.75em;
font-size: 0.875em;
}
}
@media screen and (max-width: 900px) {
.fixed-note-closed {
font-size: 1em;
}
}
.fixed-note-closed:hover,
.fixed-note-closed:focus {
background-color: #007684;
}
.fixed-note-closed:before {
font: 100%/1 "RockSolid Icons";
content: "\e0a6";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
}
.fixed-note-closed > span {
display: none;
}
.mod_breadcrumb {
font-size: 0.8125em;
}
.mod_breadcrumb ul,
.mod_breadcrumb li {
display: inline;
margin: 0;
padding: 0;
}
.mod_breadcrumb li:before {
content: " \A0 / \A0 ";
}
.mod_breadcrumb li:first-child:before {
content: none;
}
.mod_breadcrumb a {
color: inherit;
text-decoration: underline;
}
.mod_breadcrumb a:hover {
text-decoration: none;
}
.back a:before,
.previous a:before,
.next a:after {
font: 0.75em/1 "RockSolid Icons";
content: "\e018";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
top: -0.16667em;
margin-right: 0.5em;
vertical-align: middle;
}
.next a:after {
content: "\e019";
margin-right: 0;
margin-left: 0.5em;
}
.pagination > p {
text-align: center;
}
.pagination ul {
list-style-type: none !important;
text-align: center;
}
.pagination li {
display: inline-block;
}
.pagination li a,
.pagination li strong,
.pagination li span {
padding: 4px 12px;
background-color: #ffffff;
}
.pagination li .current,
.pagination li .active {
border-bottom: 1px solid #e5e8ee;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}
.news-image-teaser {
position: relative;
margin: 2.25em 0;
padding-left: 12.5%;
}
@media screen and (max-width: 900px) {
.news-image-teaser {
padding-left: 0;
}
}
.news-image-teaser a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.news-image-teaser img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.news-image-teaser h2 {
display: block;
margin: 0.75em 0 0.25em;
padding: 0 0 0.41667em;
border-bottom: 1px solid #e5e8ee;
font-size: 1.5em;
font-weight: bold;
color: inherit;
}
.news-image-teaser h2 a {
color: inherit;
}
.news-image-teaser h2 a:hover {
color: #00a4b7;
text-decoration: none;
}
.news-image-teaser p {
margin: 0.625em 0;
color: #555555;
}
.news-image-teaser .news-image-teaser-info {
margin: 0 0 0.93333em;
font-size: 0.9375em;
color: #555555;
}
.news-image-teaser-meta {
float: left;
position: relative;
left: -12.5%;
width: 9.375%;
margin-bottom: -6.25em;
line-height: 1;
text-align: center;
border-right: 1px solid #e5e8ee;
}
@media screen and (max-width: 900px) {
.news-image-teaser-meta {
position: absolute;
top: 0;
left: 0;
width: 18.75%;
border-right: 0;
background: #ffffff;
}
.news-image-teaser-meta + h2 {
padding-top: 3.75em;
}
}
.news-image-teaser-meta time {
font-size: 2.125em;
font-weight: bold;
}
.news-image-teaser-meta b {
display: block;
margin: -0.05556em 0 0.44444em;
font-size: 0.52941em;
font-weight: inherit;
color: #555555;
text-transform: uppercase;
}
.news-image-teaser-meta .comment-count {
display: block;
padding: 0.25em 0;
border-top: 1px solid #e5e8ee;
color: #555555;
}
.news-image-teaser-meta .comment-count:before {
font: 100%/1 "RockSolid Icons";
content: "\e053";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
bottom: 0.0625em;
margin-right: 0.16667em;
font-size: 0.75em;
}
.news-image-teaser-meta .comment-count:hover {
color: #00a4b7;
text-decoration: none;
}
.news-list-boxed {
zoom: 1;
margin: 2.75em 0;
}
.news-list-boxed:before {
content: "";
display: table;
}
.news-list-boxed:after {
content: "";
display: table;
clear: both;
}
.news-list-boxed-item {
padding: 1.07143em;
border: 1px solid #b2b9c4;
border-radius: 0px;
font-size: 0.875em;
color: #555555;
}
.news-list-boxed-item h3 {
margin: 0.38095em 0 0;
font-size: 1.5em;
font-weight: bold;
line-height: 1.38143;
color: #333333;
}
.news-list-boxed-item h3 a {
color: inherit;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.news-list-boxed-item h3 a:hover {
color: #00a4b7;
text-decoration: none;
}
.news-list-boxed-item p {
margin: 1em 0;
}
.news-list-boxed-item .news-list-boxed-item-info {
margin-top: 0.66667em;
padding-bottom: 0.5em;
font-size: 0.85714em;
border-bottom: 1px solid #e5e8ee;
}
.news-list-boxed-item-image {
position: relative;
display: block;
overflow: hidden;
}
.news-list-boxed-item-image.-no-image {
padding-bottom: 56.81818%;
background: #717c8e;
}
.news-list-boxed-item-image:hover,
.news-list-boxed-item-image:focus {
opacity: 0.8;
}
.news-list-boxed-item-image:hover img,
.news-list-boxed-item-image:focus img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.news-list-boxed-item-image img {
display: block;
width: 100%;
height: auto;
}
.news-list-boxed-item-image time {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin: -0.77778em 0 0;
font-size: 2.57143em;
font-weight: bold;
color: #ffffff;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.news-boxes {
zoom: 1;
margin: 2.75em 0;
}
.news-boxes:before {
content: "";
display: table;
}
.news-boxes:after {
content: "";
display: table;
clear: both;
}
.news-boxes-item h3 {
margin: 0;
font-size: 1.125em;
font-weight: bold;
color: inherit;
}
.news-boxes-item h3 a {
display: block;
color: inherit;
text-decoration: none;
}
.news-boxes-item h3 a:hover,
.news-boxes-item h3 a:focus {
color: #00a4b7;
}
.news-boxes-item p {
margin: 0.5em 0;
}
.news-boxes-item .news-boxes-item-more {
position: relative;
margin: -0.9375em 0 0 0;
}
.news-boxes-item .news-boxes-item-more a {
position: relative;
top: 0;
display: block;
height: 2.0625em;
color: #ffffff;
color: transparent;
text-decoration: none;
background: #ffffff;
box-shadow: 0 -7px 10px -7px rgba(0, 0, 0, 0.2), 0 -8px 10px 7px rgba(255, 255, 255, 0.5);
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
.news-boxes-item .news-boxes-item-more a:after {
font: 1.5em/1 "RockSolid Icons";
content: "\e009";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 0;
left: 50%;
width: 3.66667em;
height: 100%;
margin: 0 0 0 -1.83333em;
padding: 0.20833em 0 0;
border: 1px solid #e5e8ee;
border-top: 0;
border-radius: 0 0 1px 1px;
color: #555555;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.news-boxes-item .news-boxes-item-more a:hover,
.news-boxes-item .news-boxes-item-more a:focus {
top: 1.25em;
}
.news-boxes-item .news-boxes-item-more a:hover:before,
.news-boxes-item .news-boxes-item-more a:focus:before {
content: "";
position: absolute;
top: -1.25em;
left: 0;
height: 1.25em;
width: 100%;
}
.news-boxes-item .news-boxes-item-more a:hover:after,
.news-boxes-item .news-boxes-item-more a:focus:after {
color: #00a4b7;
}
.news-boxes-item-image {
display: block;
overflow: hidden;
}
.news-boxes-item-image.-no-image {
padding-bottom: 56.81818%;
background: #717c8e;
}
.news-boxes-item-image:hover,
.news-boxes-item-image:focus {
opacity: 0.8;
}
.news-boxes-item-image:hover img,
.news-boxes-item-image:focus img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.news-boxes-item-image img {
display: block;
width: 100%;
height: auto;
}
.news-boxes-item-info {
margin: 0;
font-size: 0.875em;
color: #555555;
}
.main-content .mod_calendar {
margin: 1.5em 0;
}
.mod_calendar th.previous a:after,
.mod_calendar th.previous a:before,
.mod_calendar th.next a:after,
.mod_calendar th.next a:before {
display: none;
}
.mod_calendar th.current {
border-right: 0;
border-left: 0;
text-align: center;
}
.mod_calendar th.current:before {
font: 16px/1 "RockSolid Icons";
content: "\e037";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 6px;
}
.mod_calendar th.previous {
border-right: 0;
}
.mod_calendar th.next {
border-left: 0;
text-align: right;
}
.mod_calendar th.label {
font-size: 0.75em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.07143em;
}
@media screen and (max-width: 900px) {
.mod_calendar th.label > span {
display: none;
}
}
.mod_calendar td {
vertical-align: top;
width: 14.28571%;
}
@media screen and (max-width: 900px) {
.mod_calendar td {
text-align: center;
}
}
.mod_calendar td.today {
font-weight: bold;
background-color: #b2b9c4;
}
.mod_calendar .event {
font-size: 0.75em;
}
.mod_calendar .minicalendar td {
padding: 0.1875em;
text-align: center;
}
.mod_newsletterlist ul {
padding-left: 0;
list-style-type: none;
}
.mod_newsletterlist ul li {
border-bottom: 1px solid #b2b9c4;
padding: 0.5em 0;
}
.mod_newsletterlist ul li:before {
font: 100%/1 "RockSolid Icons";
content: "\e0ce";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
float: left;
margin: 0.3125em 0.375em 0 0;
color: #00a4b7;
}
.mod_newsletterlist ul a {
display: block;
font-size: 1.3125em;
}
.mod_eventlist > .header {
font-weight: bold;
}
.mod_eventlist .event > h2 {
margin-top: 0;
font-size: 1.5em;
}
.mod_faqlist ul {
list-style: none;
padding-left: 0;
}
.mod_faqlist li:before {
font: 100%/1 "RockSolid Icons";
content: "\e0f7";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.5em;
}
.mod_faqpage section {
margin: 2.25em 0;
padding-left: 4.5em;
}
.mod_faqpage h3 {
position: relative;
margin: 1em 0;
padding: 0.47619em 0 0.71429em;
border-bottom: 1px solid #e5e8ee;
font-size: 1.3125em;
}
.mod_faqpage h3:before,
.mod_faqpage h3 + *:before {
content: "Q";
position: absolute;
top: 0;
left: -2.57143em;
width: 1em;
padding: 0.35714em 0.39286em 0.42857em;
border-radius: 100%;
font-size: 1.33333em;
line-height: 1;
color: #ffffff;
text-align: center;
background: #00a4b7;
}
.mod_faqpage h3 + * {
position: relative;
}
.mod_faqpage h3 + *:before {
content: "A";
left: -3.75em;
font-size: 1em;
}
.mod_faqpage p {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.mod_faqpage .info {
font-size: 0.8125em;
color: #555555;
}
.mod_faqreader .info {
font-size: 0.8125em;
color: #555555;
}
.mod_search {
margin: 1.6875em 0;
}
.mod_search .widget {
display: inline;
}
.mod_search form input {
vertical-align: middle;
}
.mod_search form input[type="search"] {
width: 74.375%;
margin: 0;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
.mod_search form button[type="submit"],
.mod_search form input[type="submit"] {
width: 25%;
margin: 0 -2% 0 0;
}
@media screen and (max-width: 900px) {
.mod_search form button[type="submit"],
.mod_search form input[type="submit"] {
padding-right: 0;
padding-left: 0;
}
}
.mod_search .relevance {
float: right;
margin-top: 0.71429em;
font-size: 0.58333em;
}
.mod_search .header {
padding-bottom: 0.3125em;
border-bottom: 1px solid #b2b9c4;
color: #555555;
}
.mod_search .highlight {
padding: 0 0.25em;
font-weight: bold;
background: #ccecf0;
}
.mod_search .url {
padding-bottom: 1.42857em;
border-bottom: 1px dotted #b2b9c4;
font-size: 0.875em;
color: #555555;
}
.mod_search .url:before {
font: 100%/1 "RockSolid Icons";
content: "\e0b5";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.35714em;
}
.mod_search .url .filesize {
font-size: 0.85714em;
}
.comment_default {
margin: 1.6875em 0;
padding: 1.25em 6.25% 0;
border: 1px solid #b2b9c4;
border-radius: 0px;
font-size: 1em;
background: #ffffff;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.comment_default .info {
margin-top: 0;
border-bottom: 1px solid #b2b9c4;
}
.comment_default .reply {
margin-left: 6.66667%;
}
.comment_default .reply .info {
font-weight: bold;
}
.ce_comments .form {
margin-top: 2.25em;
}
.ce_comments .form .widget {
clear: none;
margin-top: 1.5em;
}
.ce_comments .form .widget:nth-of-type(-n+4) {
float: left;
width: 46.66667%;
}
@media screen and (max-width: 900px) {
.ce_comments .form .widget:nth-of-type(-n+4) {
width: 100%;
}
}
.ce_comments .form .widget:nth-of-type(-2n+4) {
margin-right: -1%;
margin-left: 6.66667%;
}
@media screen and (max-width: 900px) {
.ce_comments .form .widget:nth-of-type(-2n+4) {
margin-right: 0;
margin-left: 0;
}
}
.ce_comments .form .widget:nth-of-type(5) {
clear: both;
padding-top: 1.5em;
}
.ce_comments .form .widget input {
width: 100%;
}
.ce_comments .form .widget textarea {
width: 100%;
}
.ce_comments .form .checkbox_container {
margin: 0;
border: 0;
margin-top: -1.125em;
padding: 0;
}
.ce_comments h2 + .form,
.ce_comments h2 + .form > form {
margin-top: 0;
}
.mod_sitemap ul {
padding-left: 0;
list-style-type: none;
}
.mod_sitemap ul li:before {
content: none;
}
.mod_sitemap ul li li {
padding: 0.1875em 0 0.1875em 1.75em;
font-size: 1em;
}
.mod_sitemap ul li li.submenu ul {
margin: 0;
}
.mod_sitemap > ul > li:before {
font: 100%/1 "RockSolid Icons";
content: "\e083";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.625em;
color: #00a4b7;
}
.mod_sitemap a:before {
margin-right: 0.5em;
}
.mod_subscribe {
position: relative;
}
.mod_subscribe .widget {
display: inline;
}
.mod_subscribe input[type=text],
.mod_subscribe input[type=email] {
width: 75%;
}
@media screen and (max-width: 900px) {
.mod_subscribe input[type=text],
.mod_subscribe input[type=email] {
display: block;
width: 100%;
margin: 0 auto 0.625em;
}
}
.mod_subscribe .submit {
vertical-align: top;
overflow: hidden;
width: 20%;
margin-top: 0;
padding: 0.875em 1.25em 0.625em;
text-align: center;
}
@media screen and (max-width: 900px) {
.mod_subscribe .submit {
width: 100%;
}
}
.mod_subscribe.-centered {
text-align: center;
}
.centered-wrapper .mod_subscribe input[type=text],
.centered-wrapper .mod_subscribe input[type=email] {
width: 30%;
min-width: 16.25em;
}
.centered-wrapper .mod_subscribe .submit {
width: auto;
}
.sidebar .mod_subscribe input[type=text],
.sidebar .mod_subscribe input[type=email] {
width: 75%;
}
@media screen and (max-width: 900px) {
.sidebar .mod_subscribe input[type=text],
.sidebar .mod_subscribe input[type=email] {
display: inline;
margin: 0;
}
}
.sidebar .mod_subscribe .submit {
width: 20%;
padding: 1em 0 0.78571em;
text-indent: -99em;
line-height: 0;
}
.sidebar .mod_subscribe .submit:after {
font: 100%/1 "RockSolid Icons";
content: "\e0ce";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
left: 1px;
display: block;
font-size: 1.14286em;
}
/* ===========================================
* Sidebar / Widgets
* ======================================== */
.sidebar {
position: relative;
float: left;
width: 22.22222%;
margin: 2.5em 0 0 3.7037%;
font-size: 0.875em;
}
@media screen and (max-width: 1100px) {
.sidebar {
float: none;
clear: both;
width: auto;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 900px) {
.sidebar {
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.tao-sidebar-right .sidebar {
float: right;
margin-right: 3.7037%;
margin-left: 0;
}
@media screen and (max-width: 1100px) {
.tao-sidebar-right .sidebar {
float: none;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 900px) {
.tao-sidebar-right .sidebar {
margin-right: 5.55556%;
margin-left: 5.55556%;
}
}
.tao-3-columns .sidebar {
width: 18.51852%;
}
@media screen and (max-width: 1100px) {
.tao-3-columns .sidebar {
width: auto;
}
}
.tao-3-columns .sidebar.-right {
left: 51.85185%;
margin-right: -18.51852%;
}
@media screen and (max-width: 1100px) {
.tao-3-columns .sidebar.-right {
left: auto;
clear: none;
margin-right: 0;
}
}
@media screen and (max-width: 900px) {
.tao-3-columns .sidebar.-right {
margin-right: 5.55556%;
}
}
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4 {
margin: 2em 0 0.5em;
padding: 0 0 0.42857em;
font-size: 1em;
font-weight: bold;
color: #555555;
}
.sidebar p,
.sidebar ul,
.sidebar ol,
.sidebar table,
.sidebar blockquote,
.sidebar fieldset,
.sidebar form {
margin: 1em 0;
}
.sidebar ul,
.sidebar ol {
padding: 0;
list-style-type: none;
}
.sidebar > .block {
margin: 1.25em 0;
}
@media screen and (max-width: 1100px) {
.sidebar > .block {
float: left;
width: 41.66667%;
margin-left: 5.55556%;
}
}
@media screen and (max-width: 900px) {
.sidebar > .block {
float: none;
width: auto;
margin-left: 0;
}
}
.sidebar .ce_youtube-wrapper,
.sidebar .ce_vimeo-wrapper {
margin: 0.75em 0;
}
.sidebar .image_container {
margin: 0.75em 0 0;
padding: 0.5em;
}
@media screen and (max-width: 900px) {
.sub-navigation {
display: none;
}
}
.sub-navigation > ul > li > a {
color: #555555;
}
.sub-navigation ul {
margin: 0;
padding: 0;
}
.sub-navigation ul a,
.sub-navigation ul strong,
.sub-navigation ul span.trail,
.sub-navigation ul span.active,
.sub-navigation ul span.forward {
position: relative;
display: block;
margin: 0 -0.28571em;
padding: 0.28571em;
color: #555555;
-webkit-transition: background-color 0.6s ease-in, color 0.6s ease-in;
-moz-transition: background-color 0.6s ease-in, color 0.6s ease-in;
-o-transition: background-color 0.6s ease-in, color 0.6s ease-in;
transition: background-color 0.6s ease-in, color 0.6s ease-in;
}
.sub-navigation ul a:hover,
.sub-navigation ul strong:hover,
.sub-navigation ul span.trail:hover,
.sub-navigation ul span.active:hover,
.sub-navigation ul span.forward:hover {
border-radius: 0px;
color: #555555;
text-decoration: none;
background-color: #e5e8ee;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.sub-navigation ul a:before,
.sub-navigation ul strong:before,
.sub-navigation ul span.trail:before,
.sub-navigation ul span.active:before,
.sub-navigation ul span.forward:before {
margin-right: 0.42857em;
}
.sub-navigation ul a.active,
.sub-navigation ul strong.active,
.sub-navigation ul span.active {
color: #007684;
}
.sub-navigation ul a.trail,
.sub-navigation ul strong.trail,
.sub-navigation ul span.trail {
color: #00a4b7;
}
.sub-navigation ul ul {
margin-left: 0.85714em;
}
.sub-navigation li {
padding: 0.14286em 0.42857em;
border-top: 1px solid #e5e8ee;
}
.sub-navigation li:before {
content: none;
}
.sub-navigation li:first-child,
.sub-navigation li li li {
border: 0;
}
.sub-navigation li li {
margin-right: -0.42857em;
}
/* ===========================================
* Footer
* ======================================== */
.footer-bar {
padding: 1.71429em 0;
font-size: 0.875em;
color: #555555;
}
.footer-bar.-color-inverted {
color: #ffffff;
background: #353d47;
}
.footer-bar h1,
.footer-bar h2,
.footer-bar h3 {
margin: 1em 0;
padding-bottom: 0.21429em;
border-bottom: 1px solid #b2b9c4;
font-size: 1em;
font-weight: bold;
}
.footer-bar ul {
list-style: none;
padding: 0;
}
.footer-bar .widget {
margin: 1em 0;
}
.footer-bar label {
display: block;
}
.footer-bar input,
.footer-bar textarea,
.footer-bar select,
.footer-bar fieldset {
display: block;
width: 100%;
}
.footer-bar input[type=submit],
.footer-bar button {
margin-top: 0.375em;
}
.footer-bar textarea {
height: 6.25em;
}
.icon-text-block {
position: relative;
padding-left: 1.875em;
}
.icon-text-block:before {
position: absolute;
top: 0.21429em;
left: 0;
}
.footer-news h1,
.footer-news h2,
.footer-news h3 {
margin-bottom: 1.14286em;
}
.news-footer-item {
margin: 0.57143em 0;
min-height: 2.57143em;
}
.news-footer-item:hover time:before {
top: 0.4em;
}
.news-footer-item:hover b {
margin-top: 40px;
}
.news-footer-item time {
position: relative;
float: left;
width: 3.6em;
height: 3.6em;
padding: 0.6em 0 0;
overflow: hidden;
font-size: 0.71429em;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-transform: uppercase;
text-align: center;
background: #353d47;
}
.news-footer-item time:before {
font: 2em/1 "RockSolid Icons";
content: "\e0dd";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: -1em;
left: 0.4em;
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
.news-footer-item time b {
display: block;
font-size: 1.4em;
font-weight: inherit;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
transition: margin 0.2s ease-out;
}
.-color-inverted .news-footer-item time {
background: #ffffff;
color: #555555;
}
.news-footer-item a {
display: block;
line-height: 1.28571em;
}
.news-footer-item time + a {
padding-left: 3.1875em;
}
.footer-navigation {
float: left;
margin: 0;
font-size: 0.875em;
color: #555555;
}
@media screen and (max-width: 900px) {
.footer-navigation {
float: none;
padding: 0.5em 0;
text-align: center;
}
}
.footer-navigation ul,
.footer-navigation li {
display: inline;
margin: 0;
padding: 0;
}
.footer-navigation > ul > li:before {
font-size: 0.75em;
}
.footer-navigation > ul > li a,
.footer-navigation > ul > li strong,
.footer-navigation > ul > li span.trail,
.footer-navigation > ul > li span.active,
.footer-navigation > ul > li span.forward {
position: relative;
display: inline-block;
padding: 2.14286em 0;
margin-right: 3.14286em;
color: inherit;
}
@media screen and (max-width: 1100px) {
.footer-navigation > ul > li a,
.footer-navigation > ul > li strong,
.footer-navigation > ul > li span.trail,
.footer-navigation > ul > li span.active,
.footer-navigation > ul > li span.forward {
margin-right: 1.57143em;
}
}
@media screen and (max-width: 900px) {
.footer-navigation > ul > li a,
.footer-navigation > ul > li strong,
.footer-navigation > ul > li span.trail,
.footer-navigation > ul > li span.active,
.footer-navigation > ul > li span.forward {
margin: 0 0.78571em;
padding: 0.5em 0;
}
}
.footer-navigation > ul > li a:before,
.footer-navigation > ul > li strong:before,
.footer-navigation > ul > li span.trail:before,
.footer-navigation > ul > li span.active:before,
.footer-navigation > ul > li span.forward:before {
content: none;
}
.footer-navigation > ul > li a:after,
.footer-navigation > ul > li strong:after,
.footer-navigation > ul > li span.trail:after,
.footer-navigation > ul > li span.active:after,
.footer-navigation > ul > li span.forward:after {
content: "";
position: absolute;
top: auto;
bottom: -1px;
right: 50%;
left: 50%;
border-top: 2px solid #ffffff;
-webkit-transition: right 0.4s ease-out, left 0.4s ease-out;
-moz-transition: right 0.4s ease-out, left 0.4s ease-out;
-o-transition: right 0.4s ease-out, left 0.4s ease-out;
transition: right 0.4s ease-out, left 0.4s ease-out;
}
.footer-navigation > ul > li a:hover,
.footer-navigation > ul > li strong:hover,
.footer-navigation > ul > li span.trail:hover,
.footer-navigation > ul > li span.active:hover,
.footer-navigation > ul > li span.forward:hover {
text-decoration: none;
}
.footer-navigation > ul > li a:hover:after,
.footer-navigation > ul > li strong:hover:after,
.footer-navigation > ul > li span.trail:hover:after,
.footer-navigation > ul > li span.active:hover:after,
.footer-navigation > ul > li span.forward:hover:after {
right: 0;
left: 0;
-webkit-transition-duration: 0.1s, 0.1s;
-moz-transition-duration: 0.1s, 0.1s;
-o-transition-duration: 0.1s, 0.1s;
transition-duration: 0.1s, 0.1s;
}
.footer-icon-links {
float: right;
margin: 0;
padding: 0;
border-right: 1px solid #b2b9c4;
}
@media screen and (max-width: 900px) {
.footer-icon-links {
float: none;
border-right: 0;
text-align: center;
}
}
.footer-icon-links li {
display: inline;
}
.footer-icon-links a {
float: left;
position: relative;
width: 2.75em;
height: 5.0625em;
overflow: hidden;
border-left: 1px solid #b2b9c4;
line-height: 0;
/* Fixes Chrome bug */
letter-spacing: -1em;
color: #555555;
text-indent: -99em;
text-decoration: none;
}
@media screen and (max-width: 900px) {
.footer-icon-links a {
display: inline-block;
float: none;
height: 2.75em;
border-left: 0;
}
}
.footer-icon-links a:before,
.footer-icon-links a:after {
font: 1.375em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 0;
left: 0;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 0.04545em;
line-height: 3.68227;
letter-spacing: 0;
text-align: center;
background: #ffffff;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: top 0.5s ease-out;
}
@media screen and (max-width: 900px) {
.footer-icon-links a:before,
.footer-icon-links a:after {
line-height: 2.00045;
}
}
.footer-icon-links a:after {
top: 100%;
color: #ffffff;
background: transparent;
}
.footer-icon-links a:hover:before,
.footer-icon-links a:hover:after,
.footer-icon-links a:focus:before,
.footer-icon-links a:focus:after {
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
.footer-icon-links a:hover:before,
.footer-icon-links a:focus:before {
top: -100%;
}
.footer-icon-links a:hover:after,
.footer-icon-links a:focus:after {
top: 0;
}
.footer-copyright {
float: left;
margin: 0;
padding: 2.14286em 0;
font-size: 0.875em;
color: #555555;
}
.footer-copyright .rocksolid-copyright {
color: inherit;
opacity: 0.6;
}
@media screen and (max-width: 1100px) {
.footer-copyright {
float: none;
padding-bottom: 1em;
}
}
.footer-links {
float: right;
margin: 0;
padding: 2.14286em 0;
font-size: 0.875em;
color: #555555;
}
@media screen and (max-width: 1100px) {
.footer-links {
float: none;
padding-top: 0;
}
}
.footer-links ul,
.footer-links li {
display: inline;
margin: 0;
padding: 0;
}
.footer-links li:before {
content: "";
display: inline-block;
width: 1px;
height: 0.78571em;
margin: 0 0.57143em 0 0.35714em;
background: #555555;
}
.footer-links li:first-child:before {
content: none;
}
.footer-links a,
.footer-links strong,
.footer-links span.trail,
.footer-links span.active,
.footer-links span.forward {
color: inherit;
}
.footer-top-link {
position: relative;
display: block;
width: 2.875em;
height: 2.875em;
margin: 0 auto;
color: #555555;
white-space: nowrap;
}
.footer-top-link:after {
font: 1em/1 "RockSolid Icons";
content: "\e01a";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 0.9375em;
border: 1px solid #b2b9c4;
border-bottom: 0;
border-radius: 1px 1px 0 0;
text-align: center;
background: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
}
.footer-top-link > span {
position: absolute;
top: 0;
right: 0;
margin: 1em 0.71429em 0;
font-size: 0.875em;
color: #555555;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.footer-top-link > span + span {
right: auto;
left: 0;
}
.footer-top-link:hover,
.footer-top-link:focus {
/* Fixes IE bug */
text-decoration: none;
}
.footer-top-link:hover > span,
.footer-top-link:focus > span {
right: 100%;
opacity: 1;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.footer-top-link:hover > span + span,
.footer-top-link:focus > span + span {
right: auto;
left: 100%;
}
/* ===========================================
* Slider
* ======================================== */
.main-slider {
height: 600px;
}
@media screen and (max-width: 900px) {
.main-slider {
height: auto;
}
.main-slider img {
max-width: 100%;
height: auto;
}
}
.rsts-skin-testimonials .testimonial {
margin: 0;
}
.rsts-skin-testimonials.rsts-main {
position: relative;
margin: 1.6875em 0;
padding: 2em 0 0 0;
}
.rsts-skin-testimonials .rsts-header {
margin-top: -2em;
}
.rsts-skin-testimonials .rsts-header h1,
.rsts-skin-testimonials .rsts-header h2,
.rsts-skin-testimonials .rsts-header h3,
.rsts-skin-testimonials .rsts-header h4,
.rsts-skin-testimonials .rsts-header h5,
.rsts-skin-testimonials .rsts-header h6 {
margin: 0 0 1em;
padding: 0 5em;
font-size: 0.875em;
font-weight: bold;
color: #555555;
text-align: center;
}
.rsts-skin-testimonials .rsts-prev,
.rsts-skin-testimonials .rsts-next {
position: absolute;
top: -2.375em;
right: 1.375em;
overflow: hidden;
text-indent: -99em;
line-height: 0;
}
.rsts-skin-testimonials .rsts-prev:hover,
.rsts-skin-testimonials .rsts-prev:focus,
.rsts-skin-testimonials .rsts-next:hover,
.rsts-skin-testimonials .rsts-next:focus {
text-decoration: none;
}
.rsts-skin-testimonials .rsts-prev:after,
.rsts-skin-testimonials .rsts-next:after {
font: 0.875em/1 "RockSolid Icons";
content: "\e018";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
padding: 0.57143em;
color: #b2b9c4;
}
.rsts-skin-testimonials .rsts-prev:hover:after,
.rsts-skin-testimonials .rsts-prev:focus:after,
.rsts-skin-testimonials .rsts-next:hover:after,
.rsts-skin-testimonials .rsts-next:focus:after {
color: #959fae;
}
.rsts-skin-testimonials .rsts-next {
right: -0.5625em;
}
.rsts-skin-testimonials .rsts-next:after {
content: "\e019";
}
.rsts-skin-testimonials .rsts-nav {
position: absolute;
left: -4px;
top: 0;
line-height: 0;
}
.rsts-skin-testimonials .rsts-nav ul {
margin: 0;
padding: 0;
}
.rsts-skin-testimonials .rsts-nav li {
display: inline;
}
.rsts-skin-testimonials .rsts-nav a {
float: left;
width: 18px;
height: 18px;
overflow: hidden;
outline: none;
padding: 5px;
text-indent: -99em;
}
.rsts-skin-testimonials .rsts-nav a:after {
content: "";
display: block;
width: 6px;
height: 6px;
border: 1px solid #b2b9c4;
border-radius: 100%;
background: #b2b9c4;
background: rgba(178, 185, 196, 0.5);
}
.rsts-skin-testimonials .rsts-nav a:hover:after,
.rsts-skin-testimonials .rsts-nav a.active:after {
background-color: #b2b9c4;
}
.rsts-skin-testimonials .rsts-nav-prev,
.rsts-skin-testimonials .rsts-nav-next {
display: none !important;
}
.rsts-skin-tao.rsts-main {
position: relative;
}
.rsts-skin-tao .rsts-caption {
position: absolute;
top: 1.25em;
left: 1.25em;
padding: 0.1875em 0.625em;
color: white;
border-radius: 0px;
background-color: #555555;
opacity: 0;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.rsts-skin-tao .rsts-prev,
.rsts-skin-tao .rsts-next,
.rsts-skin-tao .rsts-video-play,
.rsts-skin-tao .rsts-video-stop {
position: absolute;
top: 50%;
left: 1.25em;
margin-top: -1.375em;
border-radius: 0px;
overflow: hidden;
text-indent: -99em;
line-height: 0;
background-color: #555555;
opacity: 0;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.rsts-skin-tao .rsts-prev:hover,
.rsts-skin-tao .rsts-prev:focus,
.rsts-skin-tao .rsts-next:hover,
.rsts-skin-tao .rsts-next:focus,
.rsts-skin-tao .rsts-video-play:hover,
.rsts-skin-tao .rsts-video-play:focus,
.rsts-skin-tao .rsts-video-stop:hover,
.rsts-skin-tao .rsts-video-stop:focus {
text-decoration: none;
}
.sidebar .rsts-skin-tao .rsts-prev,
.sidebar .rsts-skin-tao .rsts-next,
.sidebar .rsts-skin-tao .rsts-video-play,
.sidebar .rsts-skin-tao .rsts-video-stop {
bottom: 0.375em;
}
.rsts-skin-tao .rsts-prev:after,
.rsts-skin-tao .rsts-next:after,
.rsts-skin-tao .rsts-video-play:after,
.rsts-skin-tao .rsts-video-stop:after {
font: 0.875em/1 "RockSolid Icons";
content: "\e018";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
padding: 1.07143em;
color: white;
}
.rsts-skin-tao:hover .rsts-prev,
.rsts-skin-tao:hover .rsts-next,
.rsts-skin-tao:hover .rsts-nav,
.rsts-skin-tao:hover .rsts-caption {
opacity: 0.8;
}
.rsts-skin-tao:hover .rsts-prev:hover,
.rsts-skin-tao:hover .rsts-next:hover,
.rsts-skin-tao:hover .rsts-nav:hover,
.rsts-skin-tao:hover .rsts-caption:hover {
opacity: 1;
}
.rsts-skin-tao .rsts-next {
left: auto;
right: 1.25em;
}
.rsts-skin-tao .rsts-next:after {
content: "\e019";
}
.tao-fullwidth .tagline .rsts-skin-tao .rsts-prev {
left: 0;
left: var(--safe-area-left);
border-radius: 0 0px 0px 0;
}
.tao-fullwidth .tagline .rsts-skin-tao .rsts-next {
right: 0;
right: var(--safe-area-right);
border-radius: 0px 0 0 0px;
}
.rsts-skin-tao .rsts-nav {
position: absolute;
left: 0;
bottom: 12%;
width: 100%;
opacity: 0;
}
@media screen and (max-width: 900px) {
.rsts-skin-tao .rsts-nav {
bottom: 30px;
}
}
.rsts-skin-tao .rsts-nav ul {
/* Setting height to zero to fix click area */
height: 0;
margin: 0;
padding: 0;
text-align: center;
}
.rsts-skin-tao .rsts-nav li {
display: inline;
}
.rsts-skin-tao .rsts-nav a {
display: inline-block;
outline: none;
margin: 3px;
padding: 5px;
}
.rsts-skin-tao .rsts-nav-bullets a {
overflow: hidden;
width: 18px;
height: 18px;
padding: 6px;
line-height: 0;
text-indent: -99em;
}
.rsts-skin-tao .rsts-nav-bullets a:after {
content: "";
display: block;
width: 6px;
height: 6px;
border: 2px solid #555555;
border-radius: 100%;
background-color: white;
}
.rsts-skin-tao .rsts-nav-bullets a:hover:after,
.rsts-skin-tao .rsts-nav-bullets a.active:after {
background-color: #555555;
}
.rsts-skin-tao .rsts-nav-numbers a,
.rsts-skin-tao .rsts-nav-tabs a {
margin: 5px;
border: 2px solid #555555;
border-radius: 0px;
font-size: 0.8125em;
line-height: 0.61538em;
color: #555555;
background-color: white;
}
.rsts-skin-tao .rsts-nav-numbers a:hover,
.rsts-skin-tao .rsts-nav-numbers a.active,
.rsts-skin-tao .rsts-nav-tabs a:hover,
.rsts-skin-tao .rsts-nav-tabs a.active {
color: white;
background-color: #555555;
text-decoration: none;
}
.rsts-skin-tao .rsts-nav-thumbs a {
margin: 0;
padding: 0;
}
.rsts-skin-tao .rsts-nav-prev,
.rsts-skin-tao .rsts-nav-next {
display: none !important;
}
.rsts-skin-tao .rsts-video-play,
.rsts-skin-tao .rsts-video-stop {
opacity: 1;
}
.rsts-skin-tao .rsts-video-play {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: 5.25em;
height: 5.25em;
margin: -2.625em 0 0 -2.625em;
border: 3px solid #555555;
border-radius: 100%;
background-color: rgba(85, 85, 85, 0.6);
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.rsts-skin-tao .rsts-video-play:after {
content: "\25b6";
padding: 0;
margin-left: 0.21429em;
font-size: 1.75em;
line-height: 2.78571em;
text-align: center;
}
.rsts-skin-tao .rsts-video-play:hover {
background-color: #555555;
}
.rsts-skin-tao .rsts-video-stop {
top: 20px;
right: 20px;
left: auto;
margin-top: 0;
border-radius: 0px;
}
.rsts-skin-tao .rsts-video-stop:after {
content: "\d7";
color: white;
padding: 0.78571em;
}
.rsts-skin-tao .rsts-video-youtube > .rsts-video-stop {
top: 30px;
right: 10px;
background-color: #1b1b1b;
}
.rsts-skin-tao .rsts-video-youtube > .rsts-video-stop:hover {
background-color: #cc181e;
}
.rsts-skin-tao .rsts-video-vimeo > .rsts-video-stop {
top: 10px;
right: auto;
left: 10px;
background-color: #111a19;
}
.rsts-skin-tao .rsts-video-vimeo > .rsts-video-stop:hover {
background-color: #00adef;
}
.rsts-skin-tao .rsts-video-ipad > .rsts-video-iframe {
padding-top: 38px;
background-color: black;
}
.rsts-skin-tao .rsts-video-ipad > .rsts-video-stop {
top: 1px;
right: 10px;
left: auto;
}
.rsts-skin-tao.rsts-video-playing .rsts-nav,
.rsts-skin-tao.rsts-video-playing .rsts-prev,
.rsts-skin-tao.rsts-video-playing .rsts-next {
display: none;
}
.rsts-skin-tao.rsts-touch .rsts-nav {
opacity: 1;
}
.rsts-skin-tao .rsts-progress {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 2px;
background-color: black;
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.rsts-skin-tao .rsts-progress div {
height: 100%;
background-color: white;
}
.rsts-skin-tao .rsts-progress.rsts-progress-active {
opacity: 0.3;
}
.rsts-skin-testimonials-centered.rsts-main,
.rsts-skin-partner.rsts-main,
.rsts-skin-mega-dropdown.rsts-main {
position: relative;
margin: 2.25em 0;
}
.rsts-skin-testimonials-centered .rsts-view,
.rsts-skin-partner .rsts-view,
.rsts-skin-mega-dropdown .rsts-view {
padding: 0 3.75em;
}
@media screen and (max-width: 900px) {
.rsts-skin-testimonials-centered .rsts-view,
.rsts-skin-partner .rsts-view,
.rsts-skin-mega-dropdown .rsts-view {
padding-right: 1.875em;
padding-left: 1.875em;
}
}
.rsts-skin-testimonials-centered .rsts-nav ul,
.rsts-skin-partner .rsts-nav ul,
.rsts-skin-mega-dropdown .rsts-nav ul {
height: 0;
margin: 0;
}
.rsts-skin-testimonials-centered .rsts-prev,
.rsts-skin-testimonials-centered .rsts-next,
.rsts-skin-partner .rsts-prev,
.rsts-skin-partner .rsts-next,
.rsts-skin-mega-dropdown .rsts-prev,
.rsts-skin-mega-dropdown .rsts-next {
position: absolute;
top: 50%;
left: 0;
margin-top: -1em;
border: 1px solid #e5e8ee;
overflow: hidden;
text-indent: -99em;
line-height: 0;
background-color: #ffffff;
}
.rsts-skin-testimonials-centered .rsts-prev:hover,
.rsts-skin-testimonials-centered .rsts-prev:focus,
.rsts-skin-testimonials-centered .rsts-next:hover,
.rsts-skin-testimonials-centered .rsts-next:focus,
.rsts-skin-partner .rsts-prev:hover,
.rsts-skin-partner .rsts-prev:focus,
.rsts-skin-partner .rsts-next:hover,
.rsts-skin-partner .rsts-next:focus,
.rsts-skin-mega-dropdown .rsts-prev:hover,
.rsts-skin-mega-dropdown .rsts-prev:focus,
.rsts-skin-mega-dropdown .rsts-next:hover,
.rsts-skin-mega-dropdown .rsts-next:focus {
text-decoration: none;
}
.sidebar .rsts-skin-testimonials-centered .rsts-prev,
.sidebar .rsts-skin-testimonials-centered .rsts-next,
.sidebar .rsts-skin-partner .rsts-prev,
.sidebar .rsts-skin-partner .rsts-next,
.sidebar .rsts-skin-mega-dropdown .rsts-prev,
.sidebar .rsts-skin-mega-dropdown .rsts-next {
bottom: 0.375em;
}
.rsts-skin-testimonials-centered .rsts-prev:after,
.rsts-skin-testimonials-centered .rsts-next:after,
.rsts-skin-partner .rsts-prev:after,
.rsts-skin-partner .rsts-next:after,
.rsts-skin-mega-dropdown .rsts-prev:after,
.rsts-skin-mega-dropdown .rsts-next:after {
font: 0.875em/1 "RockSolid Icons";
content: "\e018";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
padding: 0.57143em;
color: #555555;
}
.rsts-skin-testimonials-centered .rsts-prev:hover:after,
.rsts-skin-testimonials-centered .rsts-prev:focus:after,
.rsts-skin-testimonials-centered .rsts-next:hover:after,
.rsts-skin-testimonials-centered .rsts-next:focus:after,
.rsts-skin-partner .rsts-prev:hover:after,
.rsts-skin-partner .rsts-prev:focus:after,
.rsts-skin-partner .rsts-next:hover:after,
.rsts-skin-partner .rsts-next:focus:after,
.rsts-skin-mega-dropdown .rsts-prev:hover:after,
.rsts-skin-mega-dropdown .rsts-prev:focus:after,
.rsts-skin-mega-dropdown .rsts-next:hover:after,
.rsts-skin-mega-dropdown .rsts-next:focus:after {
color: #3c3c3c;
}
.rsts-skin-testimonials-centered .rsts-next,
.rsts-skin-partner .rsts-next,
.rsts-skin-mega-dropdown .rsts-next {
left: auto;
right: 0;
}
.rsts-skin-testimonials-centered .rsts-next:after,
.rsts-skin-partner .rsts-next:after,
.rsts-skin-mega-dropdown .rsts-next:after {
content: "\e019";
}
.rsts-skin-testimonials-centered .rsts-nav-prev,
.rsts-skin-testimonials-centered .rsts-nav-next,
.rsts-skin-partner .rsts-nav-prev,
.rsts-skin-partner .rsts-nav-next,
.rsts-skin-mega-dropdown .rsts-nav-prev,
.rsts-skin-mega-dropdown .rsts-nav-next {
display: none !important;
}
.rsts-skin-testimonials-centered .rsts-nav,
.rsts-skin-partner .rsts-nav,
.rsts-skin-mega-dropdown .rsts-nav,
.rsts-skin-carousel .rsts-nav {
line-height: 0;
}
.rsts-skin-testimonials-centered .rsts-nav ul,
.rsts-skin-partner .rsts-nav ul,
.rsts-skin-mega-dropdown .rsts-nav ul,
.rsts-skin-carousel .rsts-nav ul {
padding: 0;
text-align: center;
}
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item,
.rsts-skin-partner .rsts-nav .rsts-nav-item,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item,
.rsts-skin-carousel .rsts-nav .rsts-nav-item {
display: inline;
}
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a,
.rsts-skin-partner .rsts-nav .rsts-nav-item a,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
overflow: hidden;
outline: none;
padding: 5px;
text-indent: -99em;
}
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a:after,
.rsts-skin-partner .rsts-nav .rsts-nav-item a:after,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a:after,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a:after {
content: "";
display: block;
width: 6px;
height: 6px;
border: 1px solid #b2b9c4;
border-radius: 100%;
background: #b2b9c4;
background: rgba(178, 185, 196, 0.5);
}
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a:hover,
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a.active,
.rsts-skin-partner .rsts-nav .rsts-nav-item a:hover,
.rsts-skin-partner .rsts-nav .rsts-nav-item a.active,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a:hover,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a.active,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a:hover,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a.active {
text-decoration: none;
}
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a:hover:after,
.rsts-skin-testimonials-centered .rsts-nav .rsts-nav-item a.active:after,
.rsts-skin-partner .rsts-nav .rsts-nav-item a:hover:after,
.rsts-skin-partner .rsts-nav .rsts-nav-item a.active:after,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a:hover:after,
.rsts-skin-mega-dropdown .rsts-nav .rsts-nav-item a.active:after,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a:hover:after,
.rsts-skin-carousel .rsts-nav .rsts-nav-item a.active:after {
background-color: #b2b9c4;
}
.rsts-skin-partner .rsts-nav {
margin: 1.5em 0;
}
.rsts-skin-mega-dropdown.rsts-main {
margin: 0;
}
.rsts-skin-mega-dropdown .rsts-view {
padding: 0;
}
.rsts-skin-mega-dropdown .rsts-prev {
left: -6%;
right: auto;
}
.rsts-skin-mega-dropdown .rsts-next {
left: auto;
right: -6%;
}
.rsts-skin-mega-dropdown .rsts-nav {
text-align: center;
}
.rsts-skin-carousel .rsts-nav ul {
margin: 0.375em 0;
}
.rsts-skin-carousel .rsts-prev,
.rsts-skin-carousel .rsts-next {
display: none !important;
}
.rsts-skin-carousel .rsts-nav-prev,
.rsts-skin-carousel .rsts-nav-next {
display: inline;
margin-right: 1.25em;
}
.rsts-skin-carousel .rsts-nav-prev a,
.rsts-skin-carousel .rsts-nav-next a {
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-indent: -99em;
line-height: 0;
}
.rsts-skin-carousel .rsts-nav-prev a:after,
.rsts-skin-carousel .rsts-nav-next a:after {
font: 1em/1 "RockSolid Icons";
content: "\e018";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
padding: 0.5em;
color: #555555;
}
.rsts-skin-carousel .rsts-nav-prev a:hover,
.rsts-skin-carousel .rsts-nav-prev a:focus,
.rsts-skin-carousel .rsts-nav-next a:hover,
.rsts-skin-carousel .rsts-nav-next a:focus {
text-decoration: none;
}
.rsts-skin-carousel .rsts-nav-prev a:hover:after,
.rsts-skin-carousel .rsts-nav-prev a:focus:after,
.rsts-skin-carousel .rsts-nav-next a:hover:after,
.rsts-skin-carousel .rsts-nav-next a:focus:after {
color: #3c3c3c;
}
.rsts-skin-carousel .rsts-nav-next {
margin-left: 1.25em;
margin-right: 0;
}
.rsts-skin-carousel .rsts-nav-next a:after {
content: "\e019";
}
.rsts-skin-light .rsts-nav {
position: absolute;
bottom: 20px;
margin: 0;
width: 100%;
}
/* ==========================================================
Biohof Warendorf · selbst gehostete Schriften
Umgezogen am 03.11.2026 aus files/tao/css/custom.css + files/tao/fonts/
in den Projektordner (Team-Wissen [69]/[211]): Ein Update des
TAO-Themes setzt files/tao/ zurück – hier ist nichts davon betroffen.
Keine Anfrage an Google: Die Dateien liegen auf dem eigenen Server.
Nur noch woff2 + woff (alle aktuellen Browser); eot/svg/ttf waren
Rückfälle für Internet Explorer und iOS bis Version 4.
font-display: swap – Text ist sofort lesbar, die Schrift wird
nachgeladen (Checkliste [239], Abschnitt 7).
========================================================== */
/* Jost 300 */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../../files/biohof-warendorf/fonts/jost-v14-latin-300.woff2') format('woff2'),
url('../../files/biohof-warendorf/fonts/jost-v14-latin-300.woff') format('woff');
}
/* Jost 400 */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../files/biohof-warendorf/fonts/jost-v14-latin-regular.woff2') format('woff2'),
url('../../files/biohof-warendorf/fonts/jost-v14-latin-regular.woff') format('woff');
}
/* Jost 700 */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../files/biohof-warendorf/fonts/jost-v14-latin-700.woff2') format('woff2'),
url('../../files/biohof-warendorf/fonts/jost-v14-latin-700.woff') format('woff');
}
/* Klee One 600 */
@font-face {
font-family: 'Klee One';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../files/biohof-warendorf/fonts/klee-one-v7-latin-600.woff2') format('woff2'),
url('../../files/biohof-warendorf/fonts/klee-one-v7-latin-600.woff') format('woff');
}
/* desktop-anpassungen.css */
.only-mobile{display: none}.homeheader .rs-column{margin: 0 !important; width: 50% !important}.homeheader .ce_image img{border: 1px solid #f5f5f5}.homeheader .ce_gallery ul li figcaption.caption{position: absolute;bottom: 30%;background: rgb(0,0,0,0.5);color: #fff}.homeheader .ce_gallery,.homeheader .ce_gallery ul{margin: 0 !important; padding: 0 !important}.homeheader .ce_gallery ul{border-top: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5}.homeheader .ce_gallery ul li{width: 50% !important; margin: 0 !important; border-bottom: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5}.mod_ticker .tickertext,.mod_ticker .msg-white,.mod_ticker .msg-white a{background-color: #fbb900 !important;color: #fff !important}.mod_ticker .msg-white{padding: 0.5rem 1rem}html{scroll-behavior: smooth}.margin-top-none,p.margin-top-none,.margin-top-none p{margin-top: 0 !important}.margin-bottom-none,p.margin-bottom-none,.margin-bottom-none p{margin-bottom: 0 !important}.fullwidth.ce_image .image_container,.fullwidth.ce_image .image_container img{display: block}.no-margin .rs-column{margin-top: 0 !important;margin-bottom: 0 !important}.no-margin .rs-column .icon-text-block p{margin-top: 0 !important;margin-bottom: 1rem !important}.white,.white a,a.white,p.white,.white p{color: #fff !important}.wieh2.white{font-family: Jost, sans-serif !important;background: none !important;display: block !important;-moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;padding: 0 !important;margin-bottom: 0.3em !important;text-transform: none !important;font-weight: normal !important;color: #fff !important}.wieh2{font-family: Jost, sans-serif !important;background: none !important;display: block !important;-moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;padding: 0 !important;margin-bottom: 0.3em !important;text-transform: none !important;font-weight: normal !important;color: #333 !important}.gelb.icon-text-block::before{color: #fbb900}.gelb.ce_table th{background-color: #fbb900 !important;color: #fff !important}.main-content .gelb.lwhead.ce_table tr.even{background: rgb(251,185,0,0.15) !important}.gelb.lwhead.ce_table th{background-image: url("../../files/biohof-warendorf/bilder-content/home/banner-landwirtschaft.png");background-position: left top;background-repeat: no-repeat;padding-top: 63px !important;background-size: cover}.main-content .ce_table th,.main-content .ce_table td{vertical-align:top;white-space:normal}.main-content .ce_table td{font-size: 0.875rem}.main-content .ce_table tr.even{background: #eee}.main-content .ce_table td a{color: #333}hr.no-border{border: none !important}.links-liste p{padding-top: 1rem}.box-grey.teaser-boxes .teaser-boxes-item{background: #eee}.box-grey.teaser-boxes .teaser-boxes-item a.button{background: #fff}.team-boxes-item h3{padding-top: 1rem}.team-boxes-item h4{font-size: 1.15em;border-bottom: 1px solid #b2b9c4;padding-bottom: 0.5rem;margin-bottom: 1rem}.white .team-boxes-item h4{color: #fff !important}.white .team-boxes-item a{color: #fff !important}.team-boxes-item p{color: #2d91cf}.team-boxes-item p,ul.team-boxes-social-links li{position: relative;padding-left: 2.25em}.team-boxes-item p::before{position: absolute; top: 0; left: 0; font: 100%/1 "RockSolid Icons"; text-rendering: geometricPrecision; text-indent: 0; display: inline-block; margin-right: 0.25em; content: ""; background: #fbb900 !important; color: #fff !important; padding: 0.25rem}ul.team-boxes-social-links li a{display: block;color: #333 !important}.team-boxes-item a{color: #333 !important}ul.team-boxes-social-links li a::before{position: absolute;top: 0;left: 0;background: #fbb900 !important;color: #fff !important;padding: 0.25rem}ul.team-boxes-social-links{list-style: none;padding-left: 0}.mod_newslist.newsliste .layout_latest{border-bottom: 1px solid #b2b9c4;margin-bottom: 2.5rem;padding-bottom: 2.5rem;clear: both;display: inline-block}.mod_newslist.newsliste .image_container.float_above{margin-top: 0;margin-right: 4%;float: left;width: 30%;max-width: none;padding: 0}.mod_newslist.newsliste .layout_latest .rechte-spalte{width: 66%;float: right}.mod_newslist.newsliste .layout_latest h2{font-size: 1.25em !important;font-weight: bold !important;margin-top: 0 !important}.mod_newslist.news-list-boxed.newsbox-white article.news-list-boxed-item{background: #fff !important;border: 1px solid #e2a600 !important}.mod_newslist.news-list-boxed.newsbox-white article.news-list-boxed-item h3{font-size: 1.25em;padding-top: 0.5em;padding-bottom: 0.5em;border-bottom: 1px solid #b2b9c4}.mod_newslist.news-list-boxed.newsbox-white article.news-list-boxed-item h3 a{color: #00a4b7}.mod_newslist.news-list-boxed p.news-image-teaser-more.button.-single.white a:hover{text-decoration: none !important}.mod_newsreader h1{font-size: 1em !important}.mod_newsreader p.back{border-top: 1px solid #b2b9c4;margin-top: 3rem;padding-top: 1rem}.main-content{hyphens: auto}h2,h3,h4,h5,h6{color: #333 !important}.highlight-box{border: 0 !important;background: #00a4b7 !important;color: #fff !important;padding: 0.5em 1em}.naturschutzboxen h3{color: #00a4b7 !important}.naturschutzboxen .teaser-boxes-item{background: #f5f5f5}.header-links.ab700px,.header-links.mobil{display: none !important}.headergalerie.ce_gallery,.headergalerie.ce_gallery ul,.headergalerie.ce_gallery ul li{margin: 0 !important;padding: 0 !important}.headergalerie.ce_gallery ul{border-left: 1px solid #fff}.headergalerie.ce_gallery ul li{width: 25% !important;border-right: 1px solid #fff}.galerie-8.ce_gallery,.galerie-8.ce_gallery ul,.galerie-8.ce_gallery ul li,.galerie-8.ce_gallery ul li .image_container,.galerie-8.ce_gallery ul li img{margin: 0 !important;padding: 0 !important}.galerie-8.ce_gallery ul{border-left: 1px solid #fff;border-bottom: 1px solid #fff}.galerie-8.ce_gallery ul li{width: 12.5% !important;border-right: 1px solid #fff;border-top: 1px solid #fff}.links-galerie.ce_gallery ul li figure.image_container{margin-right:auto;margin-left:auto;text-align:center;background: #fff !important}.main-content .ce_table td,.main-content .ce_table th,footer.page-footer table td,footer.page-footer table th{vertical-align:top;white-space:normal}.button,button,.submit{border-radius: 0 !important;text-shadow: none !important;letter-spacing: 0.025rem}.demeterlogo{margin-right: calc(3.7037% + var(--safe-area-left))}.lw-buttons img{height: 100px !important;width: auto !important;text-align: center !important;margin-left: auto !important;margin-right: auto !important}.lw-buttons h3{color: #fff !important;font-size: 0.875em;line-height: 1;padding: 0.5em;font-weight: normal;text-transform: uppercase;letter-spacing: 0.05em}.lw-buttons .teaser-boxes-item a.image-wrapper{margin-bottom: 0.5em !important}.main-navigation{margin-right: calc(3.7037% + var(--safe-area-left));padding-right: 0}#main-navigation > ul li strong{background: #fff !important}nav#main-navigation.mod_rocksolid_mega_menu.main-navigation ul.level_1 li.trail a.trail{background: #fff !important}h1{font-family: Klee One, sans-serif !important;background: #00a4b7 !important;display: inline-block !important;-moz-box-shadow: 0.5rem 0.5rem 0px #fbb900 !important;-webkit-box-shadow: 0.5rem 0.5rem 0px #fbb900 !important;box-shadow: 0.5rem 0.5rem 0px #fbb900 !important;padding: 0.3rem 1.05rem 0.7rem 1rem !important;margin-bottom: 3rem !important;color: #fff !important;text-transform: uppercase !important}.fullwidth-image .image_container,.fullwidth-image .image_container img{width: 100% !important;height: auto !important}.home-iconboxen .rs-column{width: 25% !important;margin-right: 0}.home-iconboxen{margin-top: -40px !important}.ce_rsce_tao_icon_boxes.home-iconboxen a.icon-boxes-item{border: 1px solid rgba(255, 255, 255, 1)}.ce_rsce_tao_icon_boxes.home-iconboxen a.icon-boxes-item::before{background: #fbb900 !important;opacity: 1 !important;opacity: 0;-webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none;-webkit-transition-delay: unset;-moz-transition-delay: unset;-o-transition-delay: unset;transition-delay: unset}.icon-boxes-item p.boxheadline{color: #ffffff;margin: 0 0 0.66667em;font-family: Jost, sans-serif;font-style: normal;font-size: 1.5em;line-height: 1.5}.footer-bar h3{font-size: 1.1em !important}footer.page-footer .icon-text-block a,footer.page-footer .news-footer-item a{color: #555}footer.page-footer .news-footer-item time{background: #00a4b7 !important;color: #00a4b7 !important}.news-footer-item time::before{top: 0.4em !important;color: #fff !important}footer.page-footer .news-footer-item{border-bottom: 1px solid #b2b9c4;padding-bottom: 1em;margin-bottom: 1em;hyphens: auto}.footer-top-link{position: fixed;bottom: 0.5rem;right: 0.5rem}.footer-top-link::after{border-radius: 100%;border-bottom: 1px solid #b2b9c4;background: rgb(255,255,255,0.75) !important}.footer-top-link > span{display: none !important}footer.page-footer .ustid p,.footer-links{padding: 2.14286rem 0 !important;margin: 0 !important}
@media screen and (max-width : 1300px){
/* mobil-1300px.css */
section.icon-boxes.home-iconboxen a.icon-boxes-item.rs-column .icon-boxes-item-text,section.icon-boxes.home-iconboxen a.icon-boxes-item.rs-column p.icon-boxes-item-link.button{display: none !important}.lw-banner.padding-top-xl{padding-top: 3rem !important}
}
@media screen and (max-width : 1100px){
/* mobil-1100px.css */
.padding-right-xxs,.padding-right-xs,.padding-right-s,.padding-right-m,.padding-right-l,.padding-right-xl,.padding-right-xxl{padding-right: 0 !important}.padding-left-xxs,.padding-left-xs,.padding-left-s,.padding-left-m,.padding-left-l,.padding-left-xl,.padding-left-xxl{padding-left: 0 !important}.page-header.is-fixed{position: absolute}.header-links{float: left}.centered-wrapper.ce_rsce_tao_centered_wrapper_start.lw-banner .centered-wrapper-background{background-size: 1600px !important}.lw-banner.padding-top-xl{padding-top: 5rem !important}footer.page-footer .ustid,.footer-links{float: none;clear: both}footer.page-footer .ustid p{padding-bottom: 0 !important}.footer-links{padding-top: 0.5rem !important}
}
@media screen and (max-width : 900px){
/* mobil-900px.css */
.only-mobile{display: block}.homeheader .rs-column{width: 100% !important}.homeheader .ce_gallery ul li{width: 25% !important; float: left; clear: none}.hide-mobile{display: none !important}.header-bar{display: block}.main-navigation-mobile-open{top: 90px !important;background: #fbb900}.icon-boxes-item p.boxheadline{font-size: 1.25em}.mobil-border .icon-boxes-item{border-top: 1px solid #b2b9c4;padding-top: 1.5em}.lw-banner.padding-top-xl{padding-top: 9rem !important}.galerie-8.ce_gallery ul li{width: 25% !important}.ce_gallery ul li{width: 48.5% !important}.ce_gallery.footergalerie ul li{width: 9.77777% !important}.ce_gallery.footergalerie ul.cols_3 li.row_2.row_last.even.col_2.col_last{margin-right: -5px}.ce_gallery.footergalerie ul li{width: 9.77777%}
}
@media screen and (max-width : 700px){
/* mobil-700px.css */
.header-links.desktop{display: none !important}.header-links.ab700px{display: block !important}.icon-boxes-item p.boxheadline{font-size: 1.05em}.tao-no-sidebar .lw-buttons .rs-column.-large-last{margin-right: -5px !important}.tao-no-sidebar .lw-buttons .rs-column{width: 47% !important}
}
@media screen and (max-width : 600px){
/* mobil-600px.css */
.homeheader .ce_gallery ul li{width: 50% !important}.homeheader.ce_image .image_container{height: 410px !important;width: 100% !important;overflow: hidden !important}.homeheader.ce_image .image_container img{height: 100% !important;width: auto !important;object-fit: cover;object-position: top center}.main-content h1{font-size: 1.5rem}.header-links.ab700px{display: none !important}.header-links.mobil{display: block !important}.centered-wrapper.ce_rsce_tao_centered_wrapper_start.lw-banner .centered-wrapper-background{background-size: 850px !important}.lw-banner.padding-top-xl{padding-top: 4rem !important}.ce_rsce_tao_icon_boxes.home-iconboxen a.icon-boxes-item{text-align: center !important;padding-left: 0 !important;padding-right: 0 !important;padding-bottom: 0.5em !important}.ce_rsce_tao_icon_boxes.home-iconboxen a.icon-boxes-item::before{font-size: 1.5em}.headergalerie.ce_gallery ul li{width: 50% !important;border-bottom: 1px solid #fff}.ce_gallery.footergalerie ul li{width: 32.3333% !important}.ce_gallery.footergalerie ul li.row_0:nth-child(3),.ce_gallery.footergalerie ul li.row_1:nth-child(6){margin-right: -5px !important}
}
@media screen and (max-width : 450px){
/* mobil-450px.css */
.logo img{max-height: 3em}.header-bar-inner{padding-left: 1rem;padding-right: 1rem}.demeterlogo{margin-right: 0 !important}.ce_rsce_tao_icon_boxes.home-iconboxen a.icon-boxes-item::before{font-size: 1.25em}.icon-boxes-item p.boxheadline{font-size: 0.8em}.galerie-8.ce_gallery ul li{width: 50% !important}
}
@media screen and (max-width : 390px){
/* mobil-390px.css */
.main-navigation-mobile-open{top: 80px !important}.header-bar-inner{padding-left: 0.5rem;padding-right: 0.5rem}.logo img{max-height: 2.5em}.ce_image.demeterlogo figure.image_container,.ce_image.demeterlogo figure.image_container img{height: 25px !important;width: auto !important}
}
/* ==========================================================
VM Component Library · Biohof Warendorf (übernommen von Ortkras, 03.11.2026)
Component: VM Iconbox / Grid / Card Base
CMS: Contao 5.7 · Theme: RockSolid TAO (Stand Oktober 2022)
Breakpoints an die RockSolid-Spalten von TAO angepasst:
Tablet ≤1100px / Mobil ≤900px / Mobil klein ≤600px
(Library-Standard wäre Tablet ≤1280px – hier würden die Boxen sonst
zwischen 1100 und 1280px anders umbrechen als der Rest der Seite.)
Basis für custom_vm_teaser_boxes.css – nie allein ersetzen.
Die Biohof-Optik der einzelnen Boxgruppen (Startseite) steht in
custom_vm_biohof_boxen.css.
Farbschema Biohof (aus TAO main.css / Theme-Assistent):
- Primär: Türkis #00a4b7 (Links, Überschriften der Karten)
- Akzent: Gelb #fbb900 (Icons, Buttons „-secondary“)
- Text: #555555
- Flächen: Hellgrau #f5f5f5, Rahmen #b2b9c4
Eckig (Radius 0) und ohne Schatten wie das TAO-Theme.
========================================================== */
:root {
--vm-text: #555555;
/* Kontrast (WCAG 1.4.3): #555 auf Weiß 7,5:1, auf #f5f5f5 6,9:1.
Türkis #00a4b7 auf Weiß nur 3,0:1 -> nur für große/fette Schrift
(Kartentitel), wie bisher im Theme. */
--vm-primary: #00a4b7;
--vm-primary-dark: #008d9e;
--vm-primary-hover: #008d9e;
--vm-brand: #00a4b7;
--vm-white: #ffffff;
--vm-page-bg: #ffffff;
--vm-accent: #fbb900;
--vm-accent-dark: #e2a600;
/* Flächen */
--vm-surface: #f5f5f5;
--vm-surface-light: #fafafa;
--vm-surface-icon: #fbb900;
/* Rahmen & Grautöne */
--vm-border: #b2b9c4;
--vm-border-accent: #b2b9c4;
--vm-border-neutral: #e5e8ee;
--vm-grey: #eeeeee;
--vm-border-strong: #767676;
--vm-focus-ring: #00a4b7;
/* Effekte & Maße – TAO: eckig, flach */
--vm-shadow: none;
--vm-shadow-hover: none;
--vm-radius: 0;
--vm-radius-small: 0;
--vm-gap: 4cqw; /* = RockSolid-Spaltenabstand (4 % der Inhaltsbreite) */
--vm-card-padding: 1.42857em; /* = TAO .-boxed (bei 0.875em Kartenschrift) */
--vm-transition: 220ms ease;
}
/* ----------------------------------------------------------
Component wrapper
---------------------------------------------------------- */
.vm-component,
.vm-component * {
box-sizing: border-box;
}
.vm-component {
color: var(--vm-text);
}
.vm-component-headline {
margin: 0 0 1.75rem;
color: var(--vm-primary); /* Überschriften in Dunkelblau */
font-weight: 700;
line-height: 1.18;
text-transform: none;
}
/* ----------------------------------------------------------
Grid engine
---------------------------------------------------------- */
.vm-grid {
display: grid;
gap: var(--vm-gap);
align-items: stretch;
}
.vm-grid.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vm-grid .span-2 { grid-column: span 2; }
.vm-grid .span-3 { grid-column: span 3; }
.vm-grid .span-4 { grid-column: span 4; }
.vm-grid .span-5 { grid-column: span 5; }
.vm-grid .span-6 { grid-column: 1 / -1; }
/* ----------------------------------------------------------
Card base
---------------------------------------------------------- */
.vm-card {
position:relative;
min-width: 0;
height: 100%;
color: var(--vm-text);
border-radius: var(--vm-radius);
border: 1px solid var(--vm-border-accent);
background: var(--vm-surface);
box-shadow: var(--vm-shadow);
overflow: hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
/* Ortkras: keine Akzentlinie oben an den Karten (donum hat hier eine
4px-Leiste – passt nicht zum Ortkras-Design, 23.10.2026) */
.vm-card h3 {
color: var(--vm-text); /* Card-Überschriften in #333 (nicht Akzent) */
line-height: 1.25;
margin: 0 0 .75rem;
}
.vm-card:hover {
transform: translateY(-2px);
box-shadow:
0 18px 38px rgba(0,0,0,.08);
border-color: rgba(0, 164, 183, .35);
}
.vm-card-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--vm-card-padding);
}
.vm-card-body {
flex: 1 1 auto;
min-width: 0;
}
/* ==========================================================
Kartenfarben
Primär = hellgraue Karte · plus neutrale Varianten
========================================================== */
/* --- Getönte Karte (Primär / Standard) = Hellgrau ---------- */
.vm-card--green {
background: var(--vm-surface);
border: 1px solid var(--vm-border-accent);
}
.vm-card--white {
background: var(--vm-white);
border: 1px solid var(--vm-border-neutral);
}
.vm-card--border {
background: var(--vm-white);
border: 1px solid var(--vm-border-accent);
}
.vm-card--plain {
background: transparent;
border: none;
box-shadow: none;
}
.vm-card--plain:hover {
transform: none;
box-shadow: none;
}
.vm-card--bare {
background: transparent;
border: none;
box-shadow: none;
}
/* Eine randlose Karte soll sich wie normaler Fließtext verhalten: kein
Hintergrund, kein Rahmen – und auch kein Innenabstand. Mit den 2,15rem
aus --vm-card-padding oben und unten stand zwischen zwei Zeilen eines
zweispaltigen Rasters sonst die Rasterlücke PLUS 2 x 34px, was wie ein
Abschnittswechsel aussah statt wie ein Listenabstand. (19.09.2026) */
.vm-card--bare .vm-card-inner {
padding: 0;
}
.vm-card--bare::before {
display: none; /* hebt die obere Akzentlinie auf */
}
/* Rundung UND Beschnitt aufheben. .vm-card bringt `border-radius: 20px`
zusammen mit `overflow: hidden` mit – sinnvoll, solange die Karte eine
Fläche hat, deren Ecken rund beschnitten werden sollen. Die randlose
Karte hat keine Fläche, dafür aber `padding: 0` (s. oben): Der Inhalt
liegt damit exakt auf der Kartenkante, und die runde Ecke schneidet ihm
oben links ein Stück heraus – sichtbar am Iconfeld der Variante „Icon
klein neben Überschrift" und an langen Zeilen in den Ecken. Ohne Fläche
gibt es nichts zu runden und nichts zu beschneiden. (21.09.2026) */
.vm-card--bare {
border-radius: 0;
overflow: visible;
}
.vm-card--bare:hover {
transform: none;
box-shadow: none;
}
.vm-card--custom-color {
border-color: rgba(0, 0, 0, 0.08);
}
.vm-card--inverted,
.vm-card--inverted .vm-card-title,
.vm-card--inverted .vm-card-text,
.vm-card--inverted .vm-card-text * {
color: var(--vm-white);
}
/* ==========================================================
Iconfarbe abhängig vom Kartentyp
========================================================== */
/* Getönte Karte -> weißes Iconfeld */
.vm-card--green .vm-card-icon {
background:var(--vm-white);
}
/* Weiße/rahmenlose Karten -> hellblaues Iconfeld */
.vm-card--white .vm-card-icon,
.vm-card--border .vm-card-icon,
.vm-card--plain .vm-card-icon {
background: var(--vm-surface-icon);
}
/* Optional: „Icon invertiert" auf der getönten Karte -> dunkelblaues Feld */
.vm-card.vm-card--green.-inverted-icon .vm-card-icon { background: var(--vm-primary); }
/* ----------------------------------------------------------
Iconbox
---------------------------------------------------------- */
.vm-iconbox-item {
text-decoration: none;
}
.vm-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
color: var(--vm-primary);
background: var(--vm-surface-icon);
/* Radius in Prozent statt fest: So bleibt die Rundung bei JEDER
Icon-Größe gleich stark. Vorher standen hier 9px – auf dem 64px-Icon
der Variante „Icon neben Überschrift" waren das 14 %, während das
kleine Icon (46px) und das Badge (87px) bei 27–28 % lagen. Das Icon
wirkte dadurch deutlich eckiger als alle anderen. (19.09.2026) */
border-radius: 27%;
transition:
background .25s ease,
color .25s ease,
transform .25s ease,
box-shadow .25s ease;
box-shadow: inset 0 0 0 1px rgba(0, 164, 183, .08);
}
.vm-card-icon span {
display: inline-flex;
line-height: 1;
color: inherit;
}
.vm-card-icon span::before {
content: attr(data-icon);
font: 100%/1 "RockSolid Icons";
font-size: 1.75rem;
line-height: 1;
color: var(--vm-primary);
margin-right: 0;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vm-card-title {
margin: 0 0 0.75rem;
color: var(--vm-text); /* Card-Überschriften in #333 (nicht Akzent) */
font-size: clamp(1.35rem, 1.1vw, 1.75rem);
font-weight: 700;
line-height: 1.22;
text-transform: none;
/* Auch lange Überschriften-Komposita (z. B. „Schwangerschaftskonflikt-
beratung") sauber trennen – aber nur sehr lange Wörter (ab 10 Zeichen).
Mehrzeilige Titel ausgewogen umbrechen. */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 10 4 4;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
overflow-wrap: break-word;
text-wrap: balance;
}
/* Box-Überschriften immer fett darstellen.
Höhere Spezifität als .vm-card h3, damit keine Theme-Grundregel
für h3 die Schriftstärke überschreibt (gilt für Icon- und Teaserboxen). */
.vm-card .vm-card-title,
.vm-teaser .vm-card-title {
font-weight: 700; /* = bold */
}
.vm-card-text {
color: var(--vm-text);
font-size: 17px;
line-height: 1.62;
/* Automatische Silbentrennung für Boxeninhalte.
Braucht lang="de" am (Contao-Root), sonst trennt der Browser
willkürlich. hyphenate-limit-chars bändigt die Trennung: nur Wörter ab
8 Zeichen, min. 4 davor UND min. 4 danach – so entstehen keine hässlichen
Kurzsilben wie „ergebnisof-fen" (Tail hätte nur 3 Zeichen). */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 8 4 4;
/* Safari kennt hyphenate-limit-chars (noch) nicht → Einzelwerte */
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-webkit-hyphenate-limit-lines: 2; /* max. 2 Trennstriche direkt untereinander */
overflow-wrap: break-word; /* Notbremse: extrem lange Wörter hart umbrechen statt Überlauf */
text-wrap: pretty; /* modernere Umbruch-Logik, reduziert schlechte Zeilenenden */
}
.vm-card-text > *:first-child { margin-top: 0; }
.vm-card-text > *:last-child { margin-bottom: 0; }
.vm-card-action {
flex: 0 0 auto;
margin-top: 1.75rem;
}
/* ----------------------------------------------------------
Link / button variants inside cards
---------------------------------------------------------- */
.vm-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
max-width: 100%;
text-decoration: none;
transition:
color var(--vm-transition),
background-color var(--vm-transition),
border-color var(--vm-transition),
transform var(--vm-transition);
}
/* ==========================================================
Card-Button – Primär (Dunkelblau)
Größe (rem-basiert), Padding, Farbe, Hover und alle
Farbvarianten liegen zentral in custom_allgemein.css
(.button, .button.-secondary …). Hier bewusst KEINE eigenen
.vm-card-link.button-Maße mehr definieren – sonst gewinnt
je nach Ladereihenfolge mal die em-Regel, mal die rem-Regel
und die Buttons in den Iconboxen bekommen unterschiedliche
Höhen.
========================================================== */
/* --- Textlink ------------------------------------------------------- */
.vm-card-link.-link {
color: var(--vm-primary);
font-weight: 700;
text-decoration: none;
text-underline-offset: 0.28em;
font-size: 1.15em;
}
.vm-card-link.-link:hover,
.vm-card-link.-link:focus-visible {
color: var(--vm-primary-hover);
text-decoration: none;
}
/* Unterstrich nur unter dem Text: Der Pfeil ist ein Flex-Element – eine
Unterstreichung am Link liefe unter ihm mit (und lässt sich dort nicht
mehr abschalten). */
.vm-card-link.-link:hover .vm-card-link-text,
.vm-card-link.-link:focus-visible .vm-card-link-text {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Invertierte Karte + Textlink -> weiße Schrift */
.vm-card--inverted .vm-card-link.-link {
color: var(--vm-white);
}
.vm-card--inverted .vm-card-link.-link:hover,
.vm-card--inverted .vm-card-link.-link:focus-visible {
color: rgba(255, 255, 255, 0.8);
}
/* ----------------------------------------------------------
Button Icon
---------------------------------------------------------- */
.vm-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
}
.vm-card-link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
transform: translateY(0.06em);
}
.vm-card-link-text {
display: inline-flex;
align-items: center;
line-height: 1;
}
.vm-card-link--inactive {
cursor: default;
opacity: 0.75;
}
/* ----------------------------------------------------------
Alignment variants
---------------------------------------------------------- */
.vm-iconbox-item.-align-center,
.vm-iconbox-item.-align-center .vm-card-inner,
.vm-iconbox-item.-align-center .vm-card-body {
text-align: center;
align-items: center;
}
.vm-iconbox-item.-align-right,
.vm-iconbox-item.-align-right .vm-card-inner,
.vm-iconbox-item.-align-right .vm-card-body {
text-align: right;
align-items: flex-end;
}
/* ----------------------------------------------------------
Icon variants
---------------------------------------------------------- */
.vm-iconbox-item.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
border-radius: var(--vm-radius-small);
}
.vm-iconbox-item.-large-icon .vm-card-icon span::before {
font-size: 2.05rem;
}
.vm-iconbox-item.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-iconbox-item.-inverted-icon .vm-card-icon span::before {
color: var(--vm-white) !important;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: 1rem;
row-gap: 0.75rem;
}
.vm-iconbox-item.-headline-icon .vm-card-icon {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon .vm-card-body {
grid-column: 2;
grid-row: 1;
}
.vm-iconbox-item.-headline-icon .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 0.75rem;
}
/* ==========================================================
Icon KLEIN neben der Überschrift
========================================================== */
.vm-iconbox-item.-headline-icon-small .vm-card-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: 0.85rem;
row-gap: 0.75rem;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon {
grid-column: 1;
grid-row: 1;
width: 2.5rem;
height: 2.5rem;
/* Bewusst FLACHER als die 27 % der großen Icons: Bei kleinen Flächen
liest sich derselbe Prozentwert deutlich runder, weil von der Kante
kaum noch ein gerades Stück übrig bleibt. 0,55rem sind auf 46px rund
22 % und wirken damit so kantig wie das Badge bei 87px. (19.09.2026) */
border-radius: 0.55rem;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon span::before {
font-size: 1.15rem;
}
.vm-iconbox-item.-headline-icon-small .vm-card-body {
grid-column: 2;
grid-row: 1;
}
.vm-iconbox-item.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 0.75rem;
}
/* ==========================================================
Icon als Badge – ragt über den oberen Kartenrand hinaus
========================================================== */
.vm-iconbox-item.-badge-top-icon {
overflow: visible;
/* HIER STAND `margin-top: 2.75rem` – der eigentliche Fehler (19.09.2026).
Die Karte erbt von .vm-card ein `height: 100%`. Diese Höhe füllt die
komplette Rasterzeile; der Außenabstand kam obendrauf. Die Karte stand
damit genau um diesen Betrag UNTEN aus ihrer Zeile heraus – und da die
Höhe der Box die Höhe des Rasters ist, rutschte das Folgeelement um
50px nach oben. Es sah aus, als hätte die Box einen negativen Abstand
nach unten; tatsächlich lag der Inhalt schlicht außerhalb.
Den Platz für das überstehende Badge machen jetzt der Innenabstand der
Box (padding-top) und der Zeilenabstand des Rasters, beide aus
--vm-badge-ueberstand. Die Karte selbst muss sich nicht mehr
verschieben. */
}
.vm-iconbox-item.-badge-top-icon h3 {
margin-top: 0.5rem;
}
.vm-iconbox-item.-badge-top-icon::before {
display: none;
}
.vm-iconbox-item.-badge-top-icon .vm-card-inner {
padding-top: calc(var(--vm-card-padding) + 2.5rem);
}
/* Größe des Badges und der Überstand, den es nach oben aus der Karte
herausragt. Beides einmal hier, damit Innenabstand der Reihe und
Zeilenabstand des Rasters weiter unten davon ableiten können. */
.vm-iconbox.-badge-top-icon,
.vm-iconbox-item.-badge-top-icon {
--vm-badge-groesse: clamp(4rem, 3.4rem + 1.7vw, 5.5rem);
--vm-badge-ueberstand: calc(var(--vm-badge-groesse) / 2);
}
.vm-iconbox-item.-badge-top-icon .vm-card-icon {
position: absolute;
top: 0;
left: var(--vm-card-padding);
transform: translateY(-50%);
margin: 0;
z-index: 2;
width: var(--vm-badge-groesse);
height: var(--vm-badge-groesse);
border-radius: 27%;
box-shadow:
inset 0 0 0 1px rgba(0, 164, 183, 0.08),
0 10px 24px rgba(0, 0, 0, 0.18);
}
.vm-iconbox-item.-badge-top-icon .vm-card-icon span::before {
font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}
.vm-iconbox-item.-badge-top-icon.-align-center .vm-card-icon {
left: 50%;
transform: translate(-50%, -50%);
}
.vm-iconbox-item.-badge-top-icon.-align-right .vm-card-icon {
left: auto;
right: var(--vm-card-padding);
}
.vm-iconbox-item.-badge-top-icon .vm-card-action {
/* Vorher 0: Der Textlink saß ohne Luft direkt unter der letzten Textzeile
und las sich dadurch wie eine weitere Zeile des Adressblocks statt wie
eine eigene Handlung. 1,5rem ist derselbe Abstand, den die Teaserboxen
über ihrer Aktion haben. (21.09.2026) */
margin-top: 1.5rem;
}
/* Das Badge ragt oben aus der Karte heraus, die Box selbst rechnet den
Überstand aber nicht mit: Ihre Oberkante ist die Kartenoberkante. Ohne
diesen Innenabstand stößt das Badge an das Element darüber, und man muss
an jedem Element von Hand eine margin-Klasse setzen. Mit dem Abstand
greifen die normalen Abstandsklassen wieder wie bei jeder anderen Box.
(19.09.2026)
Der Zeilenabstand im Raster braucht denselben Wert, sonst ist die Lücke
zwischen zwei Kartenreihen optisch kleiner als zwischen zwei Karten
nebeneinander. */
.vm-iconbox.-badge-top-icon {
padding-top: var(--vm-badge-ueberstand);
}
.vm-iconbox.-badge-top-icon .vm-grid {
row-gap: calc(var(--vm-gap) + var(--vm-badge-ueberstand));
}
/* Badge-Icon (getönte Karte): Innenkontur in Themenfarbe */
.vm-card.vm-card--green.-badge-top-icon .vm-card-icon {
box-shadow:
inset 0 0 0 1px rgba(0, 164, 183, 0.15),
0 10px 24px rgba(0, 0, 0, 0.18);
}
/* ----------------------------------------------------------
Responsive – Spaltenanzahl je Breakpoint
Die Spaltenzahl wählt der Redakteur pro Breakpoint selbst:
Desktop .grid-1 … .grid-6 (Basis, > 1100px, siehe „Grid engine")
Tablet .grid-t-1 … .grid-t-6 (≤ 1100px)
Mobil .grid-m-1 … .grid-m-6 (≤ 900px)
Mobil klein .grid-s-1 … .grid-s-6 (≤ 600px)
Am Element hängen alle vier Klassen gleichzeitig. Da die Blöcke in der
Reihenfolge Tablet -> Mobil -> Mobil klein stehen (gleiche Spezifität),
gewinnt bei überlappenden Breakpoints per Quellreihenfolge immer der
schmalere Wert.
---------------------------------------------------------- */
/* Tablet – ab 1100px und schmaler (Biohof: TAO-Spaltenumbruch) */
@media (max-width: 1100px) {
.vm-grid.grid-t-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-t-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-t-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-t-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-t-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-t-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Mobil – ab 900px und schmaler */
@media (max-width: 900px) {
.vm-grid.grid-m-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-m-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Spannweiten aufheben + Layout-Feinschliff (bleibt wie gehabt) */
.vm-grid .span-2,
.vm-grid .span-3,
.vm-grid .span-4,
.vm-grid .span-5,
.vm-grid .span-6 {
grid-column: auto;
}
.vm-card-inner {
padding: 1.6rem;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: flex;
}
.vm-iconbox-item.-headline-icon .vm-card-action {
margin-top: 1.5rem;
}
}
/* Mobil klein – ab 600px und schmaler */
@media (max-width: 600px) {
.vm-grid.grid-s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ==========================================================
VM Component Library · Biohof Warendorf (übernommen von Ortkras, 03.11.2026)
Component: VM Teaserbox
Version: 2.0.0
Baut auf .vm-card auf (Rahmen, Radius, Schatten, Hover,
Kartenfarben, invertierter Text) und ergänzt das Layout
„Bild oben, Inhalt darunter".
Farben werden komplett über die :root-Variablen aus
custom_vm_icon_boxes.css bezogen (Biohof: Türkis #00a4b7, Gelb #fbb900).
========================================================== */
/* Karte als vertikale Spalte: Bild oben, Body füllt den Rest.
.vm-card liefert Höhe (height:100%), Rahmen, Radius, Schatten,
Hover (die ::before-Akzentleiste ist bei Ortkras entfernt). */
.vm-teaserbox .vm-teaser {
display: flex;
flex-direction: column;
}
/* --- Bild: randlos oben --- */
.vm-teaser-image {
display: block;
position: relative;
margin: 0;
line-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
}
.vm-teaser-image figure { margin: 0; height: 100%; }
/* Original (kein Format gewählt): natürliches Seitenverhältnis */
.vm-teaser-image img,
.vm-teaser-image picture {
display: block;
width: 100%;
height: auto;
}
/* Mit Bildformat: festes Seitenverhältnis + formatfüllender Beschnitt */
.vm-teaserbox.-ratio-1-1 .vm-teaser-image { aspect-ratio: 1 / 1; }
.vm-teaserbox.-ratio-4-3 .vm-teaser-image { aspect-ratio: 4 / 3; }
.vm-teaserbox.-ratio-3-2 .vm-teaser-image { aspect-ratio: 3 / 2; }
.vm-teaserbox.-ratio-16-9 .vm-teaser-image { aspect-ratio: 16 / 9; }
.vm-teaserbox.-ratio-3-4 .vm-teaser-image { aspect-ratio: 3 / 4; }
.vm-teaserbox[class*="-ratio-"] .vm-teaser-image img,
.vm-teaserbox[class*="-ratio-"] .vm-teaser-image picture {
height: 100%;
object-fit: cover;
}
/* sanfter Zoom, wenn das Bild verlinkt ist und man die Karte hovert */
.vm-teaser a.vm-teaser-image img { transition: transform 0.45s ease; }
.vm-teaser:hover a.vm-teaser-image img { transform: scale(1.04); }
/* --- Bildunterschrift (z. B. KI-Kennzeichnung) ---------------------
Bild + Caption stecken in ; die
figcaption liegt als Overlay-Badge unten links AUF dem Bild.
Weil sie position:absolute ist, ist die Bildhöhe egal -> funktioniert
auch im Featured-Aufmacher (Bild auf 100 % Höhe). Wird auch von den
News-Kacheln genutzt (gleiches Markup). */
.vm-teaser-figure {
margin: 0;
position: relative; /* Positionierungskontext der Caption */
}
.vm-teaser-caption {
position: absolute;
right: 0.6rem;
bottom: 0.6rem;
z-index: 2;
margin: 0;
padding: 0.2em 0.6em;
border-radius: var(--vm-radius-small);
background: rgba(255, 255, 255, 0.8); /* ≥ 75 % Deckkraft */
color: var(--vm-primary); /* Dunkelblau */
font-size: 0.75rem;
line-height: 1.35;
text-align: left;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
pointer-events: none; /* blockiert Bild-Link / Hover-Zoom nicht */
}
/* In der Teaserbox nach rechts, damit die Caption nicht mit dem Badge-Icon
(unten links auf der Bildkante) kollidiert. News-Kacheln (kein Badge)
bleiben unten links. */
.vm-teaserbox .vm-teaser-caption {
left: auto;
right: 0.6rem;
text-align: right;
}
/* --- Body: gepolsterter Inhaltsbereich, füllt die restliche Höhe --- */
.vm-teaser-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: var(--vm-card-padding);
}
/* Inhalt wächst -> Button bleibt unten in der Karte */
.vm-teaser-content {
flex: 1 1 auto;
min-width: 0;
}
.vm-teaser .vm-card-icon { margin-bottom: 1.25rem; }
.vm-teaser .vm-card-action { margin-top: 1.5rem; }
/* ==========================================================
Ausrichtung
========================================================== */
.vm-teaser.-align-center .vm-teaser-body {
text-align: center;
align-items: center;
}
.vm-teaser.-align-right .vm-teaser-body {
text-align: right;
align-items: flex-end;
}
/* ==========================================================
Icon-Varianten
========================================================== */
.vm-teaser.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
}
.vm-teaser.-large-icon .vm-card-icon span::before {
font-size: 2.05rem; }
.vm-teaser.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-teaser.-inverted-icon .vm-card-icon span::before { color: var(--vm-white) !important; }
/* Icon neben der Überschrift: Icon links, Inhalt rechts, IMMER linksbündig */
.vm-teaser.-headline-icon .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 1rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon .vm-card-icon {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.vm-teaser.-headline-icon .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon KLEIN neben der Überschrift
========================================================== */
.vm-teaser.-headline-icon-small .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.85rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon-small .vm-card-icon {
grid-column: 1;
grid-row: 1;
width: 2.5rem; /* kompakt statt 64px */
height: 2.5rem;
border-radius: 0.7rem;
margin-bottom: 0;
}
.vm-teaser.-headline-icon-small .vm-card-icon span::before {
font-size: 1.15rem; /* kleineres Glyph */
}
.vm-teaser.-headline-icon-small .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon als schwebendes Badge auf der Bildunterkante
========================================================== */
.vm-teaser.-badge-icon .vm-teaser-body {
position: relative;
/* Platz schaffen, damit die Überschrift nicht unter dem Badge sitzt */
padding-top: calc(var(--vm-card-padding) + 2.25rem);
}
.vm-teaser.-badge-icon .vm-card-icon {
position: absolute;
top: 0; /* = Oberkante Body = Unterkante Bild */
left: var(--vm-card-padding);
transform: translateY(-50%); /* Badge sitzt mittig auf der Bildkante */
margin: 0;
z-index: 2;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
/* Badge folgt der Textausrichtung */
.vm-teaser.-badge-icon.-align-center .vm-card-icon {
left: 50%;
transform: translate(-50%, -50%);
}
.vm-teaser.-badge-icon.-align-right .vm-card-icon {
left: auto;
right: var(--vm-card-padding);
}
/* ==========================================================
Split-Layout: Bild NEBEN Text (Feld „Layout")
-media -> Bild und Text nebeneinander
-media-image-right -> Bild rechts (Standard des -media: Bild links)
Am besten mit 1 Spalte / breiter Box. Auf Mobil gestapelt (s. u.).
========================================================== */
.vm-teaser.-media {
flex-direction: row;
align-items: stretch;
}
.vm-teaser.-media.-media-image-right {
flex-direction: row-reverse;
}
/* Bildspalte füllt die Kartenhöhe (kein festes Seitenverhältnis).
WICHTIG: Direktes Kind der Karte ist bei gesetzter Bildunterschrift die
, sonst direkt .vm-teaser-image – die
Flex-Breite muss deshalb auf BEIDE passen, sonst schrumpft die Spalte
auf die Eigenbreite des Bildes. */
.vm-teaser.-media > .vm-teaser-figure,
.vm-teaser.-media > .vm-teaser-image {
flex: 0 0 45%;
min-width: 0;
align-self: stretch;
aspect-ratio: auto;
height: auto;
}
/* Bild in der Spalte auf volle Breite/Höhe ziehen – auch kleine Bilder
werden hochskaliert (bewusst, lieber unscharf als zu schmal). */
.vm-teaser.-media > .vm-teaser-figure > .vm-teaser-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.vm-teaser.-media .vm-teaser-image img,
.vm-teaser.-media .vm-teaser-image picture {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Text vertikal mittig (wie im Beispiel „Ihre Unterstützung hilft.") */
.vm-teaser.-media .vm-teaser-body {
justify-content: center;
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 900px) {
.vm-teaser-body { padding: 1.6rem; }
.vm-teaser.-headline-icon .vm-teaser-body { display: flex; }
.vm-teaser.-headline-icon .vm-card-action { margin-top: 1.5rem; }
/* Split-Layout auf Mobil stapeln: Bild oben, Text darunter */
.vm-teaser.-media,
.vm-teaser.-media.-media-image-right {
flex-direction: column;
}
.vm-teaser.-media > .vm-teaser-figure,
.vm-teaser.-media > .vm-teaser-image {
flex: 0 0 auto;
height: auto;
}
.vm-teaser.-media > .vm-teaser-figure > .vm-teaser-image { height: auto; }
.vm-teaser.-media .vm-teaser-image img,
.vm-teaser.-media .vm-teaser-image picture {
height: auto;
}
}
/* ==========================================================
Mobile Listenansicht · Klasse "vm-mobil-liste" (19.09.2026)
Wunsch des Teams: Die Angebots-Kacheln sollen auf dem Handy
abspecken – links ein randloses Bild, rechts der Titel – und
die ganze Kachel soll wie ein Button reagieren, damit man sie
sicher trifft.
Die Klasse wird im Backend im Feld "CSS-Klasse" des Elements
gesetzt. Ohne sie bleibt alles beim Alten, die Teaserboxen auf
der Spenden- und Bildungsspender-Strecke sind also nicht betroffen.
Barrierefreiheit: Der Linktext "mehr Infos" wird nur OPTISCH
versteckt, nicht entfernt – sonst hieße der Link für Screenreader
bloß noch "– Konfliktberatung". Und statt eines zusätzlichen
Overlays wird der vorhandene Link selbst über die Karte gelegt:
So bleibt es ein Tab-Stopp, der Fokusring umschließt die ganze
Karte und der sichtbare Kartentitel steht weiter im Linknamen
(WCAG 2.5.3).
========================================================== */
@media (max-width: 900px) {
/* Karte wird zur Listenzeile.
Zeilenhöhe und Bildbreite stecken in zwei Variablen – darüber
läuft der Wechsel von Quer- auf Hochformat weiter unten. */
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 112px;
--vm-liste-format: 1.5; /* Bildbreite = Höhe x Format -> Querformat 3:2 */
flex-direction: row;
align-items: stretch;
min-height: var(--vm-liste-hoehe);
/* Fokusring nach innen, sonst schneidet ihn das overflow:hidden
der Karte ab. Siehe Kopf von custom_allgemein.css. */
--vm-focus-offset: -3px;
}
/* Die Akzentleiste über der Karte entfällt in der Listenzeile –
sie stammt aus .vm-card::before. */
.vm-teaserbox.vm-mobil-liste .vm-teaser::before {
content: none;
}
/* Als Liste dürfen die Zeilen dichter stehen als die Karten im Raster. */
.vm-teaserbox.vm-mobil-liste .vm-grid {
gap: calc(var(--vm-gap) / 2);
}
/* --- links: Bild ohne Rand, bis an die Kartenkante ---
Links, oben und unten bündig; die runden Ecken übernimmt das
overflow:hidden der Karte. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-image {
flex: 0 0 auto;
width: calc(var(--vm-liste-hoehe) * var(--vm-liste-format));
align-self: stretch;
height: auto;
aspect-ratio: auto;
margin: 0;
border-radius: 0;
/* Der Bildlink ist nur für die Maus (aria-hidden, tabindex -1) und
liegt unter dem Link-Overlay – getippt wird immer derselbe Link. */
z-index: 1;
}
/* Absolut, damit das Bild KEINE natürliche Höhe in den Fluss einbringt:
Sonst zieht ein 1024x796-Motiv die Zeile auf seine eigene Höhe und der
Ausschnitt ist nie quadratisch. So bestimmt die Zeile die Höhe und das
Bild füllt sie formatfüllend aus. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-image img,
.vm-teaserbox.vm-mobil-liste .vm-teaser-image picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- rechts: Titel, Pfeil am rechten Rand ---
position:static hebt das relative Body-Layout der Badge-Variante auf,
damit sich der Link unten auf die GANZE Karte legen kann und nicht nur
auf den Textbereich. Das Badge-Icon ist in der Liste ohnehin aus. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-body {
position: static;
flex-direction: row;
align-items: center;
padding: 0.8rem 2.6rem 0.8rem 1.1rem; /* rechts Platz für den Pfeil */
/* desktop-anpassungen.css legt eine Trennlinie über den Body – in der
stehenden Karte sitzt sie zwischen Bild und Text. In der Zeile landet
sie direkt unter dem Kartenrahmen, die Oberkante wäre dadurch doppelt
so kräftig wie die anderen drei Seiten. */
border-top: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-teaser-content {
flex: 1 1 auto;
min-width: 0;
}
/* Beschreibungstext und Badge-Icon entfallen in der Listenzeile */
.vm-teaserbox.vm-mobil-liste .vm-card-text,
.vm-teaserbox.vm-mobil-liste .vm-card-icon {
display: none;
}
.vm-teaserbox.vm-mobil-liste .vm-card-title {
margin: 0;
/* Bewusst größer als der Kartentitel im Raster: In der Zeile steht nur
noch der Titel, er darf die Hauptrolle spielen.
Maß nimmt der längste Titel "Beratung für Männer und Väter": "Männer
und Väter" muss als Block in die Spalte passen, sonst wird aus zwei
Zeilen eine dritte. Deshalb wächst die Schrift mit der Fensterbreite
und deckelt bei 24px.
!important, weil die Größe sonst aus TAOs Hilfsklasse .font-size-m
kommt (files/tao/css/main.css: 1.1em !important ab 900px) – die ist
ohne !important nicht zu schlagen. Die Klasse steht fest im Template
am Kartentitel. */
font-size: clamp(1.1rem, 5.6vw, 1.6rem) !important;
/* KEINE automatische Trennung: In der schmalen Zeile setzt der Browser
sie an der falschen Stelle ("Schwange-renberatung" statt
"Schwangeren-beratung"). Stattdessen entscheidet die Redaktion –
ein bedingter Trennstrich () im Titel bricht genau dort um.
Wörter ohne brechen notfalls über overflow-wrap aus
.vm-card-title, also ohne Trennstrich statt über den Rand hinaus. */
hyphens: manual;
-webkit-hyphens: manual;
}
/* --- der vorhandene Link deckt die ganze Karte ab --- */
.vm-teaserbox.vm-mobil-liste .vm-card-action {
margin-top: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link {
position: absolute;
inset: 0;
z-index: 2;
justify-content: flex-end;
align-items: center;
padding-right: 1rem;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link-icon {
font-size: 1.3rem;
}
/* Nur optisch weg, für Screenreader bleibt "mehr Infos – " */
.vm-teaserbox.vm-mobil-liste .vm-card-link-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Rückmeldung beim Antippen – auf der ganzen Karte, nicht nur am Pfeil.
Ohne :has() bleibt schlicht die Hervorhebung aus, sonst nichts. */
.vm-teaserbox.vm-mobil-liste .vm-teaser:has(.vm-card-link:active) {
background: var(--vm-surface-light);
}
}
/* Schmale Displays: Der Querformat-Ausschnitt frisst zu viel Breite,
hier wird der Ausschnitt quadratisch. Es wechselt nur das Format. */
@media (max-width: 600px) {
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-format: 1;
}
}
/* Ab hier wird die Spalte neben dem Bild zu schmal, um Titel und Pfeil
nebeneinander zu setzen: Der Pfeil rutscht unter den Text, in die untere
rechte Ecke. Der Titel bekommt dadurch die volle Spaltenbreite.
Das Tippziel bleibt die ganze Karte – der Link liegt weiter als Overlay
darüber, nur sein Inhalt sitzt jetzt woanders. */
@media (max-width: 500px) {
/* Der Pfeil unter dem Titel braucht eine Zeile mehr – ohne höhere Zeile
würde die Karte über die Bildbreite hinauswachsen und der Ausschnitt
wäre nicht mehr quadratisch. */
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 120px;
}
.vm-teaserbox.vm-mobil-liste .vm-teaser-body {
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0.6rem 1rem; /* rechts kein Extra-Platz mehr nötig */
}
/* nicht mitwachsen, sonst driften Titel und Pfeil auseinander */
.vm-teaserbox.vm-mobil-liste .vm-teaser-content {
flex: 0 0 auto;
}
.vm-teaserbox.vm-mobil-liste .vm-card-action {
flex: 0 0 auto;
margin-top: 0.2rem;
}
/* Hier steht der Link wieder IM Fluss – nur so sitzt der Pfeil direkt
unter dem Titel statt in der Kartenecke. Das Tippziel übernimmt ein
::after, das sich über die ganze Karte legt (die Karte ist der
Bezugsrahmen, .vm-teaser-body steht oben auf position:static). */
.vm-teaserbox.vm-mobil-liste .vm-card-link {
position: static;
justify-content: flex-start;
padding: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
/* Der Fokusring gehört um die ganze Karte, nicht um den Pfeil. Die globale
Regel in custom_allgemein.css setzt ihn mit !important am Link – hier
wird er deshalb dort unsichtbar gemacht und am Overlay gezeichnet. */
.vm-teaserbox.vm-mobil-liste .vm-card-link:focus-visible {
outline-color: transparent !important;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link:focus-visible::after {
outline: 3px solid var(--vm-focus-ring, #00a4b7);
outline-offset: -3px;
}
}
/* Schmale Geräte: flachere Zeile. Weil die Bildbreite an der Zeilenhöhe
hängt, bleibt dadurch mehr Spalte für den Titel – er soll auch hier auf
zwei Zeilen passen. */
@media (max-width: 400px) {
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 104px;
}
}
/* ==========================================================
Biohof Warendorf · VM-Boxen im Aussehen der bisherigen TAO-Boxen
Angelegt 03.11.2026 (Contao-5-Update, Wunsch Bianka Büscher):
Die Boxen der Startseite sollen in jeder Reihe GLEICH HOCH sein,
optisch aber unverändert bleiben.
Umgestellt von RockSolid-TAO-Elementen auf die VM-Library:
- Iconboxen oben (bisher rsce_tao_icon_boxes) -> VM Iconboxen, Klasse "home-iconboxen"
- Naturschutz (bisher rsce_tao_boxes) -> VM Teaserboxen, Klasse "naturschutzboxen"
- Die Top News (bisher news_list_boxed) -> mod_newslist_vm / news_list_boxed_vm, Klasse "newsbox-white"
Gleiche Höhe kommt aus der VM-Grid-Engine (custom_vm_icon_boxes.css:
display:grid + .vm-card height:100%, Button per Flex unten).
Hier steht NUR die Übersetzung der TAO-Maße. Alle Werte in em, damit
sie mit der TAO-Grundschrift mitwachsen (html: 1.3rem, je Breite anders).
Kartenschrift = 0.875em wie in TAO -> 1.42857em = TAO-Innenabstand.
Ladereihenfolge im Layout: custom_vm_icon_boxes.css,
custom_vm_teaser_boxes.css, DANACH diese Datei.
========================================================== */
/* ----------------------------------------------------------
Gemeinsam
---------------------------------------------------------- */
/* Nur für Screenreader (Linkzusätze der VM-Templates, z. B. „ – Der Hofladen“).
Vorlage: Ortkras custom_allgemein.css. */
.vm-nur-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Abstände im Raster wie die RockSolid-Spalten: Prozent der Inhaltsbreite.
cqw bezieht sich auf das Element selbst (Container), nicht auf das Fenster. */
.vm-component,
.mod_newslist.newsbox-white {
container-type: inline-size;
}
/* TAO ist flach: kein Anheben, kein Schatten beim Überfahren */
.vm-component .vm-card:hover,
.newsbox-white .vm-card:hover {
transform: none;
box-shadow: none;
}
.vm-component .vm-card,
.newsbox-white .vm-card {
font-size: 0.875em; /* TAO: .icon-boxes-item / .teaser-boxes-item / .news-list-boxed-item */
line-height: inherit;
color: #555555;
border-radius: 0;
box-shadow: none;
}
/* Fließtext in den Karten: TAO-Grundwerte statt der VM-Library (17px / 1.62) */
.vm-component .vm-card-text,
.newsbox-white .vm-card-text {
font-size: 1em;
line-height: inherit;
color: inherit;
/* Trennung und Umbruch wie im übrigen TAO-Text: Die Library begrenzt die
Silbentrennung und nutzt text-wrap: pretty – die Zeilen brächen sonst
anders um als bisher („Ihnen“ statt „Ih-nen“). */
hyphenate-limit-chars: auto;
-webkit-hyphenate-limit-before: auto;
-webkit-hyphenate-limit-after: auto;
-webkit-hyphenate-limit-lines: no-limit;
text-wrap: wrap;
}
/* TAO-Buttons (.button, .-secondary, .-quaternary) unverändert lassen:
Die Library macht den Link zum inline-flex mit line-height 1 – das
würde den Button flacher machen als die übrigen Buttons der Seite. */
.vm-component .vm-card-link.button {
display: inline-block;
}
.vm-component .vm-card-link.button .vm-card-link-text {
display: inline;
line-height: inherit;
}
/* Tablet/Mobil: RockSolid-Spalten haben dort 6,25 % Abstand */
@media (max-width: 1100px) {
:root { --vm-gap: 6.25cqw; }
}
/* ==========================================================
1) Iconboxen oben (Startseite) · .vm-iconbox.home-iconboxen
========================================================== */
/* TAO: Sektion zieht um 40px unter die Header-Galerie (legacy-desktop-
anpassungen.css: .home-iconboxen { margin-top:-40px !important }).
Platz für das überstehende Icon = 1.78571em der Kartenschrift. */
.vm-iconbox.home-iconboxen {
margin-bottom: 0;
padding-top: 0;
}
.vm-iconbox.home-iconboxen .vm-grid {
gap: 0;
row-gap: 0;
padding-top: calc(1.78571em * 0.875);
}
.vm-iconbox.home-iconboxen .vm-card {
overflow: visible;
padding: 0 1.42857em 1.42857em;
border: 1px solid #ffffff;
color: #ffffff;
text-align: left;
}
.vm-iconbox.home-iconboxen .vm-card-inner {
padding: 0; /* Innenabstand sitzt an der Karte (wie TAO) */
}
/* Rundes gelbes Icon mit weißem Ring, ragt oben aus der Box (TAO ::before) */
.vm-iconbox.home-iconboxen .vm-card.-badge-top-icon .vm-card-icon {
position: relative;
top: -0.46875em;
left: auto;
transform: none;
box-sizing: content-box;
width: 1em;
height: 1em;
margin: -0.46875em 0 0.125em;
padding: 0.34375em;
border: 0.09375em solid #ffffff;
border-radius: 100%;
font-size: 2.28571em;
background: #fbb900;
box-shadow: none;
}
.vm-iconbox.home-iconboxen .vm-card-icon span::before {
font-size: 1em;
color: #ffffff;
}
/* Titel: TAO p.boxheadline (legacy-desktop-anpassungen.css) – 1.5em, normal.
!important nötig: Das Template setzt TAOs .font-size-m (mit !important). */
.vm-iconbox.home-iconboxen .vm-card .vm-card-title {
margin: 0;
font-size: 1.5em !important;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
hyphens: manual;
text-wrap: wrap;
}
.vm-iconbox.home-iconboxen .vm-card-text > p {
margin: 0.5em 0 0;
}
.vm-iconbox.home-iconboxen .vm-card-text,
.vm-iconbox.home-iconboxen .vm-card-text * {
color: #ffffff;
}
.vm-iconbox.home-iconboxen .vm-card.-badge-top-icon .vm-card-action {
margin-top: 0.4375em; /* = TAO .button margin-top 0.5em bei 0.875em Buttonschrift */
}
/* ----------------------------------------------------------
Ganze Karte klickbar (Klasse "vm-karte-klickbar" am Element)
Wie bisher bei den TAO-Iconboxen ist die ganze Box der Link – aber
OHNE zweiten Link: Der vorhandene Button legt per ::before eine Fläche
über die Karte. Ein Tab-Stopp, Linkname = Button-Text + Kartentitel.
---------------------------------------------------------- */
.vm-karte-klickbar .vm-card {
position: relative;
}
.vm-karte-klickbar .vm-card-link {
position: static;
}
.vm-karte-klickbar .vm-card-link::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Das Badge-Icon liegt über der Fläche – Klicks darauf durchreichen */
.vm-karte-klickbar .vm-card-icon {
pointer-events: none;
}
/* TAO-Hover des weißen Buttons (::after schiebt eine Fläche hoch) würde
ohne position:relative die ganze Karte füllen -> ersetzt durch eine
leichte Aufhellung, auch beim Überfahren der Karte. */
.vm-karte-klickbar .vm-card-link.-quaternary::after {
content: none;
}
.vm-karte-klickbar .vm-card:hover .vm-card-link.-quaternary,
.vm-karte-klickbar .vm-card-link.-quaternary:focus-visible {
background: rgba(255, 255, 255, 0.15);
}
/* Tastaturfokus sichtbar (TAO-Buttons haben outline:none, WCAG 2.4.7):
Ring um die ganze Karte, weil die ganze Karte der Link ist. */
.vm-karte-klickbar .vm-card-link:focus-visible {
outline: none;
}
.vm-karte-klickbar .vm-card-link:focus-visible::before {
outline: 3px solid #ffffff;
outline-offset: -5px;
}
/* --- Unter 1300px: nur Icon + Titel (wie bisher), ganze Box bleibt Link --- */
@media (max-width: 1300px) {
.vm-iconbox.home-iconboxen .vm-card-text {
display: none;
}
/* Button unsichtbar, aber weiter da (Screenreader, Tastatur):
Er liegt als Fläche über der Karte, Fokusring = Kartenrand. */
.vm-iconbox.home-iconboxen .vm-card.-badge-top-icon .vm-card-action {
margin: 0;
}
.vm-iconbox.home-iconboxen .vm-card-link.button {
position: absolute;
inset: 0;
z-index: 2;
margin: 0;
padding: 0;
border: 0;
background: none;
color: transparent;
font-size: 0;
}
.vm-iconbox.home-iconboxen .vm-card-link.button::before {
content: none;
}
.vm-iconbox.home-iconboxen .vm-card-link.button:focus-visible {
outline: 3px solid #ffffff;
outline-offset: -3px;
}
}
@media (max-width: 900px) {
.vm-iconbox.home-iconboxen .vm-card .vm-card-title { font-size: 1.25em !important; }
}
@media (max-width: 700px) {
.vm-iconbox.home-iconboxen .vm-card .vm-card-title { font-size: 1.05em !important; }
}
@media (max-width: 600px) {
.vm-iconbox.home-iconboxen .vm-card {
padding: 0 0 0.5em;
text-align: center;
}
.vm-iconbox.home-iconboxen .vm-card.-badge-top-icon .vm-card-icon {
margin-left: auto;
margin-right: auto;
font-size: calc(2.28571em * 1.5 / 2.28571); /* TAO: ::before 1.5em */
}
}
@media (max-width: 450px) {
.vm-iconbox.home-iconboxen .vm-card.-badge-top-icon .vm-card-icon {
font-size: 1.25em;
}
.vm-iconbox.home-iconboxen .vm-card .vm-card-title { font-size: 0.8em !important; }
}
/* ==========================================================
2) Naturschutz · .vm-teaserbox.naturschutzboxen
(TAO .teaser-boxes.-boxed, Fläche #f5f5f5, Titel türkis)
========================================================== */
.vm-teaserbox.naturschutzboxen {
margin: 2.5em 0;
}
.vm-teaserbox.naturschutzboxen .vm-card {
border: 1px solid #b2b9c4;
background: #f5f5f5;
}
/* Bild ohne Zoom (TAO: Hover-Effekt war ausgeschaltet) */
.vm-teaserbox.naturschutzboxen .vm-teaser:hover a.vm-teaser-image img {
transform: none;
}
.vm-teaserbox.naturschutzboxen .vm-teaser-image {
background: none;
}
.vm-teaserbox.naturschutzboxen .vm-teaser-body {
padding: 1.28571em 1.42857em 1.42857em;
}
.vm-teaserbox.naturschutzboxen .vm-card .vm-card-title {
margin: 0 0 0.33333em;
font-size: 1.28571em !important;
font-weight: 700;
line-height: 1.5;
color: #00a4b7;
hyphens: manual;
text-wrap: wrap;
}
.vm-teaserbox.naturschutzboxen .vm-card-text > p {
margin: 0.42857em 0;
}
.vm-teaserbox.naturschutzboxen .vm-card-text > p:first-child { margin-top: 0; }
.vm-teaserbox.naturschutzboxen .vm-teaser .vm-card-action {
margin-top: 0.5em; /* + 0.42857em Absatz unten = TAO-Abstand zum Button */
}
/* ==========================================================
3) Die Top News · .mod_newslist.newsbox-white (mod_newslist_vm)
(TAO .news-list-boxed-item: Bild INNERHALB des Innenabstands,
weißer Grund, gelber Rahmen, Titel mit Trennlinie)
========================================================== */
.mod_newslist.newsbox-white {
margin: 2.75em 0;
}
.newsbox-white .vm-newsbox-item {
padding: 1.07143em;
border: 1px solid #e2a600;
background: #ffffff;
}
.newsbox-white .vm-teaser-body {
padding: 0;
}
.newsbox-white .vm-teaser-image {
background: none;
}
/* TAO-Hover am Bild: leicht durchsichtig, unscharf, vergrößert */
.newsbox-white .vm-teaser:hover a.vm-teaser-image img {
transform: none;
}
.newsbox-white a.vm-teaser-image:hover,
.newsbox-white a.vm-teaser-image:focus {
opacity: 0.8;
}
.newsbox-white a.vm-teaser-image:hover img,
.newsbox-white a.vm-teaser-image:focus img {
filter: blur(2px);
transform: scale(1.05);
}
.newsbox-white .vm-card .vm-card-title {
margin: 0.38095em 0 0;
padding: 0.5em 0;
border-bottom: 1px solid #b2b9c4;
font-size: 1.25em !important;
font-weight: 700;
line-height: 1.38143;
color: #333333;
hyphens: manual;
text-wrap: wrap;
}
.newsbox-white .vm-card-title a {
color: #00a4b7;
}
.newsbox-white .vm-card-text > p,
.newsbox-white .vm-card-text > p:first-child,
.newsbox-white .vm-card-text > p:last-child {
margin: 1em 0;
}