/* General */
body{
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img{
	max-width: 100%;
}
video{
	max-width: 100%;
}

.white-box{
	color: white;
	border: 4px white solid;
	padding: 6%;
	/*background-color: rgba(0, 0, 0, 0.6);*/
}

.spacer-row{
	margin-top: 6%;
}

.btn{
	border-radius: 0;
	border: 2px solid white;
	background-color: transparent;
	width: 100%;
	color: white;
	text-transform: uppercase;
	font-family:'Helvetica Neue LT W01_77 Bd Cn';
}
.btn:hover{
	color: red;
	border-color: red;
	cursor: pointer;
}
/* End General

/* Typography  */
h1,h2,h3,h4,h5{
	text-transform: uppercase;
	font-weight: normal;
}
h1,h2,h3{
	letter-spacing: 0.4em;
}
h4,h5,h6{
	letter-spacing: 0.3em;
}

h1 {font-size: 3.125em;}
h2 {font-size: 2.618em;}
h3 {font-size: 1.931em;}
h4 {font-size: 1.618em;}
h5 {font-size: 1.194em;}
h6 {font-size: 1em;}
p	 {font-size: 1em;}

.text-grey{
	color: #888;
}
/* End Typography  */


/* Intro  */

#intro{
	background: grey;
	height: 100vh;
	background-image: url('../img/section-backgrounds/intro.jpg');
	background-size: cover;
	background-position: center;
}
#intro .whitBoxRow{
	 height: 60%;
}
#intro hr{
	border-top: white solid 2px;
	width: 20%;
	margin-bottom: 2em;
}

#intro h3{
	line-height: 2em;
	letter-spacing: 0.5em;
}
#intro h5{
	text-transform: none;
	letter-spacing: 0.1em;
}
#intro #bikeName{
	line-height: 1em;
}
.languageSelector {
  padding: 20px 20px 20px 0;
}
.languageSelector img {
  width: 40px;
  height: 27px;
}
.norcoLogo {
  padding: 20px 0 20px 20px;

}
.norcoLogo img {
  width: 120px;
}
/* End Intro  */

/* Gallery/Video  */
#gallery{
	height: 100vh;

	background-image: url('../img/section-backgrounds/gallery.jpg');
	background-size: cover;
	display: flex;
	align-items: center;
}
.btn-photo-gallery-close {
  margin-left: 40px;
  margin-top: -6px;
  height: 30px;
  border: solid 1px #ccc;
  background: #eee;
  font-family: 'Helvetica Neue LT W01_57 Cond';
  padding: 3px 20px 0 20px;
  color: #666;
  cursor: pointer;
}
.btn-photo-gallery-close:hover {
  color: #333;
  border-color: #999;
}
.modalSocialBtn {
  width: 30px;
  height: 30px;
  margin: -7px 1px auto 1px;
}
/* End Gallery/Video  */

/* Key Features  */
#features{
	background: white;
}

.feature-video{
	background-size: cover;
	outline: 1px white solid;
  outline-offset: -1px;
}
.feature-video video{
	opacity: 0;
}

/* End Key Features  */

/* Frame Design & Tech  */

/* Accordian backgrounds and positioning*/
#carbon-technology{background-image: url('../img/feature-images/carbon-technology.jpg')}
#power-chassis{background-image: url('../img/feature-images/power-chassis.jpg')}
#arc-endurance{background-image: url('../img/feature-images/arc-endurance.jpg')}
#gizmo{background-image: url('../img/feature-images/gizmo.jpg')}
#bottle-mounts{background-image: url('../img/feature-images/bottle-mounts.jpg')}
#thru-axles{background-image: url('../img/feature-images/thru-axles.jpg')}

#carbon-technology-mobile{background-image: url('../img/feature-images-mobile/carbon-technology.jpg')}
#power-chassis-mobile{background-image: url('../img/feature-images-mobile/power-chassis.jpg')}
#arc-endurance-mobile{background-image: url('../img/feature-images-mobile/arc-endurance.jpg')}
#gizmo-mobile{background-image: url('../img/feature-images-mobile/gizmo.jpg')}
#bottle-mounts-mobile{background-image: url('../img/feature-images-mobile/bottle-mounts.jpg')}
#thru-axles-mobile{background-image: url('../img/feature-images-mobile/thru-axles.jpg')}

#thru-axles-item .techAccordionItemDetails{
	color: black;
}
#bottle-mounts-item .techAccordionItemDetails{
	top: 80px;
}
#gizmo-item .techAccordionItemDetails{
	top: 80px;
}
#arc-endurance-item .techAccordionItemDetails{
	top: 190px;
	right: 210px;
	width: 20%;
}
#carbon-technology-item .techAccordionItemDetails{
	width: 35%;
}
/* End Accordian backgrounds and positioning */

