@font-face {
    font-family: 'CharterITCW05';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('fonts/CharterITCW05-Regular.eot');
    src: url('fonts/CharterITCW05-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/CharterITCW05-Regular.woff2') format('woff2'),
        url('fonts/CharterITCW05-Regular.woff') format('woff'),
        url('fonts/CharterITCW05-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Helvetica Neue';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('fonts/HelveticaNeueLTPro-Roman.eot');
    src: url('fonts/HelveticaNeueLTPro-Roman.eot?#iefix') format('embedded-opentype'),
        url('fonts/HelveticaNeueLTPro-Roman.woff2') format('woff2'),
        url('fonts/HelveticaNeueLTPro-Roman.woff') format('woff'),
        url('fonts/HelveticaNeueLTPro-Roman.ttf') format('truetype');
}

@font-face {
    font-family: 'Helvetica Neue';
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url('fonts/HelveticaNeueLTPro-Bd.eot');
    src: url('fonts/HelveticaNeueLTPro-Bd.eot?#iefix') format('embedded-opentype'),
        url('fonts/HelveticaNeueLTPro-Bd.woff2') format('woff2'),
        url('fonts/HelveticaNeueLTPro-Bd.woff') format('woff'),
        url('fonts/HelveticaNeueLTPro-Bd.ttf') format('truetype');
}

@font-face {
    font-family: PWCRegular;
    src: url('fonts/PWC.otf');
}


:root {
    --black: #000000;
    --white: #ffffff;

    --darkGrey: #2D2D2D;
    --lightGrey: #525252;
    --lighterGrey: #7D7D7D;

    --yellow: #FFB600;
    --orange: #EB8C00;
    --amber: #D04A02;
    --magenta: #D93954;
    --red: #E0301E;

    --transition: .2s ease-in-out;

    --fontSerif: 'CharterITCW05';
    --fontSans: 'Helvetica Neue';

    --swiper-navigation-sides-offset: 25px;
    --swiper-theme-color: #2D2D2D;
    --swiper-navigation-size: 30px
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fontSerif);
    color: var(--white);
}

