.qs-menu-item {

    position:relative;
    width:200px;
    height:180px;
    margin:10px;

}

.qs-menu-item-image {
    position:absolute;
    width:100px;
    height:100px;
    top:0px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color:#002d3c;
    cursor:pointer;
    border: 6px solid #FFFFFF;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0);
    margin:auto;
    left: 0; right: 0;
    transition: 
        box-shadow 0.35s, 
        -webkit-box-shadow 0.35s, 
        -moz-box-shadow 0.35s,
        background-color 0.1s,
        top 0.3s;
}

.qs-menu-item-image:hover {
    -webkit-box-shadow: 2px 15px 42px -10px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 15px 42px -10px rgba(0,0,0,0.4);
    box-shadow: 2px 15px 42px -10px rgba(0,0,0,0.4);
    background-color:#ffd400;
    top:-4px;
}

.qs-about {
    background-image: url('../img/quickStart/qs-about.png');
}

.qs-dashboard {
    background-image: url('../img/quickStart/qs-dashboard.png');
}

.qs-manage {
    background-image: url('../img/quickStart/qs-manage.png');
}

.qs-document {
    background-image: url('../img/quickStart/qs-document.png');
}

.qs-training {
    background-image: url('../img/quickStart/qs-training.png');
}

.qs-performance {
    background-image: url('../img/quickStart/qs-performance.png');
}

.qs-benefits {
    background-image: url('../img/quickStart/qs-benefits.png');
}

.qs-payroll {
    background-image: url('../img/quickStart/qs-payroll.png');
}

.qs-settings {
    background-image: url('../img/quickStart/qs-settings.png');
}

.qs-action {
    background-image: url('../img/quickStart/qs-action.png');
}

.qs-annoucements {
    background-image: url('../img/quickStart/qs-announcements.png');
}

.qs-approvals {
    background-image: url('../img/quickStart/qs-approvals.png');
}

.qs-leave {
    background-image: url('../img/quickStart/qs-leave.png');
}

.qs-library {
    background-image: url('../img/quickStart/qs-library.png');
}

.qs-social {
    background-image: url('../img/quickStart/qs-social.png');
}


.qs-menu-item-title {
    position:absolute;
    width:100%;
    top:106px;
    text-align:center;
    font-size:18px;
    color:#002d3c;
}

.center-modal {
    position:fixed;
    width:100%;
    height:100%;
    z-index:10000;
    top:0px;
    display:none;
}

.center-modal-background {
    position:fixed;
    width:100%;
    height:100%;
    background-color:#000000;
    z-index:10000;
    top:0px;
    opacity:0.3;
    cursor:pointer;
}

.qs-navigation {
    position:absolute;
    width:100%;
    overflow:hidden;
    margin:auto;
    left: 0; right: 0;
    background-color:#FFFFFF;
    z-index:30000;
    max-width:710px;
    opacity:1;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.45);
    top:-800px;
    border-radius:3px;
    -webkit-transition: top 0.3s ease-out;
    -moz-transition: top 0.3s ease-out;
    -o-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;
}

.qs-description {
    line-height:-2;
    font-size:13px;
}



.qs-header {
    position:relative;
    width:100%;
    text-align:center;
    font-size:18px;
    border-bottom: 1px solid rgba(0,0,0,0.4);
    padding-bottom:20px;
}

.qs-toggle-top {
    display: block;
}

.qs-base {
    border-bottom: 0px;
    display: none;
}

.qs-close-btn {
    position:absolute;
    width:40px;
    height:40px;
    right:30px;
    font-size:35px;
    top:-12px;
    color:#002d3c;
}

.qs-close-btn:hover {
    color:#ffd400;
}


@media only screen and (max-width: 750px) {
 
    .center-modal {
        position: absolute;
    }

    .qs-navigation {
        max-width:500px;

    }

    
    .qs-base {
         display: block;
    }

    .qs-toggle-top {
        display: none;
    }

    .qs-header {
        left:-10px;
    }


}

@media only screen and (max-width: 550px) {
 
    .center-modal {
        position: absolute;
    }

    .qs-navigation {
        max-width:280px;
    }

    .qs-base {
         display: block;
    }

    .qs-toggle-top {
        display: none;
    }

    .qs-header {
        left:-10px;
    }

}




input[name=qs-checkbox] 
{
    display: none;
}

 
input[name=qs-checkbox] + label
{
    position:absolute;
    background-color: #F3F3F3;
    height: 20px;
    width: 40px;
    display:inline-block;
    border-radius:30px;
    top:0px;
    right:20px;
    cursor:pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../img/quickStart/toggle-navy-left.png');
    border: 3px solid #002d3c;
    background-position: 3px;
    -webkit-transition: background-position 0.3s ease-out, background-color 0.3s ease-out;
    -moz-transition: background-position 0.3s ease-out, background-color 0.3s ease-out;
    -o-transition: background-position 0.3s ease-out, background-color 0.3s ease-out;
    transition: background-position 0.3s ease-out, background-color 0.3s ease-out;

}

input[name=qs-checkbox]:checked + label
{
    background-color: #ffd400;
    background-position: 20px;
}

.toggle-title {
    position:absolute;
    height: 50px;
    width: 120px;
    left:122px !important;
    top:7px;
    color:#002d3c;
    font-size:12px !important;
}

.qs-toggle {
    position:absolute;
    width:150px;
    height:60px;
    left:-55px;

}