/* FONTS */
@font-face {
    font-family: "GD Sherpa";
    src: url(../fonts/GD_Sherpa-Regular.woff2) format("woff2"),
    url(../fonts/GD_Sherpa-Regular.woff) format("woff");
}
@font-face {
    font-family: "GD Sherpa";
    src: url(../fonts/GD_Sherpa-Light.woff2) format("woff2"),
    url(../fonts/GD_Sherpa-Light.woff) format("woff");
    font-weight: 300;
}
@font-face {
    font-family: "GD Sherpa";
    src: url(../fonts/GD_Sherpa-Medium.woff2) format("woff2"),
    url(../fonts/GD_Sherpa-Medium.woff) format("woff");
    font-weight: 500;
}
@font-face {
    font-family: "GD Sherpa";
    src: url(../fonts/GD_Sherpa-Semibold.woff2) format("woff2"),
    url(../fonts/GD_Sherpa-Semibold.woff) format("woff");
    font-weight: 600;
}
@font-face {
    font-family: "GD Sherpa";
    src: url(../fonts/GD_Sherpa-Bold.woff2) format("woff2"),
    url(../fonts/GD_Sherpa-Bold.woff) format("woff");
    font-weight: 700;
}
@font-face {
    font-family: "GD Sage";
    src: url(../fonts/GDSageWeb-Medium.woff2) format("woff2"),
    url(../fonts/GDSageWeb-Medium.woff) format("woff");
}
@font-face {
    font-family: "GD Sage";
    src: url(../fonts/GDSageWeb-Bold.woff2) format("woff2"),
    url(../fonts/GDSageWeb-Bold.woff) format("woff");
    font-weight: 700;
}

/* COLORS */
:root {
    --cash-black: #111111;
    --space-white: #FFFFFF;
    --everyday-teal: #1BDBDB;
    --everyday-teal-200: #A6FFF8;
    --everyday-teal-300: #61EDEA;
    --everyday-teal-400: #1BDBDB;
    --everyday-teal-500: #00A4A6;
    --everyday-teal-600: #09757A;
    --everyday-teal-700: #004249;
}

/* DEFAULT ELEMENTS */

html {
    background-color: var(--cash-black);
    font-size: 60px; /* defines rem value */
    margin: 0;
}

body {
    background: var(--space-white);
    color: var(--cash-black);
    font-family: "GD Sherpa",sans-serif;
    font-size: 60px;
    line-height: 1.1;
    overflow: hidden;
    position: relative;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "GD Sherpa",sans-serif;
    line-height: 1;
}

hr { border-color: #ccc; }

a, a:visited {
    color: var(--cash-black);
    font-weight: bold;
}
a:hover, a:visited:hover {
    color: #4ca2d4;
    text-decoration: none;
}

/* core components */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 36rem;
    width: 36rem;
}
.row {
    margin-right: 0.0667rem;
    margin-left: 0.0667rem;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}
.center {
    text-align: center;
}

/* page architecture */
#header {
    height: 5rem;
}
#logo-container {
    height: 3rem;
    padding: 1rem 0;
    text-align: center;
}
#logo-container img {
    height: 3rem;
}
#nav {
    height: 11rem;
    /*! margin: 0 auto; */
    z-index: 10;
    padding: 0 1rem 1rem;
}
#main {
    padding: 0.5rem 1rem 1rem;
}
#footer {
    background: var(--cash-black);
    height: 16.333rem;
    padding: 1rem;
}


