:root {
    --black: #000000;
    --white: #ffffff;
    --red: #ff0000;
    --green: #3dc52e;
    --xs: 30%;
    --s: 45%;
    --m: 50%;
    --l: 70%;
    --xl: 80%;
    --xxl: 100%;
}

/* ***** Basic ***** */
html {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.hidden {
    display: none;
}

/* *** Width in % *** */

.xsw {
    min-width: var(--xs);
}

.sw {
    min-width: var(--s);
}

.mw {
    min-width: var(--m);
}

.lw {
    min-width: var(--l);
}

.xlw {
    min-width: var(--xl);
}

.xxlw {
    min-width: var(--xxl);
}

/* *** Text decoration *** */

.accent {
    color: var(--red);
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

.strong-underline {
    font-weight: 700;
    text-decoration: underline;
}

/* strong-uppercase */

.strong-uppercase {
    font-weight: 700;
    text-transform: uppercase;
}

/* ** Colors ** */

.green-color {
    color: var(--green);
}

.red-color {
    color: var(--red);
}

.bright-cyan-color {
    color: #25d3ea;
}

.light-yellow-color {
    color: #ffef3d;
}

.light-pink-color {
    color: #ff75a6;
}

.white-color {
    color: #ffffff;
}

.light-cyan-color {
    color: #95f0ff;
}

/* *** Centering *** */

/* Centering */

.centering {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Vertical centering */

.vertical-centering {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* *** Grids *** */

/* two columns grig */

.two-columns-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* *** Flex *** */

.flex-direction-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}

.flex-column-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.flex-center-baseline {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.flex-wrap-space-around-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.flex-wrap-center-baseline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

/* *** Backgrounds *** */

.background-wrapper {
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

/* background-repeat-contain  */

.background-repeat-contain {
    background-repeat: repeat;
    background-size: contain;
    background-position: top;
}

/* background-no-repeat-cover-right */

.background-no-repeat-cover-right {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
}

/* background-wrapper-repeat-auto */

.background-wrapper-repeat-auto {
    width: 100%;
    min-height: 100vh;
    background-repeat: repeat;
    background-size: auto;
    background-position: top;
}

/* responsive-background-left-center */

.responsive-background-left-center {
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (orientation: portrait) {
    .responsive-background-left-center {
        background-position: left;
    }
}
@media screen and (orientation: landscape) {
    .responsive-background-left-center {
        background-position: top;
    }
}

/* background-repeat-y-animate-scroll */

.background-repeat-y-animate-scroll {
    width: 100%;
    min-height: 100vh;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top;

    animation: 240s animate-bg-scroll infinite linear;
}

@keyframes animate-bg-scroll {
    100% {
        background-position: 0 -6000px;
    }
}

/* .background-repeat-y-animate-scroll-down */

.background-repeat-y-animate-scroll-down {
    width: 100%;
    min-height: 100vh;
    background-repeat: repeat-y;
    background-size: cover;
    background-position: top;
    will-change: background-position;

    animation: 500s animate-bg-scroll-down infinite linear;
}

@keyframes animate-bg-scroll-down {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 12500px;
    }
}

/* *** Animation show elements *** */

/* loading-element-opacity */

.loading-element-opacity {
    opacity: 0;

    transition: opacity 0.5s ease-out;
}

/* ***** COMPONENTS ***** */

/* *** Headers *** */

/* Image-span-inline-header */

.image-span-inline-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    padding-top: 5px;
    padding-bottom: 5px;
}

.image-span-inline-header .text {
    margin-left: 1%;
    font-family: inherit;
    font-weight: inherit;
    text-align: center;
    color: inherit;
}

.image-span-inline-header.fb-blue {
    color: #3b5998;
}

.image-span-inline-header.vivid-red {
    color: #ff5a2c;
}

/* span-image-inline-header */

.span-image-inline-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    padding: 5px 0;
}

.span-image-inline-header .text {
    margin-right: 1%;
}

.span-image-inline-header.vivid-red {
    color: #ff5a2c;
}

/* header-title-shadow */

.header-title-shadow {
    padding: 20px 5px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}

.header-title-shadow .title {
    font-size: inherit;
    font-weight: inherit;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .header-title-shadow {
        padding: 22px 10px;
    }
}

@media screen and (min-width: 1024px) {
    .header-title-shadow {
        padding: 25px 10px;
    }
}

/* *** Images *** */

/* image-fixed-width-200 */

.image-fixed-width-200 {
    max-width: 200px;
    margin: 0 auto;
}

.image-fixed-width-200 .image {
    max-height: 33vh;
    margin: 0 auto;
}

/* circle-image-with-border */

.circle-image-with-border {
    width: 270px;
    height: 270px;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .circle-image-with-border {
        width: 300px;
        height: 300px;
    }
}

@media screen and (min-width: 1024px) {
    .circle-image-with-border {
        width: 350px;
        height: 350px;
    }
}

.circle-image-with-border .image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #ffffff;
}

/* Images in styled Frame */

.images-in-styled-frame {
    position: relative;
}

.images-in-styled-frame .image {
    width: 100%;
    border-radius: 50%;
}

.images-in-styled-frame .styled-frame {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* images-with-next-step-animation */

.images-with-next-step-animation .image-wrapper {
    width: 45%;
}

.images-with-next-step-animation .image {
    margin-bottom: 20px;
    border: 3px solid #fff;
    cursor: pointer;
    transition: all 0.2s linear;
}

.images-with-next-step-animation .image:hover,
.images-with-next-step-animation .image:active {
    border: 12px solid #ffef3d;
}

.images-with-next-step-animation .yellow-border {
    border: 12px solid #ffef3d !important;
}

/* images-slider-fixed-height */

.images-slider-fixed-height {
    position: relative;
    width: 100%;
}

.images-slider-fixed-height .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    transition: opacity linear 1s;
}

.images-slider-fixed-height .slide.active {
    position: relative;
    z-index: 2;
    opacity: 1;
}

.images-slider-fixed-height img {
    max-height: 224px;
    margin: 0 auto;
    border: 5px solid #000000;
}

@media screen and (min-width: 768px) {
    .images-slider-fixed-height img {
        max-height: 100%;
        border-width: 7px;
    }
}

@media screen and (min-width: 1024px) {
    .images-slider-fixed-height img {
        border-width: 9px;
    }
}

/* images-slider-with-switch */

.images-slider-with-switch {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.images-slider-with-switch .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;

    transition: opacity linear 1s;
}

.images-slider-with-switch .slide.active {
    position: relative;
    opacity: 1;
}

.images-slider-with-switch img {
    width: 100%;
    margin: 0 auto;
}

.images-slider-with-switch .switch-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.images-slider-with-switch .previous-button {
    left: 15px;
}

.images-slider-with-switch .next-button {
    right: 15px;
}

.images-slider-with-switch .switch-button::before {
    display: block;
    content: "";
    border: 5px solid #000000;
    width: 21px;
    height: 21px;
}

.images-slider-with-switch .previous-button::before {
    border-top: 0;
    border-right: 0;
}

.images-slider-with-switch .next-button::before {
    border-bottom: 0;
    border-left: 0;
}

/* image-card-with-button */

.image-card-with-button:not(:first-child) {
    display: none;
}

.image-card-with-button {
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    border-radius: 4px;
    background-color: #ffffff;

    transition: transform 0.4s ease-in-out;
}

.image-card-with-button.done {
    transform: scale3d(0.33, 0.2, 0.33) translate(-150%, -33%);
}

.image-card-with-button .figure {
    margin: 0 auto;
    margin-bottom: 8px;
    border: 4px solid #f3f3f3;
    border-radius: 4px;
}

.image-card-with-button .figcaption {
    padding: 5px 10px;
    font-size: 15px;
    color: #545454;
}

.image-card-with-button .figcaption .name {
    margin-right: 10px;
}

.image-card-with-button .button {
    position: relative;
    display: inline-block;
    width: 68px;
    height: 68px;
    padding: 12px;
    background-color: transparent;
    border: 5px solid #f1f1f1;
    border-radius: 100%;

    transition: transform 0.15s ease-out;
}

.image-card-with-button .button img {
    width: 90%;
    margin: 0 auto;
}

.image-card-with-button .button::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 100%;
    transform: scale3d(0.35, 1, 1);

    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.image-card-with-button .button:hover {
    transform: scale(1.05);
}

.image-card-with-button .button:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.image-card-with-button .button:not(:last-child) {
    margin-right: 10px;
}

@media screen and (min-width: 425px) {
    .image-card-with-button {
        max-width: 300px;
    }
    .image-card-with-button .button {
        width: 78px;
        height: 78px;
    }
}

@media screen and (min-width: 768px) {
    .image-card-with-button {
        max-width: 340px;
    }
    .image-card-with-button .figcaption {
        font-size: 18px;
    }
    .image-card-with-button .button {
        width: 78px;
        height: 78px;
    }
}

@media screen and (max-width: 1023px) and (max-height: 500px) {
    .image-card-with-button {
        max-width: 240px;
    }
    .image-card-with-button .figure {
        max-width: 140px;
    }

    .image-card-with-button .figcaption {
        padding: 2px 4px;
        font-size: 12px;
    }
}

/* image-max-width-820-with-title */

.image-max-width-820-with-title {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 37px rgba(0, 0, 0, 0.65);
}

.image-max-width-820-with-title .image-wrapper {
    position: relative;
}

.image-max-width-820-with-title .image {
    margin: 0 auto;
}

.image-max-width-820-with-title .info-wrapper {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    text-align: center;
}

.image-max-width-820-with-title .name {
    font-size: 24px;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase;
}

.image-max-width-820-with-title .status {
    font-size: 16px;
    font-weight: 400;
    color: inherit;
}

.image-max-width-820-with-title .title-wrapper {
    padding: 9px 2px;
}

.image-max-width-820-with-title .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #2c2c2c;
    text-align: center;
}

.image-max-width-820-with-title .color-line {
    height: 20px;
    background: linear-gradient(to bottom, #aad498 0%, #88c46f 100%);
}

@media screen and (min-width: 768px) {
    .image-max-width-820-with-title .title-wrapper {
        padding: 10px 5px;
    }
    .image-max-width-820-with-title .title {
        font-size: 21px;
    }
}

@media screen and (min-width: 1024px) {
    .image-max-width-820-with-title .title-wrapper {
        padding: 15px 5px;
        white-space: nowrap;
        text-align: center;
    }
    .image-max-width-820-with-title .title {
        display: inline-block;
        overflow: hidden;
        font-size: 30px;

        animation: image-max-width-820-with-title-animation 4s steps(80, end);
    }
}

@keyframes image-max-width-820-with-title-animation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* *** Titles with numbers *** */

/* transparent-grey-white-rounded-numbers */

.transparent-grey-white-rounded-numbers .number {
    padding: 5px 14px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px #666;
}

.transparent-grey-white-rounded-numbers .current-number {
    color: #000;
    background-color: #e7e7e7;
}

/* grey-blue-rounded-numbers */

.grey-blue-rounded-numbers {
    font-weight: 700;
    color: #0084ff;
    text-align: center;
}

.grey-blue-rounded-numbers .number {
    padding: 2px 10px;
    font-weight: 700;
    color: #888;
    background: #ececec;
    border-radius: 3px;
}

.grey-blue-rounded-numbers .number.current-number {
    color: #ffffff;
    background: #0084ff;
}

/* *** Checkboxes *** */

/* ** Custom checkbox ** */

/* checkbox-like-button-2-columns */

.checkbox-like-button-2-columns {
    font-weight: 600;
}

/* full-color-fill-checkbox */

.full-color-fill-checkbox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}

.full-color-fill-checkbox .checkbox-label {
    position: relative;
    padding: 0;
    font-weight: 300;
    text-transform: uppercase;

    transition: transform 0.1s ease-out;
}

.full-color-fill-checkbox .item:hover {
    transform: scale(1.1);
}

.full-color-fill-checkbox .checkbox-input {
    position: relative;
    display: block;
}

.full-color-fill-checkbox .checkbox-input::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 0.8em;
    height: 0.8em;
    margin-right: 5px;
    border: 2px solid #000;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.3);

    transition: background-color 0.15s ease-out;
}

