@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'playfair';
    src: url('fonts/playfair-display.ttf') format('truetype'); font-weight: normal; font-style: normal; 
}

@font-face {
    font-family: 'odibee';
    src: url('fonts/odibee.ttf') format('truetype'); font-weight: normal; font-style: normal; 
}

@font-face {
    font-family: 'bebas';
    src: url('fonts/bebas.ttf') format('truetype'); font-weight: normal; font-style: normal; 
}

@font-face {
    font-family: 'lato';
    src: url('fonts/lato.ttf') format('truetype'); font-weight: normal; font-style: normal; 
}

* { box-sizing: border-box; }
img { width:100%; height:auto; }
a:link, a:hover, a:visited { color:#000000; text-decoration:none; }

html { height:100%; }
body { min-height:100%; position:relative; margin:0; padding:0 0 8vw 0; background-color:#FFFFFF; font-family:'playfair', Verdana, Arial, Helvetica, sans-serif; font-size:1.5vw; color:#000000; }
footer { position:absolute; bottom:0; left:0; right:0; }

.page { width:100%; display:flex; flex-wrap:wrap; }
	.pageLeft { width:75%; padding:2vw; }
	.pageRight { width:25%; padding:2vw; }
	
.piedpage { width:100%; display:flex; flex-wrap:wrap; background-color:#3366FF; color:#FFFFFF; padding:2vw; font-size:1vw; }
	.piedpageLeft { width:50%; display:flex; flex-wrap:wrap; justify-content:end; }
		.piedpageLine { width:100%; }
			.piedpageLine a:link, .piedpageLine a:visited { color:#FFFFFF; text-shadow: 0.1vw 0.1vw 0.1vw #000000; }
			.piedpageLine a:hover, .piedpageLine a:active { color:#FF6600; }

	.piedpageRight { width:50%; display:flex; flex-wrap:wrap; flex-direction:column; text-align:right; justify-content:end; }

@media screen and (max-width:1200px) {
	
}

@media screen and (max-width:800px) {
	
}

@media screen and (max-width:600px) {
	body { font-size:6vw; padding-bottom:80vw; }
	
	.pageLeft { width:100%; padding:8vw; }
	.pageRight { width:100%; padding:8vw; }
	
	.piedpage { font-size:4vw; }
		.piedpageLeft, .piedpageRight { width:100%; text-align:center; }
		.piedpageLeft span { display:none; }
		.piedpageLine { display:flex; flex-direction:column; padding:2vw 0; }
			.piedpageLine a:link, .piedpageLine a:visited { width:100%; padding:2vw 0; text-shadow:0.4vw 0.4vw 0.4vw #000000; }
			.piedpageLine a:hover, .piedpageLine a:active { width:100%; padding:2vw 0; text-shadow:0.4vw 0.4vw 0.4vw #000000; }
}