@import url('./fonts.css');

:root {
    --ipGrey: #232323;
    --ipGrey50: #fafafa;
    --ipGrey75: #f1f1f1;
    --ipGrey100: #e9e9e9; /*Gulf Stream Silver*/
    --ipGrey150: #d3d3d4;
    --ipGrey200: #c4c5c6;
    --ipGrey250: #b6b6b8;
    --ipGrey300: #a7a7aa;
    --ipGrey350: #98999c;
    --ipGrey400: #898a8d;
    --ipGrey450: #7b7c7f;
    --ipGrey500: #6c6d71; /*Beluga Grey*/
    --ipGrey550: #616266;
    --ipGrey600: #56575a;
    --ipGrey650: #4c4c4f;
    --ipGrey700: #414144;
    --ipGrey750: #363739;
    --ipGrey800: #2b2c2d;
    --ipGrey850: #232323; /*Jet Grey*/
    --ipGrey900: #161617;
    --ipGrey950: #0b0b0b;
    --ipGreyTransparent: 'rgba(12,12,12,.8)';

    --ipBlue: #3498db; /*EAQC Blue*/
    --ipBlue50: #ebf5fb;
    --ipBlue100: #d6eaf8;
    --ipBlue150: #c2e0f4;
    --ipBlue200: #aed6f1;
    --ipBlue250: #9acced;
    --ipBlue300: #85c1e9;
    --ipBlue350: #71b7e6;
    --ipBlue400: #5dade2;
    --ipBlue450: #48a2df;
    --ipBlue500: #3498db; /*EAQC Blue*/
    --ipBlue550: #2f89c5;
    --ipBlue600: #2a7aaf;
    --ipBlue650: #246a99; /*EAQC Dark*/
    --ipBlue700: #1f5b83;
    --ipBlue750: #1a4c6e; /*Cockpit Blue*/
    --ipBlue800: #153d58;
    --ipBlue850: #102e42;
    --ipBlue900: #0a1e2c;
    --ipBlue950: #050f16;

    --ipError: #7d0027;
    --ipErrorLight: #f2e6e9;
    --ipErrorDark: #4b0017;

    --ipWarning: #cc6e02;
    --ipWarningLight: #fff3e6;
    --ipWarningDark: #995201;

    --ipSuccess: #116D41;
    --ipSuccessLight: #E7F0EC;
    --ipSuccessDark: #0A4127;

    --fontFamily: 'Kanit', sans-serif;
    --fontWeightLight: 400;
    --fontWeightBold: 700;
}

/************************************
Basic
************************************/

body {
    font-family: var(--fontFamily);
    color: var(--ipGrey);
    font-weight: var(--fontWeightLight);
    overflow-x: hidden;
    font-size: 18px;
    line-height: 1.25;
}

@media screen and (max-width: 997px) {
    body {
        font-size: 17px;
    }
}

h1, h2, h3, h4, h5, h6, th {
    font-weight: var(--fontWeightBold);
}

h1 {
    font-size: 3rem;
}

@media screen and (max-width: 997px) {
    h1 {
        font-size: 2rem;
    }
}

h2 {
    font-size: 2.25rem;
    line-height: 2.75rem;
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 997px) {
    h2 {
        font-size: 1.75rem;
        line-height: 2rem;
        margin-bottom: 1rem;
    }
}

h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
}

