a:hover{
  transition: all 0.2s ease;
}
#bg-img{
/*
  background-image:url(../images/bg-streetcub2.jpg);
  background-color: #191919;
  background-repeat: no-repeat;*/

  background:url(../images/bg-touring-2.jpg) #000 no-repeat fixed ;
    background-size: 100%;

}
.right-auto{
  right: auto !important;
}
.img-logo{
  height: 100px;
}
.box-header{
  padding: 0px 75px !important;
}
.box-head{
  background: rgba(0,0,0,0.4);
  border: none;
}
.box-nav{
  padding: 30px;
}
.box-nav li{
  background: rgba(0,0,0,0.4);
  padding: none !important;
  margin-right: 1px;
}
.box-nav li:hover{
  background: rgba(0,0,0,1);
}
.box-nav li a{
  padding: 10px 25px !important;
  color: #fff !important;
  font-size: 12px;
}
.box-desc-profile{
  padding: 10px;
}
.box-name{
  font-size: 16px;
  color: #fff;
}
.box-log{
  font-size: 12px;
  color: #ccc;
}
.img-profile{
  width: 60px;
  height: 60px;
}
.scl-name{
  font-size: 10px;
  vertical-align: middle;
  padding: 10px;
}
.scl-name-ig{
  font-size: 10px;
  padding: 0px 10px;
  margin-top: -5px;
}
.box-social{
  padding: 15px 5px;
  color: #fff;
  font-size: 16px;
}
.social-box{
  width: 35px;
  height: 35px;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  border-radius: 20px;
}
.fb{
  background: #3C599D;
}
.tw{
  background: #5DA9F0;
}
.df{
  background: red;
}
.ig{
  background: #3A70A4;
}

.link{
  color: #fff;
}
.link:hover{
  color: #ccc;
  text-decoration: none;
}
.link-red{
  color: red;
}
.link-red:hover{
  color: #f90;
  text-decoration: none;
}
.link-a{
  color: #ccc;
}
.link-a:hover{
  color: #999;
  text-decoration: none;
}
.align-left{
  text-align: left;
}
.align-right{
  text-align: right;
}
.left{
  float: left;
}
.right{
  float: right;
}
.clean{
  clear: both;
}

#main-logo{
  display: block;
}
#second-logo{
  display: none;
}

.box-slider{
  margin-top: 20px;
}
.nopadding{
  padding: 0px;
}
.nomargin{
  margin: 0px;
}
.title-main{
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  vertical-align: baseline;
}
.title-second{
  font-size: 28px;
  color: #fff;
  padding-top: 22px
}
.img-main-news{
  width: 100%;
  border: 1px solid (0,0,0,0.1);
}
.pr50{
  padding-right: 50px;
}
.box-latest{
  margin-bottom: 20px;
}
.main-news{
  position: relative;
  width: 100%;
  margin: 10px 0;
}
.img-main-news{
  
}
.box-desc-news{
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,1));
}
.title-news{
  font-size: 32px;
  color: #fff;
}
.subtitle-news{
  color: red;
  font-size: 26px;
  margin-right: 5px;
}
.date-news{
  margin-top: 12px;
}
.title-second-news{
  font-size: 22px;
  color: red;
}
.subtitle-second-news{
  color: #fff;
  font-size: 16px;
  padding-bottom: 15px;
}
.date-second-news{
  margin-top: 10px;
  color: #ccc;
}
.box-second-news{
  margin-top: 10px;
/*   background: linear-gradient(150deg, rgba(0,0,0,0.4), rgba(255,255,255,0.1)); */
 background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.1);
}
.second-news{
  margin-bottom: 30px;
}
.p50{
  padding: 50px
}

