* {
	padding:0;
	margin:0;
}

html {
	overflow-x:hidden; 
}

a {
	color:inherit;
}

a:hover {
	color:inherit;
}

p {
	text-indent:50px;
}

embed {
	display:none;
}


body {
	background-color:#eee;
	font-family: 'Exo 2', sans-serif;
	width:100%;
}
header {
	position:relative;
	width:100%;
	height:400px;
	background-color:#DF6741;
	background:url(../img/background4.jpg) center center no-repeat;
	/*background:url(../img/webDesignBack.png) center center no-repeat;*/
	background-size:cover;
	overflow:hidden;
	z-index: 0;

}

h2,h3,h4, h5, h6 {
	font-family: 'Play', 'Helvetica', sans-serif;
	color:#33A165;
	font-size: 3em;
}

h3 {
	margin-top:10px;
	font-size: 2.5em;
}

h4 {
	margin-top:15px;
	font-size: 1.8em;
}

h5 {
	margin-top:15px;
	font-size: 1.6em;
}

h6 {
	margin-top:10px;
	font-size: 1.4em;
}

table {
	margin:0 auto;
}

table tr td {
	font-size: 1em;
}

header img {
	width:100%;
	/*min-width: 400px;*/
	position:absolute;
	bottom:0;
	z-index:0;
	display:none;

}

#banner {
	position:relative;
	z-index:20;
}


.ribbon {
   width: 80%;
   position: relative;
   top:500px;
   text-align: center;
   font-size: 20px!important;
   background: #33A165;
   background: -webkit-gradient(linear, left top, left bottom, from(#33A165), to(#318D5B));
   background: -webkit-linear-gradient(top, #33A165, #318D5B);
   background: -moz-linear-gradient(top, #33A165, #318D5B);
   background: -ms-linear-gradient(top, #33A165, #318D5B);
   background: -o-linear-gradient(top, #33A165, #318D5B);
   background-image: -ms-linear-gradient(top, #33A165 0%, #318D5B 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 0px 0px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 0px 0px;
   box-shadow: rgba(000,000,000,0.3) 0 0px 0px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }

.ribbon h6 {
   color: #fff;
   font-weight: bold;
   height: 62px;
	padding-top: 10px;
 }

.ribbon:before, .ribbon:after {
   content: '';
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #33A165;
   z-index: -1;
   }
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) 0px 0px 0px;
   -moz-box-shadow: rgba(000,000,000,0.4) 0px 0px 0px;
   box-shadow: rgba(000,000,000,0.4) 0px 0px 0px;
   }
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) -0px 0px 0px;
   -moz-box-shadow: rgba(000,000,000,0.4) -0px 0px 0px;
   box-shadow: rgba(000,000,000,0.4) -0px 0px 0px;
   }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #1C5E3A transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }

.top-bar {
	background-color:#DF6741;   /* ORANGE */
}

.top-bar-section > ul > a {
	color: white;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: normal;
	background: #333333;
}

.top-bar-section ul li > a {

}

.top-bar-section > ul > a:hover {
	background-color:#282828 !important;
}

.top-bar .name h1 a {
	width:70%;
}

.logo {
	margin-top:0px;
	color:#eee;
	font-family: 'Play', 'Helvetica', sans-serif;
	background-color:rgba(223, 103, 65, 0.8);
	font-size: 4em;
	text-align:center;	
}

.logo:hover, .logo:active, .logo a:hover, .logo a:active, .logo a, .logo a:visited, .logo a:focus, .logo a:link {
	color:#fff;
}

.navigation a, .navigation a:visited, .navigation a:focus, .navigation a:link {
	color:inherit;
}

.big-title {
	margin-top:0px;
	color:#eee;
	font-family: 'Play', 'Helvetica', sans-serif;
	font-size: 3.6em;
	background-color: rgba(22, 22, 22, 0.8);
	text-align:center;
	position: absolute;
	bottom: -90px;
	margin-bottom: 0px;
	width: 100%;
	z-index: 20;
}

article {
	width:100%;
	margin:0 auto;
}




#nav {
	list-style-type:none; 
}

#nav li {
	float:left;
	padding:4px 20px;
	/*border-radius:0px 0px 10px 10px;*/
}

#nav li:hover {
	background-color:#DF6741;
	color:#eee;
}

