/*--------------------------------------------------------*/ /* FONTS /*--------------------------------------------------------*/ /* palanquin-regular - latin */ @font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 400; src: local('Palanquin Regular'), local('Palanquin-Regular'), url('../fonts/palanquin-v4-latin-regular.woff2') format('woff2'), url('../fonts/palanquin-v4-latin-regular.woff') format('woff'); } /* palanquin-600 - latin */ @font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 600; src: local('Palanquin SemiBold'), local('Palanquin-SemiBold'), url('../fonts/palanquin-v4-latin-600.woff2') format('woff2'), url('../fonts/palanquin-v4-latin-600.woff') format('woff'); } /* oleo-script-regular - latin */ @font-face { font-family: 'Oleo Script'; font-style: normal; font-weight: 400; src: local('Oleo Script'), local('OleoScript-Regular'), url('../fonts/oleo-script-v7-latin-regular.woff2') format('woff2'), url('../fonts/oleo-script-v7-latin-regular.woff') format('woff'); } /*--------------------------------------------------------*/ /* GENERAL RULES /*--------------------------------------------------------*/ * { box-sizing: border-box; padding: 0; margin: 0; } html, body { font-family: "Palanquin", sans-serif; font-weight: 400; color: #000000; font-size: 18px; } body { background-color: #FFFFFF; } a, a:hover, a:active, a:visited { color: #FFAAAA; text-decoration: none; } /*--------------------------------------------------------*/ @media only screen and (max-width: 480px) { html { font-size: 16px; } } /*--------------------------------------------------------*/ /* HEADER /*--------------------------------------------------------*/ #main-header { height: 460px; position: relative; background: #FFFFFF; } #main-header-background { height: 100%; width: 100%; background-image: url("../img/header/background-1080.jpg"); background-size: cover; background-repeat: no-repeat; z-index: 500; } #main-header-title { height: 80%; width: 80%; position: absolute; top: 30px; left: 10%; z-index: 1000; } /*--------------------------------------------------------*/ @media only screen and (max-width: 800px) { #main-header { background-image: url("../img/header/background-800.jpg"); } } @media only screen and (max-width: 480px) { #main-header { background-image: url("../img/header/background-480.jpg"); } } /*--------------------------------------------------------*/ /* CONTENT /*--------------------------------------------------------*/ section { max-width: 960px; margin: 0 0 100px calc(50% - 480px); padding: 0 60px; text-align: justify; line-height: 180%; } section h2 { margin: 0 0 25px 0; padding: 20px 0; /* background-image: url("../img/header/background.jpg"); -webkit-background-clip: text; background-clip: text; color: transparent !important; */ border-bottom-width: 5px; border-bottom-style: solid; color: #FFFFFF; font-family: "Oleo script", sans-serif; font-size: 4rem; font-weight: 400; text-align: center; word-wrap: break-word; hyphens: none; } /*section.red { color: #803339; }*/ section.red h2 { color: #EA6C61; border-bottom-color: #f7cbc0; } /* section.orange { color: #805333; } */ section.orange h2 { color: #ebaa5b; border-bottom-color: #f8dfc2; } /* section.green { color: #5A8039; } */ section.green h2 { color: #5fb574; border-bottom-color: #cae2cb; } /* section.blue { color: #396680; } */ section.blue h2 { color: #2896ce; border-bottom-color: #bcd4ec; } section.purple h2 { color: #9e60ce; border-bottom-color: #d8bfeb; } /* section.purple { color: #80396E; } */ section.pink h2 { color: #e4678c; border-bottom-color: #f3cad2; } section p { padding: 0 0 20px 0; font-size: 1rem; } section strong { font-weight: 600; } section p.stand-out { font-style: italic; text-align: center; } /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { section { width: 100%; margin: 0 auto 100px auto; padding: 0 60px; } section h2 { padding: 15px 0; border-bottom-width: 4px; font-size: 3rem; } } @media only screen and (max-width: 480px) { section { padding: 0 30px; line-height: 150%; } } @media only screen and (max-width: 360px) { section h2 { padding: 5px 0; font-size: 2.2rem; } } /*--------------------------------------------------------*/ /* BUTTONS /*--------------------------------------------------------*/ .button { display: block; width: 80%; margin: 20px auto 0 auto; padding: 15px 20px; background-color: #fce8e2; border: 2px solid #EA6C61; color: #EA6C61; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 32px; } .button:hover { background-color: #fadad0 ; } .button img { height: 32px; width: 32px; margin: 0 5px; } .button > * { vertical-align: middle; } /*--------------------------------------------------------*/ @media only screen and (max-width: 480px) { .button { width: 100%; padding: 10px 15px; font-size: 1.1rem; line-height: 24px; } .button img { height: 24px; width: 24px; } } /*--------------------------------------------------------*/ /* LOCATION /*--------------------------------------------------------*/ #mailing-address { font-size: 1.5rem; text-align: center; } #mailing-address img { width: 32px; height: 32px; vertical-align: bottom; } #interactive-map { width: 100%; margin: 0 0 20px 0; border: none; border-radius: 10px; } #public-transport-info { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; margin: 0 0 0 -100px; font-size: 1.5rem; font-weight: 400; line-height: 48px; vertical-align: middle; white-space: nowrap; } #public-transport-info > * { margin: 5px; justify-self: left; } #public-transport-info img { width: 48px; height: 48px; margin: 0 5px 0 0; vertical-align: bottom; } #transport-metro-icon, #transport-metro-stop, #transport-bus-icon, #transport-bus-stop { grid-row: 1; } #transport-rer-icon, #transport-rer-stop, #transport-noctilien-icon, #transport-noctilien-stop { grid-row: 2; } #transport-metro-icon, #transport-rer-icon { grid-column: 1; justify-self: end; } #transport-metro-stop, #transport-rer-stop { grid-column: 2; } #transport-bus-icon, #transport-noctilien-icon { grid-column: 3; justify-self: end; } #transport-bus-stop, #transport-noctilien-stop { grid-column: 4; } /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { #public-transport-info { display: grid; grid-template-columns: 4fr 6fr; grid-template-rows: 1fr 1fr 1fr 1fr; align-items: center; margin: 0; line-height: 48px; } #transport-metro-icon, #transport-metro-stop { grid-row: 1; } #transport-bus-icon, #transport-bus-stop { grid-row: 2; } #transport-rer-icon, #transport-rer-stop { grid-row: 3; } #transport-noctilien-icon, #transport-noctilien-stop { grid-row: 4; } #transport-metro-icon, #transport-rer-icon, #transport-bus-icon, #transport-noctilien-icon { grid-column: 1; justify-self: end; } #transport-metro-stop, #transport-rer-stop, #transport-bus-stop, #transport-noctilien-stop { grid-column: 2; } } @media only screen and (max-width: 580px) { #public-transport-info { line-height: 32px; } } @media only screen and (max-width: 480px) { #mailing-address { font-size: 1.1rem; } #public-transport-info { font-size: 1.1rem; } #public-transport-info img { width: 32px; height: 32px; } } @media only screen and (max-width: 320px) { #public-transport-info img { display: block; } } /*--------------------------------------------------------*/ /* SPONSORS /*--------------------------------------------------------*/ #sponsors { text-align: center; } #sponsors img { height: 100px; object-fit: cover; margin: 20px; } /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { #sponsors img { display: block; margin: 10px auto; } } @media only screen and (max-width: 480px) { #sponsors img { height: 80px; } } /*--------------------------------------------------------*/ /* CONTACT /*--------------------------------------------------------*/ #contact-email { font-family: monospace; font-size: 1.5rem; text-align: center; word-wrap: break-word; } #contact-email img { width: 32px; height: 32px; vertical-align: bottom; } /*--------------------------------------------------------*/ @media only screen and (max-width: 880px) { #contact-email { font-size: 1.2rem; } } @media only screen and (max-width: 480px) { #contact-email { font-size: 1rem; } #contact-email img { display: none; } } /*--------------------------------------------------------*/ /* REMERCIEMENTS /*--------------------------------------------------------*/ #acknowledgements, #acknowledgements tr, #acknowledgements td { margin: 0 auto; padding: 0; border: none; } #acknowledgements td.name { font-weight: 600; text-align: right; } #acknowledgements td.role { text-align: left; } /*--------------------------------------------------------*/