@import url('reset.css');

html,body{
		height:100%;
        background-color: #000000;
}

body{
		margin:0;
		box-sizing: border-box;
		overflow: auto;
        line-height: 160%;
}
header, section, footer{
		margin:0 auto;
		max-width: 1280px;
}
header{
		padding: 5% ;
		overflow: auto;
}

h1{
		font-family: serif;
		color: #ffffff;
		font-size: 20px;
}

h2{ 
        font-family: sans-serif;
		color: #cccccc;
		font-size: 14px;
}

nav ul {
		float: right;
}		

nav ul li{
		display:inline;
}

nav ul li a{
		color: #cccccc;
		font-family: 'Lato', sans-serif;
		line-height: 160%;
		display: block;
		float: left;
		margin-left:20px;
		text-decoration: none;
}

img{
		display: block;
		width:100%;
		height:auto;
		box-sizing: border-box;
		
}
img.mainimg{
	width:100%;
	height: auto;
	display: block;
}


footer{
		height: 200px;
		background-color: #000000;
		clear: both;
		padding:  20px 0;
		display: block;
		margin-bottom:100px;
}

footer ul li{
		color: #ffffff;
		font-family: 'Lato', sans-serif;
		line-height: 160%;
		text-align: center;


}
.grid-sizer,
.grid-item { width: 33.3%; overflow: auto }
.grid-item--width2 { width: 66.6%; overflow: auto }

@media (min-width: 401px) and (max-width:768px){
	
	.grid-sizer,.grid-item{
		width:50%;
		transition: 0.3s width linear; 
	}
	
	.grid-item--width2{
		width:100%;
		transition: 0.3s width linear; 
	}

}

@media (min-width: 0px) and (max-width:400px){

	.grid-sizer,.grid-item, .grid-item--width2 {
		width:100%;
		height: auto;
		float: none;
		transition: 0.3s width linear; 
		display: block;
		overflow: auto;
	}
}