/* GENERAL */
html, body { margin: 0px; padding: 0px; font-size: 17px; color: #3b3738; background-color: #fff; font-family: 'Roboto', sans-serif, 'Open Sans', 'Myriad Pro', arial; line-height: 150%; }
a { text-decoration: none; color: #003d8f; }
h1, h2, h3 { margin: 0px; padding: 0px; line-height: 150%; }
.fontP { color: #d1c78d; }
.fontS { color: #d4d4d4; }
.greyBg { background-color: #e8e8e8; }
.greyBg h2 { color: #1c1c1c; }
.greyBg p { color: #3b3738; }
.blackBg { background-color: #000000; }
.blackBg h2 { color: #fff; }
.blackBg p { color: #fff; }
.whiteBg { background-color: #ffffff; }
.whiteBg h2 { color: #000;  }
.whiteBg p { color: #3b3738; }
.greyBg h2, .blackBg h2, .whiteBg h2 { font-size: 25px; }
.greyBg p, .blackBg p, .whiteBg p { font-size: 17px; }

/* HEADER */
header { display: flex; width: 100%; height: 45vw; max-height: 1300px; justify-content: center; color: #ffffff;  }
header > div { display: flex; flex-direction: row; width: 100%; height: 45vw; max-width: 1920px; max-height: 1300px; justify-content: flex-start; background-repeat: no-repeat; background-position: center -100px; background-size: cover; background-image:url('img/banner_head.jpg'); }
div.hbColumn { display: flex; flex-direction: row; width: 50%; text-align: center; justify-content: center; }
div.hbColumn > div { display: flex; flex-direction: column; max-width: 400px; justify-content: center; margin-top: 100px; }
div.hbColumn > div > h1, div.hbColumn > div > span { display: flex; justify-content: center; }
div.hbColumn > div > h1 { margin: 15px 0px; }
@media (max-width: 1200px) {
	div.hbColumn > div { margin-top: 10vw; }
}
@media (max-width: 800px) {
	div.hbColumn { width: 100%; }
	div.hbColumn > div { max-width: 90vw; }
}
@media (max-width: 600px) {
	header { height: 300px; }
	header > div { height: 300px; background-position: -80px -80px; background-size: 800px 542px; }
	div.hbColumn > div { margin-top: 15vw; }
	div.hbColumn > div > h1 { font-size: 18px; line-height: 130%; }
	div.hbColumn > div > span { font-size: 15px; line-height: 130%; }
}

/* UNIVERSAL: BOX */
section { display: flex; flex-direction: row; width: 100%; justify-content: center; background-color: #fff; }
.ultraWide, .standardWide { width:100%; display: flex; flex-direction: column; }
.standardWide { max-width: 1100px; }
.ultraWide > div { display: flex; flex-direction: row; width: 100%; justify-content: center; }
/* UNIVERSAL: INFO */
section .sInfo { display: flex; flex-direction: column; text-align: center; }
section .sInfo > h2 { margin: 10px auto; }
section .sInfo > p { margin: 0px 20px 20px 20px; }
.ultraWide > div .sInfo { max-width: 800px; }
.ultraWide > div .sInfo > h2 { font-size: 50px; font-weight: 100; margin-top: 50px; }
/* UNIVERSAL: BUTTON */
section .sButton { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 50px auto; }
section .sButton > a { display: flex; flex-direction: column; justify-content: center; width: 225px; height: 60px; background-color: #3b3738; color: #fff; border-radius: 30px; text-align: center; font-size: 20px; }
section .sButton > a:hover { background-color: #222; }
.blackBg .sButton > a { background-color: #ddd; color: #000; }
.blackBg .sButton > a:hover { background-color: #fff; }
/* UNIVERSAL: BANNER */
section .sBanner { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 5px auto; }
section .sBanner > a { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 40vw; max-height: 500px; background-repeat: no-repeat; background-size: contain; background-position: center; }
section .sBanner > a > span { display: none; }

/* LOGO LIST */
.logoList { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 200px; }
.logoList > div { display: flex; flex-direction: row; justify-content: space-around; }
.logoList > div > div { display: flex; flex-direction: column; justify-content: space-around; text-align: center; }
.logoList > div > div > span { height: 60px; display: flex; flex-direction: column; justify-content: center;}
.logoList > div > div > a { display: flex; width: 345px; height: 100px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.logoList > div > div > a > span { display: none; }
@media (max-width: 1200px) {
	.logoList > div > div > a { width: 240px; height: 70px; }
}
@media (max-width: 800px) {
	.logoList > div > div > span { height: 52px; }
	.logoList > div > div > a { width: 180px; height: 52px; }
}
@media (max-width: 600px) {
	.logoList { height: 360px; }
	.logoList > div { flex-direction: column; }
	.logoList > div > div { border-top: 1px dotted #cacaca; margin-top: 15px; }
	.logoList > div > div:first-child { border: 0px; margin-top: 0px; }
	.logoList > div > div > a { width: 100%; }
}

/* GENERAL INFO */
.generalInfo { justify-content: center; flex-direction: row; }
.generalInfo > div { max-width: 800px; margin: 50px 0px; }
@media (max-width: 800px) {
	.generalInfo > div { max-width: 90vw; }
}

/* BANNERS */
.b01 div.sBanner > a { height: 45vw; max-height: 680px; }
.b02 div.sBanner > a { height: 51vw; max-height: 780px; }
.b03 div.sBanner > a { height: 62vw; max-height: 880px; }
.b03 div.sBanner > a { height: 62vw; max-height: 880px; }
.b04 div.sBanner > a { height: 48vw; max-height: 750px; }
.b05 div.sBanner > a { height: 62vw; max-height: 880px; }

/* FOOTER */
footer { display: flex; flex-direction: row; width: 100%; height: 78px; justify-content: center; }
footer > a { display: block; background-image:url('img/logo_cachet.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 212px; height: 78px; }
footer > a > span { display: none; }
@media (max-width: 600px) {
}