html, body {
    font-family: 'Open Sans', sans-serif;
}

.infoPage {
    color: #FFFFFF;
    /*background-color: #151268;*/
}

.regularPage {
    color: #151268;
}

#textColorDark {
    color: #151268;
}

#textColorWhite {
    color: #FFFFFF;
}

html, body {
    background: #FFFFFF;
}

body {
    margin: 0px;
    font-family: Open Sans;
}

@media only screen and (min-width: 900px) {

    p {
    font-size: 16px;
    line-height: 24px;
    font-family: "Open Sans";
    }

    ol {
    font-size: 16px;
    line-height: 24px;
    font-family: "Open Sans";
    }

    h1 {
    font-size: 80px;
    line-height: 96px;
    font-weight: 400;
    }

    h2 {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 20px;
    margin-top: 0px;
    font-weight: 400;
    }

    h3 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 20px;
    margin-top: 0px;
    font-weight: 400;    
    }

}

@media only screen and (max-width: 900px) {

    p {
    font-size: 14px;
    /*line-height: 24px;*/
    font-family: "Open Sans";
    }

    ol {
    font-size: 14px;
    /*line-height: 24px;*/
    font-family: "Open Sans";
    }

    h1 {
    font-size: 36px;
    /*line-height: 96px;*/
    font-weight: 400;
    }

    h2 {
    font-size: 24px;
    /*line-height: 48px;*/
    margin-bottom: 20px;
    margin-top: 0px;
    font-weight: 400;
    }

    h3 {
    font-size: 16px;
    /*line-height: 36px;*/
    margin-bottom: 20px;
    margin-top: 0px;
    font-weight: 400;    
    }

}

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

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(21, 18, 104, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

#greyText {
    margin-top: 0px;
    color: rgba(21, 18, 104, 0.5);
    /*line-height: 24px;*/
}

#greyDarkText {
    margin-top: 0px;
    color: rgba(255, 255, 255, 0.5);
    /*line-height: 24px;*/
}

#greyTextSmall {
    color: rgba(21, 18, 104, 0.5);
}

.imageParent {
    overflow: hidden;
    border-radius: 4px;
    transform: translateZ(0);
}

.imageParent:hover .scalingImage,
.imageParent:focus .scalingImage {
    transform: scale(1.1);
}

.scalingImage {
    max-width: 100%;
    aspect-ratio: 19 / 9;
    background-size: cover;
    border-radius: 4px;
    image-rendering: -webkit-optimize-contrast;
    background-position: center center;
    transition: transform 3s;
}

.image {
    max-width: 100%;
    aspect-ratio: 19 / 9;
    background-size: cover;
    border-radius: 4px;
    image-rendering: -webkit-optimize-contrast;
    background-position: center center;
}

#floatRight {
    float: right;
}

.oneFr {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}


