/***style***/

a {
  letter-spacing: 0.02em;
  font-family: 'Open Sans', 'arial', sans-serif;
}

header a:active {
  color: #fff;
}

h1 {
  letter-spacing: .02em;
  font-size: 50px;
  font-weight: 700;
}

h2 {
  letter-spacing: .02em;
  font-weight: 600;
  line-height: 1.5em;
  font-size:1.4em;
}
h3 {
  letter-spacing: .02em;
  font-size: 1.2em !important;
  color: #fff;

  font-weight: 1;
}

p { 
  letter-spacing: 0.02em;
  font-family: 'Lato', 'arial', sans-serif;
  font-weight: 400;
  font-size: 1em !important;
  line-height: 28px;
}

h5, h4 {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Lato', 'arial', sans-serif;
  font-weight: 400 !important;
}

body {
  background: #1d222d;
  overflow-x: hidden;
}

.col-lg-12, .col-sm-12 {
  padding-bottom: 3em;
}

.col-lg-6, .col-sm-6 {
  padding-bottom: 3em;
}

@media (min-width: 768px) {

  header {
  min-height: auto !important;
  }
}


.col-lg-12 .col-sm-12 {
  padding: 2em 0;
}

.portfolio-box {
  color: #fff;
}


.myIntro {
  margin-top: 10px;
  margin-bottom: -5px;
  font-weight: 100;
  letter-spacing: .04em;
}
/****header***/

.pdeSketch {
position: relative;
margin: 0 auto;
left: 0;
width: 100vw;
height: auto;
overflow-x: hidden;

}

header .header-content .header-content-inner p {
margin-bottom: 0px;
}

.mouseIcon {
  width: 100px;
  padding: 20px 0px 40px 0px;
}

#onboarding {
  padding: 200px 0px 200px 0px;
  position: relative;
}

/**MOBILE**/

@media (max-width: 768px){
  .pdeSketch {
    height: 100%;
    width: auto;
  }

  .fullvid {
    height: 100%;
    margin-top: 20px;
  }

  .homeHeading
/*  #leftBounce{
    padding: 0px 300px 0px 300px !important;
  }*/

  .myQuote {
    padding: 0px 300px 0px 300px !important;
  }

  body {
    background: #1d222d;
    overflow-x: hidden;
  }

  footer {
    margin-left: 40px;
  }

  .icons {
    width: 430px !important; 
  }



}


.imgHalfsize {
  margin: 0 auto;
  width: 50%;
}

.sketchInfo {
  opacity: .6;
}

.sketchInfoDiv {
  top: 99%;
  position: absolute;
  padding: 0px 50px 0px 50px;
}

header .header-content {
  margin: 0 auto;
  z-index: 20;
  pointer-events: none;
}

#homeHeading {
  position: absolute;
  top: 40%;
  width: 1024px;
  left: 50%;
  margin-left: -500px;
  opacity: 0;
  -webkit-transition: all cubic-bezier(.31,-0.27,.83,1.22) 1s;
  transition: all cubic-bezier(.31,-0.27,.83,1.22) 1s;
  padding: 0px 50px 0px 50px;
}

.instructions {
  padding-top: 20px;
}

.fadeAway {
  opacity: 0;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}

.leftBounce {
  margin-left: -512px !important;
  opacity: 1;
  -webkit-transition: opacity .25s (.31,-0.27,.83,1.22);
  transition: opacity .25s (.31,-0.27,.83,1.22);
}

@media (max-width: 1024px){
  header .header-content {
    padding: 0px;
    position: absolute;
  }
}

