/*==================================
           HTML CONFIG
====================================*/
@font-face
{
     src: url(/fonts/UVNVan_R.TTF);
     font-family: UVN;
}

*,
*::before,
*::after{
   margin: 0;
   padding: 0; 
   box-sizing: border-box;
}
html
{
     font-family: UVN;
     text-decoration: none !important;
     font-size: 10px;
}
/*==================================
          NAVIGATION NEW
====================================*/
/* a{
     text-decoration: none;
}
ul{
     list-style: none;
}
header{
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
}
.container{
     width: 100%;
     max-width: 117rem;
     margin: 0 auto;
     padding: 0 1.5rem;
}
.menu-icons{
     color: #eee;
     font-size: 4rem;
     position: absolute;
     top: 50%;
     right: 2rem;
     transform: translateY(-50%);
     cursor: pointer;
     z-index: 1500;
     display: none;
}
nav{
     width: 100%;
     height: 8rem;
     border: 1px solid rgba(255,255,255,0.1);
}
.logo{
     display: flex;
}
.logo i{
     margin: auto;
     font-size: 3rem;
     color: #eee;
}
.nav-list{
     display: flex;

}
.nav-list li{
     line-height: 8rem;
     position: relative;
}
.sub-menu li{
     line-height: 4rem;
}
.nav-list a{
     display: block;
     color: white;
     padding: 0 1.5rem;
     font-size: 1.4rem;
     text-transform: uppercase;
} */

/*==================================
          NAVIGATION BAR OLD
====================================*/
.navbar-brand
{
     position: absolute;
     top: -15px;
     left: 5%;
}
.navbar
{
     padding: 23px 0px;
     background-color: rgba(49, 52, 63, 0.788) !important;
     border-bottom: none !important;
     transition: all 0.5s ease-in-out;
}

.navbar-header
{
     padding: 5px 0px;
}

.navbar ul li a
{
     color: white !important;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1.5px;
     font-size: 15px;
     transition: all 0.5s ease;
     white-space: nowrap;
     text-indent: 10px;
     text-align: center;
     margin: 0;
}

.navbar ul li a:hover
{
     color: crimson !important;
     transition: 0.5s ease;
}
.navbar-toggle
{
     border: 1px solid white !important;
     
}

.navbar-toggle:hover
{
     background-color: crimson !important;

}

.navbar-inverse .navbar-collapse
{
     border-color: transparent !important;
}

/*==================================
               MAIN SLIDER
====================================*/
.slider
{
     width: 100%;
     height: 100vh;    
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     backface-visibility: hidden;
     animation-name: BGSlider;
     animation-duration: 25s;
     animation-iteration-count: infinite;
     transition: all 0.5s ease-in-out;
}


.slider-overlay
{
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     position: relative;
}

.slider-content
{
     position: absolute;
     top: 50%;
     width: 100%;
}
.slider .text, .slider .type-cursor
{
     display: inline;
     margin-bottom: 100px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 50px;
     transition: all 0.5s ease-in-out;
     text-shadow: 0 0 50px #ff00ea, 0 0 10px #ffa600;
     color: white;

}
/*==================================
              POPUP MODAL
====================================*/
.reg-modal
{
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.55);
     position: absolute;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     display: none;
}

.reg-content
{
     width: 600px;
     height: 405px;
     background-image: url(/img/popup.png);
     background-repeat: no-repeat;
     background-size: auto;
     box-sizing: border-box;
     box-shadow: 0px 0px 15px rgba(185, 64, 15, 0.658) !important;
     text-align: center;
     padding: 20px;
     position: relative;
               
}
.dwn-modal
{
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.55);
     position: absolute;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     display: none;

}
.dwn-content
{
     width: 600px;
     height: 405px;
     background-image: url(/img/popup.png);
     background-repeat: no-repeat;
     background-size: auto;
     box-sizing: border-box;
     box-shadow: 0px 0px 15px rgba(185, 64, 15, 0.658) !important;
     text-align: center;
     padding: 20px;
     position: relative;
               
}
.log-modal
{
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.55);
     position: absolute;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     display: none;

}
.log-content
{
     width: 600px;
     height: 405px;
     background-image: url(/img/popup.png);
     background-repeat: no-repeat;
     background-size: auto;
     box-sizing: border-box;
     box-shadow: 0px 0px 15px rgba(185, 64, 15, 0.658) !important;
     text-align: center;
     padding: 20px;
     position: relative;
               
}

