.textSlide{
	width: 300px;
	margin-right: 0;
}

.clicked{
	border: 1px solid #e9e0b7;
	border-radius: 0;
	padding: 1em 1.5em 1em 1.5em;
	color: #e9e0b7;
	font-size: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	webkit-box-shadow: inset 10px 10px 70px 0px black;
	-moz-box-shadow: inset 10px 10px 70px 0px black;
	box-shadow: inset 10px 10px 70px 0px black;
}

.frontRow{
	padding: 0 10% 0 10%;
}

#frontR1{
  width: 100%;
  background-image: url(img/frontBackground.png);
  background-repeat: repeat-y;
  background-repeat: repeat-x;
  color: white;
  padding: 0;
}

#frontR1 h1{
	font-size: 350%;
}

#frontR1 h3{
	margin-top: 30px;
}

#frontR0a{
	height: 120px;
}

#frontR1a{
	height: auto;
	text-align: left;
}

#frontR2a{
	padding-top: 20px;
	height: auto;
	padding-bottom: 20px;
}

#frontR3a{
	padding-top: 40px;
	height: auto;
}	

#frontR4a{
	height: auto;
	padding: 40px 10% 40px 10%;
}

#frontR4a p{
	text-align: center;
	padding-top: 8px;
}

#frontR3a .btn-theme{
	background-color: transparent;
	color: white;
	width: 100%;
	height: auto;
	border-radius: 0;
	border-color: white;
	border-style: dashed;
	padding: 1em 0 1em 0px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#frontR3a .btn-theme:hover, #frontR3a .btn-theme:focus{
	color: #e9e0b7;
	border-color: #e9e0b7;
	border-style: solid;
	webkit-box-shadow: inset 10px 10px 60px 0px black;
	-moz-box-shadow: inset 10px 10px 60px 0px black;
	box-shadow: inset 10px 10px 60px 0px black;
}

#ericDivider{
	border-width: 0px;
	border-right-style: none;
}

#ericDivider p{
	text-align: center;
	color: #a5aeb6;
}

em{
	font-style: italic; 
	color: #a5aeb6;
}

#lightSlider{
	padding-top: 20px;
	width: 60%;
}

.quote{
	text-align: left;
}

.reference{
	margin-top: 20px;
	text-align: left;
}

#frontR1a span, #lightSlider li p span, #frontR4a em{
	color: #e9e0b7;
}

.cd-timeline-img{
	background-color: #547e3d;
}

#frontR1a h1, #frontR1a h3{
	text-align: left;
}

#frontR4a em:hover{
	color: #bab392;
}


/* ------------------------------------------------ MEDIA QUERIES ------------------------------------------------*/

@media (max-width: 480px){
    #frontR1{
      height: auto;
    }
}

@media (min-width: 768px) {

	#frontR1{
	    height: 100%;
	  }
  
 	#frontR1a h1, #frontR1a h3{
		text-align: center;
	}

 	.quote{
 		text-align: center;
 	}

 	.reference{
 		text-align: center;
 	}

 	.textSlide{
		width: 400px;
		padding-left: 0%;
		margin-right: 0;
	}

	#frontR0a{
		height: 30%;
	}

	#frontR1a{
		height: 15%;
		padding: 0;
		text-align: center;
	}

	#frontR2a{
		height: 15%;
	    padding-left: 25%;
	    padding-right: 20%;
	    width: 100%;
	}

	#frontR3a{
		height: 15%;
	}	

	#frontR3a ul{
 		list-style-type: none;
 		text-align: center;
 	}

 	#frontR3a ul li{
 		display: inline;
 		padding-left: 5%;
 		padding-right: 5%;
 	}

	#frontR4a{
		height: 25%;
	    padding-left: 20%;
	    padding-right: 20%;
	}

	#frontR3a .btn-theme{
		background-color: transparent;
		color: white;
		width: auto;
		height: auto;
		text-align: center;
		padding: 1em 2em 1em 2em;
		border-radius: 0;
		border-color: white;
	}

	#ericDivider{
		border-right-style: solid; 
		border-width: 1px;
	}

	#lightSlider{
		padding-top: 0; 	
	}
	
	#lightSlider .active{
		max-width: 1100px;
	}
}

/* Hack to work around initial width set of lightSlider.js */
@media (min-width: 300px){
	.textSlide{
		width: 200px;
	}
}

@media (min-width: 500px){
	.textSlide{
		width: 300px;
	}
}


@media (min-width: 700px){
	.textSlide{
		width: 400px;
	}
}

@media (min-width: 900px){
	.textSlide{
		width: 500px;
	}
}


@media (min-width: 1000px){
	.textSlide{
		width: 550px;
	}
}

@media (min-width: 1200px){
	.textSlide{
		width: 600px;
	}
}

@media (min-width: 1300px){
	.textSlide{
		width: 650px;
	}
}

@media (min-width: 1400px){
	.textSlide{
		width: 700px;
	}
}

@media (min-width: 1500px) {
	.textSlide{
		width: 770px;
		padding-left: 20%;
		margin-right: 0;
	}

	#frontR2a{
		padding-left: 20%;
		padding-right: 20%;
	}

	.quote, .reference{
		text-align: center;
	}
}

@media (min-width: 1600px){
	.textSlide{
		width: 800px;
	}
}

@media (min-width: 1700px){
	.textSlide{
		width: 860px;
	}
}

@media (min-width: 1800px){
	.textSlide{
		width: 890px;
	}
}

@media (min-width: 1900px){
	.textSlide{
		width: 920px;
	}
}

@media (min-width: 2000px){
	.textSlide{
		width: 950px;
	}
}