button,
a {
    cursor: pointer !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  * {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }


/******************** Login *******************/

.bg-black {
    background-color: var(--black);
}

.login *,
.login button {
    font-family: var(--fontSans);
}


/******************** Main *******************/

main {
    min-height: 100vh;
}

.bg1 {
    background-color: var(--black);
    background-image: url('../img/bg.svg');
    background-size: contain;
    padding: 100px;
    box-sizing: border-box;
}

.bg2 {
    position: absolute;
    background-image: url('../img/bg.svg');
    background-size: contain;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
}

.bg3 {
    position: absolute;
    background-color: var(--darkGrey);
    width: 100%;
    height: 100%;
}

.logo {
    width: 130px;
    margin-bottom: 50px;
}

.mainTitle {
    font-size: 85px;
    font-weight: 400;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

.mainTitle .edit {
    position: absolute;
    display: block;
    font-size: 0;
    top: -5px;
    left: calc(100% + 5px);
}

.mainTitle .edit svg {
    width: 25px; 
}

.signageQueueHeader {
    font-size: 40px;
    margin: 50px 0;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
}

.signageQueueHeader .queueDuration {
    color: var(--white)
}

.tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;

}

.tool {
    width: 100%;
    border: 2px solid var(--white);
    aspect-ratio: 1 / 1;
    font-size: 25px;
    line-height: 27px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: var(--black);
    transition: var(--transition);
    color: inherit;
    text-decoration: none;
    position: relative;
}

/* .tool:hover {
    color: var(--black);
    background-color: var(--white);

} */

.tool .toolHeader {
    display: flex;
    justify-content: space-between;
}

.tool .toolHeader .titleText{
    padding-right: 20px;
}

.tool .toolHeader svg{
    width: 25px;
}

.toolHeader .edit {
    z-index: 1;
}

.tool .title {
    color: var(--white);
    text-decoration: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 25px;
    box-sizing: border-box;
}

/* .tool:hover .title {
    color: var(--black);
    text-decoration: none;
} */

.tool .actions {
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 25px;
    pointer-events: none;
}

.tool .actions a {
    pointer-events: all;
}

.tool .actions svg {
    display: block;
    height: 25px;
}

.tool .actions svg path,
.tool svg text {
    transition: var(--transition);
    fill: var(--white)
}

.tool .actions .settings path {
    fill: none;
}

.tool .actions .settings circle {
    stroke: var(--white);
}


/* .tool:hover .actions svg path,
.tool:hover svg text {
    fill: var(--black)
} */

/* .tool:hover .actions .settings path {
    fill: none;
    stroke: var(--black);
} */

/* .tool:hover .actions .settings circle {
    stroke: var(--black);
} */


.tool .add {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool .add {
    font-size: 85px;

}

.tool .btnCheck,
.tool .btnLeft,
.tool .btnRight {
    z-index: 1;
    pointer-events: all;
}

.tool:not(.inQueue) .btnLeft,
.tool:not(.inQueue) .btnRight,
.tool:not(.inQueue) .btnCheck.checked,
.tool.inQueue .btnCheck.unchecked {
    display: none;
}

.tool.addBtn {
    order: 999999;
}

.settings .mainTitle.hidden {
    display: none;
}

.settings .mainTitleInput {
    font-size: 85px;
    translate: -26px -24px;
    margin-bottom: 0;
    line-height: 1.77em;
    width: calc(100% + 26px);
}

.settings .mainTitleInput.hidden {
    display: none;
}

.settings label {
    font-family: var(--fontSans);
    font-weight: 400;
    font-size: 20px;
    color: #CFCFCF;
    margin-bottom: 25px;
    display: block;
}

.settings .top {
    display: flex;
    gap: 100px;
    margin-bottom: 50px;
}

.settings .layouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.settings .layout {
    display: block;
    cursor: pointer;
}

.settings .layout svg {
    display: block;
    width: 100%;
}

.settings .layout svg .fill {
    fill: var(--white);
    transition: var(--transition);
}

.settings .layout svg .stroke {
    stroke: var(--white);
    transition: var(--transition);
}

.settings .layout.active svg .fill {
    fill: var(--yellow)
}

.settings .layout.active svg .stroke {
    stroke: var(--yellow)
}

.settings .colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.settings .color {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--white);
    transition: var(--transition);
    cursor: pointer;
}

.settings .color[data-color="9"] {
    border-color: #7D7D7D;
}

.settings .color.active {
    width: 37px;
    height: 37px;
    border-width: 6px;
}

.settings .bottom {
    display: flex;
    flex-direction: column;
}

.settings input,
.settings textarea,
.settings select {
    all: unset;
    width: 100%;
    border: 2px solid var(--white);
    font-family: inherit;
    padding: 0 25px;
    font-size: 30px;
    margin-bottom: 50px;
    box-sizing: border-box;
    background: var(--black);
    line-height: 2em;
}

.settings input.error,
.settings textarea.error,
.settings select.error {
    border-color: #E0301E;
}

.settings .select {
    margin-bottom: 50px;
    position: relative;
}

.settings .select select {
    margin-bottom: 0;
}

.settings option:checked,
.settings option::selection,
.settings option:hover {
    background-color: var(--yellow) !important;
    box-shadow: 0 0 10px 100px var(--yellow) inset !important;
    color: var(--black) !important
}

.settings .select svg {
    position: absolute;
    top: 50%;
    right: 25px;
    translate: 0 -50%;
    pointer-events: none;
}

.settings .bottom textarea {
    height: auto;
    padding: 10px 25px;
}

.settings .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings button,
.settings .cancel {
    all: unset;
    background: var(--yellow);
    color: var(--black);
    padding: 22px 35px 18px 35px;
    font-family: var(--fontSans);
    align-self: flex-end;
    font-weight: 600;
}

.settings .cancel {
    background: var(--black);
    border: 2px solid var(--yellow);
    color: var(--yellow)
}

.layout2 .mediaInput {
    display: none;
}

.layout3 .colorInput,
.layout3 .headlineInput,
.layout3 .contentInput {
    display: none;
}

.headlineInput.hidden {
    display: none;
}


.signLayout {
    height: 100vh;
}

.signLayout .goToMain{
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 999;
}

.signLayout .goToMain .icon{
    margin-bottom: 10px;
    display: block;
}

.signLayout .goToMain .link{
    position: fixed;
    top:calc(50% + 20px);
    right:30px;
    width: 85px;
    text-align: center;
    font-family: var(--fontSans);
}

.signLayout .goToMain .label{
    font-family: var(--fontSans);
    line-height: 1em;
    /* text-shadow: 0 6px 10px rgba(0,0,0,0.5); */
}

.signLayout .top {
    height: 50%;
}

.signLayout .layoutDeco {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.signLayout .top img,
.signLayout .top video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.signLayout .bottom {
    height: 50%;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.signLayout.noImage .bottom {
    height: 100%;
    padding-top: 200px;
}

.signLayout.fullImage video,
.signLayout.fullImage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.signLayout .headline {
    font-size: 80px;
    line-height: 85px;
    margin-bottom: 50px;
}

.signLayout .content {
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 50px;
    font-family: var(--fontSans);
}

.signLayout .tagLine {
    font-family: var(--fontSans);
    font-weight: 600;
    font-size: 26px;
    color: var(--yellow);
}

.signLayout .subLine {
    font-family: var(--fontSans);
    font-size: 16px;
}

.footerLogo {
    position: absolute;
    width: 80px;
    height: 60px;
    bottom: 2.5rem;
    right: 2.5rem;
}


.downloadImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--black);
    margin-bottom: 5px;
}

.shares {
    display: flex;
    gap: 5px;
}

.share {
    all: unset;
    width: 50px;
    height: 50px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.share.dialog {
    background: #EB8C00
}

.share img {
    width: 100%;
    height: 100%;
    display: block;
    width: 50%;
    height: 50%;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    border: 0;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--white);
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    translate: 0 -100%;

    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid var(--white);

    /*custom styles*/
    height: 2rem;
    width: 1px !important;

}

input[type="range"]:focus::-webkit-slider-thumb {}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: var(--white);
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    translate: 0 -100%;
    all: unset;

    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid var(--white);

    /*custom styles*/
    height: 3rem;
    width: 0;
}

