* { font-family: Roboto, SansSerif; } body { width: 100%; overflow: hidden; } a { outline: none !important; } header.logo-container { position: fixed; top: -15px; max-width: 500px; max-height: 135px; overflow: hidden; z-index: 1000; img { width: 100%; } } .full-height { height: 100vh; } .full-width { width: 100vw; } .bg-img { background-size: cover; -webkit-filter: brightness(60%); filter: brightness(60%); } section { h2 { font-size: 3rem; font-weight: bold; } h3 { font-size: 2rem; font-weight: bold; } } section#splashscreen { padding: 0 !important; .bg-img { background-image: url('../img/splashscreen.jpg'); } .splashscreen-text-container { position: absolute; top: 60%; text-align: center; color: white; font-size: 4.5rem; h1 { font-weight: bold; } .border-seperator { margin-top: 10px; margin-left: auto; margin-right: auto; border-top: 5px solid white; max-width: 900px; border-radius: 20px; } } } section#apropos { * { text-align: center; } .column .columns { margin-top: 50px; embed, iframe { margin-top: 1rem; height: 600px; width: 500px; border: 1px solid lightgray; } address { background: white; padding: 10px; margin: 0 auto; font-size: 0.8rem; text-align: left; border: 1px solid lightgray; max-width: 500px; position: relative; top: -10px; } img.is-quarter { width: 25%; } .column { padding-right: 1.5rem; padding-left: 1.5rem; p { text-align: justify; } } } .sub-section-members { p { margin-top: 1rem; } } } section#activites { height: 200vh; padding: 0; margin: 0; .sub-section { position: relative; transition: all 2s; &.slide { &:not(.animation-inversed) { transform: translateX(25%); } &.animation-inversed { transform: translateX(-25%); } } &:not(.animation-inversed) { div.content { left: -25%; } } &.animation-inversed { div.content { right: - 25%; } } div.content { position: absolute; padding: 25px; text-align: justify; overflow-y: hidden; p, img { margin-bottom: 1em; } img { margin: 1em 0 2em 0; position: relative; left: 20%; width: 60%; text-align: center; } } div.headline { margin-top: 75px; padding: 25px; transition: all 0.25s; position: absolute; color: white; max-width: 35%; border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); &:not(.is-headline-inversed) { left: 50px; } &.is-headline-inversed { right: 100px; } p { text-align: justify; margin-bottom: 1em; } } div.headline.toggle-visibility { display: none; } .bg-img { position: absolute; transition: all 2s; &.gala-img { background-image: url('../img/gala.jpg'); } &.mtlgj-img { background-image: url('../img/mtlgj.jpg'); } } .is-mtlgj-btn { border-color: #29a6d6; color: #29a6d6; &:hover { background-color: #29a6d6; color: white; } } .is-gala-btn { border-color: #29a6d6; color: #29a6d6; background-color: transparent; &:hover { background-color: #29a6d6; color: white; } } } } section#competitions, section#partenaires { h2 { margin: 0 auto; text-align: center; max-width: 300px; } .border-seperator { margin: 10px auto 50px auto; border-top: 5px solid #848484; max-width: 200px; border-radius: 20px; } } section#competitions { .slider .slider { overflow: hidden; .slider-navigation-previous, .slider-navigation-next { width: 48px; height: 48px; opacity: 0.75; &:hover { opacity: 1; } svg { width: 36px; height: 36px; } } .slider-navigation-previous { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .slider-navigation-next { border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .slider-item { text-align: center; } } } footer { margin-top: 4.5rem; padding: 15px 0; p { text-align: center; } }