.twoFr {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

.twoFr_Intro {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

.twoFr_Index {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-gap: 20px;
}

.twoTwoFr {
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-gap: 20px;
}

.threeFr {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}

.fourFr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

.headerGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;    
}

.placeholderImg {
    background-color: #c4c4c4;
    height: 677px;
    border-radius: 4px; 
}

.siteImg {
    max-width: 100%;
    border-radius: 4px; 
}

.placeholderImgLow {
    background-color: rgba(21, 18, 104, 0.25);
    height: 335px;
    border-radius: 4px; 
}

.videoStyle {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.videoStyle iframe {
    pointer-events: none;
}

.threeFrInner {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

hr.yellow {
    border-top: 1px solid #DCDF72;  
}

.darkYellow {
    color: #7d884c;
}

.roundedButton {
    display: flex;
    border: 1px solid rgba(51, 51, 51, 0.25);
    height: 40px;
    padding-left: 16px;
    margin-bottom: 16px;
    transition: all .3s;
}

.roundedButton.white {
    background: #fff;
    border: 1px solid #fff;
}

.roundedButton.white:hover {
    background: #fff;
    border: 1px solid #fff;
}


.roundedButtonBlack {
    display: flex;
    border: 1px solid rgba(51, 51, 51, 1);
    height: 40px;
    padding-left: 16px;
    margin-bottom: 16px;
    transition: all .3s;
}

.roundedButtonBlack p {
    color: black;
}

.roundedButtonBlack:hover .buttonArrow,
.roundedButtonBlack:focus .buttonArrow {
    transform: translateX(8px);
}

.roundedButtonBlack:hover {
    border: 1px solid rgba(51, 51, 51, 1);
}


.roundedButton.black {
    background: #151268;
    border: 1px solid #151268;
}

.roundedButton.black:hover {
    background: #151268;
    border: 1px solid #151268;
}


.roundedButtonBlack {
    display: flex;
    border: 1px solid rgba(51, 51, 51, 1);
    height: 40px;
    padding-left: 16px;
    margin-bottom: 16px;
    transition: all .3s;
}

.roundedButtonWhite p {
    color: white;
}

.roundedButtonWhite:hover .buttonArrow,
.roundedButtonWhite:focus .buttonArrow {
    transform: translateX(8px);
}

.roundedButtonWhite:hover {
    border: 1px solid rgba(255, 255, 255, 1);
}



.roundedButton:hover .buttonArrow,
.roundedButton:focus .buttonArrow {
    transform: translateX(8px);
}

.roundedButton:hover {
    border: 1px solid #151268;
}

.headerLink {
    color: rgba(21, 18, 104, 1);
    transition: all .3s;
    white-space: nowrap;
}

.headerLink:hover {
    color: rgba(21, 18, 104, 0.25);
}

.headerLinkInfo {
    color: rgba(255, 255, 255, 1);
    transition: all .3s;
}

.headerLinkInfo:hover {
    color: rgba(255, 255, 255, 0.5);
}

.imageButton {
    display: block;
    border-style: none;
}

button {
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(21, 18, 104, 0);
    box-sizing: border-box;
    border-radius: 20px;
    text-align: left;
    padding: 0px;
}

@media only screen and (max-width: 600px) {

    .buttonText {
    font-size: 14px;
    /*line-height: 24px;*/
    color: #151268;
    left: 16px;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
    }

    .buttonTextWhite {
    font-size: 14px;
    /*line-height: 24px;*/
    color: #FFFFFF;
    left: 16px;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
    }
}

.buttonArrow {
    width: 12px;
    margin-right: 18px;
    transition: all .3s;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
}

.imageButton:hover .buttonArrowImageDiv {
    transform: translateX(12px);
}

.buttonArrowImageDiv {
    width: 12px;
    margin-top: 12px;
    margin-right: 12px;
    float: right;
    transition: all .3s;
}

.buttonArrowBreadcrumb {
    width: 12px;
    margin-right: 12px;
    align-self: center;
    float: left;
    transition: all .3s;
}

.buttonImageParent {
    overflow: hidden;
    border-radius: 4px;
    transform: translateZ(0);
}

.buttonImageParent:hover .buttonImageDiv,
.buttonImageParent:focus .buttonImageDiv {
    transform: scale(1.1);
}

.buttonImageDiv {
    background-size: cover;
    image-rendering: -webkit-optimize-contrast;
    background-position: center center;
    width: 100%;
    aspect-ratio: 19 / 9;
    border-radius: 4px;
    transition: 3s;
}

.otherCasesDiv {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
    padding-left: 20px; 
    padding-right: 20px;
    padding-top: 40px;   
}

@media only screen and (min-width: 600px) {

    .buttonText {
    font-size: 16px;
    line-height: 24px;
    color: #151268;
    left: 16px;
    float: left;
    margin-top: 7px;
    }

    .buttonTextWhite {
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    left: 16px;
    float: left;
    margin-top: 7px;
    }

    .otherCasesDiv {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
    padding-left: 40px; 
    padding-right: 40px;
    padding-top: 80px;   
    }

}

@media only screen and (max-width: 600px) {
    .colorDiv {
    position: static;
    padding: 0px 20px 0px 20px;
    }
}

@media only screen and (min-width: 600px) {
    .colorDiv {
    position: static;
    padding: 0px 40px 0px 40px;
    }
}

.headerDiv {
    z-index: 1;
    width: 100%;
    position: fixed;
}

.headerDivInside {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    width: 100%;
}

.footerDiv {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
    padding: 46px 0px 20px 0px;
}

.footerDiv button {
    margin-bottom: 0px;
}

.footerDiv h2 {
    margin: 0px;
}

.breadcrumb {
    display: flex;
    height: 40px;
    padding: 35px 40px 40px 0px;
}

.breadcrumb p {
align-self: center;
margin: 0;
}

@media only screen and (min-width: 600px) {

    .spaceTinyTiny {
    display: block;
    width: 100%;
    height: 5px;    
    }

    .spaceTiny {
    display: block;
    width: 100%;
    height: 20px;
    }

    .spaceSmall {
    display: block;
    width: 100%;
    height: 40px;
    }

    .spaceMedium {
    display: block;
    width: 100%;
    height: 80px;
    }

    .spaceBig {
    display: block;
    width: 100%;
    height: 160px;
    }

    .spaceHeader {
    display: block;
    width: 100%;
    height: 58px;
    }
}

@media only screen and (max-width: 600px) {

    .spaceTinyTiny {
    display: block;
    width: 100%;
    height: 5px;    
    }

    .spaceTiny {
    display: block;
    width: 100%;
    height: 10px;
    }

    .spaceSmall {
    display: block;
    width: 100%;
    height: 20px;
    }

    .spaceMedium {
    display: block;
    width: 100%;
    height: 40px;
    }

    .spaceBig {
    display: block;
    width: 100%;
    height: 60px;
    }

    .spaceHeader {
    display: block;
    width: 100%;
    height: 58px;
    }
}

#colorWhite {
    background-color: #FFFFFF;
}

#colorAmexCarbon {
    background-color: #E0E0E0;
}

#colorPAMM {
    background-color: #FEFFE5;
}

