.clBrand {
    color: #b80826;
}

.bgWFWCT {
    background-color: #b80826;
}
.mrgN15 {
    margin-right: -15px;
}

#wfwct {
    background-image: url(../imgResources/wfwct.jpg);
}

.wfwct .bgInnitial {
    background-color: black;
}

.wfwct .bgInnitial:before {
    background-image: url(../img/wfwct.jpg);
    opacity: 0.06;
}

#UXprocess {
    background-color: #171717;
}

.iconTime {
    background-image: url(../img/iconCalendarGray.svg);
}

.iconScreen {
    background-image: url(../img/iconScreenGray.svg);
}

.iconPartcipant {
    background-image: url(../img/iconPartcipant.svg);
}

.colorWFWCT {
    color: #b80826;
}

.wfwct .w16x9 {
    position: relative;
    border: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: 0 10px 3px -6px rgba(0, 0, 0, 0.3), 0 -7px 3px -6px rgba(0, 0, 0, 0.15), 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 3px -6px rgba(0, 0, 0, 0.3), 0 -7px 3px -6px rgba(0, 0, 0, 0.15), 0 0 10px 0 rgba(0, 0, 0, 0.1);
    background-image: url(../img/uxDesign/wfwct/SamplePage.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.w16x9 img {
    width: 100%;
}

.uxd.wfwct .bgWhite p {
    font-weight: 500;
}

.uxd.wfwct p.clWhite {
    color: #bfbfbf;
}

.uxd.wfwct #interviewNsurvey p.clWhite {
    color: #ffffff;
}

.container {
    display: table;
}

.container .col-md-6 {
    display: table-cell;
    border: 1px solid gray;
}

#problemsChallenges .col-md-6.xsHide {
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 15px;
}

#problemsChallenges .col-md-6.xsHide:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.50);
    top: 10px;
    left: 40px;
}

#problemsChallenges p.mobLnd.mobCh {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

#problemsChallenges p.mobLnd.mobCh:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.50);
    top: 6px;
    left: 10px;
}

.productionRedlines, .mockups, .persona, .wireframes, .usabilityTesting, #informationArchitecture .imageHolder, #empathyMapping .imageHolder, #userJourney .imageHolder, .wfwct #interviewNsurvey, .wfwct #wireframes, #userFlow .fullHeight50 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media only screen and (min-width: 768px) {
    #informationArchitecture .imageHolder {
    background-image: url(../img/uxDesign/wfwct/informationArchitecture.png);
}

#userFlow .fullHeight50 {
    background-image: url(../img/uxDesign/wfwct/userFlow.png);
}

#uxProcess {
    background-image: url(../img/uxDesign/wfwct/uxProcess.png);
}
}

@media only screen and (max-width: 767px) {
    #informationArchitecture .imageHolder {
    background-image: url(../img/uxDesign/wfwct/informationArchitectureSM.png);
}

#userFlow .fullHeight50 {
    background-image: url(../img/uxDesign/wfwct/userFlowSM.png);
}

#uxProcess {
    background-image: url(../img/uxDesign/wfwct/uxProcessSM.png);
}
}

#empathyMapping .imageHolder {
    background-image: url(../img/uxDesign/wfwct/EmpathyMap.png);
}

#userJourney .imageHolder {
    background-image: url(../img/uxDesign/wfwct/userJourney.png);
}

@media only screen and (min-width: 780px) {
    .carousel-inner .item:first-child .persona {
        background-image: url(../img/uxDesign/wfwct/persona01.png);
    }
}

@media only screen and (min-width: 780px) {
    .carousel-inner .item:nth-child(2) .persona {
        background-image: url(../img/uxDesign/wfwct/persona02.png);
    }

    #researchSynthesis .fullHeight50 {
        background-image: url(../img/uxDesign/wfwct/researchSynthesis.png);
    }
}



@media only screen and (max-width: 779px) {
    .carousel-inner .item:first-child .persona {
        background-image: url(../img/uxDesign/wfwct/persona01XS.png);
    }
}

@media only screen and (max-width: 779px) {
    .carousel-inner .item:nth-child(2) .persona {
        background-image: url(../img/uxDesign/wfwct/persona02XS.png);
    }

    #researchSynthesis .fullHeight50 {
        background-image: url(../img/uxDesign/wfwct/researchSynthesisXS.png);
    }
}

.carousel-inner .item:first-child .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR01.png);
}

.carousel-inner .item:nth-child(2) .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR02.png);
}

.carousel-inner .item:nth-child(3) .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR03.png);
}

