@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto+Condensed:300,400);
/* This page
-------------------------------------------------- */
html, body {height:100%;}
body {background-color:#000;color:#bbb;text-align:left;font-family: 'Open Sans',sans-serif;font-weight:300;line-height:1.5em;font-size:16px;}
h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:2.2rem;
  font-weight:400;
  line-height:1.3em;
  margin-bottom:0.5em;
  color:#fff;
}
h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:2.2em;
  font-weight:400;
  margin-bottom:0.5em;
  color:#fff;
}
h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:1.6em;
  font-weight:300;
  color:#fff;
}
h5 {font-size:1.1em;color:#fff;font-weight:400;}
#features h5 {font-family: 'Noto Sans JP', sans-serif;}
.txt-color {color:#fffb8f;}
strong {font-weight:400;color:#fff;}
video, 
#full-video img{
  width: 100%;
  height: auto;
}

#socialproof, #bottomnav,footer {background-color:#000;}
#socialproof {
	border-left: 0;
	border-right: 0;
}
footer {border-top: 1px solid #2a2a2a;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	background: url("../images/BuckTPMS/hero-lg.jpg") top left no-repeat;
	background-size: cover;
	opacity: 1;
}
#heropage,
#heropage .container-fliud,
#heropage .row {min-height: 65vw;margin:0;}
#heropage .txt-color {color:#33ff39;}
#heropage .txt{
	padding:0 0 4em 4em;
}
#heropage .txt a {
	color:#57b2ff;
	margin-left:0.2em;
}
#heropage .txt a:hover {
	color:#81c5ff;
}
#heropage .txt a+a {margin-left:4em;}


/* Intro
-------------------------------------------------- */
#intro,
#intro .container,
#intro .row {min-height: 40vw;}
#intro .txt {margin-top:10vw;}
#intro img {max-width:100%;margin-bottom:10vw;}


/* What & Why
-------------------------------------------------- */
#whatwhy {
	background: url("../images/BuckTPMS/tire-lg-jp.jpg") center 18vw #181919 no-repeat;
	background-size:50% auto;
	text-align:left;
	margin-top:5px;
	min-height: 60vw;
	padding-top:5vw;
	padding-bottom:2em;
}
#whatwhy h1 {text-align:center;}
#whatwhy .txtblock {
	border-top:1px solid #3f4040;
	border-bottom:1px solid #3f4040;
	color:#ff7800;
	margin:23vw auto 3em auto;
	padding-top:1rem;
	text-align:center;
	width:20vw;
}
#whatwhy img {max-width:100%;}

#whatwhy h4 {text-align:right;}


/* 2 Types
-------------------------------------------------- */
#types {
	margin-top:5px;
	text-align:center;
	padding-bottom:5em;
}

#types table {
	margin:3em auto;
	text-align:left;
	border:3px solid #717171;
}
#types table h4 {text-align:center;margin:0;}
#types table td {padding:0.5em 1.5em;}


#types .txt {margin-top:5vw;text-align:left;}
#types h1 {text-align:center;}


/* Modes
-------------------------------------------------- */
#modes {
	text-align:center;
}
#modes img {max-width:100%;}


/* Features
-------------------------------------------------- */
#features {
	padding-top:5px;
	padding-bottom:5vw;
	text-align:left;
}

#features h1 {text-align:center;margin-top:5vw;margin-bottom:1.5em;}

#features img {max-width:100%;margin-top:2em;}



/* Videos
-------------------------------------------------- */
#videos {
	background-color: #13171e;
	margin-top:5px;
	text-align:center;
	padding-bottom:10vw;
}
#videos h1 {text-align:center;padding-top:5vw;padding-bottom:5vw;}
#videos .video {cursor:pointer;}
#videos img {max-width:100%;}
#videos a img {margin-bottom:2em;}


/* Action
-------------------------------------------------- */
#action {
	background: url("../images/BuckTPMS/action-lg.jpg") top center no-repeat;
	background-size: cover;
	margin-top:5px;
}
#action,
#action .container,
#action .row {min-height: 65vw;}

