/*	----------------------------------------------------------------------------------------------------
    ----------------------------------------------------------------------------------------------------

	:: Layout for tablet and desktop version	
	
	----------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------- */



	
/*	--------------------------------------------------
	:: Colour Palette
	
	#2e2e2e Dark Grey
	#ececec Light Grey	
	
	-------------------------------------------------- */







body { 
    font : 100% 'brandon_grotesque_regularRg', sans-serif; 
    color: #363636;

}


.col { 
    background: ; 
    padding:1em 0; 
}

#maincontainer {
    padding: 2% 10% 0% 10% ; 


}

#maincontainer-project {
    padding: 2% 12% 0% 12% ; 
	background-color: ;

}

#header {
    height: auto;
	background-color:  ;
	text-align: center;
    
}

#container {
    padding: 2% 0% 2% 0%;
    background-color: ;
    height: auto;
}

/*  LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    
#container {
    padding: 0% 4% 3% 4%;
    height: auto;
	background-color: ;
    
}
	
}


#footer {
    font-size: 0.95em; 
    letter-spacing: 0.02em; 
    text-align:center;
    padding-top: 15%;
    
}

/*	--------------------------------------------------
	:: Video
	-------------------------------------------------- */

#video {
    width: 100%;  
    padding-top:;
}

/*	--------------------------------------------------
	:: Images
	-------------------------------------------------- */

#logo {
    text-align: ;
}

#screenshot2colhp img {
	width:100%;
    padding: 5% 0% 5% 0%; 

}

#screenshot2col img {
	width:100%;
}


#screenshot3col img {
    width:100%;
}

#screenshot4col img {
    width:100%;
}




/*	--------------------------------------------------
	:: Typography
	-------------------------------------------------- */


#h1 {
	
	font : 0.95em 'brandon_grotesque_regularRg', sans-serif;    
    text-align: center;
    letter-spacing: 0.1em; 
    padding:  0% 0% 0% 0%;
    vertical-align: middle;
    line-height: 500%;
	color: aqua;
	text-transform: uppercase;
}


h1.siteheader {

    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em; 
    padding: 4% 0% 2% 0%;

}


#name p {

    font : 0.95em ;     
    text-align: center;
    letter-spacing: 0.1em; 
    padding:  0% 0% 0% 0%;
    vertical-align: middle;
    line-height: 500%;   
}

#phone {

    font-size : 1.08em ;     

}

/*  LESS THAN 480 PIXELS */

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

#name p {
    font-size: 0.90em; 
    letter-spacing: 0.1em; 
    padding:  0% 0% 5% 0%;
    vertical-align: middle;
    line-height: 0%;  
}
}


#info p {
    font-size: 1em;
    text-align: right;
	text-transform: uppercase;
    letter-spacing: 0.1em;  
    padding:  0% 0% 0% 0%;
    vertical-align: middle;
    line-height: 500%;  
	background-color: ;
}


#next p {
    font-size: 1em;
    text-align: center;
    letter-spacing: 0.1em; 
    padding:  0% 0% 0% 0%;
    vertical-align: middle;
    line-height: 500%;   
}



/*  LESS THAN 480 PIXELS */

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

#next p {
    font-size: 0.90em; 
    letter-spacing: 0.1em; 
    padding:  0% 0% 5% 0%;
    vertical-align: middle;
    line-height: 0%;  
}
}

#about {
    padding:  6% 20% 6% 20%;
    line-height: 1.5em;
    letter-spacing: 0.08em;  
    text-align: center;
    background-color: #ffffff;
}

/*  LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    
#about {
    padding:  8% 8% 8% 8% ;  

}
}


h1.hptitle {
    font : 2.6em;  
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em; 
    padding: 4% 0% 2% 0%;
}

/*  LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    
h1.hptitle {
    font-size: 1.8em; 
}
}

h1.projecttitle {
	font : 'brandon_grotesque_regularRg', sans-serif;  
    font-size: 1.8em;
    text-transform: ;
    letter-spacing: 0.1em; 
    line-height: 1.1em;
    margin-bottom: 3%;
	text-transform: uppercase;
}

/*  LESS THAN 480 PIXELS */

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

h1.projecttitle {
    font-size: 1.5em;
    line-height: 1.1em;
    padding-bottom: 5%;
}
}

h2.hptitle {
    font-size: 1.2em; 
    text-align:center;
    text-transform: uppercase;
    letter-spacing: 0.05em; 
    padding-top: 5%;

    line-height: 1.5em;
}

h3.hptitle {
    font-size: 0.85em; 
    padding: 5% 0% 5% 0%;
}

/*  LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    
h3.hptitle {
    font-size: 1.55em; 
    padding: 5% 0% 5% 0%;
}
}

#projecttitle {
    padding: 0% 0% 0% 0%;
    text-align: left;
}

/*  LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    
#projecttitle {
    padding: 5% 0% 1% 0%;
}
}


p.subinfo {
    font-size: 0.95em; 
    text-transform: uppercase;
    letter-spacing: 0.1em; 
    
}

p.info {
    font-size: 1.25em; 
    letter-spacing: 0.0em; 
    
}

/*  LESS THAN 480 PIXELS */

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

p.subinfo {
    font-size: 0.em;
    letter-spacing: 0.01em; 
}
}

#projectintro {
    font-size: 1.2em;
    text-align: left;
    line-height: 1.5em;
    letter-spacing: 0.0em;     
    padding: 0% 50% 0% 0%;
}


/*  LESS THAN 480 PIXELS */

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

#projectintro {
    font-size: 1em; 
    padding: 0% 0% 0% 0%;
}
}

#bold {
    font : 100% 'brandon_grotesque_regularRg', sans-serif; 
}

#footer {
    font-size: 0.8em;
    padding-top: 10%;
}





/*	--------------------------------------------------
	:: Links
	-------------------------------------------------- */

	a:link {text-decoration:none; color:#363636;
	}
	a:visited {text-decoration:none; color:#363636; 
	}
	a:hover {text-decoration: none; color:#b3b3b3; 
	}
	a:active {text-decoration:none; color:#363636;
	}

		
	#footer a:link {text-decoration:none; color:#363636;
	}
	#footer a:visited {text-decoration:none; color:#363636; 
	}
	#footer a:hover {text-decoration: none; color:#b3b3b3;
	}
	#footer a:active {text-decoration:none; color:#363636;
	}

    #next a:link {text-decoration:none; color:#363636;
	}
	#next a:visited {text-decoration:none; color:#363636; 
	}
	#next a:hover {text-decoration: none; color:#b3b3b3;
	}
	#next a:active {text-decoration:none; color:#363636;
	}

	

/*	--------------------------------------------------
	:: Sticky footer
	-------------------------------------------------- */