h1 {
  margin-bottom:0.5em;
  font-weight:300;
  color:#000;
}
h2 {
  margin-bottom:0.5em;
}
strong {font-weight:400;}
.pictight {padding:5px;}
.txt {padding-bottom:3em;}
.extrasmall {font-size:1.5em !important;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	padding-bottom:50%;
    min-height: 400px;
    width: 100%;
	background: url("../images/Stark/hero-bg-lg-scene01.jpg") #000 bottom center no-repeat;
	background-size: cover;
	color:#fff;
	position:relative;
}
#heropage::after ,#herotxt::after ,#herovideo::after {
	display: table;
	content:"";
	clear:both;
}
#heropage p {
	font-size:1.5em;
}
#heropage a {
    text-decoration: none;
    margin: 0 1em;
}

.full img {
	width:100%;
	height:auto;
}
#herotxt {
	text-align:center;
	position:absolute;
	top: 60%;
    margin-left: -2%;
}
#herotxt h1, #herotxt h2, #herotxt p { visibility:hidden;}
#herotxt a {
	color:#64c6ff;
}
#herotxt a:hover {
	color:#3a8fd8;
}


/* Photos
-------------------------------------------------- */
#photos {
	width:100%;
	max-width:100%;
	height:auto;
	padding:5px 0;
    background-color: #000;
	text-align:center;
    color:#ccc;
	overflow:hidden;
}
#photos img {
	width:100%;
	height:auto;
	margin: 0 5px;
}
#photos .onbike {
	padding:5px;
    overflow: hidden;
    position: relative;
    text-align: center;
    background: #000 no-repeat center center;
}
#photos .row {
	margin-right: 0px !important;
    margin-left: -5px;
}

/** animation **/
/*common*/
.onbike .mask {
	width:100%;
	height:100%;
    position: absolute;
    overflow: hidden;
	background-color:#000;
    top: 0;
    left: 0;
}
.onbike h2 {
   width:90%;
   text-transform: capitalize;
   color: #fda700;
   text-align: center;
   position: relative;
   margin: 5% auto 10px auto;
   border-bottom: 1px dashed #555;
}
.onbike p {
   position: relative;
   line-height:1em;
   margin-top:0px;
}
.onbike a.info {
   display: inline-block;
   text-decoration: none;
   background: #fd8f00;
   padding: 0 10px;
   color: #fff;
   border-radius: 4px;
}
.onbike a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
/*effect*/
.onbike img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.onbike .mask {
   background-color: rgba(255,255,255,0.1);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.onbike p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.onbike:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.onbike:hover img {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -o-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
}
.onbike:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.onbike .mask img, .onbike:hover .mask img {
    width:50% !important;
	height:auto;
	margin:0 10px 10px 10px !important;
   -webkit-transition: none;
   -moz-transition: none;
   -o-transition: none;
   -ms-transition: none;
   transition: none;
   -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}


/* All Block
-------------------------------------------------- */
div.allB {
  background-color: #fff;
  height:100%;
  padding-top:2em;
  padding-bottom:2em;  
  color:#000;
}
div.allB img { 
    width:100%;
	height:auto;
}
div.allB  h1 {margin-top:0;}
div.allB ::after {clear:both;display:table;content:"";}



/* Right Block
-------------------------------------------------- */
div.rtB {	
	text-align:right;
	color:#000;
    height:100%;
    background-color:#efefef;
}
div.rtB p {color:#484848;}

div.rtB .container,
div.ltB .container {width:100%;}
div.rtB h1, 
div.ltB h1 {margin-top:1.3em;}
div.rtB strong, 
div.ltB strong {color:#000;}
div.rtB::after, 
div.ltB::after {clear:both;display:table;content:"";}



/* Left Block
-------------------------------------------------- */
div.ltB {
  height:100%;
  text-align:left;
  padding:0;  
  position: relative;
  color:#484848;
  background-color:#fff;
}
div.ltB p {color:#484848;}


/* Pic
-------------------------------------------------- */
.glasspic {
	height:auto;    
	background: url("../images/Stark/glass-bg.jpg") right bottom no-repeat;
	background-size: auto 100%;
	padding-bottom:40%;
}

.materialpic { 
	background: url("../images/Stark/black-bg.jpg") top left no-repeat;
	background-size: cover;
	padding-bottom:50%;
}

.adjustpic {	
	height:auto;
	background: url("../images/Stark/adjust-bg-lg.jpg") center no-repeat;
	background-size: contain;
	padding-bottom:31.7%;
}





/* Actual Size Figure
-------------------------------------------------- */
#actualfigure {
  height:100%;
  text-align:left;
  color:#000;
  background-color:#f9f9fa;
}
#actualfigure h1 {color:#000;}
#actualfigure .pic { 
	height:auto;   
	background: url("../images/Stark/actual-size-lg.jpg") top right no-repeat;
	background-size: cover;
	padding-bottom:32%;
}
#actualfigure .icon {padding-top:10%;}
#actualfigure .icon img {width:30%;max-width:250px;height:auto;}
#actualfigure::after {clear:both;display:table;content:"";}




/* Feedback
-------------------------------------------------- */
#feedback {
	background-color:#eee;
	padding:3em 0;	
}

/* Action
-------------------------------------------------- */
#action {
  background-color:rgba(0,0,0,.7);
  height:100%;
  padding-top:5em;
  padding-bottom:6em;  
  position: relative;
  color:#fff;
}
#action h1 {
	font-size:4em;
}
#action a {
	font-size:1.5em;
}
div.triangle {
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent #ffffff;
	line-height: 0px;
	_border-color: #e92d00 #e92d00 #e92d00 #ffffff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#e92d00');
	display:inline-block;
	margin-left:3px;
}
#action::after{
	content:"";
	background:url("../images/Stark/action-bg-lg.jpg") center;
	top:0;
	left:0;
	bottom:0;
	right:0;
	position:absolute;
	background-size:cover;
	z-index:-1;
}


