@font-face {
    font-family: Octin;
    src: url(../font/octin.ttf);
}

body{
    background-color: #000;
}

.row{
    position:relative;
    z-index: 0;
    float: left;
}

.container{
    max-width: 720px;
}

.box-text-default{
    padding: 10px 20px 0;
    color: #fff;
}

.img-center{
    margin: 0 auto;
}

/*Margin Top*/

.top-30{
    margin-top: 30px;
}

.bottom-30{
    margin-bottom: 30px;
}

.top-60{
    margin-top: 60px;
}

.top-80{
    margin-top: 80px;
}

/*Text Styles*/

.text-center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.text-justify{
    text-align: justify;
}

.white-text{
    color: #fff
}

.small{
    color: grey;
}


/*Titles*/
.title{
    color: #ffa83a;
    font-family: Octin;
    font-weight: bold;
}

.subtitle{
    color: #fff;
    font-family: Octin;
    font-weight: bold;
}


h2, h3,  h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

h2{
    font-size: 40px
}

h3{
    font-size: 30px
}

h4{
    font-size: 20px
}


/*Header*/

.text-header{
    padding: 10px 20px 0;
}

.text-header .main-topic{
    color: #fff;
    font-size: 12px;
}

.text-header .main-topic ul{
    padding: 20px 0px 20px 20px;
}


.img-header{
    height: 570px;
}

/*Background*/

.bg-main{
    background-image: url(../img/kv-bg.jpg);
    background-repeat: no-repeat;
    background-position: 100px;
}

.brown-bg{
    background-color: rgba(187, 113, 11, 0.7);
}


/* ---------- hd_overlay ---------- */
.overlay-img{
    width: 100%;
}
.overlay-img .hd-img-stable {
    position: relative;
    z-index: 9;
    width: 100%;
}
.overlay-img .hd-img-colorrun {
    position: absolute;
    z-index: 8;
    width: 93%;
    top: 2px;
    left: 15px;
    -webkit-animation: colorrun 3s infinite;
    -moz-animation: colorrun 3s infinite;
    -ms-animation: colorrun 3s infinite;
    -o-animation: colorrun 3s infinite;
    animation: colorrun 3s infinite;
}



@-webkit-keyframes colorrun {
        0% {-webkit-filter: hue-rotate(359deg); }
        100% {-webkit-filter: hue-rotate(0deg); }
    }
    @keyframes colorrun {
        0% {
            -webkit-filter: hue-rotate(359deg);
            filter: hue-rotate(359deg)
        }
        100% {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg)
        }
    }




/*Cerfificado*/

.text-certificado{
    padding: 10px 20px 0;
    color: #fff;
}

/*Proteção*/

.text-protecao{
    padding: 10px 20px 0;
    height: 360px;
}

.text-protecao p{
    color: #fff;
}

/*ESD Guards*/

.text-esd p{
    text-align: center;
    padding: 10px 20px 0;
    color: #fff
}

.text-esd .title{
    text-align: center;
}

.text-esd .subtitle{
    text-align: center;
}

.esd-box{
    height: 210px;
    margin: 10px 5px 0 0;
    padding: 10px;
    width: 24%;
} 

@media (max-width: 579px) {
.esd-box{
    width: 80%;
    height: 130px;
    margin: 10px auto
    } 
}

/*DDR4*/

.text-ddr4{
    text-align: center;
    padding: 10px 20px 0;
}

.text-ddr4 p{
   color: #fff
}

/*Audio*/

.text-audio{
    padding: 10px 20px 0;
    height: 560px;
}

.text-audio p{
    color: #fff;
}

/*Audio*/

.text-components{
    padding: 10px 20px 0;
    height: 400px;
}

.text-components p{
    color: #fff;
}

/*Aura*/

.text-aura{
    padding: 10px 20px 0;
    height: 360px;
}

.text-aura p{
    color: #fff;
}


/*Rede*/

.text-rede{
    padding: 10px 20px 0;
    height: 285px;
}

.text-rede p{
    color: #fff;
}


/*Transferência*/

