body { margin: 0px; } .headerContent { height: 100vh; background: transparent; background-size: cover; background-position: left top; background-attachment: fixed; } .navLinks ul { margin: 0px; list-style-type: none; padding: 0px; } .navLinks ul li { display: inline-block; } .logo-text a img, .logo-text1 a img { max-width: 18.5vw; max-height: 3vw; } .logo-text a img { /*padding-bottom: 0.25vw;*/ } .logo-text1 a img { vertical-align: middle; padding-left: 5.167vw; padding-top: 1.917vw; padding-bottom: 1.583vw; } .date-text { font-size: 2vw; letter-spacing: 0.050vw; line-height: 2.5vw; color: #FFFFFF; font-family: 'suisse_intlsemi_bold'; padding-bottom: 0.7916vw; text-transform: uppercase; } /*.header-text { position: relative; }*/ /*.header-main { position: fixed; top: unset; left: 33%; transform: unset; vertical-align: middle; text-align: center; bottom: unset; top: 54%; }*/ .header-text { position: fixed; left: 50%; top: 22vw; transform: translateX(-50%); } .header-main { position: relative; top: unset; left: unset; transform: unset; vertical-align: middle; text-align: center; bottom: unset; top: unset; } .logo-text { text-align: center; /*margin-left: 4vw;*/ } /*.title-text { width: 100%; text-align: center; position: fixed; top: 66%; bottom:unset; }*/ .title-text { width: 100%; text-align: center; position: relative; top: unset; bottom: unset; } .buttonwrapper { width: 100%; text-align: center; } .uncomment-logo { width: 70%; margin: 1vw auto; } .preOrder { display: inline-block; /*width: 9.66vw;*/ width: 22.66vw; } .preSave { display: inline-block; width: 8.5vw; } .preOrder a { background-color: transparent; color: #000000; text-decoration: none; text-transform: uppercase; font-size: 1.167vw; letter-spacing: 0.029vw; line-height: 3.2vw; height: 2.833vw; padding: 0px; display: inline-block; width: 92%; font-family: 'suisse_intlsemi_bold'; filter: blur(0.5px); position: relative; } .preSave a { background-color: transparent; color: #000000; text-decoration: none; text-transform: uppercase; font-size: 1.167vw; letter-spacing: 0.029vw; line-height: 3.1vw; height: 2.833vw; padding: 0px; display: inline-block; width: 92%; font-family: 'suisse_intlsemi_bold'; /* filter: blur(0.5px); */ position: relative; } .preOrder a::after, .preSave a::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #FFFFFF; filter: blur(1px); z-index: -1; } .preOrder a:hover:after, .preSave a:hover:after { filter: blur(4px); } .preOrder a:hover, .preSave a:hover { filter: blur(1px); } .socialIcons a:hover { opacity: 0.5; } .logo-text1 { display: inline-block; width: 49%; } .navLinks { display: inline-block; width: 49%; } .navLinks ul li a { font-size: 1.5vw; letter-spacing: 0.037vw; line-height: 2.5vw; text-transform: uppercase; text-decoration: none; color: #FFFFFF; padding-right: 2.5vw; font-family: 'suisse_intlsemi_bold'; } .socialIcons a { text-decoration: none; color: #FFFFFF; padding-right: 1vw; } a.icon-mail-envelope-closed { font-size: 1.833vw; } .socialIcons { position: absolute; top: 90%; left: 5%; } a.icon-mail img { max-width: 1.283vw; max-height: 1.283vw; } .footer_wrapper a.icon-mail img { max-width: 1.383vw; max-height: 1.383vw; } .nav-bar { background-image: url("../images/nav-icon-default.png"); background-repeat: no-repeat; display: block; background-size: cover; width: 1.916vw; margin: 0 auto; right: 5.08vw; top: 2.5vw; height: 1.285vw; position: absolute; background-position: center; cursor: pointer; } .nav-bar:hover, .nav-bar.active { background-image: url("../images/nav-icon-hover.png"); background-repeat: no-repeat; display: block; height: 2.083vw; background-position: top; top: 1.91vw; z-index: 1; } .navLinks ul li a:hover { opacity: 0.7; } .navContent { background: rgba(38, 38, 38, 0.09); -webkit-backdrop-filter: blur(17px) saturate(65%) contrast(128%); backdrop-filter: blur(17px) saturate(65%) contrast(128%); position: absolute; width: 100%; top: 0; left: 0; } .nav.active { display: block !important; } .logo-text1 a img:hover { opacity: 0.5; } @media screen and (max-width:1023px), (min-width:1024px) and (max-width:1366px) and (orientation:portrait) { .headerContent { background: transparent; background-size: cover; } .socialIcons { top:87%; } /* .header-main { position: fixed; top: 61%; left: 50%; width: 100%; transform: translate(-50%, -50%); bottom: unset; }*/ .logo-text { text-align: center; margin-left: 0; } .header-main { position: relative; top: unset; left: unset; width: 100%; transform: unset; bottom: unset; } /* .title-text { bottom: 14.5vw; }*/ .title-text { bottom: unset; margin-top: 15vw; } .header-text { position: fixed; left: 50%; top: 60%; transform: translate(-50%,-50%); width: 100%; z-index: 0; } .navContent { z-index: 1; } .preOrder { /* width: 116px;*/ width: 220px; margin: 0 auto; } .uncomment-logo { max-width: 50%; margin: 0 auto; } .preSave { width: 106px; } .logo-text a img, .logo-text1 a img { max-width: 222px; max-height: 36px; padding: 0; } .logo-text a img { padding-bottom: 5px; } /*.uncomment-logo img { max-width: 288px; max-height: 32px; padding-bottom: 5px; }*/ .uncomment-logo img { max-width: 100%; max-height: unset; padding-bottom: 0; } .date-text { font-size: 24px; line-height: 30px; letter-spacing: 0.6px; padding-bottom: 10px; } .buttonwrapper { width: 76%; margin: 0 auto; } .preOrder a, .preSave a { font-size: 14px; letter-spacing: 0.35px; line-height: 38px; height: 34px; } a.icon-mail img, .footer_wrapper a.icon-mail img { max-width: 17px; max-height: 17px; } .socialIcons { position: absolute; bottom: 100px; left: 0px; width: 100%; text-align: center; z-index: 1; } .socialIcons a { padding-right: 10px; } .nav-bar { width: 23px; height: 17px; top: 30px; right: 20px; z-index: 1; } .navContent { z-index: 2; } .nav-bar:hover, .nav-bar.active { width: 23px; height: 25px; top: 25px; position: fixed; z-index: 3; } .navContent.active { /* position: static; */ backdrop-filter: none; background: rgb(239 171 140 / 1); -webkit-backdrop-filter: blur(17px) saturate(65%) contrast(128%); /* backdrop-filter: blur(17px) saturate(65%) contrast(128%); */ } .nav.active { position: fixed; top: 0; left: 0; height: 100vh; /*background: rgba(38, 38, 38, 0.09);*/ background: rgba(230, 230, 230, 1); -webkit-backdrop-filter: blur(17px) saturate(65%) contrast(128%); backdrop-filter: blur(17px) saturate(65%) contrast(128%); z-index: 1; width: 100%; overflow-y: scroll; } .logo-text1 { display: block; width: 100%; text-align: center; margin-top: 25px; } .navLinks { display: block; width: 100%; text-align: center; } .navLinks ul li { display: block; margin-top: 80px; } .navLinks ul li a { font-size: 24px; letter-spacing: 0.6px; line-height: 30px; } } @media screen and (min-width:1920px) { a.icon-mail img, .footer_wrapper a.icon-mail img { max-width: 19px; max-height: 19px; } /*.header-main { top: 481px; }*/ } @media screen and (min-width:3000px) { .socialIcons a, div#footer .socials a { font-size: 22px; } }