body {
	font-family: 'Montserrat', arial,helvetica;
}

h1, h2, h3 {
	font-family: 'Raleway';
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

.section .text-content {
	font-size: 1.2em;
	position: absolute;
	/*letter-spacing: 1px;*/
	max-width: 50%;
}

.text-content.light {
	color: white;
}

.text-content.dark {
	color: black;
}
.flag-section-container {
	height: 160px;
}
.flag-section {
	margin: 7px;
	float: left;
	width: 30%;
	opacity: 0.7;
}
.flag-section:hover {
	opacity: 1;
	cursor: pointer;
}
.flag-section img {
	float: left;
	height: 160px;
	width: 160px;
	border-radius: 80px;
	margin-right: 20px;
}
.flag-section h3 {
	margin-top: 40px;
	margin-bottom: 10px;
}
a, a:visited {
	color: black;
}
.section {
	background-position:center;
}
.bottomright {
	bottom: 50px;
	right: 5%;
}
.bottomleft {
	top:400px;
	left:10%;
	max-width:700px;
}
.bottomleft p:last-child {
	margin-top:10px;
}
.topright {
	top:100px;
	right:10%;
	max-width:700px;
}
.right {
	top:200px;
	right:10%;
	max-width:700px;
}
#section0 {
	background-image: url('image/color1.jpg');
	background-size: cover;
}
#section1 {
	background-image: url('image/pro1.jpg'); 
	background-size: cover;
}
#section2 {
	background-image: url('image/dark1.jpg');
	background-size: cover;
}
#section3 {
	background-image: url('image/prod-slide1.jpg');
	background-size: cover;
}
@media only screen and (max-width: 1366px) {
	.bottomleft {
		top:50%;
	}
}
@media only screen and (max-width: 1024px) {
	h1, h2 {
		font-size: 2.5em;
	}
	#section3 {
		background-image:url('image/prod-slide1mid.jpg');
		background-position: left top;
	}
	.bottomleft {
		position:relative;
		width:100%;
		height:100%;
		top:auto;
		left:auto;
		max-width:1024px;		
	}
	.bottomleft h2 {
		position:absolute;
		top:10%;
		right:15%;
	}
	.bottomleft .textarea {
		position:absolute;
		bottom:25%;
		left:10%;
		max-width:500px;
	}
	.topright {
		top:-3%;
		right:5%;
	}
	.right {
		right:2%;
	}
	.section .text-content.bottomleft {
		position:static;
		max-width:100%
	}
}
@media only screen and (max-width: 800px) {
	.section {
		background-position: left top;
	}
	.section .text-content {
		max-width:98%;
	}
	h1, h2 {
		font-size: 2.2em;
	}
	.section .text-content p {
		font-size:1em;
	}
	#section0 {
		background-image: url('image/color1small.jpg');
		background-size: cover;
	}
	#section1 {
		background-image:url('image/pro1small.jpg');
		background-size: cover;		
		background-position: center;
	}
	#section3 {
		background-image:url('image/prod-slide1small.jpg');
		background-position: center;
	}
	.bottomright {
		max-width:100%;
		right:auto;
		left:20%;
		bottom:5%;
	}
	.topright {
		left:20%;
		right:auto;
	}
	.right {
		right:5%;
		max-width:400px;
		left:20%;
		top:10%
	}
	.bottomleft .textarea {
		bottom:25%;
	}
	.flag-section img {
		width:120px;
		max-width:100%;
		height:120px;
	}
	.flag-section p {
		font-size: 0.7em;
	}

}
@media only screen and (max-width: 640px) {
	.section .text-content h1,h2 {
		font-size: 1.8em;
	}
	.section .text-content p {
		font-size:0.7em;
	}
	.topright {
		left:10%;
		right:10%;
		top:10%;
	}
	.right h3 {
		position:absolute;
		right:0;
		max-width:250px;
	}
	.bottomleft h2 {
		right:5%;
	}
}
@media only screen and (max-width: 500px) {
	.right h3 {
		max-width:60%;
	}
	.flag-section {
		margin:5px;
		width:30%;
	}
	.flag-section img {
		width:100px;
		height:100px;
		margin-right:5px;
	}
	.flag-section img:last-child {
		margin-right:0px;
	}
	.flag-section p {
		font-size:0.5em;
	}
}
@media only screen and (max-height:420px) {
	h1, h2 {
		font-size:1.5em;
	}
	p {
		font-size: 0.8em;
	}
	.bottomright {
		bottom:30%;
	}
	.section .text-content p {
		font-size: 0.8em;
	}
	.bottomleft h2 {
		top:-2%;
		right:17%;
	}
	.bottomleft .textarea {
		bottom:12%;
	}
	.topright {
		top:8%;
		left:10%;
	}
	.right {
		top:8%;
	}
	.right h3 {
		float:right;
		max-width:260px;
	}
}
/*
#section2 .text-content {
	opacity: 0;
}
*/