.text-transf{
    padding: 10px 20px 0;

}

.text-transf p{
    color: #fff;
}



/*Aura*/

.icon-aura{
    height: 100px 
}

#hd li{
    list-style: none 
}



/*---*/

#hd .hd-sec-lighting {
    padding: 0 0;
    position: relative;
    z-index: -2;
    margin: 0 auto;
}

#hd .hd-sec-lighting h2{
    margin-bottom: 70px;
}

#hd .hd-lightingbox {
    position: relative;
}

#hd .hd-lightingbox:after {
    clear: both;
    content: '';
    display: block;
}

#hd .hd-lighting {
/*    height: 100%;
    width: 50%;*/
    float: left;
    position: relative;
    overflow: hidden;
}
#hd .hd-lighting:before{
    content:'';
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    background:#000;
    z-index: 3;
}
#hd .hd-lightingbox-block {
    clear: both;
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -2px;
    left: 0;
    background: #000;
}


/*controls*/
#hd .hd-controls {
    margin-top: 50px;
    float: left;
    padding: 0;
}

#hd .hd-controls li {
    cursor: pointer;
    opacity: 0.5;
}

#hd .hd-controls li:hover,
#hd .hd-controls li.hd-active {
    opacity: 1;
}

.colorpicker-wrapper{
    height: 120px;

}

#colorpicker {
    position: absolute;
    left: 120px;
    top: 10px;
}

#color,
#color2,
.greybg {
    width: 98%;
    height: 0;
    padding-bottom: 133%;
    margin: 1px;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
}
.greybg {
    background-color: #555555;
    z-index: -2;
}

/*colors*/

#color.hd-rainbow,
#color2.hd-rainbow{
    padding-bottom: 1000%;
    background: url(../img/rainbow.jpg) 0 0 repeat;
}

.hd-comet {
    background: #000;/* Old browsers */
    background: linear-gradient(45deg, #000 0%, #000 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 55%, #000 65%, #000 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#000', GradientType=1);/* IE6-9 fallback on horizontal gradient */
}

#hd #color ul li,
#hd #color2 ul li{
    width: 15%;
    height: 70%;
    position: absolute;
    background: radial-gradient(circle, #ffffff, rgba(255, 255, 255,0), rgba(255, 255, 255,0));
    display: none;
    transform: skew(0deg) rotate(-45deg);
}
#hd #color ul,
#hd #color2 ul{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}


#hd #color .hd-starry_night li,
#hd #color2 .hd-starry_night li{
    display: block;
}
#hd #color .hd-starry_night li:nth-child(1),
#hd #color2 .hd-starry_night li:nth-child(1){
    right: 27%;
    top: -8%;
    animation:  starryNight 2s 0s infinite,
                colorrun 2s 0s infinite;
}
#hd #color .hd-starry_night li:nth-child(2),
#hd #color2 .hd-starry_night li:nth-child(2){
    right: 40%;
    top: 0%;
    animation:  starryNight 2s 1s infinite,
                colorrun 2s infinite;
}
#hd #color .hd-starry_night li:nth-child(3),
#hd #color2 .hd-starry_night li:nth-child(3){
    right: 63%;
    top: 20%;
    animation:  starryNight 2s 1.5s infinite,
                colorrun 2s infinite;
}
#hd #color .hd-starry_night li:nth-child(4),
#hd #color2 .hd-starry_night li:nth-child(4){
    right: 74%;
    top: 7%;
    animation:  starryNight 2s .5s infinite,
                colorrun 2s infinite;
}




/* ---------- ANIMATION ---------- */
    @keyframes fadeIn{
        from{opacity: 0;}
        to{opacity: 1;}
    }
    @-webkit-keyframes fadeIn{
        from{opacity: 0;}
        to{opacity: 1;}
    }
    @keyframes colorrun {
        from {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
        }
        to {
            -webkit-filter: hue-rotate(359deg);
            filter: hue-rotate(359deg);
        }
    }
    @-webkit-keyframes colorrun {
        from {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
        }
        to {
            -webkit-filter: hue-rotate(359deg);
            filter: hue-rotate(359deg);
        }
    }
