:root {
    --mainFontDarkBckgr: #FFFFFF;
    --mainFontLightBckgr: #000000;
    --darkGreyFont: #494646;
    --greyBoxesBackground: #F8F9FA;
    --purpleAccent: #BC56FF;
    --cubeGradientDark: #262320;
    --cubeGradientLight: #5C5250;
    --alternativeLightBackground: #E9E9E9;
    --subsectionLightBackground: #F6F7F8;
}

/* General classes */

body {
    /*font-family: 'Libre Baskerville', serif;*/
    color: var(--mainFontLightBckgr);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
}

a:link,
a:visited {
    color: #5c5c5c;
    text-decoration: none;
}

a:hover {
    color: var(--purpleAccent);
    text-decoration: none;
}

a.link-dark:link, a.link-dark:visited {
    color: #252525;
}

.nav-item {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: var(--mainFontDarkBckgr);
}

.nav-link > i {
    padding-left: 4px;
}

.dark {
    color: var(--mainFontDarkBckgr);
}

.section-title {
    font-size: 190%;
}

.section-body {
    font-family: 'Raleway', sans-serif;
    font-size: 120%;
}

.section-quote {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 190%;
    color: var(--darkGreyFont);
}

.section-subtitle {
    font-family: 'Raleway', sans-serif;
    font-weight: bolder;
    color: var(--purpleAccent);
}

/* End General classes */

/* Banner section classes */

.top-banner {
    background-image: url('../../assets/img/banner/top-banner.cdbcb008634cadfe.jpg');
    height: 95vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed !important;
    background-position: 45% 0%;
}

.banner-caption {
    top: 35%;
    left: 20%;
    position: absolute;
}

.banner-quote {
    font-weight: bold;
    font-size: 5vmin;
    color: var(--mainFontDarkBckgr);
}

.banner-subquote {
    font-family: 'Raleway', sans-serif;
    font-size: 3.4vmin;
    color: var(--mainFontDarkBckgr);
}

.banner-line {
    width: 100%;
    line-height: 2pt;
    background-color: var(--purpleAccent);
}

.banner-button {
    width: 90pt;
    height: 30pt;
    border: 1pt solid var(--mainFontDarkBckgr);
    position: relative;
}

.banner-button a {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    color: var(--purpleAccent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.banner-container > .v-align {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-content {
    padding: 12pt;
    box-sizing: border-box;
    display: flex;
}

.col.button {
    align-items: center;
}

.banner-content > .col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: 80%;
}

.banner-content > .col-image {
    max-width: 20%;
    flex-basis: 20%;
}

.banner-content > .col-image img {
    max-width: 100%;
}
/* End Banner section classes */

/* Quote section classes */

.quote-section {
    min-height: 100pt;
}

/* End Quote section classes */

/* Cube section classes */

.cube-section {
    min-height: 410pt;
    background-image: linear-gradient(var(--cubeGradientDark) 10%, var(--cubeGradientLight) 90%);
}

.cube {
    width: 100%;
}

.cube-container {
    position: relative;
}

.cube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cube-cell {
    cursor: pointer;
}

path[data-toggle="tooltip"]:hover {
    fill-opacity: 0.75;
}

/* End Cube section classes */

/* Icons section classes */

.icons-section {
    min-height: 100pt;
    background-color: var(--alternativeLightBackground);
}

.icon-section-title {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 130%;
}

/* End Icons section classes */

/* Process section classes */

.process-section {
    min-height: 800pt;
}

.process-subsection {
    width: 220pt;
    height: 160pt;
    background-color: var(--subsectionLightBackground);
}

@media (max-width: 767px) {
    .process-subsection img {
        margin-top: -5%;
        height: 110%;
        max-width: 100%;
    }

    .banner-caption {
        top: 35%;
        left: 10%;
        position: absolute;
    }
}

@media (min-width: 768px) {
    #process-data-compilation .process-subsection img {
        margin-top: -20%;
    }

    #process-live-verification .process-subsection img {
        margin-top: -10%;
    }

    #process-leveraging-artificial-and-human-intelligence .process-subsection img {
        margin-left: -20%;
        margin-top: 5%;
    }

    #process-background-check .process-subsection img {
        margin-top: 10%;
        margin-right: 10%;
    }
}