input
{
     width: 50%;
     margin: 30px auto !important;
     display: block;
}
/*==================================
             MAIN BUTTON
====================================*/
.logbtn-main
{
     padding: 15px 20px;
     background-color: rgb(66, 24, 27);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     transition: 0.5s;
}

.logbtn-main:hover
{
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-color: crimson;
     box-shadow: 5px 2px 10px rgba(141, 31, 36, 0.425);
     box-sizing: border-box;

}
.logout-main
{
     padding: 15px 20px;
     background-color: rgb(66, 24, 27);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     transition: 0.5s;
}

.logout-main:hover
{
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-color: crimson;
     box-shadow: 5px 2px 10px rgba(141, 31, 36, 0.425);
     box-sizing: border-box;

}
.regbtn-main
{
     padding: 25px 40px;
     background-color: rgb(66, 24, 27);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     transition: 0.5s;
     margin-right: -5px;
}

.regbtn-main:hover
{
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-color: crimson;
     box-shadow: 5px 2px 10px rgba(255, 0, 13, 0.425);
     box-sizing: border-box;

}

.dwnbtn
{
     padding: 25px 40px;
     background-color: rgb(109, 51, 28);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-bottom-right-radius: 10px;
     transition: 0.5s;
}

.dwnbtn:hover
{
     text-decoration: none;
     color: white;
     background-color: rgb(220, 83, 20);
     border-color: rgb(220, 83, 20);
     box-shadow: 5px 2px 10px rgba(255, 145, 0, 0.425);
     box-sizing: border-box;

}

.regbtn
{

     padding: 10px 15px;
     background-color: rgb(66, 24, 27);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     border-bottom-right-radius: 10px;
     transition: 0.5s;
}

.regbtn:hover
{
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-color: crimson;
     box-shadow: 5px 2px 10px rgba(141, 31, 36, 0.425);
     box-sizing: border-box;

}

.logbtn
{

     padding: 10px 15px;
     background-color: rgb(66, 24, 27);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     border-bottom-right-radius: 10px;
     transition: 0.5s;
}

.logbtn:hover
{
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-color: crimson;
     box-shadow: 5px 2px 10px rgba(141, 31, 36, 0.425);
     box-sizing: border-box;

}


