/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- general for whole site -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ * {margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box;} html {font-size: 15px; width: 100vw; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%;} body {overflow-X: hidden; overflow-Y: auto; text-align: center; width: 100vw; height: 100%; line-height: 1.5em; font-family: Montserrat, Arial, sans-serif; font-weight: 300; cursor: default; color: #FFFFFF; background-color: #000000;} body.busy * {cursor: progress !important;} body.noScroll {overflow: hidden;} ::-webkit-scrollbar {width: 6px; background-color: #000000;} ::-webkit-scrollbar-track {background-color: rgb(38.25, 38.25, 38.25);} ::-webkit-scrollbar-thumb {background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: linear-gradient(transparent, #FFFFFF, transparent);} a {text-decoration: none; cursor: pointer; color: inherit;} input, select, textarea {font-family: inherit; font-size: inherit; font-weight: normal; color: inherit; resize: none;} h1, h2, h3, h4, h5, h6 {margin: 0; font-size: 1rem; font-weight: normal;} img {-webkit-user-drag: none;} .gold {color: #D7BE5F; -webkit-background-clip: text; background-clip: text; background: linear-gradient(to right, #AF862A, #D7BE5F, #AF862A, #D7BE5F, #AF862A); background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;} .gold a {-webkit-text-fill-color: initial; text-fill-color: initial;} table tr {vertical-align: top;} .block {position: relative; display: block; width: 100%; padding: 6rem 0; background-color: #000000; color: #FFFFFF; overflow: hidden;} .block b {font-weight: 600;} .banner {position: relative; display: block; min-height: 14rem; padding: 10vw 0; background: no-repeat center / cover; overflow: hidden; z-index: 1;} .banner .pageTitle {position: absolute; left: 0; top: 50%; width: 100%; line-height: 1; font-size: calc(1rem + 1.5vw); font-family: Montserrat; font-weight: 900; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 0 1rem #000000; -webkit-transform: translateY(-50%) perspective(100px); transform: translateY(-50%) perspective(100px); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s;} .banner .pageTitle:before {content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 1000vw; height: 200%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(rgba(255, 255, 255, 0.5)), to(transparent)); background-image: -o-linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent); background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent); z-index: -1;} .banner .pageTitle i {font-size: calc(0.75rem + 1vw); font-style: normal; color: #D7BE5F;} .banner .left {position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 1;} .banner .left:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(0.5deg); transform: translateY(-50%) perspective(100px) rotateY(0.5deg);} .banner .right {position: absolute; left: 50%; top: 0; width: 50%; height: 100%; z-index: 1;} .banner .right:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(-0.5deg); transform: translateY(-50%) perspective(100px) rotateY(-0.5deg);} .wrapper {position: relative; display: inline-block; width: 100%; max-width: 1280px;} .wrapper.small {max-width: 800px;} .wrapper.middle {text-align: center !important;} .wrapper a.link {position: relative;} .wrapper a.link:before {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#AF862A), color-stop(#D7BE5F), color-stop(#AF862A;), to(transparent)); background-image: -o-linear-gradient(left, transparent, #AF862A 10%, #D7BE5F, #AF862A 90%, transparent); background-image: linear-gradient(to right, transparent, #AF862A 10%, #D7BE5F, #AF862A 90%, transparent);} body.home .mobileMenu {top: 3rem; -webkit-transition: top 2s; -o-transition: top 2s; transition: top 2s;} body.home .topLogo {top: 2.5rem; -webkit-transition: 2s; -o-transition: 2s; transition: 2s;} body.home .block.top {height: 10rem; -webkit-transition: 2s; -o-transition: 2s; transition: 2s;} body.home .block.inspiration {height: calc(100% - 20rem); -webkit-transition: 2s; -o-transition: 2s; transition: 2s;} body.home .buttons {bottom: 4rem; opacity: 0; -webkit-transition: 1s 0.5s ease-out; -o-transition: 1s 0.5s ease-out; transition: 1s 0.5s ease-out;} body.zoom .mobileMenu {top: 1rem;} body.zoom .topLogo {top: 0.5rem;} body.zoom .block.top {height: 6rem;} body.zoom .block.inspiration {height: calc(100% - 8rem);} body.zoom .buttons {bottom: 3rem; opacity: 1;} .mobileMenu {position: fixed; left: 2.5rem; top: 1rem; padding: 2rem; z-index: 1002; cursor: pointer;} .mobileMenu:before {content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 1.45rem; width: 1.5rem; height: 1px; background-color: #FFFFFF; -webkit-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out;} .mobileMenu:after {content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 1.45rem; width: 1.5rem; height: 1px; background-color: #FFFFFF; -webkit-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out;} .mobileMenu span {content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 1.5rem; height: 1px; background-color: #FFFFFF; -webkit-box-shadow: 0 0 2rem 1rem rgba(0, 0, 0, 0.25); box-shadow: 0 0 2rem 1rem rgba(0, 0, 0, 0.25); z-index: -1; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out;} .block.top .mobileMenu {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .mobileMenu.open:before {top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(225deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(225deg); transform: translateX(-50%) translateY(-50%) rotate(225deg);} .mobileMenu.open:after {bottom: 50%; -webkit-transform: translateX(-50%) translateY(50%) rotate(-225deg); -ms-transform: translateX(-50%) translateY(50%) rotate(-225deg); transform: translateX(-50%) translateY(50%) rotate(-225deg);} .mobileMenu.open span {opacity: 0;} .mobileMenu.open ~ .menuBG {-webkit-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); opacity: 1;} .menu li {-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out;} .menu li.show {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1;} .widget {position: relative; display: inline-block; margin-bottom: 1em; padding-left: 2em;} .widget:before {font-family: "Font Awesome 6 Free"; font-weight: bold; position: absolute; left: 0; font-size: 1.5em; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .widget.location:before {content: "\f3c5";} .widget.phone:before {content: "\f3cf";} .widget.email:before {content: "\f0e0";} .widget.business:before {content: "\f02b";} .widget.conditions:before {content: "\f15c";} .widget.newsletter:before {content: "\f2b6";} @-webkit-keyframes blink {50% {background-color: rgb(242.25, 242.25, 242.25); letter-spacing: 0.02em; -webkit-box-shadow: 0 0 1rem rgb(229.5, 229.5, 229.5); box-shadow: 0 0 1rem rgb(229.5, 229.5, 229.5);}} @keyframes blink {50% {background-color: rgb(242.25, 242.25, 242.25); letter-spacing: 0.02em; -webkit-box-shadow: 0 0 1rem rgb(229.5, 229.5, 229.5); box-shadow: 0 0 1rem rgb(229.5, 229.5, 229.5);}} .fixedTop {position: fixed; left: 0; top: 0; width: 100%; height: 6rem; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent); z-index: 1000;} .topLogo {position: fixed; left: calc(100vw - 12.5rem); top: 0.5rem; padding: 2rem; z-index: 10000; -webkit-filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));} .topLogo img {height: 1.5rem;} .center {position: relative; display: block; padding: 2rem 1rem; text-align: center; font-weight: 600; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#AF862A), color-stop(#D7BE5F), color-stop(#AF862A), to(transparent)); background-image: -o-linear-gradient(left, transparent, #AF862A, #D7BE5F, #AF862A, transparent); background-image: linear-gradient(to right, transparent, #AF862A, #D7BE5F, #AF862A, transparent);} .center:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .center:after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; z-index: 2; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .button {position: relative; display: inline-block; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; font-size: 1rem; text-transform: uppercase; background-color: rgb(191.25, 191.25, 191.25); color: #000000; -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); text-align: center; font-weight: normal; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .button:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .button:after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .button:not(.disabled):active {-webkit-transform: scale(0.95);-ms-transform: scale(0.95);transform: scale(0.95);} .button:not(.disabled):hover {-webkit-animation: blink 0.5s ease-out;animation: blink 0.5s ease-out;} .button.goldLight {background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); color: #FFFFFF;} .button.goldDark {background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(100, 59, -33)), to(rgb(140, 115, 20))); background-image: -o-linear-gradient(top left, rgb(100, 59, -33), rgb(140, 115, 20)); background-image: linear-gradient(to bottom right, rgb(100, 59, -33), rgb(140, 115, 20)); color: #FFFFFF;} .button.disabled {-webkit-filter: grayscale(1.0); filter: grayscale(1.0); cursor: not-allowed; opacity: 0.5;} .title {position: relative; display: inline-block; margin-bottom: 1.5rem; color: #FFFFFF; font-family: Montserrat; font-size: 1.25rem; font-weight: 900; text-transform: uppercase;} .title:before {content: attr(data-keyword); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #AF862A; font-size: 4em; opacity: 0.3; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: 2s ease-out; -o-transition: 2s ease-out; transition: 2s ease-out;} .title > span {position: relative; display: inline-block; vertical-align: middle; color: #FFFFFF;} .title > span.big {color: #AF862A; font-size: 1.6em; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .title.show:before {font-size: 5em;} .body.home .title {margin-bottom: 4rem;} ul.checkmarks {list-style: none;} ul.checkmarks li {display: block; line-height: 1.5; margin-bottom: 1.5rem; padding-left: 1.5rem;} ul.checkmarks li:before {content: "\f00c"; display: inline-block; vertical-align: middle; font-family: "Font Awesome 6 Free"; font-weight: bold; font-size: 1.5rem; margin: 0 0.5rem 0 -1.75rem; color: #AF862A; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(left, transparent, #AF862A, #D7BE5F); background-image: linear-gradient(to right, transparent, #AF862A, #D7BE5F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} ul.checkmarks.narrow li {line-height: 1; margin-bottom: 0;} .textBlock {position: relative; display: block; width: 100%;} .textBlock:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .textBlock .image {position: absolute; left: 0; top: 0; width: calc(100% / 3); border-radius: 0.25rem; overflow: hidden;} .textBlock img {width: 100%; -webkit-transition: 0.75s ease-out; -o-transition: 0.75s ease-out; transition: 0.75s ease-out;} .textBlock .text {position: relative; padding: 1rem 0 0 calc(100% / 3 + 1rem); width: 100%; color: #FFFFFF; text-align: left; z-index: 1;} .textBlock .text:before {content: ""; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000000)); background-image: -o-linear-gradient(transparent, #000000); background-image: linear-gradient(transparent, #000000); z-index: -1;} .textBlock .text :not(h2) span {display: inline-block; height: 2rem; line-height: 2rem; margin-left: -4rem; padding: 0 1rem 0 4rem; background-color: #AF862A; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F);} .textBlock:hover img {-webkit-transform: rotate(-1deg) scale(1.1);-ms-transform: rotate(-1deg) scale(1.1);transform: rotate(-1deg) scale(1.1);} form {display: inline-block; width: 43rem; max-width: 100%; font-size: 0;} form .input {position: relative; display: inline-block; vertical-align: top; width: calc(50% - 1rem); margin-bottom: 2rem; padding-top: 2rem;} form .input.fullWidth {width: 100%;} form .input.padding {margin-right: 2rem;} form .input input, form .input textarea {position: relative; display: block; width: 100%; height: 1.5rem; line-height: 1.5rem; background-color: transparent; font-size: 1rem; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); z-index: 1; -webkit-transition: -webkit-box-shadow 0.25s; transition: -webkit-box-shadow 0.25s; -o-transition: box-shadow 0.25s; transition: box-shadow 0.25s; transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; -webkit-appearance: none; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: #FFFFFF;} form .input textarea {width: calc(200% + 2rem); height: 5rem;} form .input span {position: absolute; left: 0; top: calc(100% - 1.5rem); font-size: 1rem; -webkit-transition: top 0.25s, font-size 0.25s, color 0.25s; -o-transition: top 0.25s, font-size 0.25s, color 0.25s; transition: top 0.25s, font-size 0.25s, color 0.25s; color: #D7BE5F;} form .input.focus input, form .input.focus textarea {-webkit-box-shadow: 0 3px 0 #AF862A; box-shadow: 0 3px 0 #AF862A;} form .input.focus span {top: 0; font-size: 0.8rem;} form .input.value span {top: 0; font-size: 0.8rem;} form i {float: left; height: 2rem; line-height: 2rem; color: #D7BE5F; font-size: 0.8rem;} form .thankYou {display: none; margin-top: 4rem; color: #FFFFFF; font-size: 1rem;} form .sendForm.button {float: right;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- topbar -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.top {height: 6rem; padding: 0; overflow: hidden;} .block.top:after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .block.top .wrapper {text-align: right;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- menu -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .menuBG {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; -webkit-transform: scale(0) rotate(180deg); -ms-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg); opacity: 0; background-color: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; z-index: 100;} .menu {position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 0; list-style-type: none; text-transform: uppercase;} .menu .title {color: #AF862A !important;} .menu > li {position: relative; display: block; color: #FFFFFF !important;} .menu > li:not(:first-child):after {content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent); -webkit-transition: width 0.5s; -o-transition: width 0.5s; transition: width 0.5s;} .menu > li:not(:first-child):hover:after {left: 0; width: 100%;} .menu > li.current:after {width: 100%;} .menu > li a {display: block; padding: 1rem 3.5rem 0.5rem;} .menu li div {display: block; padding: 2.5rem 2.5rem 2.5rem 1.5rem;} .menu .hasSub {position: relative; padding-right: 2.5rem;} .menu .hasSub:before {content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: bold; font-size: 0.75em; position: absolute; right: 1.5rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s;} .menu li div:after {content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: bold; font-size: 0.75em; position: absolute; right: 1rem; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s;} .menu .hasSub:hover:before {-webkit-transform: translateY(-50%) rotate(180deg);-ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);} .menu li:hover div:after {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);} .menu li {position: relative; font-size: 1rem;} .menu li ul li.current {background-color: BLUE; color: #FFFFFF; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} .menu li ul li.current:hover {-webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25);} .menu li i {vertical-align: baseline; color: BLUE; margin-right: 0.25rem; opacity: 1;} .menu li img {vertical-align: middle; width: 3rem; margin-right: 0.5rem; border-radius: 50%;} .menu ul {position: absolute; left: 0; top: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.5s; -o-transition: max-height 0.5s; transition: max-height 0.5s; z-index: 100; border-radius: 0.25rem; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, #000000), color-stop(95%, #000000), to(transparent)); background-image: -o-linear-gradient(left, transparent, #000000 5%, #000000 95%, transparent); background-image: linear-gradient(to right, transparent, #000000 5%, #000000 95%, transparent);} .menu ul > li {display: block; white-space: nowrap;} .menu ul li a {padding: 0.5rem 3.5rem 0.5rem 1.5rem; font-weight: normal;} .menu ul li i {color: inherit; width: 2.5rem; margin-right: 0; text-align: center;} .menu ul > li:hover:after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .menu .hasSub:hover ul {max-height: 500px;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- footer -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.footer {padding-bottom: 0; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); font-size: 0;} .block.footer:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .block.footer:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.25))); background-image: -o-linear-gradient(top left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25)); background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25));} .footerBlock {position: relative; display: inline-block; vertical-align: top; width: calc(100% / 3); padding: 4rem 4rem 0; text-align: left; font-size: 1rem; z-index: 1;} .footerBlock.full {display: block; width: 100%; text-align: center;} .footerBlock.full a {display: inline-block; text-align: left;} .footerBlock .logo {xposition: absolute; xleft: 4em; xtop: 0; width: 10em; margin-bottom: 1rem;} .footerBlock a:not(.toHome) {position: relative;} .footerBlock a:not(.toHome):after {content: ""; position: absolute; right: -0.5rem; bottom: -0.25rem; width: 0; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent); -webkit-transition: width 0.5s; -o-transition: width 0.5s; transition: width 0.5s;} .footerBlock a:not(.toHome):hover:after {left: 1.5rem; width: calc(100% - 1rem);} .footerBlock .socials {display: inline-block; font-size: 1.5em; margin: 0.5rem 1rem 0 0;} .footerBlock .socials:after {display: none;} .block.footer > a {position: relative; display: inline-block; margin-top: 5rem; padding: 1rem; font-size: 1rem; color: #000000; z-index: 1; -webkit-transition: color 0.15s; -o-transition: color 0.15s; transition: color 0.15s;} .block.footer > a:hover {color: #D7BE5F;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- algemene voorwaarden -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.conditions {} .block.conditions .wrapper {text-align: left;} .block.conditions ol {padding-left: 1rem;} .block.conditions li {padding-left: 0.5rem;} .block.conditions li ul {padding-left: 1rem;} .block.conditions li ol {list-style-type: lower-alpha;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- home -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ video.BG {position: fixed; left: 0; top: 0; width: 100vw;} video.BGdark {position: fixed; left: 0; top: 0; width: 100vw;} .videoOverlay {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75);} .block.inspiration:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(53, 152, 220, 0.2)), color-stop(20%, transparent), color-stop(80%, transparent), to(rgba(53, 152, 220, 0.2))); background-image: -o-linear-gradient(rgba(53, 152, 220, 0.2), transparent 20%, transparent 80%, rgba(53, 152, 220, 0.2)); background-image: linear-gradient(rgba(53, 152, 220, 0.2), transparent 20%, transparent 80%, rgba(53, 152, 220, 0.2));} .block.inspiration {height: calc(100% - 8rem); background-color: transparent;} .block.inspiration:after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .BGlogo {position: fixed; left: 50vw; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 50vw; opacity: 0.5; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;} .BGlogo img {width: 100%;} .BGlogo.hidden {opacity: 0;} .buttons {position: absolute; left: 0; bottom: 3rem; width: 100%; opacity: 1;} .block.inspiration .button {margin: 0 1rem 1rem;} .block.performanceClub {} .block.performanceClub .wrapper {text-align: left; font-size: 0;} .block.performanceClub .test {display: inline-block; vertical-align: middle; width: calc(100% / 3 * 2); font-size: 1rem; text-align: left;} .block.performanceClub img {display: inline-block; vertical-align: middle; width: calc(100% / 3 - 3rem); margin-left: 3rem;} .block.events {background-color: rgba(0, 0, 0, 0.75); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);} .rallyBlock {position: relative; display: inline-block; vertical-align: top; width: calc(100% / 3 - 4rem); margin: 0 1.5rem;} .rallyBlock:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; z-index: 1; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .rallyBlock.soldOut:before {left: -2rem; width: calc(100% + 2rem); height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2;} .rallyBlock.soldOut:after {content: "UITVERKOCHT"; position: absolute; left: 50%; top: 6rem; width: 90%; padding: 0.5rem; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.05em; text-align: center; border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: translateX(-50%) rotate(-10deg); z-index: 2; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 1rem #000000;} .rallyBlock .image {display: block; width: 100%; height: 15rem; border-radius: 0.25rem; overflow: hidden;} .rallyBlock img {width: 100%; -webkit-transition: 0.75s ease-out; -o-transition: 0.75s ease-out; transition: 0.75s ease-out;} .rallyBlock .text {position: relative; margin-top: -1rem; padding: 0 2rem 3rem; width: 100%; color: #FFFFFF; text-align: left; z-index: 1;} .rallyBlock .text:before {content: ""; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000000)); background-image: -o-linear-gradient(transparent, #000000); background-image: linear-gradient(transparent, #000000); z-index: -1;} .rallyBlock .text .dateLocation {line-height: 1rem; font-size: 0.8em;} .rallyBlock .text .dateLocation b:before {content: "|"; margin: 0 0.5rem; color: #AF862A;} .rallyBlock .text span {display: inline-block; margin: 0 0 0.5rem -4rem; padding: 0.25rem 1rem 0.25rem 4rem; background-color: #AF862A; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F);} .rallyBlock:hover img {-webkit-transform: rotate(-1deg) scale(1.1); -ms-transform: rotate(-1deg) scale(1.1); transform: rotate(-1deg) scale(1.1);} .block.events .rallyBlock {width: calc(100% / 4 - 4rem);} .block.events .rallyBlock img {-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(95%, rgba(0, 0, 0, 0))); -webkit-mask-image: linear-gradient(#000000), rgba(0, 0, 0, 0) 95%); mask-image: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(95%, rgba(0, 0, 0, 0))); mask-image: linear-gradient(#000000, rgba(0, 0, 0, 0) 95%);} .block.events .rallyBlock .text:before {display: none;} .block.partners {} .block.partners img {display: inline-block; vertical-align: middle; width: calc(100% / 4 - 4vw); min-width: 12rem; margin: 0rem 2vw 0; opacity: 0.75;} @-webkit-keyframes blinkje {20% {-webkit-filter: drop-shadow(0 0 1rem #FFFFFF);filter: drop-shadow(0 0 1rem #FFFFFF); opacity: 1;}} @keyframes blinkje {20% {-webkit-filter: drop-shadow(0 0 1rem #FFFFFF);filter: drop-shadow(0 0 1rem #FFFFFF); opacity: 1;}} .block.partners img:hover {-webkit-animation: blinkje 1s;animation: blinkje 1s;} .block.partners:after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .block.welcome {height: 100vh; min-height: 30rem;} .block.welcome .wrapper {position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-align: left;} .block.welcome:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../IMG/Audi-R8.jpg") no-repeat center / cover; -webkit-filter: brightness(40%); filter: brightness(40%);} .block.welcome:after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .block.welcome .button {width: 15rem;} .block.unique {} .block.unique .wrapper {text-align: left;} .block.unique ul {margin-top: 1rem; line-height: 1.5;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- events -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ body.events .block.partners:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} body.events .block.partners img {width: calc(100% / 5 - 6vw);} .block.rallys .wrapper:last-child .rallyBlock {width: calc(100% / 4 - 4rem);} .block.rallys .wrapper:last-child .rallyBlock .image {height: 12rem;} .block.rallys .wrapper:last-child .rallyBlock span {background-color: rgb(25, -16, -108); color: rgb(205, 205, 205); background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(25, -16, -108)), to(rgb(125, 84, -8))); background-image: -o-linear-gradient(top left, rgb(25, -16, -108), rgb(125, 84, -8)); background-image: linear-gradient(to bottom right, rgb(25, -16, -108), rgb(125, 84, -8));} .block.rallys .video.left .videoContainer {float: left; margin-right: 2rem;} .block.rallys .video.right .videoContainer {float: right; margin-left: 2rem;} .block.rallys .text {text-align: left;} body.event .banner {overflow: visible;} body.event .banner .left:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(0.5deg); transform: translateY(-50%) perspective(100px) rotateY(0.5deg);} body.event .banner .right:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(-0.5deg); transform: translateY(-50%) perspective(100px) rotateY(-0.5deg);} .summary {position: relative; float: right; max-width: 35rem; margin: 0 0 10rem 3rem; padding-left: 3rem; text-align: center;} .summary:before {content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(#AF862A), to(transparent)); background-image: -o-linear-gradient(transparent, #AF862A, transparent); background-image: linear-gradient(transparent, #AF862A, transparent);} .summary .details {display: inline-block; text-align: left;} .summary .details td {min-width: 5.5rem;} .summary .details td:last-of-type {padding-left: 0.5rem; font-weight: 600;} .summary .invite {display: block; margin-top: 2rem; text-align: left;} .block.event {background-color: transparent;} .block.event:before {content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: url("../IMG/logo.png") no-repeat center / 50vw auto; opacity: 0.2; -webkit-filter: blur(15px); filter: blur(15px);} .block.event .wrapper {text-align: left;} .block.event .wrapper ul li {margin-bottom: 0rem;} .block.event .wrapper ul li.inline {display: inline-block; vertical-align: top; line-height: 1.5rem;} .block.event .wrapper ul li.small {width: 8rem;} .block.event .wrapper .images {display: block; width: 100%; margin-bottom: 1rem;} .block.event .wrapper .images img {height: 9rem;} .block.event .wrapper .images img[bigSize] {height: 15rem;} .banner .dateLocation {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -1.25rem; height: 2.5rem; line-height: 2.5rem; padding: 0 2rem; color: #FFFFFF; white-space: nowrap; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); -webkit-box-shadow: 0 0.5rem 1rem #000000; box-shadow: 0 0.5rem 1rem #000000; z-index: 1;} .banner .dateLocation b:before {content: "|"; margin: 0 0.5rem; color: #AF862A;} .countDown {text-align: center;} .countDown .days {position: relative; display: inline-block; width: 100px; height: 100px; margin: 0 0.5rem;} .countDown .hours {position: relative; display: inline-block; width: 100px; height: 100px; margin: 0 0.5rem;} .countDown .minutes {position: relative; display: inline-block; width: 100px; height: 100px; margin: 0 0.5rem;} .countDown .seconds {position: relative; display: inline-block; width: 100px; height: 100px; margin: 0 0.5rem;} .countDown svg {-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); height: 100%; width: 100%;} .countDown svg circle {fill: transparent; stroke: #D7BE5F; stroke-width: 2; stroke-dasharray: 250; stroke-dashoffset: var(--startValue);} .countDown .seconds circle {-webkit-animation: rotate calc(4*60s) linear infinite;animation: rotate calc(4*60s) linear infinite;} .countDown .minutes circle {-webkit-animation: rotate calc(4*60*60s) linear infinite;animation: rotate calc(4*60*60s) linear infinite;} .countDown .hours circle {-webkit-animation: rotate calc(4*60*60*60s) linear infinite;animation: rotate calc(4*60*60*60s) linear infinite;} .countDown .days circle {-webkit-animation: rotate calc(4*24*60*60*60s) linear infinite;animation: rotate calc(4*24*60*60*60s) linear infinite;} .countDown .amount {position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; line-height: 1.25rem; font-size: 0.75rem;} .countDown .amount b {display: block; font-size: 1.5rem;} @-webkit-keyframes rotate {to {stroke-dashoffset: 1000;}} @keyframes rotate {to {stroke-dashoffset: 1000;}} .block.timer {padding: 2rem 2rem 0; text-align: right;} .block.event .inviteMobile {display: none; margin-top: 5rem;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- eventInfo -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ body.eventInfo .banner {overflow: visible;} body.eventInfo .banner .left:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(0.5deg); transform: translateY(-50%) perspective(100px) rotateY(0.5deg);} body.eventInfo .banner .right:hover ~ .pageTitle{-webkit-transform: translateY(-50%) perspective(100px) rotateY(-0.5deg); transform: translateY(-50%) perspective(100px) rotateY(-0.5deg);} .block.eventInfo {overflow: visible;} .block.eventInfo .wrapper {text-align: left;} .block.eventInfo .wrapper table:not(.details) {display: inline-block; margin: 0 7rem 3rem 0; padding: 0.5rem 1rem; text-align: left; border: 1px solid rgba(175, 134, 42, 0.5);} .block.eventInfo .wrapper table:not(.details) td:first-child {padding-right: 2rem;} .block.eventInfo .summary {position: sticky; top: 2rem; margin: 0;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- over ons -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.aboutUs {} .block.aboutUs:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../../over-ons/over-ons.jpg") no-repeat center / cover; -webkit-filter: brightness(40%); filter: brightness(40%);} .block.aboutUs .wrapper {width: auto; text-align: left;} .video {max-width: calc(100vw - 1rem); height: 25rem; max-height: calc(100vw - 1rem); margin-bottom: 5rem;} .videoContainer {position: relative; left: 0; max-width: calc(100vw - 2rem); height: 100%;} .videoContainer:before {content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .videoContainer:after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#FFFFFF), to(transparent)); background-image: -o-linear-gradient(left, transparent, #FFFFFF, transparent); background-image: linear-gradient(to right, transparent, #FFFFFF, transparent);} .videoContainer iframe {position: relative; left: 0; top: 0; width: calc(100% + 2px); height: calc(100% + 2px); -webkit-transition: -webkit-filter 0.25s; transition: -webkit-filter 0.25s; -o-transition: filter 0.25s; transition: filter 0.5s, -webkit-filter 0.5s;} .videoContainer .videoCover {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .videoContainer .videoStill {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center / cover;} .videoContainer .playBtn {position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 4rem; color: #FFFFFF; cursor: pointer; text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-transition: font-size 0.25s, opacity 0.25s, visibility 0.25s; -o-transition: font-size 0.25s, opacity 0.25s, visibility 0.25s; transition: font-size 0.25s, opacity 0.25s, visibility 0.25s;} .videoContainer:hover .playBtn {font-size: 5rem;} .videoContainer.playing .playBtn {font-size: 10rem; opacity: 0; visibility: hidden;} .videoContainer.paused iframe {-webkit-filter: blur(8px); filter: blur(8px); -webkit-transition: -webkit-filter 1s; transition: -webkit-filter 1s; -o-transition: filter 1s; transition: filter 1s, -webkit-filter 1s;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- partners -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.partner {background-color: transparent;} .block.partner:before {content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: url("../IMG/logo.png") no-repeat center / 50vw auto; opacity: 0.2; -webkit-filter: blur(15px); filter: blur(15px);} .block.partner .wrapper {text-align: left;} .block.partner .summary img {width: 12rem;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- betaalpagina's -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ body.aanmelden .banner .left:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(0.5deg); transform: translateY(-50%) perspective(100px) rotateY(0.5deg);} body.aanmelden .banner .right:hover ~ .pageTitle {-webkit-transform: translateY(-50%) perspective(100px) rotateY(-0.5deg); transform: translateY(-50%) perspective(100px) rotateY(-0.5deg);} .block.payment {} .block.payment .left {display: inline-block; vertical-align: top; text-align: left;} .block.payment .left section {display: block; margin-bottom: 0.5rem; font-family: Montserrat; font-size: 1.5rem; font-weight: 900; color: rgba(175, 134, 42, 0.3);} .block.payment .left .amount {position: relative; float: right; font-size: 1rem; z-index: 1;} .block.payment .left .amount * {display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; -webkit-user-select: none; -ms-user-select: none; user-select: none;} .block.payment .left [name=amount] {background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); cursor: default;} .block.payment .left .amount .min, .block.payment .left .amount .plus {background-color: rgba(175, 134, 42, 0.3); -webkit-transition: background-color 0.1s, transform 0.1s; -o-transition: background-color 0.1s, transform 0.1s; transition: background-color 0.1s, transform 0.1s; cursor: pointer;} .block.payment .left .amount .min {margin-left: 1rem; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .block.payment .left .amount .min.disabled, .block.payment .left .amount .plus.disabled {width: 0; font-size: 0;} .block.payment .left .amount .plus {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .block.payment .left .amount .min:hover, .block.payment .left .amount .plus:hover {background-color: rgba(175, 134, 42, 0.75);} .block.payment .left .amount .min:active, .block.payment .left .amount .plus:active {-webkit-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); background-color: #AF862A;} .block.payment .right {position: relative; display: inline-block; vertical-align: top; max-width: 35%; margin-left: 4rem; padding-left: 4rem;} .block.payment .right:before {content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(#AF862A), to(transparent)); background-image: -o-linear-gradient(transparent, #AF862A, transparent); background-image: linear-gradient(transparent, #AF862A, transparent);} .block.payment .right .overview {margin-bottom: 2rem; padding: 1rem; xwhite-space: nowrap; text-align: left; border: 1px solid rgba(255, 255, 255, 0.5);} .block.payment .right .overview .price {float: right; height: 3rem; line-height: 1; margin-left: 1rem; font-size: 1.5rem; text-align: right;} .block.payment .right .overview .smallPrice {display: inline-block; font-size: 0.8rem;} .block.payment .right .paymentMethod {display: block; margin-bottom: 0.5rem; padding: 0.5rem; border-radius: 0.25rem; background-color: rgb(38.25, 38.25, 38.25); border: 1px solid transparent; transition: background-color 0.1s, border-color 0.1s;} .block.payment .right .paymentMethod:hover {border-color: rgba(255, 255, 255, 0.5);} .block.payment .right .paymentMethod.selected {background-color: rgba(175, 134, 42, 0.75);} .block.payment .right .paymentMethod img {display: inline-block; vertical-align: middle; width: 4rem; margin-right: 0.5rem;} .block.payment .right .paymentMethod span {display: inline-block; vertical-align: middle; text-align: left;} .block.payment .right .paymentMethod .chooseBank {display: none; padding: 1rem 0;} .block.payment .right select {background-color: #AF862A; background-image: -webkit-gradient(linear, left top, right bottom, from(#AF862A), to(#D7BE5F)); background-image: -o-linear-gradient(top left, #AF862A, #D7BE5F); background-image: linear-gradient(to bottom right, #AF862A, #D7BE5F); padding: 0.25rem;} .block.payment .right label {display: inline-block; margin: 3rem 0;} .block.payment .right label input {display: inline-block; vertical-align: middle; margin-right: 0.5rem;} .block.payment .right [name=agreedToTerms] ~ a:hover {text-decoration: underline;} .block.payment .right .button {display: block;} .block.payment .right .secureConnection {display: block; margin-top: 1rem; text-align: center; opacity: 0.75;} .block.payment .right .secureConnection i {margin-right: 0.5rem; color: #D7BE5F;} .block.payment .right .join {position: relative; padding-bottom: 0.5rem;} .block.payment .right .join:after {content: ""; position: absolute; left: -1rem; bottom: 0; width: calc(100% + 2rem); height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#AF862A), color-stop(#D7BE5F), color-stop(#AF862A), to(transparent)); background-image: -o-linear-gradient(left, transparent, #AF862A, #D7BE5F, #AF862A, transparent); background-image: linear-gradient(to right, transparent, #AF862A, #D7BE5F, #AF862A, transparent);} .slider-checkbox {position: relative; line-height: 1.85rem;} .slider-checkbox input {position: absolute; left: 0; top: 0; width: 40px; height: 20px; margin-top: 1px; cursor: pointer; opacity: 0; z-index: 1;} .slider-checkbox input:checked + .label:before {content: ""; background-color: #AF862A; padding-left: 6px;} .slider-checkbox input:checked + .label:after {left: 21px;} .slider-checkbox .label {position: relative; margin: 1.5rem 0 1rem !important; padding-left: 46px; font-size: 1rem;} .slider-checkbox .label:before, .slider-checkbox .label:after {position: absolute; border-radius: 10px; -webkit-transition: background-color 0.35s ease-out, left 0.35s ease-out; -o-transition: background-color 0.35s ease-out, left 0.35s ease-out; transition: background-color 0.35s ease-out, left 0.35s ease-out;} .slider-checkbox .label:before {content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 23px; background-color: rgb(63.75, 63.75, 63.75); left: 0; top: 0; height: 20px; width: 40px; border-radius: 10px;} .slider-checkbox .label:after {content: ""; background: #FFFFFF; left: 1px; top: 1px; height: 18px; width: 18px;} .slider-checkbox .label i {color: #D7BE5F; font-weight: bold;} .flipCard {display: inline-block; width: 400px; -webkit-perspective: 1000px; perspective: 1000px;} .flipCardInner {position: relative; width: 100%; height: 100%; text-align: center; -webkit-transition: -webkit-transform 0.7s ease-out; transition: -webkit-transform 0.7s ease-out; -o-transition: transform 0.7s ease-out; transition: transform 0.7s ease-out; transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;} .flipCard.turn .flipCardInner {-webkit-transform: rotateY(180deg); transform: rotateY(180deg);} .flip-card.front, .flip-card.back {left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .flip-card.front {position: relative;} .flip-card.back {position: absolute; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- contact -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.contact {} .block.contact:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../../contact/Audi-R8-back.jpg") no-repeat center / cover; -webkit-filter: brightness(40%); filter: brightness(40%);} .block.contact .wrapper {width: auto; text-align: left;} .block.contact .widget.phone {margin-right: 2rem;} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------- lid worden -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .block.member {} .block.member .wrapper {text-align: left;} .block.member .textBlock:before {display: none;} .block.member .textBlock .text:before {display: none;} .block.member .textBlock .image:before {content: ""; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000000)); background-image: -o-linear-gradient(transparent, #000000); background-image: linear-gradient(transparent, #000000); z-index: -1;} .block.member .textBlock.right .image {position: relative; float: right; margin-left: 2rem; margin-bottom: 2rem;} .block.member .textBlock.right .text {padding: 0;} .block.member .textBlock.left h2 {} .block.member .textBlock.left .image {position: relative; float: left; margin-right: 2rem; margin-bottom: 2rem;} .block.member .textBlock.left .text {padding: 0;} .block.member ul li {display: inline-block; vertical-align: top; max-width: 40%; margin-right: 2rem;} .block.member ul li li {max-width: 100%; margin-bottom: 0;} .faq {display: inline-block; width: 50%; margin-bottom: 1rem;} .faq .question {position: relative; display: block; width: 100%; padding: 1rem 1rem 1rem 2rem; cursor: pointer; -webkit-transition: background-color 0.15s; -o-transition: background-color 0.15s; transition: background-color 0.15s;} .faq .question:not(.open):hover {background-color: rgba(175, 134, 42, 0.5);} .faq .question:before {content: "►"; position: absolute; right: 0.5rem; top: 1.1rem; font-size: 0.75rem; -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s;} .faq .question:hover:before {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);} .faq .question.open {background-color: rgba(175, 134, 42, 0.5);} .faq .question.open:hover:before {-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);} .faq .answer {display: none; padding: 1rem; background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(175, 134, 42, 0.45)), to(rgba(175, 134, 42, 0.2))); background-image: -o-linear-gradient(top left, rgba(175, 134, 42, 0.45), rgba(175, 134, 42, 0.2)); background-image: linear-gradient(to bottom right, rgba(175, 134, 42, 0.45), rgba(175, 134, 42, 0.2));} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- media queries ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1280px){ .block:not(.welcome) {padding: 3rem 0;} .wrapper {padding: 0 1rem;} .rallyBlock {width: calc(100% / 3 - 4rem);} .rallyBlock .image {height: 20vw;} } @media screen and (max-width: 1200px){ .mobileMenu {left: 0 !important;} .topLogo {left: calc(100vw - 11.5rem);} } @media screen and (max-width: 1100px){ .block.events .rallyBlock {width: calc(100% / 2 - 4rem);} .block.event:before {-webkit-filter: blur(10px); filter: blur(10px);} .block.payment .left {display: block; width: 100%;} .block.payment .left form {width: 100%;} .block.payment .right {width: 100%; max-width: 50%; margin: 2rem 0 0 0; padding-left: 0; text-align: center;} .block.payment .right:before {display: none;} .block.payment .right .flipCard {width: auto;} .footerBlock {width: auto;} } @media screen and (max-width: 1000px){ video.BG {width: auto; height: 100%;} .textBlock {text-align: center;} .textBlock .image {position: relative; display: inline-block; width: 50%;} .textBlock .text {padding: 2rem 0 0 0;} .block.rallys .video {height: auto; max-height: 100%;} .block.rallys .video .videoContainer {float: none !important; height: 25rem; margin: 0 auto 2rem !important;} .block.rallys .video .text {} .block.event:before {background-size: 75vw auto;} .block.event .summary {width: 100%; max-width: 100%; margin: 0 0 5rem; padding-left: 0;} .block.event .summary:before {display: none;} .block.event .summary .invite {display: none;} .block.event .summary .button {display: none;} .block.event .inviteMobile {display: block;} .block.event .wrapper .images img {height: 12.3rem;} .block.member .faq {width: 75%;} } @media screen and (max-width: 950px){ .rallyBlock {width: calc(100% / 2 - 4rem) !important;} .rallyBlock .image {height: 28vw;} } @media screen and (max-width: 900px){ .block.eventInfo .wrapper {text-align: center;} .block.eventInfo .wrapper table:not(.details) {margin: 0 3.5rem 3rem;} .block.eventInfo .summary {width: 100%; max-width: 100%; margin: 0 0 5rem; padding-left: 0;} .block.eventInfo .summary:before {display: none;} .block.member .textBlock.right ul li {width: 100%; max-width: 100%;} } @media screen and (max-width: 800px){ .block.payment .right {max-width: 100%;} } @media screen and (max-width: 750px){ .block.performanceClub .wrapper {text-align: center;} .block.performanceClub .test {width: 100%;} .block.performanceClub img {width: 50%; margin: 2rem 0 0 0;} .block.member .faq {width: 100%;} } @media screen and (max-width: 700px){ form {width: auto;} form .input {width: 100%; margin-right: 0 !important;} form .input textarea {width: 100%;} .textBlock .image {width: 100%;} } @media screen and (max-width: 600px){ .rallyBlock {width: calc(100% - 4rem) !important;} .rallyBlock .image {height: 50vw;} .block.welcome {height: auto;} .block.welcome .wrapper {position: relative; left: 0; top: 0; -webkit-transform: none; -ms-transform: none; transform: none;} .block.partner:before {background-size: 75vw auto;} .block.partner .summary {width: 100%; max-width: 100%; margin: 0 0 5rem; padding-left: 0;} .block.partner .summary:before {display: none;} } @media screen and (max-width: 550px){ .block.event:before {-webkit-filter: blur(6px); filter: blur(6px);} .block.payment .left .amount {float: none; margin-bottom: 1.5rem;} } @media screen and (max-width: 500px){ .block.event .wrapper .images img {width: 100%; height: auto;} .block.performanceClub img {width: 100%;} } @media screen and (max-width: 300px){ .footerBlock {padding: 4rem 0 0;} .footerBlock .logo {left: 0;} }