/* ---------- GIFT FINDER GENERIC ---------- */
.giftFinder {
    padding: 0;
    position: relative;
    -webkit-transition: background-color ease-in-out .15s;
    transition: background-color ease-in-out .15s
}

.giftFinder div[data-open='false'] {
/*     display: none; */
    position: absolute;
    height: 100%;
    width:100%;
    visibility: hidden;
    opacity: 0;
}

.screenHeight {
    height: calc(100vh - 90px);
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.clrWhite .btnBorder {
    border-color: #FFF;
}

.giftFinder .backBtn {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #2D2C42;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    opacity: 0;
    -webkit-transition: ease-in-out opacity .15s;
    -webkit-transition: ease-in-out all .15s;
    transition: ease-in-out all .15s;
    border:solid 1px rgba(45, 44, 66, .2);
    padding: 15px 15px;
    border-radius: 4px;
}
.giftFinder .backBtn:hover{
    border-color: rgba(45, 44, 66, 1);
}

.giftFinder .backBtn[data-open="true"] {
    opacity: 1;
    cursor: pointer;
    pointer-events: inherit;
}

.giftFinder .backBtn svg {
    width: 16px;
    height: 8px;
}

/* ---------- INTRO & STEP SCREEN ---------- */
.introScreen .txtArea,
.stepScreen .txtArea {
/*     display: none; */
    opacity: 0;
    text-align: center;
    font-size: 1.125rem;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
    padding-right: 100px;
}

.stepScreen .txtArea{
    padding-left:10vw;
}

.introScreen .imgArea,
.stepScreen .imgArea {
/*     display: none; */
    opacity: 0;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
    padding-left:100px;
}

.introScreen .txtArea .title{
    text-align: center;
}

.txtArea .title {
    font-size: 2.1875rem;
    text-align: left;
}

/* ---------- INTRO SCREEN ---------- */
.introScreen .btnBorder {
    display: inline-block;
    margin-top: 30px;
}

/* ---------- STEP SCREEN ---------- */
.stepScreen {
    position: relative;
}

/* ---------- STEP ANSWERS ---------- */
.stepScreen .answers {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(45, 44, 66, .15);
/*     display: none; */
    opacity: 0;
    width: 100%;
}

.stepScreen .answers .answer {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 110px;
    background-color: rgba(45, 44, 66, 0);
    border-right: solid 1px rgba(45, 44, 66, .15);
    overflow: hidden;
}

.stepScreen .answers .answer:last-child {
    border-right: 0;
}

.stepScreen .answers .answer .link {
    color: #2D2C42;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.stepScreen .answers .answer .link:hover {
    color: #FFF;
    background-color: rgba(45, 44, 66, 1);
}

.stepScreen .answers.few .answer .link { font-size:1.25rem;}
.stepScreen .answers .answer .submit {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    border: 0;
    color: #000;
    background-image: url(/App_Themes/YouGR2019/img/gift-finder-submit_arrow.png);
    -webkit-transition: ease-in-out all .15s;
    transition: ease-in-out all .15s;
    background-position: center;
    background-repeat: no-repeat;
}

.stepScreen .answers .answer .submit:hover {
    background-color: #FFC439;
}

.stepColumn {
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    top: calc(20% - 55px);
    right: 20px;
    height: 60%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: ease-in-out opacity .15s;
    transition: ease-in-out opacity .15s;
}

.stepColumn[data-open="true"] {
    opacity: 1;
}

.stepColumn::after {
    position: absolute;
    top: 5px;
    bottom: 15px;
    right: 2px;
    content: "";
    display: block;
    width: 1px;
    background-color: rgba(45, 44, 66, .1);
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
}
.stepColumn li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    position: relative;
    padding-right: 20px;
    /* opacity: .3; */
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
    color: rgba(45, 44, 66, .3);
}

.stepColumn li.visited {
    /* opacity: 1; */
    color: rgba(45, 44, 66, 1);
}

.stepColumn li:last-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 1;
            flex: 0 1;
}

.stepColumn li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(45, 44, 66, .3);
    right: 0;
    top: 5px;
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
}
.stepColumn li::after {
    position: absolute;
    top: 5px;
    right: 2px;
    content: "";
    display: block;
    width: 2px;
    background-color: rgba(45, 44, 66, 1);
    height: 0;
    -webkit-transition: all ease-in-out .30s;
    transition: all ease-in-out .30s;
}
.stepColumn li.completed::after {
    height: 100%;
}