.red{
  color: red;
}
.box-content{
  margin-top: 20px;
}
.box-photo{
  margin: 50px 0 0 0;
  padding: 60px 50px 80px 50px;
  background-image:url(../images/bg2.png);
  border-top: 3px solid #666;
  border-bottom: 3px solid #666;
}
.photo-box:hover{
  opacity: 0.5;
  transition: all 0.5s ease;
}
.list-photo{
  background: #000;
}
.box-club{
  margin: 0;
  padding: 60px 50px 80px 50px;
  background-image:url(../images/bg3.png);
  background-color: #060606;
  background-repeat: no-repeat;
  background-size: 100%;
  border-bottom: 3px solid #666;
}
.title-club{
  font-size: 72px;
  font-weight: bold;
  color:  #fff;
}
.footer{
  margin: 0;
  padding: 60px 50px 80px 50px;
  background-color: transparent;
}
.box-desc{
  color: #999;
  font-size: 15px;
}
.link-footer{
  color: #999;
  font-size: 14px;
  padding: 10px 0px 10px 35px;
}
.box-event{
  margin-top: 10px;
}
.form-input{
  margin: 10px 0;
  color: #fff;
}
.input-style{
  border-radius: 0px;
  border: none;
  margin:none;
  box-shadow:none;
  background: transparent;
}
.box-input{
  background: #fff;
  padding: none;
  border: 1px solid red;
}
.btn-str{
  border: none;
  padding: 0 120px;
}
.box-line{
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 10px 0;
}
.box-news-img{
  margin: 10px 0;
  border: 1px solid rgba(0,0,0,0.1);
}

.color-text{
  color: #ccc;
}
.box-photo-detail{
  border:1px solid rgba(0,0,0,0.1);background:#999;
}  
.pdg{
  padding:0 10px 10px 0;
}
.box-contact{
  margin: 10px 0;
  padding: 60px 50px;
  min-height: 200px;
  background: linear-gradient(150deg, rgba(0,0,0,0.4), rgba(255,255,255,0.1));
  border: 1px solid rgba(0,0,0,0.1);
}
.title-contact{
  font-size: 32px;
  text-align: center;
  width: 100%;
  color: red;
}
.title-contact-desc{
  font-size: 14px;
  text-align: center;
  width: 100%;
  color: #fff;
}
.box-c{
  padding: 20px;
}
.list-desc{
  margin: 10px 0;
}
.ct-name{
  font-size: 14px;
  vertical-align: middle;
  padding: 0 10px;
}
.font-style{
  font-size: 14px;
  color: #fff;
}
.box-img-profile{
  width: 100%;
}
.box-profile{
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .img-logo{
    height: 80px;
  }
  .scl-name, .scl-name-ig{
    display: none;
  }
}

@media (max-width: 980px) {
  .pr50{
    padding-right: 0px;
  }
}

@media (max-width: 768px) {
  .img-logo{
    height: 80px;
  }
  #main-logo{
    display: none;
  }
  #second-logo{
    display: block;
  }
  .box-header{
    padding: 10px 45px !important;
  }
  .box-nav{
    padding: 0px;
  }
  .scl-name, .scl-name-ig{
    display: none;
  }
  .mt-slider{
    margin-top: -15px;
  }
  .pr50{
    padding-right: 0px;
  }

  .title-news{
    font-size: 22px;
    color: #fff;
  }
  .subtitle-news{
    color: red;
    font-size: 16px;
    margin-right: 5px;
  }
  .date-news{
    margin-top: 1px;
  }
  .title-space{
    height: 50px;
  }
  .box-club{
    margin: 0 0 50px 0;
    padding: 60px 50px 80px 50px;
    background-image:url(../images/bg3.png);
    background-color: #060606;
    background-repeat: repeat;
    background-size: 100%;
    border-bottom: 3px solid #666;
  }
  .title-club{
    font-size: 39px;
    margin-bottom: 20px;
    font-weight: bold;
    color:  #fff;
  }
}