#links li a:hover {
	color:#33A165;
}

#home .panel {
	width:200px;
	min-height:200px !important;
}

#webDesign .panel {
	background-color:rgba(51,161,101,0.9);
	position:absolute;
	width:100%;
	/*height:300px;*/
	bottom:300px;
	margin-bottom:-300px;
	border:none;
	display:none;
	padding:1.25rem 2rem;
	cursor:initial;
}

.siteSample {
	cursor:pointer;
	position:relative;
	overflow: hidden;
}

.year {
	margin-top: 24px;
	font-weight: 100;
	font-size: 4rem;
}

#webDesign .panel p, #webDesign .panel h5, #webDesign .panel ul li {
	color:#fff;
}



i {
	margin:0 auto;
}
li.text-center {
	margin:50px 0;
}

article {
	overflow:hidden;
	display:none;
}

#home {
	display:block;
}

#webDesign img {
	width:100%;
	position:relative;
	/*box-shadow:0px -5px 10px #111;*/
}

#techTutoring  ul{
	color:#33A165;
}

.intro {
	padding:20px;
}

#sites, #sites > .column {
	padding:0;
}

#sites a:link, #sites a:visited, #programmingPortfolio a:link, #programmingPortfolio a:visited {
	color:#123A47;
	text-decoration: underline;
}

#sites a:hover, #sites a:active, #programmingPortfolio a:hover, #programmingPortfolio a:active {
	color:#fff;
}

#more a, #more a:link, #more a:visited{
	color:#008cba;
}

#more a:hover, #more a:active {
	color:#33A165;
}

#sites .overlay {
	background-color:rgba(0,0,0,0.6);
	width:100%;
	height:100%;
	position:absolute;
	top:0;

}

#sites .overlay:hover {
	background-color:rgba(0,0,0,0);
}

#fish > img {
	margin-bottom:-56.8%;
}

#car > img {
	margin-bottom:-62%;
}


#clean > img{
	margin-bottom:-73%;				
}

#togo > img {
	margin-bottom:-77%;
}

#design > img {
	margin-bottom:-82%;
	
}

#cafe > img {
	margin-bottom:-66%;
}

#church > img {
	margin-bottom:-56.7%;
}

#inspections > img {
	margin-bottom:-52%;
}

#invaders > img {
	margin-bottom:-42%;
}

#lamp > img {
	margin-bottom:-59%;
}

#salon > img {
	margin-bottom:-71.7%;
}

#more {
	position:relative;
	width:100%;
	background-color: #eee;
	padding:20px;
}

#more > p {
	margin-bottom: 0;
	padding-bottom: 1.25rem;
}

#bignav {
	background-color:#eee;
	height:35px;
}

#impact {
	top: 20%;
	position: relative;
	padding-left:3%;
	max-width:94%;
	cursor:pointer;
}

#impact > div > h3{
	font-family: 'Exo 2', sans-serif;
	color: #eee;
	text-shadow: -1px -1px 0 #575656, 1px 1px 0 #FEFEFE, 4px 4px 3px #111;
}

.services > li {
	background-color:#eee;
	color:#33A165;
	margin:0 2% 1.25rem;
	width:96%;
	height:45px;
	overflow:hidden;
	cursor:pointer;
}

.services > li > h6 {
	color:#33A165;
}

.programs > li {
	padding:0;
}

.projPhoto {
	overflow: hidden;
	padding-left:2%;
	padding-right:2%;
	cursor: pointer;
}

.projPhoto h6, .projPhoto p{
	color: rgb(238, 238, 238);
}

.projPhoto img {
	padding:10px;
	width:100%;
}

#programmingPortfolio .panel {
	background-color:rgba(51,161,101,1);
	width: 93%;
	height: 100%;
	padding:6%;
	position: absolute;
	top: 400px;
	border:0;
	box-shadow: 0px 1px 2px #111;
}

