/**************************************************
    Setup css variables

    To be used when needing to set common things such as colors and sizes accross the site
    color: var(--rift-orange);      // Standard orange colour
    color: var(--rift-blue);        // Standard dark blue colour used for blue text and blue article panels
    color: var(--rift-blue);        // Standard dark grey color used for grey article panels
    color: var(--rift-grey);        // Standard grey color used for grey sub panels
    color: var(--rift-lightgrey);   // Standard light grey color used for grey sub panels
**************************************************/
:root {
    --rift-orange: #FF7A01;
    --rift-blue: #004C74; /* Design: #004C74  Riftsoft: #005581*/
    --rift-darkgrey: #2C2C2C;
    --rift-grey: #3B3B3B;
    --rift-lightgrey: #F8F9FE;
    --page-margin: 4rem;
    --page-margin-sm: 3rem;
}

/**************************************************
    Setup font families

    These are named fonts for fonts that are not
    standard for all browsers.
**************************************************/
@font-face {
    font-family: "Inter";
    src: url("Inter-VariableFont_slnt,wght.ttf") format('truetype');
    font-style: normal;
}

/**************************************************
    Media sizes

    Nav Menu Collapse: max-width: 768px
    Mobile: max-width: 575px
**************************************************/

/**************************************************
    Override bootstrap styles

    Some standard bootstrap classes will need to be
    overrided to suit our need, such as changing the
    color or padding.
**************************************************/
.container {
    margin: 0;
    padding: 0;
    min-width: 100%;
}
.btn-primary {
    background-color: var(--rift-orange);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.btn-primary:hover {
    background-color: var(--rift-orange);
    border: 1px solid white;
}

.btn-secondary {
    background-color: transparent;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid transparent;
    font-size: 0.85rem;
}
.btn-secondary:hover {
    background-color: transparent;
    border: 1px solid white;
}

.btn-secondary-blue {
    background-color: transparent;
    color: var(--rift-blue);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid transparent;
    font-size: 0.75rem;
}

.btn-secondary-blue:hover {
    background-color: transparent;
    border: 1px solid var(--rift-blue);
}

.btn-info {
    background-color: var(--rift-blue);
    color: white;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.btn-info:hover {
    background-color: var(--rift-blue);
    color: white;
    border: 1px solid white;
}

.nav-link, .dropdown-item {
    color: var(--rift-blue) !important;
}
.nav-sublink {
    margin-left: 1rem;
    border-left: 2px solid var(--rift-orange);
    padding-left: 0.75rem;

    margin-top: 0.25rem;    
    margin-bottom: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
}
@media (max-width: 768px) {
    .dropdown-menu {
        border: 0;
    }
}

/**************************************************
    Global page styling

    These setup the page with standards for our site
    such as fonts, padding, margins, etc.
**************************************************/
    html {
    font-family: Inter;
    font-size: 14px;
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
    font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

h1 {
    font-weight: 300;
    font-size: 1.8rem;
}
h1 strong {
    font-weight: 600;
}


/**************************************************
    Header styles

    These are used to style the standard header
**************************************************/
header {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}
@media (max-width: 380px) {
    header {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
#cookieConsent {
    padding: 0.25rem;
    font-size: 0.8rem;
    margin: 0;
}
#cookieConsent .btn {
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.environment {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
    font-size: 0.8rem;
    padding-left: 5px;
}


/**************************************************
    Footer styles

    These are used to style the standard header
**************************************************/
footer {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
    font-size: 0.8rem;
    line-height: 1.5rem;
}
footer h1 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
footer a {
    text-decoration: none;
    color: inherit;
}


/**************************************************
    Common panel styles

    These are used to style common parts of the panels
**************************************************/
article {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}
article ul {
    list-style: none;
    padding-bottom: 1rem;
}
article li {
    margin-bottom: 1rem;
}
article li::before {
    content: "\25A0";
    color: var(--rift-orange);
    display: inline-block;
    width: 2rem;
    margin-left: -1.75em;
    font-size: 1.25em;
}
@media (max-width: 575px) {
    article {
        padding-left: var(--page-margin-sm);
        padding-right: var(--page-margin-sm);
    }
    article.ps-0 {
        padding-left: var(--page-margin-sm) !important;
    }
    
    article.pe-0 {
        padding-right: var(--page-margin-sm) !important;
    }
}
.text-blue {
    color: var(--rift-blue);
}
.text-orange {
    color: var(--rift-orange);
}
.text-darkgrey {
    color: var(--rift-darkgrey);
}
.border-blue {
    border: 1px solid var(--rift-blue);
}
.header-sidestripe {
    border-left: 4px solid var(--rift-orange);
    padding-left: 1.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
}
.header-bottomstripe {
    margin-top: 2.5rem;
}
.header-bottomstripe hr {
    /* font size, white border on left, white color */
    border-top: 3px solid var(--rift-orange);
    opacity: 1;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}
.sideimage img {
    max-height: 600px;
    max-width: 100%;
}
@media (max-width: 575px) {
    .sideimage {
        display:none;
    }
}
.center-helper {
    /* apply to a span within a div with an image to make it vertically align center */
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid var(--rift-grey);
    width: 100%
}
.mini-panel {
    text-align: center;
    border: 3px solid var(--rift-blue);
    border-radius: 0.8rem;
    padding: 1rem;
    margin: 0.5rem;
    min-width: 168px;
    max-width: 168px;
    min-height: 168px;
}
.mini-panel i.fa-solid {
    color: var(--rift-blue);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.mini-panel:nth-child(even) i.fa-solid {
    color: var(--rift-orange);
}


/**************************************************
    Hero Panel styles

    These are used to style the hero panel on all pages.
**************************************************/
.heropanel {
    background-color: var(--rift-blue);
    margin-bottom: 50px;
    color: white;
    padding-top: 3rem;
}
.heropanel-bg1 {
    background-image: url(/img/hero1_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.heropanel-bg2 {
    background-image: url(/img/hero2_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.heropanel-bg3 {
    background-image: url(/img/hero3_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.heropanel-headline {
    padding-bottom: 2rem;
    padding-top: 3rem;    
}
.heropanel-headline h1 {
    line-height: 1.5;
    font-size: 2.5rem;
}
.keyfeature {
    font-weight: 100;
    font-size: 1.25rem;
    text-align: center;
}
@media (max-width: 576px) {
    .keyfeature {
        border-right: 0 !important;
        text-align: left;
        padding-top: 1rem;
    }
}
.keyfeature img {
    padding-right: 1rem;
    width: 60px;
}
.keyfeature strong {
    font-weight: 500;
}
.heropanel-footer {
    margin-top: 2rem;
}
.heropanel-footer i {
    width: 45px;
    height: 45px;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    padding-top: 12px;
    bottom: -27px;
    position: relative;
    color: black;
    text-decoration: none;
}
.heropanel-footer i:hover {
    color: black;
    text-decoration: none;
}



/**************************************************
    White Panel styles

    These are used to style the white panel on all pages.
**************************************************/
.whitepanel {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.whitepanel p {
    text-align:justify;
}
.subpanel-image {
    width: 100%;
    height: 100%;
    color: white;
    vertical-align: bottom;
    font-size: 0.75rem;
    min-height: 140px;
}
.subpanel-image-col {
    width: 58.33333333%;
    margin-left: 3rem;
}
.subpanel-image-blue-bg {
    opacity: 0.5;
    width: 100%;
    height: 100%;
    padding: 1rem;
}
.subpanel-image-blue-bg:hover {
    background-color: var(--rift-blue);
    opacity: 0.85;
}
.subpanel-image-blue-bg div {
    opacity: 1;
}
@media (max-width: 575px) {
    .subpanel-image-col {
        width: 100%;
        flex: 0 0 auto;
        margin-left: 0;
    }
    .subpanel-image-blue-bg {
        background-color: var(--rift-blue);
        opacity: 0.85;
    }
}
@media (max-width: 940px) {
    .subpanel-image-col .col {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}
.subpanel-image-bg1 {
    background-image: url(/img/create/section1_image1.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg2 {
    background-image: url(/img/create/section1_image2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg3 {
    background-image: url(/img/create/section1_image3.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg4 {
    background-image: url(/img/mobile/section1_image1.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg5 {
    background-image: url(/img/mobile/section1_image3.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg6 {
    background-image: url(/img/connect/plan.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-image-bg7 {
    background-image: url(/img/connect/implement.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/**************************************************
    Blue Panel styles

    These are used to style the blue panel on all pages.
**************************************************/
.bluepanel {
    padding-top: 2.5rem;
    color: white;
}
.bluepanel-sm-bg {
    background-image: url(/img/blue_sm_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.bluepanel-lg-bg {
    background-image: url(/img/blue_lg_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.subpanel-white {
    background-color: white;
    position: relative;
    bottom: -100px;
    padding: 2rem;
    color: black;
    font-size: 0.9rem;
    min-height: 400px;
}
.subpanel-white img {
    width: 100%;
    margin-bottom: 2rem;
}
.subpanel-white p:last-child {
    bottom: 1rem;
    position: absolute;
    width: 80%;
}
.subpanel-white a {
   text-decoration: none;
} 




/**************************************************
    Grey Panel styles

    These are used to style the grey panel on all pages.
**************************************************/
.darkgreypanel {
    background-color: var(--rift-darkgrey);
    color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.darkgreypanel-lg-bg {
    background-image: url(/img/darkgrey_lg_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.darkgreypanel-sm-bg {
    background-image: url(/img/darkgrey_sm_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.darkgreypanel h1 {
    padding-bottom: 1rem;
}
.darkgreypanel-top {
    padding-top: 1rem;
    background-color: white;
    text-align: center;
}
@media (max-width: 575px) {
    .darkgreypanel-top .row:last-child {
        flex-direction: column;
    }
}
.darkgreypanel-bottom {
    padding-bottom: 4rem;
    background-color: var(--rift-darkgrey);
    color: white;
    position: relative;
    top: -150px;
    padding-top: 200px;
    margin-bottom: -150px;
}
.darkgreypanel-bottom .row {
    --bs-gutter-x: 0px;
}
.subpanel {
    padding: 2.5rem;
    color: white;
    font-size: 0.8rem;
    text-align: left;
    z-index: 999;
}
.subpanel h1 {
    font-size: 3.5rem;
    font-weight: bold;
}
.subpanel h2 {
    font-size: 1.25rem;
    font-weight: bold;
}
.subpanel hr {
    width: 60px;
    border-top: 3px solid var(--rift-orange);
    opacity: 1;
}
.subpanel-centerline hr {
    margin-left: auto;
    margin-right: auto;
}
.subpanel img {
    padding-bottom: 2rem;
    width: 60px;
}
.subpanel-blue {
    background-color: var(--rift-blue);
}
.subpanel-orange {
    background-color: var(--rift-orange);
}
.subpanel-orange hr {
    border-top: 3px solid var(--rift-darkgrey);
}
.subpanel-grey {
    background-color: var(--rift-grey);
}
.subpanel-grey hr {
    border-top: 3px solid var(--rift-blue);
}




/**************************************************
    Client Panel styles

    These are used to style the client panel which
    has top white part and grey bottom with client logos.
**************************************************/
.clientpanel {
    background-color: white;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.clientpanel-logos {
    background-color: var(--rift-lightgrey);
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
.clientpanel-logos .col {
    text-align: center;
    white-space: nowrap;
}
.clientpanel-logos img {
    vertical-align: middle;
    max-width: 200px;
    max-height: 100px;
    margin: 10px;
}

/**************************************************
    Carousel Panel styles

    These are used to style the carousel panel which
    has white bckgrund with a grey square that shows differne text.
**************************************************/
.carouselpanel {
    background-image: url(/img/white_bg.png);
    background-repeat: no-repeat;
    padding-top: 4rem;
    padding-bottom: 5rem;
    text-align: center;
}
.carouselpanel .carousel {
    background-color: var(--rift-lightgrey);
    padding: 4rem;
    margin-left: 5rem;
    margin-right: 5rem;
    font-size: 1rem;
    line-height: 1.75rem;
    min-height: 240px;
}
@media (max-width: 575px) {
    .carouselpanel .carousel {
        margin-left: 0;
        margin-right: 0;
    }
}
.carousel-control-next, .carousel-control-prev {
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    opacity: 1;
}
.carousel-control-next i, .carousel-control-prev i {
    color: var(--rift-orange);
    font-size: 2rem;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--rift-darkgrey);
}
.carousel-indicators .active {
    background-color: var(--rift-orange);
}



/**************************************************
    Whitepaper Request Panel styles

    Shows a blue background panel with a form and image
**************************************************/
.whitepaperrequestpanel {
    background-color: var(--rift-blue);
    background-image: url(/img/blue_sm_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-right: 0rem;
    color: white;
}
.whitepaperrequestpanel .row {
    --bs-gutter-x: 0px;
}
.whitepaperrequestpanel img {
    max-height: 630px;
    max-width: 100%;
}
@media (max-width: 575px) {
    .whitepaperrequestpanel img {
        display: none;
    }
}
.whitepaperrequestpanel-form {
    padding-top: 2rem;
    padding-bottom: 4rem;
}
.whitepaperrequestpanel-form input[type="text"], .whitepaperrequestpanel-form input[type="email"] {
    max-width: 250px
}
.whitepaperrequestpanel-form hr {
    margin-left: 0px;
}
.whitepaperrequestpanel-form .header-bottomstripe {
    margin-bottom: 1.5rem;
}
.whitepaperrequestpanel-form button {
    margin-top: 1rem;
}



/**************************************************
    Accordian styles
**************************************************/
#accordianFAQ .accordion-item {
    border:none !important;
}

#accordianFAQ .accordion-button {
     color: inherit !important;
     background-color: white !important;
     box-shadow: none !important; 
}

#accordianFAQ .accordion-button {
    padding-bottom: 0;
}

#accordianFAQ .header-sidestripe {
    margin-bottom: 0;
}