#action .txt {text-align:right;}
#action h1 {margin:0;}
#action .extrasmall {font-size:60%;}
.btn-act {color: #fff;background-color: #db3f3f;}
a.btn-act:hover {color: #fff;background-color: #b42835;}


/* 影片
-------------------------------------------------- */
#video {
	margin-top:5px;
}
#video,
#video .container,
#video .row {min-height: 40vw;}
#video img {max-width:100%;}




/* Info
-------------------------------------------------- */
#info {height:auto;color:#858c9d;background-color: #242629;}
#info ul h5 {font-family: 'Noto Sans JP', sans-serif;font-size:1.6em;font-weight:400;color:#fff;}
#info ul li a {color:#bec5d6;}
#info strong {color:#a6acba;}
#info p {font-size: 15px;}


/* effect
-------------------------------------------------- */
section {transition:all 500ms ease-out;}
.fade-ani{opacity:0;position:relative;}
.fade-up{bottom:-50px;}
.fade-up.showing{bottom:0px;opacity:1;}

/* Responsive
-------------------------------------------------- */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	h4 {font-size:1.2em;}
	#heropage {
		margin-top:1em;
		background-image: url("../images/BuckTPMS/hero-xs.jpg");
		background-size: 100% auto;
		background-position:bottom center;
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {padding:0;padding-bottom:5em;text-align:center;}
	#heropage .txt a {margin-left:0;}
	
	#whatwhy {background-image: url("../images/BuckTPMS/tire-xs-jp.jpg");background-size:100% auto;background-position:center 30vw;}
	#whatwhy .txtblock {margin:50vw auto 3em auto;width:60vw;}
	#whatwhy h4 {text-align:left}
	
	
	
		
	#action {background-image: url("../images/BuckTPMS/action-xs.jpg");}
	#action, #action .container, #action .row {min-height: 177vw;}
	#action .txt {text-align:center;}
	#action a.float-right {float:none!important;}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	#heropage {
		margin-top:1em;
		background-image: url("../images/BuckTPMS/hero-xs.jpg");
		background-size: 100% auto;
		background-position:bottom center;
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {padding:0;padding-bottom:5em;text-align:center;}
	#heropage .txt a {margin-left:0;}	
	
	#whatwhy {background-image: url("../images/BuckTPMS/tire-xs-jp.jpg");background-size:100% auto;background-position:center 30vw;}
	#whatwhy .txtblock {margin:55vw auto 3em auto;width:60vw;}
	#whatwhy h4 {font-size:1.2em;text-align:left}
	
	
	
	
	#action {background-image: url("../images/BuckTPMS/action-xs.jpg");}
	#action, #action .container, #action .row {min-height: 177vw;}
	#action .txt {text-align:center;}
	#action a.float-right {float:none!important;}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	#heropage {background-image: url("../images/BuckTPMS/hero-md.jpg");}
	#heropage .txt{padding:0 0 2em 2em;}
	
	#whatwhy {background-size:65% auto;background-position:center 20vw;}
	#whatwhy .txtblock {margin:27vw auto 3em auto;width:22vw;}
	
	
	
	#action {background-image: url("../images/BuckTPMS/action-md.jpg");}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1000px) {
	#features ul {padding:1em 1.5em 1em 3em;}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h1 {font-size:3.2rem;}
	#heropage {background-image: url("../images/BuckTPMS/hero-xl.jpg");}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 54vw;}
	
	#whatwhy {background-size:40% auto;background-position:center 15vw;}
	#whatwhy .txtblock {width:15vw;}
	#whatwhy .txtblock {margin:18vw auto 3em auto;}
	
	
	#action {background-image: url("../images/BuckTPMS/action-xl.jpg");}
	#action, #action .container, #action .row {min-height: 54vw;}
	#action .container {width:90%;max-width:90%;}
}