#firstList {
	border: solid rgb(51, 161, 101);
	border-width: 0 2 0 0;
}

#secondList {
	border: solid rgb(51, 161, 101);
	border-width:0;
}

#aboutMe img {
	margin-top: 20px;
	border-radius: 100%;
}

footer {
	margin-top:30px;
}

footer p {
	margin:10px;
	text-indent: 0;
}

footer a:link, footer a:visited {
	color:#008cba;
}

footer a:hover, footer a:active {
	color:#33A165;
}

@media only screen and (max-width: 64em) {  /* medium and small screens */
	#sites .overlay {
		display:none;
	}

	footer {
		background-color:#DF6741;   /* ORANGE */
		color:#fff;
	}

	footer p {
		font-size: 0.8em;
	}

	.services > li {
		margin:0 5% 1.25rem;
		width:90%;
	}

	#firstList, #secondList {
		border:none;
	}

	.navigation a, .navigation a:visited, .navigation a:focus, .navigation a:link {
		color:#fff;
	}


	footer a:link, footer a:visited {
	color:#eee;
	text-decoration: underline;
	}

	footer a:hover, footer a:active {
		color:#272727;
	}

	.siteSample:not(:first-child) {
		box-shadow: 0px -3px 6px #111;
	}

}


@media only screen and (min-width: 40.063em) and (max-width: 64em) {     /* medium Screens */

	header h1 {
				font-size: 2em !important;

	}
	.top-bar-section {
		margin:0 auto;
		width:609px;
	}

	.top-bar-section > ul > a > li {
		padding: 0 14px;
		line-height: 45px;
		background: #DF6741;
	}

	.top-bar-section > ul > a > li:hover {
		background: #272727;
	}


	header {
	height:320px;
	}

	#impact {
		top:12%;
		max-width: 98%;
		padding-left:0;
	}

	.year {
		font-size: 3rem;
	}

	.ribbon {
		width:100%;
	}

	.ribbon h6 {
		font-size: 1em;
		padding-top: 16px;
	}


	#bignav {
		display:none;
	}

		#programmingPortfolio .panel {
		width: 92%;
	}

	.projPhoto p {
		font-size: 0.8em;
	}

	#aboutMe img {
		margin: 0 2%;
		max-width: 20%;
		float:left;
	}

}

@media only screen and (max-width: 40em) {  /* small screens */
	#bignav {
		display:none;
	}

	.top-bar {
			position:fixed;
				top:0;
				width:100%;
				z-index:100;
			}
	.top-bar-section > ul > a {
		background-color:rgba(3, 3, 3, 0.6) !important;
		display: block;
		width: 100%;
		padding: 12px 0 12px 15px;

	}

	header {
		height:309px;
	}

	/*header img {
		top:45px;
	}*/

	#impact {
		top:18%;
		max-width: 80%;
		padding-left:0;
	}

	.year {
		font-size: 2rem;
	}

	.ribbon {
		width:100%;
		margin-bottom: 23px;
	}

	.ribbon h6 {
		font-size: 1em;
		height:46px;
	}


	.ribbon:before, .ribbon:after {
	   border: 1.1em solid #33A165;
   }

	.ribbon:before {
	   border-right-width: 1.8em;
	   border-left-color: transparent;
   }

	.ribbon:after {
	   border-left-width: 1.8em;
	   border-right-color: transparent;
   }

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #1C5E3A transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }

	.top-bar-section ul {
		background:none;
	}

	#webDesign .panel {
		bottom:initial;
		margin-bottom:0;
		position:relative;
	}

	.big-title {
	font-size: 1.6em;
	background-color: rgb(22,22,22);

	}

	.services > li > h6 {
		font-size: 1em;
	}

	.services > li > p {
		font-size: 0.9em;
	}

	#programmingPortfolio .panel {
		width: 96%;
	}

	.projPhoto {
		margin-bottom:20px;
	}

	.projPhoto p {
		font-size: 0.8em;
	}

		#aboutMe img {
		max-width: 50%;
		margin: 20px auto;
		float:none;
	}

	#techTutoring div.column:first-child > ul{
		margin-bottom:0;
	}



}