@charset "utf-8";
/* CSS Document */

html, body,.race{height:100%;}
.flex-control-nav{display:none;}
.flexslider{height:100%;}

.race_details{width:100%; height:100%; overflow:hidden; position:relative;}
.race_details .txt{width:100%; height:auto; position:absolute; bottom:0; left:0; padding-top:40px; padding-bottom:60px;
 background:-webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 70%/*, rgba(0,0,0,0.8) 50%,rgba(0,0,0,0.8) 60%*/, rgba(0,0,0,1) 100%);
 background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 70%/*, rgba(0,0,0,0.8) 50%,rgba(0,0,0,0.8) 60%*/,  rgba(0,0,0,1) 100%);
background:url(../img/race/txt_bg.png) 0 0 repeat-x;  background-size:auto 100%;}
.race_details .txt.open{
background:-webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 5%,rgba(0,0,0,0.8) 10%, rgba(0,0,0,1) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 5%,rgba(0,0,0,0.8) 10%, rgba(0,0,0,1) 100%);}

.race_details .txt_box{width:70%; position:relative; margin:0 auto /*60px*/;}
.race_details .txt_box h2{color:#fff; font-size:24px; font-style:italic; margin-bottom:20px;}
.race_details .txt_box h2 span{/*background:url(../img/race/icon_1.png) 0 6px no-repeat; background-size:; padding-left:50px; font-size:36px;*/ color:#c5081e; margin-right:60px;}
.race_details .txt_box p{/*padding-left:50px;  */font-size:18px; font-style:italic; line-height:28px; color:#fff; display:none;}
.race_details .txt_box .btn{width:25px; height:25px; position:absolute; top:62px; right:0; cursor:pointer;}
.race_details .txt_box .btn.off{background:url(../img/race/up.png) 0 0 no-repeat;}
.race_details .txt_box .btn.on{background:url(../img/race/down.png) 0 0 no-repeat;}

.race_details .map_icon{width:38px;position:absolute; top:20px; margin-left:-19px; left:50%; z-index:10;}


.race_details .txt_box .s_btn{width:100%; margin-bottom:20px;}

.race_details .txt_box .s_btn a{width:11%;}
.race_details .txt_box .s_btn a img{width:100%; display:block;}
.race_details .txt_box .s_l{float:left;}
.race_details .txt_box .s_r{float:right;}






@media(max-width:1400px){
	.race_details .txt_box p{font-size:14px; line-height:24px;}
	.race_details .txt{padding-bottom:40px;}
}


@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0,-5px,0);
    transform: translate3d(0,-5px,0);
  }

  0%,20%, 40%, 60%, 80% ,100%{
    -webkit-transform: translate3d(0,5px,0);
    transform: translate3d(0,5px,0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0,-5px,0);
    transform: translate3d(0,-5px,0);
  }

  0%,20%, 40%, 60%, 80% ,100%{
    -webkit-transform: translate3d(0,5px,0);
    transform: translate3d(0,5px,0);
  }
}

.map_icon {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration:5s;
  animation-duration:5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function:linear;
  animation-timing-function:linear;
}

.btn {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration:4s;
  animation-duration:4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function:linear;
  animation-timing-function:linear;
}