#colorRudolphCare {
    background-color: #FFF2F9;
}

#colorCreativeDenmark {
    background-color: #E7F9FF;
}

#colorMosMosh {
    background-color: #FEF1DF;
}

#colorClever {
    background-color: #DCEADE;
}

#colorDarkGrey {
    background-color: #151268;
}

@media (max-width: 992px) {

    .buttonImageDiv {
        aspect-ratio: 1 / 1;
    }

    .twoFr {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-gap: 60px;*/
    }

    .fourFr {
        display: grid;
        grid-template-columns: 2fr 2fr;
        grid-gap: 60px;
    }   

    .twoTwoFr {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 60px;
    }

    .threeFr { 
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 60px;
    }

    .threeFrInner {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 60px;
    }

    .otherCasesDiv {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-gap: 60px;*/
    }

    .otherCasesMobile {
        display: grid;
        grid-template-columns: 2fr 2fr;
        grid-gap: 20px;
    }

    .headerDivInside {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 60px;
    }

    .footerDiv {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-gap: 60px;*/
        padding-bottom: 80px;
    }

    .headerGrid p {
        /*font-size: 18px;*/
        white-space: nowrap;
    }

/*    .buttonText {
        margin-top: 30px;
        margin-left: 15px;
        font-size: 30px;
    }*/

    .roundedButton {
        height: 40px;
        display: flex;
        width: 100%;
    }

    .roundedButton.white { background: #FFFFFF; border: 1px solid #FFFFFF; }

    .roundedButton.black { background: #151268; border: 1px solid #151268; }


    .buttonArrow {
        width: 12px;
        margin-right: 14px;
        margin-top: 0px;
    }

    .buttonArrowImageDiv {
        width: 12px;
        margin-top: 12px;
    }

    button {
        border-radius: 20px;
    }

    .scalingImage {
        aspect-ratio: 1 / 1;
    }

    .image {
        max-width: 100%;
        aspect-ratio: 1 / 1;
        background-size: cover;
        border-radius: 4px;
        image-rendering: -webkit-optimize-contrast;
        background-position: center center;
    }

    #hideOnMobile {
        display: none;
    }

}

@media (min-width: 992px) {
    #showOnMobile {
        display: none;
    }
}

.progress-bar {
    height: 2px;
    background: #FFFFFF;
}

.progress-bar__inner {
    background: #151268;
    width: 0%;
    height: 100%;
}


.cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: exclusion;
}

@media (hover: none) {
    .cursor-container {
        display: none;
    }
}

 /* Optional: Add styles for the iframe */
.axure-iframe {
        width: 100%;
        height: 800px; /* Adjust height as needed */
            border: none;
}

.cursor {
    position: absolute;
    z-index: 10;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
}

.cursor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 999em;
    background: #fff;
    transition: transform 0.3s;
    transform: scale(0.5)
}

.cursor--initial::before {
    transform: scale(0);
}

.cursor--active::before {
    transform: scale(1);
}

*  {
    cursor: none;
}

/*#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}*/

/*video::-webkit-media-controls {
    display:none !important;
}*/