@media screen and (max-width: 997px) {
    h3 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

h4 {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

@media screen and (max-width: 997px) {
    h4 {
        font-size: 1.1rem;
        line-height: 1.25rem;
    }
}

p.kicker {
    text-transform: uppercase;
    line-height: 1.75rem;
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0;
}

@media screen and (max-width: 997px) {
    p.kicker {
        line-height: 1.5rem;
        font-size: 1rem;
    }
}

a {
    color: var(--ipBlue650);
    text-decoration: none;
    font-weight: bold;
}

.container.wrapper {
    padding-top: 2.5rem;
}

section {
    padding: 4rem 0;
}

@media screen and (max-width: 997px) {
    section {
        padding: 2.5rem 0.5rem;
    }
}

section.grey {
    background-color: var(--ipGrey50);
    margin-top: 2.5rem;
}

.circle-icon {
    background-color: var(--ipBlue750);
    color: white;
    border-radius: 100%;
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    text-align: center;
    padding-top: 4px;
    margin-right: 15px;
    font-size: 1.25rem;
}

/************************************
Navbar
************************************/

header {
    box-shadow: -2px 19px 17px -14px rgba(0, 0, 0, .1);
}

header .navbar {
    padding: 0.75rem 0;
}

header .navbar a {
    font-weight: bold;
    color: var(--ipGrey);
}

header .navbar a:hover, header .navbar a.nav-link.active:hover {
    color: var(--ipGrey500);
    cursor: pointer;
}

header .navbar a.nav-link.active {
    color: var(--ipBlue650);
}

header .dropdown-item:active, header .dropdown-item:hover {
    background-color: var(--ipGrey50);
}

header .navbar-brand {
    padding: 0;
}

header .navbar-brand img {
    height: 3rem;
    width: auto;
}

header a.language-switch {
    text-decoration: none;
    color: var(--ipBlue650)
}

header a.language-switch:hover {
    color: var(--ipGrey)
}

/************************************
Home
************************************/

.hero-wrapper {
    height: 70vh;
}

.hero-wrapper video {
    object-fit: cover;
    object-position: center top;
    height: 70vh;
    width: 100vw;
    padding: 0;
}

.hero-wrapper .claim-wrapper {
    bottom: 50px;
    left: 40px;
    height: fit-content;
}

.claim-content {
    width: fit-content;
    background-color: rgba(255, 255, 255, .5);
    padding: 1.5rem 2.5rem;
}

.claim-content h1 {
    line-height: 1;
    margin: 0;
}

@media (min-width: 2000px) {
    .hero-wrapper, .hero-wrapper video {
        height: 85vh;
    }
}

@media (max-width: 1200px) {
    .hero-wrapper, .hero-wrapper video {
        height: 50vh;
    }

    .hero-wrapper .claim-wrapper {
        bottom: 50px;
    }

    .hero-wrapper .claim-wrapper h1 {
        font-size: 36px;
    }

    .hero-wrapper .claim-content {
        padding: 1.5rem;
    }
}

@media (max-width: 997px) {
    .hero-wrapper, .hero-wrapper video {
        height: 40vh;
    }

    .hero-wrapper .claim-wrapper {
        bottom: 30px;
        left: 10px;
    }

    .hero-wrapper .claim-wrapper h1 {
        font-size: 28px;
    }

    .hero-wrapper .claim-content {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .hero-wrapper, .hero-wrapper video {
        height: 33vh;
    }

    .hero-wrapper .claim-wrapper {
        bottom: 20px;
        left: 0;
    }

    .hero-wrapper .claim-wrapper p.kicker {
        display: none;
    }

    .hero-wrapper .claim-wrapper h1 {
       font-size: 20px;
    }

    .hero-wrapper .claim-content {
       padding: 1.25rem;
    }
}

.home h2 {
    font-size: 3rem;
    line-height: 1;
}

@media screen and (max-width: 997px) {
    .home h2 {
        font-size: 2rem;
    }
}

/************************************
Accordion
************************************/

.accordion * {
    background-color: transparent;
}

.accordion-flush > .accordion-item {
    background-color: var(--ipBlue100);
    border-radius: 0.5rem;
}

.accordion-flush > .accordion-item .accordion-collapse.collapse.show {
    background-color: var(--ipBlue50);
}

.accordion-button:not(.collapsed) {
    background-color: var(--ipBlue150) !important;
    color: var(--ipGrey) !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-button {
    font-weight: bold;
    font-size: 1.125rem;
}

.accordion-button i {
    color: var(--ipBlue750);
    padding-right: 1rem;
    font-size: 1.75rem;
}

/************************************
Cards
************************************/

.card {
    border: 1px solid var(--ipGrey);
    background-color: var(--ipGrey50);
}

.card.info-box {
    border: 1px solid var(--ipBlue650);
    background-color: var(--ipBlue650);
    color: white;
    padding: 2rem;
}

.card.info-box a {
    color: white;
    text-decoration: underline;
}

.card.info-box i {
    font-size: 2rem;
   margin-bottom: -2rem;
}

@media screen and (max-width: 576px) {
    .card.info-box i {
        display: none!important;
    }
}

.card.info-box.light {
    border: 1px solid var(--ipGrey75);
    background-color: var(--ipGrey75);
    color: var(--ipGrey);
    padding: 2rem;
}

/************************************
Buttons
************************************/

.btn {
    border-radius: 1rem;
}

.btn-sm {
    border-radius: 0.5rem;
}

.btn.btn-outline-primary {
    border: 2px solid var(--ipBlue650);
    color: var(--ipBlue650);
}

.btn.btn-outline-primary:hover {
    border: 2px solid var(--ipBlue650);
    color: white;
    background-color: var(--ipBlue650);
}

.btn.btn-outline-secondary {
    border: 2px solid var(--ipGrey500);
    color: var(--ipGrey500);
}

.btn.btn-outline-secondary:hover {
    border: 2px solid var(--ipGrey500);
    color: white;
    background-color: var(--ipGrey500);
}

.btn.btn-primary {
    background-color: var(--ipBlue500);
    color: white;
    border-color: var(--ipBlue500);
}

.btn.btn-primary:hover {
    background-color: var(--ipBlue600);
    color: white;
    border-color: var(--ipBlue600);
}

.info-box .btn.btn-primary {
    background-color: white;
    color: var(--ipBlue650);
    border: 2px solid var(--ipBlue650);
    text-decoration: none;
    font-weight: bold;
}

.info-box .btn.btn-primary:hover {
    background-color: var(--ipBlue650);
    color: white;
    border: 2px solid white;
    font-weight: bold;
}

/************************************
Team
************************************/

.team h4 {
    color: var(--ipBlue650);
}

/************************************
Footer
************************************/
 footer .contact {
     background-color: var(--ipBlue750);
 }


.socket {
    background-color: var(--ipGrey100);
}

/************************************
Pinpad
************************************/
#pin_form {
    width: 245px;
}

#pin_pad {
    width: 180px;
    height: 173px;
    margin: auto;
}

#pin_composite-1, #pin_composite-2, #pin_composite-3, #pin_composite-4 {
    width: 50px;
    height: 32px;
    float: left;
    margin-bottom: 15px;
}

#pin_composite-1, #pin_composite-2, #pin_composite-3 {
    margin-right: 15px;
}