@media screen and (max-width: 767px) and (max-height: 499px) {
    .full-color-fill-checkbox {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }

    .full-color-fill-checkbox .item {
        width: calc(50% - 1%);
        margin: 0.5%;
    }
    .full-color-fill-checkbox .checkbox-label {
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .full-color-fill-checkbox {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .full-color-fill-checkbox .item {
        width: calc(50% - 1%);
        margin: 0.5%;
        text-align: center;
    }
    .full-color-fill-checkbox .checkbox-label {
        font-weight: 600;
    }
}
/* Checkbox checked colors */

.full-color-fill-checkbox.fb-blue-bg-checked input:checked + .checkbox-input::before {
    background-color: #3b5998;
}

/* checkbox without input inline */

.checkbox-without-input-inline {
    text-align: center;
}

.checkbox-without-input-inline .checkbox-item {
    display: inline-block;
    margin-bottom: 3%;
}

.checkbox-without-input-inline .checkbox-item:not(:last-child) {
    margin-right: 2%;
}

/* white-border-checkmark-checkbox */

.white-border-checkmark-checkbox {
    padding: 10px;
}

.white-border-checkmark-checkbox .answers-item:not(:last-child) {
    margin-bottom: 20px;
}

.white-border-checkmark-checkbox .checkbox-label {
    display: inline-flex;
    font-weight: 600;
    line-height: 1.3;
    background-color: rgba(0, 0, 0, 0.6);
}

.white-border-checkmark-checkbox .checkbox-input {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 10px;
    border: solid 2px #fff;
    border-radius: 5px;
}

.white-border-checkmark-checkbox .checkbox-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 0.8em;
    height: 0.8em;
    fill: white;
}

.white-border-checkmark-checkbox .checkbox-item:checked + .checkbox-input .checkbox-icon {
    display: block;
}

@media screen and (min-width: 768px) {
    .white-border-checkmark-checkbox {
        padding: 10px 50px;
    }
    .white-border-checkmark-checkbox .answers-item:not(:last-child) {
        margin-bottom: 10px;
    }
    .white-border-checkmark-checkbox .checkbox-label {
        line-height: 1.1;
    }
}

/* grey-border-blue-fill-checkbox  */

.grey-border-blue-fill-checkbox .item {
    width: calc(50% - 1%);
    margin: 3% 0.5%;
    text-align: left;
}

.grey-border-blue-fill-checkbox .checkbox-input::before {
    display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 2px;
    border: 1px solid #959595;

    transition: all 0.3s linear;
}

/* Checkbox checked colors */

.grey-border-blue-fill-checkbox input:checked + .checkbox-input::before {
    border-color: #007eff;
    background: #007eff;
}

/* *** Selects *** */

/* grey border select */

.grey-border-select {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 15px;
}

.grey-border-select .select {
    width: 100%;
    padding: 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.grey-border-select .select:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* *** Range controls *** */

/* Range-controls-select-arrows */

.range-control-selects-arrows {
    text-align: center;
}

.range-control-selects-arrows .select:not(:last-child) {
    margin-right: 4vw;
}

.range-control-selects-arrows .select {
    display: inline-block;
    height: 3.5rem;
    margin: 0;
    padding: 0 28px 0 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #000;
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    background: url("https://ilndngs.romanticboo.com/15/icon-select.png") no-repeat 98% 56% transparent;
    appearance: none;
    text-indent: 1px;
    cursor: pointer;
}

/* *** Progress Bar *** */

/* progress-bar-striped */

.progress-bar-striped {
    max-width: 80%;
    height: 20px;
    margin: 0 auto 1em;
    overflow: hidden;
    border: 2px solid #000;
    border-radius: 8px;
    background-color: #000;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped .progress-bar {
    width: 0;
    height: 100%;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;

    animation: stripes 2s linear infinite;
    transition: width 10s ease;
}

@keyframes stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

.progress-bar-striped .fb-blue-bg-color {
    background-color: #3b5998;
}

/* progress-bar-striped lime-green-bg-color */

.progress-bar-striped .lime-green-bg-color {
    background-color: #63dd99;
}

/* progress-bar-striped .desaturated-green-bg-color */

.progress-bar-striped .desaturated-green-bg-color {
    background-color: #88c46f;
}

/* progress-bar-striped .pure-yellow-bg-color */

.progress-bar-striped .pure-yellow-bg-color {
    background-color: rgba(255, 252, 0, 0.9);
}

/* fill-color-progress-bar */

.fill-color-progress-bar {
    max-width: 90%;
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid #6464a0;
    border-radius: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fill-color-progress-bar .progress-bar {
    width: 0;
    height: 100%;
    transition-duration: 0s;
    transition: width 10s ease;
}

.fill-color-progress-bar .desaturated-dark-blue-bg {
    background-color: #6464a0;
}

/* rounded-rectangle-progress-bar */

.rounded-rectangle-progress-bar {
    position: relative;
    max-width: 90%;
    height: 22px;
    margin: 0 auto 1.5rem auto;
    background: #e8e8e8;
    border-radius: 5px;
}

.rounded-rectangle-progress-bar::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 5;
    width: 0;
    border-radius: 5px;
    animation: rounded-rectangle-progress 6s ease-in-out forwards;
}

.rounded-rectangle-progress-bar.pure-blue::before {
    background: #3398ff;
}

@media screen and (min-width: 768px) {
    .rounded-rectangle-progress-bar {
        height: 28px;
    }
}

@media screen and (min-width: 1024px) {
    .rounded-rectangle-progress-bar {
        height: 37px;
    }
}

@keyframes rounded-rectangle-progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* red-line-progress-bar */

.red-line-progress-bar {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0 10px;
}

.red-line-progress-bar .progress {
    width: 100%;
    height: 15px;
    border: solid 1px #c20202;
    background-color: #c20202;
    box-shadow: 0 0 3px #c20202;
    border-radius: 5px;

    animation: red-line-progress-bar-animation 15s ease;
}

@keyframes red-line-progress-bar-animation {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* *** Buttons *** */

/* Black border button */

.black-border-button {
    position: relative;
    z-index: 1;
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--black);
    text-align: center;
    border: 2px solid var(--black);
    border-radius: 3px;
    cursor: pointer;

    transition: transform 0.15s ease-out;
}

.black-border-button::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.33);
    cursor: pointer;
    transform: scale3d(0.35, 1, 1);

    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.black-border-button:hover {
    transform: scale(1.05);
}

.black-border-button:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.black-border-button.green-bg {
    background-color: #67ae55;
}

.black-border-button.light-grey-bg {
    background-color: #dadada;
    color: #ffffff;
}

/* Button with yellow hover */

.button-yellow-hover {
    padding: 5px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: center;
    color: #000000;
    border-style: none;
    border-radius: 3px;
    background-color: #ffffff;

    transition: box-shadow 0.3s, transform 0.3s;
}

.button-yellow-hover:hover {
    text-decoration: none;
    box-shadow: 0px 0px 20px 0px #ffd800;
    transform: scale(1.3);
}

/* Bright-cyan button with red bg color hover */

.bright-cyan-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #ffffff;
    text-align: center;
    border: none;
    border-radius: 5px;
    background: #25d3ea;
    cursor: pointer;

    transition: all 0.3s linear;
}