@media (max-width: 768px){

  nav {
    width: 100vw;
  }

  .myQuote {
    width: 310px;
    margin-left: 310px;
    margin-bottom: 20px;
  }

  .project-name {
  	text-align: center;
  }

  .pdesketch {
    overflow-x: hidden !important;
    width: 100vw;
  }

  body {
    overflow-x: hidden;
  }

  .new-header {
    width: 100vw;
    height: auto;
    overflow: hidden;
  }

  header .header-content {
    top: 20%;
    position: absolute;
  }

    .imgHalfsize {
    margin: 0 auto;
    width: 100%;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) {
  
  header .header-content {
    top: 30%;
    position: absolute;
  }

  .homeHeading {
    top: 50%;
  }

  .pdesketch {
    overflow-x: hidden !important;
  }

  body {
    overflow-x:hidden !important;
  }
}

.myQuote {
  margin-top: -40px;
  padding: 50px 0px 20px 0px;
}

.navbar-default {
  height: 0px;
}

@media (min-width: 768px){
  .container-fluid {
    padding-left: 150px;
    padding-right: 150px;
  }
}
.header {
  background-color: transparent;
}

.carrot {
padding-bottom: 20px;
  -webkit-animation: bounce 1s ease-in-out infinite running; 
  -webkit-transition: all 0.2s ease;
}

.carrotAnimation {
  -webkit-animation: homeanim 2.5s ease;
}

@keyframes bounce {
  0% {transform: translateY(0em);}
  100% {transform: translateY(1em);}
}

@keyframes homeanim {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100 {
    opacity: 1;
  }
}


.affix-top {
  top: -100px;
}

.navbar {
}


#logo {
  pointer-events: none;
}

.navbar-default.affix #logo {
  width: 90px;
  /*transition: .2s ease;*/
  left: 25px;
  margin-top: 0;
  top: .4em;
  margin-left: 0;
/*  border-radius: 50%;*/
  pointer-events: none;
/*  background: white;*/
}

.logo_circle {
    z-index: -4;
    position: absolute;
    left:10px;
    top: -1em;
    background: white;
    height: 80px;
    width: 80px;
    border-radius: 100%;
    margin: 20px;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .25);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .25);
}

@media (max-width: 768px){
  .logo_circle {
    display: none;
  }

  .navbar-default.affix #logo {
    width: 70px;
    margin-top:-.6em;
    left: .5em;
  }
}

@media (min-width: 768px){
.navbar-default .navbar-header .navbar-brand {
  color: white;
  }
}

.navbar-brand span {
  color: #343434;
}

@media (min-width: 768px){
.navbar-default.affix {
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .25);
    font-size: 14px;
  }
}

.navbar-default .navbar-toggle {
  border: none;
}

.navbar-default.affix .nav>li>a:focus:hover, .navbar-default.affix .nav>li>a:hover {
    color: #ad4f4c;
}

.navbar-default .nav>li.active>a, .navbar-default .nav>li.active>a:focus {
    color: #ad4f4c!important;
    background-color: transparent;
}

.page-scroll {
  color: #ad4f4c;
}

#logo {
  opacity: 0; /****************/
  position: absolute;
  margin: 0 auto;
  left: 50%;
  margin-top: 10em;
  -webkit-transition: all cubic-bezier(.12,.76,.54,1.01) .4s;
  transition: all cubic-bezier(.12,.76,.54,1.01) .4s;
  margin-left: -130px;
  width: 300px;
}

.logo_bounceLeft {
  margin-top: 10% !important;
  margin-left: -130px !important;
  -webkit-transition: opacity .25s (.31,-0.27,.83,1.22);
  transition: opacity .25s (.31,-0.27,.83,1.22);
}

/***icons*****/
.fa-diamond  {
  background: url('../img/icons/Register-Bike.png')
}
/**** colors ***/

.myWork h4{
  font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0em;
  font-weight: 700 !important;
  padding: 40px 0;
}

#work {
  background: #fff;
  padding: 20px 0;

}

.bg-primary { 
  background-color: white;
  color:inherit;
}

.bg-primary p {
  color:#777;
}

.bg-secondary {
  background-color: #f2f2f2;
}

.accent-color {
  border-color: #993333;
}

.text-primary {
  color: #498d91;
}