@media (max-width: 480px){
  .img-logo{
    height: 50px;
  }
  #main-logo{
    display: none;
  }
  #second-logo{
    display: block;
  }
  .box-header{
    padding: 15px !important;
  }
  .box-nav{
    padding: 0px;
  }
  .img-profile{
    width: 50px;
    height: 50px;
  }
  .scl-name, .scl-name-ig{
    display: none;
  }
  .mt-slider{
    margin-top: -30px;
  }
  .pr50{
    padding-right: 0px;
  }

  .title-news{
    font-size: 22px;
    color: #fff;
  }
  .subtitle-news{
    color: red;
    font-size: 16px;
    margin-right: 5px;
  }
  .date-news{
    margin-top: 1px;
  }
  .title-space{
    height: 50px;
  }
  .box-club{
    margin: 0 0 50px 0;
    padding: 60px 50px 80px 50px;
    background-image:url(../images/bg3.png);
    background-color: #060606;
    background-repeat: repeat;
    background-size: 100%;
    border-bottom: 3px solid #666;
  }
  .title-club{
    font-size: 19px;
    font-weight: bold;
    color:  #fff;
    margin-bottom: 20px;
  }
  .link-footer{
    color: #999;
    font-size: 14px;
    padding: 10px 0px;
  }
  a.video span {
    background-size: 400%;
  }
}

/*-- button triangle --*/
.button-1 {
  background: #2E2E2E;
  display: block;
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 0 30px 5px 0;
  padding: 15px;
  position: relative;
  text-decoration: none;
  transition: background 0.25s;
}

.button-1:hover {
  color: #ccc;
  text-decoration: none;
}

.button-1:after {
  background: #2E2E2E;
  content: "\0020";
  display: block;
  height: 100%;
  left: 100%;
  position: absolute;
  top: 0;
  width: 30px;
}

.button-1.triangle:after {
  background: none;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 80px solid #2E2E2E;
  display: block;
  height: 0;
  left: auto;
  position: absolute;
  right: -30px;
  top: 0;
  width: 0;
}
.button-red {
  background: red;
  display: block;
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 0 30px 5px 0;
  padding: 15px;
  position: relative;
  text-decoration: none;
  transition: background 0.25s;
}

.button-red:hover {
  color: #ccc;
  text-decoration: none;
}

.button-red:after {
  background: red;
  content: "\0020";
  display: block;
  height: 100%;
  left: 100%;
  position: absolute;
  top: 0;
  width: 30px;
}

.button-red.triangle:after {
  background: none;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 59px solid red;
  display: block;
  height: 0;
  left: auto;
  position: absolute;
  right: -30px;
  top: 0;
  width: 0;
}
.bg-red{
  background: red;
}

/*-- slider --*/
.arrow-left{
  top:0px;left:12px;width:40px;height:58px;
}
.arrow-right{
  top:0px;right:12px;width:40px;height:58px;
}
.box-jssor{
  position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 350px; overflow: hidden; visibility: hidden;
}
.box-loading{
  position: absolute; top: 0px; left: 0px;
}
.box-loading-1{
  filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;
}
.box-loading-2{
  position:absolute;display:block;background:url('../img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;
}
.slider-title-main{
  position: absolute; top: 30px; left: 30px; width: 480px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px;
}
.slider-title-second{
  position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;
}
.jssor-nav{
  bottom:16px;right:16px;
}
.jssor-slides{
  cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 350px; overflow: hidden;
}

/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div           (normal)
.jssorb05 div:hover     (normal mouseover)
.jssorb05 .av           (active)
.jssorb05 .av:hover     (active mouseover)
.jssorb05 .dn           (mousedown)
*/
.jssorb05 {
    position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
    position: absolute;
    /* size of bullet elment */
    width: 16px;
    height: 16px;
    background: url('../img/b05.png') no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l                  (normal)
.jssora22r                  (normal)
.jssora22l:hover            (normal mouseover)
.jssora22r:hover            (normal mouseover)
.jssora22l.jssora22ldn      (mousedown)
.jssora22r.jssora22rdn      (mousedown)
*/
.jssora22l, .jssora22r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 58px;
    cursor: pointer;
    background: url('../img/a22.png') center center no-repeat;
    overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }






a.video span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/play-btn.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
}
a.video span:hover {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/play-btn-hover.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
  transition: all 0.5s ease;
}

a.photo span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/view-btn.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
}
a.photo span:hover {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/view-btn-hover.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
  transition: all 0.5s ease;
}
.img-photo-list{
  width: 100%;
}

.tbl_agenda{
  margin-bottom: 20px;
}
.tbl_agenda tr td{
  padding: 5px;
}