.el-main-image 
{
    height:100vh;
    width:100%;
    background-image: url(../../../Content/imageLib/ELearningPic.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:#41a867;
    position:relative;
}

.divQnaireClip 
{
    display:inline-block;
    position:relative;
    height:20em;
    width:15em;
    border:1px solid gray;
    vertical-align:top;
    cursor:pointer;
    margin-right:1em;
    margin-bottom:1em;
    background-color:white;
    text-align:left;
    box-shadow: 3px 3px 5px rgba(194,194,194,0.8);
}

.divQnaireClip .divCode
{
    color:#686f7a;
    padding-left:0.7em;
    padding-top:0.5em;
    font-size:0.9em;
}

.divQnaireClip .divTitle 
{
    padding-left:0.5em;
    font-weight:bold;
    color:#3d4146;
    font-size:1.2em;
}

.divQnaireClip .divDate
{
    font-style:italic;
    color:#686f7a;
    padding-left:0.7em;
    font-size:0.9em;
}

.divQnaireClip .divPrice
{
    position:absolute;
    bottom:0em;
    width:100%;
}

.divQnaireClip .lblNPrice 
{
    color:#ec5252;
    font-size:2em;
}

.divQnaireClip .lblOPrice 
{
    color:#919191;
    text-decoration:line-through;
}

.divQnaireClip .lblDscnt 
{
    color:#919191;
}

.divQnaireClip .divImage 
{
    height:8em;
}

.el-mdef 
{
    position:absolute;
    width:40%;
    top:20%;
    right:15%;
}

.aLabel 
{
    font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size:1.5em;
    color:#41a867;
}

.h1-mdef 
{
    font-weight:bold;
    font-size:6em;
    margin:0em;
    line-height:1em;
}

.divQPreview 
{
    display:inline-block;
    position:absolute;
    height:30em;
    width:20em;
    border:1px solid gray;
    vertical-align:top;
    cursor:pointer;
    margin-right:1em;
    margin-bottom:1em;
    background-color:white;
    text-align:left;
    box-shadow: 3px 3px 5px rgba(194,194,194,0.8);
    left:15em;
    top:-5em;
    z-index:99999;
    display:none;
}

.divQPrevDetails 
{
    height:22.5em;
    color:#686f7a;
    overflow-y:auto;
}

.divQNoDetails 
{
    height:22.5em;
    color:#686f7a;
    font-weight:bold;
    font-style:italic;
    overflow-y:auto;
}

.divQPreviewControl 
{
    position:absolute;
    bottom:1em;
    width:18em;
}

.divCartButton {
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Arial;
    color: white;
    font-size: 20px;
    text-align:center;
    background: #eb5353;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    cursor:pointer;
}

.divCartButton:hover {
    background: #98283a;
    text-decoration: none;
}

.divCartAddSuccess 
{
    font-size: 20px;
    text-align:center;
    font-family: Arial;
    font-weight:600;
    color:#4ac477;
    display:none;
}

/*for smaller screens*/
@media screen and (max-width:1200px) {
    .el-main-image 
    {
        background-position: left center;
    }

    .el-mdef 
    {
        top:35%;
    }
}

/*for tablets*/
@media screen and (max-width:959px) {
    .el-mdef 
    {
        top:35%;
        right:0;
        width:95%;
        padding-left:1em;
        padding-right:1em;
    }
}

/*for phones*/
@media screen and (max-width:640px) {
    .el-main-image 
    {
        background-position: -200px center;
    }

    .h1-mdef 
    {
        font-size:3.5em;
    }
}

/*smallest screen for phones*/
@media screen and (max-width:320px) {
    .h1-mdef 
    {
        font-size:3em;
    }
}