.stepColumn li.visited::before {
    background-color: rgba(45, 44, 66, 1);
}


.stepColumn li.visited.last {
    color: rgba(45, 44, 66, 1);
}







/* Base for label styling */
.giftFinder [type="checkbox"]:not(:checked),
.giftFinder [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

.giftFinder [type="checkbox"]+label {
    text-align: center;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 0px;
    cursor: pointer;
    background-color: rgba(45, 44, 66, 0);
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* checkbox aspect */
.giftFinder [type="checkbox"]+label:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all ease-in-out .15s;
    -webkit-transition: bottom ease-in-out .15s;
    transition: bottom ease-in-out .15s;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 5px solid rgba(45, 44, 66, 0);
    border-right: 5px solid rgba(45, 44, 66, 0);
    border-bottom: 5px solid rgba(45, 44, 66, 0);
}

.giftFinder [type="checkbox"]:not(:checked)+label:before {
    height: 0px;
    bottom: 0px;
}

.giftFinder [type="checkbox"]:checked+label:before {
    height: 40px;
    bottom: -40px;
    background-image: url(/App_Themes/YouGR2019/img/gift-finder-check.svg);
    border-left: 5px solid rgba(45, 44, 66, 1);
    border-right: 5px solid rgba(45, 44, 66, 1);
    border-bottom: 5px solid rgba(45, 44, 66, 1);
}

.giftFinder [type="checkbox"]:not(:checked)+label:after {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    height: 0;
}

.giftFinder [type="checkbox"]:checked+label {
    background-color: rgba(45, 44, 66, 1);
    height: calc(100% - 40px);
    color: #FFF;
}

.giftFinder [type="checkbox"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* disabled checkbox */
.giftFinder [type="checkbox"]:disabled:not(:checked)+label:before,
.giftFinder [type="checkbox"]:disabled:checked+label:before {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

.giftFinder [type="checkbox"]:disabled:checked+label:after {
    color: #999;
}

.giftFinder [type="checkbox"]:disabled+label {
    color: #aaa;
}


/* hover style just for information */
.giftFinder [type="checkbox"]:not(:checked)+label:hover,
.giftFinder [type="checkbox"]:checked+label:hover {
    background-color: rgba(45, 44, 66, 1);
    color: #FFF;
}

.imgAndText{
    align-items: center;
}




@media (max-width:1024px) {
    .txtArea .title {
        font-size: 1.5rem;
        text-align: center;
    }

    .screenHeight {
        display: block;
        flex-direction:unset;
        flex:unset;
        justify-content: unset;
        align-content: unset;
        align-items: unset;
        height: calc(100vh - 70px);
        /* align-items: flex-start; */
/*         -webkit-box-orient: vertical;
        -webkit-box-direction: normal; */
/*             -ms-flex-direction: column;
                flex-direction: column; */
        /* display: block; */
/*         justify-content: flex-start; */
    overflow: hidden;
    }
    
    .giftFinder div[data-open="false"]{
        height: calc(100vh - 70px);
    }

    .imgAndText{
/*         	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
        width:100%;*/
        flex:1 1 auto; 
        max-width: none;
/*         -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;*/
                flex-direction: column; 
        justify-content: space-between;
        margin:0px;
    }
    
    .introScreen .txtArea,
    .stepScreen .txtArea {
/*         flex:0 1 auto; */
        max-width: 100%;
        padding: 4px;
        flex:unset;
    }

    .introScreen .imgArea,
    .stepScreen .imgArea {
/*         display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: flex-start; */
        /*         flex:0 1 auto; */
             justify-content: unset;
        align-content: unset;
        align-items: unset;
             flex:unset;
        display: block;
        width:100%;
        max-width: 100%;
        height: auto;
   
        padding: 40px 4px 4px 4px;
        text-align: center;
    }
    
    .introScreen .imgArea img,
    .stepScreen .imgArea img {
        width:auto;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    
    
    .stepScreen .imgArea {

       
    }

    .introScreen .txtArea {
        padding-right: inherit;
    }

    .txtArea .title {
        margin-top: 10px;
        margin-bottom: 0;
    }



    /* .introScreen[data-open="true"] .imgArea,
    .stepScreen[data-open="true"] .imgArea,
    .introScreen[data-open="true"] .txtArea,
    .stepScreen[data-open="true"] .txtArea {
        display: block;

        flex-basis: 100%;
        max-width: 100%;
    } */
    
    .stepScreen .answers{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
/*         position: relative;
        bottom:auto;
        left:auto; */
        background-color:transparent;
        
    }

    .answers .list {
/*         position: absolute;
        bottom:0;
        left:0;
        width:100%; */
        background-color: rgba(45, 44, 66, .15);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .answers .list .answer {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        height: auto;
        border-right: 0;
        border-bottom: solid 1px rgba(45, 44, 66, .15);
    }

    .answers .list .answer .link {
        padding: 8px;
    }











    .stepColumn {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        position: absolute;
        left: inherit;
        top: 10px;
        right: 15px;
        width: calc(100% - 150px);
        height: 20px;
        font-size: 0.75rem;
        max-width: 400px;
    }
    .stepColumn::after {
        height: 1px;
        width: calc(100% - 22px);
        top:22px;
        right: inherit;
        left: 0;
    }


    .stepColumn li {
        padding-right: 20px;
    }

    .stepColumn li::before {
        right: inherit;
        top: 20px;
    }

    .stepColumn li::after {
        position: absolute;
        top: 22px;
        left: 2px;
        height: 1px;
        width: 0%;
    }

    .stepColumn li.completed::after {
        width: 100%;
        height: 1px;
    }





    .giftFinder [type="checkbox"]+label {
        position: relative;
        top: inherit;
        left: inherit;
        width: 100%;
        height: 100%;
        display: block;
        font-size: 0.875rem;
    }

    .giftFinder [type="checkbox"]:not(:checked)+label {
        height: 100%;
        padding: 8px 40px 8px 40px;
    }

    .giftFinder [type="checkbox"]:checked+label {
        height: 100%;
        padding: 8px 40px 8px 40px;
    }

    .giftFinder [type="checkbox"]+label:before {
        content: '';
        background-color: #FFF;
        position: absolute;
        top: 0;
        left: 0;
        right: inherit;
        bottom: inherit;
        height: 100%;
        height: calc(100% - 4px);
        width: 40px;
        -webkit-transition: all ease-in-out .15s;
        -webkit-transition: bottom ease-in-out .15s;
        transition: bottom ease-in-out .15s;
        background-position: center center;
        background-repeat: no-repeat;
        border: solid 2px rgba(45, 44, 66, 0);
    }

    .giftFinder [type="checkbox"]:checked+label:before {
        bottom: inherit;
        border: solid 2px rgba(45, 44, 66, 1);
        height: calc(100% - 4px);
    }

    .giftFinder [type="checkbox"]:not(:checked)+label::before {
        bottom: inherit;
        background-color: transparent;
    }

    .stepScreen .answers .answer .submit {
        height: 40px;
    }
    
    .mobile .stepScreen .answers,
    .tablet .stepScreen .answers,
    .ios .stepScreen .answers{
        bottom:130px;
    }

    
    .answers.few .list .answer .link{
        padding-top:1.5rem;
        padding-bottom:1.5rem;
        font-size: 1rem;
    }
    
    
    

}



@media (max-width:612px) {
    
    .stepScreen .answers{
        bottom:130px;
    }
  
}

@media (max-width:375px) {
    
    .mobile .stepScreen .answers,
    .tablet .stepScreen .answers,
    .ios .stepScreen .answers{
        bottom:70px;
    }
  
}

@media (max-width:1024px) and (max-height:880px) {
/*     .stepScreen .imgArea img {
        max-height: 150px;
    } */
    
/*     .introScreen .imgArea,
    .stepScreen .imgArea{
        max-height: 300px;
    }
 */
}
/* 
@media (max-width:1024px) and (max-height:800px) {
    
    .introScreen .imgArea,
    .stepScreen .imgArea{
        max-height: 380px;
    }
}

@media (max-width:1024px) and (max-height:700px) {
    
    .introScreen .imgArea,
    .stepScreen .imgArea{
        max-height: 170px;
    }
} */