/*
Theme Name: Kaijin Trading
Theme URI: http://www.kaijin.co.jp/
Description: Kaijin Trading Exclusive Theme
Version: 1.0
Author: Taisuke Inui
Author URI: https://www.samurai-web-works.com/
*/
/*
[2]MARGIN-CLASS
===================================*/
.m0auto{margin:0 auto;}
/*margin top*/
.mT01{margin-top:1px;}
.mT02{margin-top:2px;}
.mT03{margin-top:3px;}
.mT04{margin-top:4px;}
.mT05{margin-top:5px;}
.mT10{margin-top:10px;}
.mT15{margin-top:15px;}
.mT20{margin-top:20px;}
.mT25{margin-top:25px;}
.mT30{margin-top:30px;}
.mT35{margin-top:35px;}
.mT40{margin-top:40px;}
.mT45{margin-top:45px;}
.mT50{margin-top:50px;}
/*margin right*/
.mR00{margin-right:0px;}
.mR05{margin-right:5px;}
.mR10{margin-right:10px}
.mR15{margin-right:15px;}
.mR20{margin-right:20px;}
.mR25{margin-right:25px;}
.mR30{margin-right:30px;}
.mR40{margin-right:40px;}
.mR42{margin-right:42px;}
.mR47{margin-right:47px;}
.mR77{margin-right:77px;}

/*margin bottom*/
.mB05{margin-bottom:5px;}
.mB08{margin-bottom:8px;}
.mB10{margin-bottom:10px;}
.mB15{margin-bottom:15px;}
.mB20{margin-bottom:20px;}
.mB25{margin-bottom:25px;}
.mB30{margin-bottom:30px;}
.mB35{margin-bottom:35px;}
.mB40{margin-bottom:40px;}
.mB43{margin-bottom:43px;}
.mB50{margin-bottom:50px;}
.mB60{margin-bottom:60px;}
.mB70{margin-bottom:70px;}
.mB75{margin-bottom:75px;}
.mB80{margin-bottom:80px;}
.mB90{margin-bottom:90px;}
.mB95{margin-bottom:95px;}
.mB100{margin-bottom:100px;}
.mB130{margin-bottom:130px;}
.mB160{margin-bottom:160px;}
.mB200{margin-bottom:200px;}
.mB250{margin-bottom:250px;}
.mB300{margin-bottom:300px;}
.mB400{margin-bottom:400px;}
.mB600{margin-bottom:600px;}
.mB700{margin-bottom:700px;}
.mB800{margin-bottom:800px;}

/*margin left*/
.mL05{margin-left:5px;}
.mL10{margin-left:10px;;}
.mL14{margin-left:14px;}
.mL15{margin-left:15px;}
.mL20{margin-left:20px;}
.mL25{margin-left:25px;}
.mL30{margin-left:30px;}

/*
[3]PADDING-CLASS
===================================*/

/*padding top*/
.pT03{padding-top:3px;}
.pT05{padding-top:5px;}
.pT10{padding-top:10px;}
.pT15{padding-top:15px;}
.pT20{padding-top:20px;}
.pT25{padding-top:25px;}
.pT30{padding-top:30px;}
.pT40{padding-top:40px;}
.pT50{padding-top:50px;}
.pT60{padding-top:60px;}
.pT70{padding-top:70px;}
.pT80{padding-top:80px;}
.pT90{padding-top:90px;}
.pT100{padding-top:100px;}

/*padding right*/
.pR05{padding-right:5px;}
.pR10{padding-right:10px;}
.pR15{padding-right:15px;}
.pR20{padding-right:20px;}
.pR25{padding-right:25px;}
.pR30{padding-right:30px;}

/*padding bottom*/
.pB05{padding-bottom:5px;}
.pB08{padding-bottom:8px;}
.pB10{padding-bottom:10px;}
.pB12{padding-bottom:12px;}
.pB15{padding-bottom:15px;}
.pB20{padding-bottom:20px;}
.pB25{padding-bottom:25px;}
.pB30{padding-bottom:30px;}
.pB40{padding-bottom:40px;}
.pB50{padding-bottom:50px;}
.pB60{padding-bottom:60px;}
.pB70{padding-bottom:70px;}
.pB80{padding-bottom:80px;}
.pB90{padding-bottom:90px;}
.pB100{padding-bottom:100px;}
.pB120{padding-bottom:120px;}