/* elements */
.button.nav {
    background-color: var(--everyday-teal);
    background-position: center 1rem;
    background-repeat: no-repeat;
    background-size: 6rem 6rem;
    border: none;
    border-radius: 1rem;
    display: inline-block;
    font-size: 1.2em;
    height: 11rem;
    padding: 7rem 1rem 1rem;
    position: relative;
    width: calc(11rem - 5px);
}
.button.nav + .button.nav {
    margin-left: 0.5rem;
}
.button.nav.active:after {
    background-image: url(../img/caret-down.svg);
    background-repeat: no-repeat;
    background-size: 3.5rem;
    background-position: top center;
    position: absolute;
    top: calc(11rem - 10px); /* 650px */
    height: 2rem;
    width: 9rem;
    z-index: 10000;
}
.btn-icon.handheld { background-image: url(../img/handheld-pos.svg); }
.btn-icon.business { background-image: url(../img/business-benefits.svg); }
.btn-icon.customer { background-image: url(../img/customer-experience.svg); }
.btn-icon.smart-terminal { background-image: url(../img/smart-terminal-pos.svg); }
.btn-icon.tap-to-pay-iphone { background-image: url(../img/tap-to-pay-iphone.svg); }
.btn-icon.pay-links { background-image: url(../img/pay-links.svg); }
.btn-icon.savings { background-image: url(../img/savings.svg); }
.btn-icon.calculator { background-image: url(../img/calculator.svg); }
.btn-icon.in-store { background-image: url(../img/in-store.svg); }
.btn-icon.backoffice { background-image: url(../img/backoffice-management.svg); }
.btn-icon.support { background-image: url(../img/support.svg); }
.btn-icon.airo { background-image: url(../img/airo.svg); }

.button.nav:hover,
.button.nav:active {
    background-color: var(--everyday-teal-300);
}

.photo-container {
    border-radius: 1rem 1rem 1rem 6rem;
    height: 31.333rem; /* 1880px / 60px */
    margin: 0;
    overflow: hidden;
    position: relative;
}
.photo-container img {
    max-width: 100%;
    position: absolute;
    top: 0; left: 0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 60s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 60s;
}
/* thanks https://jsfiddle.net/5M2PD/4/ */
@-webkit-keyframes fade {
    0% {opacity: 0;}
    5% {opacity: 1;}
    20% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    5% {opacity: 1;}
    20% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}
.photo-container img:nth-child(1){
    -webkit-animation-delay: -12s;
    -moz-animation-delay: -12s;
    -o-animation-delay: -12s;
    animation-delay: -12s;
}
.photo-container img:nth-child(2){
    -webkit-animation-delay: -24s;
    -moz-animation-delay: -24s;
    -o-animation-delay: -24s;
    animation-delay: -24s;
}
.photo-container img:nth-child(3){
    -webkit-animation-delay: -36s;
    -moz-animation-delay: -36s;
    -o-animation-delay: -36s;
    animation-delay: -36s;
}
.photo-container img:nth-child(4){
    -webkit-animation-delay: -48s;
    -moz-animation-delay: -48s;
    -o-animation-delay: -48s;
    animation-delay: -48s;
}
.photo-container img:nth-child(5){
    -webkit-animation-delay: -60s;
    -moz-animation-delay: -60s;
    -o-animation-delay: -60s;
    animation-delay: -60s;
}


p.reload {
    color: var(--space-white);
    cursor: pointer;
    text-align: right;
    font-weight: 300;
    font-size: 80%;
    opacity: 0.2;
}

/* modal */
.modal {
    top: 17rem;
}
.modal-content {
    border-radius: 0;
}
.modal-dialog {
    margin: 0.5rem auto;
    width: 32rem;
}
.modal-header {
    background: var(--everyday-teal);
    border: none;
    height: 2.5rem;
    padding: 0;
    position: relative;
}
.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}
.modal-header .close {
    color: var(--cash-black);
    font-size: 1rem;
    opacity: 1;
    padding: 0.75rem;
    text-shadow: none;
}
.modal-footer {
    padding: 0.25rem;
}

.next-links {
    position: absolute; right: 1rem; bottom: 1rem;
    text-align: right;
}
.next-link {
    color: var(--cash-black);
    cursor: pointer;
    text-transform: uppercase;
}
.next-link:hover,
.next-link:active {
    color: var(--cash-black);
    opacity: 0.8;
}

