h1{
		margin:auto;
		font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
		font-weight: 100;
		font-size: 90px;
		color: white;
		margin-top: 20px;
	}
    
    h2{
	    font-size: 50px;
	    font-weight:100;
	    opacity: 0.9;
    }
    
    body{
		background-color: white;
		margin: 0;
    }

    /* Nav Bar */
    .navbar {
	    background-color: #555;
	    margin: 0;
	    padding: 0;
	    width: 100%;
	    line-height: 2;
	    overflow: hidden;
	    position: fixed;
	    height:40px;
	    z-index: 500;
	}

	.navbar li, .navbar a {
		display: block;	
	}

	.navbar li {
		list-style-type: none;
		width:33.333%;
		text-align: center;
		float: left;
		height:inherit;
	    transition: all 0.2s ease-in-out;
	}

	.navbar > li:first-child {
		margin-left: 0;
	}

	.navbar a {
		padding: .25em;
		text-decoration: none;
		height: 1em;
		font-weight: bold;	
		color: #fff;
		font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
		font-weight:100;
		height:inherit;
	    transition: all 0.2s ease-in-out;
	}

	.navbar li:hover, .navbar li:focus {
		background-color: white;
	}

	.navbar a:hover, .navbar a:focus{
		color:black;
	}

    footer{
		text-align: center;
		font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
		height:50px;
		background-color: #3A383A;
		color: white;
		font-weight: 100;
	}

    /* Sections */
    
     .bcg{
	   	background-repeat: no-repeat;
		background-attachment: fixed;
		height: 100%;
		width: 100%; 
	    background-image: url(../banner-bw.jpg);
	   	background-position: center top;
		background-color: white;
    	background-size: cover;
    }

    .apps{
		margin: auto;
		background-color: white;
		margin-top:-10%;
		height:400px;
    }

    #slide2{
    	height:700px;
	width:100%;
	overflow-x:hidden;
    }

    #slide3{
    	height:700px;
	width:100%;
    	overflow-x:hidden;
    }

    #slide4{
    	height:700px;
	width:100%;
    	overflow-x:hidden;
    }

    .appimage{
    	background-repeat: no-repeat;
		background-position: center center;
		background-color: black;
		background-size: cover;
		height: 100%;
		width: 150%;
		margin-left:  -25%;
	}

	.appwrapper{

		height:700px;
		width: 100%;
		overflow-x: hidden;

	}

	#gmtlink{
		color:#333;
	}

	#gmtlink:hover, #gmtlink:focus{
		color: #ff7000;
	    transition: all 0.1s ease-in-out;
	}

	#gmtimage{
		background-image: url(../iPhone.png);
	}

	#teacherplannerlink:hover, #teacherplannerlink:focus{
		color:#ac1d1d;
		transition: all 0.1s ease-in-out;
	}

	#teacherplannerimage{
		background-image: url(../teacherplanneripad.png);
	}

	#iseatraceimage{

		background-image: url(../iSeatRace.png);
		width: 100%;
		margin-left: 0%;
	}

	#iseatracelink{
		color:#333;
	}

	#iseatracelink:hover, #iseatracelink:focus{
		color: #3498db;
	    transition: all 0.1s ease-in-out;
	}

	#contactme{
		background-color: white;
		padding-top: 100px;
		max-width: 1645px;
		margin-right: auto;
		margin-left: auto;
		height: 300px;
	}
	#contactmediv{

		/*background-image: url(../MyDetails.png);*/
		
	}

    

    #wrapper {
    	width: 96%;
		max-width: 920px;
		margin: auto;
    }
    
    
    a {
	    color: #333;
	    padding: 5px 5px;
	    text-decoration: none;
    }
    
    #about_me{
	    
	    margin-left: auto;
	    margin-right: auto;
	    text-align:center;
	    font-weight: normal;
	    color: white;
	    text-align: center;
	    font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    }
    
    #about_me_header{
	    
	    font-size:70px;
	    margin-top:30%;
	    
    }
    
    #about_me_body{
	    font-size:40px;
	    margin-bottom:300px; 
    }
    
    #firefly_link{
	    
	    color: #4099FF;
	    
    }
    
    #firefly_link:hover, #firefly_link:focus{
	    background-color: #4099FF;
	    color: white;
	    border-radius: 14px;
		transition: all 0.2s ease-in-out;
    }

    .apptext{
    	font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-weight: light;
    	color:#333;
    	font-size:large;
    	margin-right: auto;
    	margin-left: auto;
    	max-width: 920px;
    	margin-top:20%;
    	opacity: 0.7;
    	text-align: center;
    }
    
   
    .email, .twitter, .domain, .com{
	 	display:inline;   
	 	border-radius: 0px;
	    transition: all 0.2s ease-in-out;
	    padding: 0px 0px;
    }
    
    #contactmename{
	    text-align: center;
		font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-weight: 100;
		font-size: 5em;
		opacity: 0.6;
    }
    
    #contactmefilter{
	    
	    text-align: center;
		font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-weight: 100;
		font-size: 1.5em;
	    color: #333;
	    text-decoration: none;
	    opacity: 1.0;
	    margin-left:23%;
	    margin-right:23%;
	    margin-bottom: 5%;
    }
    
    
    .filterLine{
	   	opacity: 1;
	   	height: 5px;
    }
   
    #emailfilterdiv{
    	margin-right: 0%;
	}

    #emaillineleft{
	    max-width: 40%;
	    margin-right:10px;
	    
    }
    
    #emaillineright{
	    max-width: 40%;
	    margin-left:10px;
    }
    
    #webfilterdiv{
	    
	    padding-left: 4em;
	    margin-right: -8%;
    }
    
    #weblineleft{
	    max-width: 31%;
	    margin-right:10px;
    }
    
    #weblineright{
	    max-width: 31%;
	    margin-left:10px;
    }
    
    #twitterfilterdiv{
	    margin-left: -8%;
    }
    
    #twitterlineleft{
	    max-width: 22%;
	    margin-right: 10px;
    }
    
    #twitterlineright{
	    max-width: 22%;
	    margin-left: 10px;
    }

    #emaildiv{
    	background-color: #3a383b;
    	height: 13%;
    	text-align: center;
    	padding-top: 5%;
    }

    #emailtitle:hover, #emailtitle:focus{
    	color: #ff7000;
		
    	transition: all 0.2s ease-in-out;
    }

    .emailInputDiv{
    	margin-top: 2em;
    	margin-left:auto;
    	margin-right:auto;
    	height:150%;

    }

    .emailInput{
    	font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-size: 22px;
    	font-weight: 100;
    	width: 50%;
    	height: 150%;
    	border:5px;
    	padding: 10px;
    	min-width: 250px;
    	max-width: 600px;
    }
	
	.emailInput:hover, .emailInput:focus{
		box-shadow: 0px 0px 20px #9ecaed;
	}
	
    .submitClass{
    	width:150px;
    	height:70px;
    	background-color: #226E09;
    	font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-size: 30px;
    	font-weight: 100;
    	color: white;
    	border: none;
    }

    .emailSuccess{
    	width:350px;
    	height:70px;
    	background-color: #226E09;
    	font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-size: 30px;
    	font-weight: 100;
    	color: white;
    	border: none;
    }

    .emailFailure{
    	width:350px;
    	height:70px;
    	background-color: #c0392b;
    	font-family: brandon-grotesque, Helvetica neue, Arial, sans-serif;
    	font-size: 30px;
    	font-weight: 100;
    	color: white;
    	border: none;
    }

    /*input[type="submit"]:hover, input[type="submit"]:focus{
    	border-color: #9ecaed;
    	box-shadow: 0 0 10px #9ecaed;
    	transition: all 0.1s ease-in-out;
    }

    /* Media Queries */

     @media (max-width: 1600px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 90%;
		
		} 	
	.appimage{
    	
		width: 150%;
		margin-left:  -25%;
		}
    }
    @media (max-width: 1400px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 85%;
		
		} 	
    }
    @media (max-width: 1285px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 75%;
		
		} 	
    }
    @media (max-width: 1125px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 65%;
		
		}
	.appimage{
    	
		width: 200%;
		margin-left:  -50%;
		}	 	
    }
    @media (max-width: 1000px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 60%;
		
		} 
	.appimage{
    	
		width: 200%;
		margin-left:  -50%;
		}	
    }
    @media (max-width: 900px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 55%;
		
		}
	.appimage{
    	
		width: 200%;
		margin-left:  -50%;
		} 	
    }
   @media (max-width: 800px){
   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv{

			font-size: 50%;
		
		} 	
	.appimage{
    	
		width: 225%;
		margin-left:  -67.5%;
		}
    }
    @media (max-width: 700px){
	   	.email, .twitter, .domain, .com, #emailfilterdiv, #webfilterdiv, #twitterfilterdiv, #contactmename{
	   			opacity: 0;
	   			color:white;
	   			
			}
		#contactmediv{
			background-image:url(../MyDetails.png);
			background-repeat:no-repeat;
			background-size:contain;
		}
		#contactme{
			height:4%;
			padding-top:30%;
		}
		.appimage{
	    	
			width: 450%;
			margin-left:  -175%;
		}

    }

    @media (max-width: 450px){
    	#myName{
			font-size: 80px;
	   }
	   .appimage{
	    	
			width: 100%;
			margin-left:  0;
		}
    }