/*padding left*/
.pL05{padding-left:5px;}
.pL10{padding-left:10px;}
.pL15{padding-left:15px;}
.pL20{padding-left:20px;}
.pL25{padding-left:25px;}
.pL30{padding-left:30px;}
.pL50{padding-left:50px;}
/*

/*
[4]WIDTH-CLASS
===================================*/
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w110{width:110px;}
.w140{width:140px;}
.w150{width:150px;}
.w200{width:190px;}
.w210{width:210px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:300px;}
.w310{width:310px;}
.w320{width:320px;}
.w328{width:328px;}
.w330{width:330px;}
.w340{width:340px;}
.w350{width:350px;}
.w360{width:360px;}
.w380{width:380px;}
.w445{width:445px;}
.w450{width:450px;}
.w480{width:480px;}
.w500{width:500px;}
.w550{width:550px;}
.w580{width:580px;}
.w600{width:600px;}
.w645{width:645px;}

/*
[5]HEIGHT-CLASS
===================================*/
.h25{height:25px;}
.h50{height:50px;}
.h100{height:100px;}
.h150{height:150px;}
.h200{height:200px;}
.h250{height:250px;}
.h300{height:300px;}
.h350{height:350px;}
.h400{height:400px;}
.h450{height:450px;}
.h500{height:500px;}
.h550{height:550px;}

