/** ---------------------------------- MALVO * Nancy Bullmann * v.1.0 * 22.06.19 ---------------------------------- **/ /* ---------------------------------------------------------------------------------------------------------------- */ /** ---------------------------------------------------- READY ---------------------------------------------------- **/ /* ----------------------------------------------------------------------------------------------------------------- */ /* ---- COMMON ------------------------------------------------------------------- */ body {font-family: 'open_sansregular', Arial, sans-serif; font-size: 16px; line-height: 25px; color: #2a2b2e;} /* ---- COLORS ------------------------------------------------------------------- */ /* BORDER */ .border-black {border: 1px solid #2a2b2e;} .border-darkgrey {border: 1px solid #777c8b;} .border-lightgrey{border: 1px solid #eeeeee;} .border-white {border: 1px solid #fff;} /* BACKGROUND COLORS */ .back-black {background: #2a2b2e;} .back-darkgrey {background: #777c8b;} .back-lightgrey {background: #eeeeee;} .back-white {background: #fff;} .back-pink {background: #ff677c;} .back-orange {background: #ffbb67;} .back-green {background: #b6cc00;} .back-blue {background: #1dc4ec;} /* TEXT COLORS */ .text-black {color: #2a2b2e;} .text-darkgrey {color: #777c8b;} .text-lightgrey {color: #eeeeee;} .text-white {color: #ffffff;} .text-pink {color: #ff677c;} .text-orange {color: #ffbb67;} .text-green {color: #b6cc00;} .text-blue {color: #1dc4ec;} /* ---- FLOAT -------------------------------------------------------------------- */ .fl {float: left !important;} .fr {float: right !important;} /* ---- LINES -------------------------------------------------------------------- */ hr {border: none; background: #dadada; height: 1px;} /* ---- SELECTION ---------------------------------------------------------------- */ ::selection {background: #ff677c; color: #fff;} ::-moz-selection {background: #ff677c; color: #fff;} /* ---- SPACING ------------------------------------------------------------------ */ /* MARGIN */ .mar-xs {margin: 10px;} .mar-s {margin: 20px;} .mar-m {margin: 30px;} .mar-l {margin: 40px;} .mar-xl {margin: 50px;} .mar-xxl {margin: 60px;} @media only screen and (max-width: 900px) { .mar-xs {margin: 5px;} .mar-s {margin: 10px;} .mar-m {margin: 15px;} .mar-l {margin: 20px;} .mar-xl {margin: 25px;} .mar-xxl {margin: 30px;} } /* MARGIN-TOP */ .mar-t-xs {margin-top: 10px;} .mar-t-s {margin-top: 20px;} .mar-t-m {margin-top: 30px;} .mar-t-l {margin-top: 40px;} .mar-t-xl {margin-top: 50px;} .mar-t-xxl {margin-top: 60px;} .mar-t-xxxl {margin-top: 90px;} @media only screen and (max-width: 900px) { .mar-t-xs {margin-top: 5px;} .mar-t-s {margin-top: 10px;} .mar-t-m {margin-top: 15px;} .mar-t-l {margin-top: 20px;} .mar-t-xl {margin-top: 25px;} .mar-t-xxl {margin-top: 30px;} .mar-t-xxxl {margin-top: 45px;} } /* MARGIN-BOTTOM */ .mar-b-xs {margin-bottom: 10px;} .mar-b-s {margin-bottom: 20px;} .mar-b-m {margin-bottom: 30px;} .mar-b-l {margin-bottom: 40px;} .mar-b-xl {margin-bottom: 50px;} .mar-b-xxl {margin-bottom: 60px;} @media only screen and (max-width: 900px) { .mar-b-xs {margin-bottom: 5px;} .mar-b-s {margin-bottom: 10px;} .mar-b-m {margin-bottom: 15px;} .mar-b-l {margin-bottom: 20px;} .mar-b-xl {margin-bottom: 25px;} .mar-b-xxl {margin-bottom: 30px;} } /* MARGIN-LEFT */ .mar-l-xs {margin-left: 10px;} .mar-l-s {margin-left: 20px;} .mar-l-m {margin-left: 30px;} .mar-l-l {margin-left: 40px;} .mar-l-xl {margin-left: 50px;} .mar-l-xxl {margin-left: 60px;} @media only screen and (max-width: 900px) { .mar-l-xs {margin-left: 5px;} .mar-l-s {margin-left: 10px;} .mar-l-m {margin-left: 15px;} .mar-l-l {margin-left: 20px;} .mar-l-xl {margin-left: 25px;} .mar-l-xxl {margin-left: 30px;} } /* MARGIN-RIGHT */ .mar-r-xs {margin-right: 10px;} .mar-r-s {margin-right: 20px;} .mar-r-m {margin-right: 30px;} .mar-r-l {margin-right: 40px;} .mar-r-xl {margin-right: 50px;} .mar-r-xxl {margin-right: 60px;} @media only screen and (max-width: 900px) { .mar-r-xs {margin-right: 5px;} .mar-r-s {margin-right: 10px;} .mar-r-m {margin-right: 15px;} .mar-r-l {margin-right: 20px;} .mar-r-xl {margin-right: 25px;} .mar-r-xxl {margin-right: 30px;} } /* MARGIN-TOP-BOTTOM */ .mar-tb-xs {margin-top: 10px; margin-bottom: 10px;} .mar-tb-s {margin-top: 20px; margin-bottom: 20px;} .mar-tb-m {margin-top: 30px; margin-bottom: 30px;} .mar-tb-l {margin-top: 40px; margin-bottom: 40px;} .mar-tb-xl {margin-top: 50px; margin-bottom: 50px;} .mar-tb-xxl {margin-top: 60px; margin-bottom: 60px;} @media only screen and (max-width: 900px) { .mar-tb-xs {margin-top: 5px; margin-bottom: 5px;} .mar-tb-s {margin-top: 10px; margin-bottom: 10px;} .mar-tb-m {margin-top: 15px; margin-bottom: 15px;} .mar-tb-l {margin-top: 20px; margin-bottom: 20px;} .mar-tb-xl {margin-top: 25px; margin-bottom: 25px;} .mar-tb-xxl {margin-top: 30px; margin-bottom: 30px;} } /* MARGIN-LEFT-RIGHT */ .mar-lr-xs {margin-left: 10px; margin-right: 10px;} .mar-lr-s {margin-left: 20px; margin-right: 20px;} .mar-lr-m {margin-left: 30px; margin-right: 30px;} .mar-lr-l {margin-left: 40px; margin-right: 40px;} .mar-lr-xl {margin-left: 50px; margin-right: 50px;} .mar-lr-xxl {margin-left: 60px; margin-right: 60px;} @media only screen and (max-width: 900px) { .mar-lr-xs {margin-left: 5px; margin-right: 5px;} .mar-lr-s {margin-left: 10px; margin-right: 10px;} .mar-lr-m {margin-left: 15px; margin-right: 15px;} .mar-lr-l {margin-left: 20px; margin-right: 20px;} .mar-lr-xl {margin-left: 25px; margin-right: 25px;} .mar-lr-xxl {margin-left: 30px; margin-right: 30px;} } /* PADDING */ .pad-xs {padding: 10px;} .pad-s {padding: 20px;} .pad-m {padding: 30px;} .pad-l {padding: 40px;} .pad-xl {padding: 50px;} .pad-xxl {padding: 60px;} @media only screen and (max-width: 900px) { .pad-xs {padding: 5px;} .pad-s {padding: 10px;} .pad-m {padding: 15px;} .pad-l {padding: 20px;} .pad-xl {padding: 25px;} .pad-xxl {padding: 30px;} } /* PADDING-TOP */ .pad-t-xs {padding-top: 10px;} .pad-t-s {padding-top: 20px;} .pad-t-m {padding-top: 30px;} .pad-t-l {padding-top: 40px;} .pad-t-xl {padding-top: 50px;} .pad-t-xxl {padding-top: 60px;} @media only screen and (max-width: 900px) { .pad-t-xs {padding-top: 5px;} .pad-t-s {padding-top: 10px;} .pad-t-m {padding-top: 15px;} .pad-t-l {padding-top: 20px;} .pad-t-xl {padding-top: 25px;} .pad-t-xxl {padding-top: 30px;} } /* PADDING-BOTTOM */ .pad-b-xs {padding-bottom: 10px;} .pad-b-s {padding-bottom: 20px;} .pad-b-m {padding-bottom: 30px;} .pad-b-l {padding-bottom: 40px;} .pad-b-xl {padding-bottom: 50px;} .pad-b-xxl {padding-bottom: 60px;} @media only screen and (max-width: 900px) { .pad-b-xs {padding-bottom: 5px;} .pad-b-s {padding-bottom: 10px;} .pad-b-m {padding-bottom: 15px;} .pad-b-l {padding-bottom: 20px;} .pad-b-xl {padding-bottom: 25px;} .pad-b-xxl {padding-bottom: 30px;} } /* PADDING-LEFT */ .pad-l-xs {padding-left: 10px;} .pad-l-s {padding-left: 20px;} .pad-l-m {padding-left: 30px;} .pad-l-l {padding-left: 40px;} .pad-l-xl {padding-left: 50px;} .pad-l-xxl {padding-left: 60px;} @media only screen and (max-width: 900px) { .pad-l-xs {padding-left: 5px;} .pad-l-s {padding-left: 10px;} .pad-l-m {padding-left: 15px;} .pad-l-l {padding-left: 20px;} .pad-l-xl {padding-left: 25px;} .pad-l-xxl {padding-left: 30px;} } /* PADDING-RIGHT */ .pad-r-xs {padding-right: 10px;} .pad-r-s {padding-right: 20px;} .pad-r-m {padding-right: 30px;} .pad-r-l {padding-right: 40px;} .pad-r-xl {padding-right: 50px;} .pad-r-xxl {padding-right: 60px;} @media only screen and (max-width: 900px) { .pad-r-xs {padding-right: 5px;} .pad-r-s {padding-right: 10px;} .pad-r-m {padding-right: 15px;} .pad-r-l {padding-right: 20px;} .pad-r-xl {padding-right: 25px;} .pad-r-xxl {padding-right: 30px;} } /* PADDING-TOP-BOTTOM */ .pad-tb-xs {padding-top: 10px; padding-bottom: 10px;} .pad-tb-s {padding-top: 20px; padding-bottom: 20px;} .pad-tb-m {padding-top: 30px; padding-bottom: 30px;} .pad-tb-l {padding-top: 40px; padding-bottom: 40px;} .pad-tb-xl {padding-top: 50px; padding-bottom: 50px;} .pad-tb-xxl {padding-top: 60px; padding-bottom: 60px;} @media only screen and (max-width: 900px) { .pad-tb-xs {padding-top: 5px; padding-bottom: 5px;} .pad-tb-s {padding-top: 10px; padding-bottom: 10px;} .pad-tb-m {padding-top: 15px; padding-bottom: 15px;} .pad-tb-l {padding-top: 20px; padding-bottom: 20px;} .pad-tb-xl {padding-top: 25px; padding-bottom: 25px;} .pad-tb-xxl {padding-top: 30px; padding-bottom: 30px;} } /* PADDING-LEFT-RIGHT */ .pad-lr-xs {padding-left: 10px; padding-right: 10px;} .pad-lr-s {padding-left: 20px; padding-right: 20px;} .pad-lr-m {padding-left: 30px; padding-right: 30px;} .pad-lr-l {padding-left: 40px; padding-right: 40px;} .pad-lr-xl {padding-left: 50px; padding-right: 50px;} .pad-lr-xxl {padding-left: 60px; padding-right: 60px;} @media only screen and (max-width: 900px) { .pad-lr-xs {padding-left: 5px; padding-right: 5px;} .pad-lr-s {padding-left: 10px; padding-right: 10px;} .pad-lr-m {padding-left: 15px; padding-right: 15px;} .pad-lr-l {padding-left: 20px; padding-right: 20px;} .pad-lr-xl {padding-left: 25px; padding-right: 25px;} .pad-lr-xxl {padding-left: 30px; padding-right: 30px;} } /* ---- TAGS --------------------------------------------------------------------- */ .tag {width: fit-content; margin-left: 20px; margin-right: 20px; padding: 0px 15px; border-radius: 35px; font-size: 12px; color: #fff; /*white-space: nowrap;*/} /* ---- TYPOGRAPHY --------------------------------------------------------------- */ /* HEADLINES */ h1, h2, h3, h4, h5, h6 {font-family: 'open_sansregular', Arial, sans-serif;} h1 {font-size: 30px; line-height: 45px; margin-bottom: 30px;} h2 {font-size: 25px; line-height: 40px; margin-bottom: 30px;} h3 {font-size: 22px; line-height: 30px; margin-bottom: 20px;} h4 {font-size: 20px; line-height: 30px; margin-bottom: 15px;} h5 {font-size: 18px; line-height: 25px; margin-bottom: 15px;} h6 {font-size: 16px; line-height: 20px; margin-bottom: 15px;} /* BODY TEXT */ p {font-family: 'open_sansregular', Arial, sans-serif; font-size: 16px; line-height: 25px; color: #2a2b2e;} /* TEXT SIZES */ .text-xs {font-size: 12px;} .text-s {font-size: 15px;} .text-m {font-size: 17px;} .text-l {font-size: 20px;} .text-xl {font-size: 25px;} .text-xxl {font-size: 30px;} /* TEXT WEIGHT */ .text-light {font-family: 'open_sans_lightregular', Arial, sans-serif;} .text-medium {font-family: 'open_sansregular', Arial, sans-serif;} .text-bold, strong {font-family: 'open_sansbold', Arial, sans-serif;} /* TEXT ALIGN */ .text-left {text-align: left !important;} .text-center {text-align: center !important;} .text-right {text-align: right !important;} /* SPECIALS */ blockquote {border-left: 4px solid #ff677c; margin: 20px 0;; padding: 20px;font-style: italic; font-size: 20px;} i, em {font-style: italic;} code {font-family: 'open_sans_regular', Arial, sans-serif; color: #ff677c; background: #eee; border: 1px solid #c5c5c5; border-radius: 3px; font-size: 14px; margin: 0 5px; padding: 3px 5px 4px 5px; white-space: nowrap;} del {text-decoration: line-through;} mark {background: #ff677c; color: #fff; padding: 0 4px;} .uppercase {text-transform: uppercase;} .small-caps {font-variant: small-caps;} /** ---------------------------------------------------- DRAFT ---------------------------------------------------- **/ /* ----------------------------------------------------------------------------------------------------------------- */ /** --------------------------------------------------- PLANNED --------------------------------------------------- **/ /* ----------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ .dont-show-on-mobile {display: none !important;} @media only screen and (min-width: 900px) {.dont-show-on-mobile {display: block !important;}} .dont-show-on-desktop {display: none !important;} @media only screen and (max-width: 900px){.dont-show-on-desktop {display: block !important;}} /* ALIGNMENT */ .center {margin: 0 auto;} .relative {position: relative;} .absolute {position: absolute;} /* GRADIENTS */ .gradient-primary { background: #00d8ff; /* Old browsers */ background: -moz-linear-gradient(left, #00d8ff 0%, #00ff72 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00d8ff 0%,#00ff72 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00d8ff 0%,#00ff72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d8ff', endColorstr='#00ff72',GradientType=1 ); /* IE6-9 */ } .gradient-secondary { background: #00d8ff; /* Old browsers */ background: -moz-linear-gradient(left, #00d8ff 0%, #00ff72 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00d8ff 0%,#00ff72 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00d8ff 0%,#00ff72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d8ff', endColorstr='#00ff72',GradientType=1 ); /* IE6-9 */ } .gradient-tertiary { background: #00d8ff; /* Old browsers */ background: -moz-linear-gradient(left, #00d8ff 0%, #00ff72 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00d8ff 0%,#00ff72 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00d8ff 0%,#00ff72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d8ff', endColorstr='#00ff72',GradientType=1 ); /* IE6-9 */ } .opacity {opacity: 0.5;} /* -------------------------------- PERCENTAGE GRID ------------------------------ */ /* ------------------------------------------------------------------------------- */ /* MAX WIDTH */ .grid {max-width: 1400px; margin: 0 auto;} @media only screen and (max-width: 1500px) {.grid {margin: 0 4.5%}} /* ROWS */ .row {width: 100%; position: relative;} .row:after {content: ""; display: table; clear: both;} /* COLUMNS DESKTOP */ .col-1-1 {width: 100%; float: left;} .col-1-2 {width: 50%; float: left;} .col-2-2 {width: 100%; float: left;} .col-1-3 {width: 33.333333%; float: left;} .col-2-3 {width: 66.666667%; float: left;} .col-3-3 {width: 100%; float: left;} .col-1-4 {width: 25%; float: left;} .col-2-4 {width: 50%; float: left;} .col-3-4 {width: 75%; float: left;} .col-4-4 {width: 100%; float: left;} .col-1-5 {width: 20%; float: left;} .col-2-5 {width: 40%; float: left;} .col-3-5 {width: 60%; float: left;} .col-4-5 {width: 80%; float: left;} .col-5-5 {width: 100%; float: left;} .col-1-6 {width: 16.666667%; float: left;} .col-2-6 {width: 33.333333%; float: left;} .col-3-6 {width: 50%; float: left;} .col-4-6 {width: 66.666667%; float: left;} .col-5-6 {width: 83.333333%; float: left;} .col-6-6 {width: 100%; float: left;} .col-1-7 {width: 14.28%; float: left;} .col-2-7 {width: 28.6%; float: left;} .col-3-7 {width: 42.8%; float: left;} .col-4-7 {width: 57.2%; float: left;} .col-5-7 {width: 71.4%; float: left;} .col-6-7 {width: 85.7%; float: left;} .col-7-7 {width: 100%; float: left;} .col-1-8 {width: 12.5%; float: left;} .col-2-8 {width: 25%; float: left;} .col-3-8 {width: 37.5%; float: left;} .col-4-8 {width: 50%; float: left;} .col-5-8 {width: 62.5%; float: left;} .col-6-8 {width: 75%; float: left;} .col-7-8 {width: 87.5%; float: left;} .col-8-8 {width: 100%; float: left;} .col-1-9 {width: 11.11%; float: left;} .col-2-9 {width: 22.22%; float: left;} .col-3-9 {width: 33.3333%; float: left;} .col-4-9 {width: 44.44%; float: left;} .col-5-9 {width: 55.55%; float: left;} .col-6-9 {width: 66.66%; float: left;} .col-7-9 {width: 77.77%; float: left;} .col-8-9 {width: 88.88%; float: left;} .col-9-9 {width: 100%; float: left;} .col-1-10 {width: 10%; float: left;} .col-2-10 {width: 20%; float: left;} .col-3-10 {width: 30%; float: left;} .col-4-10 {width: 40%; float: left;} .col-5-10 {width: 50%; float: left;} .col-6-10 {width: 60%; float: left;} .col-7-10 {width: 0%; float: left;} .col-8-10 {width: 80%; float: left;} .col-9-10 {width: 90%; float: left;} .col-10-10 {width: 100%; float: left;} .col-1-11 {width: 9.09%; float: left;} .col-2-11 {width: 18.15%; float: left;} .col-3-11 {width: 27.25%; float: left;} .col-4-11 {width :36.3333%; float: left;} .col-5-11 {width: 45.45%; float: left;} .col-6-11 {width: 54.55%; float: left;} .col-7-11 {width: 63.6%; float: left;} .col-8-11 {width: 72.7%; float: left;} .col-9-11 {width: 81.8%; float: left;} .col-10-11 {width: 90.9%; float: left;} .col-11-11 {width: 100%; float: left;} .col-1-12 {width: 8.33%; float: left;} .col-2-12 {width: 16.7%; float: left;} .col-3-12 {width: 24.99%; float: left;} .col-4-12 {width: 33.3333%; float: left;} .col-5-12 {width: 41.6667%; float: left;} .col-6-12 {width: 50%; float: left;} .col-7-12 {width: 58.3333%; float: left;} .col-8-12 {width: 66.6667%; float: left;} .col-9-12 {width: 75%; float: left;} .col-10-12 {width: 83.3333%; float: left;} .col-11-12 {width: 91.6667%; float: left;} .col-12-12 {width: 100%; float: left;} /* COLUMNS TABLET */ @media only screen and (max-width: 900px) { .col-1-1,.col-1-2,.col-2-2,.col-1-3,.col-2-3,.col-3-3,.col-1-4,.col-2-4,.col-3-4,.col-4-4,.col-1-5,.col-2-5,.col-3-5,.col-4-5,.col-5-5,.col-1-6, .col-2-6,.col-3-6,.col-4-6,.col-5-6,.col-6-6,.col-1-7,.col-2-7,.col-3-7,.col-4-7,.col-5-7,.col-6-7,.col-7-7,.col-1-8,.col-2-8,.col-3-8,.col-4-8, .col-5-8,.col-6-8,.col-7-8,.col-8-8,.col-1-9,.col-2-9,.col-3-9,.col-4-9,.col-5-9,.col-6-9,.col-7-9,.col-8-9,.col-9-9,.col-1-10, .col-2-10, .col-3-10, .col-4-10,.col-5-10,.col-6-10,.col-7-10,.col-8-10,.col-9-10,.col-10-10,.col-1-11,.col-2-11,.col-3-11,.col-4-11,.col-5-11,.col-6-11,.col-7-11,.col-8-11, .col-9-11,.col-10-11,.col-11-11,.col-1-12,.col-2-12,.col-3-12,.col-4-12,.col-5-12,.col-6-12,.col-7-12,.col-8-12,.col-9-12,.col-10-12,.col-11-12 {width: 100%;} } /* COLUMNS MOBILE */ @media only screen and (max-width: 520px) { .col-1-1,.col-1-2,.col-2-2,.col-1-3,.col-2-3,.col-3-3,.col-1-4,.col-2-4,.col-3-4,.col-4-4,.col-1-5,.col-2-5,.col-3-5,.col-4-5,.col-5-5,.col-1-6, .col-2-6,.col-3-6,.col-4-6,.col-5-6,.col-6-6,.col-1-7,.col-2-7,.col-3-7,.col-4-7,.col-5-7,.col-6-7,.col-7-7,.col-1-8,.col-2-8,.col-3-8,.col-4-8, .col-5-8,.col-6-8,.col-7-8,.col-8-8,.col-1-9,.col-2-9,.col-3-9,.col-4-9,.col-5-9,.col-6-9,.col-7-9,.col-8-9,.col-9-9,.col-1-10,.col-2-10,.col-3-10, .col-4-10,.col-5-10,.col-6-10,.col-7-10,.col-8-10,.col-9-10,.col-10-10,.col-1-11,.col-2-11,.col-3-11,.col-4-11,.col-5-11,.col-6-11,.col-7-11,.col-8-11, .col-9-11,.col-10-11,.col-11-11,.col-1-12,.col-2-12,.col-3-12,.col-4-12,.col-5-12,.col-6-12,.col-7-12,.col-8-12,.col-9-12,.col-10-12,.col-11-12 {width: 100%;} } /* OFFSET DESKTOP */ .offset-1-2 {margin-left: 50%; float: left;} .offset-2-2 {margin-left: 100%; float: left;} .offset-1-3 {margin-left: 33.333333%; float: left;} .offset-2-3 {margin-left: 66.666667%; float: left;} .offset-1-4 {margin-left: 25%; float: left;} .offset-2-4 {margin-left: 50%; float: left;} .offset-3-4 {margin-left: 75%; float: left;} .offset-1-5 {margin-left: 20%; float: left;} .offset-2-5 {margin-left: 40%; float: left;} .offset-3-5 {margin-left: 60%; float: left;} .offset-4-5 {margin-left: 80%; float: left;} .offset-1-6 {margin-left: 16.666667%; float: left;} .offset-2-6 {margin-left: 33.333333%; float: left;} .offset-3-6 {margin-left: 50%; float: left;} .offset-4-6 {margin-left: 66.666667%; float: left;} .offset-5-6 {margin-left: 83.333333%; float: left;} .offset-1-7 {margin-left: 14.28%; float: left;} .offset-2-7 {margin-left: 28.6%; float: left;} .offset-3-7 {margin-left: 42.8%; float: left;} .offset-4-7 {margin-left: 57.2%; float: left;} .offset-5-7 {margin-left: 71.4%; float: left;} .offset-6-7 {margin-left: 85.7%; float: left;} .offset-1-8 {margin-left: 12.5%; float: left;} .offset-2-8 {margin-left: 25%; float: left;} .offset-3-8 {margin-left: 37.5%; float: left;} .offset-4-8 {margin-left: 50%; float: left;} .offset-5-8 {margin-left: 62.5%; float: left;} .offset-6-8 {margin-left: 75%; float: left;} .offset-7-8 {margin-left: 87.5%; float: left;} .offset-1-9 {margin-left: 11.11%; float: left;} .offset-2-9 {margin-left: 22.22%; float: left;} .offset-3-9 {margin-left: 33.3333%; float: left;} .offset-4-9 {margin-left: 44.44%; float: left;} .offset-5-9 {margin-left: 55.55%; float: left;} .offset-6-9 {margin-left: 66.66%; float: left;} .offset-7-9 {margin-left: 77.77%; float: left;} .offset-8-9 {margin-left: 88.88%; float: left;} .offset-1-10 {margin-left: 10%; float: left;} .offset-2-10 {margin-left: 20%; float: left;} .offset-3-10 {margin-left: 30%; float: left;} .offset-4-10 {margin-left: 40%; float: left;} .offset-5-10 {margin-left: 50%; float: left;} .offset-6-10 {margin-left: 60%; float: left;} .offset-7-10 {margin-left: 70%; float: left;} .offset-8-10 {margin-left: 80%; float: left;} .offset-9-10 {margin-left: 90%; float: left;} .offset-1-11 {margin-left: 9.09%; float: left;} .offset-2-11 {margin-left: 18.15%; float: left;} .offset-3-11 {margin-left: 27.25%; float: left;} .offset-4-11 {margin-left: 36.3333%; float: left;} .offset-5-11 {margin-left: 45.45%; float: left;} .offset-6-11 {margin-left: 54.55%; float: left;} .offset-7-11 {margin-left: 63.6%; float: left;} .offset-8-11 {margin-left: 72.7%; float: left;} .offset-9-11 {margin-left: 81.8%; float: left;} .offset-10-11 {margin-left: 90.9%; float: left;} .offset-1-12 {margin-left: 8.33%; float: left;} .offset-2-12 {margin-left: 16.7%; float: left;} .offset-3-12 {margin-left: 24.99%; float: left;} .offset-4-12 {margin-left: 33.3333%; float: left;} .offset-5-12 {margin-left: 41.6667%; float: left;} .offset-6-12 {margin-left: 50%; float: left;} .offset-7-12 {margin-left: 58.3333%; float: left;} .offset-8-12 {margin-left: 66.6667%; float: left;} .offset-9-12 {margin-left: 75%; float: left;} .offset-10-12 {margin-left: 83.3333%; float: left;} .offset-11-12 {margin-left: 91.6667%; float: left;} /* OFFSET MOBILE */ @media only screen and (max-width: 900px) { .offset-1-2, .offset-2-2, .offset-1-3, .offset-2-3, .offset-1-4, .offset-2-4, .offset-3-4, .offset-1-5, .offset-2-5, .offset-3-5, .offset-4-5, .offset-1-6, .offset-2-6, .offset-3-6, .offset-4-6, .offset-5-6, .offset-1-7, .offset-2-7, .offset-3-7, .offset-4-7, .offset-5-7, .offset-6-7, .offset-1-8, .offset-2-8, .offset-3-8, .offset-4-8, .offset-5-8, .offset-6-8, .offset-7-8, .offset-1-9, .offset-2-9, .offset-3-9, .offset-4-9, .offset-5-9, .offset-6-9, .offset-7-9, .offset-8-9, .offset-1-10, .offset-2-10, .offset-3-10, .offset-4-10, .offset-5-10, .offset-6-10, .offset-7-10, .offset-8-10, .offset-9-10, .offset-1-11, .offset-2-11, .offset-3-11, .offset-4-11, .offset-5-11, .offset-6-11, .offset-7-11, .offset-8-11, .offset-9-11, .offset-10-11, .offset-1-12, .offset-2-12, .offset-3-12, .offset-4-12, .offset-5-12, .offset-6-12, .offset-7-12, .offset-8-12, .offset-9-12, .offset-10-12, .offset-11-12 {margin-left: 0;} } /* --------------------------------- NAVIGATION ---------------------------------- */ /* ------------------------------------------------------------------------------- */ /* nav ul { float: right; } nav ul li { float: left; margin-left: 40px; font-family: 'lunaregular', Arial, sans-serif; font-size: 13px; } */ .navigation-left { background-color: #fff; border-right: 1px solid #eee; padding: 30px; position: fixed; } /* ----------------------------------- FLEXBOX ----------------------------------- */ /* ------------------------------------------------------------------------------- */ .flex-container { display: flex; /* flex-wrap: wrap; justify-content: space-around; */ } .flex-item { /* flex-grow: 10; flex-basis: 15%; */ } /* ----------------------------------- CSS GRID ---------------------------------- */ /* ------------------------------------------------------------------------------- */ .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-column-gap: 30px; grid-row-gap: 30px; } .grid-item { } /* ------------------------------- BUTTONS & LINKS ------------------------------- */ /* ------------------------------------------------------------------------------- */ /* LINKS */ a {color: #ff677c; text-decoration: none; cursor: pointer;} a:hover {color: #777c8b; text-decoration: none; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .underline {text-decoration: underline;} /* BUTTONS */ .button {text-transform: uppercase; border-radius: 2px; font-weight:800; padding: 10px 20px; display: block; text-align: center; cursor: pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .button:hover {background: rgba(0, 0, 0, 0.6); color: #fff; text-decoration: none;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .button-disabled {text-transform: uppercase; border-radius: 2px; font-weight:800; padding: 10px 20px; display: block; text-align: center; cursor: default;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .button-disabled:hover {color: #fff; text-decoration: none;} .button-round {text-transform: uppercase; border-radius: 50px; font-weight:800; padding: 10px 20px; display: block; text-align: center; cursor: pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .button-round:hover {background: rgba(0, 0, 0, 0.6); color: #fff; text-decoration: none;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} /* BUTTONS WITH FIX WIDTH */ .button-width {width: 400px;} @media only screen and (max-width: 900px) {.button-width, .button, .button-disabled {width: 100%;}} /* ------------------------------------ LISTS ------------------------------------ */ /* ------------------------------------------------------------------------------- */ .nobullet { list-style-type: none; padding: 0; } /* ------------------------------------ FORMS ------------------------------------ */ /* ------------------------------------------------------------------------------- */ /* appearance: none; Mit Hilfe des CSS-Befehls appearance: none; kann die Standard-Gestaltung von Bedienelementen im Browser deaktiviert werden. Das ist nicht nur hilfreich um Selectlisten, Radio-Buttons und Checkboxen zu gestalten, sondern auch um das Standard-Styling von Suchfeldern, Buttons und weiteren UI-Elementen zu entfernen, deren Gestaltung zunehmend vom Browser übernommen wird. Der appearance-Befehl ermöglicht es übrigens auch, dass Standard-Styling des Browsers/OS bewusst zuzuweisen. Progressive Enhancement: Der appearance-Befehl funktioniert nicht im Internet Explorer. Damit es in alten Versionen des Browsers (<=IE9) nicht zu unerwünschten Effekten kommt, behalten wir in inkompatiblen Systemen das Standard-Aussehen der Eingabefelder bei. Nach dem Prinzip des Progressive Enhancement gestalten wir die Felder nur dann, wenn der Browser den Befehl auch unterstützt. */ /* Select-Listen gestalten: Die individuelle Gestaltung von Select-Listen ist einfach. Über den appearance-Befehl entfernen wir zunächst das Standard-Styling. */ /* remove styles */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; width: 100% } /* Formular-Styling mit CSS – Select-Listen, Radio-Buttons und Checkboxen individuell gestalten Zuletzt aktualisiert am 11. August 2015 • 16 Kommentare • Themen: CSS, Formulare formular-css Die Gestaltung von Formularfeldern gehört zu den eher lästigen Aufgaben eines Web-Designers. Insbesondere Select-Listen, Radio-Buttons und Checkboxen ließen sich lange Zeit kaum mit CSS ansprechen, so dass für gewöhnlich mit JavaScript nachgeholfen werden musste, wenn eine individuelle Gestaltung gewünscht war. Mittlerweile lassen sich Formularfelder in modernen Browsern ohne JavaScript individuell gestalten. In diesem Zusammenhang möchte ich einige CSS-Snippets archivieren. Workshop: CSS – The Next Level Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen. Berlin, 21. November 2016 appearance: none; Mit Hilfe des CSS-Befehls appearance: none; kann die Standard-Gestaltung von Bedienelementen im Browser deaktiviert werden. Das ist nicht nur hilfreich um Selectlisten, Radio-Buttons und Checkboxen zu gestalten, sondern auch um das Standard-Styling von Suchfeldern, Buttons und weiteren UI-Elementen zu entfernen, deren Gestaltung zunehmend vom Browser übernommen wird. Der appearance-Befehl ermöglicht es übrigens auch, dass Standard-Styling des Browsers/OS bewusst zuzuweisen. Progressive Enhancement Der appearance-Befehl funktioniert nicht im Internet Explorer. Damit es in alten Versionen des Browsers (<=IE9) nicht zu unerwünschten Effekten kommt, behalten wir in inkompatiblen Systemen das Standard-Aussehen der Eingabefelder bei. Nach dem Prinzip des Progressive Enhancement gestalten wir die Felder nur dann, wenn der Browser den Befehl auch unterstützt. Select-Listen gestalten Die individuelle Gestaltung von Select-Listen ist einfach. Über den appearance-Befehl entfernen wir zunächst das Standard-Styling. /* remove standard-styles */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; width: 100% } /* Anschließend gestalten wir das Element mit CSS unseren Vorstellungen entsprechend. Ein individuelles Pfeil-Icon weisen wir in diesem Beispiel als CSS-background-image zu – eine DataURI bietet sich ebenfalls an. */ /* styling */ select { width:100%; border: 1px solid #bbb; padding:.75em 1em .5em 1em; background-color:white; background-image:url(../gfx/arrow.png); background-position: right; background-repeat: no-repeat; } /* Damit der Internet Explorer 10 den Pfeil des Browsers ebenfalls verliert, ist ein kleiner Hack nötig. */ /* hide browser-styling (arrow) in IE10 */ select::-ms-expand { display:none; } /* Die inkompatiblen Browser (IE8 & IE9) identifizieren wir hier mit einer CSS-Klasse, die über einen Conditional Comment eingefügt wurde. Auch hier sind verschiedene Herangehensweisen denkbar. Wir entfernen somit die Pfeil-Grafik, da ansonsten zwei Pfeile in der Select-Liste angezeigt würden. */ .lt-ie10 select { background-image: none; } /* In modernen Browsern blenden wir die Standard-UI-Element für Radio-Buttons und Checkboxen komplett aus. Wir identifizieren die modernen Browser über die Pseudoklasse :checked. Alle Browser die :checked verstehen, sind auch in der Lage die anderen notwendigen Befehle zu interpretieren. */ /* remove standard-styles */ /* input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; width: 100%; border: 1px solid #bbb; padding: 10px; } */ /* graceful degradation for ie8 */ /* input[type='checkbox'], input[type='radio'] { width:auto; float:left; margin-right: .75em; background:transparent; border:none; } */ /* input[type='checkbox']:checked, input[type='checkbox']:not(:checked), input[type='radio']:checked, input[type='radio']:not(:checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; } input[type='checkbox'] + label, input[type='radio'] + label { cursor: pointer; } */ /* Nachdem wir die Standard-UI-Elemente versteckt haben, fügen wir Sie als ::before-Pseudoelement des jeweiligen