/* Info
-------------------------------------------------- */
#info {background-color: #f9f9fa;}
#offer {background-color: #000;color:#fff;}


/* Responsive
-------------------------------------------------- */
@media (max-width: 768px) {	
  .floatR {float:left;}
  .extrasmall {font-size:90% !important;}
  
  #heropage {	 
	  background: url("../images/Stark/hero-bg-xs-scene01.jpg") #000 bottom center no-repeat;      
      background-size:100% auto;
	  padding-bottom:150%;}
  #herotxt {top:93%;margin-left:0;}  
  #photos, #photos h2 {font-size:1.5em;}
  
  
  .materialpic {
	  background-image: url("../images/Stark/black-bg.jpg");
	  padding-bottom:100%;
  } 
  div.ltB, div.rtB {text-align:center;} 
  div.ltB h1,
  div.rtB h1 {margin-top: 0.5em;}
  
  .glasspic {padding-bottom:100%;}
  
  .adjustpic {
	  background-image: url("../images/Stark/adjust-bg-xs.jpg");
	  background-size:cover;
	  padding-bottom:100%;
  }
  
  
  #actualfigure .pic {padding-bottom:100%;background-image: url("../images/Stark/actual-size-xs.jpg")}
  #actualfigure .icon {padding-top:5px;}
  #actualfigure .icon img {width:50%;}
  
  #action::after{
	  background:url("../images/Stark/action-bg-lg.jpg") top;
	  background-size:cover;
  }
}
@media (min-width: 769px) and (max-width: 1000px) {	
  #heropage {
	  background: url("../images/Stark/hero-bg-sm-scene01.jpg") #000 top center no-repeat;
      background-size:cover;
	  padding-bottom:70%;
  }
  #herotxt {top:55%;margin-left:0;}  
  
  .glasspic {padding-bottom:60%;background-size: 100% auto;}
  .materialpic {
	  background-image: url("../images/Stark/black-bg.jpg");
	  padding-bottom:60%;
  } 
}
@media (min-width: 769px) and (max-width: 1200px) {	
  .extrasmall {font-size:1.2em !important;}
  #photos {font-size:1.2em;}
  
  .adjustpic {
	  background-image: url("../images/Stark/adjust-bg-sm.jpg");
	  background-size:cover;
	  padding-bottom:50%;
  }
  
  #actualfigure .pic {padding-bottom:60%;background-image: url("../images/Stark/actual-size-sm.jpg");}
  #actualfigure .icon {padding-top:10%;}
  #actualfigure .icon img {width:40%;}
}

@media (min-width: 1201px) and (max-width: 1500px) {	
  #actualfigure .pic {padding-bottom:40%;}
  #photos {font-size:0.7em;}
}

@media (min-width: 1201px) {
  .glasspic {padding-bottom:30%;background-size:auto 100%;}
  .materialpic {padding-bottom:35%;background-size:cover;}
}