.bright-cyan-button:hover {
    background-color: #ff0000;
}

/* light-pink-button */

.light-pink-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #ffffff;
    text-align: center;
    border: none;
    border-radius: 5px;
    background: #ff75a6;
    cursor: pointer;

    transition: all 0.3s linear;
}

.light-pink-button:hover {
    background-color: #ed4882;
}

/* white-bg-dark-blue-color-button */

.white-bg-dark-blue-color-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #07075f;
    text-align: center;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;

    transition: all 0.3s linear;
}

.white-bg-dark-blue-color-button:hover {
    background-color: #22d0e3;
}

/* light-cyan-button */

.light-cyan-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #000000;
    text-align: center;
    border: none;
    border-radius: 5px;
    background: #95f0ff;
    cursor: pointer;

    transition: all 0.3s linear;
}

.light-cyan-button:hover {
    background-color: #22d0e3;
}

/* Transparent green/red buttons with icon */

.transparent-red-button {
    padding: 1vh;
    background-color: rgba(213, 81, 80, 0.3);
    border: 2px solid #d55150;
    border-radius: 10px;

    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.transparent-red-button:hover {
    background: rgba(213, 81, 80, 0.6);
    transform: scale(1.1);
}

.transparent-green-button {
    padding: 1vh;
    background-color: rgba(70, 186, 73, 0.3);
    border: 2px solid #46ba49;
    border-radius: 10px;

    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.transparent-green-button:hover {
    background-color: rgba(70, 186, 73, 0.6);
    transform: scale(1.1);
}

.transparent-red-button .button-icon,
.transparent-green-button .button-icon {
    max-width: calc(2.4rem + 5vw);
    max-height: calc(2.4rem + 5vh);
}

/* solid green/red button */

.solid-red-button {
    position: relative;
    z-index: 1;
    padding: 1vh;
    font-size: calc(1rem + 1vh);
    font-weight: 600;
    color: #cacaca;
    text-align: center;
    background: rgba(213, 81, 80, 0.8);
    border: 2px solid #d55150;
    border-radius: 10px;

    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.solid-green-button {
    position: relative;
    z-index: 1;
    padding: 1vh;
    font-size: calc(1rem + 1vh);
    font-weight: 600;
    color: #000000;
    text-align: center;
    background: rgba(70, 186, 73, 0.8);
    border: 2px solid #46ba49;
    border-radius: 10px;

    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.transparent-green-button-white-color {
    position: relative;
    z-index: 1;
    padding: 1vh;
    font-size: calc(1rem + 1vh);
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    background: rgba(70, 186, 73, 0.3);
    border: 2px solid #46ba49;
    border-radius: 10px;

    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.transparent-green-button-white-color.checked {
    color: #000000;
    background: rgba(70, 186, 73, 0.8);
}

.solid-red-button::before,
.solid-green-button::before,
.transparent-green-button-white-color::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.33);
    z-index: -1;
    opacity: 0;

    transform: scale3d(0.35, 1, 1);
    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.solid-red-button:hover::before,
.solid-green-button:hover::before,
.transparent-green-button-white-color:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Rounded rectangle button */

.rounded-rectangle-green-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #fefefe;
    text-align: center;
    background-color: #39de7f;
    border: 1px solid #39de7f;
    border-radius: 30px;

    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rounded-rectangle-green-button:hover {
    background-color: #27ca6b;
}

.rounded-rectangle-grey-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #6b737a;
    text-align: center;
    background-color: #e8e9f0;
    border: 1px solid #d1d2dd;
    border-radius: 30px;

    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rounded-rectangle-grey-button:hover {
    background-color: #dcdce1;
}

/* Green and dark-grey buttons */

.green-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: center;
    color: #fff;
    border: 0;
    border-radius: 4px;
    background: #2f9216;
    cursor: pointer;

    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.green-button:hover {
    background: #3cbc1d;
}

.dark-grey-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: center;
    color: #fff;
    border: 0;
    border-radius: 4px;
    background: #56575b;
    cursor: pointer;

    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-grey-button:hover {
    background: #3e3f42;
}

/* pure-blue-button / gray-button */

.pure-blue-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #fff;
    background-color: #0084ff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;

    transition: background-color 0.3s ease;
}

.pure-blue-button:hover {
    background-color: #127fe5;
}

.gray-button {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #fff;
    background-color: #aaaaaa;
    border: 0;
    border-radius: 4px;
    cursor: pointer;

    transition: background-color 0.3s ease;
}

.gray-button:hover {
    background-color: #a29e9e;
}

/* square-button-with-scale-hover */

.square-button-with-scale-hover {
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.square-button-with-scale-hover:hover,
.square-button-with-scale-hover:focus {
    transform: scale(1.1);
}

.square-button-with-scale-hover.yellow-bg {
    color: #454545;
    background-color: #ffef3d;
}

/* square-button-with-scale-hover .desaturated-green */

.square-button-with-scale-hover.desaturated-green {
    color: #ffffff;
    background-color: #88c46f;
}

/* square-button-with-scale-hover .strong-red */

.square-button-with-scale-hover.strong-red {
    color: #ffffff;
    background-color: #cb2239;
}

/* square-button-with-scale-hover.yellow-bg-black-color */

.square-button-with-scale-hover.yellow-bg-black-color {
    color: #000000;
    background-color: #fdfc01;
}

/* ** border-radius for double button ** */

.left-border-radius {
    border-radius: 4px 0 0 4px !important;
}

.right-border-radius {
    border-radius: 0 4px 4px 0 !important;
}

/* grey-border-rounded-pure-blue-button / grey-border-rounded-grey-button */

.grey-border-rounded-pure-blue-button {
    padding: 8px 8px;
    color: #ffffff;
    border: 0.17em solid #d9d9d9;
    background: #007eff;
    text-shadow: 0 3px 3px rgba(0, 66, 134, 0.75);
    border-radius: 50px;

    transition: all 0.2s linear;
}

.grey-border-rounded-pure-blue-button:hover,
.grey-border-rounded-pure-blue-button:focus {
    background: #3398ff;
}

.grey-border-rounded-grey-button {
    padding: 8px 8px;
    color: #8d8d8d;
    border: 0.17em solid #d9d9d9;
    background: #fff;
    border-radius: 50px;

    transition: all 0.2s linear;
}

.grey-border-rounded-grey-button:hover,
.grey-border-rounded-grey-button:focus {
    background: #d9d9d9;
}

/* rounded-very-dark-grey-button */

.rounded-very-dark-grey-button {
    padding: 8px 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: rgb(255, 255, 255);
    letter-spacing: 2px;
    text-transform: inherit;
    text-align: center;
    background-color: #353536;
    border: none;
    border-radius: 50px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;

    transition: 0.25s;
}

.rounded-very-dark-grey-button:hover {
    background-color: #282829;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
}

/* strong-red-rounded-button */

.strong-red-rounded-button {
    padding: 9px 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-transform: inherit;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    border: 1px solid #c20202;
    background-image: linear-gradient(#fc1515, #c20202);
    border-radius: 5px;
}

/* rounded-coral-button / rounded-lime-green-button */

.rounded-coral-button {
    padding: 8px 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #dadada;
    background-color: #fc735d;
    border: 0;
    border-radius: 14px;
    cursor: pointer;

    transition: transform 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.rounded-coral-button:hover {
    transform: scale(1.05);
}

.rounded-lime-green-button {
    padding: 8px 5px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #ffffff;
    background-color: #63dd99;
    border: 0;
    border-radius: 14px;
    cursor: pointer;

    transition: transform 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.rounded-lime-green-button:hover {
    transform: scale(1.05);
}

/* white-border-yellow-button */

.white-border-yellow-button {
    position: relative;
    z-index: 1;
    padding: 8px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-transform: inherit;
    color: #000000;
    text-align: center;
    border: 2px solid #ffffff;
    background-color: #fffb00;
    border-radius: 3px;
    cursor: pointer;
}

.white-border-yellow-button::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.33);
    cursor: pointer;
    transform: scale3d(0.35, 1, 1);

    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.white-border-yellow-button:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ***** */

/* *** Mailcatcher Forms *** */

/* light blue border input  */

.light-blue-border-input {
    max-width: 350px;
    margin: 0 auto;
    padding: 15px;
}

.light-blue-border-input .form-label {
    margin-bottom: 4px;
}

.light-blue-border-input .form-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 4px;
    border-radius: 3px;
    border: 2px solid rgb(24 121 181 / 20%);
}

.light-blue-border-input .form-input:focus {
    outline: none;
    border-color: #3b5998;
}

.light-blue-border-input .step-buttons-wrapper {
    align-items: center;
}

.light-blue-border-input .form-button {
    width: 80%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .light-blue-border-input {
        max-width: 450px;
    }
}

/* black-border-input-inline */

.black-border-input-inline {
    padding: 10px 15px;
}

.black-border-input-inline .input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.black-border-input-inline .form-label {
    margin-right: 8px;
    text-transform: uppercase;
}

.black-border-input-inline .form-input {
    width: 80%;
    max-width: 150px;
    padding: 7px;
    border: 1px solid #000;
    border-radius: 5px;
}

.black-border-input-inline .form-button {
    display: block;
    width: 45%;
    max-width: 150px;
    margin: 0 auto;
}

/* black-bg-input */

.black-bg-input {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
}

.black-bg-input .form-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 5px;
    font-size: inherit;
    color: #fff;
    border: 1px solid #000;
    background: #000;
}

.black-bg-input button {
    display: block;
    margin: 0 auto;
    font-weight: 600;
}

/* black-border-input-with-placeholder */

.black-border-input-with-placeholder {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.black-border-input-with-placeholder .form-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #000000;
}

/* red-border-input-with-placeholder */

.red-border-input-with-placeholder {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.red-border-input-with-placeholder .form-input {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #ff0000;
}

/* form-with-text-in-border */

.form-with-text-in-border {
    width: 97%;
    max-width: 540px;
    margin: 0 auto;
    font-family: inherit;
    border: solid 3px #ff5a2c;
    border-radius: 10px;
}

.form-with-text-in-border .title-wrapper {
    padding: 10px;
    color: #ff5a2c;
    background-color: transparent;
}

.form-with-text-in-border .title {
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    color: inherit;
    text-align: center;
}

.form-with-text-in-border .content-wrapper {
    padding: 10px 10px 20px 10px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 0px 0px 6px 6px;
}

.form-with-text-in-border .text {
    margin-bottom: 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.form-with-text-in-border .form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-with-text-in-border .form-label {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 700;
}

.form-with-text-in-border .form-input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 2px;
    font-size: 16px;
    border: solid 1px #dbdbdb;
}

.form-with-text-in-border .form-button {
    width: 100%;
    padding: 8px 2px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    border: 0px;
    background-color: #ff5a2c;
    border-radius: 8px;
    cursor: pointer;

    transition: background-color 0.15s ease-out;
}

.form-with-text-in-border .form-button:hover {
    background-color: #f24a1c;
}

/* ***** */

/* *** Modals *** */

/* grey modal */

.grey-modal {
    width: 100%;
    max-width: 425px;
    height: auto;
    font-family: inherit;
    font-size: 1.3rem;
    color: #000000;
    border: solid 1px #949494;
    border-radius: 5px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
    background-color: #ededed;
}

.grey-modal .top-modal-wrapper {
    width: 100%;
    height: 23px;
    border-bottom: solid 1px #949494;
    background: #ccc;
}

.grey-modal .content-modal-wrapper {
    display: flex;
    padding: 15px 10px;
}

.grey-modal .image-modal-wrapper {
    display: none;
}

@media screen and (min-width: 768px) {
    .grey-modal .image-modal-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
    }
}

.grey-modal .main-content-modal-wrapper {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .grey-modal .main-content-modal-wrapper {
        width: 80%;
    }
}

.grey-modal .modal-subtitle {
    margin-bottom: 7px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.grey-modal .modal-text {
    margin-bottom: 24px;
    font-size: 1.3rem;
}

.grey-modal .modal-button {
    width: 78px;
    padding: 2px 1px;
    font-family: inherit;
    font-size: 1.4rem;
    text-align: center;
    color: #000;
    border: solid 1px #9a9a9a;
    border-radius: 4px;
    background: #ccc;
}

.grey-modal .modal-button:hover {
    background: #b7b7b7;
}

/* green transparent modal */

.green-transparent-modal {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.green-transparent-modal .modal-title-block {
    padding: 15px 5px;
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    color: inherit;
    background-color: #2f9216;
}

@media screen and (min-width: 768px) {
    .green-transparent-modal .modal-title-block {
        font-size: 2.3rem;
    }
}

.green-transparent-modal .modal-text-block {
    padding: 15px 15px 25px 15px;
    font-size: 1.6rem;
    line-height: 1.3;
    background-color: rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 768px) {
    .green-transparent-modal .modal-text-block {
        padding: 10px 30px 20px 30px;
        font-size: 1.8rem;
        line-height: 1.1;
    }
}

.green-transparent-modal .modal-buttons-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

@media screen and (min-width: 768px) {
    .green-transparent-modal .modal-buttons-wrapper {
        font-size: 2.7rem;
    }
}

/* ***** */

/* *** OTHERS *** */

/* list-with-animation-marker */

.list-with-animation-marker .item {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.list-with-animation-marker .item:not(:last-child) {
    margin-bottom: 15px;
}

.list-with-animation-marker .text {
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}

.list-with-animation-marker .marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0 0 0 #c20202;

    animation: list-with-animation-marker-fill 0.4s ease-in-out 0.4s forwards,
        list-with-animation-marker-scale 0.3s ease-in-out 0.9s both;
}

.list-with-animation-marker .marker-circle {
    fill: none;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #c20202;

    animation: list-with-animation-marker-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.list-with-animation-marker .checkmark {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;

    animation: list-with-animation-marker-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@media (min-width: 768px) {
    .list-with-animation-marker .item:not(:last-child) {
        margin-bottom: 25px;
    }
    .list-with-animation-marker .marker {
        width: 56px;
        height: 56px;
    }
}

@keyframes list-with-animation-marker-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes list-with-animation-marker-scale {
    0%,
    100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes list-with-animation-marker-fill {
    100% {
        box-shadow: inset 0 0 0 30px #c20202;
    }
}

/* ***** */

/* ***** COMPONENTS END ***** */