input[type="range"]:focus::-moz-range-thumb {}

.cameraSettingsInput {
    margin-bottom: 50px;
}

.cameraSettings label {
    margin-bottom: 50px;
}

.cameraSettings .values {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
}

.cameraSettings .values span {
    width: 20px;
    text-align: center;
}

.cameraSettings .settings .colors,
.cameraSettings .settings .symbols {
    display: flex
}

.multislider .range-slider__rail {
    border: 2px solid var(--white);
    translate: 0 calc(100% + 10px);
}

.symbolMultislider .range-slider__rail {
    translate: 0 calc(100% + 20px);
}

.range-slider__point {
    border: 2px solid var(--white);
    clip-path: polygon(50% 100%, 0 40%, 100% 40%);
    border: none;

}

.symbolColorMultislider .range-slider__point:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(50deg, transparent 0%, transparent 45%, white 46%, white 50%, transparent 51%) -8px 5px / 40px 40px,
        linear-gradient(0deg, transparent 0%, transparent 45%, white 46%, white 50%, transparent 51%) -8px -8px / 40px 40px,
        linear-gradient(-50deg, transparent 0%, transparent 45%, white 46%, white 50%, transparent 51%) -2px 5px / 40px 40px;

}


.symbolMultislider .range-slider__point {
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 70% !important;
    clip-path: none;
    border: none;

}

.symbolMultislider .range-slider__point:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--white);
    height: 3rem;
    width: 0;

}

.multislider .range-slider__tooltip {
    display: none;
}


.symbolColorInput label,
.symbolInput label {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 40px;
}

.symbolInput label {
    margin-bottom: 30px;
}

.symbolColorInput label .add,
.symbolInput label .add {
    font-weight: 600;
    font-size: 40px;
    height: 0;
    display: block;
    line-height: 25px;
}

.cameraSettings .colorSelector,
.cameraSettings .symbolSelector {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 20px;
    background: var(--white);
    top: 30px;
    right: 20px;
    z-index: 1;
}



