/* 
    Created on : Nov 5, 2014, 9:25:09 AM
    Author     : Taufik
*/

@charset "utf-8";

textarea:focus, input:focus{
    outline: none;
}
html{
height: 100%;
min-height:100%;
}
body{
    background-color: #fffff;
    min-height:100%;
    width: 100%;
}
* {
margin: 0;
}
#wrapper {
    min-height:100%;
    width: 100%;
 position: relative;
    bottom: 0;
}

@font-face
{
    font-family: wellfleet;
    src: url(fonts/Wellfleet-Regular.ttf);
}
@font-face
{
    font-family: horizon;
    src: url(fonts/Horizon.otf);
}
@font-face
{
    font-family: f1-reg;
    src: url(fonts/f1-reg.ttf);
}
@font-face
{
    font-family: bebas;
    src: url(fonts/bebas.ttf);
}
@font-face
{
    font-family: dinpro;
    src: url(fonts/DINPro-Light.otf);
}
@font-face
{
    font-family: segoe;
    src: url(fonts/segoeuiz.ttf);
}
@font-face
{
    font-family: impactNew;
    src: url(fonts/impact.ttf);
}

@font-face
{
    font-family: Poppins;
    src: url(fonts/Poppins-SemiBold.ttf);
}

@font-face
{
    font-family: PoppinsLight;
    src: url(fonts/Poppins-Light.ttf);
}
@font-face
{
    font-family: gilroy;
    src: url(fonts/gilroy.otf);
}

@font-face
{
    font-family: gilroyLight;
    src: url(fonts/Gilroy-Light.otf);
}
@font-face
{
    font-family: calib;
    src: url(fonts/calibri.ttf);
}
@font-face
{
    font-family: estre;
    src: url(fonts/estre_0.ttf);
}
@font-face
{
    font-family: gothic;
    src: url(fonts/GOTHIC.TTF);
}
@font-face
{
    font-family: fradm;
    src: url(fonts/FRADM.TTF);
}

@font-face
{
    font-family: fetitle;
    src: url(fonts/FormulaETitle.otf);
}@font-face
{
    font-family: polarisbold;
    src: url(fonts/Polaris-Bold.otf);
}@font-face
{
    font-family: polarismed;
    src: url(fonts/Polaris-Medium.otf);
}
@font-face
{
    font-family: lato;
    src: url(fonts/Lato-Black.ttf);
}
@font-face
{
    font-family: latoReg;
    src: url(fonts/Lato-Regular.ttf);
}
@font-face
{
    font-family: latoBold;
    src: url(fonts/Lato-Bold.ttf);
}

@font-face
{
    font-family: latoBoldItalic;
    src: url(fonts/Lato-BoldItalic.ttf);
}
@font-face
{
    font-family: MontserratLight;
    src: url(fonts/Montserrat-Light.ttf);
}
@font-face
{
    font-family: MontserratExtraBold;
    src: url(fonts/Montserrat-ExtraBold.ttf);
}
@font-face
{
    font-family: MontserratSemiBold;
    src: url(fonts/Montserrat-SemiBold.ttf);
}
@font-face
{
    font-family: LatoLight;
    src: url(fonts/Lato-Light.ttf);
}


