/*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .c-text { display: block; font-size: 16px; line-height: 24px; } /* Modifiers ========================================================================= */ .c-text--inline { display: inline; margin-right: 15px; } .c-text--size-small { font-size: 14px; } .c-text--italic { font-style: italic; } .c-text--semi-bold { font-weight: 600; } .c-text--bold { font-weight: 900; } .c-text--break { word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .c-text--size-xsmall { font-size: 12px; line-height: 1.4; margin-bottom: 5px; } .c-text--size-small { font-size: 14px; } .c-text--size-normal { font-size: 16px; } @media only screen and (max-width: 47.96875em) { .c-text--size-normal { font-size: 14px; } } .c-text--size-large { font-size: 18px; } @media only screen and (max-width: 47.96875em) { .c-text--size-large { font-size: 16px; } } .c-text--size-xlarge { font-size: 22px; } @media only screen and (max-width: 47.96875em) { .c-text--size-xlarge { font-size: 18px; } } .c-text--color-white { color: #ffffff; } .c-text--color-gray-dark { color: #828282; } .c-text--color-middle-gray-a { color: #B2B2B2; } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .c-icon { display: inline-block; width: 20px; height: 20px; fill: #25DC71; } /* Modifiers ========================================================================= */ .c-icon--size-small { width: 28px; height: 28px; } .c-icon--size-small .c-icon__element { height: 14px; max-height: inherit; } .c-icon--size-normal { width: 50px; height: 50px; } .c-icon--size-normal .c-icon__element { width: 50px; } .c-icon--size-large { width: 65px; height: 65px; } .c-icon--size-large .c-icon__element { width: 65px; } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .c-footer { position: relative; background-color: #ffffff; border-top: 1px solid #E6E6E6; } /* Elements ========================================================================= */ .footer__secondary { padding: 6px 0px; } @media only screen and (max-width: 47.96875em) { .footer__secondary { padding: 20px 0px; } } .footer__social-link { display: inline-block; padding: 10px; margin-left: 5px; } .footer__social-link svg { -webkit-transition: fill 300ms; transition: fill 300ms; } .footer__social-link:hover svg { fill: #949BFF; } @media only screen and (min-width: 48em) { .footer__social-link { padding: 10px 10px 6px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } .footer__logo { max-height: 70px; } @media only screen and (max-width: 47.96875em) { .footer__logo { display: block; margin: 20px auto; } } .footer__social { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media only screen and (max-width: 47.96875em) { .footer__social { text-align: center; } } @media only screen and (min-width: 48em) { .footer__social { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-left: 44px; } } .footer__social-text { font-size: 1.4rem; font-weight: 600; margin-right: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 47.96875em) { .footer__social-text { display: block; } } .footer__secondary-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 92px; } @media only screen and (max-width: 47.96875em) { .footer__secondary-inner { display: block; } } .footer__links { margin-left: auto; } @media only screen and (max-width: 47.96875em) { .footer__links { border-top: 1px solid #F5F5F5; margin: 10px -10px 0px -10px; padding: 15px 0 0; } } .footer__links-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .footer__links-list-item { list-style-type: none; padding: 0 15px; font-size: 1.4rem; margin-bottom: 5px; margin-top: 5px; } @media only screen and (min-width: 48em) { .footer__links-list-item { padding: 0px; margin-left: 20px; } } .footer__links-list-item-link { text-decoration: none; } .footer__links-list-item-link:hover { color: #949BFF; } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Elements ========================================================================= */ .c-logo__image { width: 120px; } @media only screen and (min-width: 48em) { .c-logo__image { width: 130px; } } @media only screen and (min-width: 64em) { .c-logo__image { width: 157px; } } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .c-heading { margin-bottom: 18px; } h1, .h1 { color: #505050; font-family: "BreeSerif", "Helvetica Neue", Times, serif; line-height: 1.2; margin-bottom: 10px; font-weight: 400; letter-spacing: -0.1rem; font-size: 28px; } @media screen and (min-width: 480px) { h1, .h1 { font-size: calc(28px + 12 * (100vw - 480px) / 760); } } @media screen and (min-width: 1240px) { h1, .h1 { font-size: 40px; } } h2, .h2 { color: #505050; font-family: "BreeSerif", "Helvetica Neue", Times, serif; line-height: 1.176; margin-bottom: 20px; font-weight: 400; letter-spacing: -0.05rem; font-size: 28px; } @media screen and (min-width: 480px) { h2, .h2 { font-size: calc(28px + 6 * (100vw - 480px) / 760); } } @media screen and (min-width: 1240px) { h2, .h2 { font-size: 34px; } } h3, .h3 { color: #505050; font-family: "BreeSerif", "Helvetica Neue", Times, serif; line-height: 1.124; margin-bottom: 20px; font-weight: 400; letter-spacing: -0.05rem; font-size: 22px; } @media screen and (min-width: 480px) { h3, .h3 { font-size: calc(22px + 6 * (100vw - 480px) / 760); } } @media screen and (min-width: 1240px) { h3, .h3 { font-size: 28px; } } h4, .h4 { font-size: 2.2rem; line-height: 1.273; margin-bottom: 20px; font-weight: 400; letter-spacing: -0.05rem; } h5, .h5 { color: #505050; font-family: "BreeSerif", "Helvetica Neue", Times, serif; font-size: 1.8rem; line-height: 1.389; margin-bottom: 20px; font-weight: 400; letter-spacing: -0.05rem; } h6, .h6 { color: #505050; font-family: "BreeSerif", "Helvetica Neue", Times, serif; font-size: 1.6rem; line-height: 1.857; margin-bottom: 20px; font-weight: 400; letter-spacing: -0.05rem; } /* Modifiers ========================================================================= */ .c-heading--white { color: #ffffff; } .c-heading--green { color: #25DC71; } .c-heading--secondary { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; } .c-heading--font-weight-light { font-weight: 300; } .c-heading--font-weight-normal { font-weight: 500; } .c-heading--font-weight-semibold { font-weight: 600; } .c-heading--font-weight-bold { font-weight: 700; } .c-heading--flatten { margin-bottom: 0px; } .c-heading span { color: #949BFF; } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .o-container { margin-right: auto; margin-left: auto; width: 100%; padding-right: 10px; padding-left: 10px; max-width: 1180px; } @media (min-width: 480px) { .o-container { padding-right: 30px; padding-left: 30px; } } .o-grid { box-sizing: border-box; width: calc(100% + 10px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } @media (min-width: 480px) { .o-grid { width: calc(100% + 20px); margin-right: -10px; margin-left: -10px; } } .o-grid.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .o-col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .o-col { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media (min-width: 480px) { .o-col { padding-right: 10px; padding-left: 10px; } } .o-col-0 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } @media (min-width: 480px) { .o-col-0 { padding-right: 10px; padding-left: 10px; } } .u-push-0 { position: relative; right: 0%; } .u-pull-0 { position: relative; left: 0%; } .u-pre-0 { position: relative; margin-left: 0%; } .u-post-0 { position: relative; margin-right: 0%; } .o-col-1 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } @media (min-width: 480px) { .o-col-1 { padding-right: 10px; padding-left: 10px; } } .u-push-1 { position: relative; right: -8.33333%; } .u-pull-1 { position: relative; left: -8.33333%; } .u-pre-1 { position: relative; margin-left: 8.33333%; } .u-post-1 { position: relative; margin-right: 8.33333%; } .o-col-2 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } @media (min-width: 480px) { .o-col-2 { padding-right: 10px; padding-left: 10px; } } .u-push-2 { position: relative; right: -16.66667%; } .u-pull-2 { position: relative; left: -16.66667%; } .u-pre-2 { position: relative; margin-left: 16.66667%; } .u-post-2 { position: relative; margin-right: 16.66667%; } .o-col-3 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } @media (min-width: 480px) { .o-col-3 { padding-right: 10px; padding-left: 10px; } } .u-push-3 { position: relative; right: -25%; } .u-pull-3 { position: relative; left: -25%; } .u-pre-3 { position: relative; margin-left: 25%; } .u-post-3 { position: relative; margin-right: 25%; } .o-col-4 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } @media (min-width: 480px) { .o-col-4 { padding-right: 10px; padding-left: 10px; } } .u-push-4 { position: relative; right: -33.33333%; } .u-pull-4 { position: relative; left: -33.33333%; } .u-pre-4 { position: relative; margin-left: 33.33333%; } .u-post-4 { position: relative; margin-right: 33.33333%; } .o-col-5 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } @media (min-width: 480px) { .o-col-5 { padding-right: 10px; padding-left: 10px; } } .u-push-5 { position: relative; right: -41.66667%; } .u-pull-5 { position: relative; left: -41.66667%; } .u-pre-5 { position: relative; margin-left: 41.66667%; } .u-post-5 { position: relative; margin-right: 41.66667%; } .o-col-6 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } @media (min-width: 480px) { .o-col-6 { padding-right: 10px; padding-left: 10px; } } .u-push-6 { position: relative; right: -50%; } .u-pull-6 { position: relative; left: -50%; } .u-pre-6 { position: relative; margin-left: 50%; } .u-post-6 { position: relative; margin-right: 50%; } .o-col-7 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } @media (min-width: 480px) { .o-col-7 { padding-right: 10px; padding-left: 10px; } } .u-push-7 { position: relative; right: -58.33333%; } .u-pull-7 { position: relative; left: -58.33333%; } .u-pre-7 { position: relative; margin-left: 58.33333%; } .u-post-7 { position: relative; margin-right: 58.33333%; } .o-col-8 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } @media (min-width: 480px) { .o-col-8 { padding-right: 10px; padding-left: 10px; } } .u-push-8 { position: relative; right: -66.66667%; } .u-pull-8 { position: relative; left: -66.66667%; } .u-pre-8 { position: relative; margin-left: 66.66667%; } .u-post-8 { position: relative; margin-right: 66.66667%; } .o-col-9 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } @media (min-width: 480px) { .o-col-9 { padding-right: 10px; padding-left: 10px; } } .u-push-9 { position: relative; right: -75%; } .u-pull-9 { position: relative; left: -75%; } .u-pre-9 { position: relative; margin-left: 75%; } .u-post-9 { position: relative; margin-right: 75%; } .o-col-10 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } @media (min-width: 480px) { .o-col-10 { padding-right: 10px; padding-left: 10px; } } .u-push-10 { position: relative; right: -83.33333%; } .u-pull-10 { position: relative; left: -83.33333%; } .u-pre-10 { position: relative; margin-left: 83.33333%; } .u-post-10 { position: relative; margin-right: 83.33333%; } .o-col-11 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } @media (min-width: 480px) { .o-col-11 { padding-right: 10px; padding-left: 10px; } } .u-push-11 { position: relative; right: -91.66667%; } .u-pull-11 { position: relative; left: -91.66667%; } .u-pre-11 { position: relative; margin-left: 91.66667%; } .u-post-11 { position: relative; margin-right: 91.66667%; } .o-col-12 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } @media (min-width: 480px) { .o-col-12 { padding-right: 10px; padding-left: 10px; } } .u-push-12 { position: relative; right: -100%; } .u-pull-12 { position: relative; left: -100%; } .u-pre-12 { position: relative; margin-left: 100%; } .u-post-12 { position: relative; margin-right: 100%; } .o-col { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } @media only screen and (min-width: 480px) { .o-col--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .o-col-0--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-0--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-0--sm { position: relative; right: 0%; } .u-pull-0--sm { position: relative; left: 0%; } .u-pre-0--sm { position: relative; margin-left: 0%; } .u-post-0--sm { position: relative; margin-right: 0%; } .o-col-1--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-1--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-1--sm { position: relative; right: -8.33333%; } .u-pull-1--sm { position: relative; left: -8.33333%; } .u-pre-1--sm { position: relative; margin-left: 8.33333%; } .u-post-1--sm { position: relative; margin-right: 8.33333%; } .o-col-2--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-2--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-2--sm { position: relative; right: -16.66667%; } .u-pull-2--sm { position: relative; left: -16.66667%; } .u-pre-2--sm { position: relative; margin-left: 16.66667%; } .u-post-2--sm { position: relative; margin-right: 16.66667%; } .o-col-3--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-3--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-3--sm { position: relative; right: -25%; } .u-pull-3--sm { position: relative; left: -25%; } .u-pre-3--sm { position: relative; margin-left: 25%; } .u-post-3--sm { position: relative; margin-right: 25%; } .o-col-4--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-4--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-4--sm { position: relative; right: -33.33333%; } .u-pull-4--sm { position: relative; left: -33.33333%; } .u-pre-4--sm { position: relative; margin-left: 33.33333%; } .u-post-4--sm { position: relative; margin-right: 33.33333%; } .o-col-5--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-5--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-5--sm { position: relative; right: -41.66667%; } .u-pull-5--sm { position: relative; left: -41.66667%; } .u-pre-5--sm { position: relative; margin-left: 41.66667%; } .u-post-5--sm { position: relative; margin-right: 41.66667%; } .o-col-6--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-6--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-6--sm { position: relative; right: -50%; } .u-pull-6--sm { position: relative; left: -50%; } .u-pre-6--sm { position: relative; margin-left: 50%; } .u-post-6--sm { position: relative; margin-right: 50%; } .o-col-7--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-7--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-7--sm { position: relative; right: -58.33333%; } .u-pull-7--sm { position: relative; left: -58.33333%; } .u-pre-7--sm { position: relative; margin-left: 58.33333%; } .u-post-7--sm { position: relative; margin-right: 58.33333%; } .o-col-8--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-8--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-8--sm { position: relative; right: -66.66667%; } .u-pull-8--sm { position: relative; left: -66.66667%; } .u-pre-8--sm { position: relative; margin-left: 66.66667%; } .u-post-8--sm { position: relative; margin-right: 66.66667%; } .o-col-9--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-9--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-9--sm { position: relative; right: -75%; } .u-pull-9--sm { position: relative; left: -75%; } .u-pre-9--sm { position: relative; margin-left: 75%; } .u-post-9--sm { position: relative; margin-right: 75%; } .o-col-10--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-10--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-10--sm { position: relative; right: -83.33333%; } .u-pull-10--sm { position: relative; left: -83.33333%; } .u-pre-10--sm { position: relative; margin-left: 83.33333%; } .u-post-10--sm { position: relative; margin-right: 83.33333%; } .o-col-11--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-11--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-11--sm { position: relative; right: -91.66667%; } .u-pull-11--sm { position: relative; left: -91.66667%; } .u-pre-11--sm { position: relative; margin-left: 91.66667%; } .u-post-11--sm { position: relative; margin-right: 91.66667%; } .o-col-12--sm { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (min-width: 480px) { .o-col-12--sm { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 480px) { .u-push-12--sm { position: relative; right: -100%; } .u-pull-12--sm { position: relative; left: -100%; } .u-pre-12--sm { position: relative; margin-left: 100%; } .u-post-12--sm { position: relative; margin-right: 100%; } .o-col--sm { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } } @media only screen and (min-width: 768px) { .o-col--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .o-col-0--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-0--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-0--md { position: relative; right: 0%; } .u-pull-0--md { position: relative; left: 0%; } .u-pre-0--md { position: relative; margin-left: 0%; } .u-post-0--md { position: relative; margin-right: 0%; } .o-col-1--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-1--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-1--md { position: relative; right: -8.33333%; } .u-pull-1--md { position: relative; left: -8.33333%; } .u-pre-1--md { position: relative; margin-left: 8.33333%; } .u-post-1--md { position: relative; margin-right: 8.33333%; } .o-col-2--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-2--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-2--md { position: relative; right: -16.66667%; } .u-pull-2--md { position: relative; left: -16.66667%; } .u-pre-2--md { position: relative; margin-left: 16.66667%; } .u-post-2--md { position: relative; margin-right: 16.66667%; } .o-col-3--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-3--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-3--md { position: relative; right: -25%; } .u-pull-3--md { position: relative; left: -25%; } .u-pre-3--md { position: relative; margin-left: 25%; } .u-post-3--md { position: relative; margin-right: 25%; } .o-col-4--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-4--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-4--md { position: relative; right: -33.33333%; } .u-pull-4--md { position: relative; left: -33.33333%; } .u-pre-4--md { position: relative; margin-left: 33.33333%; } .u-post-4--md { position: relative; margin-right: 33.33333%; } .o-col-5--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-5--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-5--md { position: relative; right: -41.66667%; } .u-pull-5--md { position: relative; left: -41.66667%; } .u-pre-5--md { position: relative; margin-left: 41.66667%; } .u-post-5--md { position: relative; margin-right: 41.66667%; } .o-col-6--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-6--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-6--md { position: relative; right: -50%; } .u-pull-6--md { position: relative; left: -50%; } .u-pre-6--md { position: relative; margin-left: 50%; } .u-post-6--md { position: relative; margin-right: 50%; } .o-col-7--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-7--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-7--md { position: relative; right: -58.33333%; } .u-pull-7--md { position: relative; left: -58.33333%; } .u-pre-7--md { position: relative; margin-left: 58.33333%; } .u-post-7--md { position: relative; margin-right: 58.33333%; } .o-col-8--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-8--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-8--md { position: relative; right: -66.66667%; } .u-pull-8--md { position: relative; left: -66.66667%; } .u-pre-8--md { position: relative; margin-left: 66.66667%; } .u-post-8--md { position: relative; margin-right: 66.66667%; } .o-col-9--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-9--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-9--md { position: relative; right: -75%; } .u-pull-9--md { position: relative; left: -75%; } .u-pre-9--md { position: relative; margin-left: 75%; } .u-post-9--md { position: relative; margin-right: 75%; } .o-col-10--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-10--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-10--md { position: relative; right: -83.33333%; } .u-pull-10--md { position: relative; left: -83.33333%; } .u-pre-10--md { position: relative; margin-left: 83.33333%; } .u-post-10--md { position: relative; margin-right: 83.33333%; } .o-col-11--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-11--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-11--md { position: relative; right: -91.66667%; } .u-pull-11--md { position: relative; left: -91.66667%; } .u-pre-11--md { position: relative; margin-left: 91.66667%; } .u-post-11--md { position: relative; margin-right: 91.66667%; } .o-col-12--md { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (min-width: 480px) { .o-col-12--md { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 768px) { .u-push-12--md { position: relative; right: -100%; } .u-pull-12--md { position: relative; left: -100%; } .u-pre-12--md { position: relative; margin-left: 100%; } .u-post-12--md { position: relative; margin-right: 100%; } .o-col--md { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } } @media only screen and (min-width: 1024px) { .o-col--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .o-col-0--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-0--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-0--lg { position: relative; right: 0%; } .u-pull-0--lg { position: relative; left: 0%; } .u-pre-0--lg { position: relative; margin-left: 0%; } .u-post-0--lg { position: relative; margin-right: 0%; } .o-col-1--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-1--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-1--lg { position: relative; right: -8.33333%; } .u-pull-1--lg { position: relative; left: -8.33333%; } .u-pre-1--lg { position: relative; margin-left: 8.33333%; } .u-post-1--lg { position: relative; margin-right: 8.33333%; } .o-col-2--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-2--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-2--lg { position: relative; right: -16.66667%; } .u-pull-2--lg { position: relative; left: -16.66667%; } .u-pre-2--lg { position: relative; margin-left: 16.66667%; } .u-post-2--lg { position: relative; margin-right: 16.66667%; } .o-col-3--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-3--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-3--lg { position: relative; right: -25%; } .u-pull-3--lg { position: relative; left: -25%; } .u-pre-3--lg { position: relative; margin-left: 25%; } .u-post-3--lg { position: relative; margin-right: 25%; } .o-col-4--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-4--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-4--lg { position: relative; right: -33.33333%; } .u-pull-4--lg { position: relative; left: -33.33333%; } .u-pre-4--lg { position: relative; margin-left: 33.33333%; } .u-post-4--lg { position: relative; margin-right: 33.33333%; } .o-col-5--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-5--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-5--lg { position: relative; right: -41.66667%; } .u-pull-5--lg { position: relative; left: -41.66667%; } .u-pre-5--lg { position: relative; margin-left: 41.66667%; } .u-post-5--lg { position: relative; margin-right: 41.66667%; } .o-col-6--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-6--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-6--lg { position: relative; right: -50%; } .u-pull-6--lg { position: relative; left: -50%; } .u-pre-6--lg { position: relative; margin-left: 50%; } .u-post-6--lg { position: relative; margin-right: 50%; } .o-col-7--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-7--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-7--lg { position: relative; right: -58.33333%; } .u-pull-7--lg { position: relative; left: -58.33333%; } .u-pre-7--lg { position: relative; margin-left: 58.33333%; } .u-post-7--lg { position: relative; margin-right: 58.33333%; } .o-col-8--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-8--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-8--lg { position: relative; right: -66.66667%; } .u-pull-8--lg { position: relative; left: -66.66667%; } .u-pre-8--lg { position: relative; margin-left: 66.66667%; } .u-post-8--lg { position: relative; margin-right: 66.66667%; } .o-col-9--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-9--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-9--lg { position: relative; right: -75%; } .u-pull-9--lg { position: relative; left: -75%; } .u-pre-9--lg { position: relative; margin-left: 75%; } .u-post-9--lg { position: relative; margin-right: 75%; } .o-col-10--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-10--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-10--lg { position: relative; right: -83.33333%; } .u-pull-10--lg { position: relative; left: -83.33333%; } .u-pre-10--lg { position: relative; margin-left: 83.33333%; } .u-post-10--lg { position: relative; margin-right: 83.33333%; } .o-col-11--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-11--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-11--lg { position: relative; right: -91.66667%; } .u-pull-11--lg { position: relative; left: -91.66667%; } .u-pre-11--lg { position: relative; margin-left: 91.66667%; } .u-post-11--lg { position: relative; margin-right: 91.66667%; } .o-col-12--lg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media only screen and (min-width: 1024px) and (min-width: 480px) { .o-col-12--lg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .u-push-12--lg { position: relative; right: -100%; } .u-pull-12--lg { position: relative; left: -100%; } .u-pre-12--lg { position: relative; margin-left: 100%; } .u-post-12--lg { position: relative; margin-right: 100%; } .o-col--lg { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } } @media only screen and (min-width: 1240px) { .o-col--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .o-col-0--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-0--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-0--xlg { position: relative; right: 0%; } .u-pull-0--xlg { position: relative; left: 0%; } .u-pre-0--xlg { position: relative; margin-left: 0%; } .u-post-0--xlg { position: relative; margin-right: 0%; } .o-col-1--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-1--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-1--xlg { position: relative; right: -8.33333%; } .u-pull-1--xlg { position: relative; left: -8.33333%; } .u-pre-1--xlg { position: relative; margin-left: 8.33333%; } .u-post-1--xlg { position: relative; margin-right: 8.33333%; } .o-col-2--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-2--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-2--xlg { position: relative; right: -16.66667%; } .u-pull-2--xlg { position: relative; left: -16.66667%; } .u-pre-2--xlg { position: relative; margin-left: 16.66667%; } .u-post-2--xlg { position: relative; margin-right: 16.66667%; } .o-col-3--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-3--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-3--xlg { position: relative; right: -25%; } .u-pull-3--xlg { position: relative; left: -25%; } .u-pre-3--xlg { position: relative; margin-left: 25%; } .u-post-3--xlg { position: relative; margin-right: 25%; } .o-col-4--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-4--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-4--xlg { position: relative; right: -33.33333%; } .u-pull-4--xlg { position: relative; left: -33.33333%; } .u-pre-4--xlg { position: relative; margin-left: 33.33333%; } .u-post-4--xlg { position: relative; margin-right: 33.33333%; } .o-col-5--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-5--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-5--xlg { position: relative; right: -41.66667%; } .u-pull-5--xlg { position: relative; left: -41.66667%; } .u-pre-5--xlg { position: relative; margin-left: 41.66667%; } .u-post-5--xlg { position: relative; margin-right: 41.66667%; } .o-col-6--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-6--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-6--xlg { position: relative; right: -50%; } .u-pull-6--xlg { position: relative; left: -50%; } .u-pre-6--xlg { position: relative; margin-left: 50%; } .u-post-6--xlg { position: relative; margin-right: 50%; } .o-col-7--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-7--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-7--xlg { position: relative; right: -58.33333%; } .u-pull-7--xlg { position: relative; left: -58.33333%; } .u-pre-7--xlg { position: relative; margin-left: 58.33333%; } .u-post-7--xlg { position: relative; margin-right: 58.33333%; } .o-col-8--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-8--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-8--xlg { position: relative; right: -66.66667%; } .u-pull-8--xlg { position: relative; left: -66.66667%; } .u-pre-8--xlg { position: relative; margin-left: 66.66667%; } .u-post-8--xlg { position: relative; margin-right: 66.66667%; } .o-col-9--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-9--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-9--xlg { position: relative; right: -75%; } .u-pull-9--xlg { position: relative; left: -75%; } .u-pre-9--xlg { position: relative; margin-left: 75%; } .u-post-9--xlg { position: relative; margin-right: 75%; } .o-col-10--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-10--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-10--xlg { position: relative; right: -83.33333%; } .u-pull-10--xlg { position: relative; left: -83.33333%; } .u-pre-10--xlg { position: relative; margin-left: 83.33333%; } .u-post-10--xlg { position: relative; margin-right: 83.33333%; } .o-col-11--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-11--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-11--xlg { position: relative; right: -91.66667%; } .u-pull-11--xlg { position: relative; left: -91.66667%; } .u-pre-11--xlg { position: relative; margin-left: 91.66667%; } .u-post-11--xlg { position: relative; margin-right: 91.66667%; } .o-col-12--xlg { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 5px; padding-left: 5px; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media only screen and (min-width: 1240px) and (min-width: 480px) { .o-col-12--xlg { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 1240px) { .u-push-12--xlg { position: relative; right: -100%; } .u-pull-12--xlg { position: relative; left: -100%; } .u-pre-12--xlg { position: relative; margin-left: 100%; } .u-post-12--xlg { position: relative; margin-right: 100%; } .o-col--xlg { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } } /* Modifiers ========================================================================= */ @media only screen and (min-width: 48em) { .o-grid--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } } .o-grid--vertical-align { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .o-grid--centered { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 47.96875em) { .o-grid--small-scroll { -webkit-overflow-scrolling: touch; padding-left: 8px; padding-bottom: 4px; overflow-x: auto; box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; box-pack: start; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .c-header { position: absolute; width: 100%; top: 0; left: 0; padding: 20px 0; padding: 15px 10px; background: #ffffff; } @media only screen and (min-width: 48em) { .c-header { padding: 20px; } } @media only screen and (min-width: 64em) { .c-header { padding: 20px 45px; } } /* Elements ========================================================================= */ .header__inner-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 auto; max-width: 1366px; } @media only screen and (min-width: 48em) { .header__toggle { display: none; } } .header__toggle-icon { width: 40px; height: 40px; } @media only screen and (max-width: 47.96875em) { .header__nav { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } } @media only screen and (max-width: 47.96875em) { .header__menu { overflow: auto; max-height: calc(100vh - 80px); padding: 20px 0; pointer-events: none; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0; width: 100%; position: absolute; left: 0; top: 70px; background-color: #ffffff; box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.08); } .is--open .header__menu { opacity: 1; pointer-events: all; } } .header__menu-desktop { display: none; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; list-style: none; } @media only screen and (max-width: 47.96875em) { .header__menu-desktop { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 48em) { .header__menu-desktop { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .header__menu-mobile { display: block; } @media only screen and (min-width: 48em) { .header__menu-mobile { display: none; } } .header__menu-desktop-nav-item { font-weight: 600; } .header__menu-desktop-nav-item [href] { text-decoration: none; color: #828282; -webkit-transition: color 150ms; transition: color 150ms; } .header__menu-desktop-nav-item:hover [href], .header__menu-desktop-nav-item.is--active [href] { color: #25DC71; } @media only screen and (max-width: 47.96875em) { .header__menu-desktop-nav-item { padding: 10px 0; font-size: 16px; } } @media only screen and (min-width: 48em) { .header__menu-desktop-nav-item { margin-left: 26px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 48px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 64em) { .header__menu-desktop-nav-item { margin-left: 40px; } } .header__title { margin-left: auto; color: #505050; text-decoration: none; font-weight: 600; } @media only screen and (max-width: 47.96875em) { .header__title { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } } @media only screen and (max-width: 29.96875em) { .header__title { display: none; } } .header__menu-nav { margin-bottom: 20px; } .header__menu-nav-item { list-style-type: none; } .header__menu-nav-item-anchor { text-decoration: none; color: #505050; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 1.4rem; padding: 20px 0; border-bottom: 1px solid #E6E6E6; } .header__info { margin-left: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } @media only screen and (max-width: 47.96875em) { .header__info { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; margin-right: 20px; text-align: right; } } .header__info-title { font-weight: 500; text-decoration: none; color: #828282; } .headroom { z-index: 99; -webkit-transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1), -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); } .headroom.headroom--not-top.headroom--pinned { will-change: transform; -webkit-transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1), -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); } .headroom.headroom--not-top.headroom--unpinned { will-change: transform; -webkit-transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1); transition: transform 350ms cubic-bezier(0, 0, 0.23, 1), -webkit-transform 350ms cubic-bezier(0, 0, 0.23, 1); } /* Modifiers ========================================================================= */ .headroom--not-top { position: fixed; background: #ffffff; -webkit-transform: translateY(-88px); -ms-transform: translateY(-88px); transform: translateY(-88px); } .headroom--not-top.headroom--pinned { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } /*----------------------------------*\ #SETTINGS \*----------------------------------*/ /*----------------------------------*\ #MEDIA \*----------------------------------*/ /*----------------------------------*\ #TYPOGRAPHY \*----------------------------------*/ /*----------------------------------*\ #COLORS \*----------------------------------*/ /*----------------------------------*\ #EASES \*----------------------------------*/ /*----------------------------------*\ #GRID \*----------------------------------*/ /*----------------------------------*\ #SHADOWS \*----------------------------------*/ /*----------------------------------*\ #SPACING \*----------------------------------*/ /* * Animations */ /* * General components */ @-webkit-keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-up-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes scale-fade-rotate { 0% { opacity: 0; -webkit-transform: scale(0.7) rotate(-20deg); transform: scale(0.7) rotate(-20deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-fade-small { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } @keyframes loader { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } 30% { -webkit-transform: scale(1.3) rotate(360deg); transform: scale(1.3) rotate(360deg); border-radius: 45%; } 60% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius: 50%; } } /** * Media queries targeting a device and smaller **/ /** * Media queries targeting a device and bigger **/ /** * Media queries targeting a device and bigger * - - screen-mobile-only? > use screen-mobile-and-smaller * - - screen-desktop-only? > use screen-desktop-and-bigger **/ /** * Custom Media queries **/ /* Block ========================================================================= */ .o-section { opacity: 0; -webkit-transition: opacity 0.2s ease-in 0.2s; transition: opacity 0.2s ease-in 0.2s; padding: 80px 0; } @media only screen and (max-width: 29.96875em) { .o-section { padding: 60px 0; } } /* Modifiers ========================================================================= */ .o-section--size-medium { padding: 40px 0; } @media only screen and (max-width: 29.96875em) { .o-section--size-medium { padding: 30px 0; } } .o-section--relative { position: relative; } .o-section--visible { opacity: 1; } .o-section--background-gray { background: #F5F5F5; } .o-section--flat { padding: 0; } .o-section--flat-top { padding-top: 0px; } .o-section--flat-bottom { padding-bottom: 0px; } .o-section--hidden-overflow { overflow: hidden; }