@charset "UTF-8";

body{
	background-position: 200px -100px;
}

.mainContent{
	grid-template-columns: 35% 40% 20%;
	grid-template-rows: 10% auto 15% auto auto;
}
.mainContent img{
	max-width: 180px;
}
.logo{
	padding-top: 30px;
	padding-left: 50px;
}
.item-c {
	padding-left: 40px;
}
.item-d{
		grid-column: 2 / span 2;
		grid-row: 2 / span 1;
	}
.social{
		grid-column: 2 / span 1;
		grid-row: 3 / span 1;
	}

.logo2{
	grid-column: 1 / span 1;
	padding: 0;
}
.logo2 ul{

}
.item-b {
	grid-row: 4/ span 1;
	padding-left: 50px;
}
footer{
	padding-left: 50px;
	grid-row: 5 / span 1;
}
@media only screen and (max-width : 1000px) {
	.social ul li{
		float:left;
	}
	
}
@media only screen and (max-width : 640px) {
	body{
		background-position: 5px -60px;
		background-size:610px;
		height:100vh;
	}
	.mainContent{
		grid-template-columns: 50% 50%;
		grid-template-rows: 40px 225px 190px auto auto auto;
		grid-gap: 0;
		height:auto;
		padding:0;
	}
	.mainContent img{
	width:120px;
	height: auto;
	padding-top:0;
}
	.logo{
		grid-row:2 / span 1;
		padding-left:20px;
	}
	.item-b{
	grid-column: 1 / span 2;
	grid-row:4 / span 1;
	padding-bottom: 0;
	padding-left: 20px;
	}
	.logo2{
	grid-column: 1 / span 2;
	grid-row: 2 / span 1;
	}
	.logo2 ul{
		margin-left: -10vh;
	}
	.logo2 ul li{
	float: left;
	}
	.logo2 ul li:first-child{
		padding-left:0;
	}
	.item-d{
		grid-column: 1 / span 2;
		grid-row: 3 / span 2;
		padding-left: 20px;
		padding-right: 20px;
	}
	.social{
		grid-column: 1 / span 2;
		grid-row: 5 / span 1;
	}
	.social ul li{
		float: left;
	}
	.social ul li img{
		max-width: 50px;
	}
	h1{
	font-size: 1.1em;
}

	footer{
	padding-left: 20px;
		grid-column: 1 / span 2;
		grid-row: 6 / span 1;
		margin-top: 20px;
	}
p {
	font-size: 1em;
}
}