.arrow {
    border: solid var(--cash-black);
    border-width: 0 .25em .25em 0;
    display: inline-block;
    padding: .25em;
}
.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.next-link:hover .arrow {
    border-color: rgba(0,0,0,0.8);
}

.modal-body {
    min-height: 26rem;
    padding: 1rem;
}
.modal-body .hed {
    margin-top: 0;
}
.modal-body .subhed {
    margin-top: 1.4em;
}
.modal-footer {
    border: none;
}

.modal-backdrop {
    background-color: var(--cash-black);
    border-radius: 1rem 1rem 1rem 6rem;
    height: 31.333rem; /* 1880px / 60px */
    position: absolute;
    top: 16.5rem; left: 1rem; right: 1rem;
}
.modal-backdrop.in {

}
.modal-backdrop.super {
    background-color: var(--space-white);
    border-radius: 0;
    top: 5.5rem; left: 0; bottom: 10.5rem; right: 0;
}
.modal-backdrop.super.in {
    opacity: 1;
}

.pictogram-modal-content ol,
.pictogram-modal-content ul {
    padding-left: 1em;
}
.pictogram-modal-content ol li,
.pictogram-modal-content ul li {
    margin-bottom: 1em;
}

.modal-body .inset-box {
    background: #D9D9D9;
    border-radius: 1em;
    margin-bottom: 1em;
    padding: 1em;
}
.modal-body h4 {
    font-size: 1.3em;
    font-weight: 700;
    margin: 1em 0 0;
}
.modal-body h4:first-child {
    margin: 0;
}
.modal-body small {
    font-size: 0.8em;
}

/* "super" size modal */
.modal.super-modal {
    top: 4.5rem;
}
.modal.super-modal .modal-dialog {
    width: 34rem;
}
.modal.super-modal .modal-content {
    background-color: var(--everyday-teal);
    border-radius: 1rem 1rem 1rem 6rem;
}
.modal.super-modal .modal-header {
    border-radius: 1rem 1rem 0 0;
}
.modal.super-modal .modal-body {
    font-weight: 700;
    height: calc(40rem + 20px); /* 2420px */
}
.modal.super-modal h2.modal-title {
    font-size: 2.5rem;
    margin: 1.5rem 0;
}
.modal.super-modal .disclaimer {
    font-weight: 500;
    font-size: 0.75em;
    line-height: 1.2;
    margin-top: 2em;
}

button.btn-icon {
    background-color: transparent;
    background-position: center 0.5rem;
    background-repeat: no-repeat;
    /*background-size: 400px 350px;*/
    background-size: 6.5rem 6rem;
    border: none;
    border-radius: 1rem;
    /*font-size: 1.2em;*/
    font-size: 1em;
    font-weight: 700;
    height: 10rem;
    padding: 6rem 0.5rem 0.5rem;
}
button.btn-icon:hover,
button.btn-icon:active {
    background-color: var(--everyday-teal-200);
}
button.btn-icon.btn-horiz {
    background-position: left center;
    background-size: 3.5rem 3rem;
    font-size: 1em;
    height: 5rem;
    padding: 0.5rem 0.5rem 0.5rem 3.5rem;
    text-align: left;

}
#business-benefits-modal button.btn-icon {
    background-size: 6rem 5rem;
    padding: 5.5rem 0.5rem 0.5rem;
}

#special-offer {
    position: absolute; top: 19rem; right: calc(50% - 19rem);
    height: 11rem;
    width: 11rem;
}
#special-offer img {
    cursor: pointer;
    max-width: 100%;
}

.click-me {
    position: absolute; top: 16rem;
    width: 11rem;
    height: 13rem;
    text-align: center;
    z-index: 99;
    -webkit-animation-name: bob;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    animation-name: bob;
    animation-iteration-count: infinite;
    animation-duration: 1.2s;
    animation-timing-function: linear;
}
.click-me img {
    max-width: 90%;
}
.position-1 {
    left: 1rem;
}
.position-2 {
    left: calc(50% - 5.5rem);
}
.position-3 { 
    right: 1rem;
}
@-webkit-keyframes bob {
    0%, 100% { transform:translate(0,0); }
    50% { transform:translateY(-0.5rem); }
}
@keyframes bob {
    0%, 100% { transform:translate(0,0); }
    50% { transform:translateY(-0.5rem); }
}

