/* --------------MOTHERBOARD SWITCH------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/


/*----------Design Cooler---------*/
#cooler .cooler-layer{
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
}
#cooler .cooler-layer.hd-active{
    opacity: 1;
}
#cooler .cooler-text{
    position: relative;
    padding: 20px;
    border: 2px solid #999;
}
#cooler .cooler-text p{
    margin-bottom: 0;
}
#cooler .cooler-text span{
    display: none;
    padding: 10px
}
#cooler .cooler-text span.hd-active{
    display: block;
}
#cooler .cooler-icon{
    background-repeat: no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    margin:0 auto 5px;
    opacity: .8;
    cursor: pointer;
    background-color: #202020;
    border-radius: 99em;
}
#cooler .cooler-icon:hover{
    opacity: 1;
}

/* icon position */
#cooler .cooler-icon{
    background-image: url(../img/spritesheet2.png);
    background-repeat: no-repeat;
    display: block;
    width: 47px;
    height: 47px;
    margin: 0 auto 5px;
    opacity: .8;
}

#cooler .cooler-filter .cooler-icon.cooler-01{
    background-position: -5px -5px;
}
#cooler .cooler-filter .cooler-icon.cooler-02{
    background-position: -5px -62px;
}
#cooler .cooler-filter .cooler-icon.cooler-03{
    background-position: -5px -120px; 
}
#cooler .cooler-filter .cooler-icon.cooler-04{
    background-position: -119px -5px;
}
#cooler .cooler-filter .cooler-icon.cooler-05{
    background-position: -5px -175px;
}
#cooler .cooler-filter .cooler-icon.cooler-06{
    background-position: -5px -119px;
}

#cooler .cooler-filter .hd-active .cooler-icon.cooler-01{
    background-position: -62px -5px;
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-02{
    background-position: -62px -62px;
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-03{
    background-position: -62px -120px;
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-04{
    background-position: -119px -62px; 
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-05{
    background-position: -62px -175px; 
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-06{
    background-position: -62px -119px;
}



/* ------------------MONITOR SWITCH------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/




/*----Game Plus Monitors-----*/
#gameplus .gameplus-layer{
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
}
#gameplus .gameplus-layer.hd-active{
    opacity: 1;
}
#gameplus .gameplus-text{
    border: 2px solid #FFBF3B;
}
#gameplus .gameplus-text p{
    margin-bottom: 0;
}
#gameplus .gameplus-text span{
    display: none;
    padding: 10px
}
#gameplus .gameplus-text span.hd-active{
    display: block;
}
#gameplus .gameplus-icon{
    display: block;
    opacity: .8;
    cursor: pointer;
}

#gameplus .gameplus-icon:hover{
    opacity: 1;
}

#gameplus .gameplus-filter .hd-active .gameplus-icon{
    border: 1px solid #009df2;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 12px 5px #009df2;
}



/*----Game Visual Monitors-----*/
#gamevisual .gamevisual-layer{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    display: block;
}
#gamevisual .gamevisual-layer.hd-active{
    opacity: 1;
    position: relative;
}

#gamevisual .gamevisual-text p{
    margin-bottom: 0;
}
#gamevisual .gamevisual-text span{
    display: none;
    padding: 10px
}
#gamevisual .gamevisual-text span.hd-active{
    display: block;
}
#gamevisual .gamevisual-icon{
    display: block;
    opacity: .8;
    cursor: pointer;
}
#gamevisual .gamevisual-icon:hover{
    opacity: 1;
}
#gamevisual .gamevisual-filter .hd-active .gamevisual-icon{
    border-top: 1px solid #FFBF3B;
    border-bottom: 1px solid #FFBF3B;
}


/*----Ultra Low Blue Light Monitors-----*/
#bluelight .bluelight-layer{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    display: block;
}
#bluelight .bluelight-layer.hd-active{
    opacity: 1;
    position: relative;
}

#bluelight .bluelight-text p{
    margin-bottom: 0;
}
#bluelight .bluelight-text span{
    display: none;
    padding: 10px
}
#bluelight .bluelight-text span.hd-active{
    display: block;
}
#bluelight .bluelight-icon{
    display: block;
    opacity: .8;
    cursor: pointer;
}
#bluelight .bluelight-icon:hover{
    opacity: 1;
}
#bluelight .bluelight-filter .hd-active .bluelight-icon{
    border: 1px solid #FFBF3B;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 12px 5px #FFBF3B;
}