.dwnNow
{
     padding: 10px 15px;
     background-color: rgb(17, 18, 80);
     color: white;
     text-transform: uppercase;
     letter-spacing: 8px;
     font-size: 15px;
     border: 2px solid white;
     border-top-left-radius: 10px;
     border-bottom-right-radius: 10px;
     transition: 0.5s; 
     margin: 45px auto;
     width: 300px;
     display: flex; 
     justify-content: center;
     align-items: center;
     box-shadow: 5px 2px 10px rgb(0, 0, 0);
}
.dwnNow:hover
{
     text-decoration: none;
     color: white;
     background-color: rgb(11, 68, 78);
     border-color: rgb(20, 190, 220);
     box-shadow: 5px 2px 10px rgba(0, 255, 221, 0.425);
     box-sizing: border-box;

}
/*==================================
            CLOSE BUTTON
====================================*/
.close1 
{
     position: absolute;
     top: 0;
     right: 14px;
     font-size: 35px !important;
     transform: rotate(45deg);
     color: rgb(255, 255, 255) !important;
     cursor: pointer;

}
.close2 
{
     position: absolute;
     top: 0;
     right: 14px;
     font-size: 35px !important;
     transform: rotate(45deg);
     color: rgb(255, 255, 255) !important;
     cursor: pointer;

}
.close3
{
     position: absolute;
     top: 0;
     right: 14px;
     font-size: 35px !important;
     transform: rotate(45deg);
     color: rgb(255, 255, 255) !important;
     cursor: pointer;

}
/*==================================
          PLACEHOLDER - POST
====================================*/
::placeholder
{
     color: white;
}
.input
{
font-size: 14pt;
background: #383434a6;
border: 1px solid #b0b8bc;
border-radius: 5px;
margin-bottom: 5px;
padding: 7px;
text-align: center;
color: white;
}
.pass
{
font-size: 14pt;
background: #383434a6;
border: 1px solid #b0b8bc;
border-radius: 5px;
margin-bottom: 5px;
padding: 7px;
text-align: center;
color: white;
}
.input:hover
{
     background: #270e0ea6;  
}
.pass:hover
{
     background: #270e0ea6;  
}
/*==================================
          SHOP INTERFACE
====================================*/
.shop-zenStl
{
     width: 100%;
     height: 1160px;
     margin-top: -150px !important;
     background-color: rgba(53, 16, 25, 0.911);
     background-repeat: no-repeat;

}
.shop-itemStl
{
     width: 100%;
     height: 1160px;   
     background-color: rgba(53, 16, 25, 0.911);
     background-repeat: no-repeat;

}
.shop-wrap
{
     box-shadow:  0 0 10px rgba(51, 47, 49, 0.75);
     border: 2px solid rgb(116, 110, 110);
     border-radius: 10px;
     padding: 15px 15px 15px 15px;
     position: relative;
     transition: all 0.5s ease;
     margin-top: 30px;
     color: white;
     background-color: rgb(30, 34, 44);
     height: 350px;
     width: 350px;
     text-align: center;

}
.shop-zen-icon img:hover
{
     box-shadow: 0px 0px 20px black;
}
/*==================================
            MAIN FOOTER
====================================*/
.footer
{
     background: rgba(49, 52, 63, 0.788);
     color: wheat;
     height: 95px;
     width: 100%;
     text-align: center;
     position: absolute;
     bottom: 0px;
     left: 0px;
     padding-top: 20px;
     font-size: 15px;
}

.footer-content h1
{
     left: 55%;
     bottom: 35%;
     text-align: center;
     position: absolute;
     font-size: 25px;
}
.footer-social .icons
{
     left: 5%;
     bottom: 5%;
     position: absolute;
}
/*==================================
            TEXT - DESIGN
====================================*/
.shop-title h2
{
     color: white;
     display: inline;
     margin-bottom: 100px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 50px;
     transition: all 0.5s ease-in-out;
     text-shadow: 0 0 50px #ffa600, 0 0 10px #ff2600;
     color: white;
}
.shop-title h2:hover
{
     color: rgb(223, 91, 91);
     transition: 0.5s ease;
}
.shop-title p
{
     color: white;
     font-size: 20px;
}














@keyframes BGSlider{
     0%{
          background-image: url(/img/slider/bg1.jpg),url(/img/slider/bg2.jpg);
     }
     25%{
          background-image: url(/img/slider/bg2.jpg),url(/img/slider/bg3.jpg);
     }
     50%{
          background-image: url(/img/slider/bg3.jpg),url(/img/slider/bg4.jpg);
     }
     75%{
          background-image: url(/img/slider/bg4.jpg),url(/img/slider/bg1.jpg);
     }
     100%{
          background-image: url(/img/slider/bg1.jpg);
     }
}
@keyframes glow {
     from {
       text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60000, 0 0 40px #e60099, 0 0 50px #7f00e6, 0 0 60px #0004e6, 0 0 70px #0092e6;
     }
     to {
       text-shadow: 0 0 20px #fff, 0 0 30px #4dffca, 0 0 40px #4dff7a, 0 0 50px #c1ff4d, 0 0 60px #ffd54d, 0 0 70px #ffa34d, 0 0 80px #ff534d;
     }
   }