.carousel-inner .item:nth-child(4) .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR04.png);
}

.carousel-inner .item:nth-child(5) .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR05.png);
}

.carousel-inner .item:nth-child(6) .productionRedlines {
    background-image: url(../img/uxDesign/WFCTO/PR06.png);
}

.carousel-inner .item:first-child .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups01.png);
}

.carousel-inner .item:nth-child(2) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups02.png);
}

.carousel-inner .item:nth-child(3) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups03.png);
}

.carousel-inner .item:nth-child(4) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups04.png);
}

.carousel-inner .item:nth-child(5) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups05.png);
}

.carousel-inner .item:nth-child(6) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups06.png);
}

.carousel-inner .item:nth-child(7) .mockups {
    background-image: url(../img/uxDesign/wfwct/Mockups07.png);
}

.carousel-inner .item:first-child .wireframes {
    background-image: url(../img/uxDesign/wfwct/wireframe01.png);
}

.carousel-inner .item:nth-child(2) .wireframes {
    background-image: url(../img/uxDesign/wfwct/wireframe02.png);
}

.carousel-inner .item:nth-child(3) .wireframes {
    background-image: url(../img/uxDesign/wfwct/wireframe03.png);
}

.carousel-inner .item:nth-child(4) .wireframes {
    background-image: url(../img/uxDesign/wfwct/wireframe04.png);
}

.carousel-inner .item:nth-child(5) .wireframes {
    background-image: url(../img/uxDesign/wfwct/wireframe05.png);
}

.carousel-inner .item:first-child .usabilityTesting {
    background-image: url(../img/uxDesign/wfwct/usibilityTesting01.png);
}

.carousel-inner .item:nth-child(2) .usabilityTesting {
    background-image: url(../img/uxDesign/wfwct/usibilityTesting02.png);
}

.carousel-inner .item:nth-child(3) .usabilityTesting {
    background-image: url(../img/uxDesign/wfwct/usibilityTesting03.png);
}

.carousel-inner .item:nth-child(4) .usabilityTesting {
    background-image: url(../img/uxDesign/wfwct/usibilityTesting04.png);
}

.carousel-inner .item:nth-child(5) .usabilityTesting {
    background-image: url(../img/uxDesign/wfwct/usibilityTesting05.png);
}

#modalUserflow .dspTable {
    left: 0;
}

#modalUserflow .modal-dialog {
    width: 100%;
}

#modalUserflow .modal-content img {
    width: 100%;
}

.carousel-indicators {
    bottom: -45px!important;
}

.carousel-indicators.bgLight .active {
    background-color: #0071BC;
}

.carousel-indicators.bgLight li {
    border: 2px solid #0071BC;
}

.carousel-indicators.bgDark .active {
    background-color: #fff;
}

.carousel-indicators.bgDark li {
    border: 2px solid #fff;
}

.carousel-indicators, .carousel-control {
    z-index: 6;
}

.carousel-control.right, .carousel-control.left {
    background: transparent;
    opacity: 1;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control.left {
    background-image: url(../img/arwLeftBlue.svg)
}

.carousel-control.right {
    background-image: url(../img/arwRightBlue.svg)
}

.prototypeLink {
    position: absolute;
    width: 100%;
    margin: 0 -15px;
    text-align: center;
}

.WFcolorBGRedWF {
    background-color: #b80826;
}

.WFtopBanner {
    width: 100%;
    height: 48px;
    padding: 0 20px;
}

.WFtopBanner .logo {
    background-image: url("../img/uxDesign/wfwct/wfLogoType.svg");
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
}

.loginPage {
    background-color: #f2f2f2;
    padding: 30px 0;
}

.loginBox {
    background-color: #fff;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border-radius: 3px;
    border: 1px solid #cccccc;
}

#wfwctVideo01 {
max-width: 100%;
min-height: 100%;
}

#wfwctVideo02.smHide.xsHide {
width: 100%;
}

#wfwctVideo02.lgHide.mdHide {
height: 100%;
}

#prototypeLogin {
background-image: url(../img/uxDesign/wfwct/prototypeLogin.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.spltoolsLogo {
    display: flex;
    position: absolute;
    z-index: 15;
    width: 130px;
    height: 60px;
    bottom: 10px;
    right: 10px;
}

.spltoolsLogo .figma {
    left: 0;
}

.spltoolsLogo .axure {
    left: 70px;
}

#userInterview {
    background-image: url(../img/uxDesign/WFCTO/userInterview.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}