1928 lines
37 KiB
CSS
1928 lines
37 KiB
CSS
@import '../../node_modules/react-html5video/dist/styles.css';
|
|
@font-face {
|
|
font-family: 'MonumentGrotesk-Regular';
|
|
src: url('../static/fonts/MonumentGrotesk-Regular.otf'), url('../static/fonts/MonumentGrotesk-Regular.woff2') format('woff2'), url('../static/fonts/MonumentGrotesk-Regular.woff') format('woff'), url('../static/fonts/MonumentGrotesk-Regular.eot?#iefix') format('eot'), url('../static/fonts/MonumentGrotesk-Regular.eot') format('eot');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'MonumentGrotesk-Medium';
|
|
src: url('../static/fonts/MonumentGrotesk-Medium.otf'), url('../static/fonts/MonumentGrotesk-Medium.woff2') format('woff2'), url('../static/fonts/MonumentGrotesk-Medium.woff') format('woff'), url('../static/fonts/MonumentGrotesk-Medium.eot?#iefix') format('eot'), url('../static/fonts/MonumentGrotesk-Medium.eot') format('eot');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'MonumentGrotesk-Mono';
|
|
src: url('../static/fonts/MonumentGrotesk-Semi-Mono.otf'), url('../static/fonts/MonumentGrotesk-Semi-Mono.woff2') format('woff2'), url('../static/fonts/MonumentGrotesk-Semi-Mono.woff') format('woff'), url('../static/fonts/MonumentGrotesk-Semi-Mono.eot?#iefix') format('eot'), url('../static/fonts/MonumentGrotesk-Semi-Mono.eot') format('eot');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
.small-text {
|
|
font-family: 'MonumentGrotesk-Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
color: #000;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.3;
|
|
font-weight: 400;
|
|
}
|
|
.medium-text {
|
|
font-family: 'MonumentGrotesk-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 26px;
|
|
color: #000;
|
|
letter-spacing: 0.008em;
|
|
line-height: 1.25;
|
|
font-weight: 400;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.medium-text {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.big-text {
|
|
font-family: 'MonumentGrotesk-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 73px;
|
|
color: #000;
|
|
letter-spacing: 0em;
|
|
line-height: 0.9;
|
|
font-weight: 400;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.big-text {
|
|
font-size: 52px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.big-text {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
html,
|
|
body,
|
|
#root,
|
|
.App {
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
body {
|
|
font-family: 'MonumentGrotesk-Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #000;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.3;
|
|
font-weight: 400;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
/* for removing the highlight */
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
a:visited {
|
|
color: initial;
|
|
}
|
|
.spinner {
|
|
pointer-events: none;
|
|
width: 3em;
|
|
height: 3em;
|
|
border: 0.4em solid #000;
|
|
border-top-color: #ffe600;
|
|
border-radius: 50%;
|
|
-webkit-animation: loadingspin 1s linear infinite;
|
|
animation: loadingspin 1s linear infinite;
|
|
}
|
|
@-webkit-keyframes loadingspin {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loadingspin {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.App.menuOpen {
|
|
overflow-x: hidden;
|
|
}
|
|
.notification-bar.notification-bar-active {
|
|
z-index: 1001;
|
|
font-family: inherit !important;
|
|
}
|
|
.AppMenu {
|
|
background-color: #f4f3f4;
|
|
width: 200px;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
transition: all 0.5s ease;
|
|
z-index: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
@media (min-width: 2401px) {
|
|
.AppMenu {
|
|
width: 360px;
|
|
}
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
.AppMenu {
|
|
width: 15vw;
|
|
}
|
|
}
|
|
.AppMenu:hover {
|
|
z-index: 2;
|
|
width: 290px;
|
|
}
|
|
@media (min-width: 2401px) {
|
|
.AppMenu:hover {
|
|
width: 360px;
|
|
}
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
.AppMenu:hover {
|
|
width: 360px;
|
|
}
|
|
}
|
|
.AppMenu__container {
|
|
width: 290px;
|
|
padding: 30px;
|
|
padding-bottom: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 568px;
|
|
}
|
|
@media (min-width: 2401px) {
|
|
.AppMenu__container {
|
|
width: 360px;
|
|
}
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
.AppMenu__container {
|
|
width: 360px;
|
|
}
|
|
}
|
|
.touch .AppMenu {
|
|
width: 290px;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
|
|
}
|
|
.touch .AppMenu__container {
|
|
padding: 15px;
|
|
}
|
|
.touch .AppMenu.open {
|
|
display: flex;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
transition: z-index 0s ease 0.3s;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.AppMenu,
|
|
.touch .AppMenu {
|
|
width: 290px;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
|
|
}
|
|
.AppMenu__container,
|
|
.tocuh .AppMenu__container {
|
|
padding: 15px;
|
|
}
|
|
.AppMenu.open,
|
|
.touch .AppMenu.open {
|
|
display: flex;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
transition: z-index 0s ease 0.3s;
|
|
}
|
|
}
|
|
.MenNav {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.MenNav {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
.MenuNavItem a,
|
|
.MenuTitle--small {
|
|
margin: 0px;
|
|
font-size: 26px;
|
|
}
|
|
.MenuNavItem a:hover,
|
|
.MenuTitle--small:hover,
|
|
.MenuNavItem a.active,
|
|
.MenuTitle--small.active {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.MenuTitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.MenuTitle:hover {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.MenuTitle.reverted {
|
|
flex-flow: column-reverse;
|
|
}
|
|
.MenuTitle--big h1.big-text {
|
|
color: inherit;
|
|
margin: 0;
|
|
font-size: 73px;
|
|
transform: translateY(-2px);
|
|
}
|
|
.MenuTitle--small {
|
|
color: inherit;
|
|
margin-top: -9px;
|
|
}
|
|
.MenuBody {
|
|
overflow: auto;
|
|
}
|
|
.Tag button {
|
|
background-color: transparent;
|
|
border: 0.5px solid black;
|
|
border-radius: 2px;
|
|
margin: 3px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
.Tag button:before {
|
|
content: '#';
|
|
}
|
|
.Tag button:hover,
|
|
.Tag button.selected {
|
|
background-color: #ffe600;
|
|
}
|
|
.Tag button:focus {
|
|
outline: none;
|
|
}
|
|
.touch .Tag button {
|
|
padding: 8px 12px;
|
|
}
|
|
.touch .Tag button:hover {
|
|
background-color: transparent;
|
|
}
|
|
.touch .Tag button.selected:hover {
|
|
background-color: #ffe600;
|
|
}
|
|
.TagGroup {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.MenuFooter {
|
|
margin-top: auto;
|
|
padding-top: 30px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.MenuFooter {
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
.MenuFooter-museum-link {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
line-height: 0.9;
|
|
}
|
|
.MenuFooter-museum-link:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.MenuFooter-museum-link img {
|
|
max-width: 85px;
|
|
margin-right: 15px;
|
|
}
|
|
.MenuFooter hr {
|
|
margin-top: 15px;
|
|
height: 5px;
|
|
background: black;
|
|
border: none;
|
|
}
|
|
.LangSelector {
|
|
margin-top: 15px;
|
|
}
|
|
.MenuFooter span {
|
|
margin-right: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.MenuFooter span:hover,
|
|
.MenuFooter span.activeLang {
|
|
opacity: 0.5;
|
|
}
|
|
.ContentHeader {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 113px;
|
|
padding: 20px 10px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.ContentHeader {
|
|
min-height: 82px;
|
|
padding: 15px 10px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.ContentHeader {
|
|
min-height: 62px;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
.ContentHeader h1 {
|
|
margin: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.ContentHeader h1 {
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
.HeaderIcon,
|
|
.HeaderBurger {
|
|
position: absolute;
|
|
top: 24px;
|
|
left: 15px;
|
|
}
|
|
.touch .HeaderIcon,
|
|
.touch .HeaderBurger {
|
|
top: 29px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.HeaderIcon,
|
|
.HeaderBurger {
|
|
top: 15px;
|
|
}
|
|
.touch .HeaderIcon,
|
|
.touch .HeaderBurger {
|
|
top: 15px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.HeaderIcon,
|
|
.HeaderBurger {
|
|
top: 13px;
|
|
left: 11px;
|
|
}
|
|
.touch .HeaderIcon,
|
|
.touch .HeaderBurger {
|
|
top: 13px;
|
|
left: 11px;
|
|
}
|
|
}
|
|
.touch .HeaderIcon {
|
|
display: none;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.HeaderIcon {
|
|
display: none;
|
|
}
|
|
}
|
|
.HeaderSearchBtn,
|
|
.HeaderBurger {
|
|
height: 73px;
|
|
width: 73px;
|
|
position: fixed;
|
|
right: 15px;
|
|
z-index: 10;
|
|
}
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
.HeaderSearchBtn {
|
|
top: 20px;
|
|
}
|
|
}
|
|
.touch .HeaderSearchBtn,
|
|
.touch .HeaderBurger {
|
|
height: 52px;
|
|
width: 52px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.HeaderSearchBtn,
|
|
.HeaderBurger {
|
|
height: 52px;
|
|
width: 52px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.HeaderSearchBtn,
|
|
.HeaderBurger,
|
|
.touch .HeaderSearchBtn,
|
|
.touch .HeaderBurger {
|
|
height: 36px;
|
|
width: 36px;
|
|
}
|
|
}
|
|
.HeaderBurger {
|
|
position: absolute;
|
|
display: none;
|
|
right: initial;
|
|
background: none;
|
|
border: none;
|
|
font-size: 53px;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.HeaderBurger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.touch .HeaderBurger {
|
|
padding: 0;
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.HeaderBurger {
|
|
padding: 0;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.HeaderBurger,
|
|
.touch .HeaderBurger {
|
|
padding: 0;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.HeaderSearchBtn button {
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
.HeaderSearchBtn button:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 40px;
|
|
height: 40px;
|
|
transform: translate(2px, 2px);
|
|
border-radius: 50%;
|
|
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
|
|
-webkit-backdrop-filter: saturate(75%) blur(10px);
|
|
backdrop-filter: saturate(100%) blur(4px);
|
|
z-index: 10;
|
|
}
|
|
.HeaderSearchBtn button:hover:before {
|
|
background: white;
|
|
}
|
|
.touch .HeaderSearchBtn button {
|
|
padding: 5px;
|
|
}
|
|
.touch .HeaderSearchBtn button:before {
|
|
width: 31px;
|
|
height: 31px;
|
|
transform: translate(2px, 2px);
|
|
}
|
|
.touch .HeaderSearchBtn button:hover:before {
|
|
background: none;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.HeaderSearchBtn button {
|
|
padding: 5px;
|
|
}
|
|
.HeaderSearchBtn button:before {
|
|
width: 31px;
|
|
height: 31px;
|
|
transform: translate(2px, 2px);
|
|
}
|
|
.HeaderSearchBtn button:hover {
|
|
background: none;
|
|
}
|
|
.touch .HeaderSearchBtn button {
|
|
padding: 5px;
|
|
}
|
|
.touch .HeaderSearchBtn button:before {
|
|
width: 31px;
|
|
height: 31px;
|
|
transform: translate(2px, 2px);
|
|
}
|
|
.touch .HeaderSearchBtn button:hover {
|
|
background: none;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.HeaderSearchBtn button,
|
|
.touch .HeaderSearchBtn button {
|
|
height: 40px;
|
|
width: 40px;
|
|
padding: 5px;
|
|
}
|
|
.HeaderSearchBtn button:before,
|
|
.touch .HeaderSearchBtn button:before {
|
|
width: 23px;
|
|
height: 23px;
|
|
transform: translate(1px, 1px);
|
|
}
|
|
.HeaderSearchBtn button:hover,
|
|
.touch .HeaderSearchBtn button:hover {
|
|
background: none;
|
|
}
|
|
}
|
|
.HeaderSearchBtn button:active,
|
|
.HeaderBurger:active,
|
|
.HeaderSearchBtn button:focus,
|
|
.HeaderBurger:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
.HeaderSearchBtn img {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 11;
|
|
}
|
|
.is-pre-launch .ContentHeader {
|
|
justify-content: flex-end;
|
|
}
|
|
.is-pre-launch .ContentHeader .HeaderTitle {
|
|
padding-right: 10px;
|
|
}
|
|
.HeaderSearchField {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
z-index: 1;
|
|
width: calc(100vw - 15vw);
|
|
min-width: calc(100vw - 15vw);
|
|
}
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
.HeaderSearchField {
|
|
position: relative;
|
|
}
|
|
}
|
|
.HeaderSearchField form {
|
|
height: 60px;
|
|
width: 80%;
|
|
display: flex;
|
|
}
|
|
.HeaderSearchField input {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
text-align: center;
|
|
background-color: #f4f3f4;
|
|
height: 100%;
|
|
border: 1px black solid;
|
|
border-radius: 15px;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
.HeaderSearchField input:active,
|
|
.HeaderSearchField input:focus {
|
|
outline: none;
|
|
}
|
|
.HeaderSearchField_closeBtn {
|
|
position: absolute;
|
|
right: 5px;
|
|
background: none;
|
|
border: none;
|
|
height: 92px;
|
|
width: 92px;
|
|
font-size: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
}
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
.HeaderSearchField_closeBtn {
|
|
top: -15px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
.HeaderSearchField_closeBtn img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.HeaderSearchField_closeBtn:active,
|
|
.HeaderSearchField_closeBtn:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
.touch .HeaderSearchField {
|
|
width: 100%;
|
|
padding: 15px 10px;
|
|
}
|
|
.touch .HeaderSearchField_closeBtn {
|
|
height: 75px;
|
|
width: 75px;
|
|
right: 8px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.HeaderSearchField {
|
|
width: 100%;
|
|
padding: 15px 10px;
|
|
}
|
|
.HeaderSearchField form {
|
|
height: 45px;
|
|
}
|
|
.HeaderSearchField input {
|
|
font-size: 25px;
|
|
border-radius: 25px;
|
|
}
|
|
.HeaderSearchField_closeBtn {
|
|
height: 75px;
|
|
width: 75px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.HeaderSearchField {
|
|
width: 100%;
|
|
padding: 20px 10px;
|
|
}
|
|
.HeaderSearchField form,
|
|
.touch .HeaderSearchField form {
|
|
height: 40px;
|
|
width: 100%;
|
|
}
|
|
.HeaderSearchField input,
|
|
.touch .HeaderSearchField input {
|
|
width: 100%;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
padding-right: 35px;
|
|
}
|
|
.HeaderSearchField_closeBtn,
|
|
.touch .HeaderSearchField_closeBtn {
|
|
height: 40px;
|
|
width: 40px;
|
|
right: 12.5px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.ContentBody {
|
|
margin-top: -5px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.ContentBody {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.ContentBody.loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: calc(100% - (115px + 10px));
|
|
}
|
|
.CatalogList--noResults {
|
|
padding-top: 62px;
|
|
text-align: center;
|
|
opacity: 0.6;
|
|
font-style: italic;
|
|
}
|
|
.grid-container.loading .spinner {
|
|
position: absolute;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.grid-container.loading .grid-item {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.grid-gap {
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.grid-item {
|
|
width: 25%;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
@media (max-width: 800px) and (min-width: 551px) {
|
|
.grid-item {
|
|
width: 33.33333%;
|
|
}
|
|
}
|
|
@media (max-width: 550px) and (min-width: 381px) {
|
|
.grid-item {
|
|
width: 50%;
|
|
}
|
|
}
|
|
@media (max-width: 380px) {
|
|
.grid-item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.load-more-btn {
|
|
width: 100%;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
background: none;
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.load-more-btn:focus {
|
|
outline: none;
|
|
}
|
|
.CatalogItem {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.CatalogItem img.CatalogItem__videoIcon {
|
|
position: absolute;
|
|
top: calc(50% - 2.5rem);
|
|
left: calc(50% - 2.5rem);
|
|
font-size: 5rem;
|
|
width: 5rem;
|
|
pointer-events: none;
|
|
color: white;
|
|
background: none;
|
|
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
|
|
-webkit-backdrop-filter: saturate(75%) blur(10px);
|
|
backdrop-filter: saturate(100%) blur(4px);
|
|
border-radius: 50%;
|
|
}
|
|
.CatalogItem__body {
|
|
overflow: hidden;
|
|
transition: transform 0.1s ease-in;
|
|
background-color: #f4f3f4;
|
|
}
|
|
.CatalogItem__body:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
.CatalogItem__body > img,
|
|
.CatalogItem__body > video {
|
|
width: 100%;
|
|
display: block;
|
|
background: black;
|
|
}
|
|
.ContentOverlay {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 20px;
|
|
padding: 0 20px;
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
z-index: 11;
|
|
}
|
|
.ContentOverlay button {
|
|
width: 77px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
background: none;
|
|
pointer-events: initial;
|
|
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
|
|
-webkit-backdrop-filter: saturate(75%) blur(10px);
|
|
backdrop-filter: saturate(100%) blur(4px);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.ContentOverlay button {
|
|
width: 62px;
|
|
height: 32px;
|
|
border-radius: 18px;
|
|
}
|
|
}
|
|
.ContentOverlay button:active,
|
|
.ContentOverlay button:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
.ContentOverlay button:hover {
|
|
background: #fff;
|
|
}
|
|
.touch .ContentOverlay button:hover {
|
|
background: none;
|
|
}
|
|
.PreLaunchPage-hereo,
|
|
.PreLaunchPage-video {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 56.25%;
|
|
/* 16:9 Aspect Ratio */
|
|
}
|
|
.PreLaunchPage-hereo > *,
|
|
.PreLaunchPage-video > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.PreLaunchPage-hereo {
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
.is-pre-launch .ContribView > .big-text,
|
|
.is-pre-launch .InfoView > .big-text {
|
|
line-height: 1.2;
|
|
}
|
|
.is-pre-launch .InfoView > .InfoContent {
|
|
padding-right: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.is-pre-launch .InfoView > .InfoContent {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.is-pre-launch .InfoView {
|
|
padding-top: 20px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.PreLaunchForm {
|
|
background-color: #ffe600;
|
|
padding: 10px;
|
|
padding-right: 100px;
|
|
margin-top: auto;
|
|
position: relative;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.PreLaunchForm {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.PreLaunchForm > * {
|
|
max-width: 1200px;
|
|
}
|
|
.PreLaunchForm.participated .CVParticipatedMessage {
|
|
background-color: #ffe600;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.PreLaunchForm > .big-text {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.PreLaunchForm .CVText {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.AppContent {
|
|
background: #fff;
|
|
width: calc(100vw - 200px);
|
|
min-width: calc(100vw - 200px);
|
|
margin-left: 200px;
|
|
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
min-height: 100vh;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
@media (min-width: 2401px) {
|
|
.AppContent {
|
|
width: calc(100vw - 360px);
|
|
min-width: calc(100vw - 360px);
|
|
margin-left: 360px;
|
|
}
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
.AppContent {
|
|
width: calc(100vw - 15vw);
|
|
min-width: calc(100vw - 15vw);
|
|
margin-left: 15vw;
|
|
}
|
|
}
|
|
.AppContent.loading {
|
|
height: 100vh;
|
|
}
|
|
.touch .AppContent {
|
|
width: 100vw;
|
|
min-width: 100vw;
|
|
margin-left: 0;
|
|
}
|
|
.touch.menuOpen .AppContent {
|
|
transform: translateX(290px);
|
|
}
|
|
.touch .openMenuOverlay {
|
|
width: calc(100vw - 290px);
|
|
min-width: calc(100vw - 290px);
|
|
position: fixed;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
|
|
.AppContent {
|
|
width: 100vw;
|
|
min-width: 100vw;
|
|
margin-left: 0;
|
|
}
|
|
.menuOpen .AppContent {
|
|
transform: translateX(290px);
|
|
}
|
|
.openMenuOverlay {
|
|
width: calc(100vw - 290px);
|
|
min-width: calc(100vw - 290px);
|
|
position: fixed;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
.DVHeader {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: 11px;
|
|
padding-left: 9px;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
.DVHeader img {
|
|
height: 92px;
|
|
width: 92px;
|
|
}
|
|
.touch .DVHeader {
|
|
padding-top: 19px;
|
|
padding-left: 28px;
|
|
}
|
|
.touch .DVHeader img,
|
|
.touch .DVHeader a {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.DVHeader {
|
|
padding-top: 19px;
|
|
padding-left: 28px;
|
|
}
|
|
.DVHeader img,
|
|
.DVHeader a {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DVHeader,
|
|
.touch .DVHeader {
|
|
padding-top: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
.DVHeader img,
|
|
.touch .DVHeader img,
|
|
.DVHeader a,
|
|
.touch .DVHeader a {
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
}
|
|
.DVBody {
|
|
padding: 10px;
|
|
padding-top: 30px;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DVBody {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
.DetailAttributeContainer,
|
|
.DetailMediaContainer,
|
|
.DetailViewShare,
|
|
.DetailViewTags {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
.DetailMediaContainer {
|
|
align-items: flex-end;
|
|
max-width: calc(100% - 100px);
|
|
position: relative;
|
|
height: 850px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DetailMediaContainer {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@media (min-width: 992px) and (max-height: 1100px) {
|
|
.DetailMediaContainer {
|
|
height: 650px;
|
|
}
|
|
}
|
|
.DetailMediaContainer.youtube {
|
|
height: auto;
|
|
}
|
|
.DetailMediaContainer .LeftNavButton,
|
|
.DetailMediaContainer .RightNavButton {
|
|
position: absolute;
|
|
top: calc(50% - 54px / 2);
|
|
background: none;
|
|
border: none;
|
|
height: 54px;
|
|
padding: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DetailMediaContainer .LeftNavButton,
|
|
.DetailMediaContainer .RightNavButton {
|
|
display: none;
|
|
}
|
|
}
|
|
.DetailMediaContainer .LeftNavButton:hover,
|
|
.DetailMediaContainer .RightNavButton:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.DetailMediaContainer .LeftNavButton img,
|
|
.DetailMediaContainer .RightNavButton img {
|
|
height: 100%;
|
|
}
|
|
.DetailMediaContainer .LeftNavButton {
|
|
left: calc(100px / 2 - 75px / 2 - 10px / 2);
|
|
}
|
|
.DetailMediaContainer .RightNavButton {
|
|
right: calc((-100px) / 2 + -75px / 2 - 10px / 2);
|
|
}
|
|
.touch .DetailMediaContainer {
|
|
height: auto;
|
|
min-height: auto;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.DetailMediaContainer {
|
|
height: auto;
|
|
min-height: auto;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DetailMediaContainer,
|
|
.touch .DetailMediaContainer {
|
|
height: auto;
|
|
min-height: auto;
|
|
}
|
|
}
|
|
.DVLabel {
|
|
width: 100px;
|
|
min-width: 100px;
|
|
max-height: 32px;
|
|
line-height: 1.8;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
word-break: break-all;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DetailMediaContainer .DVLabel {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DetailAttributeContainer,
|
|
.DetailViewShare,
|
|
.DetailViewTags {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.DIImage,
|
|
.DIVideo {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DIImage,
|
|
.DIVideo {
|
|
display: block;
|
|
}
|
|
}
|
|
.DIImage img,
|
|
.DIVideo img {
|
|
margin-bottom: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.DIVideo > div {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
.DIVideo > div .rh5v-DefaultPlayer_component {
|
|
margin-bottom: auto;
|
|
margin-top: auto;
|
|
width: 100%;
|
|
}
|
|
.youtube .DIVideo {
|
|
padding-top: 56.25%;
|
|
}
|
|
.youtube .DIVideo iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
.DIImage,
|
|
.FullScreenImage {
|
|
cursor: pointer;
|
|
}
|
|
.FullScreenImage {
|
|
position: fixed;
|
|
background-color: #000000d9;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
}
|
|
.DAContent {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.DAContent p {
|
|
margin: 0;
|
|
}
|
|
.DetailViewShare--items {
|
|
display: flex;
|
|
}
|
|
.DetailViewShare--items a,
|
|
.DetailViewShare--items img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.DetailViewTags .Tag button {
|
|
cursor: default;
|
|
}
|
|
.DetailViewTags .Tag button:hover {
|
|
background: none;
|
|
}
|
|
.phone-invetory-number {
|
|
display: none;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.phone-invetory-number {
|
|
display: flex;
|
|
}
|
|
}
|
|
.DVFooter {
|
|
background-color: #ffe600;
|
|
padding: 10px;
|
|
padding-right: 100px;
|
|
margin-top: auto;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DVFooter {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.DVDropdown {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.DVDropdown .CVParticipatedMessage {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.DVFooterTop {
|
|
display: flex;
|
|
}
|
|
.DVFooterTop a {
|
|
padding: 0px !important;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.DVFooterbtn {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.DVFooterbtn:active {
|
|
outline: none;
|
|
}
|
|
.DVFooterbtn:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.DVFooterbtn img {
|
|
position: absolute;
|
|
width: 54px;
|
|
left: 18px;
|
|
}
|
|
.DVFooterbtn img,
|
|
.DVFooterbtn p {
|
|
padding-top: 3px;
|
|
}
|
|
.DVFooterTop p {
|
|
margin: 0px;
|
|
margin-left: 100px;
|
|
}
|
|
.DVText {
|
|
margin-left: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.DVText {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.CIDetailView {
|
|
min-height: 100%;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
height: 100%;
|
|
z-index: 20;
|
|
}
|
|
.CIDetailView__loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.InfoView {
|
|
padding: 20px 10px;
|
|
padding-left: 100px;
|
|
padding-right: 0;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.InfoView {
|
|
padding-top: 62px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.InfoView h1 {
|
|
margin: 0;
|
|
transform: translateY(4px);
|
|
padding-top: 60px;
|
|
padding-right: 20px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.InfoView h1 {
|
|
padding-top: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.InfoView h1 {
|
|
padding-top: 30px;
|
|
}
|
|
}
|
|
.InfoView .link {
|
|
text-decoration: underline;
|
|
text-decoration-color: #ffe600;
|
|
}
|
|
.InfoView p {
|
|
margin-bottom: 0;
|
|
}
|
|
.InfoContent {
|
|
font-weight: 500;
|
|
max-width: 1100px;
|
|
padding-right: 10px;
|
|
}
|
|
.InfoContent p.medium-text a {
|
|
text-decoration: underline;
|
|
text-decoration-color: #ffe600;
|
|
}
|
|
.InfoView .ImagesList {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
.ImageWithLegend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ImageWithLegend img {
|
|
height: 550px;
|
|
padding-top: 20px;
|
|
padding-right: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.ImageWithLegend img {
|
|
height: 250px;
|
|
}
|
|
}
|
|
.InfoContent a img {
|
|
width: 170px;
|
|
height: 148px;
|
|
display: block;
|
|
margin: 43px 0 24px 24px;
|
|
}
|
|
.InfoView-newsletter {
|
|
background-color: #ffe600;
|
|
padding: 20px 10px;
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.InfoView-newsletter {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.InfoView-newsletter a:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.InfoView-sponsors {
|
|
padding: 20px 10px;
|
|
padding-right: 100px;
|
|
max-width: 1300px;
|
|
}
|
|
@media (max-width: 890px) {
|
|
.InfoView-sponsors {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.InfoView-sponsors .CVForm {
|
|
padding-top: 40px;
|
|
}
|
|
.InfoView-sponsors .CVForm label {
|
|
align-items: flex-start;
|
|
min-width: 111px;
|
|
}
|
|
@media (max-width: 450px) {
|
|
.InfoView-sponsors .CVForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.InfoView-sponsors--items {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding-left: 20px;
|
|
}
|
|
.InfoView-sponsors--items .InfoView-sponsors--item {
|
|
width: 30%;
|
|
padding-bottom: 30px;
|
|
}
|
|
@media (max-width: 590px) {
|
|
.InfoView-sponsors--items .InfoView-sponsors--item {
|
|
width: 48%;
|
|
}
|
|
}
|
|
@media (max-width: 450px) {
|
|
.InfoView-sponsors--items .InfoView-sponsors--item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media (max-width: 450px) {
|
|
.InfoView-sponsors--items {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.innovationspartner {
|
|
flex-wrap: wrap;
|
|
padding-right: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.innovationspartner {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.innovationspartner .InfoView-sponsors--items {
|
|
display: flex;
|
|
max-width: 300px;
|
|
padding-left: 20px;
|
|
}
|
|
.innovationspartner .InfoView-sponsors--items .InfoView-sponsors--item {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
.innovationspartner .InfoView-sponsors--items .InfoView-sponsors--item img {
|
|
max-width: 100%;
|
|
}
|
|
@media (max-width: 450px) {
|
|
.innovationspartner .InfoView-sponsors--items {
|
|
padding-left: 0;
|
|
}
|
|
.innovationspartner .InfoView-sponsors--items img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
.innovationspartner p {
|
|
padding-left: 131px;
|
|
width: 100%;
|
|
max-width: 711px;
|
|
}
|
|
@media (max-width: 450px) {
|
|
.innovationspartner p {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.InfoView-sponsors--item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.InfoView-sponsors--item img {
|
|
width: 100%;
|
|
max-width: 120px;
|
|
}
|
|
@media (max-width: 450px) {
|
|
.InfoView-sponsors--item img {
|
|
width: 70%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
.InfoView-footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.InfoView-footer a {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.InfoView-footer a:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.embedded-youtube-container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 56.25%;
|
|
/* 16:9 Aspect Ratio */
|
|
}
|
|
.embedded-youtube-container > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.ContribView {
|
|
background-color: #ffe600;
|
|
width: 100%;
|
|
}
|
|
.ContribView h1 {
|
|
margin: 0;
|
|
margin-left: 100px;
|
|
transform: translateY(4px);
|
|
}
|
|
.ContribViewContent {
|
|
padding: 20px 10px;
|
|
padding-right: 100px;
|
|
max-width: 1200px;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.ContribViewContent {
|
|
padding: 15px 10px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.ContribViewContent {
|
|
padding: 15px 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
.ContribViewContent .spinner {
|
|
margin: auto;
|
|
}
|
|
.CVText {
|
|
padding-left: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVText {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.CVForm {
|
|
display: flex;
|
|
padding-bottom: 20px;
|
|
}
|
|
.CVForm label.small-text {
|
|
margin: 0px;
|
|
flex-basis: 100px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
max-height: 32px;
|
|
}
|
|
.CVForm input[type='radio'] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid black;
|
|
transition: 0.2s all linear;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
.CVForm input[type='radio']:focus {
|
|
outline: none;
|
|
}
|
|
.CVForm input[type='radio']:checked {
|
|
border: 7px solid black;
|
|
}
|
|
.CVForm input[type='checkbox'] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: white;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid black;
|
|
border-radius: 0;
|
|
transition: 0.2s all linear;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
.CVForm input[type='checkbox']:focus {
|
|
outline: none;
|
|
}
|
|
.CVForm input[type='checkbox']:checked {
|
|
border: 8px solid black;
|
|
}
|
|
.CVDescInput .textarea {
|
|
flex-grow: 1;
|
|
resize: none;
|
|
padding: 0px;
|
|
border: none;
|
|
background: none;
|
|
background-image: repeating-linear-gradient(transparent, transparent 30px, black -1px, black 31px);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVDescInput .textarea {
|
|
background-image: repeating-linear-gradient(transparent, transparent 24px, black -1px, black 25px);
|
|
}
|
|
}
|
|
.CVDescInput .textarea:focus {
|
|
outline: none;
|
|
}
|
|
.CVUploadInput {
|
|
padding-top: 20px;
|
|
}
|
|
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
.CVUploadInput {
|
|
display: none;
|
|
}
|
|
}
|
|
.CVUploadInput #wt_embed {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVUploadInput #wt_embed {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed_wrapper {
|
|
border: 1px solid black;
|
|
background: none;
|
|
border-radius: 15px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed_wrapper:hover {
|
|
background: none;
|
|
opacity: 0.6;
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed__message {
|
|
max-width: 100%;
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed__message .main {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: 'MonumentGrotesk-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 26px;
|
|
color: #000;
|
|
letter-spacing: 0.008em;
|
|
line-height: 1.25;
|
|
font-weight: 400;
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed__message .sub {
|
|
font-family: 'MonumentGrotesk-Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
color: #000;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.3;
|
|
font-weight: 400;
|
|
}
|
|
.CVUploadInput #wt_embed .wt_embed__icon {
|
|
display: none;
|
|
}
|
|
.CVUploaded button {
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.CVForm h3 {
|
|
margin: 0px;
|
|
}
|
|
.CVPersonalInfosInputs input {
|
|
flex-grow: 1;
|
|
resize: none;
|
|
padding: 0px;
|
|
border: none;
|
|
background: none;
|
|
border-radius: 0;
|
|
border-bottom: black solid 1px;
|
|
padding-bottom: 0.7px;
|
|
}
|
|
.CVPersonalInfosInputs input:focus {
|
|
outline: none;
|
|
padding-bottom: 0;
|
|
border-bottom: black solid 1.7px;
|
|
}
|
|
.CVPersonalInfosInputs .CVForm {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.CVPersonalInfosInputs {
|
|
padding-bottom: 20px;
|
|
}
|
|
.CVKeepInput {
|
|
padding-top: 20px;
|
|
padding-left: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVKeepInput {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.CVAGBInput {
|
|
padding-top: 20px;
|
|
padding-left: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVAGBInput {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.CVAGBInput a {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
.CVSubmit {
|
|
padding-top: 20px;
|
|
padding-left: 100px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVSubmit {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.CVSubmit .submitbtn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
line-height: 1;
|
|
transform: translateY(4px);
|
|
padding: 0;
|
|
}
|
|
.CVSubmit .submitbtn:focus {
|
|
outline: none;
|
|
}
|
|
.CVSubmit .submitbtn:hover {
|
|
opacity: 0.6;
|
|
}
|
|
.CVBody.participated {
|
|
height: 1px;
|
|
flex-grow: 1;
|
|
margin-bottom: 30%;
|
|
}
|
|
.participated .CVBody {
|
|
display: none;
|
|
}
|
|
.CVParticipatedMessage {
|
|
min-height: 60%;
|
|
padding: 0 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.CVParticipatedMessage {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
div.full-screen-overlay {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
align-items: stretch;
|
|
}
|
|
div.modal-box {
|
|
background: none;
|
|
margin: auto;
|
|
}
|
|
.Modal--container {
|
|
max-width: 990px;
|
|
padding: 10px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.Modal--container {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.Modal--body {
|
|
text-align: initial;
|
|
background: white;
|
|
padding: 10px;
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
padding-top: 93px;
|
|
padding-bottom: 93px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.Modal--body {
|
|
padding-top: 72px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.Modal--body {
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
padding-top: 56px;
|
|
}
|
|
}
|
|
.Modal--body button {
|
|
background: none;
|
|
border: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: 7px;
|
|
padding-left: 9px;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.Modal--body button {
|
|
padding-top: 19px;
|
|
padding-left: 28px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.Modal--body button {
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
.Modal--body button img {
|
|
height: 92px;
|
|
width: 92px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.Modal--body button img {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.Modal--body button img {
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
}
|
|
.Modal--body h1 {
|
|
margin: 0;
|
|
}
|
|
.Modal--body h4 {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.Modal--body p {
|
|
margin: 0;
|
|
}
|
|
.Modal--body .small-text {
|
|
font-size: 120%;
|
|
}
|
|
.StartScreen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
|
|
-webkit-backdrop-filter: saturate(100%) blur(7px);
|
|
backdrop-filter: saturate(100%) blur(7px);
|
|
height: 100vh;
|
|
width: 100vw;
|
|
z-index: 3000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.StartScreen form {
|
|
position: relative;
|
|
width: 50%;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.StartScreen form {
|
|
width: 70%;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.StartScreen form {
|
|
width: 80%;
|
|
}
|
|
}
|
|
.StartScreen input {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
font-size: 35px;
|
|
border: 3px solid rgba(0, 0, 0, 0.4);
|
|
background-color: white;
|
|
height: 90px;
|
|
border-radius: 45px;
|
|
padding-right: 40px;
|
|
padding-left: 40px;
|
|
}
|
|
.StartScreen input:active,
|
|
.StartScreen input:focus {
|
|
outline: none;
|
|
border: 3px solid black;
|
|
}
|
|
.StartScreen form > img {
|
|
position: absolute;
|
|
height: 45px;
|
|
width: 45px;
|
|
right: 22.5px;
|
|
top: 22.5px;
|
|
}
|
|
.StartScreen > a > img {
|
|
height: 92px;
|
|
width: 92px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 10px;
|
|
}
|
|
.touch .StartScreen > a > img {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.StartScreen > a > img {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.StartScreen > a > img,
|
|
.touch .StartScreen > a > img {
|
|
height: 40px;
|
|
}
|
|
}
|