@charset "UTF-8"; /* Theme Name: wow-child Theme URI: Author: Author URI: https://wordpress.org/ Description: Requires at least: 5.3 Tested up to: 6.0 Requires PHP: 5.6 Version: 1.0 License: License URI: Text Domain: wow Tags: Template: wow Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org Twenty Twenty-One is distributed under the terms of the GNU GPL. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); html body * { font-family: 'Montserrat', sans-serif !important;} html { font-size: 16px; overflow-x: hidden; scroll-behavior: smooth !important;} #page { overflow-x: hidden;} body { max-width: 2560px; margin: 0 auto; box-shadow: 0px -80px 0px 0px rgba(0, 0, 0, 1); -webkit-box-shadow: 0px -80px 0px 0px rgba(0, 0, 0, 1); height: 100vh; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} /* ############################################################ typography ################################################################## */ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,span,li,a { margin-bottom: 0;} .h1-sm,h1,.h1 { font-size: 6.25rem; line-height: 7rem; font-weight: 900;} .h1-md { font-size: 10.625rem; line-height: 11rem; font-weight: 900;} .h1-lg { font-size: 15.625rem; line-height: 16.625rem; font-weight: 900;} .h2-sm,h2,.h2 { font-size: 4.375rem; line-height: 5.375rem; font-weight: 900;} .h2-md { font-size: 5.3125rem; line-height: 6.3125rem; font-weight: 900;} .h2-lg { font-size: 5.625rem; line-height: 6.625rem; font-weight: 900;} .h3-sm,h3,.h3 { font-size: 3.9375rem; line-height: 4.9375rem; font-weight: 800;} .h3-lg { font-size: 4.125rem; line-height: 4.3rem; font-weight: 900;} .h4-xlg { font-size: 3rem; line-height: 3.5rem; font-weight: 900;} .h4-sm,h4,.h4 { font-size: 2.5625rem; line-height: 3.5625rem; font-weight: 700;} .h4-lg { font-size: 2.875rem; line-height: 3.875rem; font-weight: 800;} .h5-sm,h5,.h5 { font-size: 2.125rem; line-height: 3.125rem; font-weight: 600;} .h5-md { font-size: 2.0625rem; line-height: 3.0625rem; font-weight: 600;} .h5-lg { font-size: 2.25rem; line-height: 3.25rem; font-weight: 800;} .h6-sm,.h6,h6,.menu-item a ,.join_btn-discover_btn-container a { font-size: 1.2rem; line-height: 1.3125rem; font-weight: 600;} .h6-lg { font-size: 1.375rem; line-height: 1.375rem; font-weight: 600;} p,.p-sm { font-size: 0.8rem; line-height: 1.4rem; font-weight: 500;} .p-md { font-size: 1.125rem; line-height: 1.125rem; font-weight: 500;} .p-lg,a,span { font-size: 1.1875rem; line-height: 1.1875rem; font-weight: 500;} /* ############################################################ removing default style ################################################################## */ .site-branding, footer .site-name { display: none;} .site-main, .primary-navigation a { padding: 0;} .site-main > * { margin: 0 !important;} .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { outline: none; text-decoration: none; text-decoration-skip-ink: none; background: none; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: none; } button:not(:hover):not(:active):not(.has-background) { background-color: transparent !important;} /* ############################################################ global style ################################################################## */ img { max-width: 100%; max-height: 100%; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;} span,a { display: inline-block;} ul { padding: 0; margin: 0;} a { text-decoration: none !important;} li { list-style-type: none !important;} p a { color: inherit; line-height: inherit; font-size: inherit; font-weight: inherit; transition-duration: 0.3s;} p a { text-decoration: underline !important;} p a:hover { text-decoration: none !important; color: inherit !important;} /* ############################################################ common-style ################################################################## */ .black-btn, .yellow-btn { padding: 0.5rem 2.5rem !important; background: url("./assets/images/black-btn-bg@2x.png") no-repeat center center/contain; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 0.5rem; font-weight: bold; width: fit-content;} .yellow-btn { padding: 0.7rem 2.5rem !important; background: url("./assets/images/yellow-btn-bg@2x.png") no-repeat center center/cover; border-radius: 0.2rem; box-shadow: 3.694px 4.728px 1.64px 0.36px rgba(0, 0, 0, 0.69);} .black-btn:focus { background: url("./assets/images/black-btn-bg@2x.png") no-repeat center center/contain !important;} .yellow-btn:focus { background: url("./assets/images/yellow-btn-bg@2x.png") no-repeat center center/cover !important;} .yellow-btn:focus::after { display: none !important;} .yellow-btn > * { color: black;} .yellow-btn .btn-arrow, .black-btn .btn-arrow { margin-left: 0.5rem;} .grow { background-color: black; top: 0!important;transition-duration: 0.5s;} .topbar { transition-duration: 0.5s;} .yellow-cross-bars { position: relative;} .yellow-cross-bars::before { content: ""; position: absolute; height: calc(100% - 2rem); aspect-ratio: 1 / 0.5; background: url("./assets/images/yellow-cross-bars@2x.png") no-repeat center center / cover; top: 50%; left: -8rem; transform: translateY(-50%);} .yellow-outline { text-shadow: -2px -2px 0 #ffd543, 2px -2px 0 #ffd543, -2px 2px 0 #ffd543, 2px 2px 0 #ffd543; font-style: italic; color: white;} .black-outline { text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; font-style: italic; color: white;} .white-outline { text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white; font-style: italic; color: black;} .slick-dots li button { padding: 0 !important; background-color: transparent !important; position: relative !important;} .slick-dots li button::before { font-size: 3rem !important;} .paper-curl-right { transition-duration: 0.3s; position: relative;} .paper-curl-right > * { text-transform: uppercase;} .paper-curl-right::after { content: ""; position: absolute; width: 20%; height: 80%; background-color: rgba(0, 0, 0, 0.549); z-index: -1; bottom: 0; right: 0; border-radius: 0.2rem; filter: blur(3px);} .paper-curl-right:hover { border-radius: 0 0 40% 0 / 0 0 30% 0; } .black-btn.paper-curl-right::after { bottom: 5px;} .black-btn.paper-curl-right:hover { border-radius: 0 0 40% 0 / 0 0 40% 0;} .sell-me { position: absolute; top: 8.5rem; right: 30%; width: fit-content; height: auto; z-index: 102; text-align: right; max-width: 400px;} .sell-me::before,.sell-me::after { content: ""; position: absolute; width: 2.5rem; height: 2.5rem; background: url("./assets/images/qutation-symbol@2x.png") no-repeat center center/contain; top: -3.5rem; left: 5rem; } .sell-me::after {background: url('./assets/images/qutation-symbol-closing@2x.png') no-repeat center center/contain; bottom: 1rem; top: unset; left: unset; right: -2rem;} .sell-me h4:last-child { margin-right: 1.5rem;} .sell-me .h4-lg { line-height: 3.5rem;} .loader-container { background-color: black; position: fixed; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 5000;} .header-bg { background-color: black; transition-duration: 0.5s;} .yellow-highlight, .white-highlight { position: relative; padding: 0 1rem; width: fit-content;} .yellow-highlight::before, .white-highlight::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #ffd202; transform: skew(-20deg); z-index: -1;} .white-highlight::before { background-color: white;} /* .iconic-access-item-icon */ /* .iconic-access-item-icon:hover { box-shadow: 0 5px 35px 0px rgba(0,0,0,.1); } */ .iconic-access-item-icon:hover::after { display: block; content: ''; position: absolute; width: 100%; height: 100%; background: #FDA8CF; border-radius: 50%; z-index: -1; animation: 1s clockwise infinite; } .iconic-access-item-icon:hover:after { background: rgb(27,27,27); background: -moz-linear-gradient(180deg, rgba(27,27,27,1) 0%, rgba(249,197,43,1) 78%); background: -webkit-linear-gradient(180deg, rgba(27,27,27,1) 0%, rgba(249,197,43,1) 78%); background: linear-gradient(180deg, rgba(27,27,27,1) 0%, rgba(249,197,43,1) 78%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b1b1b",endColorstr="#f9c52b",GradientType=1); animation: 2s counterclockwise infinite; } @keyframes clockwise { 0% { top: -5px; left: 0; } 12% { top: -2px; left: 2px; } 25% { top: 0; left: 5px; } 37% { top: 2px; left: 2px; } 50% { top: 5px; left: 0; } 62% { top: 2px; left: -2px; } 75% { top: 0; left: -5px; } 87% { top: -2px; left: -2px; } 100% { top: -5px; left: 0; } } @keyframes counterclockwise { 0% { top: -5px; right: 0; } 12% { top: -2px; right: 2px; } 25% { top: 0; right: 5px; } 37% { top: 2px; right: 2px; } 50% { top: 5px; right: 0; } 62% { top: 2px; right: -2px; } 75% { top: 0; right: -5px; } 87% { top: -2px; right: -2px; } 100% { top: -5px; right: 0; } } .market-iframe { display: block;} .phone-iframe-container { display: none;} section.counter-container.learn-banner-navigation { transition-duration: 0.5s;} section.counter-container.learn-banner-navigation.makeSticky { position: fixed; left: 0; z-index: 5; top: 100px; } section.counter-container.learn-banner-navigation.makeSticky + section { margin-top: 136px !important;} .wpcf7-spinner.submit-loader,.wpcf7-spinner.submit-loader::after,.wpcf7-spinner.submit-loader::before{ border-radius: 0; margin: 0;} .wpcf7-spinner.submit-loader { font-size: 0.5rem;} .submit-loader,.loader { width: 10%; aspect-ratio: 1 / 1;} .loader { min-width: 80px;} .submit-loader, .submit-loader:before, .submit-loader:after { background: #ffb900; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .submit-loader { color: #ffb900; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .submit-loader:before, .submit-loader:after { position: absolute; top: 0; content: ''; } .submit-loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .submit-loader:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } #about-the-music { position: absolute; width: 100%; height: 17.5%; bottom: 0; left: 0;} .join_btn-discover_btn-container .header-join-btn { display: flex !important; margin: 0 auto;} .contact-form-submitted .join_btn-discover_btn-container .header-join-btn { display: none !important;} .join_btn-discover_btn-container .header-discover-btn { display: none !important;} .contact-form-submitted .join_btn-discover_btn-container .header-discover-btn { display: flex !important;} .menu .show-if-submitted { display: none; } .contact-form-submitted .show-if-submitted{ display: inline-block !important; } .contact-form-submitted .hide-if-submitted{ display: none; } .wpcf7-form-control-wrap { display: inline-block !important;} /* ############################################################ header ################################################################## */ .current-menu-item a,.current-menu-item.ignore-active a:hover { background-position: 0 !important;} .current-menu-item a::before,.current-menu-item.ignore-active a:hover::before { width: 100% !important;} .current-menu-item.ignore-active a { background-position: -100% !important;} .learn-banner-navigation .current-menu-item a::before,.current-menu-item.ignore-active a::before { width: 0 !important;} .mobile-menu ul li a,.sub-menu li a { -webkit-background-clip: text; -webkit-text-fill-color: black !important; background-image: none !important; background-size: 100% !important; background-position: 0 !important;} .phone-menu-wrapper > li { position: relative;} .sub-menu-toggle { position: absolute; background: black; background-color: black; top: -5px; left: 60%; width: 2.5rem; height: 2.5rem; padding: 0; background: url("./assets/images/upside-dropdown-icon.png") no-repeat center center / 60% 50%;} .sub-menu-toggle.inner-menu-close { background: url("./assets/images/downside-dropdown-icon.png") no-repeat center center / 60% 50%;} .sub-menu-toggle:active,.sub-menu-toggle:hover { border-color: transparent !important; outline: none!important;} .sub-menu-toggle:focus { outline: none !important; border: none !important; box-shadow: none !important;} .phone-menu-wrapper > li > a { font-size: 1.3rem; line-height: 1.8rem;} .primary-navigation .sub-menu .menu-item > a { font-size: 1.2rem; line-height: 1.5rem; font-weight: 600} .mobile-menu .footer-navigation { margin: 3rem 0;} .mobile-menu .footer-navigation ul li { margin: 0rem 0.5rem;} .footer-navigation-wrapper li a svg { display: none;} .mobile-menu { position: relative;} .mobile-menu .mobile-menu-btn { left: 50%; bottom: -1%; transform: translate(-50%); top: unset;} .mobile-menu .mobile-menu-btn img { filter: invert(1);} .mobile-menu .mobile-menu-btn::before { content: ""; position: absolute; top: 50%; left: 50%; height: 4rem; width: 4rem; border-radius: 50%; background-color: black; transform: translate(-50%,-50%); z-index: -1;} .mobile-menu { width: calc(100% + 1px) !important;} .header-content > .mobile-menu-btn.menu-open { position: fixed !important; top: 6rem !important;} .header-content > .mobile-menu-btn.menu-open a img:first-child { display: none;} .header-content > .mobile-menu-btn a img:last-child { display: none;} .header-content > .mobile-menu-btn.menu-open a img:last-child { display: block;} .mobile-menu::before { content: ""; position: absolute; width: 14%; height: 24%; right: -5%; bottom: -5%; background: black; transform: skew(-40deg); max-width: 177px;} .mobile-menu::after { content: ""; position: absolute; width: 14%; height: 10%; left: -9%; bottom: 30%; background-color: black; transform: skew(-40deg); max-width: 105px;} .mobile-menu .mobile-menu-logo { max-width: 40%;} .mobile-menu .privacy-menu { width: 100%; max-width: 295px;} .mobile-menu .privacy-menu .privacy-terms { display: flex;} .mobile-menu .privacy-terms a:not(:first-child) { margin-top: 0rem !important; } .mobile-menu .privacy-terms a:last-child{ display: none;} .mobile-menu .current-menu-item > a, .mobile-menu .sub-menu .current-menu-item > a { text-decoration: underline !important;} .mobile-menu .sub-menu .current-menu-item.ignore-active a { text-decoration: none !important;} /* .mobile-menu */ /* .footer-navigation-wrapper .screen-reader-text { border: 0; clip: unset; -webkit-clip-path: unset; clip-path: unset; height: unset; margin: unset; overflow: unset; padding: 0; position: unset !important; width: unset; word-wrap: unset !important; word-break: unset;} */ .grow .topbar { margin-top: -72px;} .site-header { padding: 0; position: fixed; top: 0; width: 100%; z-index: 1020; transition-duration: 0.5s; max-width: 2560px; left: calc(50% - 1px); transform: translateX(-50%); display: block; transition: background-color 0.5s ease-in;} .header-content { position: relative; padding-block: 1rem; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1320px; margin: 0 auto;} .primary-navigation { margin-left: 0;} .primary-navigation.mobile-container { display: flex; align-items: center; justify-content: flex-start;} .join_btn-discover_btn-container { position: relative;} .header-btn { text-transform: uppercase;} /* .join_btn-discover_btn-container .header-btn:last-child { display: none !important;} */ .primary-navigation .primary-menu-container { margin: 0;} .primary-navigation .primary-menu-container > ul > .menu-item > a { padding: 0; margin: 0 } .primary-navigation .primary-menu-container > ul > li , .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 9rem;} .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 9rem;} .primary-navigation { width: 40%;} .primary-navigation > div > .menu-wrapper { justify-content: flex-end;} .site-logo { margin: 0; width: 13.93rem;} .site-logo .custom-logo-link, .site-logo .custom-logo-link .custom-logo { width: 100%;} .topbar-btn .btn-arrow ,.about-desc-part .btn-arrow { width: 2.5rem;} .topbar .container { display: flex; align-items: center; justify-content: space-between;} .topbar { padding-block: 0.5rem; width: 100%; background: url('./assets/images/topbar-bg@2x.png') no-repeat right center/cover;} /* .topbar::before { content: ""; position: absolute; width: 100%; height: 100%; background: url('./assets/images/topbar-bg@2x.png') no-repeat right center/cover; z-index: -1; top: 0; left: 0;} */ .topbar p { font-weight: bold;} .topbar-btn p, header .primary-menu-container .menu-item a { color: white;} .join_btn-discover_btn-container span { margin-right: 0.5rem; position: unset; width: 1.3125rem; height: 1.3125rem; top: 50%; transform: none !important; left: 22%;} .menu-item a,.join_btn-discover_btn-container a { font-weight: 700;} .join_btn-discover_btn-container a { box-shadow: 3.694px 4.728px 1.64px 0.36px rgba(0, 0, 0, 0.69); min-width: 13.125rem; color: black; position: relative;} .join_btn-discover_btn-container { margin-left: 3rem;} .mobile-menu { display: none;} .mobile-menu-btn { display: none;} header .menu-item a , .menu-footer-nav-menu-container ul li a, .privacy-terms a, .counter-container h5, .own-buy-nft-tagline a, .menu-leran-inner-menu-container ul li:not(:first-child) a , .menu-leran-inner-menu-container ul li:not(:first-child) a:focus { position: relative; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-image: linear-gradient(to right, #ffce00, #ffce00 50%, #fff 50%) !important; background-size: 200% 100% !important; background-position: -100%; transition-duration: 0.5s;} header .menu-item a::before , .menu-footer-nav-menu-container ul li a::before, .privacy-terms a::before,.own-buy-nft-tagline a::before, .menu-leran-inner-menu-container ul li:not(:first-child) a::before { content: ""; position: absolute; width: 0%; height: 2px; background-color: #ffce00; bottom: -0.5rem; left: 0; transition-duration: 0.5s;} header .menu-item a:hover::before , .menu-footer-nav-menu-container ul li a:hover:before, .privacy-terms a:hover::before, .own-buy-nft-tagline a:hover::before, .menu-leran-inner-menu-container ul li:not(:first-child) a:hover::before { width: 100%;} header .menu-item a:hover, .menu-footer-nav-menu-container ul li a:hover, .privacy-terms a:hover, .counter-container a:hover h5,.own-buy-nft-tagline a:hover, .menu-leran-inner-menu-container ul li:not(:first-child) a:hover { background-position: 0;} .menu-footer-nav-menu-container ul li a, .counter-container h5 { background-image: linear-gradient(to right, white, white 50%, black 50%) !important; } .menu-footer-nav-menu-container ul li a::before { background-color: white;} .own-buy-nft-tagline a { background-image: linear-gradient(to right, #ffce00, #ffce00 50%, #bcbcbc 50%);} .privacy-terms a { background-image: linear-gradient(to right, black, black 50%, white 50%) !important;} .privacy-terms a::before { background-color: black;} .counter-container a:hover img { filter: invert(1);} header .menu-item a:focus { -webkit-text-fill-color: white !important;} .menu-footer-nav-menu-container ul li a:focus { -webkit-text-fill-color: black !important;} .privacy-terms a:focus { -webkit-text-fill-color: white !important;} .header-discover-btn span { position: relative; left: -0.5rem; top: 0; transform: translate(0);} .fancybox-slide--iframe .fancybox-content { background: rgba(0, 0, 0, 0.75) !important;} .fancybox-iframe {transform: scale(1.01);} /* ############################################################ Banner ################################################################## */ .home { margin-top: 72px;} /* .home .topbar { position: relative;} */ /* .home .topbar::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: black; z-index: -1;} */ .banner { height: 100vh; min-height: 850px; position: relative; overflow: hidden;} .home .banner { position: relative; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; min-height: 100% !important;} .home .loader-container { transform: translateY(-72px);} .banner .banner-video { aspect-ratio: 1 / 0.5625; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; min-width: calc(100% + 2px); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .banner iframe { z-index: -1;} .banner .banner-title { text-align: center; position: absolute; width: fit-content; bottom: 12%; left: 50%; transform: translateX(-50%);} .home .banner-title { display: none;} .banner-title h1, .banner-title h2 { font-style: italic;} .banner-title h2,.banner-title h1 { font-weight: 900; color: white; } .banner-title h2 { padding: 0px 5px; } .banner-title h1 { padding: 0px 10px; } p span { display: unset;} .banner-title h1 { color: black;} .banner .widget_nav_menu { position: absolute; bottom: 8%; left: 8%;} .banner .widget_nav_menu a { padding: 0.6rem; width: 3.6875rem; height: 3.6875rem; border: 3px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition-duration: 0.3s;} .banner .widget_nav_menu li { margin-bottom: 1.3125rem;} .banner .widget_nav_menu a:hover { background-color: #ffce00; border-color: transparent;} .banner .widget_nav_menu a img { transition-duration: 0.3s;} .banner .widget_nav_menu a:hover img { filter: invert(1);} .banner > * { position: relative; z-index: 2;} .banner::before,.banner::after { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: black; opacity: 0.5; z-index: 1;} .home .banner::before { opacity: 0.8 !important;} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -100px 48px 26px rgba(0,0,0,1),inset 0px 100px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -100px 48px 26px rgba(0,0,0,1),inset 0px 100px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -100px 48px 26px rgba(0,0,0,1),inset 0px 100px 48px 26px rgba(0,0,0,1);} .discovery .banner::before { opacity: 0.3;} .banner::after { opacity: 1; background:url("./assets/images/square-left@2x.png") no-repeat left top / 12%,url("./assets/images/square-right@2x.png") no-repeat right bottom / 12%; mix-blend-mode: overlay;} .banner-video { z-index: 0;} .rect , .full-screen { padding: 0.5rem; margin-bottom: 1.3125rem; position: absolute; bottom: 8%; right: 8%; height: 3.5rem; width: 3.5rem; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: black; cursor: pointer; -webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.40); -moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.40); box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.40);} .full-screen:focus { background-color: black !important;} .full-screen { right: 12%;} .mobile-join-btn { display: none;} .banner .yellow-bars { position: absolute; width: 7rem; height: auto; left: 7rem; bottom: 3rem; z-index: 0;} /* ############################################################ Counter ################################################################## */ .counter-container { display: flex; position: relative; min-height: 12.5rem; width: 100%; background: url("./assets/images/counter-bg@2x.png") no-repeat center center/cover; } .nft-img-container { max-width: 670px; padding: 2.125rem 2.125rem 2.125rem 12rem; position: absolute; right: 0; height: 100%; display: flex; align-items: flex-end; justify-content: space-between;} .nft-img-container span { position: relative; z-index: 1;} .nft-img-container::before { content: ""; position: absolute; height: 100%; width: 100%; background: url("./assets/images/counter-black-bg.png") no-repeat left center/cover; right: 0; top: 0; z-index: 0;} .nft-img { max-width: 45%;} .downside-arrow { max-width: 15%;} .counter ,.counter-box,.counter-box-container { display: flex; align-items: center; justify-content: center;} .counter { justify-content: flex-start; height: 100%;} .counter-box-container { margin-left: 1rem; align-items: flex-start;} .counter-box-container .h6-lg { color: white; font-weight: 700;} .counter-box { margin-left: 0.3125rem; width: 4.625rem; height: 4.4375rem; border-radius: 5px; background: #ffd543;} .mobile-nft-img { display: none;} .counter-box-container > div { display: flex;} .cross-bar { position: absolute; top: -1.5rem; right: 550px; max-width: 20rem; z-index: 101;} /* Pen section */ .pen-section { position: relative; z-index: 100; transform: translateY(125px);} .pen-box { height: 0; width: 100%; position: relative;} .pen-box > div { height: 100px; position: absolute; box-sizing: border-box; pointer-events: none;} .pen-head { width: 850px; left: 50%; transform: translateX(-50%); z-index: 2; background: transparent url('./assets/images/pen_cap.png') no-repeat left top / 100% auto;} .pen-head a { color: #000; font-size: 26px; line-height: 26px; display: block; position: absolute; top: 15px; left: 25%; font-family: 'Montserrat', sans-serif; font-weight: 900; font-style: italic; pointer-events: visible;} .pen-head a span { font-size: 20px; line-height: 20px; display: block; font-weight: 900;} .pen-tail { width: 850px; right: 50%; transform: translateX(50%); z-index: 1; background: transparent url('./assets/images/pen_body.png') no-repeat left top / 100% auto;} /* ############################################################ About ################################################################## */ .about { padding: 18rem 0 8rem; position: relative; overflow: hidden; background: url(./assets/images/yellow-square-bg@2x.png) no-repeat 101% 15%/13%;} .about-title { margin-left: 5.5rem;} .about-title h2.yellow-cross-bars { margin-left: 2.5rem;} .about-content-container { width: 52%;} .about-description { display: flex; justify-content: space-between;} .about-desc-part { width: 49%;} .about-desc-part p { margin: 1.5rem 0 0; font-weight: 400; line-height: 1.75rem;} .macbook-container { position: absolute; width: 72rem; right: -19rem; top: 26rem;} .about .yellow-btn .p-lg { margin: 0; font-weight: 700;} .about .yellow-btn img { filter: invert(1)} .about .yellow-btn { margin-top: 3rem; width: fit-content; padding: 0.7rem 1.5rem !important;} .macbook-container_mobile-tablet { display: none;} .fancybox-content { height: auto !important; max-width: 1000px !important; aspect-ratio: 16 / 9 !important; -webkit-box-shadow: 0px 0px 60px 76px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 60px 76px rgba(0,0,0,0.75); box-shadow: 0px 0px 60px 76px rgba(0,0,0,0.75);} /* ############################################################ never-released ################################################################## */ .never-released { padding: 4rem 0; display: flex;} .never-released-slider-container { max-width: 1530px; margin-left: -15rem; padding-top: 2rem; width: 80.5%;} .never-released-slide { padding: 1rem; border-radius: 0.5rem; overflow: hidden;} .never-released .slick-slide { width: 32.1875rem !important; aspect-ratio: 103/69; object-fit: cover; object-position: center center;} .never-released .slick-dots { bottom: 5rem; width: fit-content; left: 102rem; display: flex;} .never-released .slick-dots li.slick-active button::before { color: #ffd543;} .never-released .slick-dots li button:hover::before { color: #ffd543;} .never-released-title { margin-left: 7rem; max-width: 560px;} .never-released-slide-content { position: relative; border-radius: 0.5rem; overflow: hidden;} .never-released-slide-content::before, .never-released-slide-content::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: white; opacity: 0.7; transition-duration: 0.3s; z-index: 1;} .never-released-slide-content::after { background: linear-gradient(to top, black 10%, rgba(0, 0, 0, 0) 50%); border-radius: 0.5rem; z-index: 0;} .slick-active .never-released-slide-content::before { opacity: 0;} .slide-overlay { padding: 0 2rem; position: absolute; height: 100%; width: 100%; background-color: #ffd643df; display: flex; flex-direction: column; justify-content: center; opacity: 0; top: 0; left: 0; transition-duration: 0.5s; border-radius: 0.5rem; z-index: 2;} .never-released-slide-content:hover .slide-overlay { opacity: 1; cursor: url("./assets/images/slider-cursor.png"),auto;} .slide-overlay h5 { font-weight: 900;} .slide-overlay p { max-width: 85%; margin: 0.5rem 0 1rem; padding-bottom: 0.1rem; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; font-weight: 400; line-height: 1.5rem;} .never-released .slick-dots li:nth-child(n + 6) { display: none !important;} .slick-slide { position: relative;} .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5rem; z-index: 0;} .slide-overlay a { padding: 0.5rem 1rem; color: black; border: 2px solid black; border-radius: 0.5rem; transition: 0.5s;} .slide-overlay a:hover { background-color: black !important; color: white;} /* ############################################################ Iconic ################################################################## */ .iconic { position: relative; padding: 38rem 0;} .iconic .container { position: relative; z-index: 5;} .iconic .row { justify-content: center;} .iconic .col-md-8 { display: flex; align-items: center; justify-content: center;} .iconic-content { text-align: center;} .iconic-sign-up { margin: 5rem 0 8rem;} .iconic-access-grp { margin: 2rem 0 4rem; display: flex; justify-content: space-between;} .iconic-access-item { width: 24%;} .iconic-access-item-icon { width: 12rem; margin: 0 auto; margin-bottom: 0px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative;} .iconic-access-item-icon img { position: relative; z-index: 1;} .iconic-access-item-icon::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgb(253,237,188); background: -moz-linear-gradient(180deg, rgba(253,237,188,1) 32%, rgba(249,197,43,1) 100%); background: -webkit-linear-gradient(180deg, rgba(253,237,188,1) 32%, rgba(249,197,43,1) 100%); background: linear-gradient(180deg, rgba(253,237,188,1) 32%, rgba(249,197,43,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdedbc",endColorstr="#f9c52b",GradientType=1);} .iconic-access-item-content { margin-top: -2rem; position: relative;} .input-area { display: flex; justify-content: space-between; align-items: center;} .iconic-contact-form .input-area:not(:first-child) { margin-top: 2rem;} .custom-input { min-height: 3.5rem; background: white; position: relative; border-radius: 0.5rem; display: flex; align-items: center; justify-content: flex-end;} .custom-input span { text-align: right;} .half-width-input { width: 48%;} .one-third-width-input { width: 31%;} .input-icon { padding: 0.8rem; position: absolute; height: 100%; width: 3.5rem; aspect-ratio: 1 / 1; left: 0; top: 0; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background-color: #373737;} .input-area input { padding: 0.5rem 0; font-weight: 600; font-size: 1.125rem; line-height: 2rem; border: none; background-color: transparent; width: calc(100% - 4rem);} .input-area input::placeholder { font-weight: 600; font-size: 1.125rem; line-height: 2rem;} input:focus { border: none !important; box-shadow: none !important; outline: none !important;} input[type="checkbox"] { float: left; min-width: 2rem; height: 2rem; border-radius: 0.5rem; background-color: white; border: none;} .iconic-radio-btn-container { overflow: hidden; margin-top: 3rem; margin-bottom: 6.5rem;} .radio-btn-content { position: relative; color: white;} .radio-btn-content > p { position: absolute; left: 0;} .radio-btn-content > div { padding-left: 3rem; text-align: left;} .radio-btn-content .wpcf7-list-item { margin: 0;} input[type="checkbox"]::after { left: 12px; top: 8px;} .iconic-contact-form-container { position: relative;} input[type="submit"] , .form-discover-btn { padding: 1rem 6rem; border: 2px solid #ffd543 !important; border-radius: 0.5rem; background-color: rgba(0, 0, 0, 0.245) !important; font-size: 2.125rem; line-height: 3.125rem; font-weight: 700; color: #ffd543 !important;} .form-discover-btn { display: none; margin-top: 0 !important; position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%); text-transform: uppercase;} .trending-line, .iconic-buildings { position: absolute; width: 100%; bottom: 0; left: 0;} .trending-line { z-index: 2;} .iconic-buildings { z-index: 1; bottom: 4.8rem;} .bull { position: absolute; bottom: 4rem; width: 26%; left: 3rem; z-index: 2;} .indication-board { position: absolute; z-index: 1; width: 17%; right: 0.3rem; bottom: 33rem;} .iconic-clouds { position: absolute; width: 100%; left: 50%; top: 98%; z-index: 0; transform: translateX(-50%);} .upper-clouds { position: absolute; width: 100%; bottom: 73.31%; left: 50%; z-index: 0; transform: translateX(-50%);} .iconic-man { max-width: 768px; position: absolute; width: 40%; top: -45.7%; left: 50%; transform: translateX(-50%); z-index: 3;} .iconic .black-outline { color: #ffce00;} .iconic-title h4 { color: white;} .iconic .wpcf7-form-control-wrap { position: relative;} .iconic .wpcf7-not-valid-tip { position: absolute; bottom: -1.7rem; font-size: 12px; line-height: 16px;} .iconic-radio-btn-container input[type="checkbox"] + span { position: absolute; width: 20rem;} .iconic-radio-btn-container input[type="checkbox"] + span .wpcf7-not-valid-tip { bottom: -3.5rem;} .radio-btn-content > label { padding-left: 3.5rem; position: relative; text-align: left; font-size: 1rem; line-height: 1.5rem;} .radio-btn-content > label > span { position: absolute !important; top: 0; left: 0;} .iconic-radio-btn-container + p { position: relative;} .wpcf7-spinner { position: absolute; bottom: -3.5rem; left: 50%; transform: translateX(-50%); } .iconic .wpcf7-form { position: relative;} .iconic .wpcf7-form .wpcf7-response-output { position: absolute; width: 100%; bottom: -10rem;} .iconic-access-item-icon > div { width: 5rem;} .trending-line::before { content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(to top, black 55%, rgba(0, 0, 0, 0) 100%); bottom: 0; left: 0; z-index: -1;} .wpcf7-response-output { background-color: #ffb900; color: white; font-weight: 500; border-radius: 0.5rem;} .wpcf7-not-valid-tip { margin-top: 0.2rem; padding: 0.1rem 0.3rem; background-color: #dc3232; color: white; font-weight: 400; border-radius: 0.2rem;} .iconic-contact-form .wpcf7-form-control-wrap { left: 0;} .iconic-contact-form-container { min-height: 548px;} .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; background-color: #46b450; } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; background-color: #dc3232; } .contact-form-submitted .iconic-contact-form-container .wpcf7 { display: none;} .contact-form-submitted .form-discover-btn { display: block;} .sign-up-msg,.access-denied { display: block;} .thanks-msg, .access-gained { display: none;} .contact-form-submitted .sign-up-msg, .contact-form-submitted .access-denied { display: none;} .contact-form-submitted .thanks-msg, .contact-form-submitted .access-gained { display: block;} .iconic-clouds img { min-width: 100%; max-height: 1409px;} .iconic-buildings img { min-width: 100%; max-height: 1350px;} .upper-clouds > div > img { min-width: 100%; max-height: 460px;} .trending-line::before { max-height: 1130px;} .light-cloud-container { position: absolute; min-width: 100%; left: 50%; transform: translateX(-50%); top: 44%;} .light-cloud-container .light-cloud1 { max-width: 43%; margin-left: auto;} .light-cloud1 img { margin-left: auto; min-width: 100%;} .light-cloud2 { max-width: 35%; margin-top: 10%;} /* .iconic .wpcf7-form .wpcf7-response-output { bottom: -10rem; } */ /* ############################################################ Partnership ################################################################## */ .partnership { padding: 2rem 0 9rem; position: relative; z-index: 1; background: #fff;;} .partnership-slider { margin-top: 2.5rem; display: flex; justify-content: center;} .partnership-title { text-align: center;} .partnership-slide { padding: 2rem; display: flex; align-items: center; justify-content: center; filter: grayscale(100%); transition-duration: 0.5s;} .partnership-slide:hover { cursor: url("./assets/images/cursor-yellow-pointer.png"), auto; filter: none;} .partnership-slide img { height: 80px;} /* ############################################################ footer ################################################################## */ footer { position: relative;} footer .sell-me { display: none;} .page-template-home footer .sell-me { display: block; top: 0.5rem;} .page-template-discovery .sell-me { display: none !important;} .site-footer { max-width: 100%;} .site-footer > * { margin: 0;} .site-footer > .site-info { padding: 0; margin: 0; border: none;} .no-widgets .site-footer { margin: 0 auto; padding: 0;} .copyrights { padding: 2rem 0; background-color: black; display: flex; justify-content: center; align-items: center; text-align: center;} .copyrights p, .copyrights a { color: #b7b7b765; font-size: 0.875rem; line-height: 1rem; font-weight: 500;} .copyrights p { margin-inline: 0.7rem; position: relative;} .copyrights p:not(:first-child)::before { content: ""; position: absolute; width: 2px; height: 100%; background-color: #b7b7b765; top: 0; left: -0.7rem;} .copyrights a { position: relative; font-size: inherit; line-height: inherit; transition-duration: 0.3s !important; text-decoration: none !important;} .copyrights a:hover { text-decoration: underline !important;} .footer-content { padding: 18.75rem 0 5rem; background: url("./assets/images/footer-bg-2@2x.png") no-repeat center top/cover;} .footer-logo { max-width: 17.375rem; margin: 0 auto;} .footer-logo a, .footer-logo img { width: 100%;} .footer-navigation { margin: 0; text-align: center;} .footer-navigation-wrapper { display: inline-block; overflow: hidden; justify-content: unset !important; flex-wrap: unset !important;} .footer-navigation-wrapper li { display: block !important; line-height: 3rem; float: left; margin: 0px 0.5rem; border-radius: 50%; overflow: hidden;} .footer-navigation-wrapper li a { display: flex !important; align-items: center; justify-content: center; padding: 0; text-align: center; width: 3.6875rem; height: 3.6875rem; border: 3px solid black; border-radius: 50%; transition-duration: 0.3s;} .footer-navigation-wrapper a span img { max-width: 25px; max-height: 25px; width: auto;} .menu-footer-nav-menu-container ul { margin: 5rem 0; display: flex; align-items: center; justify-content: center;} .menu-footer-nav-menu-container ul li { margin-inline: 3rem;} .privacy-terms { margin: 6rem 0 0 !important; display: flex; justify-content: center; align-items: center;} .privacy-terms a { color: white; margin-inline: 1.5rem; font-weight: 700;} .footer-navigation-wrapper a:hover { background-color: black;} .footer-navigation-wrapper a:hover img { filter: invert(1);} /* ############################################################ DISCOVERY - PAGE ################################################################## */ /* ############################################################ HEADER ################################################################## */ .page-template-discovery .join_btn-discover_btn-container .header-btn:last-child span { width: 2.313rem; height: auto; position: relative; left: -0.5rem; top: 50%; transform: unset;} /* ############################################################ Banner ################################################################## */ .discovery .banner::after { box-shadow: inset 0 95px 100px 30px black; width: 100%; height: 100%; top: 0; left: 0;} .discovery .banner .widget_nav_menu_nav_menu { display: none;} .discovery .banner-title { gap: 6rem; display: flex; align-items: flex-end; justify-content: center; text-align: left; bottom: 25%;} .discovery .banner-title .h2-md { line-height: 5.313rem; max-width: 449px;} .discovery .banner-title .h1-lg { line-height: 12.625rem; max-width: 344px;} .discovery .banner-bottom-cross-section, .own-page .banner-bottom-cross-section { margin-top: -13rem; position: relative; z-index: 5; position: relative;} .discovery .banner-bottom-cross-section::before, .own-page .banner-bottom-cross-section::before { content: ""; position: absolute; height: 51%; width: 100%; background: url("./assets/images/white-cross-rectangle@2x.png") no-repeat center center /cover; top: 10%; left: 0; z-index: -1;} .partner-page .banner-bottom-cross-section::before { height: 28%;} .discovery .yellow-cross-section { display: flex; justify-content: space-between;} .discovery .yellow-cross-content, .own-page .yellow-cross-content, .the-team .yellow-cross-content { min-height: 420px; position: relative; max-width: 800px; display: flex; align-items: center; justify-content: center; padding: 6rem;} .discovery .yellow-cross-content .h5-lg { line-height: 3rem; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; font-weight: 900;} .discovery .yellow-cross-content img, .own-page .yellow-cross-content img, .the-team .yellow-cross-content img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;} .discovery .widget_nav_menu { position: unset;} .discover-banner-social-menu nav { margin-top: 15rem;} /* .discovery .banner { background: url("./assets/images/discovery-banner-poster.png") no-repeat top center/ cover; height: calc(100vh + 250px); min-height: 800px; max-height: 950px;} */ .discover-banner-mobile-menu { display: none;} /* ############################################################ Video-Dallies ################################################################## */ .video-dallies { padding: 2rem 0; background: url("./assets/images/yellow-square-bg@2x.png") no-repeat 104% 97% / 12%;} .video-dallies-content { max-width: 90%;} .video-dallies-content .p-lg { line-height: 1.7rem; font-weight: 400;} .video-dallies-content { padding-top: 3rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between;} .video-dallies-video .never-released-slide-content { border-radius: 1.5rem; overflow: hidden;} .video-dallies-video .never-released-slide-content::before { display: none;} .video-dallies-video .slide-overlay p { -webkit-line-clamp: 6} .discovery .slick-active ~ .slick-slide .never-released-slide-content::before { opacity: 0;} .discovery .never-released-slider-container { max-width: 1800px; margin-left: -33rem; padding-top: 0rem; width: 94.5%; } .discovery .never-released .slick-slide { width: 22.188rem !important;} .discovery .play-btn { width: 3rem;} .discovery .never-released .slick-dots { bottom: -3rem; left: 116.5rem;} .discovery .never-released-title { margin-left: 4rem; max-width: 360px;} .discovery .slide-overlay-content .h5-md { font-size: 1.8rem; line-height: 2rem;} .discovery .video-dallies .slide-overlay { border-radius: 1.5rem;} .video-dallies .h3-lg { font-size: 4.5rem; line-height: 4.7rem;} .discovery .video-dallies-video .slide-overlay-content .h5-md { font-size: 2.8rem; line-height: 3rem; } .discovery .video-dallies-video .slide-overlay-content p { font-size: 1.5rem; line-height: 2rem;} /* ############################################################ Market-place ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 530px; max-width: 20rem; max-height: 272px; overflow: hidden; } .discovery .counter-container, .own-page .counter-container { margin: 8rem 0;} .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 2rem; background: none; font-weight: 600; padding: 0.5rem 0rem!important; z-index: 102;} .discovery .counter-container .black-btn h5, .own-page .counter-container .black-btn h5 { color: black;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 3.5rem; filter: invert(1);} .discovery .counter-container .topbar-btn, .own-page .counter-container .topbar-btn { height: 100%; display: flex; align-items: center; justify-content: center; position: relative;} .discovery .counter-container .black-btn:focus , .own-page .counter-container .black-btn:focus { background: none !important;} .discovery .market-place-mac , .own-page .market-place-mac { max-width: 300px; position: absolute; height: auto; left: 0; bottom: 0;} /* ############################################################ Discover Gallery ################################################################## */ .discovery .never-seen { padding-bottom: 12rem;} .discovery .never-seen-title { display: inline-block; margin: 0 0 6rem 13rem;} .discovery .never-seen-title > div > h3:last-child { margin-left: 2rem;} .discovery .never-seen-title .yellow-cross-bars::before { left: -6.5rem;} .discovery .never-seen-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px;} .discovery .never-seen-gallery li { padding-top: 100%; display: block; background: #9f9f9f; position: relative; border-radius: 0.8rem; overflow: hidden;} .discovery .never-seen-gallery li > img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; object-fit: cover;} .discovery .never-seen-gallery li > a { opacity: 0; transition-duration: 0.5s;} .discovery .never-seen-gallery li:hover > div, .discovery .never-seen-gallery li:hover > a { opacity: 1;} .discovery .never-seen-gallery li:nth-child(12n - 9) { grid-column: 3 / span 2; grid-row-end: span 2; padding-top: 0%;} .discovery .never-seen-gallery li:nth-child(12n - 8) { grid-row-end: span 2; padding-top: 0%;} .discovery .never-seen-gallery li:nth-child(12n - 9) .h5-md {font-size: 2.8rem; line-height: 3.5rem;} .discovery .never-seen-gallery li:nth-child(12n - 9) .p-lg, .discovery .never-seen-gallery li:nth-child(12n - 9) a { font-size: 1.5rem; line-height: 1.8rem;} .never-seen-gallery li .slide-overlay a { padding: 0; width: fit-content; border: none; display: flex; align-items: center; justify-content: space-between; transition-duration: 0.3s; font-weight: 700;} .never-seen-gallery li .slide-overlay a:hover { color: white; background-color: transparent !important;} .never-seen-gallery li .slide-overlay a:hover img { filter: invert(0);} .never-seen-gallery li .btn-arrow { margin-left: 2rem; width: 2rem;} .never-seen-gallery li .btn-arrow img { filter: invert(1); transition-duration: 0.3s;} .never-seen-gallery li:hover {cursor: url("./assets/images/slider-cursor.png"),auto;} .never-seen-gallery li > a { position: absolute; display: block; top: 0.75rem; right: 0.5rem; height: 2.5rem; width: 2.5rem; background: url(assets/images/full-screen-icon-black.png) no-repeat center center / auto 65% !important; z-index: 10; border-radius: 0.5rem;} .fancybox-slide--image .fancybox-content { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important;} /* ############################################################ PRIVACY-POLICY & TERMS-CONDITION ################################################################## */ /* .privacy-terms-page { padding-top: 20rem;} */ /* .privacy-terms-page .banner { max-height: 70vh;} */ .privacy-terms-page .banner .container { height: 100vh;} .privacy-terms-page .banner::before { opacity: 0.7;} .privacy-terms-page .banner::after { display: none;} .privacy-terms-page .banner .p-lg { font-style: italic; color: white; font-weight: 800;} .privacy-terms-page .banner h1 { margin-bottom: 2rem !important; text-transform: uppercase;} .privacy-terms-page .banner .banner-title { width: 100%; bottom: unset; top: 50%; transform: translate(-50%,-50%);} .privacy-terms-page .builder-content { margin-top: -12rem; padding: 15rem 0 8rem; transform: skewY(-6deg); background-color: white; position: relative; z-index: 1;} .privacy-terms-page > .builder-content > * { transform: skewY(6deg);} .privacy-terms-page h1 { margin-bottom: 5rem !important; font-size: 5.25rem; line-height: 6rem; font-weight: 900;} .privacy-terms-page p, .p-sm { font-size: 1rem; } .privacy-terms-page li { list-style-type: decimal !important; list-style-position: inside;} .privacy-terms-page a { color: black; position: relative;} .privacy-terms-page a::before { content: ""; position: absolute; width: 100%; height: 2px; background-color: #ffce00; right: 0; bottom: -0.5rem; width: 0; transition-duration: 0.5s;} .privacy-terms-page a:hover::before { width: 100%; left: 0;} .privacy-terms-page .container > h1, .privacy-terms-page .container > h2 { margin-bottom: 3.5rem;} .privacy-terms-page .container > h3 { margin-bottom: 2.5rem;} .privacy-terms-page h4, .privacy-terms-page h5, .privacy-terms-page h6 { font-weight: 800;} .privacy-terms-page .builder-content .container h1 { font-size: 3.5rem; line-height: 4.5rem;} .privacy-terms-page .builder-content .container h2 { font-size: 3rem; line-height: 4rem;} .privacy-terms-page .builder-content .container h3 { font-size: 2.8rem; line-height: 3.5rem;} .privacy-terms-page .builder-content .container h4 { font-size: 2.5rem; line-height: 3rem;} .privacy-terms-page .builder-content .container h5 { font-size: 2rem; line-height: 2.5rem;} .privacy-terms-page .builder-content .container h6 { font-size: 1.5rem; line-height: 2rem;} .privacy-terms-page .builder-content .container > p, .privacy-terms-page .builder-content .container > ul li, .privacy-terms-page .builder-content .container > ol li { margin-bottom: 0.5rem; font-size: 1.1875rem; line-height: 1.5rem; font-weight: 500;} .privacy-terms-page .builder-content .container > ul li a, .privacy-terms-page .builder-content .container > ol li a {font-weight: inherit;} .privacy-terms-page .builder-content .container > p, .privacy-terms-page .builder-content .container > ul, .privacy-terms-page .builder-content .container > ol { margin-bottom: 2rem;} .privacy-terms-page .builder-content .container > * { margin-bottom: 1.5rem;} .error404 .site-header { top: 0px; background-color: black;} .page-template-privacypolicy_terms-condition .site-header .topbar, .error404 .site-header .topbar { top: -67%;} .privacy-terms-page hr { margin: 3rem 0 !important;} .privacy-terms-page hr:not([size]) { height: 0; } hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: 100%; } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; border-bottom: 2px solid #ffca02; } .privacy-terms-page .banner-title { max-width: 100% !important; width: 100% !important;} /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 14rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error404 main p { font-size: unset; margin-bottom: unset; } .error-page-content { text-align: center;} .error-page-content h1 { color: #ffce00;} .error-page-content > p { margin-top: 1rem;} .error-page-content .yellow-btn { margin: 2rem auto 0;} /* ############################################################ LEARN-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ LEARN - Banner +++++++++++++++++++++++++++++++++++++++ */ .learn-banner { -webkit-box-shadow: inset 0px 172px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 172px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 172px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75);} .learn-banner.banner::after,.learn-banner.banner::before { display: none;} .learn-banner .yellow-bars { mix-blend-mode: soft-light;} .learn-banner h1 { color: #ffb900;} .learn-banner-navigation.counter-container { min-height: 8.5rem;} .learn-banner-navigation .nft-img-container { min-width: none; min-width: 100%; padding: 0;} .learn-banner-menu { position: relative; z-index: 102; display: flex; align-items: center; justify-content: center; height: 100%;} .learn-banner-menu ul { display: flex; justify-content: center; gap: 3.5rem; align-items: center;} .learn-banner-menu ul li { line-height: 0;} .learn-banner-menu ul li a { color: white !important;} .learn-banner-menu ul li:first-child a:hover img { filter: none !important;} .learn-banner-navigation .container { position: relative;} .learn-banner-navigation .cross-bar { right: -1rem; top: -2.5rem; max-width: 15rem;} .learn-banner-menu ul li.home-icon { width: 2.5rem;} /* +++++++++++++++++++++++++++++++++++++++++++ LEARN - About +++++++++++++++++++++++++++++++++++++++ */ .learn-about-section { padding: 10rem 0;} .learn-about-section-container .learn-about-section:last-child { padding: 10rem 0 14rem;} .learn-about-section .learn-about-poster { background-color: #adadad; position: relative; padding-top: 35%; padding-top: 72%; border-radius: 1rem; overflow: hidden;} .learn-about-section .learn-about-poster img { position: absolute; height: 100%; width: 100%; top: 0; left: 0;} .learn-about-section-container .row { justify-content: space-around;} .learn-about-title { margin-left: 2rem;} .learn-about-content { height: 100%; display: flex; flex-direction: column; justify-content: center;} .learn-about-content h4 { margin-left: 4rem;} .learn-about-content .yellow-cross-bars::before { height: calc(100% - 1rem); left: -6rem;} .learn-about-desc { margin-top: 3rem;} .learn-about-desc p { line-height: 1.6rem; max-width: 90%;} .learn-about-desc span { font-size: inherit; line-height: inherit; font-weight: 700; font-style: italic; display: unset;} .learn-about-poster { transition-duration: 0.5s;} .learn-about-poster:hover { transform: scale(1.05);} .learn-about-poster-container { position: relative;} .learn-about-small-poster { position: absolute; width: 62%; aspect-ratio: 149 / 112; top: 20%; right: -20%; transform-style: preserve-3d;} .learn-about-poster-container .yellow-btn { position: absolute; width: fit-content; bottom: 10%; left: -8%;} .learn-about-poster-container .yellow-btn .btn-arrow { max-width: 2rem;} .learn-about-poster-container .yellow-btn .btn-arrow img { filter: invert(1);} .learn-about-poster-container .yellow-btn p { font-weight: 700;} .learn-about-section-container .learn-about-section:nth-child(even) { background-color: #f4f4f4;} .learn-about-section-container .learn-about-section:nth-child(even) .row { flex-direction: row-reverse;} .learn-about-section-container .learn-about-section:nth-child(even) .row .learn-about-small-poster { right: unset; left: -20%;} .learn-about-section-container .learn-about-section:nth-child(even) .row .yellow-btn { left: unset; right: -8%;} /* +++++++++++++++++++++++++++++++++++++++++++ LEARN - NFT +++++++++++++++++++++++++++++++++++++++ */ .learn-nft-section { padding: 15rem 0 8rem; background: url("./assets/images/learn-nft-bg.png") no-repeat center top/cover; } .learn-nft-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem;} .learn-nft-content .btn-arrow { width: 2rem;} .learn-nft-section .learn-nft-img { max-width: 200px; } .learn-nft-section .yellow-btn p { font-weight: 700;} .learn-nft-section .btn-arrow { filter: invert(1);} .page-template-learn .footer-content { background: url("./assets/images/footer-bg-2@2x.png") no-repeat center top/cover,black; } /* ############################################################ OWN-PAGE ################################################################## */ .desktop-iframe { display: block;} .phone-iframe { display: none;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .banner::before, .own-page .banner::after { display: none;} .own-page .banner .container { position: relative; height: 100%;} .own-page .banner-title { text-align: right; bottom: 50%; left: 4rem; transform: translateY(50%); } .own-page .banner-title .h1-md { margin-right: -3rem; color: white;} .own-page .yellow-cross-content { flex-direction: column; padding: 10rem 5rem; gap: 3rem;} .own-page .yellow-cross-content .h5-lg { letter-spacing: 0;} .own-page .yellow-cross-content p { font-weight: 800; font-style: italic; line-height: 1.8rem;} .own-page .banner-bottom-cross-section::before { top: 6%;} .own-card-section { position: absolute; height: 100%; width: 36%; right: 0; top: 2rem; background: url("./assets/images/card-poster.png") no-repeat center top/cover; border-radius: 1rem 0 0 1rem;} .own-card-section .own-card-phone { max-width: 422px; aspect-ratio: 211 / 487; position: absolute; top: -30%; left: 21%;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BUY NFTS +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft { padding: 7rem 0 5rem;} .own-buy-nft .row { justify-content: center;} .own-buy-nft .h3-lg, .own-leaderboard .leaderboard-title .h3-lg { margin-bottom: -2.2rem;} .own-buy-nft .h2-md, .own-leaderboard .leaderboard-title .h2-md { font-style: italic;} .own-buy-nft-content , .own-leaderboard .leaderboard-title { text-align: center;} .own-buy-nft-tagline { margin-top: 5rem;} .own-buy-nft-tagline h5 { font-style: italic; font-weight: 900;} .own-buy-nft-tagline span { font-size: inherit; line-height: inherit; font-weight: inherit;} .own-buy-nft-tagline p { max-width: 550px; margin: 3rem auto; line-height: 1.8rem;} .own-buy-nft-tagline a { font-weight: 700;} .own-buy-nft-tagline a::after { content: ""; position: absolute; width: 100%; height: 3px; left: 0; bottom: -0.5rem; background-color: #bcbcbc;} .own-buy-nft-tagline a::before { height: 3px; z-index: 2;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - IFRAME +++++++++++++++++++++++++++++++++++++++ */ .first-nft-coming { background-color: black; padding: 7.5rem 0; color: white;} .first-nft-coming .container >.row { justify-content: center;} .first-nft-coming .container .col-10 > .row { justify-content: space-between;} .first-nft-coming-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%;} .first-nft-coming-content h4 { font-style: italic;} .first-nft-coming-content h4 span { font-size: inherit; font-weight: inherit; color:#ffd308; font-style: inherit; line-height: inherit;} .first-nft-coming-content h2 { font-size: 4rem; line-height: 4.5rem; font-weight: 300; font-style: italic;} .first-nft-coming-poster { text-align: center;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .own-leaderboard { padding: 5rem 0; position: relative;} .own-leaderboard .row { margin-top: 7rem; justify-content: space-between;} .leaderboard-content p { line-height: 1.8rem; margin-top: 1.5rem;} .leaderboard-content p:first-child { font-weight: 800; font-style: italic;margin-top: 0;} .winning-prize-poster { position: relative; cursor: url("./assets/images/slider-cursor.png"),auto;} .winning-prize-poster img { border-radius: 1rem; transition-duration: 0.5s;} .winning-prize-poster .winning-poster-border { position: absolute; min-width: 106%; min-height: 119%; top: -1.9rem; left: -0.8rem; z-index: 1; background: url('./assets/images/winning-poster-border1.png') no-repeat center center / contain; transition-duration: 0.5s;} .own-leaderboard li:nth-child(3n - 1) .winning-poster-border { background: url('./assets/images/winning-poster-border2.png') no-repeat center center / contain; min-width: 103.5%; min-height: 116%; top: -30px; left: -6px;} .own-leaderboard li:nth-child(3n) .winning-poster-border { background: url('./assets/images/winning-poster-border3.png') no-repeat center center / contain; min-width: 104%; min-height: 119%; left: -1.8rem;} .winning-prize-item { position: relative;} .winning-prize-list .winning-prize-item::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0;} .winning-prize-hover-content { padding: 4rem; position: absolute; height: 100%; width: 100%; background-color: black; display: flex; justify-content: center; top: 0; left: 0; border-radius: 0.8rem; flex-direction: column; gap: 2rem; opacity: 0; transition-duration: 0.5s; z-index: 3;} .winning-prize-poster:hover .winning-prize-hover-content { opacity: 1; } .winning-prize-poster:hover img, .winning-prize-poster:hover .winning-poster-border { transform: scale(1.05);} .winning-prize-hover-content h5 { color: #ffcc00; font-weight: 900;} .winning-prize-hover-content p { color: white; line-height: 1.8rem; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;} .winning-prize-list { display: flex; flex-direction: column; gap: 4rem;} .usflag-poster { position: absolute; bottom: 0; right: 50%; width: 50%; height: 50%; } .usflag-poster .btn-arrow,.leaderboard-mobile-btn .btn-arrow { width: 2rem;} .usflag-poster .yellow-btn { right: 8%; top: 2rem; position: absolute;} .usflag-poster .yellow-btn .btn-arrow img { filter: invert(1);} .leaderboard-mobile-btn p { font-style: normal !important;} .usflag-poster .yellow-btn p { font-weight: 700;} .win-prize-name { position: absolute; left: -11rem; bottom: 3rem; z-index: 1;} .win-prize-name h3 { font-size: 3rem; line-height: 4rem;} .win-prize-name h4 { margin-left: 3rem; color: #ffd308; font-weight: 800;} .win-prize-name h4::before { background: url("./assets/images/black-cross-bars.png") no-repeat center center/contain; left: -5rem; height: calc(100% - 1.5rem); z-index: 2;} .leaderboard-mobile-btn { display: none !important;} .usflag-poster img { width: 78%; max-height: 115%;} /* ############################################################ PARTNER-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - BANNER +++++++++++++++++++++++++++++++++++++++ */ .partner-page .banner-title { text-align: left;} .partner-page p { line-height: 1.8rem} .partner-page .banner::before { display: block !important;} .partner-page .banner-title .h1-md { margin-left: 2rem; font-size: 8.1875rem; line-height: 8.5rem;} .partner-page .yellow-cross-section { display: flex; justify-content: center;} .partner-page .yellow-cross-section .h5-lg { color: white;} .partner-page .yellow-cross-section p { color: #ffb900; font-weight: 800; font-style: italic; line-height: 1.8rem;} .partner-page .banner-bottom-cross-section::before { top: 3%;} .partner-page .banner-bottom-cross-section .container > .row { justify-content: center; gap: 5rem;} .partner-paragraph { margin-top: 5rem; display: flex; flex-direction: column; gap: 2rem;} .partner-paragraph .fw-bold { font-style: italic;} /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap { padding-top: 26rem; text-align: center; background: url("./assets/images/partner-roadmap-bg.png") no-repeat center top/cover; position: relative;} .partner-roadmap-image-contianer { position: absolute; top: 0; width: 100%; height: 20%; left: 0; min-height: 1px;} .partner-roadmap-image { position: absolute; height: auto; width: 30%; max-width: 40rem; top: -12%; right: -6%;} .partner-roadmap-image-contianer .partner-roadmap-image:last-child { right: unset; left: -6%; top: -18%; } .partner-roadmap-title { font-style: italic;} .partner-roadmap-title .white-outline { margin-top: 4rem; color: #ffc900;} .partner-roadmap-grp { margin-top: 3rem; padding-bottom: 13rem; position: relative;} .partner-roadmap-grp::before,.partner-roadmap-grp::after { content: ""; position: absolute; height: 100%; width: 1.2rem; left: 50%; top: 0; transform: translateX(-50%); background-color: #e9f1fc; border-radius: 1rem;} .partner-roadmap-grp::after { top: unset; bottom: 0; height: 9%; background-color: black; border-radius: 1rem 1rem 0 0;} .partner-roadmap-grp > .row:nth-child(even) { flex-direction: row-reverse;} .partner-roadmap-grp > .row:not(:first-child) { margin-top: -5rem;} .partner-roadmap-card { padding: 2.5rem; background-color: white; border: 0.5rem solid #e9f1fc; border-radius: 1.5rem; transform: rotate(2deg); box-shadow: 10px 1px 31px -5px #0000004d; position: relative; z-index: 1; transition-duration: 0.5s;} .partner-roadmap-card:hover { transform: scale(1.1) !important;} .partner-roadmap-card p { transition-duration: 0.5s;} .partner-roadmap-card:hover p { transform: rotate(0deg);} .partner-roadmap-card > h5 { display: none;} .partner-roadmap-card > * { transform: rotate(-2deg);} .partner-roadmap-card span { font-weight: 700; font-style: italic; font-size: inherit; line-height: inherit;} .partner-roadmap-content { padding-bottom: 5rem;} .partner-roadmap-content .h5-lg { margin: 1rem 0 ; padding-left: 1.5rem; text-align: left; font-style: italic; font-weight: 900;} .partner-roadmap-grp > .row:nth-child(even) .partner-roadmap-content .h5-lg { padding-right: 1.5rem; text-align: right;} .partner-roadmap-grp > .row:nth-child(3n-1) .partner-roadmap-card { transform: rotate(-2deg);} .partner-roadmap-grp > .row:nth-child(3n-1) .partner-roadmap-card:hover p { transform: rotate(0deg);} .partner-roadmap-grp > .row:nth-child(3n-1) .partner-roadmap-card > * { transform: rotate(2deg);} .partner-roadmap-grp > .row:nth-child(3n) .partner-roadmap-card { transform: rotate(-1deg);} .partner-roadmap-grp > .row:nth-child(3n) .partner-roadmap-card:hover p {transform: rotate(0deg);} .partner-roadmap-grp > .row:nth-child(3n) .partner-roadmap-card > * { transform: rotate(1deg);} .partner-roadmap-tickmark { height: 100%; display: flex; align-items: center; justify-content: center; position: relative;} .partner-roadmap-tickmark span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 9.25rem; border-radius: 50%; background-color: white; border: 0.5rem solid #e9f1fc; position: relative;} .partner-roadmap-tickmark span::before { content: ""; position: absolute; width: 100%; height: 0.5rem; top: 50%; left: -100%; transform: translateY(-50%); background-color: #e9f1fc; z-index: 0;} .partner-roadmap-grp > .row:nth-child(even) .partner-roadmap-tickmark span::before { left: unset; right: -100%;} .partner-roadmap-tickmark span img { max-width: 4.2rem;} .partner-page .learn-nft-section { padding: 12rem 0; margin-top: -6rem; background: black; transform: skewY(-5deg); position: relative; z-index: 2;} .partner-page .learn-nft-section .learn-nft-img { max-width: fit-content;} .partner-page .learn-nft-section > * { transform: skewY(5deg);} .partner-page .learn-nft-content { gap: 4rem;} .partner-page .learn-nft-content .btn-arrow { width: 3rem;} .partner-page .learn-nft-content .btn-arrow img { filter: invert(1);} .partner-page .partnership { padding: 9rem 0; background: url("./assets/images/yellow-square-bg.png") no-repeat left bottom/ 8% 56%;} /* ############################################################ THE-PROJECT ################################################################## */ .the-project .learn-banner { height: 60vh; min-height: 600px; background: url("./assets/images/project-banner.jpg") no-repeat center center/cover;} .the-project p { line-height: 1.8rem;} .the-project .learn-banner.banner::before { display: none; opacity: 0.3;} .the-project .learn-banner.banner .banner-title { left: unset; right: 5rem; transform: none;} .the-project .learn-banner.banner .banner-title h1 { color: black;} .the-project .historical { padding: 10rem 0 0rem; position: relative; z-index: 3;} .the-project .historical .row { justify-content: center;} .the-project .historical-title { text-align: center;} .the-project .historical-title span, .the-project .collectibility-title span { font-size: inherit; font-weight: inherit; line-height: inherit;} .the-project .historical .partner-paragraph { margin-top: 7rem;} .the-project .historical .container { position: relative;} .the-project .historical-img-container { position: absolute; height: 100%; width: 100vw; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;} .the-project .historical-img-container .historical-img { position: absolute; top: 0;} .the-project .historical-img-container .historical-img:first-child { width: 20%; top: 8%; left: -2%; max-width: 24rem;} .the-project .historical-img-container .historical-img:nth-child(2) { width: 30%; top: 50%; left: 3%; max-width: 32rem; transform: translateY(-50%);} .the-project .historical-img-container .historical-img:last-child { width: 45%; top: 50%; right: -11%; transform: rotate(-22deg); max-width: 43rem; transform: translateY(-50%);} .the-project .ipad-container { margin-top: 5rem; position: relative;} .the-project .ipad-container .wow-stamp { position: absolute; top: -17%; right: 8%; max-width: 17.5rem; width: 38%; z-index: 2;} .the-project .ipdad-poster { position: absolute; top: 0; left: -6%; width: 104%; z-index: 0; } .the-project .ipad-border-pen { position: absolute; bottom: -9%; left: 1%; width: 100%; z-index: 1;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility { margin-top: -10rem; padding: 20rem 0 25rem; background: url("./assets/images/iconic-cloud-image_.jpg") no-repeat center center/cover; position: relative; text-align: center; transform: skewY(-5deg); z-index: 2;} .collectibility::before,.collectibility::after { content: ""; position: absolute; height: 28%; width: 100%; bottom: -6rem; left: 0;background-color: black; transform: skewY(5deg);} .collectibility::before { -webkit-clip-path: polygon(0 65%, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0 65%, 100% 20%, 100% 100%, 0% 100%); } .collectibility::after { background: url("./assets/images/piano.png") repeat-x center center/52%; bottom: -21.64%; z-index: 1;} .collectibility > * { transform: skewY(5deg);} .collectibility .row { justify-content: center;} .collectibility .collectibility-title h3 { font-weight: 900; color: #FFCC00; margin-bottom: 2rem;} .collectibility .collectibility-title h5 { font-size: 1.875rem; line-height: 3rem;} .collectibility .wolf { position: absolute; top: -7.8%; left: 0; width: 23%; max-width: 27rem;} .collectibility .drop-timeline { margin: 5rem 0; position: relative;} .collectibility .drop-timeline::before,.collectibility .drop-timeline::after { content: ""; position: absolute; width: 90%; height: 1.5625rem; background-color: #e9f1fc; top: 50%; left: 50%; transform: translate(-50%,-23%);z-index: -1;} .collectibility .drop-timeline::after { width: 25%; left: 20%; background-color: black; border-radius: 1rem;} .collectibility .drop-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%;} .collectibility .drop-item p { font-size: 1.625rem; line-height: 2rem;} .collectibility .drop-item p span { font-size: inherit; line-height: inherit; font-weight: 800;} .collectibility .drop-item .drop-symbol span { margin: 1.5rem 0 2rem; width: 7rem; aspect-ratio: 1 / 1; border-radius: 50%; border: 0.5rem solid #e9f1fc; background-color: white; display: flex; align-items: center; justify-content: center;} .collectibility .drop-item .drop-symbol span img { max-width: 70%;} .collectibility .drop-item .drop-date, .collectibility .drop-item .drop-name { min-height: 25%;} .collectibility .drop-item .drop-date > * { color: white; font-style: italic;} .collectibility .drop-symbol span img { filter: invert(93%) sepia(42%) saturate(1588%) hue-rotate(178deg) brightness(110%) contrast(97%);} .collectibility .drop-timeline .row > div:first-child .drop-symbol span, .collectibility .drop-timeline .row > div:nth-child(2) .drop-symbol span { border-color: black; background-color: #ffc306;} .collectibility .drop-timeline .row > div:first-child .drop-symbol span img, .collectibility .drop-timeline .row > div:nth-child(2) .drop-symbol span img { filter: none;} .collectibility .collectibility-description { margin-top: 1.5rem;} .collectibility .collectibility-description span { font-size: inherit; font-style: italic; line-height: inherit; font-weight: 700;} .collectibility .collectibility-title { max-width: 85%; margin: 0 auto;} .collectibility-title .mobile-text { display: none;} .collectibility .join_btn-discover_btn-container { margin: 3rem 0 0;} .collectibility .join_btn-discover_btn-container a { margin: 0 auto;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - The Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 25rem 0 7rem; background-color: #f4f4f4; position: relative;} .music-phone-bg-container { position: absolute; bottom: 0; height: 45%; width: 100%; left: 0; display: none;} .music-phone-bg-container img { height: 100%; width: 100%; object-fit: cover; object-position: center;} .about-music-title { margin-bottom: 5rem; text-align: center;} .about-music-title h3 { color: #f4f4f4;} .about-music-title h4 { margin-left: 6rem; font-size: 3.125rem; line-height: 4rem; font-weight: 900; display: inline-block;} .about-music-title h4::before { left: -5rem;} .about-music-paragraph p span { font-weight: 700; font-size: inherit; line-height: inherit; font-style: italic;} .about-music .row { justify-content: center;} .about-music-paragraph p:not(:first-child) { margin-top: 2rem;} .about-music .col-md-7 .row .col-md-6:first-child .about-music-paragraph { max-width: 90%;} .about-music-content { position: relative; height: 100%;} .about-music-poster { position: absolute; bottom: 5%; width: 175%; height: auto; right: 5%; max-width: 40rem;} .about-music .outside-poster-container { position: relative;} .about-music .about-music-outside-poster { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; display: flex; justify-content: flex-end;} .about-music .about-music-outside-poster img { max-width: 32rem; object-fit: cover; object-position: left center;} .music-video { padding: 6rem 0 10rem;} .music-video-poster { position: relative; padding-top: 56.25%; transition: transform 0.5s;} .music-video-poster a:hover { cursor: url("./assets/images/slider-cursor.png"),auto;} /* .music-video-poster:hover { transform: scale(1.03);} */ .music-video-poster a { position: absolute; height: 100%; width: 100%; z-index: 1; top: 0; left: 0;} .music-video-poster img { position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: center; top: 0; left: 0; border-radius: 1rem;} .music-video-poster .play-btn { height: 5rem;} .music-video-poster .play-btn img { object-fit: contain;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - NFTs Section +++++++++++++++++++++++++++++++++++++++ */ .the-project .learn-nft-section { margin: -5.5rem 0; padding: 12rem 0; background: black; transform: skewY(-5deg);} .the-project .learn-nft-section > * { transform: skewY(5deg);} /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts { padding: 10rem 0; z-index: 2; position: relative;} .release-nfts .row { justify-content: center;} .release-nfts-card-grp { margin-top: -7.5rem; width: 118%; position: relative; left: 50%; transform: translateX(-50%);} .release-nfts-title { text-align: center;} .release-nfts-title h2 { font-style: italic; line-height: 5.8rem;} .release-nfts-poster { margin-top: 2rem; position: relative; } .release-nfts-poster img { aspect-ratio: 107 / 80; width: 856px; object-fit: cover; object-position: center;} .release-nfts-card { padding: 2rem; text-align: center; position: relative; max-width: 416px;} .release-nfts-card::before { content: ""; position: absolute; height: 100%; width: 100%; border: 3px solid #f4f4f4; top: 0; left: 0; border-radius: 1rem; background-color: white; z-index: 0; box-shadow: 1px 5px 16px -7px #000000b0;} .release-nfts-card-title { position: relative; z-index: 2;} .release-nfts-card-title h5 { font-style: italic; display: inline-block; font-weight: 900;} .release-nfts-paragraph { margin-top: 3rem; position: relative; z-index: 1;} .release-nfts-paragraph p span, .release-nfts-paragraph p a { font-size: inherit; line-height: inherit; font-weight: 600; font-style: italic; display: unset;} .release-nfts-paragraph p a { text-decoration: underline !important; transition-duration: 0.5s !important; font-style: normal; font-weight: inherit; color: inherit;} .release-nfts-paragraph p a:hover { text-decoration: none !important;} .release-nfts-card-grp > div:nth-child(2) .release-nfts-card { padding: 1.5rem;} .release-nfts-card-grp > div:nth-child(2) .release-nfts-card::before { transform: scale(1.1);} .release-nfts-paragraph p:not(:first-child) { margin-top: 1.5rem;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 54%; transform: rotate(-7deg) translate(-50%, -50%) scale(1.1); transform-origin: left bottom; left: 57%; } .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 59%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 42%; } /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Skewed Content +++++++++++++++++++++++++++++++++++++++ */ .skewed-sections-container { margin-top: -68rem; padding-top: 68rem; background-color: #f4f4f4; transform: skewY(-5deg); z-index: 1; position: relative;} .skewed-sections-container > section > * { transform: skewY(5deg);} .skewed-sections-container .environment { padding: 26rem 0 22rem; margin-top: -30rem; background: url("./assets/images/partner-roadmap-bg.png") no-repeat center / cover; transform: skewY(0); overflow: hidden;} .skewed-sections-container .environment::before, .skewed-sections-container .environment::after { position: absolute; content: ""; bottom: -2px; left: 0; width: 35%; height: 26%; background: url("./assets/images/temp/leaf1") no-repeat left bottom / contain;} .skewed-sections-container .environment::after { left: unset; right: 14%; bottom: -11rem; background: url("./assets/images/temp/leaf2") no-repeat right bottom / contain;} .skewed-sections-container .environment > * { transform: skewY(5deg); text-align: center;} .skewed-sections-container .environment .row { justify-content: center;} .skewed-sections-container .environment-title h2 { color: white;} .skewed-sections-container .environment-title h3 { color: #FBC407;} .skewed-sections-container .environment-title > * { font-style: italic; font-weight: 900;} .environment-paragraph h4 span { font-size: inherit; line-height: inherit; font-weight: inherit;} .environment-paragraph h4 { font-size: 1.875rem; line-height: 2.5rem; font-weight: 900; margin: 5rem 0 3rem; line-height: 4rem;} .environment-paragraph .mobile-text { display: none;} .environment-paragraph p span { font-size: inherit; font-style: italic; font-weight: 800; line-height: inherit;} .skewed-sections-container .nft-buy { padding: 15rem 0 25rem; background-color: white; transform: skewY(0); margin-top: -1px; position: relative; background-color: white;} .skewed-sections-container .nft-buy > * { transform: skewY(5deg);} .skewed-sections-container .nft-buy .row { justify-content: center;} .skewed-sections-container .nft-buy .nft-buy-poster-chain { position: absolute; width: 100%; height: 100%; top: 0; left: 0;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster { position: absolute;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.extra-small { left: -6%; top: 24%; width: 16%; transform: rotate(8deg); } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.small { left: 6%; top: 60%; width: 20%; transform: rotate(8deg);} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.medium { left: 50%; bottom: -14%; width: 24%; transform: translateX(-50%) scale(1.2);} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.large { right: 0; bottom: -15%; width: 24%; transform: scale(1.3) rotate(0deg);} .free-nft { padding: 15rem 0 12rem; position: relative;} .free-nft-poster { position: absolute; width: 40%; bottom: -6%; right: 0; max-width: 824px;} .free-nft-poster img { min-width: 100%; border-radius: 1rem;} .free-nft-title { margin-bottom: 4rem;} .free-nft-title .yellow-highlight { font-style: italic; font-weight: 900;} .free-nft-content p { margin-top: 2rem;} .free-nft-content p span, .drop-list-item p span { font-size: inherit; font-size: inherit;font-style: italic; font-weight: 700; line-height: inherit;} .drops { padding: 10rem 0 6rem; background-color: white; position: relative; z-index: 1;} .drops .row { justify-content: space-between;} .drop-list .drop-list-item:not(:first-child) { margin-top: 4rem;} .drop-list-item h6 { margin-bottom: 2rem; font-size: 1.625rem; line-height: 2rem; font-style: italic; font-weight: 900;} .drop-list-item p { padding-left: 3rem; position: relative;} .drop-list-item p::before { content: ""; position: absolute; width: 3.375rem; height: 1.625rem; top: 0; left: -2rem; background: url("./assets/images/yellow-cross-bars@2x.png") no-repeat center center / contain;} .drops .free-nft-content { margin-top: 3rem; height: 100%; position: relative;} /* .drops .drop-poster { position: absolute; bottom: 10%; right: 4rem; width: 40vw; text-align: right;} */ .drops .drop-poster { position: relative; margin-top: 3rem;} .drops .drop-poster img { position: relative; right:0; width: 45vw; max-width: 5000px; float: right;} .buy-nft { padding: 10rem 0 14rem; background: url("./assets/images/temp/buy-nft-bg_.png") no-repeat center bottom/cover;} .buy-nft .row { justify-content: space-between;} .buy-nft-title > * { font-style: italic; font-weight: 900;} .buy-nft-tagline { margin: 5rem 0 3rem;} .buy-nft-tagline h5 span { font-size: inherit; line-height: inherit; font-weight: inherit;} .buy-nft-tagline h5 { font-size: 1.875rem; line-height: 2.5rem; font-weight: 900;} .buy-nft-title h3 { color: #ffce06;} .buy-nft-content { text-align: center;} .buy-nft-paragraph p span, .buy-nft-paragraph p a { font-size: inherit; line-height: inherit; font-style: italic; font-weight: 800; display: unset;} .buy-nft-paragraph p a { font-style: normal; color: inherit; text-decoration: underline !important; font-weight: inherit; transition-duration: 0.5s;} .buy-nft-paragraph p a:hover { text-decoration: none !important;} .buy-nft-poster img { transform: scale(1.2);} .mobile-tagline { display: none ;} /* ############################################################ THE-Restoration ################################################################## */ .works { padding: 12rem 0; position: relative;} .works .container > .row { justify-content: center;} .works-heading { text-align: center;} .works-heading h1 { margin-bottom: 2rem; font-size: 6.0625rem;} .works-heading h5 { font-style: italic; font-weight: 900;} .works-heading h5 span { font-size: inherit; line-height: inherit; font-style: inherit; font-weight: inherit;} .works-description { margin: 8rem 0; display: flex; flex-direction: column;} .works-description .row { justify-content: space-evenly;} .works-description-paragraph p:not(:first-child) { margin-top: 2rem;} .works-description-paragraph p span { font-size: inherit; line-height: inherit; font-weight: 700; font-style: italic;} .works-description .film-strip { max-width: 2560px; margin-top: 10rem; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);} .works-description .film-strip img { min-width: 100%;} .works-description .wow-ten-year-stamp { position: absolute; width: 17%; left: 9%; top: -28%; max-width: 330px;} .works-description .result h5 { margin-top: 7rem; font-style: italic; font-weight: 900; text-align: center;} .works-poster-container-leftside, .works-poster-container-rightside { position: absolute; width: 50vw; min-height: 25%; right: 0; top: 16%; max-width: 960px;} .works-poster-container-leftside { right: unset; left: 0; top: unset; bottom: 16%;} .works-poster-container-rightside img:first-child { position: absolute; width: 55%; max-width: 530px; right: 0; top: 0;} .works-poster-container-rightside img:last-child { position: absolute; width: 65%; max-width: 625px; left: 0; bottom: 0;} .works-poster-container-leftside img:first-child { width: 56%; max-width: 540px;} .works-poster-container-leftside img:last-child { width: 86%; max-width: 825px;} .mobile-tagline, .mobile-tablet-poster, .works-paragraph h5:last-child { display: none;} /* ############################################################ THE-TEAM ################################################################## */ .do-it-well { padding: 12rem 0 16rem;} .the-team .row { justify-content: center;} .do-it-well-content { text-align: center;} .do-it-well-content > * { font-weight: 900; font-style: italic;} .do-it-well-content h2 { line-height: 5.5rem;} .team-skewed-sections > section { transform: skewY(-5deg);} .team-skewed-sections > section > * { transform: skewY(5deg);} .team-description { background-color: black; min-height: 28.125rem;} .team-description .yellow-cross-content { padding: 9rem 4rem; margin-top: -10rem; margin-inline: auto; max-width: 835px; text-align: center;} .team-description .yellow-cross-content h5 { font-size: 1.625rem; line-height: 2.3rem; font-style: italic; font-weight: 900;} .team-member-content { text-align: center;} .team-member-content h3 { max-width: 80%; margin: 0 auto; font-size: 3.8125rem; line-height: 4.5rem; font-weight: 900;} .team-member-content h2 { font-style: italic;} .team-member-content p { max-width: 70%; margin: 5rem auto 0; font-weight: 700; font-style: italic;} .team-row { padding: 16rem 0; position: relative; z-index: 1;} .team-row .row { width: 120%; position: relative; left: 50%; transform: translateX(-50%);} .team-member-logo { margin: 0 auto; position: relative; z-index: 2; width: 17.625rem; aspect-ratio: 1 / 0.7;} .team-member-card h5 { font-size: 1.5rem; line-height: 3rem;} .team-member-card .release-nfts-card { margin: 0 auto; max-width: 470px;} .team-member-card .release-nfts-paragraph { margin: 2rem auto 0; max-width: 90%;} .team-member-card .release-nfts-card::before { left: -5%; top: -3%; transform: rotate(6deg); transform-origin: left bottom;} .content-of-nft { margin-top: -18rem; padding: 16rem 0; background: url("./assets/images/partner-roadmap-bg.png") no-repeat center center / cover; text-align: center;} .content-of-nft-title { margin-bottom: 5rem;} .content-of-nft-title h2 { color: white; font-style: italic;} .content-of-nft-title h3 { color: #FBCB05; font-weight: 900;} .content-creator-identity { position: relative; text-align: right;} .content-creator-identity img { width: 55%;} .content-creator-identity span { font-size: 1.875rem; line-height: 2.8rem; font-weight: 900; position: absolute; width: fit-content; left: 50%; bottom: 0; transform: translateX(-50%);} .about-content-creator { margin-top: 2.5rem;} .about-content-creator p:not(:first-child) { margin-top: 2rem;} .about-content-creator p span { font-size: inherit; line-height: inherit; font-weight: 800; font-style: italic;} .content-of-nft .row .col-md-6:nth-child(2) .content-creator-identity { text-align: left;} .content-creator-info { max-width: 90%;} .content-of-nft .row .col-md-6:nth-child(2) .content-creator-info { margin-left: auto;} .team-row-container .team-row:nth-child(even) { background-color: #f4f4f4;} .team-row-container .team-row:nth-child(odd) .row { flex-direction: row-reverse;} .team-row-container .team-row:nth-child(odd) .row .team-member-card .release-nfts-card::before { left: 5%; top: -3%; transform: rotate(-6deg); transform-origin: right bottom; } .team-row-container .team-member-card { margin-bottom: -7rem;} .team-row-container .team-row:nth-child(odd) .row .team-member-card { margin-top: -11rem;} .team-row-container .team-row { padding: 10rem 0; transform: skewY(-5deg);} .team-row-container .team-row:last-child { padding: 10rem 0 15rem;} .team-row-container .team-row > * { transform: skewY(5deg);} /* ######################################### Mediq qurey From 1400 to 1900 ###################################################### */ @media (min-width: 1901px) and (max-width: 2560px){ .never-released-slider-container { margin-left: -19rem;} .learn-banner-navigation .nft-img-container { min-width: 95%;} } @media (min-width: 1400px) and (max-width: 1700px){ .collectibility .wolf { width: 322px; top: -6.2%;} } @media (min-width: 1400px) and (max-width: 1900px) { html { font-size: 15px;} section.counter-container.learn-banner-navigation.makeSticky { position: fixed; left: 0; z-index: 5; top: 89px; } section.counter-container.learn-banner-navigation.makeSticky + section { margin-top: 127.5px !important;} #about-the-music {height: 15%;} /* ############################################################ Typography ################################################################## */ .h2-md { font-size: 4.313rem; line-height: 5.313rem;} .h4-sm, h4, .h4 { font-size: 2rem; line-height: 3rem; } .h6-lg { font-size: 1.1rem; line-height: 1.375rem;} .h2-lg { font-size: 4.625rem; line-height: 5.625rem;} .h2-sm, h2, .h2 { font-size: 3.375rem; line-height: 4.375rem;} .p-lg, a, span { font-size: 1.1rem; } .h5-lg { font-size: 2rem; line-height: 3rem; } p, .p-sm { font-size: 0.9rem; line-height: 1.4rem; } /* ############################################################ Common-style ################################################################## */ .yellow-cross-bars::before { left: -5.5rem;} /* ############################################################ Header ################################################################## */ .topbar { top: -90%;} .home { margin-top: 60px;} .home .loader-container { transform: translateY(-60px);} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -80px 48px 26px rgba(0,0,0,1),inset 0px 80px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -80px 48px 26px rgba(0,0,0,1),inset 0px 80px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -80px 48px 26px rgba(0,0,0,1),inset 0px 80px 48px 26px rgba(0,0,0,1);} .topbar-btn { margin-right: 1rem;} .site-logo { width: 12.93rem; } .banner .yellow-bars { left: 5rem; bottom: 4rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 7rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 7rem; } .grow .topbar { margin-top: -60px;} .full-screen { right: 12.5%; } /* ############################################################ Counter ################################################################## */ .counter-box { margin-left: 0.3125rem; width: 3.625rem; height: 3.438rem;} .nft-img-container { max-width: 570px;} .own-page .nft-img-container { max-width: 500px;} .cross-bar { right: 450px;} /* ############################################################ Pen-Section ################################################################## */ .sell-me { top: 9.2rem;} .page-template-home footer .sell-me { top: 0.7rem;} /* ############################################################ About ################################################################## */ .about { background: url("./assets/images/yellow-square-bg@2x.png") no-repeat 101% 16%/15%;} .about-content-container { width: 46%; } .about-desc-part { width: 48%; } .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem;} .macbook-container { width: 68rem;} .about-desc-part p { margin: 1rem 0 0; } .fancybox-content { max-width: 900px !important; } /* ############################################################ Never-Released ################################################################## */ .never-released .slick-slide { width: 26.188rem !important; } .h5-md { font-size: 2rem; line-height: 2.5rem;} .never-released-slider-container { margin-left: -15rem; max-width: 1160px; width: 82.5%;} .never-released-title { margin-left: 4rem; max-width: 400px; } .never-released .slick-dots { bottom: 3rem; left: 81rem; } .play-btn { width: 4rem;} /* ############################################################ Iconic ################################################################## */ .iconic { padding: 38rem 0 27rem;} .iconic-access-item-icon { width: 11rem;} .iconic-sign-up { margin: 4rem 0 7rem; } .iconic-access-item-icon > div { width: 4rem; } .custom-input { min-height: 2.5rem; } input[type="submit"] , .form-discover-btn { font-size: 2rem; line-height: 3rem;} .iconic-radio-btn-container { margin-bottom: 5.5rem;} .iconic-buildings { max-height: 924px; bottom: 9.8rem; overflow: hidden;} .indication-board { width: 23%; bottom: 22rem; } .iconic-contact-form-container { min-height: 474px;} .iconic-access-item-content .h6-lg { font-size: 1.3rem; line-height: 1.5rem;} .iconic .wpcf7-form .wpcf7-response-output { bottom: -9rem; } /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY-Typography ################################################################## */ .h3-lg { font-size: 3.125rem; line-height: 3.3rem;} .h5-sm, h5, .h5 { font-size: 1.8rem; line-height: 2.125rem; } .never-seen-title .h3-lg { font-size: 4.125rem; line-height: 4.5rem; } .never-seen-title .discovery .counter-container .black-btn { margin-right: 14rem;} /* ############################################################ DISCOVERY-Header ################################################################## */ .page-template-discovery .join_btn-discover_btn-container .header-btn:last-child span { width: 1.8rem; } /* ############################################################ DISCOVERY-Banner ################################################################## */ .discovery .banner { max-height: 750px; min-height: 750px;} .discovery .banner-title .h2-md { font-size: 4rem; line-height: 4.2rem;} .discovery .banner-title .h1-lg { font-size: 13.625rem; line-height: 11rem;} .discovery .yellow-cross-content { min-height: 380px; max-width: 750px; } .discovery .banner-title { gap: 4rem; bottom: 28%;} .discovery .banner-bottom-cross-section { margin-top: -12rem; } /* ############################################################ DISCOVERY-Slider ################################################################## */ .discovery .never-released-slider-container { margin-left: -26rem; width: 95.5%; max-width: 1340px;} .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 260px; } .discovery .never-released .slick-dots { left: 92.5rem; } .discovery .video-dallies .slide-overlay p { -webkit-line-clamp: 6; } .discovery .slide-overlay p { -webkit-line-clamp: 2;} .discovery .never-released-slide-content .slide-overlay-content .h5-md { font-size: 1.5rem; line-height: 1.5rem;} .discovery .never-released-slide-content .slide-overlay-content a { padding: 0.5rem;} /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 440px; max-width: 20rem; max-height: 250px; } .own-page .cross-bar { right: 370px;} .discovery .market-place-mac, .own-page .market-place-mac { max-width: 250px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 2.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 15rem;} /* ############################################################ DISCOVERY-Video-dallies ################################################################## */ .discovery .video-dallies { background: url("./assets/images/yellow-square-bg@2x.png") no-repeat 104% 63% / 12%;} .discovery .video-dallies-video .slide-overlay-content .h5-md { font-size: 2.8rem; line-height: 3rem; } .discovery .video-dallies-video .slide-overlay-content p { font-size: 1.5rem; line-height: 2rem;} /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0; background-color: black;} .page-template-privacypolicy_terms-condition .site-header .topbar, .error404 .site-header .topbar { top: -63%;} /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} /* ############################################################ LEARN-PAGE ################################################################## */ .learn-banner-navigation .cross-bar { right: -1rem; top: -2.5rem; max-width: 15rem;} /* ############################################################ OWN-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .yellow-cross-content { max-width: 650px; padding: 8.5rem 6rem;} .own-card-section { top: 1rem; width: 44%;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .winning-prize-poster { max-width: 85%; margin-left: auto;} .win-prize-name h3 { font-size: 2.5rem; line-height: 3rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 2rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .first-nft-coming-content { max-width: 80%;} /* ############################################################ PARTNER-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap-image { top: -6%; right: -6%; } .partner-roadmap-image-contianer .partner-roadmap-image:last-child { left: -6%; top: -9%; } /* ############################################################ THE-PROJECT ################################################################## */ .the-project .historical-img-container .historical-img:nth-child(2) { width: 25%; top: 50%; left: -2%;} .the-project .historical-img-container .historical-img:last-child { width: 35%;} .the-project .historical .partner-paragraph { max-width: 85%; margin-left: auto;} .historical .container .row .col-md-6:nth-of-type(2) .partner-paragraph { margin-left: unset; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility { padding: 22rem 0;} .collectibility .collectibility-title { max-width: 79%;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 20rem 0 16rem;} .about-music .about-music-outside-poster img { max-width: 24rem; } .about-music .about-music-paragraph { max-width: 90%; } .music-video { padding: 6rem 0 0 ;} /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-title h2 { line-height: 5rem;} .release-nfts-card { padding: 3rem; max-width: 375px; } .release-nfts-card-grp { width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 54%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 64%; } .free-nft { padding: 15rem 0 10rem;} .buy-nft { padding: 10rem 0 9rem; } /* ############################################################ THE-RESTORATION ################################################################## */ .works-poster-container-leftside, .works-poster-container-rightside { width: 44vw;} /* ############################################################ THE-TEAM ################################################################## */ .do-it-well-content h2 { line-height: 4.5rem; } .do-it-well-content h3 { line-height: 3.5rem;} .team-row .row { width: 110%;} .team-row { padding: 12rem 0 16rem;} .team-row-container .team-row { padding: 9rem 0;} .collectibility::after { background: url("./assets/images/piano.png") repeat-x center center/52%; bottom: -22.64%; z-index: 1; } } /* ######################################### Mediq qurey From 1200 to 1399 ###################################################### */ @media (min-width:1200px) and (max-width:1399px){ html { font-size: 14px;} #about-the-music {height: 16%;} section.counter-container.learn-banner-navigation.makeSticky { position: fixed; left: 0; z-index: 5; top: 88px; } section.counter-container.learn-banner-navigation.makeSticky + section { margin-top: 119px !important;} /* ############################################################ Typography ################################################################## */ .h1-sm, h1, .h1 { font-size: 5rem; line-height: 6rem; font-weight: 700; } .h2-md { font-size: 4.06rem; line-height: 5.06rem;} .h2-lg { font-size: 4.625rem; line-height: 4.7rem;} .h2-sm, h2, .h2 { font-size: 3.375rem; line-height: 4.375rem; } .h4-sm, h4, .h4 { font-size: 2.163rem; line-height: 2.563rem; } .h4-lg { font-size: 2rem; line-height: 2.5rem;} .p-lg, a, span { font-size: 1rem; } .h5-md { font-size: 2.0625rem; line-height: 2.063rem; } .h3-lg { font-size: 3.125rem; line-height: 3.5rem; } .h6-lg { font-size: 1.3rem; line-height: 1.375rem; } .custom-input { min-height: 3rem;} .input-icon { width: 3rem;} .input-area input { padding: 0.5rem !important;} /* ############################################################ Sell-me ################################################################## */ .sell-me .h4-lg { font-size: 3rem; line-height: 3.5rem;} .sell-me { top: 10rem; right: 22rem; max-width: 250px; } .page-template-home footer .sell-me { top: 1rem; } /* ############################################################ Header ################################################################## */ .grow .topbar { margin-top: -56px;} .site-logo { margin: 0; width: 13.93rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 6rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 6rem; } .topbar-btn { margin-right: 1rem;} .topbar { top: -86%;} .home { margin-top: 56px;} .home .loader-container { transform: translateY(-56px);} /* ############################################################ Banner ################################################################## */ .banner { height: auto;} .banner .yellow-bars { left: 4.5rem;} .full-screen { right: 13%; } .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -60px 48px 26px rgba(0,0,0,1),inset 0px 60px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -60px 48px 26px rgba(0,0,0,1),inset 0px 60px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -60px 48px 26px rgba(0,0,0,1),inset 0px 60px 48px 26px rgba(0,0,0,1);} /* ############################################################ About ################################################################## */ .about-title { margin-left: 2.5rem; } .yellow-cross-bars::before { left: -5.5rem;} .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem; } .about .yellow-btn { margin-top: 2rem; } .about-desc-part p { margin: 1.5rem 0 0; } .macbook-container { width: 55rem; right: -15rem; } .about-desc-part { width: 48%; } .about .yellow-btn { padding: 0.5rem 1.5rem !important; } .fancybox-content { max-width: 700px !important; } /* ############################################################ Counter ################################################################## */ .counter-box { margin-left: 0.3125rem; width: 3.625rem; height: 3.438rem;} .nft-img-container { max-width: 470px;} .nft-img { max-width: 60%; } .cross-bar { right: 360px; max-width: 20rem; } /* ############################################################ never-released ################################################################## */ .never-released-slider-container { max-width: 1085px; width: 90.5%; } .never-released .slick-slide { width: 25.188rem !important; } .slide-overlay a { bottom: 1rem; right: 1rem;} .play-btn { width: 4rem;} .slide-overlay { border-radius: 0.3rem;} .never-released-title { margin-left: 2rem; max-width: 356px;} .never-released .slick-dots { left: 79rem; } /* ############################################################ Iconic ################################################################## */ .iconic { padding: 27rem 0;} .iconic-buildings { bottom: 2.8rem; } .bull { bottom: 3rem;} .indication-board { right: 0; bottom: 23rem;} .iconic-sign-up { margin: 4rem 0 7rem; } .iconic-access-item-icon > div { width: 4rem; } .iconic-access-item-icon { width: 10rem; } .iconic-radio-btn-container { margin-top: 2rem; } input[type="submit"] , .form-discover-btn { padding: 0.5rem 4rem; font-size: 2rem; line-height: 3rem;} .iconic-radio-btn-container { margin-bottom: 4.5rem;} .form-discover-btn { top: 20%;} .iconic-access-grp { margin: 2rem 0 3rem;} .input-area input { width: calc(100% - 3.5rem); font-size: 1rem; line-height: 2rem;} .input-area input::placeholder { font-size: 1rem; line-height: 2rem; } .radio-btn-content p { font-size: 0.8rem; line-height: 1.3rem;} input[type="checkbox"]::after { left: 11px; top: 6px;} .iconic-contact-form-container { min-height: 401px;} .iconic .wpcf7-form .wpcf7-response-output { bottom: -8rem; } /* ############################################################ footer ################################################################## */ .footer-content { padding: 14.75rem 0 5rem; } /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY- Banner ################################################################## */ .discovery .banner { max-height: 900px;} /* ############################################################ DISCOVERY- Crossbar ################################################################## */ .discovery .yellow-cross-content { min-height: 320px; position: relative; max-width: 650px; } .discovery .yellow-cross-content .h5-lg { font-size: 2rem; line-height: 3rem; } .discovery .never-released-slider-container { max-width: 1260px; margin-left: -27rem; padding-top: 0rem; width: 105%; } .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 200px; } .discovery .never-released .slick-dots { left: 93.5rem; } .slide-overlay p { -webkit-line-clamp: 2;} /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 350px; max-width: 20rem; max-height: 250px; } .discovery .market-place-mac, .own-page .market-place-mac { max-width: 250px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 2.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 9rem; } .discovery .counter-container .black-btn h5 , .own-page .counter-container .black-btn h5 { font-size: 1.6rem; line-height: 3rem;} /* ############################################################ DISCOVERY-Video-dallies ################################################################## */ .discovery .video-dallies { background: url("./assets/images/yellow-square-bg@2x.png") no-repeat 104% 60% / 12%;} .never-seen-title .h3-sm, h3, .h3 { font-size: 3.5rem; line-height: 4.9rem; } /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0; background-color: black;} .error404 .site-header .topbar { top: -59%;} .privacy-terms-page h1 { font-weight: 800;} /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} /* ############################################################ LEARN-PAGE ################################################################## */ .learn-banner-navigation .cross-bar { max-width: 13rem; } /* ############################################################ LEARN- About ################################################################## */ .learn-about-content h4 { margin-left: 3rem; } /* ############################################################ OWN-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .yellow-cross-content { padding: 7rem 4rem; max-width: 600px;} .own-card-section { width: 40%; top: 1rem;} .own-card-section .own-card-phone { max-width: 350px; } .own-page .banner { height: 100vh;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - NFTs +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft-tagline p { max-width: 400px;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .winning-prize-poster { max-width: 85%; margin-left: auto;} .win-prize-name h3 { font-size: 2.5rem; line-height: 3.5rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 2rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .winning-prize-hover-content { padding: 3rem; gap: 1rem;} /* ############################################################ PARTNER-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER-BANNER +++++++++++++++++++++++++++++++++++++++ */ .partner-page .yellow-cross-content { padding: 7rem 3rem;} /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER-ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap { padding-top: 22rem;} .partner-roadmap-title .white-outline { margin-top: 3rem;} .partner-roadmap-image-contianer .partner-roadmap-image:last-child { left: -8%; top: -6%; transform: rotate(-30deg); } /* ############################################################ THE-PROJECT ################################################################## */ .the-project .historical-img-container .historical-img:nth-child(2) { width: 30%; top: 50%; left: -4%;} .the-project .historical-img-container .historical-img:last-child { width: 35%;} .the-project .historical .partner-paragraph { max-width: 85%; margin-left: auto;} .historical .container .row .col-md-6:nth-of-type(2) .partner-paragraph { margin-left: unset; } .the-project .historical-title h1 { font-weight: 900;} .the-project .historical .partner-paragraph { margin-top: 5rem; gap: 1.5rem;} .the-project .ipad-container { max-width: 80%; margin: 3rem auto 0;} .the-project .ipad-container .wow-stamp { right: -9%; top: -15%;} .the-project .ipdad-poster { width: 123%; top: -1%;} .the-project .ipad-border-pen { width: 120%;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility .wolf { width: 276px; top: -6.1%;} .collectibility { padding: 20rem 0;} .collectibility::after { background: url("./assets/images/piano.png") repeat-x center center/52%; bottom: -22.64%; z-index: 1; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 20rem 0 14rem;} .about-music .about-music-outside-poster img { max-width: 23rem; } .about-music .about-music-paragraph { max-width: 80%; } .music-video { padding: 6rem 0 0 ;} /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-title h2 { line-height: 5rem;} .release-nfts-card { padding: 2rem; max-width: 375px; } .release-nfts-card-grp { width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 49%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 62%; } .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 60%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 45%; } .skewed-sections-container .nft-buy { padding: 15rem 0 20rem; } .free-nft { padding: 12rem 0 7rem; } .buy-nft { padding: 7rem 0; } .buy-nft-poster img { transform: scale(1.1);} /* ############################################################ THE-RESTORATION ################################################################## */ .works-title h1 { font-weight: 800;} .works-poster-container-rightside { top: 18%; width: 45vw; } .works-poster-container-leftside { width: 45vw;} .works-poster-container-rightside img:last-child { width: 72%;} /* ############################################################ THE-TEAM ################################################################## */ .do-it-well { padding: 8rem 0 16rem; } .do-it-well-content .h3-lg { font-size: 3.125rem; line-height: 3.8rem; } .do-it-well-content h2 { line-height: 4rem; } .team-member-content h3 { margin: 0 auto; font-size: 3rem; line-height: 3.5rem; max-width: 70%; } .content-of-nft-title h3 { font-size: 3.5rem; line-height: 3.5rem;} .team-member-card .release-nfts-card { max-width: 410px; } .team-row .row { width: 110%;} } /* ######################################### Mediq qurey From 992 to 1199 ###################################################### */ @media (min-width:992px) and (max-width:1199px){ html { font-size: 12px;} .h4-xlg { font-size: 2.8rem; } #about-the-music {height: 16%;} section.counter-container.learn-banner-navigation.makeSticky { position: fixed; left: 0; z-index: 5; top: 79.15px; } section.counter-container.learn-banner-navigation.makeSticky + section { margin-top: 102px !important;} /* ############################################################ Typography ################################################################## */ .h1-sm, h1, .h1 { font-size: 4.9rem; line-height: 5rem; font-weight: 700; } .h2-md { font-size: 3.9rem; line-height: 4.06rem;} .h4-sm, h4, .h4 { font-size: 2rem; line-height: 3rem;} .h2-sm, h2, .h2 { font-size: 3.375rem; line-height: 4.375rem; } .h2-lg { font-size: 3.625rem; line-height: 4rem; } .h5-md { font-size: 2.0625rem; line-height: 2.063rem; } .h3-lg { font-size: 3.125rem; line-height: 3.3rem; } .h4-lg { font-size: 2rem; line-height: 3rem; } .h5-lg { font-size: 1.8rem; line-height: 2.5rem; } .h6-lg { font-size: 1.2rem; line-height: 1.375rem; } .black-btn.paper-curl-right::after { bottom: 2px;} /* ############################################################ Header ################################################################## */ .grow .topbar { margin-top: -48px;} .site-logo { margin: 0; width: 14.93rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 6rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 6rem; } .topbar { top: -81%;} .home { margin-top: 48px;} .home .loader-container { transform: translateY(-48px);} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 70px 48px 26px rgba(0,0,0,1);} /* ############################################################ Banner ################################################################## */ .banner { height: auto; } .topbar-btn { margin-right: 3rem;} .rect,.full-screen { width: 3rem; height: 3rem;} .banner .widget_nav_menu a, .footer-navigation-wrapper li a { border-width: 2px;} .footer-navigation-wrapper a span img { max-width: 20px; max-height: 20px;} .counter-container { min-height: 10.5rem; } .banner .yellow-bars { left: 4.5rem;} .full-screen { right: 12.5%; } /* ############################################################ Counter ################################################################## */ .counter-box { margin-left: 0.3125rem; width: 3.625rem; height: 3.438rem;} .nft-img-container { max-width: 370px;} .nft-img { max-width: 60%; } .cross-bar { right: 290px; max-width: 20rem; } /* ############################################################ About ################################################################## */ .pen-head, .pen-tail { width: 875px;} .sell-me { top: 12.5rem; right: 18rem; } .page-template-home footer .sell-me { top: 0.1rem; } .sell-me::before { top: -4.5rem;} .sell-me .h4-lg { font-size: 3rem; line-height: 3.5rem; } /* ############################################################ About ################################################################## */ .about { padding: 23rem 0 8rem; } .about-title { margin-left: 2.5rem; } .yellow-cross-bars::before { left: -5.5rem;} .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem; } .about .yellow-btn { margin-top: 2rem; } .about-desc-part p { margin: 1.5rem 0 0; } .macbook-container { width: 55rem; right: -15rem; } .about-desc-part { width: 48%; } .about .yellow-btn { padding: 0.5rem 1.5rem !important; } .fancybox-content { max-width: 600px !important; } /* ############################################################ never-released ################################################################## */ .never-released-slider-container { width: 90.5%; } .never-released .slick-slide { width: 25.188rem !important; } .slide-overlay a { bottom: 1rem; right: 1rem;} .play-btn { width: 4rem;} .slide-overlay { border-radius: 0.3rem;} .never-released-title { margin-left: 4rem; max-width: 277px;} .never-released .slick-dots { left: 78rem; } .never-released-slider-container { padding-top: 1rem; max-width: 895px;} .never-released .slick-dots { bottom: 4rem; } /* ############################################################ Iconic ################################################################## */ .iconic { padding: 27rem 0;} .iconic-buildings { bottom: 2.8rem; } .bull { bottom: 3rem;} .indication-board { right: 0; bottom: 23rem;} .iconic-sign-up { margin: 3rem 0 5rem; } .iconic-access-item-icon > div { width: 3rem; } .iconic-access-item-icon { width: 9rem; } .iconic-radio-btn-container { margin-top: 2rem; } input[type="submit"], .form-discover-btn { padding: 0.5rem 3rem; font-size: 1.7rem; line-height: 2rem;} .iconic-radio-btn-container {margin-bottom: 4.5rem;} .form-discover-btn { top: 20%;} .iconic-access-grp { margin: 2rem 0 3rem;} .input-area input { width: calc(100% - 4.5rem); font-size: 1rem; line-height: 2rem;} .input-area input::placeholder { font-size: 1rem; line-height: 2rem; } .radio-btn-content p { font-size: 0.8rem; line-height: 1.3rem;} .radio-btn-content { width: calc(100% - 3rem);} input[type="checkbox"]::after { left: 9px; top: 5px;} .wpcf7-spinner { bottom: -4rem; } .iconic-contact-form-container { min-height: 351px;} .iconic-access-item-content .h6-lg { font-size: 1.4rem; line-height: 1.5rem;} .iconic .wpcf7-form .wpcf7-response-output { bottom: -9rem; } /* ############################################################ footer ################################################################## */ .footer-content { padding: 12.75rem 0 5rem; } .menu-footer-nav-menu-container ul li { margin-inline: 2rem; } /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY-Header ################################################################## */ .page-template-discovery .topbar-btn { margin-right: 2rem;} /* ############################################################ DISCOVERY-Banner ################################################################## */ .discovery .banner { height: 100vh; min-height: 700px; max-height: 850px;} /* ############################################################ DISCOVERY- Crossbar ################################################################## */ .discovery .yellow-cross-content { min-height: 280px; max-width: 550px; } .discovery .yellow-cross-content .h5-lg { font-size: 2rem; line-height: 3rem; } .discovery .never-released-slider-container { max-width: 1072px; margin-left: -27rem; padding-top: 0rem; width: 108%; } .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 200px; } .discovery .never-released .slick-dots { left: 93.5rem; } .discovery .slide-overlay p { -webkit-line-clamp: 2;} /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 280px; max-width: 20rem; max-height: 180px; } .discovery .market-place-mac, .own-page .market-place-mac { max-width: 200px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 2.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 9rem; } .discovery .counter-container .black-btn h5, .own-page .counter-container .black-btn h5 { font-size: 1.6rem; line-height: 3rem;} /* ############################################################ DISCOVERY-Video-dallies ################################################################## */ .discovery .video-dallies { background: none;} .discovery .video-dallies .slide-overlay p { -webkit-line-clamp: 6; } .never-seen-title .h3-lg { font-size: 4.125rem; line-height: 4.3rem; } .never-seen-title .h3-sm, h3, .h3 { font-size: 3.5rem; line-height: 4.9rem; } /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0; background-color: black;} .privacy-terms-page h1 { font-weight: 800;} .error404 .site-header .topbar { top: -56%;} /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} .error-page-content { font-size: 6.9rem; line-height: 7rem; font-weight: 800;} /* ############################################################ LEARN-PAGE ################################################################## */ .learn-banner-navigation .cross-bar { right: -1rem; top: -2.5rem; max-width: 13rem; } .learn-banner-menu ul { gap: 2.5rem;} /* ############################################################ LEARN-About ################################################################## */ .learn-about-desc p { max-width: 100%;} .learn-about-desc { margin-top: 2rem; } .learn-about-section-container .learn-about-section:nth-child(2n) .row .learn-about-small-poster { left: -18%; } /* ############################################################ OWN-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .yellow-cross-content { padding: 5rem 4rem; max-width: 500px; min-height: 385px;} .own-card-section { width: 40%; top: 1rem;} .own-card-section .own-card-phone { max-width: 300px; } .own-page .banner { height: 100vh;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - NFTs +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft-tagline p { max-width: 400px;} .own-buy-nft .h3-lg,.own-leaderboard .leaderboard-title .h3-lg { margin-bottom: -1.5rem; } /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .winning-prize-poster { max-width: 85%; margin-left: auto;} .win-prize-name h3 { font-size: 3rem; line-height: 3.5rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 2.5rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .winning-prize-hover-content { padding: 3rem; gap: 1rem;} /* ############################################################ PARTNER-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap-image { top: -2%;} .partner-roadmap-image-contianer .partner-roadmap-image:last-child { left: -6%; top: -4%; } /* ############################################################ THE-PROJECT ################################################################## */ .the-project .historical-img-container .historical-img:nth-child(2) { width: 30%; top: 50%; left: -4%;} .the-project .historical-img-container .historical-img:last-child { width: 35%;} .the-project .historical .partner-paragraph { max-width: 85%; margin-left: auto;} .historical .container .row .col-md-6:nth-of-type(2) .partner-paragraph { margin-left: unset; } .the-project .historical-title h1 { font-weight: 900;} .the-project .historical .partner-paragraph { margin-top: 5rem; gap: 1.5rem;} .the-project .ipad-container { max-width: 80%; margin: 3rem auto 0;} .the-project .ipad-container .wow-stamp { right: -9%; top: -15%;} .the-project .ipdad-poster { width: 123%; top: -1%;} .the-project .ipad-border-pen { width: 120%;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility .wolf { width: 220px; top: -5.7%;} .collectibility-title h3 { line-height: 4.5rem;} .collectibility { padding: 20rem 0;} .collectibility::after { background: url("./assets/images/piano.png") repeat-x center center/52%; bottom: -22.64%; z-index: 1; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 20rem 0 16rem;} .about-music .about-music-outside-poster img { max-width: 23rem; } .about-music .about-music-paragraph { max-width: 80%; } .music-video { padding: 6rem 0 0rem; } /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-title h2 { line-height: 5rem;} .release-nfts-card { padding: 2rem; max-width: 375px; } .release-nfts-card-grp { width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 49%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 62%; } .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 60%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 45%; } .skewed-sections-container .nft-buy { padding: 15rem 0 18rem; } .free-nft { padding: 12rem 0 3rem; } .buy-nft { padding: 8rem 0 6rem; } .buy-nft-poster img { transform: scale(1.1); } /* ############################################################ THE-RESTORATION ################################################################## */ .works { padding: 12rem 0 8rem;} .works-poster-container-leftside, .works-poster-container-rightside { width: 43vw;} .works-poster-container-rightside { top: 15%;} .works-poster-container-rightside img:last-child { width: 72%;} /* ############################################################ THE-TEAM ################################################################## */ .do-it-well { padding: 8rem 0 16rem; } .do-it-well-content .h3-lg { font-size: 3.125rem; line-height: 3.8rem; } .do-it-well-content h2 { line-height: 4rem; } .team-member-content h3 { margin: 0 auto; font-size: 3rem; line-height: 3.5rem; max-width: 70%; } .content-of-nft-title h3 { font-size: 3.5rem; line-height: 3.5rem;} .team-member-card .release-nfts-card { max-width: 350px; } .team-row .row { width: 110%;} .the-team .yellow-cross-content { min-height: 350px; } } /* ######################################### Mediq qurey From 768 to 991 ###################################################### */ @media (min-width: 768px) and (max-width: 991px){ html { font-size: 12px;} #about-the-music {height: 15%;} section.counter-container.learn-banner-navigation.makeSticky { position: fixed; left: 0; z-index: 5; top: 72px; } section.counter-container.learn-banner-navigation.makeSticky + section { margin-top: 102px !important;} /* ############################################################ Typography ################################################################## */ .h1-sm, h1, .h1 { font-size: 4rem; line-height: 4.1rem; font-weight: 700; } .h1-md { font-size: 7.625rem; line-height: 8rem; } .h2-md { font-size: 3rem; line-height: 4rem;} .h2-lg { font-size: 4.625rem; line-height: 5.625rem; } .h4-sm, h4, .h4 { font-size: 1.5rem; line-height: 2rem;} .h6-lg { font-size: 1.1rem; line-height: 1.3rem;} .h2-sm, h2, .h2 { font-size: 3.375rem; line-height: 4.375rem; } .h4-lg { font-size: 2rem; line-height: 3rem;} .h5-lg { font-size: 2rem; line-height: 3rem; } .black-btn.paper-curl-right::after { bottom: 2px;} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1);} /* ############################################################ Header ################################################################## */ .grow .topbar { margin-top: -48px;} .site-logo { margin: 0; width: 12.93rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 4rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 4rem; } .join_btn-discover_btn-container a { min-width: 9.125rem; } .join_btn-discover_btn-container .header-join-btn span { width: 1.3rem; height: 1.3rem; transform: translateY(-55%); left: 13%; } .topbar { top: -91%;} .join_btn-discover_btn-container { margin-left: 1.5rem; } .header-discover-btn span { top: -1px; } /* ############################################################ Banner ################################################################## */ .banner { height: auto;} .topbar-btn { margin-right: 1rem;} .rect, .full-screen { width: 3rem; height: 3rem;} .banner .widget_nav_menu a, .footer-navigation-wrapper li a { border-width: 2px;} .footer-navigation-wrapper a span img { max-width: 20px; max-height: 20px;} .counter-container { min-height: 9.5rem; } .banner .yellow-bars { width: 5rem; left: 3.5rem; bottom: 4rem; } .full-screen { right: 13.5%; } .home { margin-top: 48px;} .home .loader-container { transform: translateY(-48px);} /* ############################################################ Counter ################################################################## */ .counter-box { margin-left: 0.3125rem; width: 2.625rem; height: 2.438rem;} .nft-img-container { max-width: 280px; padding: 2.125rem 2.125rem 2.125rem 8rem;} .nft-img { max-width: 60%; } .cross-bar { right: 200px; max-width: 18rem; } /* Pen section */ .pen-box > div { height: 80px;} .pen-head { width: 750px;} .pen-head a { top: 8px; left: 24%;} .pen-tail { width: 750px; } /* ############################################################ About ################################################################## */ /* .pen-head, .pen-tail { width: 675px;} */ .sell-me { top: 11.7rem; right: 10rem; } .sell-me::before { top: -3.5rem;} .sell-me .h4-lg { font-size: 3rem; line-height: 3.5rem; } .page-template-home footer .sell-me { top: 1.2rem; } /* ############################################################ About ################################################################## */ .about { padding: 22rem 0 5rem; background: url(./assets/images/yellow-squre-bg-mobile@2x.png) no-repeat right 21%/12%} .about-title { margin-left: 2.5rem; } .yellow-cross-bars::before { left: -5.5rem;} .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem; } .about .yellow-btn { margin: 2rem auto 0; } .about-desc-part p { margin: 1rem 0 0; } .macbook-container { display: none; } .about-desc-part { width: 100%; } .about .yellow-btn { padding: 0.5rem 1.5rem !important; } .macbook-container_mobile-tablet { margin-top: 3rem; display: block;} .about-description { flex-direction: column;} .about-content-container { padding-inline: 1rem; width: 100%;} .about-description .about-desc-part:last-child { margin-top: -8rem;} .about-content-container { display: flex; flex-direction: column; align-items: center;} .fancybox-content { max-width: 500px !important;} .radio-btn-content { width: calc(100% - 3rem);} /* ############################################################ never-released ################################################################## */ .never-released { flex-direction: column-reverse;} .never-released-slider-container { margin-left: 0; width: 100%; } .never-released-title { max-width: 720px; margin: 0 auto; padding: 0 1rem;} .never-released-title h3 { max-width: 50%;} .never-released .slick-dots { bottom: -5rem; left: 3rem; } /* ############################################################ Iconic ################################################################## */ .iconic { padding: 27rem 0;} .iconic-buildings { bottom: 20.5rem; max-height: 558px;} .bull { bottom: 3rem;} .indication-board { right: 0; bottom: 23rem;} .iconic-sign-up { margin: 3rem 0 7rem; } .iconic-access-item-icon > div { width: 3rem; } .iconic-access-item-icon { width: 9rem; } .iconic-radio-btn-container { margin-top: 2rem; } input[type="submit"],.form-discover-btn { padding: 0.5rem 3rem; font-size: 1.7rem; line-height: 2rem;} .iconic-radio-btn-container { margin-bottom: 3.5rem;} .form-discover-btn { top: 20%;} .iconic-access-grp { margin: 2rem 0 3rem;} .input-area input { width: calc(100% - 4rem); font-size: 1rem; line-height: 2rem;} .input-area input::placeholder { font-size: 1rem; line-height: 2rem; } .radio-btn-content p { font-size: 0.8rem; line-height: 1.3rem;} .custom-input { min-height: 2.5rem;} .input-icon { width: 3.1rem; height: 100%;} .trending-line::before { content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(to top, black 70%, rgba(0, 0, 0, 0) 100%); bottom: 0; left: 0; z-index: -1;} .iconic .h2-lg { font-size: 3.625rem; line-height: 4.625rem; } .indication-board { bottom: 30rem; width: 33%; } input[type="checkbox"]::after { left: 9px; top: 4px; } .iconic-radio-btn-container input[type="checkbox"] + span .wpcf7-not-valid-tip { bottom: -4.5rem;} .wpcf7-spinner { bottom: -4rem; } .iconic-contact-form-container { min-height: 311px;} .iconic-access-item-content .h6-lg { font-size: 1.3rem; line-height: 1.4rem;} /* ############################################################ Partnership ################################################################## */ .partnership { padding: 0rem 0 6rem; } .partnership-slide { padding: 1.5rem;} .partnership-slide img { height: 50px;} /* ############################################################ footer ################################################################## */ .footer-content { padding: 14.75rem 0 5rem; } .menu-footer-nav-menu-container ul li { margin-inline: 1.8rem; } .menu-footer-nav-menu-container ul { margin: 4rem 0;} .privacy-terms a { margin-inline: 1.2rem; } .banner .widget_nav_menu a { padding: 0.6rem; width: 3rem; height: 3rem;} /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY-Header ################################################################## */ .page-template-discovery .topbar-btn { margin-right: 2rem;} .page-template-discovery .join_btn-discover_btn-container { margin-left: 1rem; } .page-template-discovery .yellow-btn { padding: 0.7rem 1.5rem !important; } /* ############################################################ DISCOVERY-Banner ################################################################## */ .discovery .banner { height: 100vh; min-height: 700px; } .discovery .banner-title .h2-md { font-size: 4rem; line-height: 4.5rem; } .discovery .banner-title { gap: 3rem;} .discovery .banner-bottom-cross-section::before { top: 12%;} /* ############################################################ DISCOVERY- Crossbar ################################################################## */ .discovery .yellow-cross-content { min-height: 250px; max-width: 400px; padding: 4rem;} .discovery .yellow-cross-content .h5-lg { font-size: 2rem; line-height: 3rem; } .discovery .never-released-slider-container { max-width: 1072px; margin-left: -27rem; padding-top: 0rem; width: 108%; } .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 350px; } .discovery .never-released-title h3 { max-width: 100%; } .discovery .never-released .slick-dots { left: 8rem; bottom: -4rem;} .discovery .slide-overlay p { -webkit-line-clamp: 2;} .discover-banner-social-menu nav { margin-top: 13rem; } /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 200px; max-width: 15rem; max-height: 160px; top: -1rem; } .own-page .cross-bar { right: 180px;} .own-page .nft-img-container { max-width: 260px;} .discovery .market-place-mac, .own-page .market-place-mac { max-width: 170px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 2.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 3rem; } .discovery .counter-container .black-btn h5, .own-page .counter-container .black-btn h5 { font-size: 1.2rem; line-height: 2rem;} .discovery .slick-active ~ .slick-slide .never-released-slide-content::before { opacity: 0.7; } /* ############################################################ DISCOVERY-Video-Dallies ################################################################## */ .video-dallies .row { flex-direction: column;} .video-dallies-content > div { margin-top: 3rem; max-width: 300px;} .video-dallies-content { padding-top: 0; max-width: 80%; margin: 0 auto;} .video-dallies .play-btn { width: 5rem;} .video-dallies .slide-overlay p { -webkit-line-clamp: 5;} .video-dallies { background: none;} .discovery .never-seen-title { margin: 0 0 4rem 13rem; } .discovery .never-seen-gallery { grid-gap: 7px; } .discovery .never-seen-gallery .slide-overlay-content .h5-md { font-size: 1.5rem; line-height: 2rem; } .discovery .never-seen-gallery .slide-overlay-content a { font-size: 1rem; line-height: 1rem;} .never-seen-gallery li .btn-arrow { margin-left: 0.5rem; width: 1.5rem; } /* ############################################################ DISCOVERY-Slider ################################################################## */ .discovery .never-released { padding: 0rem 0 4rem; } .discovery .never-released .slick-slide { width: 19.188rem !important; } .discovery .never-released-slider-container { max-width: 100%; margin-left: 0; } .discovery .never-released-title { margin: 0 0 2rem 7rem; } .never-seen-title .h3-sm, h3, .h3 { font-size: 2.5rem; line-height: 4.9rem; } /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0px; background-color: black;} .privacy-terms-page h1 { font-size: 5rem; line-height: 6rem; font-weight: 800;} /* .privacy-terms-page { padding-top: 16rem; } */ .error404 .site-header .topbar { top: -63%;} .privacy-terms-page .builder-content { margin-top: -12rem; padding: 12rem 0 4rem; } /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} .error-page-content h1 { font-size: 6.9rem; line-height: 7rem; font-weight: 800;} /* ############################################################ LEARN-PAGE ################################################################## */ .learn-banner-navigation .cross-bar { right: -1rem; top: -2.5rem; max-width: 13rem; } .learn-banner-menu ul { gap: 1.5rem;} .learn-banner-menu ul li a { font-size: 1rem; line-height: 1.2rem;} /* ############################################################ LEARN-About ################################################################## */ .learn-about-title h3 { font-size: 4rem;} .learn-about-section .row { gap: 5rem;} .learn-about-small-poster { width: 70%; top: 45%; left: 20% !important;} .learn-about-poster-container .yellow-btn { position: relative; margin: 18rem auto 0; left: unset; right: unset !important;} .learn-about-section-container .learn-about-section:first-child .row, .learn-about-section-container .learn-about-section:last-child .row { gap: 20rem;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-poster-container .yellow-btn, .learn-about-section-container .learn-about-section:last-child .row .learn-about-poster-container .yellow-btn { margin: 5rem auto 0;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-small-poster, .learn-about-section-container .learn-about-section:last-child .row .learn-about-small-poster { width: 70%; top: -44%; right: -5%; } /* ############################################################ LEARN-NFT ################################################################## */ .learn-nft-section .learn-nft-img { max-width: 180px; } /* ############################################################ OWN-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .yellow-cross-content { padding: 4rem 3rem; max-width: 385px; min-height: 350px; gap: 2rem;} .own-card-section { width: 40%; top: 1rem;} .own-card-section .own-card-phone { max-width: 300px; top: -16%;} .own-page .banner { height: 100vh;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem; } .own-buy-nft-title .h2-md { font-size: 4rem; line-height: 4.5rem; } .own-buy-nft-tagline p { max-width: 405px; } .own-page .counter-container { margin: 8rem 0 5rem; } /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .win-prize-name h3 { font-size: 3.5rem; line-height: 3.5rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 2.5rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .winning-prize-hover-content { padding: 3rem; gap: 1rem;} .usflag-poster { display: none;} .own-leaderboard .row { margin-top: 7rem; justify-content: space-between; flex-direction: column; align-items: center; gap: 12rem;} .winning-prize-list { gap: 16rem;} .win-prize-name { position: absolute; left: 0; bottom: unset; top: -9rem; } .leaderboard-mobile-btn { display: flex !important; margin: 5rem auto;} .winning-prize-poster .winning-poster-border { min-width: 104%; min-height: 118%; top: -1.9rem; left: -0.9rem; } .own-leaderboard li:nth-child(3n) .winning-poster-border { min-width: 107%; min-height: 119%; left: -2.2rem; top: -2rem; } .leaderboard-mobile-btn .btn-arrow img { filter: invert(1);} /* ############################################################ PARTNER-PAGE ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER-ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-page .yellow-cross-content { padding: 4rem 3rem; max-width: 500px;} .partner-page .yellow-cross-content .h5-lg { font-size: 2rem;} /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER-ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-page .partner-roadmap-content .h5-lg { font-size: 1.6rem; line-height: 3rem; } .partner-roadmap-card { padding: 2.5rem 1.5rem; } .partner-roadmap-image { width: 35%; top: 5%;} .partner-roadmap-image-contianer .partner-roadmap-image:last-child { left: -8%; top: 0%; } /* ############################################################ THE-PROJECT ################################################################## */ .the-project .historical-img-container .historical-img:nth-child(2) { width: 30%; top: 50%; left: -4%;} .the-project .historical-img-container .historical-img:last-child { width: 35%;} .the-project .historical .partner-paragraph { max-width: 85%; margin-left: auto;} .historical .container .row .col-md-6:nth-of-type(2) .partner-paragraph { margin-left: unset; } .the-project .historical-title h1 { font-weight: 900;} .the-project .historical .partner-paragraph { margin-top: 5rem; gap: 1.5rem;} .the-project .ipad-container { max-width: 80%; margin: 3rem auto 0;} .the-project .ipad-container .wow-stamp { right: -9%; top: -15%;} .the-project .ipdad-poster { width: 123%; top: -1%;} .the-project .ipad-border-pen { width: 120%;} .the-project .historical-img-container { display: none;} .the-project .historical { padding: 6rem 0 0rem; } .the-project .learn-banner { min-height: 440px;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility .wolf { width: 160px; top: -4.2%;} .collectibility-title h3 { line-height: 4.5rem; font-size: 3.5rem;} .collectibility .collectibility-title { max-width: 91%; } .collectibility { padding: 20rem 0 16rem;} .collectibility::after { background: url("./assets/images/piano.png") repeat-x center center/52%; bottom: -18.64%; z-index: 1; } .collectibility::before { -webkit-clip-path: polygon(0 55%, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0 55%, 100% 20%, 100% 100%, 0% 100%); } .collectibility::before, .collectibility::after { content: ""; position: absolute; height: 20%; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About the Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 20rem 0 14rem; } .about-music-title h3 { font-size: 4.5rem; line-height: 4.9rem;} .about-music-poster { margin: 2rem auto; position: unset; width: 100%; } .about-music-outside-poster { display: none !important;} .music-video { padding: 6rem 0 0rem; } /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-title h2 { font-size: 4rem; line-height: 4.5rem;} .release-nfts-title h3 { font-size: 3.125rem; line-height: 4.3rem;} .release-nfts-card { margin: 8rem auto 0; padding: 3rem; max-width: 330px; } .release-nfts-card-grp { margin-top: -11rem; width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 49%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 62%; } .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 60%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 45%; } /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Skewed Container +++++++++++++++++++++++++++++++++++++++ */ .skewed-sections-container .nft-buy { padding: 10rem 0 15rem; } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.extra-small { left: -8%; top: 24%; width: 20%; transform: rotate(8deg); } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.small { left: 2%; top: 64%; width: 26%; transform: rotate(8deg); } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.medium { left: 50%; bottom: -14%; width: 28%; transform: translateX(-50%) scale(1.2) rotate(-5deg); } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.large { right: -3%; bottom: -15%; width: 27%; transform: scale(1.3) rotate(-16deg); } .free-nft-poster { position: absolute; width: 44%; bottom: -6%; right: -1rem; max-width: 824px; } .free-nft { padding: 9rem 0 2rem; } .drops { padding: 10rem 0 12rem; } .drops .row { justify-content: center;} .drops .free-nft-content { margin-top: unset; margin-bottom: 5rem;} .drop-poster { display: none; } .buy-nft { padding: 6rem 0 14rem; } .buy-nft .row { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 5rem;} .buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem;} .buy-nft-title .h2-md { font-size: 4.5rem; line-height: 5rem; } /* ############################################################ THE-RESTORATION ################################################################## */ .works-heading h1 { margin-bottom: 2rem; font-size: 5.0625rem; line-height: 6rem; font-weight: 800;} .works-description .row { flex-direction: column; gap: 2rem;} .mobile-tablet-poster { text-align: center; margin: 2rem 0; display: block;} .works-poster-container-rightside, .works-poster-container-leftside { display: none;} .works-description { margin: 0 0 8rem;} .works-description .mobile-tablet-poster img:first-child { position: absolute; width: 60%; left: 0; top: -8%;} .works-description .mobile-tablet-poster img:last-child { position: absolute; right: -8%; width: 68%; bottom: -5%; transform: rotate(45deg) scale(1.4);} .works-description .mobile-tablet-poster { min-width: 100vw; position: relative; top: 10%; left: 50%; transform: translateX(-50%); min-height: 613px; } /* ############################################################ THE-TEAM ################################################################## */ .do-it-well-content { font-size: 3rem; line-height: 3.5rem;} .do-it-well-content h2 { margin-top: 1rem; line-height: 4.5rem; font-size: 4rem; } .do-it-well-content h3 { font-size: 3.5rem; line-height: 4rem;} .team-row .row { width: 100%; position: unset; flex-direction: column; align-items: center; gap: 5rem; transform: none;} .team-member-content h3 { max-width: 70%; margin: 0 auto; font-size: 3rem; line-height: 3.5rem; font-weight: 900; } .team-member-content h2 { font-size: 4rem; line-height: 5rem;} .team-row { padding: 14rem 0;} .content-creator-identity span { font-size: 1.2rem; line-height: 2.5rem;} .team-row-container .team-row:nth-child(odd) .row { flex-direction: column-reverse; gap: 16rem; } .team-row-container .team-row:nth-child(odd) .row .team-member-card { margin-top: -14rem; } .team-row-container .team-row { padding: 10rem 0 16rem; } .team-row-container .team-row:last-child { padding: 10rem 0;} } /* ######################################### Mediq qurey From 576 to 767 ###################################################### */ @media (min-width: 576px) and (max-width: 767px){ html { font-size: 11px;} #about-the-music {height: 10%;} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1);} /* ############################################################ Typography ################################################################## */ .h1-sm, h1, .h1 { font-size: 5rem; line-height: 5.2rem; font-weight: 700; } .h2-md { font-size: 4rem; line-height: 5rem;} .h4-sm, h4, .h4 { font-size: 2rem; line-height: 2.5rem;} .h6-lg { font-size: 1.5rem; line-height: 1.7rem;} .h2-lg { font-size: 4.625rem; line-height: 5.625rem; } .h2-sm, h2, .h2 { font-size: 3.375rem; line-height: 4.375rem; } .p-lg, a, span { font-size: 1.3rem; line-height: 1.5rem;} .h4-lg { font-size: 1.875rem; line-height: 1.875rem;} .h5-lg { font-size: 1.8rem; line-height: 2rem;} .black-btn.paper-curl-right::after { bottom: 2px;} /* ############################################################ Header ################################################################## */ .grow .topbar { margin-top: -44px;} .site-logo { margin: 0; width: 15.93rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 4rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 4rem; } .join_btn-discover_btn-container a { min-width: 9.125rem; } .join_btn-discover_btn-container .header-join-btn span { transform: translateY(0%); left: 15px; top: 5px} .header-discover-btn span { top: -3px;} .topbar-text { display: none;} .topbar .black-btn { margin-right: 1rem;} .topbar .container { justify-content: flex-end;} .topbar { top: -76%;} .header-content nav:not(.mobile-menu) { display: none;} .mobile-menu-btn { display: block; position: absolute; right: 2rem; width: 2rem; top: 50%; transform: translateY(-50%);} .mobile-menu { position: absolute; width: 100%; top: 100%; background-color: black;} .mobile-menu .primary-menu-phone-container { width: 100%;} .mobile-menu ul li { margin: 2rem 0; text-align: center;} .mobile-menu ul li a { display: inline-block;} .mobile-menu { padding: 2rem 0 5rem; position: fixed !important; width: 100%; top: 0 !important; left: 0!important; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url("./assets/images/iconic-cloud-image_.jpg") no-repeat center center / cover;} .mobile-menu .sub-menu { margin-left: 0 !important; border: none !important;} .mobile-menu .mobile-menu-logo { max-width: 50%;} .mobile-menu .sub-menu li > a { padding: 0 !important; display: inline-block !important;} .mobile-menu .join_btn-discover_btn-container { margin-left: 0;} .mobile-menu .footer-navigation { display: block !important;} .mobile-menu .privacy-terms { display: block; margin: 0 !important; text-align: center;} .mobile-menu .privacy-terms a:not(:first-child) { margin-top: 2rem;} .sub-menu-toggle > span { display: none;} .mobile-menu .primary-menu-phone-container { width: 100%;} .mobile-menu ul li { margin: 2rem 0; text-align: center;} .mobile-menu ul li a { display: inline-block;} .home { margin-top: 44px;} .home .banner { aspect-ratio: 1 / 1.3;} .home .loader-container { transform: translateY(-44px);} /* ############################################################ Banner ################################################################## */ .banner { height: auto; min-height: 500px;} .home .banner { min-height: 100% !important;} .banner .banner-video { height: 100%;} /* .page-template-partner .banner .banner-video { left: 6%;} */ .banner::after { display: none;} .topbar-btn { margin-right: 0rem;} .rect, .full-screen { width: 3rem; height: 3rem;} .banner .widget_nav_menu a, .footer-navigation-wrapper li a { border-width: 2px;} .footer-navigation-wrapper a span img { max-width: 20px; max-height: 20px;} .counter-container { min-height: 9.5rem; } .banner .banner-title { bottom: 24%; width: 100%; max-width: 400px;} .banner .widget_nav_menu { bottom: 20px; left: 16px; transform: none;} .banner .widget_nav_menu ul { display: block;} .banner .widget_nav_menu li { margin: 0.5rem 0;} .mobile-join-btn { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); margin: 0;} .rect , .full-screen { bottom: 20px; right: 16px; top: unset; left: unset; margin: 0;} .full-screen { left: unset; bottom: 65px;} .mobile-join-btn { display: block;} .banner .yellow-bars { display: none;} /* ############################################################ Counter ################################################################## */ .counter { margin-top: 2rem;} .counter-box { margin-left: 0.3125rem; width: 3.625rem; height: 3.438rem;} .nft-img-container { max-width: 200px; padding: 0 4.5rem 5rem 0; justify-content: flex-end; align-items: flex-end; min-height: 230px; top: 1rem; } .nft-img { max-width: 60%; } .counter-container .container { display: flex; flex-direction: column; align-items: center; justify-content: center;} .mobile-nft-img { margin: 2rem 0; display: block; max-width: 15rem;} .nft-img-container .nft-img { display: none;} .nft-img-container::before { background: url("./assets/images/mobile-nft-bg.png") no-repeat right center/contain;} .downside-arrow { max-width: 34%; } .cross-bar { display: none;} .pen-box > div { height: 80px;} .pen-head { width: 750px; left: 70%;} .pen-head a { top: 8px; left: 24%;} .pen-tail { width: 750px; right: 30%} /* ############################################################ sell-me ################################################################## */ .sell-me .h4-lg { font-size: 2.875rem; line-height: 3.5rem; } .sell-me { top: 13rem; right: 4rem; } .sell-me::before { top: -2.5rem;} .page-template-home footer .sell-me { top: 1.8rem; } /* ############################################################ About ################################################################## */ .about { padding: 22rem 0 2rem; background: url(./assets/images/yellow-squre-bg-mobile@2x.png) no-repeat right 21%/14%} .about-title { margin-left: 2.5rem; margin-bottom: 2rem;} .yellow-cross-bars::before { left: -5.5rem;} .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem; } .about .yellow-btn { margin: 2rem auto 0; } .about-desc-part p { margin: 1.5rem 0 0; } .macbook-container { display: none; } .about-desc-part { width: 100%; } .about .yellow-btn { padding: 0.5rem 1.5rem !important; } .macbook-container_mobile-tablet { margin-top: 3rem; display: block;} .about-description { flex-direction: column;} .about-content-container { padding-inline: 1rem; width: 100%;} .about-description .about-desc-part:last-child { margin-top: -6rem;} .about-content-container { display: flex; flex-direction: column; align-items: center;} .fancybox-content { max-width: 450px !important;} /* ############################################################ never-released ################################################################## */ .never-released { flex-direction: column-reverse;} .never-released-slider-container { margin-left: 0; width: 100%; } .never-released-title { max-width: 540px; margin: 0 auto; padding: 0 1rem;} .never-released-title h3 { max-width: 50%;} .never-released .slick-dots { bottom: -5rem; left: 3rem; } /* ############################################################ Iconic ################################################################## */ .iconic { padding: 36rem 0 20rem; overflow: hidden;} .upper-clouds { min-width: 1100px;} .iconic-buildings { bottom: 45.5rem; max-height: 422px;} .bull { bottom: 2rem;} .indication-board { right: 0; bottom: 23rem;} .iconic-sign-up { margin: 3rem 0 20rem; } .iconic-access-item-icon > div { width: 3rem; } .iconic-access-item-icon { width: 9rem; } .iconic-radio-btn-container { margin-top: 2rem; } input[type="submit"] , .form-discover-btn { padding: 0.5rem 3rem; font-size: 1.7rem; line-height: 2rem;} .iconic-radio-btn-container { margin-top: 3.5rem;} .form-discover-btn { top: 20%;} .iconic-access-grp { margin: 2rem 0 3rem;} .input-area input { width: calc(100% - 4rem); font-size: 1rem; line-height: 2rem;} .input-area input::placeholder { font-size: 1rem; line-height: 2rem; } .radio-btn-content p { font-size: 0.8rem; line-height: 1.3rem;} .custom-input { min-height: 2.5rem;} .input-icon { width: unset; height: 100%;} .trending-line::before { max-height: 608px; content: ""; position: absolute; width: 100%; height: 182%; background: linear-gradient(to top, black 90%, rgba(0, 0, 0, 0) 100%); bottom: 0; left: 0; z-index: -1;} .iconic .h2-lg { font-size: 3.625rem; line-height: 4.625rem; } .indication-board { bottom: 48rem; width: 45%; } .half-width-input, .one-third-width-input { width: 90%; } .input-area { justify-content: center; margin: 0 !important; flex-wrap: wrap;} .input-area > div { margin: 1rem 0;} .custom-input p, .custom-input .wpcf7-form-control-wrap { width: 100%;} .input-area input::placeholder , .input-area input { font-size: 1.27rem; line-height: 2rem; } .iconic-access-grp { flex-wrap: wrap; justify-content: space-evenly;} .iconic-access-item { margin: 1rem 0; width: 40%; } .iconic-radio-btn-container { max-width: 90%; margin-inline: auto;} input[type="checkbox"]::after { left: 8px; top: 3px; } .iconic-access-item-icon:hover::after { display: none;} .radio-btn-content { width: calc(100% - 3rem);} .iconic-radio-btn-container input[type="checkbox"] + span .wpcf7-not-valid-tip { bottom: -6rem; left: 1.5rem;} .wpcf7-spinner { bottom: 1rem; right: 9rem; left: unset;} .iconic-contact-form-container { min-height: 553px;} .iconic-access-item-content .h6-lg { font-size: 1.4rem; line-height: 1.5rem;} .light-cloud2 { max-width: 50%; } .iconic .wpcf7-form .wpcf7-response-output { bottom: -7rem; } /* ############################################################ Partnership ################################################################## */ .partnership { padding: 2rem 0 6rem;} .partnership-slide { padding: 1rem;} .partnership .h2-lg { font-size: 3.625rem; line-height: 5.625rem; } .partnership .slick-dots { bottom: -50px;} /* ############################################################ footer ################################################################## */ .footer-content { padding: 10.75rem 0 5rem; } .menu-footer-nav-menu-container ul li { margin-inline: 1.8rem; } .menu-footer-nav-menu-container ul { margin: 4rem 0;} .privacy-terms a { margin-inline: 1.2rem; } .banner .widget_nav_menu a { padding: 0.6rem; width: 3rem; height: 3rem;} /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY-Header ################################################################## */ .page-template-discovery .topbar-btn { margin-right: 2rem;} .page-template-discovery .join_btn-discover_btn-container { margin-left: 1rem; display: none !important;} .page-template-discovery .yellow-btn { padding: 0.7rem 1.5rem !important; } /* ############################################################ DISCOVERY-Banner ################################################################## */ .discovery .banner { height: 100vh; min-height: 700px; } .discovery .banner-title .h2-md { font-size: 4rem; line-height: 4.5rem; max-width: 400px; text-align: center;} .discovery .banner-title { gap: 1rem;} .page-template-discovery .banner::after { display: block;} .discover-banner-social-menu { display: none;} .discovery.banner .widget_nav_menu a { width: 4rem; height: 4rem; } .discover-banner-mobile-menu { display: block;} .discovery .widget_nav_menu { position: absolute;} .discovery .banner .widget_nav_menu { bottom: 20%;} .discovery .banner .widget_nav_menu a { width: 4rem; height: 4rem; border-color: #ffb900;} .discovery .banner-title { flex-direction: column; align-items: center; bottom: 30%;} .discovery .h1-lg { font-size: 16.09rem; line-height: 20rem;} .discovery .banner .widget_nav_menu a:hover { background-color: black; } .discovery .banner .widget_nav_menu a:hover img { filter: unset;} .page-template-discovery .discovery .banner .widget_nav_menu { bottom: 20%; left: 50%; transform: translateX(-50%); } .page-template-discovery .banner .widget_nav_menu ul { display: flex; } .page-template-discovery .banner .widget_nav_menu li { margin: 0 0.5rem; } /* ############################################################ DISCOVERY- Crossbar ################################################################## */ .discovery .yellow-cross-content { margin: 0 auto; min-height: 250px; max-width: 400px; padding: 4rem;} .discovery .yellow-cross-content .h5-lg { font-size: 2rem; line-height: 3rem; } .discovery .never-released-slider-container { max-width: 1072px; margin-left: -27rem; padding-top: 0rem; width: 108%; } .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 310px; } .discovery .never-released-title h3 { max-width: 100%; } .discovery .never-released .slick-dots { left: 93.5rem; } .discovery .slide-overlay p { -webkit-line-clamp: 2;} .discover-banner-social-menu nav { margin-top: 13rem; } /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 280px; max-width: 20rem; max-height: 180px; } .discovery .market-place-mac, .own-page .market-place-mac { max-width: 200px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 3.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 0rem; } .discovery .counter-container .black-btn h5, .own-page .counter-container .black-btn h5 { font-size: 2rem; line-height: 2.5rem;} .discovery .slick-active ~ .slick-slide .never-released-slide-content::before { opacity: 0.7; } /* ############################################################ DISCOVERY-Video-Dallies ################################################################## */ .video-dallies .row { flex-direction: column;} .video-dallies-content > div { margin-top: 3rem; max-width: 300px;} .video-dallies-content { padding-top: 0; max-width: 80%; margin: 0 auto;} .video-dallies .play-btn { width: 5rem;} .video-dallies .slide-overlay p { -webkit-line-clamp: 5;} .video-dallies { background: none;} .discovery .video-dallies .slide-overlay { border-radius: 0.5rem;} .never-seen-title .h3-sm, h3, .h3 { font-size: 2rem; line-height: 4rem; } .discovery .never-seen-title { display: inline-block; margin: 0 0 3rem 10rem; } .discovery .never-seen-gallery { grid-template-columns: repeat(2, 1fr); grid-gap: 10px;} .discovery .never-seen-gallery li:nth-child(12n - 9) { grid-column: 1 / span 1; grid-row-end: span 1; padding-top: 100%;} .discovery .never-seen-gallery li:nth-child(12n - 8) { grid-row-end: span 1; padding-top: 100%;} .discovery .never-seen-title .yellow-cross-bars::before { left: -4.5rem; } .discovery .never-seen-gallery li:nth-child(12n - 9) .h5-md {font-size: 1.8rem; line-height: 2rem;} .discovery .never-seen-gallery li:nth-child(12n - 9) .p-lg, .discovery .never-seen-gallery li:nth-child(12n - 9) a { font-size: 1.3rem; line-height: 1.5rem;} /* ############################################################ DISCOVERY-Slider ################################################################## */ .discovery .counter-container { margin: 20rem 0 26rem; } .discovery .never-released { padding: 0rem 0 4rem; } .discovery .never-released .slick-slide { width: 33.188rem !important; } .discovery .never-released-slider-container { max-width: 100%; margin-left: 0; } .discovery .cross-bar { right: 200px; max-width: 15rem; max-height: 160px; top: -1rem; } .discovery .never-released-title { margin: 0 0 2rem 7rem; } .discovery .never-released .slick-dots { left: 3rem; bottom: -4rem;} .discovery .never-released .play-btn { width: 4rem;} .discovery .mobile-nft-img { margin: 0; display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; max-width: 100%; background-color: #323232; top: 100%; left: 0; min-height: 200px;} .discovery .mobile-nft-img img { max-width: 15rem; margin: 0 auto;} .discovery .counter-container { min-height: 200px;} .discovery .counter-container .topbar-btn { margin: 0; width: 100%;} .discovery .market-place-mac { max-width: 250px; left: 50%; top: -80%; bottom: unset; transform: translateX(-50%);} .discovery .nft-img-container { top: 85%; } /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0px; background-color: black;} .privacy-terms-page h1 { font-size: 5rem; line-height: 6rem; font-weight: 800;} .error404 .site-header .topbar { top: -52%;} .privacy-terms-page .builder-content { padding: 9rem 0 4rem; } .privacy-terms-page .banner .container { height: 75vh; } /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} .error-page-content h1 { font-size: 6.9rem; line-height: 7rem; font-weight: 800;} /* ############################################################ LEARN-PAGE ################################################################## */ .learn-banner-navigation .counter-container { min-height: 5.5rem; } .learn-banner-navigation .cross-bar { right: -1rem; top: -2.5rem; max-width: 12rem; } .learn-banner-navigation .nft-img-container { min-width: 100%; padding: 0; top: 0; min-height: 100%;} .learn-banner-menu { display: none;} .learn-banner-navigation .cross-bar { display: block;} .learn-banner-navigation .nft-img-container::before { content: ""; position: absolute; height: 100%; width: 100%; background: url("./assets/images/counter-black-bg.png") no-repeat left center/cover; right: 0; top: 0; z-index: 0; } /* ############################################################ LEARN-About ################################################################## */ .learn-about-title h3 { font-size: 4rem;} .learn-about-section .row { gap: 5rem;} .learn-about-small-poster { width: 70%; top: 45%; left: 20% !important;} .learn-about-poster-container .yellow-btn { position: relative; margin: 18rem auto 0; left: unset; right: unset !important;} .learn-about-section-container .learn-about-section:first-child .row, .learn-about-section-container .learn-about-section:last-child .row { gap: 20rem;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-poster-container .yellow-btn, .learn-about-section-container .learn-about-section:last-child .row .learn-about-poster-container .yellow-btn { margin: 5rem auto 0;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-small-poster, .learn-about-section-container .learn-about-section:last-child .row .learn-about-small-poster { width: 70%; top: -44%; right: -5%; } /* ############################################################ LEARN-NFT ################################################################## */ .learn-nft-section .learn-nft-img { max-width: 180px; } .learn-nft-section { padding: 12rem 0 5rem;} /* ############################################################ OWN-PAGE ################################################################## */ .desktop-iframe { display: none;} .phone-iframe { display: block;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .banner { height: 100vh;} .own-page .banner .banner-title { bottom: 50%; text-align: center; left: 50%; transform: translate(-50%,50%);} .own-page .banner-title .h1-md { margin: 0;} .own-page .yellow-cross-content { max-width: 450px; margin: 0 auto; text-align: center;} .own-page .yellow-cross-section { margin-bottom: 6rem;} .own-page .yellow-cross-content .h5-lg { font-size: 2.8rem; line-height: 3.5rem; } .own-card-section { position: relative; width: 100%; display: flex; justify-content: center; min-height: 400px; border-radius: 0; background: url("./assets/images/own-card-bg-mobile.png") no-repeat center top/cover;} .own-card-section .own-card-phone { left: unset; top: 2rem ; max-width: 360px; top: -32%;} .own-page .yellow-cross-content p { line-height: 1.8rem; font-size: 1.5rem; } /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem; } .own-buy-nft-title .h2-md { font-size: 4rem; line-height: 4.5rem; } .own-buy-nft-tagline p { max-width: 405px; } .own-buy-nft { padding: 20rem 0 5rem;} .own-buy-nft .h3-lg { margin-bottom: 0; } .first-nft-coming-content { text-align: center; row-gap: 2.5rem;} .first-nft-coming .row { justify-content: center; row-gap: 5rem;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - counter-container +++++++++++++++++++++++++++++++++++++++ */ .own-page .counter-container .black-btn { flex-direction: column; text-align: center; max-width: 200px;} .own-page .counter-container { background: none;} .own-page .counter-container::before { position: absolute; content: ""; height: 100%; width: 100%; background: url("./assets/images/counter-bg@2x.png") no-repeat center center/cover; transform: skewY(-4deg); z-index: -1;} .own-page .counter-container { min-height: 30.5rem; } .own-page .market-place-mac { min-width: 300px; left: 50%; bottom: unset; top: -12rem; transform: translateX(-50%);} .own-page .counter-container .topbar-btn { width: 100%; height: 100%; align-items: flex-end; padding-bottom: 5rem;} .own-page .counter-container .downside-arrow, .own-page .mobile-nft-img { display: none;} .own-page .nft-img-container { min-width: 100px; padding: 0; transform: skewY(-4deg);} .own-page .nft-img-container::before { top: -2.5rem; background-position: right bottom;} .own-page .cross-bar { display: block; right: 2rem; max-width: 20rem; max-height: 180px; bottom: 0; top: unset; transform: scale(1.5) skewY(-2deg); } .own-page .counter-container { margin: 16rem 0 8rem; } .own-page .black-btn h5 { font-weight: 800;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .winning-prize-poster { max-width: 85%; margin: 0 auto;} .win-prize-name h3 { font-size: 3.5rem; line-height: 3.5rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 2.5rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .winning-prize-hover-content { padding: 3rem; gap: 1rem;} .usflag-poster { display: none;} .own-leaderboard .row { margin-top: 7rem; justify-content: space-between; flex-direction: column; align-items: center; gap: 12rem;} .winning-prize-list { gap: 16rem;} .win-prize-name { position: absolute; left: 0; bottom: unset; top: -9rem; } .leaderboard-mobile-btn { display: flex !important; margin: 5rem auto;} .winning-prize-poster .winning-poster-border { min-width: 104%; min-height: 118%; top: -1.9rem; left: -0.9rem; } .own-leaderboard li:nth-child(3n) .winning-poster-border { min-width: 107%; min-height: 119%; left: -2.2rem; top: -2rem; } .leaderboard-mobile-btn .btn-arrow img { filter: invert(1);} /* ############################################################ PARTNER-PAGE ################################################################## */ .partner-page .partner-paragraph { margin-top: 2rem;} .partner-page .banner .banner-title { text-align: left;} .partner-page .banner-title .h1-md { margin-left: 2rem; font-size: 6.188rem; line-height: 8.5rem; } /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap-image-contianer .partner-roadmap-image:last-child { display: none;} .partner-roadmap { margin-top: 20rem;} .partner-roadmap-image { position: absolute; height: auto; width: 100%; max-width: 40rem; top: -32%; right: -14%; } .partner-roadmap-grp .row { flex-direction: column-reverse; align-items: center;} .partner-roadmap-grp .row:nth-child(even) { flex-direction: column-reverse;} .partner-roadmap-grp > .row:not(:first-child) { margin-top: 5rem; } .partner-roadmap-grp .row .partner-roadmap-content { padding-bottom: 0;} .partner-roadmap-grp .row .partner-roadmap-content > h5 { display: none;} .partner-roadmap-card > h5 { display: block; text-align: center !important;} .partner-roadmap-content { position: relative; z-index: 0; margin-top: -3rem;} .partner-roadmap-tickmark span::before { display: none;} .partner-roadmap-card { padding: 3.5rem; } .partner-roadmap-grp { margin-top: 3rem; padding: 6rem 0 18rem;} .partner-roadmap-grp::after { height: 6%;} .partner-page .partnership { background: none;} /* ############################################################ THE-PROJECT ################################################################## */ .the-project .banner .banner-title { text-align: right; bottom: 3rem; right: 3rem;} .the-project .historical-title { margin-bottom: 3rem;} .the-project .historical-title h1 { font-weight: 900; line-height: 6rem;} .the-project .historical-title h5 { line-height: 3rem;} .the-project .historical .partner-paragraph { margin-top: 2rem; gap: 2rem;} .the-project .ipad-container { max-width: 80%; margin: 8rem auto 0;} .the-project .historical-img-container { display: none;} .the-project .historical { padding: 6rem 0 0rem; } .the-project .learn-banner { min-height: 360px;} .the-project .ipad-border-pen { width: 120%;} .the-project .ipad-container .wow-stamp { right: -5%; width: 43%;} .the-project .ipdad-poster { left: -6%; width: 123%; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility .wolf { display: none;} .collectibility-title h3 { line-height: 4.5rem; font-size: 3.5rem;} .collectibility .collectibility-title { max-width: 94%; } .collectibility .drop-item { flex-direction: row-reverse;} .collectibility .drop-item > div { width: calc(100% / 3);} .collectibility .drop-item .drop-symbol span { margin: 0 auto;} .collectibility .drop-item .drop-date { text-align: left;} .collectibility .drop-timeline > .row { gap: 5rem;} .collectibility .drop-timeline::before, .collectibility .drop-timeline::after { width: 1.5rem; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } .collectibility .drop-timeline::after { height: 32%; top: 0; transform: translate(-50%,0);} .collectibility::after { bottom: -17%;} .collectibility::before, .collectibility::after { height: 16%;} .collectibility { padding: 20rem 0 10rem;} /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About the Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 15rem 0 150%;} .about-music-title h3 { font-size: 4.5rem; line-height: 4.9rem;} .about-music-poster { margin: 2rem auto; position: unset; width: 100%; } .about-music-outside-poster { display: none !important;} .about-music-title h3 { color: white; } .music-phone-bg-container { display: block;} /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-card-title .h5-lg { font-size: 2.5rem; line-height: 3rem; } .release-nfts-title h2 { font-size: 4rem; line-height: 4.5rem;} .release-nfts-title h3 { font-size: 3.125rem; line-height: 4.3rem;} .release-nfts-card { margin: 8rem auto 0; padding: 3rem; max-width: 330px; } .release-nfts-card-grp { margin-top: -11rem; width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 49%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 62%; } .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 60%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 45%; } .environment-title h3 { font-size: 2.5rem;} .environment-title .h2-md { font-size: 4rem; line-height: 4.5rem; } .environment-paragraph .desktop-text { display: none;} .environment-paragraph .mobile-text { display: block;} .environment-paragraph h4 { line-height: 3rem;} .skewed-sections-container .environment::before, .skewed-sections-container .environment::after { width: 40%;} .skewed-sections-container .environment::after { right: -8%; bottom: -7rem; } .skewed-sections-container .nft-buy { padding: 9rem 0 26rem; } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.extra-small, .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.small { display: none;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.medium { right: unset; left: 0%; bottom: 6%; width: 50%; transform: translateX(-50%) scale(1.2) rotate(-5deg); max-width: 368px;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.large { right: -16%; bottom: -15%; width: 65%; transform: scale(1.3) rotate(-6deg); max-width: 523px;} .free-nft { padding: 12rem 0 28rem; } .free-nft .row { justify-content: center;} .free-nft-title .h5-lg { font-size: 2.5rem; line-height: 4rem;} .free-nft-poster { position: absolute; width: 90%; bottom: -12%; right: -1rem; max-width: 518px; } .drops { padding: 10rem 0 12rem; } .drops .row { justify-content: center;} .drops .free-nft-content { margin-top: unset; margin-bottom: 5rem;} .drop-poster { display: none;} .buy-nft { padding: 6rem 0 14rem; } .buy-nft .row { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 5rem;} .buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem;} .buy-nft-title .h2-md { font-size: 4.5rem; line-height: 5rem; } /* ############################################################ THE-RESTORATION ################################################################## */ .works-heading h1 { margin-bottom: 2rem; font-size: 5.0625rem; line-height: 6rem; font-weight: 800;} .works-description .row { flex-direction: column; gap: 2rem;} .mobile-tablet-poster { text-align: center; margin: 2rem 0; display: block;} .works-poster-container-rightside, .works-poster-container-leftside { display: none;} .works-description { margin: 0 0 8rem;} .works-description .mobile-tablet-poster img:first-child { position: absolute; width: 65%; left: 0; top: -8%;} .works-description .mobile-tablet-poster img:last-child { position: absolute; right: -8%; width: 81%; bottom: -9%; transform: rotate(45deg) scale(1.4); } .works-description .mobile-tablet-poster { min-width: 100vw; position: relative; top: 10%; left: 50%; transform: translateX(-50%); min-height: 600px; } /* ############################################################ THE-TEAM ################################################################## */ .do-it-well-content { font-size: 3rem; line-height: 3.5rem;} .do-it-well-content h2 { margin-top: 1rem; line-height: 4.5rem; font-size: 4rem; } .do-it-well-content h3 { font-size: 3.5rem; line-height: 4rem;} .team-row .row { width: 100%; position: unset; flex-direction: column; align-items: center; gap: 5rem; transform: none;} .team-member-content h3 { max-width: 70%; margin: 0 auto; font-size: 3rem; line-height: 3.5rem; font-weight: 900; } .team-member-content h2 { font-size: 4rem; line-height: 5rem;} .team-row { padding: 7rem 0;} .content-creator-identity span { font-size: 1.2rem; line-height: 2.5rem;} .team-row-container .team-row:nth-child(odd) .row { flex-direction: column-reverse; gap: 16rem; } .team-row-container .team-row:nth-child(odd) .row .team-member-card { margin-top: -14rem; } .team-row-container .team-row { padding: 10rem 0 16rem; } .team-description { background-color: black; min-height: 35.125rem; } .team-member-content h3 { max-width: 80%; } .team-member-content p { max-width: 80%; } .release-nfts-card-title .h5-lg { font-size: 1.5rem; } .content-creator-info { margin: 0 auto;} .content-of-nft .row { gap: 5rem;} .team-row-container .team-row:last-child { padding: 10rem 0;} } /* ######################################### Mediq qurey From 0 to 575 ###################################################### */ @media (max-width: 575px) { html { font-size: 11px;} #about-the-music {height: 7%;} .market-iframe { display: none;} .phone-iframe-container { display: block;} /* ############################################################ Typography ################################################################## */ .h1-sm, h1, .h1 { font-size: 4rem; line-height: 4.1rem; font-weight: 700; } .h1-md { font-size: 6.625rem; line-height: 7rem; font-weight: 900; } .h2-md { font-size: 3rem; line-height: 4rem;} .h4-sm, h4, .h4 { font-size: 1.6rem; line-height: 2rem;} .h6-lg { font-size: 1.2rem; line-height: 1.7rem; font-weight: 600;} .p-md { font-size: 1.1rem; line-height: 1.125rem;} .p-lg, a, span { font-size: 1.3rem; line-height: 1.4rem; } .h2-sm, h2, .h2 { font-size: 2.375rem; line-height: 3.375rem; } .h2-lg { font-size: 3.2rem; line-height: 3.625rem; } .h3-lg { font-size: 3.125rem; line-height: 3.3rem; } .h4-lg { font-size: 1.875rem; line-height: 2rem; } .h5-lg { font-size: 1.3rem; line-height: 2rem; } .black-btn.paper-curl-right::after { display: none;} .black-btn:focus { background: none !important;} .yellow-outline { text-shadow: -1px -1px 0 #ffd543, 1px -1px 0 #ffd543, -1px 1px 0 #ffd543, 1px 1px 0 #ffd543; font-style: italic; color: white;} .black-outline { text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; font-style: italic; color: white;} .h4-xlg { font-size: 2.2rem; line-height: 2.5rem; } .iconic { margin-top: -125px !important;} .home .banner::before { background-color: transparent; -webkit-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); -moz-box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1); box-shadow: inset 0px -50px 48px 26px rgba(0,0,0,1),inset 0px 50px 48px 26px rgba(0,0,0,1);} /* ############################################################ Header ################################################################## */ .grow .topbar { margin-top: -29px;} .site-logo { margin: 0; width: 12.93rem;} .primary-navigation .primary-menu-container > ul > li, .primary-navigation > div > .menu-wrapper li:last-child { margin-right: 4rem; } .primary-navigation.mobile-container .primary-menu-container > ul > li { margin-right: 0; margin-left: 4rem; } .join_btn-discover_btn-container a { min-width: 9.125rem; } .join_btn-discover_btn-container span { width: 1.5rem; height: 1.5rem; transform: translateY(0); top: -1px;} .join_btn-discover_btn-container .header-join-btn span { top: 5px; left: 13px;} .topbar-text { display: none;} .topbar .container { justify-content: flex-end;} .topbar { top: -60%;} .header-content nav:not(.mobile-menu) { display: none;} .mobile-menu-btn { display: block; position: absolute; right: 2rem; width: 2rem; top: 50%; transform: translateY(-50%);} .mobile-menu { padding: 3.7rem 0 5rem; position: fixed !important; width: 100%; top: 0 !important; left: 0!important; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url("./assets/images/iconic-cloud-image_.jpg") no-repeat center center / cover;} .mobile-menu .sub-menu { margin-left: 0 !important; border: none !important;} .mobile-menu .sub-menu li > a { padding: 0 !important; display: inline-block !important;} .mobile-menu .join_btn-discover_btn-container { margin-left: 0;} .mobile-menu .footer-navigation { display: block !important;} .mobile-menu .privacy-terms { display: block; margin: 0 !important; text-align: center;} .mobile-menu .privacy-terms a:not(:first-child) { margin-top: 2rem;} .sub-menu-toggle > span { display: none;} .mobile-menu .primary-menu-phone-container { width: 100%;} .mobile-menu ul li { margin: 1.5rem 0; text-align: center;} .mobile-menu ul li a { display: inline-block;} .site-logo .custom-logo { max-width: 100% !important; max-height: 100% !important;} .topbar-btn .black-btn { padding: 0 !important; background: none;} .topbar-btn p { color: black;} .topbar-btn img { filter: invert(1)} .topbar-btn { margin-right: 2rem;} .topbar { padding: 0.3rem 0;} /* .site-header { top: 3.5rem;} */ .home { margin-top: 28px;} .home .loader-container { transform: translateY(-28px);} .home .banner { aspect-ratio: 1 / 1.28;} /* ############################################################ Banner ################################################################## */ .banner { height: 90vh; min-height: 600px;} .home .banner { min-height: 100% !important; height: 100% !important;} .banner .banner-video { height: 100%;} .banner::after { display: none;} .rect , .full-screen { width: 3rem; height: 3rem;} .banner .widget_nav_menu a, .footer-navigation-wrapper li a { border-width: 2px;} .footer-navigation-wrapper li a { height: 3rem; width: 3rem;} .footer-navigation-wrapper a span img { max-width: 16px; max-height: 16px;} .counter-container { min-height: 9.5rem; } .banner .banner-title { bottom: 24%; width: 100%; max-width: 320px;} .banner .widget_nav_menu { bottom: 20px; left: 16px; transform: none; } .banner .widget_nav_menu ul { display: block;} .banner .widget_nav_menu li { margin: 0.5rem 0;} .mobile-join-btn { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); margin: 0;} .rect, .full-screen { bottom: 20px; right: 16px; top: unset; left: unset; margin-bottom: 0;} /* .full-screen { left: 8%; top: 15rem; } */ .full-screen { left: unset; top: unset; bottom: 65px; right: 16; } .mobile-join-btn { display: block;} .banner .yellow-bars { display: none;} /* ############################################################ Counter ################################################################## */ .counter { margin-top: 2rem;} .counter-box { margin-left: 0.3125rem; width: 2.625rem; height: 2.438rem;} .nft-img-container { max-width: 110px; padding: 0 3rem 3rem 0; justify-content: flex-end; align-items: flex-end;} .nft-img { max-width: 60%; } .counter-container .container { display: flex; flex-direction: column; align-items: center; justify-content: center;} .mobile-nft-img { margin: 2rem 0; display: block; max-width: 10rem;} .nft-img-container .nft-img { display: none;} .nft-img-container::before { background: url("./assets/images/mobile-nft-bg.png") no-repeat right bottom / 100% 100%;} .downside-arrow { max-width: 45%; } .counter-box-container { flex-direction: column;} .counter-box-container > h6 { margin-left: 0.3125rem} .nft-img-container { bottom: -4rem;} .cross-bar { display: none;} /* Pen */ .pen-box > div { height: 75px;} .pen-head { width: 650px; left: 93%;} .pen-head a { top: 5px; left: 23%;} .pen-tail { width: 650px; right: 7%} /* ############################################################ sell-me ################################################################## */ .sell-me .h4-lg { font-size: 2rem; line-height: 2.5rem; } .sell-me { top: 13.5rem; right: 1rem; } .sell-me::before { top: -2.5rem;} .sell-me::before, .sell-me::after { height: 2rem; width: 2rem;} .sell-me::after { right: -1rem;} .page-template-home footer .sell-me { top: 1.8rem; } /* ############################################################ About ################################################################## */ .about { padding: 24rem 0 2rem; background: url(./assets/images/yellow-squre-bg-mobile@2x.png) no-repeat right 18%/20%} .about-title { margin-left: 2.5rem; margin-bottom: 1rem;} .yellow-cross-bars::before { left: -4.5rem; height: calc(100% - 1.5rem);} .topbar-btn .btn-arrow, .about-desc-part .btn-arrow { width: 2rem; } .about .yellow-btn { margin: 3rem auto 0; } .about-desc-part p { margin: 1.5rem 0 0; } .macbook-container { display: none; } .about-desc-part { width: 100%; } .about .yellow-btn { padding: 0.5rem 1.5rem !important; } .macbook-container_mobile-tablet { margin-top: 3rem; display: block;} .about-description { flex-direction: column;} .about-content-container { padding-inline: 1rem; width: 100%;} .about-description .about-desc-part:last-child { margin-top: -3rem;} .fancybox-content { max-width: 400px !important;} /* ############################################################ never-released ################################################################## */ .never-released .slick-slide { width: 23.188rem !important; aspect-ratio: 1 / 0.9; } .never-released .slick-slide > * ,.never-released-slide-content, .never-released-slide-content img { height: 100%; object-fit: cover; width: 100%;} .never-released { flex-direction: column-reverse;} .never-released-slider-container { margin-left: 0; width: 100%; } .never-released-title { margin-left: 1rem; max-width: 95%; padding: 0 1rem; max-width: 300px;} .never-released .slick-dots { bottom: -5rem; left: 3rem; } .slide-overlay { border-radius: 0.3rem;} .play-btn { width: 3rem;} .never-released-slide-content { border-radius: 0.5rem; overflow: hidden; } /* ############################################################ Iconic ################################################################## */ .iconic { padding: 42rem 0 20rem; overflow: hidden;} .upper-clouds { min-width: 900px;} /* .iconic-buildings { bottom: 56.5rem; max-height: 324px;} */ .iconic-buildings { bottom: 42rem; max-height: 453px;} .bull { bottom: 1rem; left: 2rem;} .indication-board { right: 0; bottom: 23rem;} .iconic-sign-up { margin: 3rem 0 4.5rem; } .iconic-access-item-icon > div { width: 3rem; } .iconic-access-item-icon { width: 9rem; } .iconic-radio-btn-container { margin-top: 2rem; } input[type="submit"] , .form-discover-btn { padding: 0.5rem 3rem; font-size: 1.7rem; line-height: 2rem;} .iconic-radio-btn-container { margin-top: 0.5rem;} .form-discover-btn { top: 70%; transform: translateX(-50%);} .iconic-access-grp { margin: 2rem 0 3rem;} .input-area input { width: calc(100% - 4rem); font-size: 1rem; line-height: 2rem;} .input-area input::placeholder { font-size: 1rem; line-height: 2rem; } .radio-btn-content { width: calc(100% - 3rem) ;} .radio-btn-content p { font-size: 0.8rem; line-height: 1.3rem;} .custom-input { min-height: 2.5rem;} .input-icon { width: 3.2rem; height: 100%;} /* .trending-line::before { max-height: 651px; content: ""; position: absolute; width: 100%; height: 362%; background: linear-gradient(to top, black 99%, rgba(0, 0, 0, 0) 100%); bottom: 2px; left: 0; z-index: -1;} */ .trending-line, .iconic-buildings { width: 180%; left: 50%; transform: translateX(-50%);} .trending-line::before { max-height: 651px; content: ""; position: absolute; width: 100%; height: 362%; background: linear-gradient(to top, black 78%, rgba(0, 0, 0, 0) 100%); bottom: 2px; left: 0; z-index: -1;} .iconic .h2-lg { font-size: 3.2rem; line-height: 4.2rem; } .indication-board { bottom: 62rem; width: 47%; max-height: 257px;} .half-width-input, .one-third-width-input { width: 100%; } .input-area { justify-content: center; margin: 0 !important; flex-wrap: wrap;} .input-area > div { margin: 1rem 0;} .custom-input p, .custom-input .wpcf7-form-control-wrap { width: 100%;} .input-area input::placeholder , .input-area input { font-size: 1.27rem; line-height: 2rem; } .iconic-access-grp { flex-wrap: wrap; justify-content: space-between;} .iconic-access-item { margin: 1rem 0 0; width: 40%; } .iconic-radio-btn-container { max-width: 100%; margin-inline: auto;} .bull { width: 52%;} input[type="checkbox"]::after { left: 8px; top: 4px; } .iconic-radio-btn-container input[type="checkbox"] + span .wpcf7-not-valid-tip { bottom: -8.5rem; } .wpcf7-spinner { bottom: 1rem; right: 2rem; left: unset;} .iconic-access-item-icon:hover::after { display: none;} .iconic-contact-form-container { min-height: 618px;} .iconic-access-item-content .h6-lg { font-size: 1rem; line-height: 1.5rem;} .light-cloud-container .light-cloud1 { max-width: 65%; } .light-cloud2 { max-width: 60%; margin-top: 21%; } .iconic .wpcf7-form .wpcf7-response-output { bottom: -6rem; } /* ############################################################ partnership ################################################################## */ .partnership-title .h2-lg { margin: 1.5rem 0;} .partnership { padding: 6rem 0 12rem;} .partnership .slick-dots { bottom: -50px;} .partnership .slick-slide { max-width: 13rem;} .partnership .slick-dots li { margin: 0 1px;} .partnership-slide img { height: 40px; } .partnership-slide { padding: 1rem;} /* ############################################################ footer ################################################################## */ .footer-content { padding: 10.75rem 0 5rem; } .menu-footer-nav-menu-container ul li { margin-inline: 1rem; } .menu-footer-nav-menu-container ul { margin: 3rem 0 5rem;} .privacy-terms a { margin-inline: 0.8rem; } .banner .widget_nav_menu a { padding: 0.6rem; width: 3rem; height: 3rem;} .footer-logo { max-width: 12.375rem;} .menu-footer-nav-menu-container ul li:last-child { display: none;} footer .p-lg { font-size: 1rem; line-height: 1.3rem;} .copyrights p, .copyrights a { font-size: 1rem;} /* ############################################################ DISCOVERY-PAGE ################################################################## */ /* ############################################################ DISCOVERY-Header ################################################################## */ .page-template-discovery .topbar-btn { margin-right: 2rem;} .page-template-discovery .join_btn-discover_btn-container { margin-left: 1rem; display: none !important;} .page-template-discovery .yellow-btn { padding: 0.7rem 1.5rem !important; } /* ############################################################ DISCOVERY-Banner ################################################################## */ .discovery .banner { height: 100vh; min-height: 600px; } .discovery .banner-title .h2-md { font-size: 3rem; line-height: 3.2rem; max-width: 300px; text-align: center;} .discovery .banner-title { gap: 1rem;} .page-template-discovery .banner::after { display: block;} .discover-banner-social-menu { display: none;} .discovery.banner .widget_nav_menu a { width: 4rem; height: 4rem; } .discover-banner-mobile-menu { display: block;} .discovery .widget_nav_menu { position: absolute;} .discovery .banner .widget_nav_menu { bottom: 30%;} .discovery .banner .widget_nav_menu a { width: 3rem; height: 3rem; border-color: #ffb900;} .discovery .banner-title { flex-direction: column; align-items: center; bottom: 42%;} .discovery .h1-lg { font-size: 12.09rem; line-height: 12.5rem;} .discovery .banner .widget_nav_menu a { transition-duration: 0.3s;} .discovery .banner .widget_nav_menu a:hover { background-color: black;} .discovery .banner .widget_nav_menu a:hover img { filter: unset;} .page-template-discovery .discovery .banner .widget_nav_menu { bottom: 30%; left: 50%; transform: translateX(-50%); } .page-template-discovery .banner .widget_nav_menu ul { display: flex; } .page-template-discovery .banner .widget_nav_menu li { margin: 0 0.5rem; } /* ############################################################ DISCOVERY- Crossbar ################################################################## */ .discovery .yellow-cross-content { margin: 0 auto; min-height: 250px; max-width: 400px; padding: 2.5rem;} .discovery .yellow-cross-content .h5-lg { font-size: 1.8rem; line-height: 2rem; -webkit-line-clamp: 4; } .discovery .never-released-slider-container { max-width: 1072px; margin-left: -27rem; padding-top: 0rem; width: 108%; } .discovery .never-released .slick-slide { width: 18.188rem !important; } .discovery .never-released-title { max-width: 250px; } .discovery .never-released-title h3 { max-width: 100%; } .discovery .never-released .slick-dots { left: 93.5rem; } .discovery .slide-overlay p { -webkit-line-clamp: 2;} .discover-banner-social-menu nav { margin-top: 13rem; } /* ############################################################ DISCOVERY-Cross-bar ################################################################## */ .discovery .cross-bar, .own-page .cross-bar { right: 280px; max-width: 20rem; max-height: 180px; } .discovery .market-place-mac, .own-page .market-place-mac { max-width: 200px;} .discovery .counter-container .btn-arrow, .own-page .counter-container .btn-arrow { width: 3.5rem; } .discovery .counter-container .black-btn, .own-page .counter-container .black-btn { margin-right: 0rem; } .discovery .counter-container .black-btn h5, .own-page .counter-container .black-btn h5 { font-size: 1.8rem; line-height: 2rem; font-weight: 800;} .discovery .slick-active ~ .slick-slide .never-released-slide-content::before { opacity: 0.7; } /* ############################################################ DISCOVERY-Video-Dallies ################################################################## */ .video-dallies .row { flex-direction: column;} .video-dallies-content > div { margin-top: 3rem; max-width: 300px;} .video-dallies-content { padding-top: 0; max-width: 80%; margin: 0 auto;} .video-dallies .play-btn { width: 5rem;} .video-dallies .slide-overlay p { -webkit-line-clamp: 5;} .video-dallies-video .never-released-slide-content { border-radius: 0.5rem; } .video-dallies { background: none;} .discovery .video-dallies .slide-overlay { border-radius: 0.5rem;} .never-seen-title .h3-sm, h3, .h3 { font-size: 3rem; line-height: 4rem; } .discovery .never-seen-title { display: inline-block; margin: 0 0 3rem 4rem; } .discovery .never-seen-gallery { grid-template-columns: repeat(2, 1fr); grid-gap: 10px;} .discovery .never-seen-gallery li:nth-child(12n - 9) { grid-column: 1 / span 2; grid-row-end: span 1; padding-top: 100%;} .discovery .never-seen-gallery li:nth-child(12n - 8) { grid-row-end: span 2; padding-top: 100%;} .discovery .never-seen-title .yellow-cross-bars::before { left: -4.5rem; } .discovery .never-seen-gallery .slide-overlay-content .h5-md { font-size: 1.4rem; line-height: 1.5rem; } .discovery .never-seen-gallery li .slide-overlay a { font-size: 1rem; line-height: 1rem;} .never-seen-gallery li .btn-arrow { margin-left: 0.5rem; width: 2rem; } .discovery .never-seen-title .yellow-cross-bars::before { left: -3.5rem; height: calc(100% - 0.5rem); } .discovery .never-seen { padding-bottom: 8rem; } .discovery .never-seen-gallery li:nth-child(12n - 9) .h5-md {font-size: 1.4rem; line-height: 1.5rem;} .discovery .never-seen-gallery li:nth-child(12n - 9) .p-lg { font-size: 1.3rem; line-height: 1.5rem;} .discovery .never-seen-gallery li:nth-child(12n - 9) a { font-size: 1rem; line-height: 1rem;} .discovery .video-dallies-video .slide-overlay-content p { font-size: 1.1rem; line-height: 1.4rem;} .discovery .video-dallies-video .slide-overlay-content .h5-md { font-size: 2.1rem; line-height: 2.5rem; } .never-seen-gallery li > a { height: 2.1rem; width: 2.1rem;} /* ############################################################ DISCOVERY-Slider ################################################################## */ .discovery .counter-container { margin: 14rem 0 18rem; } .discovery .never-released { padding: 0rem 0 4rem; } .discovery .never-released .slick-slide { width: 20.188rem !important; } .discovery .never-released-slider-container { max-width: 100%; margin-left: 0; } .discovery .cross-bar, .own-page .cross-bar { right: 200px; max-width: 15rem; max-height: 160px; top: -1rem; } .discovery .never-released-title { margin: 0 0 2rem 2.5rem; } .discovery .never-seen-title h3.yellow-cross-bars { font-size: 1.5rem;} .discovery .never-released .slick-dots { left: 3rem; bottom: -4rem;} .discovery .never-released .play-btn { width: 4rem;} .discovery .mobile-nft-img { margin: 0; display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; max-width: 100%; background-color: #323232; top: 100%; left: 0; min-height: 150px;} .discovery .mobile-nft-img img { max-width: 11rem; margin: 0 auto;} .discovery .counter-container { min-height: 150px;} .discovery .counter-container .topbar-btn { margin: 0; width: 100%;} .discovery .market-place-mac { width: 250px; left: 50%; top: -85%; bottom: unset; transform: translateX(-50%);} .discovery .counter-container img { filter: unset;} .discovery .nft-img-container { top: 90%; bottom: unset;} .discovery .downside-arrow { max-width: 38%; } .discovery .nft-img-container { padding: 0 3rem 3.5rem 0; } .discovery .counter-container .nft-img-container { height: 110%;} /* ############################################################ PRIVACY-POLICY ################################################################## */ .page-template-privacypolicy_terms-condition .site-header, .error404 .site-header { top: 0px; background-color: black;} .privacy-terms-page h1 { margin-bottom: 3rem !important; font-size: 3rem; line-height: 4rem; font-weight: 800;} /* .privacy-terms-page { padding-top: 14rem; } */ .h3-sm, h3, .h3 { font-size: 1rem; line-height: 2rem; font-weight: 800; } .error404 .site-header .topbar { top: -45%;} .privacy-terms-page .banner .container { height: 61vh; } .privacy-terms-page .banner { min-height: 500px;} .privacy-terms-page .banner h1 { margin-bottom: 1rem !important;} .privacy-terms-page .builder-content .container { max-width: 90%;} .privacy-terms-page .builder-content { padding: 5rem 0 3rem; } .privacy-terms { flex-wrap: wrap; row-gap: 1rem;} /* ############################################################ 404-PAGE ################################################################## */ .error-page { padding-top: 12rem; min-height: 800px; height: 100vh; display: flex; align-items: center; justify-content: center;} .error-page-content .yellow-btn { margin: 2rem auto 0;} .error-page-content h1 { font-size: 6.9rem; line-height: 7rem; font-weight: 800;} /* ############################################################ LEARN-PAGE ################################################################## */ .banner.learn-banner { min-height: 450px; height: 85vh;} .learn-banner-navigation.counter-container { min-height: 4.5rem; } .learn-banner-navigation .cross-bar { right: 0; top: -2.5rem; max-width: 11rem; } .learn-banner-navigation .nft-img-container { min-width: 100%; padding: 0; top: 0; min-height: 100%;} .learn-banner-menu { display: none;} .learn-banner-navigation .cross-bar { display: block;} .learn-banner-navigation .nft-img-container::before { content: ""; position: absolute; height: 100%; width: 80%; background: url("./assets/images/counter-black-bg.png") no-repeat left center/cover; right: 0; top: 0; z-index: 0; } .learn-banner { -webkit-box-shadow: inset 0px 114px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 114px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 114px 89px -32px rgb(0, 0, 0),inset 0px -157px 49px -70px rgba(0, 0, 0, 0.75);} /* ############################################################ LEARN-About ################################################################## */ .learn-about-section .learn-about-poster { border-radius: 0.5rem;} .learn-about-title { margin-left: 0; } .learn-about-section { padding: 6rem 0; } .learn-about-title h3 { font-size: 4rem; line-height: 4rem;} .learn-about-content h4 { margin-left: 3rem;} .learn-about-desc { margin-top: 2rem; } .learn-about-desc p { max-width: 100%; } .learn-about-content .yellow-cross-bars::before { left: -3.5rem; } .learn-about-section .row { gap: 5rem;} .learn-about-small-poster { width: 85%; top: 39%; left: 12% !important; } .learn-about-poster-container .yellow-btn { position: relative; margin: 12rem auto 0; left: unset; right: unset !important;} .learn-about-section-container .learn-about-section:first-child .row, .learn-about-section-container .learn-about-section:last-child .row { gap: 14rem;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-poster-container .yellow-btn, .learn-about-section-container .learn-about-section:last-child .row .learn-about-poster-container .yellow-btn { margin: 4rem auto 0;} .learn-about-section-container .learn-about-section:first-child .row .learn-about-small-poster, .learn-about-section-container .learn-about-section:last-child .row .learn-about-small-poster { width: 85%; top: -38%;} .learn-about-section-container .learn-about-section:last-child .col-lg-5:last-child .learn-about-poster-container { padding-top: 6rem;} /* ############################################################ LEARN-NFT ################################################################## */ .learn-nft-section .learn-nft-img { max-width: 150px; } .learn-nft-section { padding: 10rem 0 5rem;} .learn-nft-section .yellow-btn { padding: 0.7rem 1.5rem !important;} /* ############################################################ OWN-PAGE ################################################################## */ .desktop-iframe { display: none;} .phone-iframe { display: block;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-page .banner { height: 85vh; min-height: 450px;} .own-page .banner .banner-title { bottom: 50%; text-align: center; left: 50%; transform: translate(-50%,50%);} .own-page .banner-title .h1-md { margin: 0;} .own-page .yellow-cross-content { max-width: 450px; margin: 0 auto; text-align: center; padding: 10rem 2rem;} .own-page .yellow-cross-section { margin-bottom: 6rem;} .own-page .yellow-cross-content .h5-lg { font-size: 2.8rem; line-height: 3.5rem; } .own-card-section { position: relative; width: 100%; display: flex; justify-content: center; min-height: 400px; border-radius: 0; background: url("./assets/images/own-card-bg-mobile.png") no-repeat center top/cover;} .own-card-section .own-card-phone { left: unset; top: 2rem ; max-width: 320px; top: -32%;} .own-page .yellow-cross-content p { line-height: 1.8rem; font-size: 1.5rem; } .first-nft-coming-content { text-align: center; row-gap: 2.5rem;} .first-nft-coming .row { justify-content: center; row-gap: 5rem;} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - BANNER +++++++++++++++++++++++++++++++++++++++ */ .own-buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem; } .own-buy-nft-title .h2-md { font-size: 4rem; line-height: 4.5rem; } .own-buy-nft-tagline p { max-width: 405px; } .own-buy-nft-tagline .h5-lg { font-size: 1.8rem; line-height: 2.5rem; max-width: 400px; margin: 0 auto;} .own-buy-nft { padding: 12rem 0 5rem;} .own-buy-nft .h3-lg { margin-bottom: 0; } /* +++++++++++++++++++++++++++++++++++++++++++ OWN - counter-container +++++++++++++++++++++++++++++++++++++++ */ .own-page .counter-container .black-btn { flex-direction: column; text-align: center; max-width: 200px;} .own-page .topbar-btn { margin: 0;} .own-page .counter-container { background: none;} .own-page .counter-container::before { position: absolute; content: ""; height: 100%; width: 100%; background: url("./assets/images/counter-bg@2x.png") no-repeat center center/cover; transform: skewY(-4deg); z-index: -1;} .own-page .counter-container { min-height: 27.5rem; } .own-page .market-place-mac { min-width: 230px; left: 50%; bottom: unset; top: -10rem; transform: translateX(-50%);} .own-page .market-place-mac img { filter: invert(0);} .own-page .counter-container .topbar-btn { width: 100%; height: 100%; align-items: flex-end; padding-bottom: 5rem;} .own-page .counter-container .downside-arrow, .own-page .mobile-nft-img { display: none;} .own-page .nft-img-container { min-width: 75px; height: 100px; padding: 0; transform: skewY(-4deg);} .own-page .nft-img-container::before { top: -5rem; background-position: right bottom;} .own-page .cross-bar { display: block; right: 2rem; max-width: 20rem; max-height: 140px; bottom: 0; top: unset; transform: scale(1.5) skewY(-2deg); } .own-page .counter-container { margin: 16rem 0 8rem; } .own-page .black-btn h5 { font-weight: 800;} .own-page .btn-arrow img { filter: invert(0);} /* +++++++++++++++++++++++++++++++++++++++++++ OWN - LEADERBOARD +++++++++++++++++++++++++++++++++++++++ */ .winning-prize-poster { max-width: 85%; margin: 0 auto;} .win-prize-name h3 { font-size: 2rem; line-height: 2.5rem; } .win-prize-name h4::before { left: -3.5rem;} .win-prize-name h4 { margin-left: 2rem; font-size: 1.5rem; line-height: 3rem;} .usflag-poster .yellow-btn { right: 2.5rem; } .winning-prize-hover-content { padding: 3rem; gap: 1rem;} .usflag-poster { display: none;} .own-leaderboard .row { margin-top: 7rem; justify-content: space-between; flex-direction: column; align-items: center; gap: 12rem;} .winning-prize-list { gap: 16rem;} .win-prize-name { position: absolute; left: 0; bottom: unset; top: -9rem; } .leaderboard-mobile-btn { display: flex !important; margin: 5rem auto;} .winning-prize-poster .winning-poster-border { min-width: 104%; min-height: 123%; top: -1.9rem; left: -0.7rem; } .own-leaderboard li:nth-child(3n) .winning-poster-border { min-width: 107%; min-height: 119%; left: -2.2rem; top: -2rem; } .own-leaderboard li:nth-child(3n-1) .winning-poster-border { min-width: 104.5%; min-height: 116%; top: -15px; left: -1px; } .own-leaderboard li:nth-child(3n) .winning-poster-border { min-width: 107%; min-height: 125%; left: -1.6rem; top: -2rem; } .own-leaderboard .leaderboard-title .h3-lg { margin-bottom: 0; } .leaderboard-mobile-btn .btn-arrow img { filter: invert(1);} /* ############################################################ PARTNER-PAGE ################################################################## */ .partner-page .partner-paragraph { margin-top: 2rem;} .partner-page .banner-title { text-align: left !important; max-width: 90%;} .partner-page .banner-title h1 { font-size: 3.5rem;} .partner-page .banner-title .h1-md { margin-left: 2rem; font-size: 4.2rem; line-height: 5.5rem; } .partner-page .yellow-cross-section { margin-bottom: 4rem; } /* .page-template-partner .banner .banner-video { left: 0;} */ /* +++++++++++++++++++++++++++++++++++++++++++ PARTNER - ROADMAP +++++++++++++++++++++++++++++++++++++++ */ .partner-roadmap-image-contianer .partner-roadmap-image:last-child { display: none;} .partner-roadmap { margin-top: 6rem;} .partner-roadmap-image { position: absolute; height: auto; width: 100%; max-width: 400px; top: -5%; right: -20%; } .partner-roadmap-grp .row { flex-direction: column-reverse; align-items: center;} .partner-roadmap-grp .row:nth-child(even) { flex-direction: column-reverse;} .partner-roadmap-grp > .row:not(:first-child) { margin-top: 5rem; } .partner-roadmap-grp .row .partner-roadmap-content { padding-bottom: 0;} .partner-roadmap-grp .row .partner-roadmap-content > h5 { display: none;} .partner-roadmap-card > h5 { display: block; text-align: center !important;} .partner-roadmap-content { position: relative; z-index: 0; margin-top: -3rem;} .partner-roadmap-tickmark span::before { display: none;} .partner-roadmap-card { padding: 3.5rem 1.5rem;} .partner-roadmap-grp { margin-top: 3rem; padding: 6rem 0 18rem;} .partner-roadmap-grp::after { height: 6%;} .partner-roadmap-title .white-outline { max-width: 80%; margin: 2rem auto 0;} .partner-roadmap-title h2:not(.white-outline) { font-size: 3rem;} .partner-roadmap-tickmark span { width: 6rem;} .partner-roadmap-tickmark span img { max-width: 50%;} .partnership-title .h2-lg { margin: 0.5rem 0; } .partner-page .partnership { background: none;} .partner-page .learn-nft-section .learn-nft-img { max-width: 80%;} /* ############################################################ THE-PROJECT ################################################################## */ .the-project .banner .banner-title { text-align: right; bottom: 2rem; right: 2rem;} .the-project .historical-title { margin-bottom: 3rem;} .the-project .historical-title h1 { font-weight: 900; line-height: 5rem;} .the-project .historical-title h5 { line-height: 2.5rem;} .the-project .historical .partner-paragraph { margin-top: 2rem; gap: 2rem;} .the-project .ipad-container { max-width: 90%; margin: 4rem 1rem auto 0;} .the-project .historical-img-container { display: none;} .the-project .historical { padding: 6rem 0 0rem; } .the-project .learn-banner { min-height: 360px; max-height: 384px;} .the-project .ipad-border-pen { width: 120%;} .the-project .ipad-container .wow-stamp { right: -5%; width: 43%;} .the-project .ipdad-poster { left: -6%; width: 123%; } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - Collectibility +++++++++++++++++++++++++++++++++++++++ */ .collectibility { padding: 16rem 0 25rem;} .collectibility .wolf { display: none;} .collectibility-title h3 { line-height: 3.5rem; font-size: 2.5rem;} .collectibility-title h5:not(.mobile-text) { display: none;} .collectibility-title .mobile-text { display: block;} .collectibility .drop-item { flex-direction: row-reverse;} .collectibility .drop-item > div { width: calc(100% / 3);} .collectibility .drop-item .drop-symbol span { margin: 0 auto;} .collectibility .drop-item .drop-date { text-align: left;} .collectibility .drop-timeline > .row { gap: 5rem;} .collectibility .drop-timeline::before, .collectibility .drop-timeline::after { width: 1.5rem; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } .collectibility .drop-timeline::after { height: 32%; top: 0; transform: translate(-50%,0);} .collectibility .drop-name p { margin: 0 1rem 0 auto; max-width: 6rem;} .collectibility::after { bottom: -11.5rem; background-size: 100%; max-height: 145px;} .collectibility::before, .collectibility::after { height: 16%;} .collectibility::before { bottom: -5rem;} .collectibility { padding: 20rem 0 10rem;} .collectibility::before { -webkit-clip-path: polygon(0 55%, 100% 35%, 100% 100%, 0% 100%); clip-path: polygon(0 55%, 100% 35%, 100% 100%, 0% 100%); } /* +++++++++++++++++++++++++++++++++++++++++++ THE PROJECT - About the Music +++++++++++++++++++++++++++++++++++++++ */ .about-music { padding: 15rem 0 150%; } .about-music-title h3 { font-size: 4.5rem; line-height: 4.9rem;} .about-music-poster { margin: 2rem auto; position: unset; width: 100%; } .about-music-outside-poster { display: none !important;} .about-music-title h3 { color: white; } .music-phone-bg-container { display: block; height: 40%;} /* ############################################################ THE-NFTs ################################################################## */ /* +++++++++++++++++++++++++++++++++++++++++++ THE NFTs - Release NFTs +++++++++++++++++++++++++++++++++++++++ */ .release-nfts-card-title .h5-lg { font-size: 2.5rem; line-height: 3rem; } .release-nfts-title h2 { font-size: 3rem; line-height: 3.5rem; max-width: 305px; margin: 0 auto;} .release-nfts-title h3 { font-size: 2.125rem; line-height: 2.6rem;} .release-nfts-card { margin: 8rem auto 0; padding: 2rem 1rem; max-width: 330px;} .release-nfts-card-grp { margin-top: -11rem; width: 100%;} .release-nfts-card-grp > div:nth-child(1) .release-nfts-card::before { top: 49%; transform: rotate(-7deg) translate(-50%, -50%) scale(1); transform-origin: left bottom; left: 62%; } .release-nfts-card-grp > div:nth-child(1) .release-nfts-card { padding: 2rem;} .release-nfts-card-grp > div:nth-child(3) .release-nfts-card::before { top: 60%; transform: rotate(4deg) translate(-50%, -50%) scale(1.1); transform-origin: right bottom; left: 45%; } .environment-title h3 { font-size: 2.5rem;} .environment-paragraph .desktop-text { display: none;} .environment-paragraph .mobile-text { display: block;} .environment-paragraph h4 { line-height: 3rem;} .skewed-sections-container .environment::before, .skewed-sections-container .environment::after { width: 46%;} .skewed-sections-container .environment::after { right: -8%; bottom: -7rem; } .environment-title .h2-md { font-size: 3rem; line-height: 3.5rem; } .environment-title .white-outline { margin-bottom: 2rem; line-height: 3rem; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; } .skewed-sections-container .environment { padding: 34rem 0 16rem } .mobile-nft-row { display: flex; justify-content: center;} .skewed-sections-container .nft-buy { padding: 9rem 0 17rem; } .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.extra-small, .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.small { display: none;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.medium { right: unset; left: 0%; bottom: 6%; width: 55%; transform: translateX(-50%) scale(1.2) rotate(-5deg); max-width: 225px;} .skewed-sections-container .nft-buy .nft-buy-poster-chain .nft-buy-poster.large { right: -16%; bottom: -15%; width: 65%; transform: scale(1.3) rotate(-6deg); max-width: 291px;} .free-nft { padding: 12rem 0 22rem; } .free-nft .row { justify-content: center;} .free-nft-title .h5-lg { font-size: 1.8rem; line-height: 3rem;} .free-nft-poster { position: absolute; width: 100%; bottom: -6%; right: -3rem; max-width: 400px; } .drops { padding: 10rem 0 6rem; } .drops .row { justify-content: center;} .drops .free-nft-content { margin-top: unset; margin-bottom: 5rem;} .drop-poster { display: none;} .buy-nft { padding: 5rem 0 14rem; } .buy-nft .row { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 5rem;} .buy-nft-title .h3-lg { font-size: 3.125rem; line-height: 4.3rem;} .buy-nft-title .h2-md { font-size: 4rem; line-height: 5rem; } .drop-list-item p span { display: unset;} .buy-nft-tagline h5 { font-size: 1.8rem; line-height: 2.5rem; } .desktop-tagline { display: none;} .mobile-tagline { display: block;} /* ############################################################ THE-RESTORATION ################################################################## */ .the-restoration .banner-title { right: 1rem !important; bottom: 4rem !important;} .the-restoration .banner-title h1 { font-size: 3.5rem; line-height: 4rem;} .works-title { margin-bottom: 3rem;} .works-title .yellow-outline { font-size: 2.5rem; line-height: 3.5rem;} .works-heading h1 { margin-bottom: 0rem; font-size: 3.0625rem; line-height: 3.5rem; font-weight: 900; font-style: italic;} .works-description .row { flex-direction: column; gap: 2rem;} .mobile-tablet-poster { text-align: center; margin: 2rem 0; display: block;} .works-poster-container-rightside, .works-poster-container-leftside { display: none;} .works-description { margin: 0 0 8rem;} .works-description .mobile-tablet-poster img:first-child { position: absolute; width: 65%; left: 0; top: -8%; max-width: 225px;} .works-description .mobile-tablet-poster img:last-child { position: absolute; right: -22%; width: 100%; bottom: -13%; transform: rotate(45deg) scale(1); max-width: 473px;} .works-description .mobile-tablet-poster { min-width: 100vw; position: relative; top: 10%; left: 50%; transform: translateX(-50%); min-height: 325px;} .mobile-tagline { display: block;} .works-paragraph h5:first-child { display: none;} .works-paragraph h5:last-child { display: block;} .wow-ten-year-stamp { display: none;} .works-description .film-strip { margin-top: 4rem;} .works-description-paragraph, .works-heading { max-width: 90%; margin: 0 auto;} .works h5 { font-size: 1.5rem;} .works { padding: 8rem 0;} .works-description .result h5 { margin-top: 4rem; } /* ############################################################ THE-TEAM ################################################################## */ .do-it-well-content { font-size: 3rem; line-height: 3.5rem;} .do-it-well-content h2 { margin-top: 1rem; line-height: 3.5rem; font-size: 3rem; } .do-it-well-content h3 { font-size: 2.5rem; line-height: 3rem; } .team-row .row { width: 100%; position: unset; flex-direction: column; align-items: center; gap: 5rem; transform: none;} .team-member-content h3 { max-width: 70%; margin: 0 auto; font-size: 3rem; line-height: 3.5rem; font-weight: 900; } .team-member-content h2 { font-size: 3rem; line-height: 3.5rem;} .team-row { padding: 7rem 0;} .content-creator-identity span { font-size: 1.2rem; line-height: 2.5rem;} .team-row-container .team-row .row, .team-row-container .team-row:nth-child(odd) .row { flex-direction: column-reverse; gap: 16rem; } .team-row-container .team-row .row .team-member-card, .team-row-container .team-row:nth-child(odd) .row .team-member-card { margin-top: -14rem; } .team-row-container .team-row { padding: 10rem 0 14rem; } .team-description { background-color: black; min-height: 35.125rem; } .team-member-content h3 { max-width: 100%; font-size: 2rem; line-height: 2.5rem; } .team-member-content p { max-width: 100%; margin: 2rem auto 0;} .release-nfts-card-title .h5-lg { font-size: 1.3rem; } .content-creator-info { margin: 0 auto;} .content-of-nft .row { gap: 5rem;} .team-description .yellow-cross-content { padding: 8rem 2rem 9rem; max-width: 305px;} .team-member-card .release-nfts-card { margin: 0 auto; max-width: 290px; } .content-of-nft-title h3 { font-size: 2.8rem; line-height: 3.3rem; margin-bottom: 1rem;} .content-of-nft-title { max-width: 303px; margin-inline: auto;} .team-row-container .team-row:nth-child(2n+1) .row .team-member-card .release-nfts-card::before { left: 4%; top: -1%; } .team-row .row { margin-inline: auto;} .team-row-container .team-row:last-child { padding: 10rem 0;} } /* .fancybox-content.inline-iframe { width: 100%; padding: 0; } .fancybox-content.inline-iframe iframe { height: 100%; width: 100%;} */