@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Arimo:400,700&subset=latin,latin-ext);

html { height: 100%; }
body{ height: 100%; margin:0px; padding:0px; font-family: Arimo, sans-serif; }

a { color: #e42209; }
em { font-style: normal; color: #e42209; }
a img { border: 0 none; }
ul li { margin-bottom: 0.7em; }

div.content { max-width: 1240px; width: 80%; margin: 0 auto; }

section#intro { background-color:#000000; color: #fff; padding: 5vw 0; }
section#intro div.content { position: relative; background-color:#000000; color: #fff; }
section#intro div.content:before{ content: ""; display: block; padding-top: 100%; }
section#intro img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
section#intro p { padding: 0; margin: 0; }
section#intro img#intro-logo { position: absolute; top: 10%; left: 7%; width: 30%; height: auto; }
section#intro p#intro-desc { position: absolute; top: 10%; right:7%; font-size: 2.5em; width: 30%; }
section#intro p#intro-place { position: absolute; bottom: 8%; right: 10%; font-size: 1.6em; }

section#desc { padding: 3vw 0 5vw 0; }
section#desc h1 { font-size: 180%; margin-top: 0; }
section#desc img#logo { width: 20vw; max-width: 300px; margin-bottom: 20px; }
section#desc img { width: 100%; max-width: 600px; }
section#desc h2 { font-size: 130%; margin-top: 0; }
section#desc p { margin-top: 0; }

section#people img { width: 100%; max-width: 600px; }

section#footer { padding: 4vw 0 3vw 0; }
section#footer figure { margin: 0 2vw; padding: 2vw 0; display: inline-block; }
section#footer figure.size1 { height: 7vw; }
section#footer figure.size2 { height: 5vw; }
section#footer figure.size3 { height: 3vw; }
section#footer img { not-used-max-width: 7vw; vertical-align: middle; width: 100%; }

section#social { padding: 8vw 0 3vw 0; }
section#social div.content > div { display: inline-block; }
section#social img { min-width: 100px; width: 7vw; }

.clear { clear: both; }
.fright { float: right; }
.tright { text-align: right !important; }

@media only screen and (max-device-width: 1550px) {
	section#intro { font-size: 0.9vw; }
}

@media only screen and (min-device-width: 1550px) {
	section#intro { font-size: 15px; }
}

@media only screen and (max-device-width: 980px) {
	.left { width: 100%; }
	.right { width: 100%; }
	section#desc p { text-align: left; }
	section#footer figure { width: 15vw; }
}

@media only screen and (min-device-width: 980px) {
	.left { width: 25%; float: left; }
	.right { width: 70%; float: right; }
	section#desc p { text-align: justify; }
	section#footer figure { max-width: 7vw; }
}