#help-glass 
{
    background: rgba(67,66,68,0.58);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1000;
}

#help-glass .tour-step 
{
    background: rgba(67,66,68,0.87);
    border: 1px solid white;
    width: 50%;
    max-width: 400px;
    color: white;
    padding: 26px;
    display:none;
}

#help-glass .exit-tour-btn
{
    width: 10px;
    position: absolute;
    top: -5px;
    left: 94%;
    cursor: pointer;
    padding: 10px;
}

#help-glass .tour-step .help-icon
{
    float:left;
}

#help-glass .tour-step .help-text
{
    float: right;
    width: 75%;
}

#help-glass .tour-step .continue-btn 
{
    background-color: #C8C04C;
    color: black;
    float: right;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 17px;
    font-size: 0.66em;
    position: relative;
    top: 16px;
    left: 4%;
}

#help-glass .tour-step .back-btn
{
    background-color: #b9bbbd;
    color: black;
    float: right;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 17px;
    font-size: 0.66em;
    position: relative;
    top: 16px;
    left: 4%;
    margin-right: 10px;
    opacity: 0.5;
}

#help-glass .tour-step .exit-btn 
{
    background-color: #b9bbbd;
    color: black;
    float: left;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 17px;
    font-size: 0.66em;
    position: relative;
    top: 16px;
    right: 4%;
    opacity: 0.5;
}

#help-glass .tour-step .exit-btn:hover, #help-glass .tour-step .back-btn:hover, #help-glass .tour-step .no-btn:hover
{
    opacity: 1;
}

#help-glass .tour-step .finish-btn 
{
     background-color: #C8C04C;
    color: black;
    float: right;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 17px;
    font-size: 0.66em;
    position: absolute;
    top: 77px;
    right: -15px;

}

#help-glass #help-7.tour-step .back-btn 
{
    position: absolute;
    top: 77px;
    left: inherit;
    right: 55px;
}

#help-glass .tour-step .yes-btn 
{
    background-color: #C8C04C;
    color: black;
    border-radius: 3px;
    padding: 7px 47px;
    cursor: pointer;
    font-size: 0.66em;
    display: inline-block;
    margin: 0px 10px;
} 

#help-glass .tour-step .no-btn 
{
    background-color: #b9bbbd;
    color: black;
    border-radius: 3px;
    padding: 7px 47px;
    cursor: pointer;
    font-size: 0.66em;
    display: inline-block;
    margin: 0px 10px;
    opacity:0.5;
} 

#help-glass .tour-step .bold-orange 
{
    color: #c8c04c;
    font-weight: bold;
}

#help-glass #help-1.tour-step
{
    display: block;
    position: absolute;
    top: 26%;
    padding-top:30px;
    left: 19%;
    min-width: 305px;
}

#help-glass #help-1 .tour-subsection
{
    text-align: center;
}

#help-glass #help-1 .btn-container
{
    width:75%;
    margin-left: 12.5%;
    text-align: center;
    min-width: 265px;
}

#help-glass #help-2.tour-step 
{
    position: absolute;
    top: 70px;
    left: 27px;
}

#help-glass #pointer-2
{
    background-image:url("../images/help-overlay/pointer-side.svg");
    background-size: cover;
    height:18px;
    width:23px;
    position:relative;
    top: -40px;
    right: 27px;
}

#help-glass #help-3.tour-step 
{
    position: absolute;
    top: 70px;
    right: 20px;
}

#help-glass #pointer-3 
{
    background-image: url("../images/help-overlay/pointer-side.svg");
    
    background-size: cover;
    height: 17px;
    width: 26px;
    position: relative;
    top: -41px;
    left: calc(100% + 1px);

    /*Flip background image*/
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


#help-glass #help-4.tour-step, #help-glass #help-5.tour-step 
{
    position: absolute;
    top: 36%;
    right: 24%;
    padding-top: 34px;
}

#help-glass #help-4.tour-step .help-icon, #help-glass #help-5.tour-step .help-icon
{
    position: relative;
    top: -15px;
}

#help-glass #help-6.tour-step 
{
    position: absolute;
    bottom: 45%;
    right: 24%;
    height: 86px;
}

#help-glass #help-7.tour-step 
{
    position: absolute;
    right: 24%;
    height: 86px;
}

#help-glass #help-7.tour-step.top 
{
    top:141px;
}

#help-glass #help-7.tour-step.bottom 
{
    bottom: 98px;
}

#help-glass .tour-step .solo-help-text 
{
    float: none;
    width: 104%;
    margin-left: -2%;
}

#help-glass #help-6.tour-step .tour-subsection
{
    position:relative;
    top: -15px;
}

#help-glass #help-7.tour-step .tour-subsection 
{
    position: relative;
    top: -15px;
}

#help-glass #pointer-7 
{
    background-image: url("../images/help-overlay/pointer-center.svg");
    background-size: cover;
    height: 13px;
    width: 31px;
    position: relative;
    top: 112px;
    left: 44%;
}

#help-glass #pointer-7.flipped 
{
    top: -39px;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

#help-glass .clear 
{
    clear: both;
}

@media screen and (min-width: 1023px) 
{
    #help-glass #help-1.tour-step 
    {
        left: calc(50% - 234px);
    }

    #help-glass #help-4.tour-step, #help-glass #help-5.tour-step, #help-glass #help-6.tour-step, #help-glass #help-7.tour-step
    {
        right: calc(50% - 244px);
    }

}


@media screen and (max-width: 550px)
{
    #help-glass #help-1 .btn-container
    {
        margin-left: 7.5%;
    }
}