.cameraSettings .symbolSelector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    font-size: 30px;
    font-family: 'PWCRegular';
    color: var(--black);
}

.cameraSettings .colorSelector.hidden,
.cameraSettings .symbolSelector.hidden {
    display: none;
}

.cameraSettings .symbolSelector .symbol {
    width: 30px;
    text-align: center;
}


.jobs .mainTitle {
    display: flex;
    align-items: center;
}

.jobs .mainTitle a {
    display: flex;
    align-items: center;
    margin-right: 25px
}

.jobs .titleText {
    word-break: break-word;
    font-size: 25px
}

.jobs .tool {
    aspect-ratio: 1 / 1.2;
}

.infoScreen .infoScreenWrapper {
    display: flex;
    flex-direction: column;
    height: 100%
}

.infoScreen .hero {
    background-size: cover;
    background-position: center;
    padding-bottom: 50px;
    position: relative;
}

.infoScreen .header01 {
    background-image: url('../img/headers/header01.jpg');
    background-size: cover;
}

.infoScreen .header02 {
    background-image: url('../img/headers/header02.jpg');
    background-size: cover;
    background-position: center 25%;
}

.infoScreen .header03 {
    background-image: url('../img/headers/header03.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header04 {
    background-image: url('../img/headers/header04.jpg');
    background-size: cover;
    background-position: center 65%;
}

.infoScreen .header05 {
    background-image: url('../img/headers/header05.jpg');
    background-size: cover;
    background-position: center 35%;
}

.infoScreen .header06 {
    background-image: url('../img/headers/header06.jpg');
    background-size: cover;
    background-position: center 30%;
}

.infoScreen .header07 {
    background-image: url('../img/headers/header07.jpg');
    background-size: cover;
    background-position: center 35%;
}

.infoScreen .header08 {
    background-image: url('../img/headers/header08.jpg');
    background-size: cover;
    background-position: center 35%;
}

.infoScreen .header09 {
    background-image: url('../img/headers/header09.jpg');
    background-size: cover;
    background-position: center 35%;
}

.infoScreen .header10 {
    background-image: url('../img/headers/header10.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header11 {
    background-image: url('../img/headers/header11.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header12 {
    background-image: url('../img/headers/header12.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header13 {
    background-image: url('../img/headers/header13.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header14 {
    background-image: url('../img/headers/header14.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header15 {
    background-image: url('../img/headers/header15.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header16 {
    background-image: url('../img/headers/header16.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header17 {
    background-image: url('../img/headers/header17.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header18 {
    background-image: url('../img/headers/header18.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header19 {
    background-image: url('../img/headers/header19.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header20 {
    background-image: url('../img/headers/header20.jpg');
    background-size: cover;
    background-position: center 50%;
}

.infoScreen .header21 {
    background-image: url('../img/headers/header21.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header22 {
    background-image: url('../img/headers/header22.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header23 {
    background-image: url('../img/headers/header23.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header24 {
    background-image: url('../img/headers/header24.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header25 {
    background-image: url('../img/headers/header25.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header26 {
    background-image: url('../img/headers/header26.jpg');
    background-size: cover;
    background-position: center 40%;
}
.infoScreen .header27 {
    background-image: url('../img/headers/header27.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header28 {
    background-image: url('../img/headers/header28.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header29 {
    background-image: url('../img/headers/header29.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header30 {
    background-image: url('../img/headers/header30.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header31 {
    background-image: url('../img/headers/header31.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header32 {
    background-image: url('../img/headers/header32.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header33 {
    background-image: url('../img/headers/header33.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header34 {
    background-image: url('../img/headers/header34.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header35 {
    background-image: url('../img/headers/header35.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header36 {
    background-image: url('../img/headers/header36.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header37 {
    background-image: url('../img/headers/header37.jpg');
    background-size: cover;
    background-position: center 50%;
}
.infoScreen .header38 {
    background-image: url('../img/headers/header38.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header39 {
    background-image: url('../img/headers/header39.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header40 {
    background-image: url('../img/headers/header40.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header41 {
    background-image: url('../img/headers/header41.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header42 {
    background-image: url('../img/headers/header42.jpg');
    background-size: cover;
    background-position: center 65%;
}
.infoScreen .header43 {
    background-image: url('../img/headers/header43.jpg');
    background-size: cover;
    background-position: center 65%;
}


.infoScreen .hero .headerDeco {
    width: 100%;
}

.infoScreen .hero .backToMain {
    padding: 0 15px;
    background-color: var(--darkGrey);
    display: inline-flex;
    align-items: center;
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    font-family: var(--fontSans);
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 10px;
}

.infoScreen .hero .backToMain img {
    display: block; 
    width: 30px;
    margin-right: 15px;
}

.infoScreen .hero .backToMain .label {
    font-family: var(--fontSans);
    translate: 0 3px;

}

/* .infoScreen .tabs{
    display:flex;
    width: 83%;

}

.infoScreen .tab{
    flex-grow: 1;
    width: 100%;
    display: block;
    color: var(--white);
    text-decoration: none;
    font-size: 20px;
    font-family: var(--fontSans);
    font-weight: 600;
    text-align: right;
    padding: 15px 25px;
}

.infoScreen .tab.magenta{
    background-color: var(--magenta);
}
.infoScreen .tab.orange{
    background-color: var(--orange);
    color: var(--darkGrey)
}

.infoScreen .tab.darkGrey{
    background-color: var(--darkGrey);
}

.infoScreen .tab.lightGrey{
    background-color: var(--lightGrey);
} */

.infoScreen .content {
    background-color: var(--magenta);
    display: grid;
    flex-grow: 1;
    grid-template-columns: [wide-start] 50px [normal-start] 1fr [normal-end] 50px [wide-end];
    grid-template-rows: 30px [wide-start normal-start] min-content 1fr min-content [wide-end wide-end] 50px;

}

.infoScreen.main .content {
    background-color: var(--darkGrey);
    color: var(--white)
}

.infoScreen.upcomingCareerEvents .content {
    background-color: var(--white);
    color: var(--darkGrey)
}

.infoScreen.assurance .content {
    background-color: var(--magenta);
    color: var(--white)
}

.infoScreen.taxLegal .content {
    background-color: var(--orange);
    color: var(--black)
}

.infoScreen.advisory .content {
    background-color: var(--amber);
    color: var(--white)
}

.infoScreen.openPositions .content {
    background-color: var(--white);
    color: var(--black)
}

.infoScreen.virtualCaseExperience .content {
    background-color: var(--amber);
    color: var(--white)
}

.infoScreen.solversQuiz .content {
    background-color: var(--yellow);
    color: var(--black)
}

.infoScreen.pwcSelfie .content {
    background-color: var(--darkGrey);
    color: var(--white)
}

.infoScreen.apply .content {
    background-color: var(--orange);
    color: var(--black)
}

.infoScreen.camera .content {
    background-color: var(--lightGrey);
}

.infoScreen .content .header {
    grid-area: normal;
    grid-row: 2;
    margin-bottom: 30px;
}

.infoScreen .content .header:has(.subtitle) {
    margin-bottom: 25px;
}

.infoScreen .content .title {
    font-size: 40px;
    line-height: 42px;
}

.infoScreen .content .subtitle {
    font-family: var(--fontSans);
    font-weight: 400;
    font-size: 20px;
    margin-top: 10px;
}

.infoScreen .wrapper {
    grid-area: wide;
    grid-row: 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: min-content auto;
}

.infoScreen .content .text {
    font-family: var(--fontSans);
    font-weight: 400;
    font-size: 8px;
    line-height: 10px;
    margin: 30px 0;
}

.infoScreen.openPositions .content .text {
    margin: 0 0 40px 0;
}

.infoScreen .content .title2 {
    font-size: 25px;
    line-height: 27px;
    margin-bottom: 25px;
}

.infoScreen .camera{
    grid-column: normal;
}

.infoScreen .carousel {
    grid-column: wide;
    margin-bottom: 50px;
}

.infoScreen .swiper-button-next,
.infoScreen .swiper-button-prev {
    background-color: var(--white);
    border-radius: 50%;
    height: 40px;
    aspect-ratio: 1 / 1;
    width: auto;
    padding: 10px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.infoScreen .swiper-button-next::after,
.infoScreen .swiper-button-prev::after {
    content: '';
   color:var(--white);
   background-image: url('../img/angle.svg');
   width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.infoScreen .swiper-button-prev::after {
    rotate: 180deg;
}

.infoScreen .swiper-slide {
    background-color: var(--orange);
    transition: all .2s;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 5px;
    height: auto !important;
    display: flex;
    flex-direction: column;
    /* width: calc( calc( calc(100% - 100px) / 3) - 10px); */
}

.infoScreen .swiper-slide.hidden{
    opacity:0;
}

.infoScreen .swiper-slide:not(.swiper-slide-fully-visible) {
    opacity: 0.5
}

.infoScreen .swiper-slide .slideContent {
    flex-grow: 1
}

.infoScreen .swiper-slide .date {
    display: flex;
    font-family: var(--fontSans);
    align-items: flex-end;
    margin-bottom: 15px;
}

.infoScreen .swiper-slide .date .icon {
    margin-right: 10px;
}

.infoScreen .swiper-slide .date .icon svg {
    width: 15px;
    height: 15px;
}

.infoScreen .swiper-slide .date .label {
    font-size: 10px;
    line-height: 10px;
    font-family: var(--fontSans);

}

.infoScreen .swiper-slide .image {
    height: 100px;
    margin-bottom: 15px;
}

.infoScreen .swiper-slide .title {
    font-size: 20px;
    line-height: 22px;
    margin: 0;
    margin-bottom: 25px;
}

.infoScreen.taxLegal .swiper-slide .title,
.infoScreen.advisory .swiper-slide .title,
.infoScreen.openPositions .swiper-slide .title   {
    font-size: 18px;
    margin: 0;
    min-height: 60px
}

.infoScreen.openPositions .swiper-slide .title {
    margin-bottom: 25px;
}

.infoScreen .swiper-slide .slideFooter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.infoScreen .swiper-slide .qr {
    width: 30px;
    height: 30px;
}

.infoScreen .qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.infoScreen .swiper-slide .location {
    display: flex;
    font-family: var(--fontSans);
    /* align-items: flex-end; */
}

.infoScreen .swiper-slide .location .label {
    margin-right: 5px;
    font-size: 8px;
    font-family: var(--fontSans);

}


.infoScreen .swiper-slide .location .icon svg {
   width: 10px;
   height: 10px;

}

.infoScreen .swiper-slide .label {
    margin-right: 10px;
}



.infoScreen .infoText {
    font-family: var(--fontSans);
    text-align: left;
    grid-area: normal;
    grid-row: 2;
}

.infoScreen.camera .infoText {
    width: 500px;
}

.infoScreen .bottomSection{
    grid-area: normal;
    grid-row: 2;
}

.infoScreen .meetTeams{
    display:flex;
    gap: 10px;
    margin-bottom: 50px;
}

.infoScreen .meetTeam{
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
border-radius: 5px;
position: relative;
background-position: center;
}


.infoScreen .meetTeam.team01{
    background-image: url('../img/team/team01.jpg');
}

.infoScreen .meetTeam.team02{
    background-image: url('../img/team/team02.jpg');
}

.infoScreen .meetTeam.team03{
    background-image: url('../img/team/team03.jpg');
}

.infoScreen .meetTeam.team04{
    background-image: url('../img/team/team04.jpg');
}
.infoScreen .meetTeam .qr{
    width: 40px;
    height: 40px;
    padding: 5px;
    /* border-radius: 5px; */
    background: var(--white);
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.infoScreen .meetTeamsCta{
    display:flex;
    align-items: center;
    font-family: var(--fontSans);
}

.infoScreen .meetTeamsCta .qr{
    width: 45px;
    height: 45px;
   margin-right: 25px;
}

.infoScreen .meetTeamsCta .label{
    font-family: var(--fontSans);
    font-size: 12px;
}

.infoScreen.virtualCaseExperience .meetTeamsCta .label{
    font-family: var(--fontSans);
    font-size: 12px;
    line-height: 14px;
}

.infoScreen .footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    grid-area: normal;
    grid-row: 4
}

.infoScreen .tagLine {
    font-family: var(--fontSans);
    font-weight: 600;
    font-size: 20px;
    color: inherit;
}

/* .infoScreen.apply .tagLine{
    color: var(--black);
} */

.infoScreen .subLine {
    font-family: var(--fontSans);
    font-size: 16px;
}




.infoScreen .footerLogo {
    position: relative;
    bottom: 0;
    right: 0;
    /* margin-bottom: 20px */
}


.infoScreen .menuItems {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 50px;
    grid-area: normal;
    grid-row: 1
}

.infoScreen .menuItem {
    /* background-color: var(--yellow); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: 18px;
    padding: 25px;
    padding-top: 45px;
    line-height: 20px;
    box-sizing: border-box;
    /* background-color: var(--orange); */
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
}

.infoScreen .menuItem svg{
width: 50px;
height: 50px;
}

.infoScreen .color1 {
    background-color: var(--magenta);
    color: var(--white)
}

.infoScreen .color2 {
    background-color: var(--orange);
    color: var(--darkGrey)
}

.infoScreen .color3 {
    background-color: var(--amber);
    color: var(--white)
}

.infoScreen .color4 {
    background-color: var(--white);
    color: var(--darkGrey)
}

.infoScreen .color5 {
    background-color: var(--yellow);
    color: var(--darkGrey)
}

.infoScreen .color6 {
    background-color: var(--red);
    color: var(--white)
}

.infoScreen .color7 {
    background-color: var(--darkGrey);
    color: var(--white)
}

.infoScreen .color8 {
    background-color: var(--black);
    color: var(--white)
}

.infoScreen .color9 {
    background-color: var(--lighterGrey);
    color: var(--white)
}

.infoScreen .menuItem .label {
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.infoScreen .quizLink{
    grid-area: normal;
    grid-row: 1;
    display: flex;
    gap: 10px;
    margin-bottom: 50px;
}

.infoScreen .quizLink .label{
  flex-grow: 1;
  display:flex;
  align-items: center;
  padding: 50px;
  font-size: 19px;
  line-height: 23px;
  font-family: var(--fontSans);
  border-radius: 3px;
  box-sizing: border-box;
}

.infoScreen .quizLink .label .labelText{

    font-family: var(--fontSans);
  }

  .infoScreen .quizLink .label .labelText strong{

    font-family: var(--fontSans);
  }

.infoScreen .quizLink .qr{
    width: 200px;
    height: 200px;
   padding: 25px;
   padding-bottom: 10px;
   font-size: 25px;
   font-family: var(--fontSans);
   position: relative;
   border-radius: 3px;
   box-sizing: border-box;

}

.infoScreen .quizLink .qr svg{
    padding: 0 5px 30px 5px

}

.infoScreen .quizLink .qrLabel{

  position: absolute;
  bottom: 10px;
  left:0;
  font-size: 18px;
  line-height: 20px;
  width: 100%;
  text-align: center;
   font-family: var(--fontSans);

}

.infoScreen .cases {
    display: grid;
    grid-area: normal;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 50px;
}

.infoScreen .case {
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    /* color: var(--black); */
    padding: 20px;
}

.infoScreen .case .title{
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
}

.infoScreen .case .caseImage {
width: 100%;
height: 50px;
object-fit: cover;
object-position: center;
display: block;
margin-bottom: 15px;
}


.infoScreen .case .qr {
    display: flex;
    gap: 10px;
    align-items: center;
    pointer-events: none;
    transition: var(--transition);
    box-sizing: border-box;
}



.infoScreen .case .qr svg {
    display: block;
    width: 30px;
}

.infoScreen .case .qr .label {
  font-size: 8px;
  line-height: 9px;
  font-family: var(--fontSans);

}

@media (max-width: 756px) {
    .bg1 {
        padding: 20px;
    }

    .mainTitle {
        font-size: 50px;
        margin-bottom: 25px;

    }

    .logo {
        width: 60px;
        margin-bottom: 25px;
    }

    .logo img {
        display: block;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .mainTitle {
        font-size: 30px;
        margin-bottom: 25px;

    }
}


/* canvas{
    position: absolute;
    top:0;
    left:0;
    width: 720px;
    height: 720px;
} */