@charset "UTF-8";
/* CSS Document */
#bikeinfo ul {
	list-style-type: none;
}

#bikeinfo {
	margin-top:50px;
	display:block;
	position:relative;height:100%;
	width:100%;
	z-index:-2;
}


#sketch4text {
width:50%;
font-family:karla;	font-size:1.4em;
	top:117%;position:absolute;
	left:25%;
		padding-bottom:20px;
		}



#bikeinfo #sketch {
	
	
	width:400px;
	margin-top:-100px;position:relative;
	left:13%;
	
	
	
	}
	#sketchtext2 {
width:30%;
font-family:karla;	font-size:22px;
	margin-top:-330px;position:absolute;
	left:53%;
		padding-bottom:20px;
		}
	
	#sketchtext {

font-family:karla;	font-size:22px;
	}


.sketch2 {
	
	width:32%;
	position:relative;
	top:120px;
	left:50%;margin-bottom:15px;
	}


#bikeinfo #sketch3 {
	
	
	width:36%;
	top:368px;position:absolute;
	left:14%;
	
	
	
	}
	
	
.sketch4 {
	
	top:146%;
	width:36%;
	position:absolute;
	left:31%;
	
	
	
	}




div.gallery2 {
    margin: auto;
 position:relative;
    top:150px;
    width: 60%;
	display:block;padding-toP:50px;
	
}


div.gallery2 img {
    width: 100%;
    height: auto;
	border: gray solid 1px;
}


#blurb h1 {text-align:center;}

div.desc {
    padding: 15px;
    text-align: center;
}


	@media screen and (max-width: 750px)  {
#blurb {margin:auto;
	
	width:50%;
	font-family:Gotham extralight;
	position:relative;
	left:40px;
	top:100px;
	font-size:2em;display:block;
	padding:1%;
}}



.wrapper h1 {
font-family:karla;
top:350px;	position:absolute;
font-size:30px;
line-height:40px;left:60px;
	}


.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 1000px;margin-top:-100px;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100%;
  
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  background-repeat:none;
  
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/bike/IMG_0010.jpg);
  background-size:100%;background-repeat:no-repeat;background-size:cover;
  background-position:center;
  
  background-repeat:no-repeat;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-repeat:no-repeat;background-size:cover;
  background-position:center;
  background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/bike/DSC_0145.jpg);
}

.bg2::after {
  background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/bike/DSC_0144.jpg);
  
  height:90%;

}

.circle-div {
    position:absolute;
    top:0;
    left:0;
    z-index:3;

    padding:25px;width:300px;
	height:95%;background-color:rgba(255,255,255,.4);
    text-align:center;
}

.circle-div2 {
    position:absolute;
    top:0;
    left:350px;
    z-index:3;

    padding:25px;width:1200px;
	height:250px;background-color:rgba(85,85,85,.5);
    text-align:center;
}






	@media screen and (max-width: 1100px)  {


#bikeinfo #sketch {
	
	
	width:380px;
	margin-top:200px !important;position:relative;
	left:-18%;
	display:block;
	margin:auto;
	
	
	}
	
	#bikeinfo #sketch3 {
		
			width:36%;
	top:398px;position:absolute;
	left:16%;
	}
	
	
	#bikeinfo .sketch4 {
		
			width:70%;
	top:115%;position:absolute;
left:16%;
	}
	
	
	#sketchtext {
width:60%;
font-family:karla;	
display:block;
margin-left:0 !important;
margin-right:0 !important;padding:50px;
		height:20%;	
		

		}
		#sketch4text2 {		
			top:170%;position:absolute;
	left:-9%;
	width:100%;	
		}
		#sketch4text {
width:60%;
font-family:karla;	

		
		}
		
		#sketchtext2 {
			top:30px!important;
display:block;
width:100%;left:10%;
			}
		
		
		.sketch2 {
	
	width:32%;
	position:relative;
	top:73px;
	left:53%;margin-bottom:15px;
	}
		
	}