/* End Process section classes */

/* Contact form classes */

.contact-form-container {
    background-color: var(--alternativeLightBackground);
}

.contact-form-field-name,
.contact-form-field-email,
.contact-form-field-message,
.contact-form-button {
    border: none;
    padding: 10px;
}

.contact-form-field-message {
    height: 156px;
}

.contact-form-button {
    width: 100%;
    font-family: 'Raleway', sans-serif;
    font-weight: bolder;
    color: var(--mainFontDarkBckgr);
    background-color: var(--purpleAccent);
    cursor: pointer;
    border: none;
    padding: 0;
    position: relative;
    height: 44px;
    overflow: hidden;
    transition: background-color 250ms ease-in;
    font-size: 12px;
}

.contact-form-button > span {
    padding: 10px;
    line-height: 24px;
    display: block;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    transition: top 250ms ease-in;
    top: 44px;
}

.contact-form-button > span.outgoing {
    top: -44px;
}

.contact-form-button > span.current {
    top: 0;
}

.contact-form-button > span.incoming {
    top: 44px;
}

.contact-form-button.done {
    background-color: #10e6ce;
}

.contact-form-button.error {
    background-color: #ff003f;
}

.contact-form-button.unavailable {
    background-color: var(--purpleAccent);
    opacity: 0.5;
    cursor: inherit;
    pointer-events: none;
}

.contact-form-disclaimer-text {
    font-size: 55%;
}

.button-text {
    font-size: 10px;
}

@media (min-width: 768px) {
    .button-text {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    .button-text {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .button-text {
        font-size: 16px;
    }
}

input, textarea {
    width: 100%;
}

form {
    width: 100%;
}

.max-49-ch {
    max-width: 49ch;
}
/* End Contact form classes */

/* Navbar classes */

#navbar {
    background-color: rgba(0, 0, 0, 1);
    /*transition: background-color 250ms ease-out;*/
}

#navbar.navbar-bg-dark {
    background-color: rgba(0, 0, 0, 1);
    /*transition: background-color 500ms ease-in;*/
}

#navbarResponsive.collapse {
    background-color: rgba(0, 0, 0, 1);
    padding: .5rem 1rem;
    margin: -.5rem -1rem;
}

#navbarResponsive.collapsing {
    background-color: rgba(0, 0, 0, 1);
    padding: .5rem 1rem;
    margin: -.5rem -1rem;;
}

.grecaptcha-badge {
    display: none !important;
}
/* End Navbar classes */


.bgfoot1 {
    background-color: #262626;
}

.bgfoot2 {
    background-color: #1B1B1B;
}

.bg-simple-page {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#698bd3+8,141428+34,000000+100 */
    background: var(--cubeGradientDark); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  var(--cubeGradientDark) 10%, var(--mainFontLightBckgr) 40%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  var(--cubeGradientDark) 10%, var(--mainFontLightBckgr) 40%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  var(--cubeGradientDark) 10%, var(--mainFontLightBckgr) 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--cubeGradientDark), endColorstr=var(--mainFontLightBckgr),GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.pt-100 {
    padding-top: 100px !important;
}

.navbar-brand-points {
    display: inline-block;
    font-size: 30px;
    line-height: 0px;
    position: relative;
    top: 5px;
    left: 5px;
}
.navbar-brand-text {
    font-size: 2vmin;
}

.tooltip-inner {
    padding: 8px !important;
    min-width: 250px;
}

.tooltip-inner > div {
    margin: 8px;
}

.tooltip-inner > div.title {
    font-weight: bold;
    font-size: 16px;
}

.tooltip-inner > div.description {
    max-height: 0;
    transition: max-height 500ms ease-in;
    overflow: hidden;
}


.tooltip-inner > div.description.show {
    max-height: 300px;
    overflow: hidden;
}

.iasme-footer {
    display: block;
    margin: 8px 0;
    width: 100%;
    height: 0;
    padding: 36px;
    background-image: url(../../assets/img/footer/iasme-cybersecuritycentre-cyberessentials.85b68abb0639d212.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 8px;
}