.white-text {
color: #fff !important;
font-weight: 100;
}
/****button***/

.myButton, .myButton:visited {
  pointer-events: auto;
  font-size: 16px !important;
  font-weight: 200;
  color: #fff;
  background: rgb(0, 0, 0,0);
  border: solid 1px white;
  text-decoration: none;
  text-transform: none;
  margin-top: 0px;
  margin-bottom: 20px;
  display: inline-block;
  transition: all .5s ease;
} 
.btn-xl {
  padding: 10px 26px;
}

.myButton:hover {
  background: rgb(255, 255, 255);
  color: #4c4548;
}

.myButton:active {
  background: #b94148;
  color: #fff;
}

.myButton a {
  font-size: 12px;
  color: #fff;
}
.project-name {
line-height: 1em;
margin-top: 0px;
margin-bottom: 10px;
}



.project-name p {
margin-top: 0px;
margin-bottom: 0px;
}

/***Portfolio***/
#demoReel {
  background: #fff;
}

.portfolio-box {
  max-width: 1920px !important;
  max-height: 1080px !important;
}

.portfolio-box-caption {
  color: #222;
  text-align: left;
}

.portfolio-box .portfolio-box-caption {
  transition: all .25s ease;
  background: rgba(39,39,39,0.8);
}

.portfolio-box a:hover {
  transform:scale(1.2);
}

a:focus, a:hover {
  background-color: #ad4f4c80;
  color: #fff;
  text-decoration: none;
}


/***a tags***/
/*a {
  color: #7b7b7b;
  }

a:hover {
  color: #343434;
}*/

p {
  font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 100;
}

#rationale h2,#rationale p {
  color: #000;
}

.bg-third {
  background-color: #498d91 !important;
  color:white;
}

.bg-third h1 {
  font-size: 3em;
  font-weight: 600;
}
/****button style****/

#POC .btn {
  margin-top: 20px;
}

.btn:active {
  color: #fff !important;
}

/****research***/
#research2 h2 {
	margin-bottom: -150px;
}

#research2 h4 {
	padding-bottom: 20%;
}


/****parallax***/

/*#pausefestCrop {
  max-height: 720px !important;
}

#cropMover {
  position: relative;
  top: -180px;
}
*/
.new-header {
  background-position: center;
}

.research-parallax {
width: 100vw;
background-position: center;
background: url('../img/bike_warehouse.jpg')fixed 100%;
}

.sketches-parallax {
  background: url('../img/sketches.jpg')fixed 100%;
/*  background-repeat: no-repeat;*/
  background-position: center !important;
}

.sketches-parallax h2 {
  padding: 200px;
}
/****bike features****/

.img-fluid {
  width: 100%;
}

.bike-features{
  position: relative;
  	background: url('../img/bike_features.png') center no-repeat;
  	background-position: center !important;
}

.bike-chain {
/* 	background-color:#fbfbfb; */
	margin-top: -100px;
}

.bike-chain .container {
}

.bike-chain img {
	margin-top:200px;
	width: 100%;
}

.bike-chain p {
	margin-top:100px;
}
.bike-chain > h2 {
	margin-top:100px;
	
}
 
.container {
	padding: 0;
}

.wireframesImage {
	display: block;
	margin-top: -150px;
	margin-bottom: -150px;
    background: url('../img/wireframes.png') center no-repeat;
    height: 616px;
    background-size: contain;
}


.screensImage {
	display: block;
/*
	margin-top: 50px;
	margin-bottom: -50px;
	
*/
	background: url('../img/3_screens.gif') center no-repeat;
	background-position: center !important;
    height: 1080px;
    width: 100%;
    background-size: contain;
}


.bikearmedImage {
	display: block;
	background: url('../img/bikearmed.jpg') center no-repeat;
	background-position: center !important;
    height: 616px;
    width: 100%;
    background-size: contain;
}

