This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.
```
*/
/* ==========================================================================
Elements
========================================================================== */
[type=text]:-webkit-autofill, [type=password]:-webkit-autofill, [type=date]:-webkit-autofill, [type=datetime]:-webkit-autofill, [type=datetime-local]:-webkit-autofill, [type=month]:-webkit-autofill, [type=week]:-webkit-autofill, [type=email]:-webkit-autofill, [type=number]:-webkit-autofill, [type=search]:-webkit-autofill, [type=tel]:-webkit-autofill, [type=time]:-webkit-autofill, [type=url]:-webkit-autofill, [type=color]:-webkit-autofill,
textarea:-webkit-autofill {
animation-name: onAutoFillStart;
animation-fill-mode: both;
}
[type=text]:not(:-webkit-autofill), [type=password]:not(:-webkit-autofill), [type=date]:not(:-webkit-autofill), [type=datetime]:not(:-webkit-autofill), [type=datetime-local]:not(:-webkit-autofill), [type=month]:not(:-webkit-autofill), [type=week]:not(:-webkit-autofill), [type=email]:not(:-webkit-autofill), [type=number]:not(:-webkit-autofill), [type=search]:not(:-webkit-autofill), [type=tel]:not(:-webkit-autofill), [type=time]:not(:-webkit-autofill), [type=url]:not(:-webkit-autofill), [type=color]:not(:-webkit-autofill),
textarea:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
label {
display: block;
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 2;
color: inherit;
}
label.middle {
margin: 0 0 1.5rem;
line-height: 1.5;
padding: 0.8125rem 0;
}
dl {
display: flex;
flex-wrap: wrap;
line-height: 1.8;
margin-bottom: 1.5rem;
}
dl dt {
flex: 0 0 160px;
max-width: 160px;
overflow: hidden;
font-weight: 500;
}
dl dd {
flex: 0 0 calc(100% - 160px);
max-width: calc(100% - 160px);
padding-left: 0.625rem;
margin: 0 0 0.5rem 0;
}
dl.dl--alpha dd {
margin: 0 0 1rem 0;
}
dl.dl--alpha dt {
font-weight: 400;
}
ul:not([class]) {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 1.5rem;
}
ul:not([class]) li {
list-style: none;
position: relative;
}
ul:not([class]) li {
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
ul:not([class]) li:before {
content: "";
border-radius: 50%;
width: 8px;
height: 8px;
background-color: #4C346F;
position: absolute;
left: 0;
top: 0.75rem;
transform: translateY(-50%);
}
ol:not([class]) {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 1.5rem;
counter-reset: ordered-list-counter;
}
ol:not([class]) li {
list-style: none;
position: relative;
}
ol:not([class]) li {
counter-increment: ordered-list-counter;
padding-left: 1.5625rem;
margin-bottom: 1.5rem;
}
ol:not([class]) li:before {
content: counter(ordered-list-counter);
position: absolute;
text-align: center;
font-size: 0.5rem;
background: #4C346F;
color: #FFFFFF;
font-weight: bold;
border-radius: 50%;
left: 0;
top: 0.375rem;
line-height: 0.9375rem;
width: 0.9375rem;
height: 0.9375rem;
}
.list-inline {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 1.5rem;
}
.list-inline li {
list-style: none;
position: relative;
}
.list-inline li {
vertical-align: top;
display: inline-block;
margin-left: 0.625rem;
}
.c-list-icon {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 1.5rem;
}
.c-list-icon li {
list-style: none;
position: relative;
}
.c-list-icon li {
padding: 0 0.5rem 1rem 1rem;
position: relative;
}
.c-list-icon li:before {
content: "• ";
position: absolute;
left: 0;
top: 6px;
font-size: 0.875rem;
line-height: 1;
color: white;
background-size: contain;
background-repeat: no-repeat;
}
.c-list-icon--arrow li:before {
content: "";
background-image: url("/assets/dist/img/svg/arrow-right.svg");
height: 11px;
width: 6px;
}
.c-list-icon--arrow.dark li:before {
background-image: url("/assets/dist/img/svg/arrow-right-dark.svg");
}
.c-list-icon--check li:before {
content: "";
background-image: url("/assets/dist/img/svg/check.svg");
height: 11px;
width: 15px;
}
.c-list-icon--check-primary {
margin-bottom: 0px;
}
.c-list-icon--check-primary li {
padding-bottom: 4px;
padding-left: 20px;
text-align: left;
}
.c-list-icon--check-primary li.check:before {
content: "";
background-image: url("/assets/dist/img/svg/check-primary.svg");
height: 8px;
width: 12px;
top: 8px;
}
.c-list-icon--check-primary li.cross {
color: #999999;
}
.c-list-icon--check-primary li.cross:before {
content: "";
background-image: url("/assets/dist/img/svg/Cross.svg");
height: 8px;
width: 12px;
top: 8px;
opacity: 0.5;
}
.c-list-icon--primary li:before {
color: #4C346F;
}
.c-list-icon--primary-lighten li:before {
color: #563c7d;
}
.c-list-icon--primary-darken li:before {
color: #35244D;
}
.c-list-icon--secondary li:before {
color: #FF881A;
}
.c-list-icon--secondary-lighten li:before {
color: #FF993C;
}
.c-list-icon--secondary-darken li:before {
color: #E67A17;
}
.c-list-icon--tertiary li:before {
color: #6690FF;
}
.c-list-icon--tertiary-lighten li:before {
color: #7CA0FF;
}
.c-list-icon--tertiary-darken li:before {
color: #5B81E5;
}
.c-list-icon--success li:before {
color: #8EDB5F;
}
.c-list-icon--success-lighten li:before {
color: #FAFFF7;
}
.c-list-icon--warning li:before {
color: #FF881A;
}
.c-list-icon--alert li:before {
color: #F15064;
}
.c-list-icon--alert-lighten li:before {
color: #FFF7F7;
}
.redactor-toolbar > li::before {
display: none;
}
/*
---
name: List
category: SCSS
---
Use an unordered list to... list things, if the order of the items doesn't matter.
Unordered list
======
```list-unordered.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis euismod massa, in fringilla neque euismod sed. Morbi et mollis lacus. Sed ac mattis eros, sed elementum ante. Aenean malesuada interdum justo, vel lacinia velit condimentum sagittis. Integer maximus, dui eget vestibulum ultrices, arcu elit consequat dui, vitae mollis risus neque a sapien. Pellentesque quis feugiat tellus, sed suscipit leo. Fusce venenatis a urna id auctor. Proin quis vestibulum enim. Curabitur tincidunt ex diam, quis efficitur massa posuere ac. Quisque ac euismod purus. Etiam ultrices tincidunt elementum. Nullam vel lectus metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis euismod massa, in fringilla neque euismod sed. Morbi et mollis lacus. Sed ac mattis eros, sed elementum ante. Aenean malesuada interdum justo, vel lacinia velit condimentum sagittis. Integer maximus, dui eget vestibulum ultrices, arcu elit consequat dui, vitae mollis risus neque a sapien. Pellentesque quis feugiat tellus, sed suscipit leo. Fusce venenatis a urna id auctor. Proin quis vestibulum enim. Curabitur tincidunt ex diam, quis efficitur massa posuere ac. Quisque ac euismod purus. Etiam ultrices tincidunt elementum. Nullam vel lectus metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis euismod massa, in fringilla neque euismod sed. Morbi et mollis lacus. Sed ac mattis eros, sed elementum ante. Aenean malesuada interdum justo, vel lacinia velit condimentum sagittis. Integer maximus, dui eget vestibulum ultrices, arcu elit consequat dui, vitae mollis risus neque a sapien. Pellentesque quis feugiat tellus, sed suscipit leo. Fusce venenatis a urna id auctor. Proin quis vestibulum enim. Curabitur tincidunt ex diam, quis efficitur massa posuere ac. Quisque ac euismod purus. Etiam ultrices tincidunt elementum. Nullam vel lectus metus.
```
Background color
======
The colors in variable `$foundation-palette` are available as background.
```card-color.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis euismod massa, in fringilla neque euismod sed. Morbi et mollis lacus. Sed ac mattis eros, sed elementum ante. Aenean malesuada interdum justo, vel lacinia velit condimentum sagittis. Integer maximus, dui eget vestibulum ultrices, arcu elit consequat dui, vitae mollis risus neque a sapien. Pellentesque quis feugiat tellus, sed suscipit leo. Fusce venenatis a urna id auctor. Proin quis vestibulum enim. Curabitur tincidunt ex diam, quis efficitur massa posuere ac. Quisque ac euismod purus. Etiam ultrices tincidunt elementum. Nullam vel lectus metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis euismod massa, in fringilla neque euismod sed. Morbi et mollis lacus. Sed ac mattis eros, sed elementum ante. Aenean malesuada interdum justo, vel lacinia velit condimentum sagittis. Integer maximus, dui eget vestibulum ultrices, arcu elit consequat dui, vitae mollis risus neque a sapien. Pellentesque quis feugiat tellus, sed suscipit leo. Fusce venenatis a urna id auctor. Proin quis vestibulum enim. Curabitur tincidunt ex diam, quis efficitur massa posuere ac. Quisque ac euismod purus. Etiam ultrices tincidunt elementum. Nullam vel lectus metus.
```
*/
.c-collapse {
position: relative;
}
.c-collapse__btn {
position: absolute;
bottom: -11px;
left: calc(50% - 81px);
background: white;
border: solid 1px #EAEAEA;
color: #1F1529;
text-decoration: none;
min-width: 162px;
text-align: center;
}
.c-collapse__btn:hover {
color: #4C346F;
cursor: pointer;
}
.c-collapse__link {
text-decoration: none;
}
.c-collapse__btn.active {
color: #1F1529;
}
.c-collapse__btn.active:hover {
color: #4C346F;
}
.c-collapse__btn::after {
content: url("/assets/dist/img/svg/arrow-down-black.svg");
}
.c-collapse__btn::before {
content: "Meer informatie";
margin-right: 10px;
}
.c-collapse__btn.active::after {
content: url("/assets/dist/img/svg/arrow-up-black.svg");
}
.c-collapse__btn.active::before {
content: "Sluiten";
}
.c-collapse__content {
max-height: 0;
transition: max-height 0.2s ease-out;
overflow: hidden;
}
.c-collapse__content h3 {
font-size: 16px;
}
.c-compare {
margin-top: -7.5rem;
margin-bottom: 3.5rem;
}
.c-compare__outer {
position: relative;
z-index: 15;
}
@media print, screen and (max-width: 39.99875em) {
.c-compare {
margin-top: -6rem;
}
}
.c-compare__left {
background: #FFFFFF;
padding: 1rem 1rem 0.5rem 1rem;
display: flex;
justify-content: center;
align-items: center;
}
@media print, screen and (max-width: 49.99875em) {
.c-compare__left {
padding-top: 2rem;
}
}
.c-compare__left h4 {
margin: 0;
}
@media print, screen and (max-width: 63.99875em) {
.c-compare__left h4 {
font-size: 1.1875rem;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-compare__left h4 span:nth-of-type(2) {
margin-top: 0.5rem;
display: block;
}
.c-compare__left h4 svg {
width: 24px;
height: 16px;
}
}
@media print, screen and (max-width: 49.99875em) {
.c-compare__row {
flex-direction: column-reverse;
align-items: stretch;
}
}
.c-compare__right {
transition: all 0.2s ease-in-out;
background: #6690FF;
}
.c-compare__right a {
display: flex;
align-items: center;
justify-content: center;
padding: 0.6875rem;
text-decoration: none;
}
.c-compare__right:hover {
background: #5B81E5;
}
.c-compare__inner {
padding: 0.5rem 0 2.5rem 0;
background: #FFFFFF;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
}
@media print, screen and (min-width: 40em) {
.c-compare__inner {
padding: 2.5rem;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-compare__inner .c-form-element--license-plate .c-form-element__label {
display: none;
}
}
@media print, screen and (max-width: 63.99875em) {
.c-compare__inner .c-form-element--two-inputs .c-form-element__input input {
width: 50%;
}
}
@media print, screen and (max-width: 63.99875em) {
.c-compare__inner .c-compare__item:last-of-type {
flex: 0 0 100%;
max-width: 100%;
display: flex;
justify-content: center;
}
.c-compare__inner .c-compare__item:last-of-type .c-compare__btn {
width: 17.5rem;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-compare__inner .c-compare__item:last-of-type .c-compare__btn {
width: 100%;
}
}
.c-compare__form {
display: flex;
justify-content: space-between;
}
@media print, screen and (max-width: 63.99875em) {
.c-compare__form {
flex-flow: row wrap;
}
}
.c-compare__item {
padding-right: 1.5rem;
}
.c-compare__item:last-of-type {
padding-right: 0;
}
.c-compare__item__fw {
flex: 0 0 100%;
max-width: 100%;
}
@media print, screen and (min-width: 40em) {
.c-compare__item__fw .c-compare__btn {
text-align: center;
}
.c-compare__item__fw .c-compare__btn .c-btn, .c-compare__item__fw .c-compare__btn .c-dropdown-btn {
display: inline-block;
max-width: 14.375rem;
}
}
@media print, screen and (max-width: 63.99875em) {
.c-compare__item {
flex: 0 0 50%;
max-width: 50%;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-compare__item:first-of-type, .c-compare__item:nth-of-type(4), .c-compare__item:nth-of-type(5) {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
.c-compare__item:nth-of-type(3) {
padding: 0;
}
}
.c-compare__btn {
margin-top: 0;
}
@media print, screen and (min-width: 40em) {
.c-compare__btn {
margin-top: 2.25rem;
}
}
.c-compare__btn .c-btn, .c-compare__btn .c-dropdown-btn {
margin: 0;
min-width: 12.5rem;
}
.c-compare--small .c-form-element__label label {
font-size: 1rem;
}
@media print, screen and (max-width: 39.99875em) {
.c-compare--small .c-form-element__label label {
font-size: 0.9375rem;
}
}
.c-compare--small .c-form-element--two-inputs {
min-width: auto;
max-width: 100%;
}
.c-compare--small .c-form-element--two-inputs input {
width: 50%;
}
.c-compare--small .c-compare__btn {
margin-top: 0.5rem;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-compare--alpha .c-compare__item:nth-of-type(2) {
padding-right: 0;
}
}
.c-compare--alpha .c-form-element--two-inputs input {
width: 3.75rem;
}
@media print, screen and (max-width: 63.99875em) {
.c-compare--alpha .c-form-element--two-inputs input {
width: 50%;
}
}
@media print, screen and (max-width: 49.99875em) {
.c-contact__info {
text-align: center;
}
}
.c-cta--alpha {
padding-top: 4rem;
}
@media print, screen and (min-width: 40em) {
.c-cta--alpha {
padding-top: 5rem;
}
}
.c-cta--alpha .c-cta__image {
margin-top: 2.625rem;
}
.c-cta--beta {
margin: 0 0 3rem 0;
padding: 4rem 0.5rem 2.5rem;
}
.c-cta--beta h3 {
color: white;
margin-bottom: 1.5rem;
}
@media print, screen and (min-width: 40em) {
.c-cta--mobile {
display: none;
}
}
.c-datemask + .form-error {
max-width: 13.125rem;
}
.HTyAj,
.iZgzqx,
.ekGXcm,
.jAYEfw,
.jwcZFR {
background-color: #4C346F !important;
}
.jwcZFR h3 {
color: #FFFFFF !important;
}
.cAAyi::after {
border-color: #4C346F rgba(136, 183, 213, 0) rgba(136, 183, 213, 0) !important;
}
.BoiFa {
height: 48px !important;
border-radius: 4px !important;
background-color: #FF881A !important;
}
.BoiFa:hover {
background-color: #E67A17 !important;
}
.hAcBvX h3 {
margin-top: 24px !important;
}
.gGkFIH input[type=radio] {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.cSrEgN {
border-bottom: 3px solid #4C346F !important;
}
.fuRFqj input:checked {
background-color: #4C346F !important;
border: 1px solid #4C346F !important;
}
.fuRFqj label:hover input {
border-color: #4C346F !important;
}
.MuSvJ:hover {
background-color: #F0F4FF !important;
}
.hpUClD {
box-shadow: none !important;
border-radius: 4px !important;
font-weight: 600 !important;
}
.hpUClD.jesDiZ {
background-color: #FF881A !important;
}
.hpUClD.jesDiZ:hover {
background-color: #E67A17 !important;
}
.hpUClD.chemmE {
color: #FF881A !important;
border-color: #FF881A !important;
}
.hpUClD.chemmE:hover {
color: #E67A17 !important;
border-color: #E67A17 !important;
}
.ghVyaY {
color: #4C346F !important;
}
.c-footer {
padding-top: 3.375rem;
margin-top: auto;
}
.c-footer h6 {
color: white;
font-size: 1rem;
}
.c-footer address {
font-style: normal;
}
.c-footer address p {
margin-bottom: 0.5rem;
}
.c-footer__column {
margin-bottom: 3.5rem;
}
@media print, screen and (min-width: 40em) {
.c-footer__column {
margin-bottom: 2rem;
}
}
.c-footer__list li {
padding-bottom: 0.5rem;
}
.c-footer__list li a {
text-decoration: none;
color: white;
}
.c-footer__list li a:hover {
opacity: 0.8;
}
.c-footer__logos a {
display: inline-block;
margin: 0.25rem 0;
}
.c-footer .c-link-white {
text-decoration: none;
color: white;
}
.c-footer .c-link-white:hover {
opacity: 0.8;
}
.c-footer__social-link {
display: inline-block;
margin-left: -4px;
}
.c-footer__social-link:hover {
opacity: 0.8;
}
.c-footer__copyright {
padding: 1rem 0;
font-size: 0.75rem;
display: flex;
justify-content: space-between;
}
@media print, screen and (min-width: 40em) {
.c-footer__copyright__right a {
margin-right: 2rem;
}
.c-footer__copyright__right a:last-of-type {
margin-right: 0;
}
}
@media print, screen and (max-width: 49.99875em) {
.c-footer__copyright {
padding: 1rem 0 2.5rem;
flex-direction: column-reverse;
}
.c-footer__copyright__right a {
display: block;
margin-bottom: 0.75rem;
}
}
.c-icon-text {
display: flex;
align-items: flex-start;
}
.c-icon-text svg {
margin-top: 0.5rem;
margin-right: 0.5rem;
min-width: 0.9375rem;
}
.c-icon-text--multiple .c-icon-text {
margin-bottom: 1.5rem;
}
@media print, screen and (min-width: 40em) {
.c-icon-text--multiple .c-icon-text {
margin-bottom: 0;
}
}
.c-icon-text--multiple .columns:last-of-type .c-icon-text {
margin-bottom: 0;
}
.c-kvk-check .c-form-element__input {
position: relative;
}
.c-logo {
display: inline-block;
}
.c-logo-grid {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.c-logo-grid__item {
flex: 0 0 50%;
max-width: 50%;
padding: 1rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.c-logo-grid__item img {
max-height: 3rem;
max-width: 100%;
}
@media print, screen and (min-width: 40em) {
.c-logo-grid__item {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
}
@media print, screen and (min-width: 50em) {
.c-logo-grid__item {
flex: 0 0 20%;
max-width: 20%;
padding: 1rem;
}
}
.c-loader,
.c-loader:after {
border-radius: 50%;
width: 0.9375rem;
height: 0.9375rem;
}
.c-loader {
display: inline-block;
text-indent: -9999em;
border-top: 0.125rem solid #FFFFFF;
border-right: 0.125rem solid #FFFFFF;
border-bottom: 0.125rem solid #FFFFFF;
border-left: 0.125rem solid #FF881A;
transform: translateZ(0);
animation: load8 1.1s infinite linear;
}
.c-loader__text {
margin-top: 1.25rem;
}
.c-car-loader {
height: 18.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.c-car-loader__body {
animation: shake 0.2s ease-in-out infinite alternate;
}
.c-car-loader__line {
transform-origin: center right;
stroke-dasharray: 22;
animation: line 0.8s ease-in-out infinite;
animation-fill-mode: both;
}
.c-car-loader__line--top {
animation-delay: 0s;
}
.c-car-loader__line--middle {
animation-delay: 0.2s;
}
.c-car-loader__line--bottom {
animation-delay: 0.4s;
}
.c-car-loader__carousel {
text-align: center;
margin-top: 1.25rem;
}
.c-car-loader__carousel-item {
opacity: 0;
height: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.c-car-loader__carousel-item.show {
opacity: 1;
height: auto;
visibility: visible;
}
.c-car-loader.hide {
display: none;
}
@keyframes shake {
0% {
transform: translateY(-1%);
}
100% {
transform: translateY(3%);
}
}
@keyframes line {
0% {
stroke-dashoffset: 22;
}
25% {
stroke-dashoffset: 22;
}
50% {
stroke-dashoffset: 0;
}
51% {
stroke-dashoffset: 0;
}
80% {
stroke-dashoffset: -22;
}
100% {
stroke-dashoffset: -22;
}
}
@keyframes load8 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.c-link a {
text-decoration: none;
display: inline-flex;
align-items: center;
}
.c-link:hover {
transition: all 0.2s ease-in-out;
opacity: 0.8;
}
.c-link--dark-gray a {
color: #1F1529;
}
.c-link--dark-gray:hover {
opacity: 1;
}
.c-link--dark-gray:hover a {
color: #4C346F;
}
.c-link--dark-gray:hover svg path {
fill: #4C346F;
}
.c-insurance {
background: white;
padding: 1.25rem;
border: 1px solid #EAEAEA;
}
.c-insurance__item {
padding: 2.5rem 1.25rem 1.25rem;
border-bottom: 1px solid #EAEAEA;
display: flex;
justify-content: space-between;
align-items: center;
}
.c-insurance__item:first-of-type {
padding-top: 1.25rem;
}
.c-insurance__item:last-of-type {
padding-bottom: 1.25rem;
border-bottom: 0;
}
.c-insurance__item--alpha {
justify-content: space-around;
}
.c-insurance__logo {
width: 10rem;
}
.c-insurance__logo img {
max-width: 10rem;
}
.c-insurance__price {
text-align: center;
}
.c-insurance__price > div, .c-insurance__price h5 {
line-height: 1;
}
@media print, screen and (max-width: 49.99875em) {
.c-insurance {
padding: 2rem 1rem;
}
.c-insurance__item {
flex-direction: column;
flex-flow: row wrap;
padding: 2rem 0;
}
.c-insurance__item:first-of-type {
padding-top: 0;
}
.c-insurance__item:last-of-type {
padding-bottom: 0;
border-bottom: 0;
}
.c-insurance__logo, .c-insurance__btn {
flex: 0 0 100%;
text-align: center;
margin-top: 20px;
}
.c-insurance__price {
text-align: center;
flex: 0 0 50%;
max-width: 50%;
margin: 20px 0;
}
.c-insurance__list {
flex: 0 0 100%;
max-width: 100%;
display: flex;
justify-content: center;
}
}
.c-header--home {
color: white;
display: flex;
flex-direction: column;
background-color: #4C346F;
}
.c-header--home .c-logo__color {
display: none;
}
.c-header--default {
height: 4.5rem;
background-color: white;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
}
.c-header--default .c-logo__white {
display: none;
}
@media screen and (max-width: 64em) {
.c-header--default.c-header--fixed {
padding-bottom: 0;
}
}
.c-header__top {
padding: 0.75rem 0 0.75rem 0;
}
@media screen and (max-width: 64em) {
.c-header__top {
padding-bottom: 0.4375rem;
}
}
.c-header__top__row {
position: relative;
}
.c-header__top--fixed.c-header__top {
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 100%;
background: white;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease;
margin-top: -4.5rem;
transform: translateY(72px);
}
@media screen and (max-width: 64em) {
.c-header__top--fixed.c-header__top {
padding-bottom: 0.375rem;
}
}
.c-header__top--fixed.c-header__top .c-nav__open g,
.c-header__top--fixed.c-header__top .c-nav__open path,
.c-header__top--fixed.c-header__top .c-nav__tel g,
.c-header__top--fixed.c-header__top .c-nav__tel path {
fill: #000000;
}
.c-header__top--fixed.c-header__top .c-logo__color {
display: block;
}
.c-header__top--fixed.c-header__top .c-logo__white {
display: none;
}
.c-header__content {
padding: 2rem 0 3rem 0;
display: flex;
align-items: center;
flex-grow: 1;
height: 100%;
}
.c-header__content h1 {
color: white;
font-weight: 700;
}
@media print, screen and (max-width: 89.99875em) {
.c-header__content h1 {
font-size: 2.5rem;
}
}
@media print, screen and (max-width: 74.99875em) {
.c-header__content h1 {
font-size: 2rem;
}
}
.c-header__content__row {
width: 100%;
}
.c-header__body {
max-width: 50rem;
}
@media print, screen and (max-width: 49.99875em) {
.c-header__body {
margin-bottom: 40px;
}
}
@media print, screen and (max-width: 49.99875em) {
.c-header__title {
padding-bottom: 0;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-header__title {
margin-top: 5rem;
}
.c-header__title .fs-xlarge {
font-size: 1rem;
}
}
@media print, screen and (max-width: 74.99875em) {
.c-header__subtitle {
font-size: 1rem !important;
}
}
.c-header__img img {
max-width: 15.375rem;
}
@media print, screen and (max-width: 49.99875em) {
.c-header__img {
margin-top: 1.5rem;
}
}
@media print, screen and (max-width: 39.99875em) {
.c-header__img {
margin-top: 0;
}
.c-header__img img {
width: 12.5rem;
}
}
.c-header--fixed {
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 100%;
background: white;
height: auto;
transition: transform 0.2s ease;
margin-top: -4.5rem;
transform: translateY(72px);
}
.c-heading--large {
margin-bottom: 2.5rem;
}
.c-heading--after {
display: flex;
}
.c-heading--after .c-heading__icon {
min-width: 16px;
margin-left: 0.25rem;
margin-top: 0.125rem;
}
.c-pagination {
margin-left: 0;
margin-bottom: 1.5rem;
color: #999999;
margin-top: 1.5rem;
}
.c-pagination::before, .c-pagination::after {
display: table;
content: " ";
flex-basis: 0;
order: 1;
}
.c-pagination::after {
clear: both;
}
.c-pagination li {
margin-right: 0;
border-radius: 0;
font-size: 1rem;
display: none;
}
.c-pagination li:last-child, .c-pagination li:first-child {
display: inline-block;
}
@media print, screen and (min-width: 40em) {
.c-pagination li {
display: inline-block;
}
}
.c-pagination a,
.c-pagination button {
display: block;
padding: 0.4375rem 0.875rem;
border-radius: 0;
color: #999999;
}
.c-pagination a:hover,
.c-pagination button:hover {
background: #FFFFFF;
}
.c-pagination li {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 0;
width: 2.5rem;
height: 2.5rem;
overflow: hidden;
line-height: 24px;
transition: all 0.2s ease-in-out;
display: inline-flex;
justify-content: center;
align-items: center;
}
.c-pagination li:hover {
background: #FFFFFF;
border: 1px solid #4C346F;
}
.c-pagination li:hover a {
color: #4C346F;
}
.c-pagination li a {
text-decoration: none;
}
.c-pagination li:first-child, .c-pagination li:last-child {
display: inline-flex;
}
.c-pagination .c-pagination__current {
padding: 0.4375rem 0.875rem;
background: #FFFFFF;
color: #4C346F;
cursor: default;
border: 1px solid #4C346F;
}
.c-pagination .c-pagination__disabled {
padding: 0.4375rem 0.875rem;
color: #999999;
cursor: not-allowed;
}
.c-pagination .c-pagination__disabled:hover {
background: transparent;
}
.c-pagination .c-pagination__disabled:hover {
background: #FFFFFF;
border: 1px solid #CCCCCC;
}
.c-pagination .c-pagination__disabled:hover a {
color: #999999;
}
.c-pagination .c-pagination__disabled a:hover {
cursor: not-allowed;
}
.c-pagination .c-pagination__ellipsis {
padding: 0.4375rem 0.875rem;
content: "…";
color: #000000;
}
.c-pagination .c-pagination__ellipsis:after {
content: "...";
color: #999999;
}
.c-pagination .c-pagination__ellipsis:hover {
background: #FFFFFF;
border: 1px solid #CCCCCC;
}
/*
---
name: Pagination
category: SCSS
---
A pagination list is just a `