/* ---------- COLOR EFFECT ---------- */
    @-webkit-keyframes static{
        0% {opacity: 1}
        50%{opacity: 1}
    }
    @keyframes static{
        0% {opacity: 1}
        50%{opacity: 1}
    }
    @-webkit-keyframes breathing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @keyframes breathing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @-webkit-keyframes strobing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @keyframes strobing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @-webkit-keyframes music{
        0%  {opacity: 1}
        10% {opacity: .3}
        40% {opacity: 1}
        60% {opacity: .3}
        70% {opacity: 1}
        100%{opacity: .3}
    }
    @keyframes music{
        0%  {opacity: 1}
        10% {opacity: .3}
        40% {opacity: 1}
        60% {opacity: .3}
        70% {opacity: 1}
        100%{opacity: .3}
    }
    @-webkit-keyframes cycle{
        0%      {background-color: #fc5050}
        15%     {background-color: #fc9d50}
        30%     {background-color: #fffc51}
        45%     {background-color: #71f276}
        60%     {background-color: #82d3ff}
        75%     {background-color: #6d8dff}
        90%     {background-color: #d47cff}
        100%    {background-color: #fc5050}
    }
    @keyframes cycle{
        0%      {background-color: #fc5050}
        15%     {background-color: #fc9d50}
        30%     {background-color: #fffc51}
        45%     {background-color: #71f276}
        60%     {background-color: #82d3ff}
        75%     {background-color: #6d8dff}
        90%     {background-color: #d47cff}
        100%    {background-color: #fc5050}
    }
    @-webkit-keyframes rainbow{
        0%  {
            transform: translateY(-100%) skewY(-40deg) scale(2,2);
        }
        100%{
            transform: translateY(0%) skewY(-40deg) scale(2,2);
        }
    }
    @keyframes rainbow{
        0%  {
            transform: translateY(-100%) skewY(-40deg) scale(2,2);
        }
        100%{
            transform: translateY(0%) skewY(-40deg) scale(2,2);
        }
    }
    @-webkit-keyframes cpu{
        0%      {background-color: #fc5050}
        30%     {background-color: #fffc51}
        60%     {background-color: #59f773}
        90%     {background-color: #fffc51;}
    }
    @keyframes cpu{
        0%      {background-color: #fc5050}
        30%     {background-color: #fffc51}
        60%     {background-color: #59f773}
        90%     {background-color: #fffc51;}
    }
    @keyframes flash {
        0% {
            background-color: #56d4ff;
        }
        30% {
            background-color: #56d4ff;
        }
        40% {
            background-color: #ffffff;
        }
        50% {
            background-color: #56d4ff;
        }
        100% {
            background-color: #56d4ff;
        }
    }
    @keyframes comet {
        0% {
            height: 200%;
            transform: translateY(-100%);
        }
        100% {
            height: 200%;
            transform: translateY(50%);
        }
    }
    @-webkit-keyframes comet {
        0% {
            height: 200%;
            transform: translateY(-100%);
        }
        100% {
            height: 200%;
            transform: translateY(50%);
        }
    }


    @keyframes yoyo{
        0% {opacity: 1}
        60%{opacity: 0}
        80%{opacity: 1}
        95%{opacity: 0.5}
        100%{opacity: 1}
    }



    @-webkit-keyframes starryNight {
        0% {opacity: 0;}
        80% {opacity: 0;}
        95% {opacity: 1;}
        100% {opacity: 1;}
    }
    @keyframes starryNight {
        0% {opacity: 0;}
        80% {opacity: 0;}
        95% {opacity: 1;}
        100% {opacity: 1;}
    }


@media (max-width: 579px) {
.hd-controls-wrapper{
   display: none;
    } 

#Section-Enhancements .change_box .btns .box_btn {
    border: none;
    box-shadow: none
    }

#Section-Enhancements .change_box .btns .box_btn.on {
    border: none;
    box-shadow: none
    }

    #Section-Enhancements .change_box .btns .box_btn>img {
margin: 0 auto;
    width: 100%;
}
}