#pin_keyA, #pin_keyB, #pin_keyC, #pin_keyD, #pin_keyE, #pin_keyF, #pin_keyG, #pin_keyH, #pin_keyI, #pin_keyJ,
#pin_keyX {
    width: 50px;
    height: 32px;
    float: left;
}

#pin_keyA, #pin_keyB, #pin_keyD, #pin_keyE, #pin_keyG, #pin_keyH, #pin_keyJ {
    margin-right: 15px;
}

#pin_keyA, #pin_keyB, #pin_keyC, #pin_keyD, #pin_keyE, #pin_keyF, #pin_keyG, #pin_keyH, #pin_keyI {
    margin-bottom: 15px;
}

#pin_keyX {
    float: right;
}

.pin_char0, .pin_char1, .pin_char2, .pin_char3, .pin_char4, .pin_char5, .pin_char6, .pin_char7, .pin_char8,
.pin_char9, .pin_charX, .pin_charO, .pin_char_ {
    background: url('/img/numpad/numpad-mobile.gif');
}

.pin_char0 {
    background-position: -50px -32px;
}

.pin_char1 {
    background-position: -50px -64px;
}

.pin_char2 {
    background-position: -50px -96px;
}

.pin_char3 {
    background-position: -50px -128px;
}

.pin_char4 {
    background-position: -50px -160px;
}

.pin_char5 {
    background-position: -50px -192px;
}

.pin_char6 {
    background-position: -50px -224px;
}

.pin_char7 {
    background-position: -50px -256px;
}

.pin_char8 {
    background-position: -50px -288px;
}

.pin_char9 {
    background-position: -50px -320px;
}

.pin_charX {
    background-position: -50px -352px;
}

.pin_charO {
    background-position: -50px -384px;
}