.top-promo{
    width: 100%;
    height: 40px;
    background-color: #fdfaf5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
.top-promo .promo-text{
     width: calc(33.3% - 1px);
     width: -moz-calc(33.3% - 1px);
    /* WebKit */
    width: -webkit-calc(33.3% - 1px);
    /* Opera */
    width: -o-calc(33.3% - 1px);
    
    height: calc(100% - 13px);
     height: -moz-calc(100% - 13px);
    /* WebKit */
    height: -webkit-calc(100% - 13px);
    /* Opera */
    height: -o-calc(100% - 13px);
    float: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 3px;
    border-right: #acacac solid 1px; 
    color: black;
    text-align: center;

}
.top-promo .promo-text a{
    
    color: black;
    text-decoration: none;
}
.top-promo .promo-text a:hover{
    
    color: black;
    text-decoration: underline;
}

.sticky{
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 1;
}


.header{
    width: 100%;
    height: 40px;
    background-color: #404040;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: #b6b6b6 solid 0px;
    -webkit-transition-property:opacity,position,padding-top,padding-bottom,border-bottom;
    -webkit-transition-duration:400ms,400ms,400ms,400ms,400ms;
    -moz-transition-property:opacity,position,padding-top,padding-bottom,border-bottom;
    -moz-transition-duration:400ms,400ms,400ms,400ms,400ms;
}
.navigation-con{
    width: 78%;
    height: auto;
    overflow: auto;
    margin: 0 auto;
    
}
.slideshow-new{
  cursor: default; 
  position: relative; 

  padding: 0;
  width: 80%; 
  height: 36vw; 
 margin: 0 auto;
  overflow: auto;
}
.slideshow-image{
  cursor: default; 
  position: relative; 
  width: 100%; 
 height: 100%;

  margin-right: 0;
  padding-right: 0;
  overflow: auto;
  background-size: cover;
  background-repeat: no-repeat;
}
.slideshow-text{
    position: absolute;
    width: calc(25% - 2vw);
      width: -moz-calc(25% - 2vw);
    /* WebKit */
    width: -webkit-calc(25% - 2vw);
    /* Opera */
    width: -o-calc(25% - 2vw);
    height: auto;
   

    bottom: 0;
    left: 0;
    padding: 1vw;
    overflow: auto;
   
     color: black;
    font-family: 'Montserrat', sans-serif;
    text-align: justify;

}
.slideshow-text .title{
    width: auto;
    height: auto;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    margin-bottom: 5px;
}
.slideshow-text .text{
    width: auto;
    height: auto;
    color: black;
    font-family:'Montserrat', sans-serif;
    font-size: 13px;
    overflow: auto;
}

.slideshow-text .discover a{
    width: auto;
    height: auto;
    float: left;
    padding: 10px;
    color: white;
    font-family: gilroy;
    font-size: 14px;
    text-decoration: none;
    background-color: black;
    margin-top: 10px;
    cursor: pointer;
    -webkit-transition-property:color, background-color;
    -webkit-transition-duration:400ms,400ms;
    -moz-transition-property:color, background-color;
    -moz-transition-duration:400ms,400ms;
}
.slideshow-text .discover a:hover{
    color: black;
    font-size: 14px;
    text-decoration: none;
    background-color: white;
}
.jssora22l{
    top:0px;
    left:12px;
    width:40px;
    height:58px;
}
.jssora22r{
    top:0px;
    right:12px;
    width:40px;
    height:58px;
}


.header-right{
    height: auto;
    overflow: auto;
    width: 80%;
    float: right;
}
.navigation{
     height: auto;
    overflow: auto;
    width: 465px;
    float: left;
}
.navigation a{
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
   font-family: dinpro;
    font-size:14px;
    color: #372f2d;
    text-decoration: none;
    float: left;
}
.navigation .home-current{
    height: 60px;
    width: 60px;
    text-decoration: none;
    float: left;
    background-image: url(images/home-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
}
.navigation .home-current:hover{
    background-image: url(images/home-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
}
.navigation .home{
    height: 60px;
    width: 60px;
    text-decoration: none;
    float: left;
    background-image: url(images/home-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
}
.navigation .home:hover{
    background-image: url(images/home-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
}
.navigation .current{
    color: #372f2d;
    background-color: #fff;
     border-radius: 20px;
    radius: 20px;
}
.navigation a:hover{
    color: #372f2d;
    background-color: #fff;
    border-radius: 20px;
    radius: 20px;
}
.navigation .search{
    padding-top: 20px;
    float:right;
}
#open:hover{
    color: #f5c501;
    background-color: #372f2d;
}
.navigation-right{
    height: auto;
    width:auto;
    float: right;

}
.navigation-cart{
    height: auto;
    width:auto;
    float: right;
}
.navigation-right a{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    margin-right: 5px;
    padding-bottom: 8px;
   font-family: gilroy;
    font-size:14px;
    color: #e0e0e0;
    text-decoration: none;
    float: right;
}
.navigation-right a:hover{
    color: #bbbcbc;
    text-decoration: underline;
}
.navigation-right .buttondrop{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    margin-right: 5px;
    padding-bottom: 8px;
   font-family: gilroy;
    font-size:14px;
    color: #e0e0e0;
    text-decoration: none;
    float: right;
    cursor: pointer;
  display: inline-block;

}
.navigation-right .buttondrop:hover{
    color: #bbbcbc;
    text-decoration: underline;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 170px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 120;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  width: calc(100% - 32px);
   width: -moz-calc(100% - 32px);
    /* WebKit */
    width: -webkit-calc(100% - 32px);
    /* Opera */
    width: -o-calc(100% - 32px);
    float: left;

}
.navigation-right .buttondrop:hover .dropdown-content {
  display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    text-decoration: none;

}


.navigation-right p{
    padding-top: 8px;
    margin-right: 5px;
    padding-bottom: 8px;
   font-family: 'Iceland', cursive;
    font-size: 23px;
    color: #372f2d;
    text-decoration: none;
    float: right;
}
.navigation-cart .cart-current{
    height: 60px;
    width: 60px;
    text-decoration: none;
    float: right;
    background-image: url(images/cart-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #f5c501;

}
.navigation-cart .cart-current:hover{
    background-image: url(images/cart-grey.png);
    background-position: center top;
    background-repeat: no-repeat;
    color: #fff;
}

.navigation-cart .cart{
    height: 25px;
    width: 20px;
    text-decoration: none;
    float: right;
    margin-top: 5px;
    padding-left: 20px;
    background-image: url(images/cart-grey.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70% 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

.navigation-cart .cart:hover{
    background-image: url(images/cart-grey.png);
    background-position: center center;
    background-repeat: no-repeat;
    color: #fdfaf5;
}
.navigation-cart a{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    margin-right: 5px;
    margin-bottom: 8px;
   font-family: 'Montserrat', sans-serif;;
    font-size:14px;
    color: #372f2d;
    text-decoration: none;
    float: right;
}
.navigation-cart a:hover{
    color: #000;
    text-decoration: underline;
}
.navigation-right .current{
    color: #372f2d;
    background-color: #fff;
     border-radius: 20px;
    radius: 20px;
}
.navigation-right .search{
    padding-top: 20px;
    float:right;
}


.logo{
     height: 40px;
    overflow: auto;
    width: auto;
    float:left;
}
.login-information p{
    float: right;
}
.login-information a{
    text-decoration: none;
    font-family: gothic;
    font-size: 16px;
    color: #000;
    padding-left: 5px;
    padding-right: 10px;
    text-align: right;
    line-height: 60px;
}
.login-information a:hover{
    color: #f3b72d;
}
.login-information .logout{
    text-decoration: none;
    font-family: gothic;
    font-size: 16px;
    color: #000;
    padding-left: 10px;
    padding-right: 5px;
    text-align: right;
    line-height: 60px;
    background-image: url(images/i.png);
    background-position: left center;
    background-repeat: no-repeat;
}
.login-information .logout:hover{
    color: #f3b72d;
}
.login-information .cart{
    text-decoration: none;
    width: 50px;
    height: 50px;
    font-family: gothic;
    font-size: 18px;
    float: right;
    color: #000;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    background-image: url(images/bag.jpg);
    background-position: center center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}
.search{
    height: 60px;
    width: 600px;
    float: right;
    font-family: gothic;
    font-size: 20px;
    color: #000;
    text-align: right;
    line-height: 60px;
}
.search-input{
    width: 300px;
    padding: 3px;
    border: 2px solid #000;
    color: #888;
    font-family: gothic;
    margin-top: 20px;
    margin-right: 15px;
    background-image: url(images/bg-search.jpg);
    background-position: right top;
    background-repeat: no-repeat;
}
.subs-input{
    width: 250px;
    padding: 10px 15px;
    margin-top: 5px;
    border: 1px solid #000;
    color: #000;
    background-color: #f1f1f1; 
    font-family: gothic;
}
.subs-input-big{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
     max-width: 550px;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid #000;
    color: #000;
    background-color: #f1f1f1; 
    font-family: gothic;
}
.subs-input-100{
     width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 0px solid #000;
    color: #000;
    background-color: #f1f1f1; 
    font-family: gothic;
    display: none;
}
.inputkota{
     width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
     max-width: 550px;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid #000;
    color: #000;
    background-color: #f1f1f1; 
    font-family: gothic;
}
.autocomplete-suggestions {

    border: 1px solid #bbb;
    background: #eee;
    overflow: auto;
    font-family: gothic;
    font-family: 13px;
    line-height: 20px;
    cursor: pointer;
}
.quantity-input{
    width: 80px;
    padding: 3px;
    border: 2px solid #000;
    color: #888;
    font-family: gothic;
}
.textarea-input{
    width: 400px;
    height: 150px;
    padding: 3px;
    border: 2px solid #000;
    background-color: #f7be2f;
    color: #372f2d;
    font-family: gothic;
}
.textarea-input-big{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
     max-width: 550px;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    height: 150px;
    border: 1px solid #000;
    background-color: #f1f1f1;
    color: #372f2d;
    font-family: gothic;
}

.textarea-input-big2{
    width: calc(100% - 6px);
   width: -moz-calc(100% - 6px);
    /* WebKit */
    width: -webkit-calc(100% - 6px);
    /* Opera */
    width: -o-calc(100% - 6px);
    height: 150px;
    padding: 3px;
    border: 1px solid #000;
    background-color: #f1f1f1;
    color: #372f2d;
    font-family: gothic;
}

.customer-icon{
    height: 35px;
    width: 35px;
    float: right;
    border-radius: 30px;
    text-align: right;
}
.login-information .i{
    height: 60px;
    width: 20px;
    line-height: 60px;
    background-image: url(images/i.png);
    background-position: center center;
    background-repeat: no-repeat;
}

.input-text{
    padding: 5px;
   font-family: 'Iceland', cursive;
    border-radius: 10px;
    border: #000 dotted 0px;
}
.input-text2{
    padding: 10px;
     font-family: 'Iceland', cursive;
    border: #000 dotted 0px;
    background-color: #f5c501;
}
.current{
    color: #818181;

}
.content{
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top:20px;
    padding-bottom:30px;
    height: auto;
    overflow: auto;
    margin: 0 auto;


}

.content-support{
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top:20px;
    padding-bottom:30px;
    height: auto;
    overflow: auto;
    margin: 0 auto;


}
.content-con{
    width: 100%;
   
    height: auto;
    overflow: auto;
    margin: 0 auto;


}
.content-con iframe{
    width: 100%;
    float: left;
    margin-top: 15px;
}
.content2{
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top:20px;
    padding-bottom:30px;
    height: auto;
    overflow: auto;
    margin: 0 auto;
    padding-top: 120px;

}
.content-bot-padding{
    width: 1200px;
    padding-top:20px;
    height: auto;
    overflow: auto;
    margin: 0 auto;
}
.left-content{
    width: 200px;
    height: auto;
    float: left;
   text-align: right;
}
.side-content-box{
    width: 180px;
    height: auto;
    font-family: 'Iceland', cursive;
    color: #999;
    padding-right: 20px;
    overflow: auto;
    padding-bottom: 15px;
}
.side-content-box-title{
    width: 180px;
    height: auto;
    font-family: 'Iceland', cursive;
    color: #999;
    padding-right: 10px;

}
.side-content-box a{
    color: #afd17a;
    text-decoration: none;
}
.side-content-box a:hover{
    color: #888;
    text-decoration: none;
}
.mid-content{
    width: auto;
    height: auto;

    
}
.mid-content2{
    width: auto;
    height: auto;
        display: none;
    
}
.mid-content-shop{
    width: 80%;
    height: auto;
    float: right;
    padding-top: 20px;
}

.shop-left{
    width: -moz-calc(20% - 30px);
    width: calc(20% - 30px);
    /* WebKit */
    width: -webkit-calc(20% - 30px);
    /* Opera */
    width: -o-calc(20% - 30px);
    padding: 0px 15px;
    float: left;

}
.shop-left2{
    width: calc(20% - 30px);
    width: -moz-calc(20% - 30px);
    /* WebKit */
    width: -webkit-calc(20% - 30px);
    /* Opera */
    width: -o-calc(20% - 30px);
    padding: 0px 15px;
    float: left;
    margin-top: 40px;
    
}

.mid-content-box{
      width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
    overflow: auto;
    font-family: fradm;
}
.mid-content-box-50{
      width: calc(50% - 31px);
      width: -moz-calc(50% - 31px);
    /* WebKit */
    width: -webkit-calc(50% - 31px);
    /* Opera */
    width: -o-calc(50% - 31px);
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
    overflow: auto;
     border-right: 1px solid gray;
    float: left;
    font-family: fradm;
}
.mid-content-box-51{
      width: calc(50% - 31px);
      width: -moz-calc(50% - 31px);
    /* WebKit */
    width: -webkit-calc(50% - 31px);
    /* Opera */
    width: -o-calc(50% - 31px);
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
   
    overflow: auto;
    float: right;
    font-family: fradm;
}
.mid-content-box .bekraf-img{
    width: 430px;
    height: 360px;
    
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 100px;
    float: left;
}
.mid-content-box .bekraf-img img{
    max-width: 100%;
  max-height: 100%;
}
.mid-content-box .bekraf-text{
    width: 550px;
    height: 340px;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    float: left;
    text-align: justify;
    font-size: 22px;
    font-family: gothic;
}
.checkout-left{
      width: calc(50% - 40px);
      width: -moz-calc(50% - 40px);
    /* WebKit */
    width: -webkit-calc(50% - 40px);
    /* Opera */
    width: -o-calc(50% - 40px);
    
    height: 300px;
    
    padding: 20px;
    float: left;
    text-align: justify;
    font-size: 18px;
}
.checkout-right{
     width: calc(50% - 40px);
     width: -moz-calc(50% - 40px);
    /* WebKit */
    width: -webkit-calc(50% - 40px);
    /* Opera */
    width: -o-calc(50% - 40px);
    
    height: 300px;
    padding: 20px;
    float: left;
    text-align: justify;
    font-size: 18px;
}
.mid-content-box .testi-con{
    width: 500px;
    height: 190px;
    padding-left: 30px;
    padding-right: 30px;
    float: left;
}
.mid-content-box .testi-img{
    width: 150px;
    height: 150px;
    
    padding: 10px;
    float: left;
}
.mid-content-box .testi-text{
    width: 310;
    height: 150px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
    float: left;
    font-size: 20px;
    font-family: gothic;
}
.mid-content-box .message-text{
    width: 550px;
    height: 280px;
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    float: left;
    font-size: 46px;
}
.mid-content-box .message-data{
    width: 430px;
    height: 280px;
    
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 100px;
    float: left;
}
.contact-input{
    width: 330px;
    padding-top: 14px;
    padding-left: 20px;
    padding-bottom: 14px;
    padding-right: 20px;
    color: #372f2d;
    background-color: #f7be2f;
    font-family: gothic;
    border-radius: 10px;
    border: 0px solid #000;
    radius: 10px;
    margin-bottom: 30px;
    font-size: 20px;
}
.contact-submit{
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    padding-right: 20px;
    color: #372f2d;
    background-color: #f7be2f;
    font-family: 'Iceland', cursive;
    border-radius: 10px;
    border: 0px solid #000;
    radius: 10px;
    margin-bottom: 30px;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
}
.contact-submit:hover{
    color: #000;
    background-color: #f7be2f;
}
.contact-textarea{
    width: 400px;
    height: 220px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    padding-right: 20px;
    color: #372f2d;
    background-color: #f7be2f;
    font-family: gothic;
    border-radius: 10px;
    border: 0px solid #000;
    radius: 10px;
    margin-bottom: 30px;
    font-size: 20px;
}

.mid-content-box .social{
    width: 1130px;
    height: 92px;
    padding-top: 100px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    float: left;
    font-size: 46px;
    font-family: gothic;
    text-align: center;
}
.faq-content{
    width: 770px;
    height: auto;
    padding-right: 200px;
    padding-left: 200px;
    float: left;
    font-family: 'Iceland', cursive;
}
.mid-content-box .social img{
    width: 92px;
    height: 92px;
}
.mid-content-box .social a{
    padding-right: 15px;
    padding-left: 15px;
    text-decoration: none;
}
.mid-content-box-welcome{
    width: 1170px;
    height: auto;
    padding-left: 15px;
    padding-top: 60px;
    padding-right: 15px;
    padding-bottom: 60px;
    overflow: auto;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    font-family: gothic;
}
.mid-content-box .view-all{
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding-top: 30px;
}
.mid-content-box .view-all a{
    font-family: gilroy;
    color: #000;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    text-decoration: none;
} 
.mid-content-box .view-all a:hover{
    color: #838383;
    text-decoration: underline;
}

.mid-content .title{
   width: 1200px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 45px;
    font-size: 25px;
    text-align: left;
    color:  #372f2d;
    font-family: 'Iceland', cursive;
    cursor: default;
}
.mid-content .title a{
      font-family: 'Iceland', cursive;
    color: #f5c501;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 25px;
    text-decoration: none;
    cursor: default;
}
.mid-content .title-faq{
    width: 1200px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 35px;
    font-size: 25px;
    text-align: left;
    color:  #000;
    font-family: gothic;
}
.mid-content .title-faq a{
    color:  #000;
    text-decoration: none;
    font-family: gothic;
    padding-left: 15px;
    padding-right: 15px;
}
.mid-content .title-center{
    width: 100%;
    height: auto;
    padding-top: 100px;
    padding-bottom: 15px;
    font-size: 25px;
    text-align: center;
    color:  #000;
    font-family: 'Iceland', cursive;
}
.mid-content .title-center a{
    color:  #000;
    text-decoration: none;
    font-family: gothic;
    padding-left: 15px;
    padding-right: 15px;
}
.mid-content .title-center a:hover{
    color:  #f2b72d;
    text-decoration: none;
}

.mid-content .title .current{
    color:  #f2b72d;
    text-decoration: none;
}
.mid-content .title a:hover{
    color:  #f2b72d;
    text-decoration: none;
}
.menu{
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: auto;
    padding-top: 20px;
    padding-bottom: 10px;

    font-size: 25px;
    text-align: center;
    color:  #000;
     font-family: gilroy;
}
.menu a{
     color:  #000;
      padding-top:  10px;
    padding-bottom:  10px;
    padding-right:  18px;
    padding-left:  18px;
     text-decoration: none;
}
.menu a:hover{
     color:  #000;
     text-decoration: none;
     border-radius: 20px;
    radius: 20px;
}
.menu .current{
    color:  #372f2d;
    text-decoration: underline;
     border-radius: 20px;
    radius: 20px;
}


.mid-content .menu-daily{
    width: 1200px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 30px;
    font-size: 25px;
    text-align: left;
    color:  #000;
    font-family: gothic;
}
.mid-content .menu-daily a{
    color:  #000;
    text-decoration: none;
    font-family: gothic;
    padding-left: 15px;
    padding-right: 15px;
}
.mid-content .menu-daily .current{
    color:  #f2b72d;
    text-decoration: none;
}
.mid-content .menu-daily a:hover{
    color:  #f2b72d;
    text-decoration: none;
}

.mid-content-box .title a{
    color: #999999;
    text-decoration: none;
}
.mid-content-box .title a:hover{
    color: #000;
    text-decoration: none;
}
.mid-content-box .desc{
     height: 350px;
    line-height: 22px;
    width: 730px;
    text-align: justify;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mid-content-box .info{
    height: 35px;
    text-align: left;
    width: 730px;
}
.mid-content-box .info a{
    color: #333333;
    text-decoration: none;
}
.mid-content-box .info a:hover{
    color: #000;
    text-decoration: none;
}
.mid-content-box-auto{
    width: 730px;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 25px;
    
    line-height: 22px;
    background-image: url(images/bg-content.jpg), url(images/bg-content-bot.jpg);
    background-position: center top, center bottom;
    font-family: 'Iceland', cursive;
    background-repeat: no-repeat;
    background-color: #fff;
    margin-bottom: 30px;
    -moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
}
.mid-content-box-auto-gallery{
    width: 730px;
    height: auto;
    padding: 15px;
    background-image: url(images/bg-content.jpg), url(images/bg-content-bot.jpg);
    background-position: center top, center bottom;
    font-family: 'Iceland', cursive;
    background-repeat: no-repeat;
    background-color: #fff;
    overflow: auto;
    margin-bottom: 30px;
    -moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
}
.comment-box{
    width: 730px;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    background-image: url(images/bg-content.jpg), url(images/bg-content-bot.jpg);
    background-position: center top, center bottom;
    font-family: 'Iceland', cursive;
    background-repeat: no-repeat;
    background-color: #fff;
    margin-bottom: 30px;
    -moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
}
.comment-input{
    padding: 5px;
    border:  #000 dotted 0px;
    font-family: 'Josefin Sans', sans-serif;
    background-color: #fff;
    color: #333333;
}
.mid-content-box-auto .title{
    width: 730px;
    height: 50px;
    padding-top: 15px;
    color: #333333;
    line-height: 20px;
    text-align: center;
    font-family: 'Iceland', cursive;
}
.mid-content-box-auto .title-about{
    width: 730px;
    height: 30px;
    padding-top: 15px;
    color: #333333;
    line-height: 20px;
    text-align: center;
    font-family: 'Iceland', cursive;
}
.mid-content-box-auto .title-contact{
    width: 730px;
    height: 30px;
    padding-top: 15px;
    color: #333333;
    line-height: 20px;
    font-family: 'Iceland', cursive;
}
.mid-content-box-auto .title a{
    color: #999999;
    text-decoration: none;
}
.mid-content-box-auto .title a:hover{
    color: #000;
    text-decoration: none;
}
.comment-button{
    font-family: 'Iceland', cursive;
    font-size: 20px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    padding-right: 25px;
    background: #fff;
    color: #333;
    border:  #000 dotted 0px;
    cursor: pointer;
}
.comment-button:hover{
    background: #999999;
}
.submit-button{
    font-family: 'Iceland', cursive;
    font-size: 18px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    padding-right: 25px;
    background: #f5c501;
    color: #000;
    border:  #000 dotted 0px;
    cursor: pointer;
}
.submit-button:hover{
    background: #999999;
}
.image-wide{
    width: 100%;
    height: auto;
    overflow: auto;
}
.flashsale-img{
    width: 70%;
    height: auto;
    overflow: auto;
    float: left;
}
.countdown{
    width: 30%;
    height: 12vw;
    overflow: auto;
    
    float: left;
    text-align: left;
    position: relative;
}
.countdown p{
        
    position: absolute;
    left: 10%;
    top: 50%;
     -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-family: gilroy;
      line-height: 4vw;
      font-size: 2vw;
}

.countdown p span{
    font-size: 3vw;
    background-color: #fff;
    padding: 0.5vw 1vw;
}
.flashsale-content{
    width: auto;
    height: auto;
    overflow: auto;
    position: relative;
    margin-bottom:20px;
    background-color: #eee;
}


.image-wide img{
    float: left;
    opacity: 1;
    cursor: pointer;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:400ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:400ms;
}
.image-wide img:hover{
    opacity: 0.8;
}
.image-wide-promo{
    width: 100%;
    height: auto;
    overflow: auto;
    padding-bottom: 30px;
}
.image-wide-promo img{
    width: 50%;
    float: left;
    height: auto;
}
.nav-bottom-back{
    width: 100%;
    height: 30px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 10px;
}
.nav-bottom{
    width: 100%;
    height: 30px;
    padding-top: 50px;
    padding-bottom: 10px;
    font-family: gothic;
    position: absolute;
    bottom: 150px;
    font-size: 14px;
    text-align: center;
}
.nav-bottom a{
    color: #000;
    padding-left: 30px;
    padding-right: 30px;
    font-family: gothic;
    text-decoration: none;
}
.nav-bottom a:hover{
    color: #f7be2f;
    text-decoration: none;
}
.right-content{
    width: 200px;
    height: auto;
    float: left;
}
.garis-abu{
    background-color: #372f2d;
    height:  20px;
    widows: 100%;
}
.subs-button{
    background-color: #000;
    color: #fff;
    border-radius: 10px;
    radius: 10px;
    cursor: pointer;
    border-width: 0px; 
    margin-left: 15px;
    font-family: gothic;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
.footer-con{
    
     background-color: #404040;
     background-image: url(images/bgfooter.jpg);
     background-size: cover;
     background-position: center top;
    width: 100%;
    height: auto;
    padding-top: 20px;
    bottom: 0;
    position: absolute;
}
.footer-back{
    width: 100%;
    height: 240px;
    background-color: #fff;
}
.footer{
    width: 80%;
    height: auto;
    padding-top: 15px;
    margin: 0 auto;
    overflow: auto;
    
    color: #a2a2a2;
    border-bottom: #888 solid 0px;
    font-family: 'Montserrat', sans-serif;
}
.footer-box{
    float: left;
    padding-top: 20px;
    height: auto;
    font-size: 16px;
    width: 50%;
}
.footer-box-right{
    float: right;
    padding-top: 50px;
    padding-bottom: 50px;
    height: 25px;
    font-size: 16px;
    width: 50%;
    text-align: right;
}
.footer2{
    width: 80%;
    height: 160px;
    padding-top: 15px;
    margin: 0 auto;
     font-size: 10px;
    
    color: #888;
    border-bottom: #656565 solid 1px;
    font-family: 'Montserrat', sans-serif;
}
.footer-box-right a img{
    opacity: 0.3;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 400ms;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
}
.footer-box-right a img:hover{
    opacity: 1;
}
.footer-box-right a{
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}
.footer-box a{
    color:  #000;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    padding-left: 15px;
    font-size: 12px;
    padding-right: 15px;
}
.footer-box a:hover{
    color:  #888;
    text-decoration: none;
}


.footer-column{
    float: left;
     width: calc(20% - 30px);
     width: -moz-calc(20% - 30px);
    /* WebKit */
    width: -webkit-calc(20% - 30px);
    /* Opera */
    width: -o-calc(20% - 30px);

    padding-top: 20px 15px;
    height: auto;
    font-size: 14px;
}
.footer-columnl{
    float: left;
     width: calc(20% - 30px);
     width: -moz-calc(20% - 30px);
    /* WebKit */
    width: -webkit-calc(20% - 30px);
    /* Opera */
    width: -o-calc(20% - 30px);

    padding: 20px 15px;
    padding-top:10px;
    height: auto;
    font-size: 14px;
}
.footer-column a{
    color:  #a2a2a2;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    
    font-size: 12px;
   
}
.footer-column a:hover{
    color:  #fff;
    text-decoration: none;
}


.footer-columnr{
    float: right;
     width: calc(20% - 30px);
     width: -moz-calc(20% - 30px);
    /* WebKit */
    width: -webkit-calc(20% - 30px);
    /* Opera */
    width: -o-calc(20% - 30px);
    text-align: right;
    padding-top: 20px 15px;
    height: auto;
    font-size: 14px;
}
.footer-columnr a{
    color:  #a2a2a2;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    
    font-size: 12px;
   
}
.footer-columnr a:hover{
    color:  #fff;
    text-decoration: none;
}

.footer2 a{
    color:  #000;
    text-decoration: none;
}

/*chrome, opera and safari*/
		@-webkit-keyframes 'LogoSpinner' {
		  0% {
			-webkit-transform: rotate(0);
		  }
		  25% {
			-webkit-transform: rotate(-3deg);
		  }
                  50% {
			-webkit-transform: rotate(0);
		  }
                  75% {
			-webkit-transform: rotate(3deg);
		  }
                  100% {
			-webkit-transform: rotate(0);
		  }
		}

	/*mozilla*/
		@-moz-keyframes LogoSpinner {
		  0% {
			-moz-transform: rotate(0);
		  }
		  25% {
			-moz-transform: rotate(-3deg);
		  }
                  50% {
			-moz-transform: rotate(0);
		  }
                  75% {
			-moz-transform: rotate(3deg);
		  }
                  100% {
			-moz-transform: rotate(0);
		  }
		}
		.logo-anim {

		/*chrome, opera and safari*/
		  -webkit-animation-name: LogoSpinner;
		  -webkit-animation-duration: 5s;
		  -webkit-animation-timing-function: linear;
		  -webkit-transform-origin: 50% 50%;
		  -webkit-animation-iteration-count: infinite;
		
		/*mozilla*/
		  -moz-animation-name: LogoSpinner;
		  -moz-animation-duration: 5s;
		  -moz-animation-timing-function: linear;
		  -moz-transform-origin: 50% 50%;
		  -moz-animation-iteration-count: infinite;

	}
 .page-num{
	margin-left: 3px;
	padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        color: #000;
        font-size: 14px;
        background-color: #f1f1f1;
    radius: 5px;
}
.page-num-linked a{
	margin-left: 3px;
	padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        color: #888;
        text-decoration: none;
        font-size: 14px;
}
.page-num-linked a:hover{
	margin-left: 3px;
	padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
       color: #fff;
        font-size: 14px;
        background-color: #000;
    radius: 5px;
}
.page-num-con{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    height: auto;
    float: left;
    padding-top: 10px;
    padding-left:15px;
    text-align: left;
}
.result{
    width: 760px;
    height: 200px;
    margin-bottom: 20px;
    background-image: url(images/bg-content.jpg), url(images/bg-content-bot.jpg);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-color: #fff;
    -moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
}
.result .image{
    width: 200px;
    height: 200px;
    float: left;
}
.result .title{
    width: 545px;
    height: 55px;
    padding-top: 10px;
    padding-left: 15px;
    float: left;
    color: #000;
    font-family: 'Shadows Into Light', cursive;
}
.result .title a{
    text-decoration: none;
    color: #333333;
}
.result .desc{
    height: 88px;
    line-height: 22px;
    width: 530px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Josefin Sans', sans-serif;
}
.result .info{
    width: 300px;
    height: 30px;
    padding-left: 15px;
    font-family: 'Shadows Into Light', cursive;
    float: left;
}
.result .info a{
    text-decoration: none;
    color: #333333;
}
.result .info a:hover{
    text-decoration: underline;
    color: #333333;
}   

.media-box{
    width: 228px;
    height: 150px;
    padding: 7px;
    text-align: left;
    float: left;
    cursor: pointer;
    position: relative;
}
.media-box .title {
	position:absolute;
	top: 7px;
        width: 168px;
	height: 75px;
	padding-left: 30px;
        padding-right: 30px;
        padding-top: 45px;
        padding-bottom: 30px;
        background-color:#000;  
        font-size:26px;  
        color:#fff;  
        opacity:0; 
	text-align: center;
        filter:alpha(opacity=0);
	-webkit-transition-property:opacity;
	-webkit-transition-duration:400ms;
	-moz-transition-property:opacity;
	-moz-transition-duration:400ms;
        
}
.media-box .title:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

.prev {
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -400px;
    position: fixed;
    width: 50px;
    height: 100px;
    z-index: 100;
    cursor: pointer;
    visibility: hidden;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 400ms;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
}
.next {
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: 400px;
    position: fixed;
    width: 50px;
    height: 100px;
    z-index: 100;
    visibility: hidden;
    cursor: pointer;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 400ms;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
}
.prev:hover {
	opacity : 1;
}
.next:hover {
	opacity : 1;
}


.product-box-noshadow{
     width: calc(33.3% - 10px);
     width: -moz-calc(33.3% - 10px);
    /* WebKit */
    width: -webkit-calc(33.3% - 10px);
    /* Opera */
    width: -o-calc(33.3% - 10px);
    height: 16.5vw;
    line-height: 24vw;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.product-box-noshadow .discount{
     width: auto;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    padding: 7px 10px;
    color: white;
    background-color: red;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 5vw;
    z-index: 99;
    left: 0;
    font-family: gilroy;
}

.product-box-noshadow img{
    width: 90%;
    height: auto;
    padding: 5%;
    position: absolute;
    left: 0;
    top: 40%;
     -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    -webkit-transition-property: width, height, padding;
    -webkit-transition-duration:500ms, 500ms, 500ms;
    -moz-transition-property:width, height, padding;
    -moz-transition-duration:500ms, 500ms, 500ms;
}

.product-box-noshadow img:hover{
    width: 98%;
    height: auto;
    padding: 2%;
}

.product-box-noshadow:hover .hide{
    opacity: 0;
       -webkit-transition-property: opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
}
.product-box-noshadow .view{
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
     opacity: 0;
     top: 0;

       -webkit-transition-property: opacity, background-color;
    -webkit-transition-duration:700ms, 700ms;
    -moz-transition-property:opacity, background-color;
    -moz-transition-duration:700ms, 700ms;
     background-image: url(images/view-button.png);
     background-position: center center;
    background-repeat: no-repeat;
    background-color: #ffffff;
}
.product-box-noshadow .hide{
   
     opacity: 1;
       -webkit-transition-property: opacity;
    -webkit-transition-duration:400ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:400ms;
    
}
.product-box-noshadow .hide:hover{
   
     opacity: 0;
       -webkit-transition-property: opacity;
    -webkit-transition-duration:400ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:400ms;
    
}
.product-box-noshadow .view:hover{
    opacity: 0.7;
    background-image: url(images/view-button.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000000;
    opacity: 0.5;
}
.name{
    width: 100%;
    height: auto;
    overflow: auto;
    position: absolute;
    bottom: 0;
}
.name .productname{
    padding: 10px;
    width: 100%;
    height: auto;
    color: #000;
    text-align: center;
    float:right;
    font-family: 'Montserrat', sans-serif;
   
    opacity: 0.7;
    font-size: 0.7vw;
    line-height: 25px;
}
.price{
    width: 100%;
    height: auto;
    overflow: auto;
    position: absolute;
    bottom: 2px;
}
.price .productprice{
    padding: 5px;
    font-size: 13px;
    width: auto;
    height: auto;
    color: #000;
    float:right;
    background-color: #fff;
    opacity: 0.7;
}

.product-image{
    width: 60%;
    float: left;
    height: auto;
    padding-bottom: 5px;
}
.product-image .slider{
    width: 8%;
    height: auto;
    overflow: auto;
    float: right;
}
.product-image .image-zoom{
    visibility: hidden;
    position: fixed;
    float: left;
     width: calc(92% - 10px);
     width: -moz-calc(92% - 10px);
    /* WebKit */
    width: -webkit-calc(92% - 10px);
    /* Opera */
    width: -o-calc(92% - 10px);
    margin-right:10px;
}

.product-info{
      width: calc(30% - 10px);
      width: -moz-calc(30% - 10px);
    /* WebKit */
    width: -webkit-calc(30% - 10px);
    /* Opera */
    width: -o-calc(30% - 10px);
   
    padding-left: 10px;
    float: left;
    height: auto;
    padding-bottom: 5px;
    color: #000;
   font-family: 'Montserrat', sans-serif;
}

.product-info .by{
    color: #000;
    font-family: gothic;
    text-decoration: none;
    cursor: pointer;
}
.product-info .review{
    color: #888;
    text-decoration: underline;
    cursor: pointer;
}
.product-info .review:hover{
    color: #f5c501;
    text-decoration: none;
}

.artist-image{
    width: 370px;
    text-align: right;
    float: left;
    height: 300px;
    padding-top: 30px;
    padding-bottom: 5px;
}
.artist-image img{
    border-radius: 150px;
    radius: 150px;
}
.artist-info{
    width: 670px;
    float: left;
    height: auto;
    padding-top: 80px;
    padding-left: 80px;
    padding-bottom: 5px;
    font-size: 20px;
    color: #000;
    font-family: gothic;
}

.contest-info{
    width: 555px;
    float: left;
    height: 600px;
    padding: 15px;
    font-size: 30px;
    font-family: gothic;
}
.contest-info .the-head{
    width: 555px;
    float: left;
    height: auto;
    padding-bottom: 10px;
    font-size: 20px;
    color: #000;
    font-family: gothic;
}
.contest-info .the-picture{
    width: 175px;
    float: left;
    height: 175px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #000;
    font-family: gothic;
}
.the-head-artworks{
    width: 100%;
    float: left;
    height: auto;
    padding-bottom: 10px;
    font-size: 20px;
    color: #000;
    font-family: gothic;
}
.the-picture-artworks{
    width: 175px;
    float: left;
    height: 175px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #000;
    font-family: gothic;
}
.artist-info p{
    width: 650px;
    float: left;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
}
.artist-info .about{
    width: 650px;
    float: left;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
}
.artist-info .about .label{
    width: 100px;
    height: auto;
    float: left;
}
.artist-info .about p{
    width: 520px;
    height: auto;
    float: left;
}
.artist-info .mid-label{
    width: 10px;
    height: auto;
    float: left;
}
.artist-info .about .mid-label{
    width: 10px;
    height: auto;
    float: left;
}
.artist-info .label-artist{
    width: 100px;
    height: auto;
    float: left;
}
.artist-info .data-artist{
    width: 520px;
    padding-left: 10px;
    height: auto;
    float: left;
}
.product-description{
    width: 700px;
    float: left;
    height: auto;
    padding: 10px;
}
#ex3::-webkit-scrollbar{
width:10px;
background-color:#cccccc;
} 
#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}
#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
} 

.masthead {
    
    margin-bottom: 0;
    color: #fff;
    text-align: left;
    overflow: visible;
    height: 100%;
}
.masthead h1 {
    font-size: 3em;
    color: #fff;
    margin: 150px 0 0;
    line-height: 1.1em;
    text-shadow: 0 1px 4px #000000;
    font-weight: 400;
}
.masthead p {
    font-size: 1.85em;
    color: #fff;
    line-height: 1.4em;
    font-weight: normal;
    margin-bottom: 30px;
    text-shadow: 0 1px 4px #000000;
}
.jumbotron {
    top: 0;
    position: relative;
    padding-bottom: 30px;
    color: #fff;
    text-align: center;
}
.splash {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.splash img {
    width: 100%;
    height: auto;
    -webkit-transition-property: src;
    -webkit-transition-duration:400ms;
    -moz-transition-property:src;
    -moz-transition-duration:400ms;
}
.splash .slide {
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-transition-property: background-image;
    -webkit-transition-duration:500ms;
    -moz-transition-property:background-image;
    -moz-transition-duration:500ms;
}

.show-case-item.homeslider {
    margin-top: 0;
}
.show-case-item {
    padding-top: 10px;
}
.container {
    margin-right: auto;
    margin-left: auto;
    height: auto;
}
#banner-pagination {
    text-align: center;

}
.list-bulat{
    bottom: 0;
    position: absolute;
    width: 1000px;
    margin-bottom: 30px;
    left: 50%;
    margin-left: -500px;
}
#banner-pagination ul {
    list-style: none;

}
#banner-pagination ul li {
    display: inline;
    width: 25px;
    text-align: center;

}
#banner-pagination ul li img{
    height: 20px;
    margin-left: 5px;
    margin-right: 5px;
    width: 20px;

}
.top-bg{
    width: 100%;
    height: 100px;
  
}
.size{
    width: 500px;
    height: 70px;
    float: left;
}
.XS{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-image: url(images/xs.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    radius: 5px;
    border: 1px solid #888;
}
.S{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-image: url(images/s.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    radius: 5px;
    border: 1px solid #888;
}
.M{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-image: url(images/m.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    radius: 5px;
    border: 1px solid #888;
}
.L{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-image: url(images/l.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    radius: 5px;
    border: 1px solid #888;
}
.XL{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-image: url(images/xl.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    radius: 5px;
    border: 1px solid #888;
}
.addtocart{
    padding-top: 15px;
    padding-left: 50px;
    padding-bottom: 15px;
    padding-right: 50px;
    color: white;
    background-color: #000;
    font-family: gilroy;
    border-radius: 5px;
    border: 0px solid #000;
    radius: 5px;
    margin-bottom: 20px;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
}
.addtocart:hover{
   background-color: #f1f1f1;
    color: #000;
}
.removecart{
    padding: 10px;
    color: white;
    background-color: #000;
    font-family: gilroy;
    border-radius: 5px;
    border: 0px solid #000;
    radius: 5px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
.removecart:hover{
    background-color: #f1f1f1;
    color: #000;
}

.removecart2{
    padding: 8px;
      color: white;
    background-color: #000;
    font-family: gilroy;
  border-radius: 5px;
    border: 0px solid #000;
    radius: 5px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}
.removecart2:hover{
 background-color: #f1f1f1;
    color: #000;
}


.addtocart:disabled{
    background-color: #fff;
    color: #000;
    border: #b6b6b6 solid 1px;
    cursor: default;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    padding-right: 20px;
}
.register-login{
    padding-top: 15px;
    padding-left: 50px;
    padding-bottom: 15px;
    padding-right: 50px;
    color: white;
    background-color: #000;
    font-family: gilroy;
    border-radius: 5px;
    border: 0px solid #000;
    radius: 5px;
    margin-bottom: 20px;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
}
.register-login:hover{
    background-color: #f1f1f1;
    color: #000;
}
.small-button{
    padding: 15px;
    color: white;
    background-color: #000;
    font-family: gilroy;
    border-radius: 5px;
    border: 0px solid #000;
    radius: 5px;
    margin-bottom: 30px;
    font-size: 18px;
    text-align: right;
    cursor: pointer;
}
.small-button:hover{
    background-color: #f1f1f1;
    color: #000;
}
.pictures-box{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    color: #000;
    overflow: hidden;
    float: left;
    cursor: pointer;
}

.news-box{
    width: 500px;
    height: 450px;
    background-color: #dfdfdf;
    padding: 10px;

    float: left;
    margin-right: 20px;
}
.news-box .date{
    width: 500px;
    height: 17px;
    color: #000;
    font-size: 12px;
    font-family: gothic;
}
.news-box .news-title{
    width: 500px;
    height: 50px;
    color: #000;
    font-size: 20px;
    font-family: gothic;
}
.news-box .news-desc{
    width: 500px;
    height: 120px;
    color: #000;
    line-height: 15px;
    overflow: hidden;
    text-align: justify;
    font-size: 14px;
    font-family: gothic;
}
.news-box .view-more{
    width: 500px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #000;
    font-size: 10px;
    font-family: gothic;
}
.news-box .view-more a{
    color: #000;
    text-decoration: none;
}
.news-box .news-img{
    width: 500px;
    height: 235px;
    background-size: cover;
}
.news-image{
    width: 1100px;
    margin: 0 auto;
    height: 600px;
    background-size: cover;
}
.news-text{
    width: 1160px;
    margin: 0 auto;
    height: auto;
    background-color: #dfdfdf;
    padding: 10px;
    font-family: gothic;
    font-size: 16px;
    text-align: justify;
}
.tutorial-text{
    width: 1160px;
    margin: 0 auto;
    height: auto;
    padding: 10px;
    font-family: gothic;
    font-size: 16px;
    text-align: justify;
}
.news-text .the-text{
    width: 1160px;
    margin: 0 auto;
    height: auto;
    font-family: gothic;
    font-size: 16px;
    text-align: justify;;
}

.news-text .title-news{
    width: 1160px;
    height: 50px;
    color: #000;
    font-size: 20px;
    font-family: gothic;
}
.news-text .the-image{
    width: 1160px;
    height: 150px;
    color: #000;
    font-size: 20px;
    font-family: gothic;
    padding-top: 10px;
    padding-bottom: 15px;
    border-bottom: 3px #000 solid;
}
.news-text .the-image img{
    cursor: pointer;
}
.news-text .the-share{
    width: 1160px;
    height: 20px;
    color: #000;
    font-size: 12px;
    font-family: gothic;
    padding-top: 5px;
}
.tutorial-text .the-share{
    width: 1160px;
    height: 20px;
    color: #000;
    font-size: 12px;
    font-family: gothic;
    margin-top: 15px;
    padding-top: 5px;
    border-top: 3px #000 solid;
}
.news-text .date-news{
    width: 1160px;
    height: 17px;
    color: #000;
    font-size: 12px;
    font-family: gothic;
}
.mid-content .title-news a{
    color:  #000;
    text-decoration: none;
    font-family: gothic;
    padding-left: 15px;
    padding-right: 15px;
}
.mid-content .title-news a:hover{
    color:  #f2b72d;
    text-decoration: none;
}
.fb-comment{
    height: auto;
    width: 1176px;
    margin: 10px auto;
    border: 2px #f2b72d solid;
    text-align: center;
    padding-bottom: 10px;
}
.fb-comment .the-judul{
    height: auto;
    width: 1176px;
    background-color: #f2b72d;
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin-bottom: 15px;
    font-family: gothic;
    padding-bottom: 10px;
     padding-top: 10px;
}
.choose-size{
    padding: 5px;
    font-family:   'Montserrat', sans-serif;;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 50px;
    text-align: right;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #372f2d;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #372f2d;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #372f2d;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #372f2d;
}

.header-sub-nav{
    position: absolute;
    top: 58px;
    left: 50%;
    margin-left: 405px;
    width: 100px;
    height: auto;
    font-size: 14px;
    color: #f7be2f;
    visibility: hidden;
    font-weight: lighter;
    z-index: 59;
    text-align: center;
    background-color: #372f2d;
    -webkit-transition-property:top;
    -webkit-transition-duration:400ms;
    -moz-transition-property:top;
    -moz-transition-duration:400ms;
}
.header-sub-nav .sub-button{
    width: 100px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Iceland', cursive;
    text-align: center;
    cursor: pointer;
    -webkit-transition-property:background-color, color;
    -webkit-transition-duration:400ms,400ms;
    -moz-transition-property:background-color, color;
    -moz-transition-duration:400ms,400ms;
}
.header-sub-nav .sub-button:hover{
    background-color: #625c5b;
    color: #f7be2f;
}

.underconstruction{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #372f2d;
}
.underconstruction .mid{
    font-family: 'Iceland', cursive;
     position: absolute;
     font-size: 1vw;
     height: auto;
     overflow: auto;
     width: 40%;
      top: 40%;
      text-align: center;
     
      left: 30%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);

} 
.underconstruction .mid a{
    text-decoration: none;

}
.underconstruction .mid img{ 
     width: 30%;
      height: auto;
      margin: 1vw;

}
.dinprobold{
  font-family: dinpro-bold;
}

.home-left{
    width: 580px;
    height: 595px;
    float: left;
}
.content iframe{
    width: 70%;
    float: right;
}
.map-left{
    width: 28%;
    float: right;
    margin-right: 2%;
    padding-top: 30px;
    height: auto;
    overflow: auto;
    font-family: dinpro;
      text-align: right;
      color: #000;
      font-size: 0.7vw;
}

.map-left2{
    width: 40%;
    float: right;
    margin-right: 2%;
    padding-top: 30px;
    padding-bottom: 15px;
    height: auto;
    overflow: auto;
    font-family: dinpro;
      text-align: right;
      color: #000;
      font-size: 14px;
}

.content-link{
    text-decoration: none;
    color: #f5c501;
}
.content-link:hover{
    text-decoration: underline;
    color: #987a00;
}
.bodycare{
    width: 33.33%;
}
.haircare{
    float: left;
    width: 24.65%;
    margin-left:0.5%;;
}
.facecare{
    width: 22.4%;
    float: right;
}

.button-menu-mobile{
    height: 30px;
    float: right;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 5px;

    display: none;
    position: fixed;
}

.menu-mobile-con{
    background-color: #646363;
    position: fixed;
    z-index: 101;
    width:50%;
    right: -50%;
    height: 100%;
    overflow: hidden;
     -webkit-transition-property:right;
    -webkit-transition-duration:400ms;
    -moz-transition-property:right;
    -moz-transition-duration:400ms;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menu-mobile{
  width: 95%;
   padding-top: 8px;
   padding-left: 5%;
   float: left;

    padding-bottom: 8px;
   font-family: 'Montserrat', sans-serif;;
    font-size:3vw;
    color: #fff;

    
  border-bottom: #f080a3 solid 1px;
   -webkit-transition-property:height;
    -webkit-transition-duration:400ms;
    -moz-transition-property:height;
    -moz-transition-duration:400ms;
}
.menu-mobile a{
    color: #fff;
    text-decoration: none;
}
.menu-mobile a:hover{
    color: #fff;
    background-color: #f080a3;
    text-decoration: none;
}
.dropdown-content2 {
  width: 100%;
  overflow: hidden;
  height: 0;
  z-index: 120;
  -webkit-transition-property:height, overflow;
    -webkit-transition-duration:400ms, 400ms;
    -moz-transition-property:height, overflow;
    -moz-transition-duration:400ms, 400ms;
}


.dropdown-content2 a {
  color: white;
  padding: 12px 16px;
  border-bottom: #f080a3 solid 1px;
  text-decoration: none;
  display: block;
  font-size: 2.5vw;
   width: calc(100% - 32px);
   width: -moz-calc(100% - 32px);
    /* WebKit */
    width: -webkit-calc(100% - 32px);
    /* Opera */
    width: -o-calc(100% - 32px);
    float: left;

}
.menu-mobile:hover .dropdown-content2 {
  overflow: auto;
   height: auto;
   margin-top:10px;
   margin-bottom: -8px;
}


.dropdown-content2 a:hover {
    background-color: #f1f1f1;
    text-decoration: none;


}


.article-30{
    width: 50%;
    height: auto;
    overflow: auto;
    float: left;
    font-family: 'Montserrat', sans-serif;
}

.article-30 .imgs{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
     margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    height: 15vw;
    background-size: cover;
    background-position: center center;
}
.article-30 .garis{
    width: 20%;
    margin-right: 65%;
    margin-left: 15px;
    height: 5px;
    float: left;
}
.article-30 .judul{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    margin-right: 15px;
    margin-left: 15px;
    font-size: 1.5vw;
    height: auto;
    float: left;
}
.article-30 .info-news{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    margin-right: 15px;
    margin-left: 15px;
    height: auto;
    font-size: 0.6vw;
    float: left;
    font-family: 'Montserrat', sans-serif;
}
.article-30 .intisari{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    margin: 15px;

    height: 4vw;
    font-size: 0.8vw;
    line-height: 1vw;
    overflow: hidden;
    float: left;
    text-align: justify;
    font-family: 'Montserrat', sans-serif;
}
.article-30 .readmore{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
      margin-bottom: 5px;

    height: auto;
    font-size: 0.8vw;
    float: left;
    font-family: 'Montserrat', sans-serif;
}
.article-30 .readmore a{
   text-decoration: underline;
   font-family: 'Montserrat', sans-serif;
   color: #2f2f2f;
}
.article-30 .readmore a:hover{
   text-decoration: none;
   color: #7b7b7b;
}
.load-more{
    font-family: gilroy;
}

.article-image .slider{
    width: 100%;
    height: auto;
    overflow: auto;
    float: right;
    margin-top: 10px;
}
.article-image .slider img{
    width: 5%;
    margin-right: 10px;
}
.article-image .image-zoom{
    visibility: hidden;
    position: fixed;
    float: left;
    margin-right:5px;
    width: 100%;

}
.article-image{
    width: 100%;
    float: left;
    height: auto;
    overflow: hidden;
    padding-bottom: 5px;
}
.article-text{
    width: 100%;
    float: left;
    height: auto;
    overflow: auto;
    font-size: 13px;
    padding-bottom: 15px;
    padding-top: 15px;
    font-family: 'Montserrat', sans-serif;
}
.article-title{
    font-family: gilroy;
    font-size: 2.5vw;
}
.article-title-small{
    font-family: gilroy;
    font-size: 0.9vw;
    margin-bottom: 15px;
}

.menu-shop{
  width: 100%;
  height: auto;
  -webkit-transition-property:height;
    -webkit-transition-duration:400ms;
    -moz-transition-property:height;
    -moz-transition-duration:400ms;

}
.menu-shop a{

    width: 95%;
    height: 20px;
    overflow: hidden;
    color: #000;
    text-decoration: none;
     padding-top: 8px;
   padding-left: 5%;
   float: left;
   line-height: 20px;
    padding-bottom: 8px;
   font-family: gilroy;
    font-size:15px;
    color: #000;

    
  border: #f080a3 solid 0px;
  margin-bottom: 10px;
   -webkit-transition-property:height;
    -webkit-transition-duration:400ms;
    -moz-transition-property:height;
    -moz-transition-duration:400ms;
}
.menu-shop a:hover{
    color: #fff;
     background-color: #404040;
    text-decoration: none;
}
.menu-shop .dropdown-content3 {
  width: 100%;
  overflow: hidden;
  height: 0;
  z-index: 120;
  -webkit-transition-property:height, overflow;
    -webkit-transition-duration:400ms, 400ms;
    -moz-transition-property:height, overflow;
    -moz-transition-duration:400ms, 400ms;
}


.menu-shop .dropdown-content3 a {
  color: black;
  padding: 8px 5%;
  text-decoration: none;
  display: block;
  font-size: 14px;
  line-height: 16px;
   width: 80%;
    float: right;
     border: #f080a3 solid 0px;
     margin-bottom: 0;

}



.menu-shop .dropdown-content3 a:hover {
    background-color: #404040;
    color; #fff;
    text-decoration: none;


}

.content-support2{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 10px 15px;

    height: auto;
    font-size: 14px;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;

}

.checkout-address{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 10px 15px;
    border: #f080a3 solid 1px;

    height: auto;
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;

}

.row-head{
     width:100%;
    font-size: 13px;
    color: #000;
    height: auto;
    background-color: #eee;
    
   overflow: auto;


}
.row-td-head{
    padding: 15px 1%;
    color: #000;
    height: auto;
    font-size: 13px;
    float: left;
    height: auto;
    line-height: 25px;
}
.row-td{
    padding: 15px 1%;
    color: #000;
    float: left;
    
    height: 80px;
    font-size: 13px;
    line-height: 80px;
}
.row-td-slim{
    padding: 15px 1%;
    color: #000;
    float: left;

    height: auto;
    font-size: 13px;
    line-height: 20px;
}
.row-td-slim a{
    text-decoration: underline;
    color: #000;
}
.row-td-slim a:hover{
    text-decoration: none;
    color: #888;
}
.row-td-slim-gd{
    padding: 15px 1%;
    color: #000;
    float: left;
    width: 48%;
    height: auto;
    font-size: 13px;
    line-height: 20px;
}
.row-td-slim-gd a{
    text-decoration: underline;
    color: #000;
}
.row-td-slim-gd a:hover{
    text-decoration: none;
    color: #888;
}

.row-td-slim2{
    padding: 5px 1%;
    color: #000;
    float: left;

    height: auto;
    font-size: 12px;
    line-height: 20px;
}
.row-td-slim2-qtt{
    padding: 5px 1%;
    color: #000;
    float: left;
    width: 60%;
    height: auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 12px;
    line-height: 20px;
}

.row-td-slim2-name{
    padding: 5px 1%;
    width: 25%;
    color: #000;
    float: left;

    height: auto;
    font-size: 12px;
    line-height: 20px;
}


.row-td-slim2-poin{
    padding: 5px 1%;
    color: #000;
    width:8%;
    text-align:right;
    line-height:30px;
    float:right;
    height: auto;
    font-size: 12px;
}
.row-td-slim2-par1{
    padding: 5px 1%;
    color: #000;
    width:10%;
    text-align:right;
    line-height:30px;
    float:right;
    height: auto;
    font-size: 12px;
}
.row-td-slim2-run12{
    padding: 5px 1%;
    color: #000;
    width:6%;
    text-align:center;
    line-height:30px;
    float:right;
    height: auto;
    font-size: 12px;
}

.row-td-m-100{
    padding: 10px 15px;
    color: #000;
    float: left;
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    height: auto;
    font-size: 13px;
    line-height: 20px;
}
.row-td-m-50{
    padding: 10;
    color: #000;
    float: left;
     width: calc(50% - 20px);
     width: -moz-calc(50% - 20px);
    /* WebKit */
    width: -webkit-calc(50% - 20px);
    /* Opera */
    width: -o-calc(50% - 20px);
    height: auto;
    font-size: 13px;
    line-height: 20px;
}
.row-td-m-70{
    padding: 10px 15px;
    color: #000;
    float: left;
     width: calc(70% - 30px);
     width: -moz-calc(70% - 30px);
    /* WebKit */
    width: -webkit-calc(70% - 30px);
    /* Opera */
    width: -o-calc(70% - 30px);
    height: auto;
    font-size: 13px;
    line-height: 20px;
}
.row-td-m-30{
    padding: 10px 15px;
    color: #000;
    float: left;
    width: calc(30% - 30px);
    width: -moz-calc(30% - 30px);
    /* WebKit */
    width: -webkit-calc(30% - 30px);
    /* Opera */
    width: -o-calc(30% - 30px);
    height: auto;
    font-size: 13px;
    line-height: 20px;
}

.row-tr{
     width:100%;
  
    color: #000;
    height: auto;
    overflow: auto;
    font-size: 13px;

}

.livechat{
    position: fixed;
    padding: 15px 25px;
    font-size: 16px;
    bottom: 0;
    right: 20px;
    font-family: gilroy;
    background-color: #3e3e3e;
    cursor: pointer;
    z-index: 200;
    color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.whatsapp{
    position: fixed;
    padding: 15px 25px;
    font-size: 16px;
    bottom: 50px;
    right: 0;
    font-family: gilroy;
    background-color: #fff;
    cursor: pointer;
    z-index: 200;
    color: #13990a;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.whatsapp:hover{
    color: #fff;
    background-color: #13990a;
}
.whatsapp img{
    height: 16px;
    float: left;
    margin-right: 10px;
}

.livechat:hover{
    color: #000;
    background-color: #fff;
}


.livechat-image{
    position: fixed;
    bottom: 68px;
    right: 0;
    font-family: gilroy;
    width: 200px;
    height: auto;
    z-index: 150;
    webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
   
}
.livechat:hover{
    color: #000;
    background-color: #fff;
}

.livechat-box{
    position: fixed;
    font-size: 16px;
    bottom: 70px;
    right: 20px;
    width: 17%;
    height: 0;

    font-family: gilroy;
    background-color: #fff;
    z-index: 200;
    color: #888;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.livechat-box .top{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 15px 15px;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    font-family: gilroy;
    background-color: #3e3e3e;
    color: #fff;
}

.livechat-box .chat-message{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 15px 15px;
    font-size: 13px;
  
    height: calc(100% - 131px);
    height: -moz-calc(100% - 131px);
    /* WebKit */
    height: -webkit-calc(100% - 131px);
    /* Opera */
    height: -o-calc(100% - 131px);

    background-color: #fff;
    position: relative;
    color: #888;
    font-family: 'Montserrat', sans-serif;
    border-bottom: #b6b6b6 solid 1px;
    overflow: auto;
    
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.livechat-box .chat-message .bottomscroll{
    width: calc(50% - 30px);
    width: -moz-calc(50% - 30px);
    /* WebKit */
    width: -webkit-calc(50% - 30px);
    /* Opera */
    width: -o-calc(50% - 30px);
    height: 0;
    background-color: #fff;
    
}
.livechat-box .img-preview{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 15px 15px;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    background-color: #eee;
    position: relative;
    overflow: auto;
    display: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    z-index: 201;
    bottom: 51px;
    left: 0;
}
.livechat-box .img-preview img{
    height: 80px;
    width: auto;
    float: left;
    margin-right: 10px;
}
.chat-con{
    width: 100%;
    height: auto;
    overflow: auto;
    margin-bottom: 10px;
    color: #00000;
}
.chat-con .userimage{
    width: 10%;
    height: auto;
    overflow: auto;
    float: left;
}
.chat-con .userimage img{
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.chat-con .text{
    width: auto;
     max-width: calc(90% - 30px);
     max-width: -moz-calc(90% - 30px);
    /* WebKit */
    max-width: -webkit-calc(90% - 30px);
    /* Opera */
    max-width: -o-calc(90% - 30px);
    height: auto;
    overflow: auto;
    padding: 10px;
    margin-left: 10px;
    color: #000;
    border-radius: 10px;
    line-height: 16px;
    font-size: 12px;
    float: left;
    background-color: #eee;
    font-family: 'Montserrat', sans-serif;
}
.livechat-box .bottom{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 15px 15px;
    font-size: 13px;
   border-radius: 0 0 15px 15px ;
    line-height: 20px;
    height: 20px;
    font-family: gilroy;
    background-color: #fff;
    color: #000;
}

.livechat-box .bottom img{
    height: 20px;
    float: right;
    opacity: 0.8;
    cursor: pointer;
}

.livechat-box .bottom .close-img{
    height: 20px;
    float: right;
    opacity: 0.8;
    cursor: pointer;
    display: none;
}

.livechat-box .bottom img:hover{
    
    opacity: 1;
}

.add-chat-image{
    display: none;
}

.subs-input-chat{
      width: calc(100% - 20px);
      width: -moz-calc(100% - 20px);
    /* WebKit */
    width: -webkit-calc(100% - 20px);
    /* Opera */
    width: -o-calc(100% - 20px);
      height: 20px;
   
    font-size: 13px;
    line-height: 20px;
    border: 0px solid #000;
    color: #888;
    background-color: #fff; 
    font-family: 'Montserrat', sans-serif;
}



.livechat-box-start{
    position: fixed;
    font-size: 16px;
    bottom: 80px;
    right: 20px;
    width: 17%;
    height: 0;

    font-family: gilroy;
    background-color: #fff;
    z-index: 200;
    color: #888;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.livechat-box-start .top{
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 15px 15px;
    font-size: 13px;
   border-radius: 15px 15px 0 0;
    line-height: 20px;
    height: 20px;
    font-family: gilroy;
    background-color: #000;
    color: #fff;
}

.subs-input-chat-start{
      width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 10px 15px;
    margin-top: 15px;
    border: 1px solid #000;
    color: #000;
    background-color: #f1f1f1; 
    font-family: 'Montserrat', sans-serif;
}
.start-chat{
    padding-top: 15px;
    padding-bottom: 15px;
    color: white;
      width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    background-color: #000;
    font-family: gilroy;
    border-radius: 10px;
    border: 0px solid #000;
    margin: 15px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}
.start-chat:hover{
    background-color: #f1f1f1;
    color: #000;
}


.dialog-mask{
    position: fixed;
    z-index: 101;
    width: 100%;
    height: 100%;
    background: url("images/mask-black.png") repeat right top;
    display: none;
}
.dialog-box{
    position: fixed;
    z-index: 105;
    top: 20%;
    left: 40%;
      width: calc(20% - 40px);
      width: -moz-calc(20% - 40px);
    /* WebKit */
    width: -webkit-calc(20% - 40px);
    /* Opera */
    width: -o-calc(20% - 40px);
    height: auto;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
    font-family: calib;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-align: center;
    display: none;
}
.dialog-box-review{
    position: fixed;
    z-index: 105;
    top: 20%;
    left: 30%;
      width: calc(40% - 80px);
      width: -moz-calc(40% - 80px);
    /* WebKit */
    width: -webkit-calc(40% - 80px);
    /* Opera */
    width: -o-calc(40% - 80px);
    height: auto;
    padding: 40px;
    background-color: #FFFFFF;
    border-radius: 10px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-align: center;
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.rate {
    float: left;
    height: 46px;
    padding: 10px 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #d27992;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #d27992;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #d27992;
}

.review-product{
    border-radius: 15px;
    width: calc(50% - 80px);
    width: -moz-calc(50% - 80px);
    /* WebKit */
    width: -webkit-calc(50% - 80px);
    /* Opera */
    width: -o-calc(50% - 80px);
    float: left;
    height: auto;
    overflow: hidden;
    background-color: #eee;
    padding: 20px;
    margin-right: 20px;
    font-family: 'Montserrat', sans-serif;
}
.review-product .head{
    width: 100%;
    padding-bottom: 10px;
    float: left;
    height: auto;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
.review-product .reviewtext{
    width: 100%;
    float: left;
    height: auto;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    color: #888;
    font-size: 13px;
}

.review-product .head img{
    border-radius: 10px;
    width: 80px;
    margin-right: 10px;
    float: left;
    height: auto;
    font-family: 'Montserrat', sans-serif;
}

.action-button2{
    width: auto;
    height: auto;
    margin-left: 5px;
    margin-top: 10px;
    padding: 5px 7px;
    background-color: #eb4f80;
    cursor: pointer;
    border-radius: 5px;
    color: #fff;
    font-family: gothic;
    font-size: 12px;
    border: none;
    -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.action-button2:hover{
    background-color: #000;
}

.column-30{
    width: 48%;
    padding: 1%;
    float: left;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 25px;
}
.column-30 .img{
    height: 0.8vw;
}
.column-30 a{
    text-decoration: underline;
    color: #d9d9d9;
}
.column-30 a:hover{
    text-decoration: none;
    color: #252525;
}
.column-30-con{
    width: 100%;
    margin: 0 auto;
    overflow: auto;
}


.compe{
     width: calc(50% - 30px);
     width: -moz-calc(50% - 30px);
    /* WebKit */
    width: -webkit-calc(50% - 30px);
    /* Opera */
    width: -o-calc(50% - 30px);
  
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    height: auto;
    overflow: auto;
    float: left;
    background-color: #eaeaea;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

.compe .imgs{
    width: 100%;
}
.compe .garis{
    width: 20%;
    margin-right: 65%;
    margin-left: 15px;
    height: 5px;
    float: left;
}
.compe .judul{
     width: calc(70% - 30px);
     width: -moz-calc(70% - 30px);
    /* WebKit */
    width: -webkit-calc(70% - 30px);
    /* Opera */
    width: -o-calc(70% - 30px);
    padding: 15px 20px 15px 20px ;
    font-size: 1vw;
    line-height: 1.5vw;
    height: auto;
    float: left;
}
.compe .info-news{
     width: calc(100% - 30px);
     width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    margin-right: 15px;
    margin-left: 15px;
    height: auto;
    font-size: 0.6vw;
    float: left;
    font-family: 'Montserrat', sans-serif;
}
.compe .status{
    width: auto;
     max-width: calc(30% - 30px);
    
   padding: 15px 20px 15px 20px ;
    text-align: right;
    height: auto;
     font-size: 1vw;
     line-height: 1.5vw;
    float: right;
    background-color: #3f3f3f;
    color: #fff;
    font-family: gilroy;
}

.compe-head-con{
     width: calc(100% - 4px);
     width: -moz-calc(100% - 4px);
    /* WebKit */
    width: -webkit-calc(100% - 4px);
    /* Opera */
    width: -o-calc(100% - 4px);
    margin: 0 auto;
    height: auto;
    overflow: auto;
   

    font-size: 25px;
line-height: 25px;
    text-align: left;
    color:  #000;
     font-family: gilroy;
     background-color: #fff;
     border: 2px solid #eee;
}
.compe-head-con .compename{
    width: auto;
    padding-top:  20px;
    padding-bottom:  20px;
    padding-right:  18px;
    padding-left:  25px;
    
    float: left;
     font-family: gilroy;
}
.compe-head-con .compename span{
    font-family: 'Montserrat', sans-serif;
    color: #888;
    font-size: 16px;
    float: right;
    margin-left: 10px;

}
.compe-head-con .compename a{
    text-decoration: none;
    color: #000;
}
.join-compe{
    width: auto;
    margin: 8px;
     padding-top:  15px;
    padding-bottom:  15px;
    padding-right:  18px;
    padding-left:  18px;
    font-size: 19px;
    float: right;
    cursor: pointer;
    background-color: #000;
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
}
.join-compe:hover{
   
    background-color: #4a4a4a;
}
.join-compe a{
    text-decoration: none;
    color: #eee;
}
.mid-content-compe{
      width: calc(100% - 34px);
      width: -moz-calc(100% - 34px);
    /* WebKit */
    width: -webkit-calc(100% - 34px);
    /* Opera */
    width: -o-calc(100% - 34px);
    height: auto;
    padding: 15px;

    margin-bottom: 20px;
    overflow: auto;
    font-family: 'Montserrat', sans-serif;
     background-color: #fff;
     color: #888;
     border: 2px solid #eee;
}

.compemenu{
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: auto;
    padding-bottom: 10px;

     font-family: gilroy;
     padding-top: 30px; 

     text-align: left;
     font-size:16px;
     color: #888;
}
.compemenu a{
     color:  #000;
      padding-top:  10px;
    padding-bottom:  10px;
    padding-right:  18px;
    padding-left:  18px;
     text-decoration: none;
}
.compemenu a:hover{
     color:  #000;
     background-color: #eee;
     text-decoration: none;
     
}
.compemenu .current{
    background-color:  #eee;
    text-decoration: none;
   
}
.compe-box-20{
    width: 20%;
    height: auto;
    overflow: auto;
    float: left;
}
.compe-box-60{
    width: 100%;
    height: 15vw;
    overflow: auto;
    float: left;
    background-position: center center;
    background-size: cover;
    position: relative;
    margin-bottom: 5px;
}

.compe-box-60 .rondeName2{
    width: auto;
    padding: 10px 20px 10px 20px;
     font-family: 'Montserrat', sans-serif;
    font-size: 1vw;
    text-align: left;
    background-color: #fff;
    color: #000;
    position: absolute;
    bottom: calc(1vw + 35px);
    left: 15px;
    opacity: 0.8;
}
.compe-box-60 .trek2{
    width: calc(100% - 20px);
      width: -moz-calc(100% - 20px);
    /* WebKit */
    width: -webkit-calc(100% - 20px);
    /* Opera */
    width: -o-calc(100% - 20px);
    padding: 10px;
    font-family: gilroy;
    font-size: 1vw;
    line-height: 1vw;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    background-color: #f3f3f3;
    color: #000;
}
.compe-box-60 .trek2 span{
      float: right;
      line-height: 1vw;
      font-size: 0.8vw;
    color: #000;
     font-family: dinpro;
}
.compe-box-40{
     width: calc(40% - 15px);
      width: -moz-calc(40% - 15px);
    /* WebKit */
    width: -webkit-calc(40% - 15px);
    /* Opera */
    width: -o-calc(40% - 15px);
    height: auto;
    margin-left: 15px;
    overflow: auto;
    float: left;
}
.compe-box-40 .head{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   background-color: #c20000;
    color: white;
    padding: 10px 15px 10px 15px;
    font-size: 16px;
    line-height: 25px;
    font-family: gilroy;
}


.compe-box-40 .box{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}
.compe-box-40 .box iframe{
    width:100%;
    height: 18vw;
    margin-bottom: 15px;
}

.compe-box-20 .head{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   background-color: #4a4a4a;
    color: white;
    padding: 10px 15px 10px 15px;
    font-size: 16px;
    line-height: 25px;
    font-family: gilroy;
}


.compe-box-20 .box{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}

.compe-box-40 .box-standing{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}
.compe-box-40 .box-standing-2{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    display: none;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}

.calendar{
     width: calc(33.33% - 30px);
      width: -moz-calc(33.33% - 30px);
    /* WebKit */
    width: -webkit-calc(33.33% - 30px);
    /* Opera */
    width: -o-calc(33.33% - 30px);
    padding: 15px;
    float: left;
    height: auto;
    position: relative;
    overflow: auto;
}

.calendar img{
    width: 100%;
    height: auto;
}
.calendar .rondeName{
    width: calc(100% - 50px);
      width: -moz-calc(100% - 50px);
    /* WebKit */
    width: -webkit-calc(100% - 50px);
    /* Opera */
    width: -o-calc(100% - 50px);
    padding: 10px;
     font-family: 'Montserrat', sans-serif;
    font-size: 1vw;
    text-align: left;
    background-color: #fff;
    color: #000;
    position: absolute;
    top: 15px;
    left: 15px;
    opacity: 0.8;
}
.calendar .trek{
    width: calc(100% - 20px);
      width: -moz-calc(100% - 20px);
    /* WebKit */
    width: -webkit-calc(100% - 20px);
    /* Opera */
    width: -o-calc(100% - 20px);
    padding: 10px;
    font-family: gilroy;
    font-size: 1vw;
    line-height: 1vw;
    text-align: left;
    background-color: #f3f3f3;
    color: #000;
}
.calendar .trek span{
      float: right;
      line-height: 1vw;
      font-size: 0.8vw;
    color: #000;
     font-family: dinpro;
}
.calendar .rondeName button{
   float: right;
    padding: 8px 12px;
    background-color: #000;
    color: #fff;
     font-family: dinpro;
    font-size: 0.5vw;
    border:  #000 dotted 0px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.calendar .rondeName button:hover{
  
    background-color: #888;
   
  
}

.calendar2{
     width: -moz-calc(50% - 10px);
      width: -moz-calc(50% - 10px);
    /* WebKit */
    width: -webkit-calc(50% - 10px);
    /* Opera */
    width: -o-calc(50% - 10px);
    padding: 5;
    float: left;
    height: auto;
    position: relative;
    overflow: auto;
}

.calendar2 img{
    width: 100%;
    height: auto;
}
.calendar2 .rondeName{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding:  8px 10px;
     font-family: 'Montserrat', sans-serif;
    font-size: 0.7vw;
    text-align: left;
    background-color: #fff;
    color: #000;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0.8;
}
.calendar2 .trek{
    width: calc(100% - 20px);
      width: -moz-calc(100% - 20px);
    /* WebKit */
    width: -webkit-calc(100% - 20px);
    /* Opera */
    width: -o-calc(100% - 20px);
    padding: 10px;
    font-family: gilroy;
    font-size: 0.7vw;
    line-height: 1vw;
    text-align: left;
    background-color: #f3f3f3;
    color: #000;
}
.calendar2 .trek span{
    
     font-family: dinpro;
     line-height: 0.5vw;
     font-size: 0.5vw;
}
.calendar2 .rondeName button{
   float: right;
    padding: 8px 12px;
    background-color: #000;
    color: #fff;
     font-family: dinpro;
    font-size: 0.5vw;
    border:  #000 dotted 0px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.calendar2 .rondeName button:hover{
  
    background-color: #888;
   
  
}
.juri{
    width:20%;
    margin-left: 40%;
    float:left;
    text-align: center;
    font-size:25px;
    line-height:40px;
    background-color: #d4d4d4;
    border-radius: 10px;
    color: #000;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

.head-event{
     width: calc(100% - 40px);
      width: -moz-calc(100% - 40px);
    /* WebKit */
    width: -webkit-calc(100% - 40px);
    /* Opera */
    width: -o-calc(100% - 40px);
  
    text-align: center;
   color: white;
    padding:20px;
    font-family: gilroy;
    font-size:30px;
    background-image: url(overlays/test/img/head.png);
    background-size: 100% 100%;
    overflow:auto;
    position: absolute;
    left: -1200px;
    top: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;
}
.head-event-v2{
     width: calc(100% - 40px);
      width: -moz-calc(100% - 40px);
    /* WebKit */
    width: -webkit-calc(100% - 40px);
    /* Opera */
    width: -o-calc(100% - 40px);
  
    text-align: center;
   color: white;
    padding:20px 20px 5px 20px;
    margin-bottom: 15px;
    font-family: gilroy;
    font-size:30px;
    overflow:auto;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;

    background-image: url(overlays/idds-spc/img/bg-head.png);
    background-repeat: no-repeat;
    background-size: 96% auto;
    background-position: center bottom;
}


.body-event{
     width: calc(100% - 60px);
      width: -moz-calc(100% - 60px);
    /* WebKit */
    width: -webkit-calc(100% - 60px);
    /* Opera */
    width: -o-calc(100% - 60px);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -20px;
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   height: 0;
   top: 100px;
    padding-left:20px;
    padding-right:20px;
    z-index: 99;
    font-family: gilroy;
    background-image: url(overlays/idds-spc/img/bg-body.png);
    background-size: 100% 100%;
    overflow:hidden;
    visibility: hidden;
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.body-fade{
   
    overflow:auto;
    opacity: 0;
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

.body-event2{
   
    height: 0;
    overflow:auto;
   position:relative; 
     width: 1828px;
 
    text-align: center;
   color: black;
  overflow:hidden;
    visibility: hidden;
   
    z-index: 99;
    font-family: gilroy;
    background-image: url(overlays/idds-spc/img/bg-body.png);
    background-size: 100% 100%;
  
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.body-event-top8{
   
    height: 0;
    overflow:auto;
   position:relative; 
     width: 1828px;
    text-align: center;
   color: black;
  overflow:hidden;
    visibility: hidden;
   
    z-index: 99;
    font-family: gilroy;
    background-image: url(overlays/idds-spc/img/bg-body.png);
    background-size: 80% 100%;
    background-position: center top;
    background-repeat: no-repeat;
  
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.vs-box{
    width:45%;
    height: auto;
    text-align: center;
    float:left;
    overflow:auto;
    color: white;
    font-family: gilroy;
}
.vs-box img{
    width:45%;
}
.run-lead{
    width: 0;
    height: 200px;
    overflow:hidden;
    background-image: url(overlays/idds-spc/img/run-lead-left.png);
    position: absolute;
    z-index: 90;
    right: 1100px;
    padding-top: 20px;
    padding-right: 0;
    top: 5px;
    visibility: hidden;
    color: white;
    background-size: 800px auto;
    background-repeat: no-repeat;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.run-chase{
    width: 0;
    height: 200px;
    overflow:hidden;
    background-image: url(overlays/idds-spc/img/run-cahse-right.png);
    position: absolute;
    z-index: 90;
    left: 870px;
    top: 5px;
    padding-top: 20px;
    padding-left: 0;
    color: white;
    visibility: hidden;

    background-size: 800px auto;
    background-repeat: no-repeat;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.run-mid{
    width: 400px;
    height: 200px;
    overflow:hidden;
    background-image: url(overlays/idds-spc/img/run-mid.png);
    position: absolute;
    z-index: 95;
    left: 635px;
    top: -220px;
    padding-top: 25px;
    color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.juri-anim{
    height: auto;
    overflow: auto;
    width: 100%;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    position: absolute;
    top: 320px;
    left:0;
}
.result-anim{
    height: 300px;
    padding-top: 100px;
    overflow: auto;
    width: 80%;

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    opacity: 0;
    position: absolute;
    top: 300px;
    left:10%;
    color: black;
    font-size: 80px;
    font-family: gilroy;
}

.result-anim span{
   background-color: white;
   padding: 30px;
   border-radius: 30px;
}

.bracket-con{
    width:345px;
    border: solid #6a6a6a 2px;
    margin:20px 20px 20px 0;
    position: absolute;
   
    z-index: 50;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bracket{
    width:345px;
    height: auto;
    float:left;
    overflow:auto;
    background-color: #6a6a6a;
}

.bracket-con-16{
    width:210px;
    border: solid #6a6a6a 2px;
    margin:20px 20px 20px 0;
    position: absolute;
    
    z-index: 50;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bracket-16{
    width:210px;
    height: 30px;
    line-height:30px;
    font-size: 15px;
    float:left;
    font-family: gilroy;
    overflow:hidden;
    background-color: #6a6a6a;
}


.bracket-con-16f{
    width:290px;
    border: solid #6a6a6a 2px;
    margin:20px 20px 20px 0;
    position: absolute;
   
    z-index: 50;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bracket-16f{
    width:290px;
    height: auto;
    float:left;
    height:42px;
    line-height:42px;
    overflow:auto;
     font-size: 18px;
    background-color: #6a6a6a;
}
.bracket-16f .nama1{
    width:205px;
    height: 42px;
    padding: 0 5px 0 5px;
    float:left;

    text-align:left;
    overflow: hidden;
}
.bracket-16 .nama1{
    width:150px;
    padding: 0 5px 0 5px;
    float:left;
    text-align:left;
    overflow: hidden;
}
.bracket-16-abs{
    width:210px;
    height: 30px;
    line-height:30px;
    font-size: 15px;
    font-family: gilroy;
    overflow:hidden;
    position: absolute;
    z-index: 30;
}
.bracket-16-abs img{
    
    height: 30px;
   
}
.bracket-16f-abs{
    width:290px;
    height:42px;
    line-height:42px;
    font-size: 18px;
    font-family: gilroy;
    overflow:hidden;
    position: absolute;
    z-index: 30;
}
.bracket-16f-abs img{
    
    height: 42px;
   
}
.bracket-16f img{
    
    height: 42px;
   
}
.bracket-16 img{
    
    height: 30px;
   
}
.bracket-16f-abs .nama1{
    width:230px;
    padding: 0 5px 0 5px;
    float:left;
    text-align:left;
    overflow: hidden;
}
.bracket-16-abs .nama1{
    width:150px;
    padding: 0 5px 0 5px;
    float:left;
    text-align:left;
    overflow: hidden;
}

.winners-box{
    width:33.33%;
    height: auto;
    text-align: center;
    float:left;
    overflow:auto;
    color: black;
    font-family: gilroy;
}
.winners-box img{
    width:65%;
}

.winners-box span{
    background-color: #66ccff;
    color: white;
    
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
}

.compe-box-60-auto{
     width: 60%;

    height: auto;
    overflow: auto;
    float: left;
}

.compe-box-60-auto iframe{
     width: 100%;
      height: 25vw;
     margin-bottom: 20px;
    overflow: auto;
}
.compe-box-60-auto .head{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   background-color: #404040;
    color: white;
    padding: 10px 15px 10px 15px;
    font-size: 16px;
    line-height: 25px;
    font-family: gilroy;
}


.compe-box-60-auto .box{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}

.exp-box-button{
    float:right;
    cursor: pointer;
       height:30px;
}

.hide-box-button{
    float:right;
    cursor: pointer;

    height:30px;
    display: none;
}

.compe-box-100{
     width: 100%;
    height: auto;
    overflow: auto;
    float: left;
}
.compe-box-100 .head{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   background-color: #c20000;
    color: white;
    padding: 10px 15px 10px 15px;
    font-size: 16px;
    line-height: 25px;
    font-family: gilroy;
}


.compe-box-100 .box{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}
.compe-box-100 .box-standing{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
   
     background-color: #fbfbfb;
    color: #4a4a4a;
    border-top: 1px solid white;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}


.livery{
     width: calc(25% - 10px);
      width: -moz-calc(25% - 10px);
    /* WebKit */
    width: -webkit-calc(25% - 10px);
    /* Opera */
    width: -o-calc(25% - 10px);
    padding: 5px;
    float: left;
    height: auto;
    position: relative;
    overflow: auto;
}

.livery img{
    width: 100%;
    height: auto;
}
.livery .rondeName{
    width: calc(100% - 30px);
      width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    padding: 10px;
     font-family: 'Montserrat', sans-serif;
    font-size: 0.6vw;
    text-align: left;
    background-color: #fff;
    color: #000;
    position: absolute;
    bottom: 5px;
     line-height: 1vw;
    left: 5px;
    opacity: 0;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.livery:hover .rondeName{
    opacity: 0.7;
}
.livery .trek{
    width: calc(100% - 20px);
      width: -moz-calc(100% - 20px);
    /* WebKit */
    width: -webkit-calc(100% - 20px);
    /* Opera */
    width: -o-calc(100% - 20px);
    padding: 10px;
    font-family: gilroy;
    font-size: 1vw;
    line-height: 1vw;
    text-align: left;
    background-color: #f3f3f3;
    color: #000;
}
.livery .rondeName span{
      float: left;
      line-height: 1vw;
      font-size: 0.8vw;
    color: #000;
     font-family: gilroy;
}
.livery .rondeName button{
   float: right;
    padding: 12px 12px;
    background-color: #fff;
    color: #000;
     font-family: dinpro;
    font-size: 0.5vw;
    border:  #000 solid 1px;
    margin-left: 10px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.livery .rondeName button:hover{
    color: #fff;
    background-color: #000;
   
  
}
.image-wide2{
   width: calc(100% - 10px);
      width: -moz-calc(100% - 10px);
    /* WebKit */
    width: -webkit-calc(100% - 10px);
    /* Opera */
    width: -o-calc(100% - 10px);
    margin: 5px;
    height: auto;
    overflow: auto;
}

.dialog-mask2{
    position: fixed;
    z-index: 101;
    width: 100%;
    height: 100%;
    background: url("images/bg-mask-black.png") repeat right top;
    display: none;
}

.dialog-box-liv{
    position: fixed;
    z-index: 105;
    top: 5%;
    left: 10%;
      width: calc(80% - 40px);
      width: -moz-calc(80% - 40px);
    /* WebKit */
    width: -webkit-calc(80% - 40px);
    /* Opera */
    width: -o-calc(80% - 40px);
    height: auto;
    padding: 20px;
    border-radius: 10px;
    font-family: calib;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-align: center;
    display: none;
}
.close-popup{
    float:left; 
    height: 40px;
    margin-bottom: 10px;
    cursor:pointer;
}
.liv-info{
    position: absolute;
    width: auto;
    height: auto;
    bottom: 18px;
    right: 9%;
    text-align: right;
    padding: 20px;
    background-color: #fff;
}
.liv-info .driver{
    font-family: gilroy;
    font-size:18px;
}
.liv-info .team{
    font-family: dinpro;
    font-size:16px;
}
.liv-info .car{
    font-family: dinpro;
    font-size:14px;
    color: #888;
}

.liv-info button{
   float: right;
   margin-top: 20px;
    padding: 8px 15px;
    background-color: #000;
    color: #fff;
    border:  #000 solid 1px;
     font-family: dinpro;
    font-size: 14px;
    
    margin-left: 10px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.liv-info button:hover{
    color: #000;
    background-color: #fff;
   
  
}




.view-res{
   float: left;
   margin-top: 10px;
    padding: 10px 15px;
    background-color: #000;
    color: #fff;
    border:  #000 solid 1px;
     font-family: dinpro;
    font-size: 20px;
    border-radius: 15px;
    width: 30%;
    
    margin-left: 35%;
    margin-right: 35%;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.view-res:hover{
    color: #000;
    background-color: #fff;
   
  
}
.livres-img{
    padding-top: 5px;
    padding-bottom: 5px;
    color: #000;
    float: left;

    height: auto;
    font-size: 12px;

    text-align:left;
    line-height:80px;
    width:150px;
    padding-left:10px;
    padding-right: 5px;
}
.resultbar-con{
     width: calc(100% - 170px);
      width: -moz-calc(100% - 170px);
    /* WebKit */
    width: -webkit-calc(100% - 170px);
    /* Opera */
    width: -o-calc(100% - 170px);
    height:60px;
    line-height: 30px;
    font-family: gilroy;
    font-size: 20px;
    position: relative;
    background-color: white;
    margin-top: 18px;
    float: left;
}
.resultbar-con .bar{
    height:100%;
    background-color: #007ace;
    z-index: 50;
    width: 0;
    left: 0;
    top: 0;
    position: absolute;
}
.resultbar-con .textname{
    left: 15px;
    top: 15px;
    height:50px;
    z-index: 60;
    width: auto;
   
    position: absolute;
}
.resultbar-con .textname span{
    font-family: dinpro;
    font-size: 18px;
}
.resultbar-con .textvotes{
    right: 15px;
    top: 15px;
    width:auto;
    height:50px;
    z-index: 60;
   
    position: absolute;
}
.flag-lead{
    background-position: left top;
    background-size: auto 100%;
    float: left;
    height: 20px;
    width: 40px;
    margin-left: 10px;
    margin-top: 10px;

}

.qtt-run{
    width: 1000px;
    height: 300px;
    overflow:hidden;
    
    background-size: 100% 100%;
    position: fixed;
    z-index: 90;
    left: 1000px;
    top: 0;
    color: black;

    background-repeat: no-repeat;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.top-five{
    width: 520px;
    height: 400px;
    overflow:hidden;
    padding-left: 50px;
    
    background-size: 100% 100%;
    position: fixed;
    z-index: 90;
    left: -1280px;
    top: 0;
    color: black;

    background-repeat: no-repeat;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.standing-qtt{
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}
.standing-qtt2{
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

.gridview{
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    float: left; 
    margin-bottom: 20px;
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}
.body-event3{
     width: calc(100% - 60px);
      width: -moz-calc(100% - 60px);
    /* WebKit */
    width: -webkit-calc(100% - 60px);
    /* Opera */
    width: -o-calc(100% - 60px);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -20px;
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   overflow: hidden;
   height: auto;
   top: 300px;
    padding-left:20px;
    padding-right:20px;
    z-index: 99;
    font-family: gilroy;
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.head-event2{
     width: calc(100% - 40px);
      width: -moz-calc(100% - 40px);
    /* WebKit */
    width: -webkit-calc(100% - 40px);
    /* Opera */
    width: -o-calc(100% - 40px);
  
    text-align: center;
   color: white;
    padding:20px;
    font-family: gilroy;
    font-size:30px;wswq4222222221
    overflow:auto;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;
}


.head-event-fe{
     width: 100%;
  
    text-align: center;
   color: white;
    font-family: gilroy;
    font-size:30px;
   
    overflow:auto;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;
}
.head-event-box-fe{
    width: calc(100% - 110px);
      width: -moz-calc(100% - 110px);
    /* WebKit */
    width: -webkit-calc(100% - 110px);
    /* Opera */
    width: -o-calc(100% - 110px);
    height: 100px;
    text-align: left;
   color: white;
    font-family: gilroy;
    font-size:30px;
    background-color: #14b7ed;
    overflow:auto;
    float: left;
    margin-left: 10px;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;
}
.logo-event-fe{
     height: 100%;
     width: auto;
     float: left;
}
.body-event-fe{
     width: 100%;
  
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   height: 0;
   top: 100px;
    
    z-index: 99;
    font-family: gilroy;
    background-size: 100% 100%;
    overflow:hidden;
    visibility: hidden;
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

.driver-list-fe{
    width:1528px;
    margin-bottom: 2px;
    height: auto;
    float:left;
    overflow:auto;
     background-image: url(overlays/fe/img/bg-driverlist.png);
   
    background-position: left center;
    background-color: #e2e2e2; 
    background-repeat: no-repeat;
   

}
.driver-list-idds{
    width:1528px;
    margin-bottom: 2px;
    height: auto;
    float:left;
    overflow:auto;
   color: #fff;
   
    background-color: #6a6a6a; 
   

}
.driver-list-fe-polos{
    width:750px;
    margin-bottom: 2px;
    height: 45px;
    float:left;
    overflow:auto;
    
   
   

}
.driver-list-fe-polos .comaprelaphead{
    width:120px;
    margin-bottom: 2px;
    height: auto;
    float:right;
    overflow:auto;
    font-size: 18px;
    line-height:38px;
    height:40px;
   background-color: #e2e2e2; 
   color: #000;
   font-family:polarisbold;
   margin-left: 10px;

}
.driver-list-number-fe{
    width:40px; 
    margin-right: 30px;
    float:left;
    font-size: 18px;
    line-height:38px;
    height:40px;
    font-family:polarisbold;
    text-align:center;
    color: white;

}

.driver-list-fe .comaprelaphead{
    width:120px;
    margin-bottom: 2px;
    height: auto;
    float:right;
    overflow:auto;
    font-size: 18px;
    line-height:38px;
    height:40px;
   color: #000;
   font-family:polarisbold;
   margin-left: 10px;

}

.driver-list-flag-fe{
    width:410px;
    padding-left: 90px;
    height: 40px;
    float:left;
    font-family: polarisbold;
   text-align:left;
   font-size: 18px;
   line-height:38px;
     background-image: url(overlays/fe/img/bg-flag-city.png);
   color: white;
    background-position: left center;
    background-color: #2c3036; 
    background-repeat: no-repeat;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
   

}
.driver-list-name-fe{
   width:500px; 
   max-width:500px;
   float:left;
   font-family: polarisbold;
   text-align:left;
   font-size: 18px;
   line-height:38px;
   height:40px; 
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}
.driver-list-poin-fe{
   width:70px; 
   float:left;
   font-family: polarisbold;
   text-align:center;
   font-size: 18px;
   line-height:38px;
   height:40px; 
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}

.gridview2{
    width: 100%; 
    height: 800px; 
    overflow: auto; 
    float: left; 
    margin-bottom: 20px;
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}
.box4grid{
    height: 800px;
    width: 1200px;
   float: left;
     -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;

}
.box4gridcon{
    height: 1000px;
    width: 6000px;
    position: absolute;
    top: 15px;
    left: 1200px;
     -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;

}
.gridboxdriver{
    width:545px;
    margin-left:10px;
   
    height: auto;
    float:left;
    overflow:auto;
    color:white;

}
.gridboxdriver .imgcon{
    width:100%;
    height: auto;
    float:left;
    overflow:auto;
    text-align: center;
    margin-bottom: -5px;
    background-image: url(overlays/fe/img/bg-img-grid.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
.gridboxdriver .imgcon img{
    
    height: 165px;
}
.gridboxdriver .drivernamecon{
    
    width:470px;
    
    float:left;
    font-family: fetitle;
    text-align:left;
    font-size: 30px;
    height:60px; 
    overflow: hidden;
    padding-bottom: 10px;
    margin-top: -5px;
    border-bottom: solid #9badbb 1px;
}

.gridboxdriver .drivernamecon .posisi{
    width: 60px;
    height: 60px;
    float: left;
    line-height: 60px;
    font-size: 40px;
    font-family: fetitle;
    color: #1d2379;
    text-align: center;
    background-color:#14b6ec;

}
.gridboxdriver .drivernamecon .driver{
    width: calc(100% - 75px);
    width: -moz-calc(100% - 75px);
    /* WebKit */
    width: -webkit-calc(100% - 75px);
    /* Opera */
    width: -o-calc(100% - 75px);
    padding-left: 15px;
    background-color:#14b6ec;
    height: 40px;
    float: left;
    line-height: 40px;
    font-size: 28px;
    font-family: fetitle;
    color: #fff;
    text-align: left;

}
.gridboxdriver .drivernamecon .city{
    width: calc(100% - 75px);
    width: -moz-calc(100% - 75px);
    /* WebKit */
    width: -webkit-calc(100% - 75px);
    /* Opera */
    width: -o-calc(100% - 75px);
    padding-left: 15px;

    height: 20px;
    float: left;
    line-height: 18px;
    font-size: 13px;
    font-family: polarismed;
    color: #fff;
    background-color: #25313f;
    text-align: left;

}

.gridboxdriver .drivernamecon .fastest{
    width: 120px;
    padding: 10px;

    height: auto;
    float: left;
    line-height: 18px;
    font-size: 15px;
    font-family: polarismed;
    color: #fff;
    background-color: #25313f;
    text-align: left;

}
.gridboxdriver .drivernamecon .fastest2{
    width: 80px;
    padding: 10px;

    height: auto;
    float: left;
    line-height: 18px;
    font-size: 15px;
    font-family: polarismed;
    color: #000;
    background-color: #e2e2e2;
    text-align: left;

}

.gridboxdriver .laptime{
    width:140px;
    height: 26px;
    float:left;
    overflow:hidden;
    text-align: center;
    background-color: white;
    color: #888;
   
    margin-top: 5px;
    font-size: 17px;
    font-family: polarismed;
}

.body-event-fe2{
     height: 800px;
     width: 40000px;
  
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   
   top: 100px;
    
    z-index: 99;
    font-family: gilroy;
    background-size: 100% 100%;
    
    visibility: visible;
   
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}
.pole{
    width: 0;
    height: 570px;
    position: fixed;
    top: 0;
    left: 400px;
    overflow: hidden;
    z-index: 50;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;

}
.pole .head-fe{
    width: 100%;
    height: 100px;
    text-align: left;
   
    font-family: fetitle;
    font-size:35px;
   background-color: #2e323a;
    overflow:hidden;
    float: left;
    color: white;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;
}

#wrapper2 {
    min-height:100%;
    width: 100%;
 position: relative;
 opacity: 0;
 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    bottom: 0;
}

.pole .driver-fe{
    width: 100%;
    height: 470px;
    text-align: center;
    float: left;
   background-image: url(overlays/fe/img/bg-racewinner.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    
}
.pole .driver-fe img{
    margin-left: -35px;
    height: 470px;
    position: inline;
    
    
}

.gymlivedriver{
    width:700px;
    margin-left:10px;
   
    height: auto;
    float:left;
    overflow:auto;
    color:#001e47;

}
.gymlivedriver .imgcon{
    width:auto;
    height: auto;
    float:left;
    overflow:auto;
    text-align: center;
   
}
.gymlivedriver .imgcon img{
    
    height: 110px;
    margin-top: 10px;
}
.gymlivedriver .drivernamecon{
    
    width:520px;
    
    float:left;
    font-family: segoe;
    text-align:left;
    font-size: 40px;
    height:60px; 
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: solid #9badbb 1px;
}

.gymlivedriver .drivernamecon .driver{
    width: calc(100% - 75px);
    width: -moz-calc(100% - 75px);
    /* WebKit */
    width: -webkit-calc(100% - 75px);
    /* Opera */
    width: -o-calc(100% - 75px);
    padding-left: 15px;
   
    height: 40px;
    float: left;
    line-height: 50px;
    font-size: 40px;
    margin-bottom: -10px;
    
    overflow:hidden;
   
    text-align: left;

}
.gymlivedriver .drivernamecon .city{
    width: calc(100% - 75px);
    width: -moz-calc(100% - 75px);
    /* WebKit */
    width: -webkit-calc(100% - 75px);
    /* Opera */
    width: -o-calc(100% - 75px);
    padding-left: 15px;

    height: 20px;
    float: left;
    line-height: 18px;
    font-size: 13px;
  
    text-align: left;

}

.gymlivedriver .drivernamecon .fastest{
    width: 120px;
    padding: 10px;

    height: auto;
    float: left;
    line-height: 30px;
    font-size: 27px;
    
    text-align: left;

}
.gymlivedriver .drivernamecon .fastest2{
    width: 80px;
    padding: 10px;

    height: auto;
    float: left;
    line-height: 18px;
    font-size: 15px;
   
    text-align: left;

}

.gymlivedriver .laptime{
    width:140px;
    height: 26px;
    float:left;
    overflow:hidden;
    text-align: center;
    background-color: white;
   
    margin-top: 5px;
    font-size: 17px;
}

.body-event-gym{
     width: 100%;
  
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   height: 0;
   top: 180px;
    
    z-index: 99;
    font-family: segoe;
    background-size: 100% 100%;
    overflow:hidden;
    visibility: hidden;
   
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

.driver-list-gym{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
     background-image: url(overlays/gymkhana/img/bg-list-white.png);
   
    background-size: 100% 100%;
   
    color: #001e47;
    background-repeat: no-repeat;
   

}
.driver-list-gym2{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
    color: #001e47;
     background-image: url(overlays/gymkhana/img/bg-list-blue.png);
     background-size: 100% 100%;
   
    
    background-repeat: no-repeat;
   

}
.driver-list-top5-red{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
    color: #001e47;
     background-image: url(overlays/gymkhana/img/top5-red.png);
     background-size: 100% 100%;
   
    
    background-repeat: no-repeat;
   

}
.driver-list-top5-blue{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
    color: #001e47;
     background-image: url(overlays/gymkhana/img/top5-blue.png);
     background-size: 100% 100%;
   
    
    background-repeat: no-repeat;
   

}
.driver-list-number-gym{
    width:85px; 
    margin-right: 30px;
    float:left;
    font-size: 28px;
    line-height:45px;
    height:50px;
    font-family:segoe;
    text-align:center;
    

}

.driver-list-flag-gym{
    width:410px;
    padding-left: 90px;
   
    float:left;
    font-family: segoe;
   text-align:left;
   font-size: 28px;
    line-height:45px;
    height:50px;
    
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
   

}
.driver-list-name-gym{
   width:600px; 
   max-width:600px;
   float:left;
   font-family: segoe;
   text-align:left;
   font-size: 28px;
    line-height:45px;
    height:50px;
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}
.driver-list-poin-gym{
   width:70px; 
   float:left;
   font-family: segoe;
   text-align:center;
   font-size: 28px;
    line-height:45px;
    height:45px;
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}

.start-download {
    text-align: center;
    display: none;
}

.download-progress-container {
   float:left;
    border: 1px solid #cccccc;
    padding: 2px;
    display: none;
    width: 200px;
    height: 25px;
    margin-top: 10px;
}

.download-progress {
    background-color: #2980b9;
    display: inline-block;
    height: 100%;
}

.save-file {
    color: #2980b9;
    text-decoration: none;
    display: none;
    text-align: left;
    margin-top: 17px;
}

.save-file:hover {
    text-decoration: underline;
}

.driver-list-ivtc-head{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
    color: #ffffff;
     background-image: url(overlays/ivtc/img/bg-list-black.png);
     background-size: 100% 100%;
   
    
    background-repeat: no-repeat;
   

}

.driver-list-ivtc-red{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
    color: #000000;
     background-image: url(overlays/ivtc/img/bg-list-red.png);
     background-size: 100% 100%;
   
    
    background-repeat: no-repeat;
   

}
.driver-list-ivtc-white{
    width:1820px;
    margin-bottom: 2px;
    margin-left: 50px;
    height: auto;
    float:left;
    overflow:auto;
     background-image: url(overlays/gymkhana/img/bg-list-white.png);
   
    background-size: 100% 100%;
   
    color: #000000;
    background-repeat: no-repeat;
   

}
.driver-list-number-ivtc{
    width:85px; 
    margin-right: 30px;
    float:left;
    font-size: 25px;
    line-height:40px;
    height:45px;
    font-family:segoe;
    text-align:center;
    

}

.driver-list-flag-ivtc{
    width:410px;
    padding-left: 90px;
   
    float:left;
    font-family: segoe;
   text-align:left;
   font-size: 25px;
    line-height:40px;
    height:45px;
    
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
   

}
.driver-list-name-ivtc{
   width:600px; 
   max-width:600px;
   float:left;
   font-family: segoe;
   text-align:left;
   font-size: 25px;
    line-height:40px;
    height:45px;
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}
.driver-list-poin-ivtc{
   width:70px; 
   float:left;
   font-family: segoe;
   text-align:center;
   font-size: 25px;
    line-height:40px;
    height:45px;
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    


}
.winners-box-ivtc{
    width:33.33%;
    height: auto;
    text-align: center;
    float:left;
    overflow:auto;
    color: black;
    font-family: gilroy;
}
.winners-box-ivtc img{
    width:65%;
}

.winners-box-ivtc span{
    background-image: url(overlays/ivtc/img/bg-list-red-small.png);
    background-size: 100% 100%;
    
    padding: 5px 10px 5px 10px;
}


.content-ids-v2{
    width: 1920px;
    height: 1080px;
    overflow: auto;
     background-image: url(overlays/ids-v2/img/gradient-black.png);
    background-size: 100% 100%;
    position: relative;
    opacity: 0;
     -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.content-vs-ids-v2{
    width: 1920px;
    height: 1080px;
    overflow: auto;
     background-image: url(overlays/ids-v2/img/gradient-black-versus.png);
    background-size: 100% 100%;
    position: relative;
    opacity: 0;
     -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.content-result-ids-v2{
    width: 1920px;
    height: 1080px;
    overflow: auto;
     background-image: url(overlays/ids-v2/img/gradient-black-result.png);
    background-size: 100% 100%;
    position: relative;
    opacity: 0;
     -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

.run-ids-v2{
    width: 400px;
    padding: 10px;
    text-align: center;
    height: auto;
    font-family: impactNew;
    font-size: 60px;
    
    overflow: auto;
    position: absolute;
    left: 80px;
    bottom: 50px;
}
.driver-ids-v2{
    width: 670px;
    height: 200px;
    font-family: impactNew;
    font-size: 60px;
    padding-left: 90px;
    padding-bottom: 60px;
    padding-right: 90px;
    overflow: hidden;
    position: absolute;
}
.driver-ids-v2 img{
    width: 200px;
}
.driver-ids-v2 .drivername{
    width: 420px;
    height: 60px;
    line-height: 60px;
    font-family: impactNew;
    font-size: 60px;
    color: white;
    overflow: hidden;
    padding-top: 100px;
}
.driver-ids-v2 .teamname{
    width: 420px;
    height: 60px;
    line-height: 45px;
    font-family: impactNew;
    font-size: 35px;
    color: white;
    overflow: hidden;
}
.juri-ids-v2{
    width:25%;
    margin-left: 40%;
    float:left;
    text-align: center;
    font-size:30px;
    font-family: impactNew;
    line-height:35px;
    background-color: #6b6b6b;
    border-radius: 3px;
    border: solid 5px #262626;
    opacity: 1;
    color: #ffffff;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.result-anim-ids-v2{
    height: 100px;
    padding-top: 0;
    overflow: auto;
    width: 100%;

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    opacity: 0;
    position: absolute;
    bottom: 15px;
    left:0;
    color: black;
    font-size: 55px;
    font-family: impactNew;
}

.result-anim-ids-v2 span{
   background-color: #ff0000;
   color: #ffffff;
   padding: 0px 5px 0px 5px ;
   border-radius: 3px;
}
.juri-con-ids-v2{
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
     width: 400px;
    padding: 10px;
    overflow: hidden;
}

.body-event-ids-v2{
     width: calc(100% - 60px);
      width: -moz-calc(100% - 60px);
    /* WebKit */
    width: -webkit-calc(100% - 60px);
    /* Opera */
    width: -o-calc(100% - 60px);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -20px;
    text-align: center;
    position: absolute;
   color: white;
   left: 0;
   height: 0;
   top: 100px;
    padding:20px;
    z-index: 99;
    font-family: impactNew;
    background-image: url(overlays/ids-v2/img/bracket-bg.png);
    background-size: 100% 100%;
    overflow:hidden;
    opacity: 0;
   
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.body-event2-ids-v2{
   
    height: 850px;
    overflow:auto;
   position:relative; 
     width: 1828px;
     opacity: 0;
 
    text-align: center;
   color: black;
  overflow:hidden;
   
    z-index: 99;
    font-family: impactNew;
    background-image: url(overlays/ids-v2/img/bracket-bg.png);
    background-size: 100% 100%;
  
   
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.head-event-ids-v2{
     width: calc(100% - 40px);
      width: -moz-calc(100% - 40px);
    /* WebKit */
    width: -webkit-calc(100% - 40px);
    /* Opera */
    width: -o-calc(100% - 40px);
    height: 125px;
    text-align: center;
   color: white;
    padding:0px 20px 5px 20px;
    margin-bottom: 15px;
    font-family: impactNew;
    font-size:30px;
    overflow:hidden;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;

   
}

.run-ids-v4{
    width: 400px;
    padding: 10px;
    text-align: center;
    height: auto;
    
    overflow: auto;
    position: absolute;
    left: 760px;
    bottom: 10px;
}
.runlead-ids-v4{
    width: 740px;
    padding: 10px;
    text-align: left;
    height: 134px;
    background-image: url(overlays/ids-v4/img/bg-lead.png);
    background-position: left top;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
}
.runchase-ids-v4{
    width: 740px;
    padding: 10px;
    text-align: right;
    height: 134px;
    background-image: url(overlays/ids-v4/img/bg-chase.png);
    background-position: right top;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
}
.runlead-versus-ids-v4{
    width: 740px;
    padding: 10px;
    text-align: left;
    height: 300px;
    background-image: url(overlays/ids-v4/img/bg-lead-versus.png);
    background-position: 260px 118px;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
}
.runlead-versus-ids-v4 img{
    position: absolute;
    left: 10px;
    bottom: 69px;
    height: 275px;
    width: 275px;
}
.runchase-versus-ids-v4{
    width: 740px;
    padding: 10px;
    text-align: right;
    height: 300px;
    background-image: url(overlays/ids-v4/img/bg-chase-versus.png);
    background-position: -15px 118px;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
}
.runchase-versus-ids-v4 img{
    position: absolute;
    right: 10px;
    bottom: 69px;
    height: 275px;
    width: 275px;
}
.juri-ids-v4{
    width:25%;
    margin-left: 40%;
    float:left;
    text-align: center;
    font-size:18px;
    font-family: MontserratExtraBold;
    line-height:30px;
    background-color: #6b6b6b;
    border-radius: 3px;
    border: solid 5px #262626;
    opacity: 1;
    color: #ffffff;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.result-anim-ids-v4{
    height: 100px;
    padding-top: 0;
    overflow: auto;
    width: 100%;

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    opacity: 0;
    position: absolute;
    bottom: 15px;
    left:0;
    color: black;
    font-size: 40px;
    font-family: MontserratExtraBold;
}

.result-anim-ids-v4 span{
   background-color: #d4af37;
   color: #ffffff;
   padding: 0px 5px 0px 5px ;
   border-radius: 3px;
}
.juri-con-ids-v4{
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
     width: 400px;
    padding: 10px;
    overflow: hidden;
}
.head-event-ids-v4{
     width: calc(100% - 40px);
      width: -moz-calc(100% - 40px);
    /* WebKit */
    width: -webkit-calc(100% - 40px);
    /* Opera */
    width: -o-calc(100% - 40px);
    height: 180px;
    text-align: center;
   color: white;
    padding:0px 20px 5px 20px;
    margin-bottom: 15px;
    font-family: impactNew;
    font-size:30px;
    background-image: url(overlays/ids-v4/img/head-bg.png);
    background-position: center top;
    background-size: 1828px;
    background-repeat: no-repeat;
    overflow:hidden;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 100;

   
}

.top-five-d1{
    width: 283px;
    height: 0;
    overflow:hidden;
    background-size: 100% 100%;
    position: fixed;
    z-index: 90;
    left: 0;
    top: 0;
    color: black;
    background-repeat: no-repeat;
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-duration: 1.5s;
}
.top-five-d1-drive-list{
    overflow: auto; 
    height: auto; 
    position: fixed;
    width: 283px;
    top: 200px;
    left: 0;
    opacity: 0;
    padding-top: 83px;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 100;
}
.top-five-d1-drop-zone{
   overflow: auto; 
   height: auto; 
   width: 283px;
   padding-top: 0;
   position: fixed;
   top: 440px;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 100;
}

.driver-name-bg1{
   height: 220px; 
   width: 177px;
   position: fixed;
   top: 60px;
    left: 70px;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    z-index: 0;
}
.driver-name-bg2{
   height: 251px; 
   width: 202px;
   position: fixed;
   top: 100px;
    left: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 1;
}
.driver-name-bg3{
   height: 113px; 
   width: 0;
   position: fixed;
   overflow: hidden;
   top: 102px;
    left: 208px;
    opacity: 1;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    z-index: 1;
}
.driver-name-and-team{
   height: 113px; 
   width: 300px;
   position: fixed;
   top: 115px;
    left: 240px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
}
.driver-name-profile{
   height: 270px; 
   width: 217px;
   position: fixed;
   top: 100px;
    left: 40px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.driver-name-car-number{
   height: 60px; 
   width: 202px;
   position: fixed;
   font-size: 60px;
   font-family: gilroy;
   top: 187px;
    left: 0;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
}

.qtt-result-bg1{
   height: 0; 
   width: 1488px;
   position: fixed;
   overflow: hidden;
    opacity: 1;
    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
    z-index: 0;
}
.qtt-result-bg2{
   height: 470px; 
   width: 399px;
   position: fixed;
   top: 250px;
    left: 64px;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    z-index: 1;
}
.qtt-result-bg3{
  height: 470px; 
   width: 399px;
   position: fixed;
   top: 250px;
    left: 64px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
}
.qtt-result-profile{
   height: 470px; 
   width: 378px;
   position: fixed;
   top: 250px;
    left: 64px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
}
.qtt-result-car-number{
   height: 105px; 
   width: 202px;
   position: fixed;
   font-size: 105px;
   font-family: gilroy;
   top: 600px;
    left: 180px;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
}
.qtt-result-name-and-team{
   height: 180px; 
   width: 550px;
   position: fixed;
   top: 385px;
    left: 340px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
    background-image: url(overlays/ids-d1/img/qtt-result-bg-names.png);
    background-size: 100%;
    background-position: top left;
}
.qtt-result-score{
    height: auto; 
   width: 380px;
   position: fixed;
   font-family: gilroy;
   top: 215px;
    left: 1030px;
    text-align: center;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 3;
}

.run-bg1{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    left: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    z-index: 0;
}
.run-bg2{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    left: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 1;
}
.run-bg3{
   height: 130px; 
   width: 0;
   position: absolute;
   overflow: hidden;
   top: 770px;
    left: 262px;
    opacity: 1;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    z-index: 1;
}
.run-name-and-team{
   height: 113px; 
   width: 300px;
   position: absolute;
   top: 765px;
    left: 240px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
}
.run-profile{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    left: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.run-car-number{
   height: 60px; 
   width: 202px;
   position: absolute;
   font-size: 60px;
   font-family: gilroy;
   top: 912px;
    left: 50px;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
    text-align: center;
}
.run-number{
   height: 78px; 
   width: 0;
   position: absolute;
   top: 91px;
    left: 50px;
    font-family: gilroyLight;
    color: white;
    white-space: nowrap;
    font-size: 60px;
    background-image: url(overlays/ids-d1/img/run-number-bg.png);
     background-size: 100%;
    background-position: top left;
    overflow: hidden;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 0;
}

.run2-bg1{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    right: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    z-index: 0;
}
.run2-bg2{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    right: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 1;
}
.run2-bg3{
   height: 130px; 
   width: 0;
   position: absolute;
   overflow: hidden;
   top: 770px;
    right: 262px;
    opacity: 1;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    z-index: 1;
}
.run2-name-and-team{
   height: 113px; 
   width: 300px;
   position: absolute;
   top: 765px;
    right: 240px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
    text-align: right;
}
.run2-profile{
   height: 251px; 
   width: 202px;
   position: absolute;
   top: 725px;
    right: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.run2-car-number{
   height: 60px; 
   width: 202px;
   position: absolute;
   font-size: 60px;
   font-family: gilroy;
   top: 912px;
    right: 50px;
    text-align: center;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
}
.versus-bg-video {
    position: relative;
    width: 1920px;
    height: 1080px;
    z-index: 0;
}
.versus-driver1-video {
    position: absolute;
    width: 480px;
    opacity: 0;
    height: 853px;
    z-index: 0;
    top: 100px;
    left: 200px;
    z-index: 1;
     -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.versus-driver2-video {
    position: absolute;
    opacity: 0;
    width: 480px;
    height: 853px;
    z-index: 0;
    top: 100px;
    right: 200px;
    z-index: 1;
     -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}

.versus-car-number1{
   height: 105px; 
   width: 202px;
   position: absolute;
   font-size: 105px;
   font-family: gilroy;
   top: 700px;
    left: 450px;
    opacity: 0;
    text-align: right;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
}
.versus-name-and-team1{
   height: 208px; 
   width: 0px;
   overflow: hidden;
   position: absolute;
   top: 710px;
    right: 1250px;
    text-align: right;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
    color: white;
    background-image: url(overlays/ids-d1/img/bg-name-versus-left.png);
    background-position: top right;
    white-space: nowrap;

}
.versus-name-and-team1 .con1{
  position:absolute; 
  top:0px;
  right:0px;
  overflow:hidden;

}

.versus-car-number2{
   height: 105px; 
   width: 202px;
   position: absolute;
   font-size: 105px;
   font-family: gilroy;
   text-align: left;
   top: 700px;
    right: 450px;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 3;
    filter: drop-shadow(5px 5px 3px #000000);
    transform: skew(-10deg);
}
.versus-name-and-team2{
   height: 208px; 
   width: 0px;
   overflow: hidden;
   position: absolute;
   top: 710px;
    left: 1250px;
    text-align: left;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
    color: white;
    background-image: url(overlays/ids-d1/img/bg-name-versus-right.png);
    background-position: top left;
    white-space: nowrap;

}
.versus-name-and-team2 .con2{
  position:absolute; 
  top:0px;
  left:0px;
  overflow:hidden;

}

.seads-versus-bg1{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/seads/img/seads-versus-bg1.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.seads-versus-bg2{
    width: 1920px;
    height: 0;
    background-image: url(overlays/seads/img/seads-versus-bg2.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.seads-versus-bg3{
    width: 0;
    height: 1080px;
    background-image: url(overlays/seads/img/seads-versus-bg3.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 1;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.seads-versus-info{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/seads/img/seads-versus-info.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.seads-versus-info-title{
    width: 1920px;
    height: auto;
    position: absolute;
    font-family: bebas;
    left: 0;
    top: 245px;
    text-align: center;
    z-index: 3;
}
.seads-versus-info-class{
    width: 200px;
    height: auto;
    position: absolute;
    font-family: bebas;
    right: 223px;
    top: 295px;
    font-size: 40px;
    color: white;
    text-align: right;
    z-index: 3;
}
.seads-versus-info-vs{
    width: 1920px;
    height: auto;
    position: absolute;
    font-family: bebas;
    left: 0;
    top: 570px;
    font-size: 100px;
    color: black;
    text-align: center;
    z-index: 3;
}
.seads-versus-info-driver1{
    width: 675px;
    height: 400px;
    position: absolute;
    font-family: bebas;
    left: 235px;
    top: 363px;
    font-size: 100px;
    color: black;
    text-align: center;
    z-index: 3;
}
.seads-versus-info-driver1 .profileimg{
    width: 45%;
    height: auto;
    float: left;
}
.seads-versus-info-driver1 .driverinfo{
    width: 52%;
    padding-left: 3%;
    margin-top: 62px;
    height: auto;
    float: right;
    overflow: hidden;
}
.seads-versus-info-driver1 .flag{
    width: 115px;
    height: auto;
    text-align: left;
}
.seads-versus-info-driver2{
    width: 675px;
    height: 400px;
    position: absolute;
    font-family: bebas;
    left: 1011px;
    top: 533px;
    font-size: 100px;
    color: black;
    text-align: center;
    z-index: 3;
}
.seads-versus-info-driver2 .profileimg{
    width: 45%;
    height: auto;
    float: right;
}
.seads-versus-info-driver2 .driverinfo{
    width: 52%;
    padding-left: 3%;
    margin-top: 62px;
    height: auto;
    float: left;
    text-align: right;
    overflow: hidden;
}
.seads-versus-info-driver2 .flag{
    width: 115px;
    height: auto;
    text-align: right;
}

.seads-runscore-info-driver1{
    width: 675px;
    height: 400px;
    position: absolute;
    font-family: bebas;
    left: 235px;
    top: 363px;
    font-size: 100px;
    color: black;
    text-align: center;
    z-index: 3;
}
.seads-runscore-info-driver1 .profileimg{
    width: 55%;
    height: auto;
    float: left;
}
.seads-runscore-info-driver1 .driverinfo{
    width: 100%;
    padding-left: 3%;
    margin-top: -100px;
    height: auto;
    float: left;
    overflow: hidden;
}
.seads-runscore-info-driver1 .flag{
    width: 100px;
    height: auto;
    margin-left: 50px;
    margin-right: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
    text-align: left;
}
.seads-runscore-info-driver2{
    width: 675px;
    height: 400px;
    position: absolute;
    font-family: bebas;
    left: 1018px;
    top: 363px;
    font-size: 100px;
    color: black;
    text-align: center;
    z-index: 3;
}
.seads-runscore-info-driver2 .profileimg{
    width: 55%;
    height: auto;
    float: right;
}
.seads-runscore-info-driver2 .driverinfo{
    width: 100%;
    padding-left: 3%;
    margin-top: -100px;
    height: auto;
    float: right;
    overflow: hidden;
}
.seads-runscore-info-driver2 .flag{
    width: 100px;
    height: auto;
    margin-left: 20px;
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: right;
    text-align: left;
}
.seads-runscore-result{
    width: 675px;
    height: 400px;
    position: absolute;
    font-family: bebas;
    left: 605px;
    top: 300px;
    font-size: 100px;
    color: black;
    opacity: 0;
    text-align: center;
    z-index: 3;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.juri-con-seads{
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
     width: 655px;
    padding: 10px;
    overflow: hidden;
}
.juri-seads{
    width:25%;
    margin-left: 40%;
    float:left;
    text-align: center;
    font-size:30px;
    padding-top: 5px;
    pading-bottom: 5px;
    font-family: bebas;
    line-height:30px;
    background-color: #6b6b6b;
    opacity: 1;
    color: #ffffff;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.result-anim-seads{
    height: 100px;
    padding-top: 0;
    overflow: auto;
    width: 100%;

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    opacity: 0;
    position: absolute;
    bottom: 15px;
    left:0;
    color: black;
    font-size: 50px;
    font-family: bebas;
}
.result-anim-seads span{
   background-color: #973bd2;
   color: #ffffff;
   padding: 0px 5px 0px 5px ;
   border-radius: 3px;
}

.seads-run-bg1{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/seads/img/seads-run-bg1.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.seads-run-bg2{
    width: 1920px;
    height: 0;
    background-image: url(overlays/seads/img/seads-run-bg2.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.seads-run-info{
    position: fixed;
    left: 635px;
    top: 125px;
    opacity: 0;
    z-index: 3;
    width: 646px;
    height: 592px;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.seads-run-info .logoimg{
    position: absolute;
    left: 127px;
    top: -10px;
}
.seads-run-info .leadchase{
    position: absolute;
    left: 10px;
    top: 215px;
}
.seads-run-info-title{
    width: 635px;
    height: auto;
    position: absolute;
    font-family: bebas;
    left: 0;
    top: 112px;
    text-align: center;
    z-index: 3;
}
.seads-run-driver1{
    width: 635px;
    height: 177px;
    position: absolute;
    font-family: bebas;
    left: 5px;
    top: 204px;
    text-align: center;
    z-index: 3;
}
.seads-run-driver1 img{
    width: auto;
    height: 220px;
    float: left;
}
.seads-run-driver2{
    width: 635px;
    height: 177px;
    position: absolute;
    font-family: bebas;
    left: 5px;
    top: 404px;
    text-align: center;
    z-index: 3;
}
.seads-run-driver2 img{
    width: auto;
    height: 220px;
    float: right;
}


.idds-versus-bg1{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/idds/img/seads-versus-bg1.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.idds-versus-bg2{
    width: 1920px;
    height: 0;
    background-image: url(overlays/idds/img/seads-versus-bg2.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.idds-versus-bg3{
    width: 0;
    height: 1080px;
    background-image: url(overlays/idds/img/seads-versus-bg3.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 1;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.idds-versus-info{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/idds/img/seads-versus-info.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.idds-run-bg1{
    width: 1920px;
    height: 1080px;
    background-image: url(overlays/idds/img/seads-run-bg1.png);
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.idds-run-bg2{
    width: 1920px;
    height: 0;
    background-image: url(overlays/idds/img/seads-run-bg2.png);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.idds-run-driver1{
    width: 635px;
    height: 177px;
    position: absolute;
    font-family: bebas;
    left: 5px;
    top: 204px;
    text-align: center;
    z-index: 3;
}
.idds-run-driver1 img{
    width: auto;
    height: 330px;
    float: left;
    margin-left: -20px;
}
.idds-run-driver2{
    width: 635px;
    height: 177px;
    position: absolute;
    font-family: bebas;
    left: 5px;
    top: 504px;
    text-align: center;
    z-index: 3;
}
.idds-run-driver2 img{
    width: auto;
    height: 330px;
    float: right;
    margin-right: -10px;
}
.ids-v5-runchase-head{
    position: absolute;
    z-index: 3;
    top: 200px;
    left: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.ids-v5-driver-bg{
    position: absolute;
    z-index: 1;
    top: 400px;
    left: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.ids-v5-lead-profile{
  
   width: 255px;
   position: absolute;
   top: 1100px;
    left: 108px;
    opacity: 1;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v5-chase-profile{
  
   width: 255px;
   position: absolute;
   top: 1100px;
    right: 108px;
    opacity: 1;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v5-runhead{
    width: 400px;
    padding: 10px;
    text-align: center;
    height: auto;
    z-index: 5;
    overflow: auto;
    position: absolute;
    left: 760px;
    font-size: 27px;
    line-height:48px;
    bottom: -155px;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}
.ids-v5-run-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 967px;
    left: 79px;
    text-align: center;
    font-size: 37px;
    font-family: Poppins;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v5-run-2name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 967px;
    right: 79px;
    text-align: center;
    font-size: 37px;
    font-family: Poppins;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v5-drivername-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    opacity: 0;
}
.ids-v5-lead-versus-profile{
  
   width: 346px;
   position: absolute;
   top: 383px;
    left: 289px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v5-chase-versus-profile{
  
   width: 346px;
   position: absolute;
   top: 383px;
    right: 289px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v5-bg-box-versus{
    position: absolute;
    z-index: 1;
    top: 200px;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.ids-v5-chaselead-versus{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 1;
    height: 100px;
    width: 1920px;
    background-image: url(overlays/ids-v5/img/ids-v5-chaselead-versus.png);
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-duration: 1.5s;
}
.ids-v5-bg-box-versus-pp{
    position: absolute;
    z-index: 3;
    top: 200px;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.ids-v5-versus-name{
   height: 113px; 
   width: 600px;
   position: absolute;
   top: 763px;
    left: 182px;
    text-align: center;
    font-size: 65px;
    font-family: Poppins;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versus-2name{
   height: 113px; 
   width: 600px;
   position: absolute;
   top: 763px;
    right: 182px;
    text-align: center;
    font-size: 65px;
    font-family: Poppins;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versus-teamname{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 280px;
    left: 231px;
    text-align: center;
    font-size: 28px;
    font-family: PoppinsLight;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versus-2teamname{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 280px;
    right: 231px;
    text-align: center;
    font-size: 28px;
    font-family: PoppinsLight;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versus-fullname{
   height: 113px; 
   width: 600px;
   position: absolute;
   top: 851px;
    left: 171px;
    text-align: center;
    font-size: 28px;
    font-family: PoppinsLight;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versus-2fullname{
   height: 113px; 
   width: 600px;
   position: absolute;
   top: 851px;
    right: 171px;
    text-align: center;
    font-size: 28px;
    font-family: PoppinsLight;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v5-versushead{
    width: 400px;
    padding: 10px;
    text-align: center;
    height: auto;
    z-index: 5;
    overflow: auto;
    position: absolute;
    left: 751px;
    font-size: 27px;
    font-family: PoppinsLight;
    line-height:48px;
    opacity: 0;
    top: 227px;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.ids-v5-result{
    width: 463px;
    padding: 10px;
    text-align: center;
    height: auto;
    font-family: impactNew;
    font-size: 60px;
    z-index: 6;
    overflow: auto;
    position: absolute;
    left: 729px;
    top: 440px;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.ids-v6-run-number{
   height: 60px; 
   width: 15px;
   position: absolute;
   top: 107px;
    left: 95px;
    font-family: latoBold;
    color: white;
    white-space: nowrap;
    font-size: 34px;
    background-image: url(overlays/ids-v6-d1/img/bg-run-number.png);
     background-size: 233px auto;
    background-position: top left;
    overflow: hidden;
    opacity: 1;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 0;
}

.ids-v6-run-lead{
   position: absolute;
   top: 785px;
    left: 288px;
    opacity: 1;
    width: 0px;
    height: 63px;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 0;
}
.ids-v6-run-chase{
   position: absolute;
   top: 785px;
    right: 315px;
    opacity: 1;
    width: 0px;
    height: 63px;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 0;
}
.ids-v6-lead-profile{
  
   width: 194px;
   position: absolute;
   top: 663px;
    left: 104px;
    opacity: 0;
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-duration: 1.5s;
    z-index: 4;
}
.ids-v6-chase-profile{
  
   width: 194px;
   position: absolute;
   top: 663px;
    right: 104px;
    opacity: 0;
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-duration: 1.5s;
    z-index: 4;
}

.ids-v6-driver-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.ids-v6-drivername-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    opacity: 0;
}
.ids-v6-teamname-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    opacity: 0;
}
.ids-v6-run-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 867px;
    left: 116px;
    text-align: left;
    font-size: 29px;
    font-family: lato;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v6-run-2name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 867px;
    right: 116px;
    text-align: right;
    font-size: 29px;
    font-family: lato;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v6-team-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 924px;
    left: 116px;
    text-align: left;
    font-size: 15.5px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v6-team-2name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 924px;
    right: 116px;
    text-align: right;
    font-size: 15.5px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v6-runline-left{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 98px;
    width: 0px;
    height: 1080px;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    opacity: 1;
}
.ids-v6-runline-right{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 98px;
    width: 0px;
    height: 1080px;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    opacity: 1;
}
.ids-v6-bg-box-versus{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.ids-v6-bg-box-versus-vs{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
.ids-v6-bg-box-versusleadchase{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.ids-v6-lead-versus-profile{
  
   width: 250px;
   position: absolute;
   top: 470px;
    left: 425px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v6-chase-versus-profile{
  
   width: 250px;
   position: absolute;
   top: 470px;
    right: 442px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}
.ids-v6-versus-teamname{
   height: 113px; 
   width: 388px;
   position: absolute;
   top: 400px;
    left: 374px;
    text-align: center;
    font-size: 18px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v6-versus-2teamname{
   height: 113px; 
   width: 388px;
   position: absolute;
   top: 400px;
    right: 374px;
    text-align: center;
    font-size: 18px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v6-versus-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 744px;
    left: 312px;
    text-align: center;
    font-size: 40px;
    font-family: lato;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v6-versus-fullname{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 801px;
    left: 306px;
    text-align: center;
    font-size: 16px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v6-versus-2name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 744px;
    right: 312px;
    text-align: center;
    font-size: 40px;
    font-family: lato;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v6-versus-2fullname{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 801px;
    right: 315px;
    text-align: center;
    font-size: 16px;
    font-family: latoReg;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.juri-ids-v6{
    width:25%;
    margin-left: 40%;
    float:left;
    text-align: center;
    font-size:18px;
    font-family: latoBold;
    line-height:30px;
    background-color: #000;
    border-radius: 3px;
    border: solid 5px #bbbbbb;
    opacity: 1;
    color: #ffffff;
     -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}
.result-anim-ids-v6{
    height: 100px;
    padding-top: 0;
    overflow: auto;
    width: 100%;

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    opacity: 0;
    position: absolute;
    bottom: 15px;
    left:0;
    color: black;
    font-size: 40px;
    font-family: latoBold;
}

.result-anim-ids-v6 span{
   background-color: #d4af37;
   color: #ffffff;
   padding: 0px 5px 0px 5px ;
   border-radius: 3px;
}


.seads2-qtt-name-bg{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 60px;
    left: 0px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 0;
}
.seads2-qtt-name-bg{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 60px;
    left: 0px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 0;
}
.seads2-qtt-name-strip{
   height: 1080px; 
   width: 0;
   position: fixed;
   overflow: hidden;
   top: 0px;
    left: 0px;
    opacity: 1;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 1;
}
.seads2-driver-name-profile{
   height: 129px; 
   width: auto;
   position: fixed;
   top: 122px;
    left: 109px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.seads2-driver-name-and-team{
   height: 113px; 
   width: 300px;
   position: fixed;
   top: 135px;
    left: 50px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
}
.seads2-top-five-drive-list{
    overflow: auto; 
    height: auto; 
    position: fixed;
    width: 380px;
    top: 134px;
    left: 105px;
    opacity: 0;
    padding-top: 83px;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 100;
}

.seads2-top-five{
    width: 600px;
    height: 0;
    overflow:hidden;
    background-size: 100% 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    color: black;
    background-repeat: no-repeat;
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-duration: 1.5s;
}
.seads2-top-five-title{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 0;
    left: 0px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-top-five-strip{
   height: 1080px; 
   width: 0;
   position: fixed;
   top: 0;
    left: 0px;
    overflow: hidden;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-top-five-class{
   height: 100px; 
   width: 300px;
   font-family: horizon;
   font-size: 22px;
   position: fixed;
   top: 76px;
    left: 117px;
    color: white;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-leaderboard-bg{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 0;
    left: 0px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 1;
}
.seads2-leaderboard-class{
   height: 100px; 
   width: 300px;
   font-family: horizon;
   font-size: 49px;
   position: fixed;
   top: 185px;
    left: 1180px;
    color: white;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-leaderboard-con{
   height: 440px; 
   width: 1040px;
   font-family: f1-reg;
   font-size: 22px;
   position: fixed;
   top: 350px;
    left: 400px;
    color: white;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-leaderboard-con-inside{
   height: 440px; 
   width: 520px;
   font-family: f1-reg;
   font-size: 22px;
   float: left;
    color: white;
    opacity: 1;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.seads2-qtt-result-profile{
   height: 470px; 
   width: 378px;
   position: fixed;
   top: 390px;
    left: 307px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.seads2-qtt-result-name-and-team{
   height: 100px; 
   width: 400px;
   position: fixed;
   top: 750px;
    left: 336px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
    background-image: url(overlays/seads-v2/img/seads2-qtt-result-drivername-bg.png);
    background-size: 100%;
    background-position: top left;
}
.seads2-qtt-score-bg{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 0;
    left: 0px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}
.seads2-qtt-score{
   height: 100px; 
   width: 200px;
   font-family: f1-reg;
   color: white;
   position: fixed;
   text-align: center;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 3;
}

.seads2-run-driver1{
    width: 310px;
    height: 125px;
    position: fixed;
    font-family: bebas;
    left: 103px;
    top: 116px;
    text-align: center;
    z-index: 3;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.seads2-run-driver1 img{
    width: auto;
    height: 124px;
    margin-left: 10px;
    float: left;
}
.seads2-run-driver2{
    width: 291px;
    height: 125px;
    position: fixed;
    font-family: bebas;
    left: 112px;
    top: 250px;
    text-align: center;
    z-index: 3;
    opacity: 0;
    color: white;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}
.seads2-run-driver2 img{
    width: auto;
    height: 124px;
    margin-left: 10px;
    float: right;
}
.seads2-run-strip{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 0;
    left: 0;
    overflow: hidden;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    opacity: 0;
    z-index: 2;
}
.seads2-run-number{
   height: 78px; 
   width: 200px;
   position: fixed;
   top: 65px;
    left: 67px;
    font-family: horizon;
    color: white;
    font-size: 20px;
   
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 3;
}

.seads2-versus-bg{
   height: 1080px; 
   width: 1920px;
   position: fixed;
   top: 0;
    left: -50px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 1;
}
.seads2-versus-top{
   height: 100px; 
   width: 300px;
   font-family: horizon;
   font-size: 27px;
   position: fixed;
   top: 225px;
    left: 315px;
    color: white;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 2;
}

.seads2-verus-profile-lead{
   height: 470px; 
   width: 378px;
   position: fixed;
   top: 390px;
    left: 415px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.seads2-versus-name-and-team-lead{
   height: 100px; 
   width: 400px;
   position: fixed;
   top: 750px;
    left: 405px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
    background-image: url(overlays/seads-v2/img/seads2-qtt-result-drivername-bg.png);
    background-size: 100%;
    background-position: top left;
}
.seads2-verus-profile-chase{
   height: 470px; 
   width: 378px;
   position: fixed;
   top: 390px;
    left: 1087px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 2;
}
.seads2-versus-name-and-team-chase{
   height: 100px; 
   width: 400px;
   position: fixed;
   top: 750px;
    left: 1097px;
    opacity: 0;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 2;
    color: white;
    background-image: url(overlays/seads-v2/img/seads2-qtt-result-drivername-bg.png);
    background-size: 100%;
    background-position: top left;
}


.ids-v7-lead-profile{
  
   width: 146px;
   position: absolute;
   top: 925px;
    left: 160px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 4;
}
.ids-v7-chase-profile{
  
   width: 146px;
   position: absolute;
   top: 925px;
    right: 160px;
    opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    z-index: 4;
}
.ids-v7-drivername-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    opacity: 0;
}
.ids-v7-drivername-strip{
    position: absolute;
    z-index: 1;
    width: 0;
    height: 1080px;
    background-image: url(overlays/ids-v7/img/ids-v7-qtt-name-bg-strip.png);
    background-size: 1920px 1080px;
    background-position: top left;
    top: 0;
    left: 0;
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
    opacity: 1;
}
.ids-v7-drivername-strip2{
    position: absolute;
    z-index: 1;
    width: 0;
    height: 1080px;
    background-image: url(overlays/ids-v7/img/ids-v7-qtt-name-bg-strip2.png);
    background-size: 1920px 1080px;
    background-position: top right;
    top: 0;
    right: 0;
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
    opacity: 1;
}
.ids-v7-run-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 910px;
    left: 331px;
    text-align: left;
    font-size: 18px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v7-team-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 946px;
    left: 331px;
    text-align: left;
    font-size: 15px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v7-run-name2{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 910px;
    right: 321px;
    text-align: right;
    font-size: 18px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v7-team-name2{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 946px;
    right: 321px;
    text-align: right;
    font-size: 15px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    z-index: 2;
    color: white;
}
.ids-v7-lead-versus-profile{
  
   width: 360px;
   position: absolute;
   top: 348px;
    left: 241px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}

.ids-v7-versus-name{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 744px;
    left: 175px;
    text-align: center;
    font-size: 40px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v7-versus-teamname{
   height: 113px; 
   width: 388px;
   position: absolute;
   top: 826px;
    left: 228px;
    text-align: center;
    font-size: 22px;
    font-family: wellfleet;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: black;
}
.ids-v7-chase-versus-profile{
  
   width: 360px;
   position: absolute;
   top: 348px;
    right: 240px;
    opacity: 0;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    z-index: 4;
}

.ids-v7-versus-name2{
   height: 113px; 
   width: 500px;
   position: absolute;
   top: 744px;
    right: 175px;
    text-align: center;
    font-size: 40px;
    font-family: wellfleet;
    filter: drop-shadow(3px 3px 3px #000000);
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: white;
}
.ids-v7-versus-teamname2{
   height: 113px; 
   width: 388px;
   position: absolute;
   top: 826px;
    right: 228px;
    text-align: center;
    font-size: 22px;
    font-family: wellfleet;
    opacity: 0;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    z-index: 2;
    color: black;
}