.button-row {
    margin-bottom: 0.25rem;
}

.italic {
    font-style: italic;
}
.nowrap {
    display: inline-block;
    white-space: nowrap;
}

#footer h2 {
    color: var(--everyday-teal);
    font-size: 2em;
    font-weight: 700;
    padding: 1em 1em 0 0;
    text-align: right;
}

/* UX Slider */
.slider-container {
    margin-bottom: 2em;
}
.ux-slider {
    display: flex;
}
.ux-slider-main {
    flex: 1;
}
.continuous-slider {
    margin-bottom: 1em;
}
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    background: var(--space-white); /* Grey background */
    border-radius: 0.675em;
    margin: 0.125em 0 0.25em;
    outline: none; /* Remove outline */
    overflow: hidden;
    height: 1.375em; /* Specified height */
    width: 100%; /* Full-width */
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    background-color: var(--space-white);
    border: 0.125em solid var(--cash-black);
    border-radius: 50%;
    box-shadow: -15.675em 0 0 15em var(--cash-black);
    cursor: pointer;
    height: 1.375em;
    width: 1.375em;
}
.slider::-moz-range-thumb {
    background-color: var(--space-white);
    border: 0.125em solid var(--cash-black);
    border-radius: 50%;
    box-shadow: -15.675em 0 0 15em var(--cash-black);
    cursor: pointer; /* Cursor on hover */
    height: 1.2em;
    width: 1.2em;
}

.ux-slider-bar {
    position: relative;
    width: 100%;
    height: 1.375em;
}
.ux-slider-bar .ux-slider-area {
    align-items: center;
    background-color: var(--space-white);
    border-radius: 0.125em;
    display: flex;
    height: 0.25em;
    position: absolute;
    top: calc((1.375em - 0.25em) / 2);
    width: 100%;
}
.ux-slider-bar .ux-slider-fill {
    position: absolute;
    display: block;
    height: 0.25em;
    overflow: hidden;
    border-radius: inherit;
    background-color: var(--cash-black);
}
.ux-slider-bar .ux-slider-thumb {
    background-color: var(--space-white);
    border-radius: 50%;
    border: 0.125em solid var(--cash-black);
    position: absolute;
    display: block;
    cursor: pointer;
    width: 1.375em;
    height: 1.375em;
    transform: translate(-50%,0);
}
.slider-value-label {
    text-align: right;
    font-size: 0.8em;
    font-weight: bold;
}
.slider-value-label label.left {
    float: left;
    text-align: left;
}

.results-container {
    background: var(--space-white);
    border-radius: 1em;
    font-weight: normal;
    padding: 1em;
}
.results-container p {
    font-size: 1em;
}
.results-container h3 {
    font-size: 1.9em;
    font-weight: bold;
}


/* horizontal screens */
@media (orientation: landscape) {
    html {
        font-size: 16px;
    }
    body {
        overflow: scroll;
        font-size: 16px;
    }
    body.modal-open {
        overflow: scroll;
    }
    .row {
        margin-left: 0.133rem;
        margin-right: 0.133rem;
    }
    .button.nav {
        width: 11rem;
    }
    .button.nav + .button.nav {
        margin-left: 0.333rem;
    }
    .button.nav.active::after {
        top: calc(11rem - 5px);
    }
    .modal {
        position: absolute;
    }
    .modal-backdrop {
        left: calc(50% - 17rem);
        right: calc(50% - 17rem);
    }
    .modal-header .close {
        padding: 1rem;
    }
    .position-1 {
        left: calc(50% - 17rem);
    }
    .position-3 {
        right: calc(50% - 17rem);
    }
}