/* Responsive Design Layout Styling */
/* Default styles for Mobile Layout */

	body,.largeBackground,html,h1,canvas,a,li,ul,nav,header,img,footer{margin:0px;padding:0px;}
	body,html{height:100%;}
	body {padding:2px;}
	nav .button{text-align:center; width:100%;height:29px; padding-top:0px; font-size:22px; box-sizing: border-box;}
	nav .button a{ border: solid #ccffcc 2px;}
	header {font-size:7px; background-image:url(../images/dots.png); background-repeat:repeat-x; padding-bottom:10px;}
	header h1{ position:relative; top:-20px;}
	header h1 canvas{position:relative; top:35px; margin-bottom:10px;}
	.Column{width:80%;margin:0 10%}
	.view, .view.content{overflow:hidden; }
	.bordered{ width:100%; margin:5px auto;}

	
@media only screen and (min-width:300px) {
	header {font-size:11px;  padding-bottom:15px;}
	header h1{ position:relative;top:-25px;}
	header h1 canvas{top:40px; margin-bottom:5px;}
}

/* Styles for the next breakpoint at 400px */
@media only screen and (min-width:400px) {
	header{font-size:18px;	}
	nav ul li {display:inline;}
	nav .button{font-size:20px; padding-bottom:5px; padding-left:6px; padding-right:6px;}
	article{margin:10px;}
	.Column img{ max-width:300px;}
	.view-first:hover img {transform: scale(1.5);} 
	.large{font-size:2em;}
	.view p{padding:20px; }
}

/* Styles for the next breakpoint at 650px */
@media only screen and (min-width:650px) {
	.container{margin:5px auto; max-width:1000px;}
	header {font-size:25px; height:150px;	}
	nav .button{font-size:30px;padding:18px; position:relative; top:-20px;}	
	article {clear:both;}
	.Column{float:left; width:30%;margin:1.5%}
	.view h2{ padding:3px;}
	.view a.info{padding:3px 10px; }
	.large{font-size:3em;}
	.view p{padding:0; }
}

/* Styles for the next breakpoint at 980px */
@media only screen and (min-width:980px) {
	.view.content{
	width:300px; height:200px; position:absolute;top:0; left:0;}
	header {font-size:2em;}
	.view h2{ padding:10px;}
	.view a.info{padding:7px 14px; }
	nav .button{padding:50px; position:relative; top:-40px;}	
	.view p{padding:25px; }
}