/*
[6]FONT-CLASS
===================================*/
.lheight40{
line-height:40px;
}
.f7{font-size:7px;}
.f8{font-size:8px;}
.f9{font-size:9px;}
.f10{font-size:10px;}
.f11{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f15{font-size:15px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}
.f19{font-size:19px;}
.f20{font-size:20px;}
.f21{font-size:21px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f27{font-size:27px;}
.f30{font-size:30px;}
.f33{font-size:33px;}
.red{color: #ff0000;}
.blue{color:#0b3e91;}
.blue a{color:#0065b1;}
.black{color:#000;}
.black a{color:#000;}
.black a:hover { color:#666 } 
.gray{color:#333333;}
.white{color:#ffffff;}
.yellow{ color:#f6ab30;}
.dgray{color:#4b4b4b;}
.lgray{color:#666666;}
.lgray2{color:#bdbbbb;}
.lgray3{color:#a0a0a0;}
.white{color:#ffffff;}
.orange{color:#f47920;}
.fweight100{font-weight:100;}
.placeholder {color:#aaa;}

/* Smartphone （768px） */
@media screen and (max-width: 767px){
.spmT01{margin-top:1px;}
.spmT02{margin-top:2px;}
.spmT03{margin-top:3px;}
.spmT04{margin-top:4px;}
.spmT05{margin-top:5px;}
.spmT10{margin-top:10px;}
.spmT15{margin-top:15px;}
.spmT20{margin-top:20px;}
.spmT25{margin-top:25px;}
.spmT30{margin-top:30px;}
.spmT35{margin-top:35px;}
.spmT40{margin-top:40px;}
.spmT45{margin-top:45px;}
.spmT50{margin-top:50px;}
/*margin right*/
.spmR00{margin-right:0px;}
.spmR05{margin-right:5px;}
.spmR10{margin-right:10px}
.spmR15{margin-right:15px;}
.spmR20{margin-right:20px;}
.spmR25{margin-right:25px;}
.spmR30{margin-right:30px;}
.spmR40{margin-right:40px;}
.spmR42{margin-right:42px;}
.spmR47{margin-right:47px;}
.spmR77{margin-right:77px;}

/*margin bottom*/
.spmB05{margin-bottom:5px;}
.spmB10{margin-bottom:10px;}
.spmB15{margin-bottom:15px;}
.spmB20{margin-bottom:20px;}
.spmB25{margin-bottom:25px;}
.spmB30{margin-bottom:30px;}
.spmB35{margin-bottom:35px;}
.spmB40{margin-bottom:40px;}
.spmB43{margin-bottom:43px;}
.spmB50{margin-bottom:50px;}
.spmB60{margin-bottom:60px;}
.spmB70{margin-bottom:70px;}
.spmB75{margin-bottom:75px;}
.spmB80{margin-bottom:80px;}
.spmB90{margin-bottom:90px;}
.spmB95{margin-bottom:95px;}
.spmB100{margin-bottom:100px;}
.spmB130{margin-bottom:130px;}
.spmB160{margin-bottom:160px;}
.spmB200{margin-bottom:200px;}
.spmB250{margin-bottom:250px;}
.spmB300{margin-bottom:300px;}
.spmB400{margin-bottom:400px;}
.spmB600{margin-bottom:600px;}
.spmB700{margin-bottom:700px;}
.spmB800{margin-bottom:800px;}

/*margin left*/
.spmL05{margin-left:5px;}
.spmL10{margin-left:10px;;}
.spmL14{margin-left:14px;}
.spmL15{margin-left:15px;}
.spmL20{margin-left:20px;}
.spmL25{margin-left:25px;}
.spmL30{margin-left:30px;}

/*
[3]PADDING-CLASS
===================================*/

/*padding top*/
.sppT03{padding-top:3px;}
.sppT05{padding-top:5px;}
.sppT10{padding-top:10px;}
.sppT15{padding-top:15px;}
.sppT20{padding-top:20px;}
.sppT25{padding-top:25px;}
.sppT30{padding-top:30px !important;}

/*padding right*/
.sppR05{padding-right:5px;}
.sppR10{padding-right:10px;}
.sppR15{padding-right:15px;}
.sppR20{padding-right:20px;}
.sppR25{padding-right:25px;}
.sppR30{padding-right:30px;}

/*padding bottom*/
.sppB05{padding-bottom:5px;}
.sppB08{padding-bottom:8px;}
.sppB10{padding-bottom:10px;}
.sppB12{padding-bottom:12px;}
.sppB15{padding-bottom:15px;}
.sppB20{padding-bottom:20px;}
.sppB25{padding-bottom:25px;}
.sppB30{padding-bottom:30px;}

/*padding left*/
.sppL05{padding-left:5px;}
.sppL10{padding-left:10px;}
.sppL15{padding-left:15px;}
.sppL20{padding-left:20px;}
.sppL25{padding-left:25px;}
.sppL30{padding-left:30px;}
.sppL50{padding-left:50px;}

/* img adjustment */
.pic-90p-xs{width:90%; display:block; margin-left:auto; margin-right:auto;}
.pic-80p-xs{width:80%; display:block; margin-left:auto; margin-right:auto;}
.pic-70p-xs{width:70%; display:block; margin-left:auto; margin-right:auto;}
.pic-60p-xs{width:60%; display:block; margin-left:auto; margin-right:auto;}
.pic-50p-xs{width:50%; display:block; margin-left:auto; margin-right:auto;}
    
.text-center-xs{text-align:center !important;}
  
.text-left-xs{text-align:left !important;}
  
.clear-xs{clear:both;}
  
.block-xs{display:block;}
}

.pic-90p{width:90%; display:block; margin-left:auto; margin-right:auto;}
.pic-80p{width:80%; display:block; margin-left:auto; margin-right:auto;}
.pic-70p{width:70%; display:block; margin-left:auto; margin-right:auto;}
.pic-60p{width:60%; display:block; margin-left:auto; margin-right:auto;}
.pic-55p{width:55%; display:block; margin-left:auto; margin-right:auto;}
.pic-50p{width:50%; display:block; margin-left:auto; margin-right:auto;}

/* font weight */
.font-w-300{font-weight:300;}
.font-w-600{font-weight:600;}
.font-w-800{font-weight:800;}

a{-webkit-transition: all 0.35s linear;
  -moz-transition: all 0.35s linear;
  transition: all 0.35s linear;
}

a:hover img.hoverImg{
opacity:0.4;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
transition: 0.6s linear;
}

a{color:#0093ac;}

.italic{font-style:italic;}

.box_shadow{box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);}

.box_shadow2{box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.08);}

.text-shadow-white {
    text-shadow: 0px 3px 10px rgba(225, 225, 225, 1);
}

.text-shadow {
    text-shadow: 0px 1px 20px rgba(0, 0, 0, 1);
}

.pic-center{margin-right:auto; margin-left:auto; display:block;}

.pic-100p{width:100%;}

.img-radius{border-radius:5px;}

.divide-line{border-top:1px solid #e4e4e4; margin-top:40px; margin-bottom:40px;}

.c-blue{color:#14085f;}

.c-light-blue{color:#025d6d;}

.c-white{color:#fff;}

.c-gold {color:#f3c892;}

.c-red{color: #bd341b;}

.no-padding{padding:0;}

.bg-light-blue{background: #edf6f7;}

textarea.form-control{height:200px;}

h1,h2,h3,h4,h5,h6,p,address{margin:0; padding:0;}

/* table no border */
.table-borderless{margin-bottom:0 !important;}

.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
    border: none; padding:0 0 2px 0;
}

/* wordpress blog */
img.alignright { display: block; margin: 0 0 0 auto; }
img.alignleft { display: block; margin: 0 auto 0 0; }
img.aligncenter { display: block; margin: 0 auto; }

/* nav auto drop down */
/*.dropdown:hover .dropdown-menu {
display: block;
}*/

.flex-box {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

body {font-family: "Noto Sans Japanese", Roboto, 游ゴシック, YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif !important; font-size: 15.5px; color:#333; line-height:1.8;}

address{line-height:1.8;}

.anchor-absolute {
    position: absolute;
    margin-top: -150px;
}

/* header top */
#header-top{padding:4px 0; font-size:13px; background:#0093ac; color:#fff;}

#header-top address{display:inline-block;}

/* nav smartphone dropdown adjust */
.navbar{margin-bottom:0;}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: none;
}

.navbar-default{background:#fff; border:none; border-bottom:1px solid #e8e8e8;}

.navbar-nav{float:right; margin-top: 7px; font-weight:500;}

.navbar-default .navbar-nav > li > a{color:#0093ac;}

.navbar-default .navbar-toggle {
    border-color: transparent;
}

.dropdown-menu > li > a{color:#0093ac;}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #0093ac; background-color: #cfeaee;}

@media screen and (max-width:767px){
 .navbar-nav{float:left; width:100%;}
}

.navbar-brand {
    padding: 7px 15px;
    font-size: 18px;
    height: auto;
}

@media screen and (max-width:1079px){
.nav>li>a {padding: 15px 10px;}
}

@media screen and (max-width:1019px){
.nav>li>a {padding: 15px 6px;}
}

/* Fixed Navigation */
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

/* map content */
.map-container{border-top:5px solid #14085f; border-bottom:5px solid #14085f;}

#map-area h4{color:#14085f; font-size:27px;}

address svg{color:#14085f;}

/* footer */
#footer-top{text-align:center;}

#footer-top h5{color:#025d6d; font-size:1.4em; margin-bottom:15px;}

#footer-bottom{background:#0093ac; color:#fff;}

#footer-bottom a{color:#fff; text-decoration:underline;}

#footer-bottom a:hover, #footer-bottom a:focus{color:#fff; text-decoration:none;}

@media screen and (max-width: 767px) {
	#footer-top h5{font-size:1.2em;}
}

/* slider */
#myCarousel{border-bottom:7px solid #0093ac;}

.carousel-inner > .item > img {
    width: 100%;
}

.carousel-control.left, .carousel-control.right {background:transparent;}

/* index */
.index-ttl{margin-bottom:30px; text-align:center;}

.index-ttl h2{font-size:2em; margin-bottom:15px;}

.index-ttl h3{font-size:1.1em;}

.index-product-inside{padding:60px 0; width:75%; margin-left:auto; margin-right:auto; min-height:655px;}

.index-product-inside-sm{padding:60px 0; width:75%; margin-left:auto; margin-right:auto;}

.bg-product-tuna{background:url('/wp-content/themes/kaijin-trading/images/bg-product-tuna.jpg') top center / cover no-repeat;}

.bg-product-wagyu{background:url('/wp-content/themes/kaijin-trading/images/bg-product-wagyu.jpg') top center / cover no-repeat;}

.bg-product-products{background:url('/wp-content/themes/kaijin-trading/images/bg-product-products.jpg') center center / cover no-repeat;}

.bg-product-ytail{background:url('/wp-content/themes/kaijin-trading/images/bg-product-tuna.jpg') bottom center / cover no-repeat;}

.bg-product-amakusa{background:url('/wp-content/themes/kaijin-trading/images/bg-product-amakusa.jpg') bottom center / cover no-repeat;}

.products-section-adjust{/*height:540px;*/ height:80%;}

@media screen and (max-width: 767px) {
.index-product-inside{min-height:inherit;}
	
.bg-product-tuna{background:url('/wp-content/themes/kaijin-trading/images/bg-product-tuna-xs.jpg') top center / cover no-repeat;}

.bg-product-wagyu{background:url('/wp-content/themes/kaijin-trading/images/bg-product-wagyu-xs.jpg') top center / cover no-repeat;}
	
.bg-product-products{background:url('/wp-content/themes/kaijin-trading/images/bg-product-products-xs.jpg') bottom center / cover no-repeat;}

.bg-product-ytail{background:url('/wp-content/themes/kaijin-trading/images/bg-product-tuna-xs.jpg') top center / cover no-repeat;}
	
.products-section-adjust{height:200px;}
}

.index-product-shadow{text-shadow: 0 0 10px rgba(0, 0, 0, 0.39), 0 0 20px rgba(0, 0, 0, 0.39), 0 0 30px rgba(0, 0, 0, 0.39), 0 0 40px rgba(0, 0, 0, 0.39), 0 0 70px rgba(0, 0, 0, 0.39), 0 0 80px rgba(0, 0, 0, 0.39);}

.bg-section-wadatsumi{background:url('/wp-content/themes/kaijin-trading/images/bg-section-index-wadatsumi.jpg') top center / cover no-repeat; color:#fff;}

.bg-section-wadatsumi{text-align:center;}

.bg-section-wadatsumi-inner{padding-top:80px; padding-bottom:50px; background-image: url('/wp-content/themes/kaijin-trading/images/bg-illust01.png'), url('/wp-content/themes/kaijin-trading/images/bg-illust02.png');
    background-position: top 5px left, bottom 5px right;
    background-repeat: no-repeat;
    min-height:590px;}

.bg-section-wadatsumi h5{color:#f3c892; font-size:1.2em; margin-bottom:15px;}

.bg-section-wadatsumi table{width:50%; font-size:1.5em; margin-left:auto; margin-right:auto;}

.bg-section-wadatsumi table td{min-width:45px;}

.bg-section-wadatsumi a{color:#f3c892;}

.bg-section-wadatsumi a:hover, .bg-section-wadatsumi a:focus{color:#fff5e8;}

@media screen and (max-width: 1199px) {
	.index-product-inside .pic-80p{width:90%;}	
}

@media screen and (max-width: 767px) {
	.index-ttl h2{font-size:1.6em;}
	
	.index-product-inside .pic-80p{width:100%;}	
}

/* page */
.uppercase{text-transform:uppercase;}

#page-ttl{padding:20px 0; background:#cfeaee; color:#0093ac;}

#page-ttl h1{font-size:1.7em; font-weight:500;}

#page-ttl a{color:#0093ac; text-decoration:underline;}

#page-ttl a:hover, #page-ttl a:focus{color:#fff; text-decoration:none;}

#page-ttl .b-crumb{text-align:right; margin-top:3px;}

@media screen and (max-width:767px){
 #page-ttl .b-crumb{text-align:left; margin-top:20px;}
}

#page h2{color: #0093ac; font-size:1.6em;}

#page h2:after {
margin-top:5px;
content: "";
display: block;
height: 3px;
background: -moz-linear-gradient(to right, rgb(207, 234, 238), transparent);
background: -webkit-linear-gradient(to right, rgb(207, 234, 238), transparent);
background: linear-gradient(to right, rgb(207, 234, 238), transparent);
}

/* #page h3{font-size:1.55em;} */
#page h3{font-size:1.35em;}

.well-blue-border{border:1px solid #0093ac; background:transparent; border-radius:0;}

.well-blue-border .table{margin-bottom:0;}

.well-blue-border h3{font-size:17px !important; font-weight:600; margin-bottom:10px;}

.well-blue-border .table td{padding-left:3px;}

@media screen and (max-width:767px){
 #page-ttl h1{font-size:1.55em;}
	
 #page h2{font-size:1.25em;}
	
 #page h3{font-size:1.1em;}
}

/* about */
.td-label{font-weight:500; color:#0093ac;}

.td-label i{display:inline-block; width:26px; text-align:center;}

#network{text-align:center;}

#network img{margin-bottom:10px;}

/* contact */
.tdbg-light-blue{background: #0093ac; color: #fff;}

/* btn */
.btn{border-radius:2px;}

.btn-primary{background:#0093ac; border-color:#0093ac;}

/* blog */
.blog-index h2{margin-bottom:10px !important; font-size:22px !important;}

/* blog body */
.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6{margin-bottom:10px;}

.blog-body p{margin-bottom:10px;}

.blog-body img{display: block; max-width: 100%; height: auto; margin-left:auto; margin-right:auto; margin-bottom:10px;}

/* blog sidebar */
.widget-container h4{font-size:19px !important; margin-bottom:10px; font-weight:600; color:#232323 !important;}

.widget-container ul li{margin-bottom:10px;}

ul.side-blog,.side-blog ul{list-style:none;}

li.widget-container ul{margin-bottom:30px; padding-left:0;}

/* 404 */
.page404 h2{font-weight:bold; font-size:100px; margin-bottom:30px; color:#0093ac;}

.page404 h3{font-weight:bold; margin-bottom:30px;}

/* timeline */
.hexa{
  border: 0px;
  float: left;
  text-align: center;
  height: 35px;
  width: 60px;
  font-size: 22px;
  background: #f0f0f0;
  color: #3c3c3c;
  position: relative;
  margin-top: 15px;
}

.hexa:before{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-bottom: 15px solid #f0f0f0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -15px;
}

.hexa:after{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid #f0f0f0;
  bottom: -15px;
}

.timeline {
  position: relative;
  padding: 0;
  width: 100%;
  margin-top: 20px;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: rgb(213,213,213);
  background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  z-index: 5;
}

.timeline li {
  padding: 0.2em 0;
}

.timeline .hexa{
  width: 16px;
  height: 10px;
  position: absolute;
  background: #00c4f3;
  z-index: 5;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: -30px;
  margin-top: 0;
}

.timeline .hexa:before {
  border-bottom: 4px solid #00c4f3;
  border-left-width: 8px;
  border-right-width: 8px;
  top: -4px;
}

.timeline .hexa:after {
  border-left-width: 8px;
  border-right-width: 8px;
  border-top: 4px solid #00c4f3;
  bottom: -4px;
}

.direction-l,
.direction-r {
  float: none;
  width: 100%;
  text-align: center;
}

.flag-wrapper {
  text-align: center;
  position: relative;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(255,255,255);
  font-weight: 600;
  z-index: 15;
  padding: 6px 10px;
  text-align: left;
  border-radius: 5px;
}

.direction-l .flag:after,
.direction-r .flag:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  height: 0;
  width: 0;
  margin-left: -8px;
  border: solid transparent;
  border-bottom-color: rgb(255,255,255);
  border-width: 8px;
  pointer-events: none;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.time-wrapper {
  display: block;
  position: relative;
  margin: 4px 0 0 0;
  z-index: 14;
  line-height: 1em;
  vertical-align: middle;
  color: #fff;
}

.direction-l .time-wrapper {
  float: none;
}

.direction-r .time-wrapper {
  float: none;
}

.time {
  background: #0093ac;
  display: inline-block;
  padding: 8px;
}

.desc {
  position: relative;
  margin: 1em 0 0 0;
  padding: 1em;
  background: rgb(254,254,254);
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  box-shadow: 0 0 1px rgba(0,0,0,0.20);
  z-index: 15;
  font-weight:600;
}

.direction-l .desc,
.direction-r .desc {
  position: relative;
  margin: 1em 1em 0 1em;
  padding: 1em;
  z-index: 15;
}

@media(min-width: 768px){
  .timeline {
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .timeline .hexa {
    left: -28px;
    right: auto;
    top: 8px;
  }

  .timeline .direction-l .hexa {
    left: auto;
    right: -28px;
  }

  .direction-l {
    position: relative;
    width: 310px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 310px;
    float: right;
    text-align: left;
  }

  .flag-wrapper {
    display: inline-block;
  }
  
  .flag {
    font-size: 18px;
  }

  .direction-l .flag:after {
    left: auto;
    right: -16px;
    top: 50%;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(254,254,254);
    border-width: 8px;
  }

  .direction-r .flag:after {
    top: 50%;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(254,254,254);
    border-width: 8px;
    left: -8px;
  }

  .time-wrapper {
    display: inline;
    vertical-align: middle;
    margin: 0;
  }

  .direction-l .time-wrapper {
    float: left;
  }

  .direction-r .time-wrapper {
    float: right;
  }

  .time {
    padding: 5px 10px;
  }

  .direction-r .desc {
    margin: 1em 0 0 0;
  }
}

@media(min-width: 992px){
  .timeline {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .direction-l {
    position: relative;
    width: 480px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 480px;
    float: right;
    text-align: left;
  }
}

@media screen and (max-width:767px) {
 .timeline li {
  padding: 2em 0;
  }
}