.sizzleVideo {
	display: block;
	background-position: center !important;
    height: 1000px;
    width: 100%;
    background-size: contain;
}

.wireframes-container {
  width:72%;
  margin: 0 auto;
}

.bikearmed h2 {
	margin-top: -80px;
}

/****quote****/
.bikes-quote {
  color: #fff;
}

#research2 h2 {
  font-weight: 700;
}

#research2 h2 {
  padding-top: 200px;
  padding-bottom: 200px;
}

#research2 span {
  color: #35da64;
}

.nestor {
	border-radius: 100%;
}

@media (max-width: 768px) {
.nestor {
	margin-left: 0px;
	margin-bottom: 40px;
	width: 60%;
	}
}

@media (min-width: @screen-md-min) {
	.nestor {
	margin-left: 0px;
	margin-bottom: 40px;
	width: 20%;
	}

}

@media (min-width: 768px) {
.nestor {
	margin-left: 40px;
	width: 80%;
	}
}

#friendsBike p {
	margin-top: 2em;
}


/**** competitors****/

.sherlock {
	width:70%;
}
.fortified {
	margin-left: -30px;
	width: 70%;
}

/****target audience****/
.cropper {
	margin: 0 auto;
	width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 1000%;
}
.cropper img {
	display: inline;
    margin: 0 auto;
    height: 140%;
    width: auto;
}
.rosamaria {
	position: absolute;
	left: -150px;;
}

.target-box {
	width: 100%;
}

.gibby {
	position: absolute;
	left: -30px;
}

/***logo***/
/*.logo  {
  height: auto;
  position: absolute;
  z-index: 3;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  color: white;
}*/

.logo img {
  width: 100%;
  display: inline-block;
}

.pausefest {
  transform: scale(1.2);
}

/***dividers**/
.divider_white img {
  padding: 30px 0px 0px 0px;
  width: 200px;
}

.divider_black img {
  margin: 0 auto;
  width: 200px;
}

.divider_black {
  margin: 0 auto;
  margin-bottom: 3em;
  margin-top: 3em;
}


/****Demo Reel***/

.vp-center {
	height: auto !important;
}
.sectionTitle {
  height: 100px;
  background: white;
}

.img-responsive {
  margin: 0 auto;
  width:100%;
}

.fullvid {
  padding: 0px;
  display: block;
  width: 100%;
}


/***Footer***/
@media (min-width: 768px){
#contact {
  background-color: transparent;
  padding: 50px 150px 20px 150px;
}
}

footer h1 {
  font-size: 2em;
  font-weight: 100;
  color: #fff;
}

footer h3 {
  color: #fff;
}

footer {
  padding: 200px 0;
  float: left;
  width: 100%; 
  color: #3d3d3d;
  text-align: center;
  text-decoration: none;
}

.footer_info {
  float: left;
}


.icons {
  padding-top: 40px;
  float: right;
  width: 490px;
  margin: 0 auto;
  list-style: none;

}

.icons li {
  padding: 20px;
  padding-top: 0px;
  float: left;
}

.icons li .fa { 
  text-align: center;
}

footer a {
  margin-top: 10px;
  text-decoration: none;
  font-weight: 100;
  color: #fff;
  border-radius: 15px;
}

footer ul li a {
  color: #fff; 
}

footer a:hover {
  color: #7de2f9;
  text-decoration: none;
}

/****MOBILE****/

@media only screen and (max-device-width: 480px) {

		.navbar-collapse {
			margin-top: -2px;
			background-color: white;
			height: 100%;
			width: 100vw;
		}
		
		.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle {
			background-color: none;
			border-width: 0;
		}
		
		.navbar-toggle {
			border: 0px none;
			padding: 5px 5px;
			background-color: white !important;
		}
		
		.myQuote {
			font-size: .6em;
		}
		
		.myButton {
			margin-top: -20px;
		}
		
		.image1 {
			display: none;
		}
		
		.image2 {
			display: block;
		}
    }