/* START desktop accordion */
#techAccordionContainer {
  position: relative;
  margin: 40px auto;
  width: 100%;
  height: 800px;
  overflow: hidden;
	color:white;
	background-position: center;
}
.techAccordionBg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;
}
.defaultBg {
  display: block;
}
#techAccordionClose {
  position: absolute;
  left: 50%;
  top: 40px;
  width: auto;
  color: white !m;
  font-size: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  display: none;
}
.techAccordionItem {
  height: 100%;
  width: 16.66%; /* for 6 techAccordionItems : 100% / 6 */
  float: left;
  overflow: hidden; /* hide intro and details on overflow and show only the item button by setting this div to that of the .techAccordionItemButton div */
  border-right: solid 2px rgba(255, 255, 255, .5);
  cursor: pointer;

  /* set to boder-box so that the borders don't affect the width */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.activeTechAccordionItem, .activeTechAccordionMobileItem {
  cursor: default !important;
}
  .techAccordionItemButton {
    width: 60px; /* if you changed this, do the same for var accordionItemButtonWidth in <script> */
    height: 100%;
    float: left;
    display: none;
  }
    .techAccordionItemButton p {
      /* make this vertical */
      -ms-transform: rotate(90deg); /* IE 9 */
      -ms-transform-origin: 10px 30px; /* IE 9 */
      -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
      -webkit-transform-origin: 10px 30px; /* Chrome, Safari, Opera */
      transform: rotate(90deg);
      transform-origin: 10px 30px;
      float: left;

      width: 300px;
      margin-top: 0px;
    }

  .techAccordionItemIntro {
    margin-top: 600px;
    padding: 0 20px;
    text-align: left;
  }
    .techAccordionItemIntroView {
      display: none;
    }
    .techAccordionItemIntroView i {
      font-size: 40px;
    }
    .techAccordionItemIntroView span {
      display: block;
      margin: -34px 0 0 40px;
    }

  .techAccordionItemDetails {
    position: absolute;
    width: 30%;
    text-align: left;
    bottom: 80px;
    margin-left: 20px;

    display: none;
  }
/* END desktop accordion */

/* START mobile accordion */
#techAccordionMobileContainer {
  position: relative;
  margin: 40px auto;
  width: 100%;
  height: 800px;
  overflow: hidden;
	color: white;

}
.techAccordionMobileBg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;
	background-position: right;
}
.defaultMobileBg {
  display: block;
}
.techAccordionMobileItem {
  width: 100%;
  height: 16.66%; /* for 6 techAccordionItems : 100% / 6 */
  float: left;
  overflow: hidden; /* hide intro and details on overflow and show only the item button by setting this div to that of the .techAccordionItemButton div */
  border-bottom: solid 2px rgba(255, 255, 255, .5);
  cursor: pointer;

  /* set to boder-box so that the borders don't affect the width */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
  .techAccordionMobileItemButton {
    margin: 18px 20px;
    display: none;
  }
    .techAccordionMobileItemButtonCloseOpen {
      float: right;
      cursor: pointer;
      z-index: 1080 !important;
    }
  .techAccordionMobileItemIntro {
    margin: 40px 20px 0 40px;
  }
    .techAccordionMobileItemIntroView {
      float: right;
      width: 40px;
      font-size: 48px;
    }
  .techAccordionMobileItemDetails {
    margin: 18px 20px;
    display: none;
  }
/* END mobile accordion */
/* End Frame Design & Tech  */

/* Available Models  */
#available-models{
	background: white;
}
.bike-image{
	margin-bottom: 3%;
}
#available-models h4{
	letter-spacing: 0.2em;
}
#available-models a{
	color: #212529;
}
#available-models a:hover{
	text-decoration: none;
	color: #888;
	opacity: 0.8;
}
#bike-row-1{
	background: url('../img/section-backgrounds/bike-row-1.jpg');
	background-size: cover;
	background-position: center;
}
#bike-row-2{
	background: url('../img/section-backgrounds/bike-row-2.jpg');
	background-size: cover;
	background-position: center;
}
/* End Available Models  */

/* Outro Models  */
#outro{
	height: 100vh;
	background-image: url('../img/section-backgrounds/outro.jpg');
	background-size: cover;
}
#outro h1{
	line-height: 10vh;
}
#outro .row{
	100%;
}
.dealer-callout{
	padding: 6%;
	color: white;
	margin: 0 auto;
}
.dealer-callout hr{
	border-top: 4px solid white;
}
.dealer-callout a{
	color: white;
	text-align: center;
}
.dealer-callout a:hover{
	color: rgba(255,255,255,0.4);
	text-decoration: none;
}
/* Outro Models  */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
	#intro{background-image: url('../img/section-backgrounds/1200/intro.jpg');}
	#gallery{background-image: url('../img/section-backgrounds/1200/gallery.jpg');}
	#bike-row-1{background-image: url('../img/section-backgrounds/1200/bike-row-1.jpg');}
	#bike-row-2{background-image: url('../img/section-backgrounds/1200/bike-row-2.jpg');}

}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
	body{font-size: 14px;}
	#intro{background-image: url('../img/section-backgrounds/991/intro.jpg');}
	#gallery{background-image: url('../img/section-backgrounds/991/gallery.jpg');}
	#bike-row-1{background-image: url('../img/section-backgrounds/991/bike-row-1.jpg');}
	#bike-row-2{background-image: url('../img/section-backgrounds/991/bike-row-2.jpg');}
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
	body{font-size: 13px;}
	#bike-row-1{background-image: none;}
	#bike-row-2{background-image: none;}

}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {


	.d-xs-none {
	    display: none!important;
	}
}