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

/*----------Design Cooler---------*/
#cooler .cooler-layer{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
}
#cooler .cooler-layer.hd-active{
    opacity: 1;
}
#cooler .cooler-text{
    position: relative;
    padding: 20px;
}
#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/spritesheet.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: -119px -5px; 
}
#cooler .cooler-filter .cooler-icon.cooler-04{
    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: -119px -62px; 
}
#cooler .cooler-filter .hd-active .cooler-icon.cooler-04{
    background-position: -62px -119px;
}


/*----------// Water cooler ROG //---------*/

#cooler .w-cooler-layer{
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    width: 95%;
}
#cooler .w-cooler-layer.hd-active{
    opacity: 1;
}

/*cooler-text*/
#cooler .w-cooler-text{
    display: none;
    padding: 10px;
    border: 2px solid #999;
    text-align: center;
}
#cooler .w-cooler-text.hd-active{
    display: block;
}

/*cooler-filter*/
#cooler .w-cooler-filter{
    display: flex;
    height: 50px;
    cursor: pointer;
    margin-bottom: 10px;
    opacity: 0.5;
}

#cooler .w-cooler-filter.hd-active{
    opacity: 1;
}

#cooler .w-cooler-title{
    padding: 10px 0 0 10px;
    float: left;
}

#cooler .w-cooler-icon{
    background-repeat: no-repeat;
    min-width: 45px;
    opacity: .8;
    float: left;
    display: block;
    background-size: 198%;
}

#cooler .w-cooler-icon:hover{
    opacity: 1;
}

#cooler .w-cooler-icon.cooler-01,
#cooler .hd-active .w-cooler-icon.cooler-01{
    background-image: url(../img/icon-wpump.png);
}
#cooler .w-cooler-icon.cooler-02,
#cooler .hd-active .w-cooler-icon.cooler-02{
    background-image: url(../img/icon-winout.png);
}
#cooler .w-cooler-icon.cooler-03,
#cooler .hd-active .w-cooler-icon.cooler-03{
    background-image: url(../img/icon-flow.png); 
}


#cooler .w-cooler-icon.cooler-01,
#cooler .w-cooler-icon.cooler-02,
#cooler .w-cooler-icon.cooler-03{
    background-position: 0px 0px;
}

#cooler .hd-active .w-cooler-icon.cooler-01,
#cooler .hd-active .w-cooler-icon.cooler-02,
#cooler .hd-active .w-cooler-icon.cooler-03{
    background-position: -45px 0px;
}



/*----------// #power ROG and ROG STRIX //---------*/

#power .power-layer{
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    width: 95%;
}

#power .power-layer.hd-active{
    opacity: 1;
}

/*power-filter*/
#power .power-filter{
    display: flex;
    height: 50px;
    cursor: pointer;
    margin-bottom: 10px;
    opacity: 0.5;
}

#power .power-filter.hd-active{
    opacity: 1;
}

#power .power-title{
    padding: 10px 0 0 10px;
    float: left;

}

#power .power-icon{
    background-repeat: no-repeat;
    min-width: 45px;
    opacity: .8;
    float: left;
    display: block;
    background-size: 198%;
}

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

/* icon position */
#power .power-icon.power-01,
#power .power-icon.power-02,
#power .power-icon.power-03,
#power .power-icon.power-04,
#power .power-icon.power-05,
#power .power-icon.power-06{
    background-position: 0px 0px;
}

#power .hd-active .power-icon.power-01,
#power .hd-active .power-icon.power-02,
#power .hd-active .power-icon.power-03,
#power .hd-active .power-icon.power-04,
#power .hd-active .power-icon.power-05,
#power .hd-active .power-icon.power-06{
    background-position: -45px 0px;
}


#power .power-icon.power-01,
#power .hd-active .power-icon.power-01{
    background-image: url(../img/icon-connector.png);
}
#power .power-icon.power-02,
#power .hd-active .power-icon.power-02{
    background-image: url(../img/icon-mosfet.png);
}
#power .power-icon.power-03,
#power .hd-active .power-icon.power-03{
    background-image: url(../img/icon-choke.png); 
}
#power .power-icon.power-04,
#power .hd-active .power-icon.power-04{
    background-image: url(../img/icon-capacitor.png);
}


/*power-text*/
#power .power-text{
    display: none;
    padding: 10px;
    border: 2px solid #999;
    text-align: center;
}
#power .power-text.hd-active{
    display: block;
}




/*----------// #cond ROG and ROG STRIX //---------*/

#cond .cond-layer{
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    width: 95%;
}

#cond .cond-layer.hd-active{
    opacity: 1;
}


#cond .cond-layer-led{
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    width: 95%;
}

#cond .cond-layer-led.hd-active{
    opacity: 1;
}

/*cond-filter*/
#cond .cond-filter{
    display: flex;
    height: 60px;
    cursor: pointer;
    margin-bottom: 10px;
    opacity: 0.5;
}

#cond .cond-filter.hd-active{
    opacity: 1;
}

#cond .cond-title{
    padding: 0px 0 0 10px;
    float: left;
}

#cond .cond-title small{
    display: block;
    line-height: 1.2;
    margin-top: 0.2rem;
}

#cond .cond-icon{
    background-repeat: no-repeat;
    min-width: 45px;
    opacity: .8;
    float: left;
    display: block;
    background-size: 198%;
}

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

/* icon position */
#cond .cond-icon.cond-01,
#cond .cond-icon.cond-02,
#cond .cond-icon.cond-03{
    background-position: 0px 0px;
}

#cond .hd-active .cond-icon.cond-01,
#cond .hd-active .cond-icon.cond-02,
#cond .hd-active .cond-icon.cond-03{
    background-position: -45px 0px;
}

#cond .cond-icon.cond-01,
#cond .hd-active .cond-icon.cond-01{
    background-image: url(../img/icon-connector.png);
}
#cond .cond-icon.cond-02,
#cond .hd-active .cond-icon.cond-02{
    background-image: url(../img/icon-mosfet.png);
}
#cond .cond-icon.cond-03,
#cond .hd-active .cond-icon.cond-03{
    background-image: url(../img/icon-choke.png); 
}


/*cond-text*/
#cond .cond-text{
    display: none;
    padding: 10px;
    border: 2px solid #999;
    text-align: center;
}
#cond .cond-text.hd-active{
    display: block;
}










/*-----------------networking-rog------------------*/

.networking-rog{
    background-image: url(../img/networking.jpg);
    background-repeat: no-repeat;
    background-size: 120%;
    padding-bottom: 140px
}

/*Media Query*/
@media screen and (max-width: 575px) {
    .networking-rog{
        background-image: url(../img/networking.jpg);
        background-repeat: no-repeat;
        background-size: 120%;
        padding-bottom: 140px;
        background-position: -80px 220px
    }
}



/* ------------------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;
}