/** fonts **/ @font-face { font-family:'Saans-Light'; src: url(https://globalstaticassets.lululemon.com/fonts/Saans-Light.woff) format("woff");mso-font-alt: 'Helvetica'; font-weight:normal; font-style:normal; font-display:swap; } @font-face { font-family:'Saans-Regular'; src: url(https://globalstaticassets.lululemon.com/fonts/Saans-Regular.woff) format("woff");mso-font-alt: 'Helvetica'; font-weight:normal; font-style:normal; font-display:swap; } @font-face { font-family:'Saans-SemiBold'; src: url(https://globalstaticassets.lululemon.com/fonts/Saans-SemiBold.woff) format("woff");mso-font-alt: 'Helvetica'; font-weight:normal; font-style:normal; font-display:swap; } /** font css **/ a{text-decoration:none;font-family: 'Saans-Regular', Helvetica, sans-serif;} a[x-apple-data-detectors] {color: inherit !important;text-decoration: none !important;font-size: inherit !important;font-family: inherit !important;font-weight: inherit !important;line-height: inherit !important;} p, ul, ol, li {margin:0;padding:0;color:#7F746C;font-family: 'Saans-Light', Helvetica, sans-serif;font-size:16px;font-weight: 300;line-height: 135%;text-align:left;} h1, h2, h3 {margin:0;padding:0;color:#140F0F;font-family: 'Saans-Regular', Helvetica, sans-serif;font-weight:400;text-align:left;} h1 {font-size: 48px;line-height: 104%;letter-spacing: -2px;} h2 {font-size: 48px;line-height: 104%;letter-spacing: -2px;} h3 {font-size: 32px;line-height: 112%;letter-spacing: -1px;} h4 {font-size: 30px;line-height: 112%;font-family: 'Saans-Light', Helvetica, sans-serif;margin:0;padding:0;color:#140F0F;font-weight:400;text-align:left;} a:link, a:active, a:visited, a:hover{ color:#140F0F; text-decoration: none; } /** font css end from content builder **/ /** styles **/ body { background-color:#fff; color:#000; font-family: 'Saans-Regular', Helvetica, sans-serif; font-size: 100%; font-weight:normal; line-height: 1.4em; margin:0 auto; } main { margin: 0 auto; max-width: 1280px; padding: 0; } @media only screen and (min-width:50rem){ main { padding-top:98px; padding-left: 0px; padding-right: 260px; } } /** header **/ header { border-bottom:1px solid #979797; background-color: #F3FED7 } .header-container { margin:0 auto; max-width: 1280px; padding:60px 4.5% 24px 4.5%; background-color: #F3FED7 } .header_pre_space { width: 260px; background-color: blue; } .desktop-header {display: none;} .header-flex { display: flex; } .navigation-flex { display: flex; width: 410px; justify-content: end; } @media only screen and (min-width:50rem){ header {border-bottom: none;} .desktop-header {display: block;} div .logo { width: 130px; margin-right: 127px; margin-left: 20px; align-content: end; } div.logo>a img{ width: 130px; } /** navigation **/ nav { display: inline-block; max-width: 749px; } nav ul { flex-grow: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; overflow: hidden; position: relative; transition: opacity .5s ease; visibility: visible; } nav ul li { display: inline-block; } nav ul>li { cursor: pointer; flex-grow: 1; font-family: 'Saans-Light', Helvetica, sans-serif; color: #140F0F; line-height: 26px; padding-left: 50px; position: relative; transition: border .25s ease; vertical-align: top; letter-spacing: .09375rem; z-index: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; } nav ul>li>a { font-size: 14px; font-weight: 380; font-family: 'Saans-Regular', Helvetica, sans-serif; color: #140F0F; } } /** mobile navigation **/ .mobile-header {display: block; padding: 0px 6%} .mobile-header img { padding-right:1em; width:136px; align-content: end; } .mobile-nav { display: flex; justify-content: space-between; } button.hamburger { border:none; cursor: pointer; display: inline-block; } button.hamburger:focus { outline:0; } .bar1, .bar2, .bar3 { background-color: #333; cursor:pointer; height: 1px; margin: 6px 0; transition: 0.4s; width: 22px; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-6px, 6px); } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-3px, -1px); transform: rotate(45deg) translate(-3px, -5px); } /*nav.mobile-links{ display: none; }*/ nav.mobile-links ul { flex-grow: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; overflow: hidden; position: relative; transition: opacity .5s ease; visibility: visible; } nav.mobile-links ul li { display: block; margin:1em auto; text-align: center; } nav.mobile-links ul>li { cursor: pointer; flex-grow: 1; font-family: 'Saans-Light', Helvetica, sans-serif; color: #140F0F; font-size: .875rem; font-weight: 600; line-height: 26px; padding-right: 1em; position: relative; transition: border .25s ease; vertical-align: top; letter-spacing: .09375rem; z-index: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; } @media only screen and (min-width:50rem){ .mobile-header{display: none;} } /** main body **/ h1 { padding-bottom:8px; } h2 { padding-bottom:8px; } /** form **/ form{ padding-top: 20px; } .preferenceBlock { margin-bottom: 2em; } .preferenceBlock > p, .infoAlert > p { padding-top: 6px; } label { color: #140F0F; font-family: 'Saans-Regular', Helvetica, sans-serif; font-size: 19px; line-height: 26px; text-indent: 1.5em; } hr { background-color: #9EAEAE; margin-top:1em; } .state {margin-top:-7px;} .redAlert{ background-color:#FAE8EA; color:#D21D2E; font-size: inherit; line-height: inherit; margin:.2em; margin-bottom: 1em; padding:.7em; } .infoAlert { color:inherit; font-size: inherit; line-height: inherit; } .redAlert { background-color:#FAE8EA; color:#D21D2E; font-size: inherit; line-height: inherit; margin:2.188em .2em; margin-bottom: 0.500em; padding:.7em; } .unsubBlock { color:#140F0F; font-size: inherit; line-height: inherit; } .submit-btn { background-color: #140F0F; border:none; border-radius: 4px; color:#FDFDF8; cursor: pointer; font-size: 12px; font-weight: 790; letter-spacing: 2px; margin-top:32px; line-height: 18px; transition: 5s ease all; padding:1.2em 2em; -webkit-appearance: none; -moz-appearance:none; } .submit-btn a:hover{ background-color: #140F0F; border:none; border-radius: 4px; color:#FDFDF8; cursor: pointer; font-size: 12px; font-weight: 790; letter-spacing: 2px; margin-top:32px; line-height: 18px; padding:1.2em 2em; } /** confirmatin page **/ main.confirmation { max-width: 1440px; padding:0; padding-top: 31px; } main.confirmation h1 { font-weight:300; text-align: center; } main.confirmation p { text-align: center; } main.confirmation img { margin:0 auto; max-width: 1440px; padding-top:45px; width:100%; } /* Mobile only */ @media only screen and (max-width:50rem){ main { padding: 84px 60px; } nav ul>li>a { font-size: 14px !important; font-weight: 380 !important; font-family: 'Saans-Regular', Helvetica, sans-serif; color: #140F0F !important; } }