html, body {
background: #000;
scroll-behavior: smooth;
font-family: 'Montserrat', sans-serif;
@apply antialiased;
font-size: 16px;
font-weight: 400;
line-height: 180%;
margin: 0;
padding: 0;
color: #fff;
overflow-x: hidden;
}
html {
min-height:100%;
position:relative;
}
body {
height: 100%;
}
a, button, input[type="submit"] {
cursor: pointer !important;
color: white;
transition: all 1s;
}
img {
object-fit: cover;
display: block;
pointer-events: none !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
text-transform: uppercase;
font-style: italic;
line-height: 115%;
max-width: 700px;
margin: 0 auto 30px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
}
nav li {
margin: 0 20px;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 12px;
}
nav a {
text-decoration: none;
font-weight: 900;
font-style: italic;
display: inline-block;
}
nav a:hover {
scale: 1.15;
}
button, input[type=submit] {
letter-spacing: 3px;
font-size: 12px;
background: none;
border-radius: 3px;
padding: 5px 15px;
color: #fff;
border: 1px solid #fff;
text-transform: uppercase;
}
button:hover, input[type=submit]:hover {
background: #fff;
color: #000;
}
video {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
background: #000;
position: relative;
}
hr {
background: #fff;
margin: 0;
padding: 0;
color: #fff;
height: 1px;
border: 0;
} form label {
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 12px;
display: block;
}
input[type=text], input[type=email], textarea, input[type=url] {
background: #040404 !important;
text-align: center;
border: 1px solid #252525;
padding: 10px;
box-sizing: border-box;
width: 100%;
max-width: 400px;
margin: 0 auto;
color: #fff !important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
border: 0 !important;
text-align: center;
max-width: 400px;
margin: auto;
background: #004f7e !important;
border-radius: 2px !important;
} .display-none, .wpcf7-spinner {
display: none !important;
}
.grecaptcha-badge { 
visibility: hidden !important;
} .preloader {
animation: fadeInAnimation ease-in-out 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
background-color: #000;
pointer-events: none;
z-index: 999;
}
@keyframes fadeInAnimation {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.preloader dotlottie-player {
max-width: 700px;
width: 60%;
height: auto;
animation: fadeInAnimationLogo ease-in-out 4.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimationLogo {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
30% {
opacity: 1;
}
75% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#home-preload {
animation: contentFade ease-in-out 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes contentFade {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.preloader-generic {
animation: fadeInGeneric ease-in-out 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #000;
pointer-events: none;
z-index: 999;
}
@keyframes fadeInGeneric {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
} #hero-animation {
display: block;
}
#hero-animation.flavors-animation {
position: absolute;
z-index: 100;
}
#para-top, #para-mid-front, #para-mid-back, #para-back, #para-top-clouds, #para-bg-clouds {
position: absolute;
width: 100%;
height: auto;
}
#para-top-clouds {
z-index: 150;
}
#para-top {
z-index: 140;
}
#para-mid-front {
z-index: 130;
}
#para-mid-back {
z-index: 120;
}
#para-bg-clouds {
z-index: 115;
}
#para-back {
position: relative;
z-index: 110;
}
#para-back .mobile-vid {
display: none;
}
.float-1 {  
animation-name: floating-1;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating-1 {
0% { transform: translate(0,  -1%) scale(1, 1); }
25%  { transform: translate(0, -3%) scale(1.01, 1.01); }
50% { transform: translate(0,  -1%) scale(1, 1); }
75%  { transform: translate(0, -5%) scale(1.01, 1.01); }
100%   { transform: translate(0, -1%) scale(1, 1); }    
}
.float-2 {  
animation-name: floating-2;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating-2 {
0% { transform: translate(0, -3%) scale(1, 1); }
25%  { transform: translate(0, -1%) scale(1.01, 1.01); }
50% { transform: translate(0, -3%) scale(1, 1); }
75%  { transform: translate(0, -1%) scale(1.01, 1.01); }
100%   { transform: translate(0, -3%) scale(1, 1); }   
}
.float-3 {  
animation-name: floating-3;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating-3 {
0% { transform: translate(0,  -1%) scale(1, 1); }
50%  { transform: translate(0, -4%) scale(1.01, 1.01); }
100%   { transform: translate(0, -1%) scale(1, 1); }   
}
.float-4 {  
animation-name: floating-4;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating-4 {
0% { transform: translate(0,  -1%) scale(1, 1); }
50%  { transform: translate(0, -3%) scale(1.01, 1.01); }
100%   { transform: translate(0, -1%) scale(1, 1); }   
}
dotlottie-player {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#scroll-down {
position: absolute;
top: 85vh;
left: 50%;
transform: translate(-50%, -50%);
z-index: 900;
transition: all 1s;
} 
.scroll-hide {
display: none !important;
} #hand-left, #hand-right, #franchise-back {
position: absolute;
width: 100%;
height: auto;
}
#hand-left, #hand-right {
position: fixed;
}
#franchise-back {
position: relative;
z-index: 30;
}
#hand-left {
z-index: 50;
}
#hand-right {
z-index: 40;
}
.hand-float-1 {  
animation-name: hand-float-1;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes hand-float-1 {
0% { transform: translate(0,  -1%) scale(1, 1); }
25%  { transform: translate(0, -3%) scale(1.01, 1.01); }
50% { transform: translate(0,  -1%) scale(1, 1); }
75%  { transform: translate(0, -5%) scale(1.01, 1.01); }
100%   { transform: translate(0, -1%) scale(1, 1); }    
}
.hand-float-2 {  
animation-name: hand-float-2;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes hand-float-2 {
0%  { transform: translate(0, -3%) scale(1.01, 1.01); }
25% { transform: translate(0,  -1%) scale(1, 1); }
50%  { transform: translate(0, -5%) scale(1.01, 1.01); }
75%   { transform: translate(0, -1%) scale(1, 1); }  
100%  { transform: translate(0, -3%) scale(1.01, 1.01); }  
} audio {
width: 100px;
position: fixed;
bottom: 30px;
left: 30px;
z-index: 699;
} audio::-webkit-media-controls-mute-button, audio::-webkit-media-controls-timeline-container, audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-volume-slider-container, audio::-webkit-media-controls-volume-slider, audio::-webkit-media-controls-seek-back-button, audio::-webkit-media-controls-seek-forward-button, audio::-webkit-media-controls-fullscreen-button, audio::-webkit-media-controls-rewind-button, audio::-webkit-media-controls-return-to-realtime-button, audio::-webkit-media-controls-toggle-closed-captions-button {
display: none !important;
} #main-logo {
transition: all 1s;
cursor: pointer !important;
}
#main-logo:hover {
scale: 1.15;
}
#nav-main {
width: 100%;
box-sizing: border-box;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 35px 35px 0;
z-index: 799;
}
#nav-main img {
width: 80px;
height: auto;
}
#nav-ig .fa {
font-size: 16px !important;
}
#menu-main {
position: absolute; left: 50%;
transform: translateX(-50%);
}
#nav-main.generic-nav {
padding: 70px 40px 0 !important;
flex-direction: row-reverse !important;
}
#nav-main.generic-nav #main-logo {
display: none;
}
#rainbow-logo {
position: absolute;
top: 0;
bottom: 0;
left: 50px;
height: 100%;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/vertical-rainbow.png) top center repeat-y;
background-size: cover;
z-index: 805;
}
#rainbow-logo #main-logo {
cursor: pointer !important;
}
#rainbow-logo img {
width: 80px;
margin: 35px 20px 0;
}
#lead-in-home {
width: 100%;
text-align: center !important;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 10vw auto 0;
}
#lead-in-home #made-different {
width: 90%;
max-width: 700px;
margin: 0 auto 30px;
}
#lead-in-copy {
position: relative;
padding: 0 20px 0;
max-width: 900px;
font-weight: 700;
box-sizing: border-box;
z-index: 120;
text-transform: uppercase !important;
}
#lead-in-vid {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
}
#home-link-container {
display: block;
width: 100%;
background-size: 80%;
position: relative;
z-index: 699;
}
#home-links {
margin: 0 auto;
max-width: 900px;
padding: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
z-index: 499;
position: relative;
}
#home-links.shop-page-buttons {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
#home-links a {
display: block;
position: relative;
height: 260px;
border-radius: 5px; 
overflow: hidden;
border: 5px solid #333;
transition: all 1s;
text-align: center !important;
}
#home-links a:hover {
border: 5px solid #fff;
}
#home-links a .content {
z-index: 120;
position: absolute;
bottom: 0;
padding: 0 20px 20px;
box-sizing: border-box;
width: 100%;
}
#home-links a .content .title {
display: block;
font-weight: 900;
font-size: 24px;
margin: 0 0 10px;
text-transform: uppercase;
font-style: italic;
}
#home-links a .content p {
margin: 0;
text-align: center;
}
#home-links a .gradient {
z-index: 110;
position: absolute;
display: block;
width: 100%;
bottom: 0;
height: 30%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
transition: all 1s ease-in-out;
}
#home-links a:hover .gradient {
height: 60%;
}
#home-links a img {
z-index: 100;
position: relative;
width: 100%;
height: 100%;
opacity: 1;
transition: all 1s ease-in-out;
}
#home-links video {
z-index: 100;
position: relative;
width: 100% !important;
height: 100% !important;
opacity: 1;
transition: all 1s ease-in-out;
}
#home-links a:hover img {
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
opacity: 1;
}
#home-footer-clouds {
display: block;
width: 100%;
height: auto;
margin-top: -9%;
position: relative;
z-index: 99;
pointer-events: none !important;
}
.page-title {
display: block;
max-width: 700px;
margin: 260px auto 80px;
font-size: 72px;
text-align: center;
}
.story-title {
display: inline-block;
max-width: 100%;
font-size: 72px;
text-align: center;
border: 5px solid #004f7e;
border-radius: 5px;
background: rgba(0,0,0,.9);
box-sizing: border-box;
padding: 10px 30px;
}
#body-content {
display: block;
padding: 0 30px;
position: relative;
z-index: 100;
}
#body-content.flavors-page {
}
#body-content h2 {
text-align: center;
}
#body-content p, #body-content ul {
display: block;
max-width: 700px;
margin: 0 auto 40px;
}
#body-content p {
text-align: center;
}
#body-content ul {
padding: 0;
max-width: 700px;
}
#body-content li {
padding: 15px 0;
}
#body-content img {
width: 100%;
height: auto;
border-radius: 5px;
margin: 60px auto;
}
.copy-mobile {
display: none;
}
#hero-bg {
position: absolute;
width: 100%;
height: auto;
z-index: 10;
pointer-events: none !important;
}
#hero-bg.flavors-mobile-hero {
display: none;
}
#story-rainbow-vert {
position: absolute;
width: 8vw;
top: 0;
bottom: 0;
height: 100%;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/vertical-rainbow-flavors.png) top center repeat-y;
background-size: contain;
z-index: 205;
left: 50%;
transform: translateX(-50%);
}
#flavors-page {
position: relative;
z-index: 300;
}
#flavor-title {
width: 40% !important;
margin: 20% auto 2% !important;
position: relative;
z-index: 300;
}
#flavor-creamy {
position: absolute;
width: 16.5vw;
top: 60vw;
left: 5vw;
}
#flavor-container {
width: 43%;
margin: 0 auto;
display: block;
clear: both;
padding: 20vw 0 0;
position: relative;
z-index: 901;
}
.location {
width: 60% !important;
z-index: 701 !important;
}
#flavor-copy {
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 1.2vw;
line-height: 130%;
text-align: center;
position: relative;
z-index: 300;
}
#body-content.flavors-page p {
margin: 0 !important;
width: 100% !important;
max-width: 100%;
}
#flavor-container a {
width: 100%;
height: 12vw;
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid #fff;
overflow: hidden;
border-radius: 5px;
margin: 0 0 5%;
background: #000;
transition: all 1s;
cursor: default !important;
}
.location a {
height: 14vw;
border: .5vw solid #fff !important;
}
#flavor-container a:hover {
scale: 1.1;
}
#flavor-container a img {
width: 30%;
height: 100%;
position: relative;
margin: 0 0 0 5%;
}
.location a img {
width: 60% !important;
margin: 0 !important;
object-position: center left !important;
}
#flavor-container a .content {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100%;
padding: 2%;
box-sizing: border-box;
}
#flavor-container a .content span, #flavor-container a .content p, #flavor-container a .content h2 {
text-align: left;
}
.location a .content p {
text-align: center !important;
}
.special-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
#flavor-container a .content span {
font-size: .75vw;
font-weight: 900;
font-style: italic;
color: #FFC433;
text-transform: uppercase;
display: inline-block;
padding: .5vw;
border-radius: 3px;
border: .15vw solid #FFC433;
margin: 0 0 2%;
line-height: 100%;
margin: 0 2% 2% 0;
}
#flavor-container a .content h2 {
font-size: 2vw;
margin: 0 0 2%;
}
#flavor-container a .content p {
margin: 0 !important;
font-size: 1vw;
line-height: 120%;
}
.flavor-nav #menu-main {
padding: 0 0 0 3vw;
}
.location-title {
height: 30px;
width: auto;
clear: both;
margin: 30px auto;
}
#footer-bg {
display: block;
position: relative;
z-index: 10;
opacity: .6;
width: 100%;
height: auto;
}
nav#footer {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
padding: 40px 0 80px;
position: relative;
z-index: 499;
}
nav#footer li {
margin: 0 20px !important;
font-size: 10px !important;
}
.footer-ig a {
visibility: hidden;
font-size: 0;
}
.footer-ig a:before  {
visibility: visible;
font-family: FontAwesome; 
font-size: 12px; 
margin-right: -30px;
display: inline-block; 
font-style: normal;
content: '\f16d';
} #story-border {
position: absolute;
top: 2vw;
bottom: 2vw;
left: 2vw;
right: 2vw;
border-radius: 10vw;
border: 1vw solid #d8d6c5;
z-index: 899;
pointer-events: none !important;
}
#story-page-container {
position: relative;
width: 100%;
background: #0a0e16;
}
#nav-main.story-page-nav {
padding: 5vw 7vw 0;
}
.story-section {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 80%;
margin: 0 auto;
justify-content: space-between;
z-index: 300;
margin: 0 auto 2%;
z-index: 200;
}
.story-text-section-title {
text-transform: uppercase;
font-weight: 900;
color: #ada691;
font-size: 4vw;
line-height: 120%;
display: block;
}
.story-section p {
margin: 0 0 5%;
}
.story-text-section {
width: 50%;
font-size: 1.75vw;
line-height: 120%;
}
.story-section img {
width: 48%;
height: auto;
}
.align-right {
text-align: right !important;
}
#path-container {
position: absolute;
z-index: 100;
width: 77%;
margin: 6% 12.5% 0;
}
#path-container img {
display: block;
clear: both;
width: 100%;
height: auto;
}
#path-image-4 {
margin-top: -5vw !important;
}
#path-image-6 {
margin-top: -10% !important;
}
#path-image-7 {
margin-top: 5vw !important;
}
#story-outro {
position: relative;
margin-top: -35%;
z-index: 50;
}
.story-footer {
position: absolute !important;
bottom: 0 !important;
padding: 0 0 5vw !important;
} a #back-arrow {
position: absolute;
top: 1vw;
left: 1vw;
z-index: 499;
width: 2vw;
transition: all 1s;
}
a:hover #back-arrow {
scale: 1.4;
}
#fran-home-link {
position: absolute;
bottom: 1vw;
left: 1vw;
z-index: 799;
pointer-events: all;
display: block;
}
#fran-home-link img {
width: 4vw;
height: auto;
transition: all 1s;
pointer-events: all;
display: block;
}
#fran-home-link:hover img {
scale: 1.2;
}
.cloud {
display: block;
clear: both;
width: 100%;
height: auto;
}
#fran-content-1 {
position: relative;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/zig-zag-top-1.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -7% auto 0;
z-index: 100;
}
#fran-content-1-cont {
padding: 22% 8% 30%;
font-size: 2vw;
line-height: 120%;
box-sizing: border-box;
}
#fran-content-1 img {
position: absolute;
width: 25%;
height: auto;
object-fit: contain;
bottom: 17%;
right: 10%;
transition: all 1s;
}
#fran-content-2 {
position: relative;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/zig-zag-top-2.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -35% auto 0;
padding: 0 0 95%;
z-index: 120;
}
#fran-content-3 {
position: relative;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/zig-zag-top-3.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -55% auto 0;
z-index: 140;
padding: 0 0 30%;
}
#fran-content-3-cont {
padding: 33% 0 0;
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
font-size: 1.5vw;
line-height: 130%;
}
#fran-content-3-cont .fran-3-text:nth-child(2) {
align-self: center;
}
#fran-content-3-cont .fran-3-text:nth-child(3) {
align-self: flex-end;
}
#fran-content-4 {
position: relative;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/zig-zag-top-4.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -35% auto 0;
padding: 0 0 95%;
z-index: 160;
}
#fran-content-5 {
position: relative;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/zig-zag-top-5.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -55% auto 0;
z-index: 180;
padding: 0;
}
#fran-content-5-cont {
padding: 25% 0 0;
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
font-size: 1.5vw;
line-height: 130%;
}
#franchise-steps-header {
display: block;
background: #052b49;
padding: 3% 0 0;
text-align: center;
}
#franchise-steps-header p {
margin: 0 !important;
}
#franchise-steps-header .main-title, #franchise-steps-header .sub-title {
font-weight: 900;
font-size: 5vw;
line-height: 110%;
text-transform: uppercase;
}
#franchise-steps-header .sub-title {
font-size: 4vw;
font-weight: 400;
}
#fran-content-6 {
width: 90%;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 5% 0 0;
}
#fran-content-6 .step-container {
margin: 0 0 5%;
text-align: center !important;
font-size: 1.5vw;
line-height: 130%;
}
#fran-content-6 span {
display: inline-block;
margin: 0 auto;
text-transform: uppercase;
font-weight: 900;
border: .3vw solid #052b49;
border-radius: 5px;
background: rgba(0,0,0,.9);
box-sizing: border-box;
padding: 1% 2%;
}
#fran-footer {
display: block;
background: url(//nitecreamery.com/wp-content/uploads/2023/12/footer-background-repeat.png) center center repeat;
background-size: contain;
}
#fran-footer-cont {
display: block;
margin: 0 auto;
padding: 0 0 5%;
font-size: 1.5vw;
line-height: 130%;
text-align: center;
}
#fran-footer-cont span {
font-size: 2vw;
line-height: 130%;
text-transform: uppercase;
font-weight: 900;
}
#fran-footer-cont div {
margin: 0 0 3%;
}
#fran-footer-cont a {
display: inline-block;
margin: 0 auto;
text-transform: uppercase;
font-weight: 900;
border: .3vw solid #fff;
border-radius: 5px;
box-sizing: border-box;
padding: 1% 2%;
font-size: 2vw;
line-height: 130%;
text-decoration: none;
}
#fran-footer-cont a:hover {
background: rgba(0,0,0,.9);
}
#fran-content-1 strong, #fran-content-3 strong, #fran-content-5 strong, #fran-footer strong, #fran-footer-cont span {
color: #d8d6c5 !important;
}
#form-container {
background: #0e1f2b;
box-sizing: border-box;
border-radius: 5px;
padding: 30px;
width: 90%;
max-width: 460px;
margin: 25% auto 5%;
text-align: center !important;
}
#form-container input[type=text], #form-container input[type=email], #form-container textarea {
max-width: none;
}
#disclaimer {
width: 50%;
font-size: .6vw;
line-height: 120%;
margin: 0 auto 3% !important;
} #fran2-hero {
position: relative;
display: block;
width: 100%;
pointer-events: none;
}
#fran2-hero img {
position: relative;
width: 100%;
height: auto;
z-index: 99;
}
#fran2-hero .lottie, #fran-2-sec-3 .lottie, #fran-2-sec-4 .lottie, #fran-2-sec-5 .lottie {
position: absolute;
display: block;
z-index: 89;
width: 100%;
height: 100%;
}
#fran2-hero .lottie dotlottie-player, #fran-2-sec-3 .lottie dotlottie-player, #fran-2-sec-4 .lottie dotlottie-player, #fran-2-sec-5 .lottie dotlottie-player {
max-width: 100%;
}
#fran2-creams {
background: #042a47;
position: relative;
overflow-y: hidden;
margin: -10% auto 0;
}
#creams-top #cover {
display: block;
width: 100%;
position: absolute;
z-index: 79;
pointer-events: none !important;
margin-top: -1px;
}
#cream-cont-1 {
z-index: 69;
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
#cream-cont-1 img {
width: 90%;
transition: all 1s;
pointer-events: all !important;
}
#cream-cont-1 img:hover {
scale: 1.1;
}
#cream-cont-1 img.fir {
margin-top: 8%;
width: 80%;
}
#cream-cont-1 img.sec {
margin-top: -3%;
}
#cream-cont-1 img.thi {
margin-top: 12%;
}
#cream-cont-1 img.fou {
margin-top: -4%;
}
#cream-cont-1 img.fif {
margin-top: -20%;
}
#creams-mid {
display: flex;
flex-direction: row;
overflow-x: hidden;  
justify-content: space-between;
align-items: center;
}
#creams-mid #future-cont {
display: flex;
flex-direction: column;
font-size: 3.9vw;
color: #fff;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
#creams-mid img {
width: 20vw;
transition: all 1s;
pointer-events: all !important;
}
#creams-mid img:hover {
scale: 1.1;
}
#creams-mid img:first-of-type {
margin-left: -5vw;
}
#creams-mid img:last-of-type {
margin-right: -5vw;
}
#creams-mid #future-cont span {
display: block;
padding: 3% 3%;
width: 60vw;
transition: all 1s;
pointer-events: all !important;
cursor: default;
}
#creams-mid #future-cont span:hover {
scale: 1.1;
}
#creams-mid #future-cont span.one {
color: #0e1f2c;
}
#creams-mid #future-cont span.two {
background: #0e1f2c;
}
#creams-mid #future-cont span.three {
color: #0f396c;
}
#cream-cont-3 {
z-index: 69;
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
#cream-cont-3 img {
width: 90%;
transition: all 1s;
pointer-events: all !important;
}
#cream-cont-3 img:hover {
scale: 1.1;
}
#cream-cont-3 img.sec {
margin-top: -15%;
}
#cream-cont-3 img.thi {
margin-top: 15%;
}
#cream-cont-3 img.fou {
margin-top: 5%;
}
#cream-cont-3 img.fif {
margin-top: -10%;
}
#cream-cont-3 img.six {
margin-top: -20%;
}
#fran-2-sec-3 {
position: relative;
background: url(https://nitecreamery.com/wp-content/uploads/2024/03/fran-2-sec-3-bg.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -14.8% auto 0;
z-index: 200;
padding: 5% 0 0;
text-align: center;
font-size: 1.5vw;
line-height: 130%;
text-transform: uppercase;
pointer-events: none;
}
#fran-2-sec-3 img {
display: block;
width: 100%;
position: absolute;
transition: all 1s;
pointer-events: all !important;
}
#fran-2-sec-3 img:hover {
scale: 1.05;
}
#fran-2-sec-3 #sec-3-content {
padding: 10% 0 0;
}
#fran-2-sec-3 .lottie {
height: 150%;
}
.fran-content-3-v2 {
background: url(https://nitecreamery.com/wp-content/uploads/2024/03/fran-2-sec-3.png) top center no-repeat !important;
background-size: cover !important;
margin: 0% auto 0 !important;
z-index: 300 !important;
padding: 0 0 10% !important;
text-transform: uppercase !important;
}
.fran-content-cont-3-v2 {
padding: 35% 0 5% !important;
}
.fran-content-3-v2 .fran-3-text {
display: block !important;
padding: 0% 2% !important;
background: #0e1f2c !important;
margin: 0 0 2%;
}
#fran-content-3 .lottie {
align-self: flex-end;
width: 15vw;
margin: 2% 0 0;
}
#fran-2-sec-4 {
position: relative;
background: url(https://nitecreamery.com/wp-content/uploads/2024/03/fran-2-sec-4.png) top center no-repeat;
background-size: cover;
width: 100%;
margin: -33% auto 0;
z-index: 350;
padding: 10% 0 10%;
pointer-events: none;
}
#fran-2-sec-4 img {
width: 40%;
margin: 12% auto 0;
z-index: 400;
}
.fran-content-5-v2 {
position: relative !important;
background: url(https://nitecreamery.com/wp-content/uploads/2024/03/fran-2-sec-5.png) top center no-repeat !important;
background-size: cover !important;
width: 100% !important;
margin: -15% auto 0 !important;
z-index: 380 !important;
padding: 0 !important;
}
#fran-content-5 .fran-content-cont-5-v2 strong {
color: #006837 !important
}
.fran-content-cont-5-v2 div {
text-transform: uppercase;
margin: 0 0 2%;
}
.fran-content-cont-5-v2 div p {
display: inline-block !important;
background: #0e1f2c !important;
padding: 1% 1.5% !important;
font-size: 1.2vw !important;
margin: 0 !important;
line-height: 120% !important;
}
#franchise-steps-header-2 {
display: flex;
flex-direction: column;
background: #052b49;
padding: 3% 0 0;
text-align: center;
}
#franchise-steps-header-2 p {
margin: 0 !important;
}
#franchise-steps-header-2 .main-title, #franchise-steps-header-2 .sub-title {
font-weight: 900;
font-size: 5vw;
line-height: 110%;
text-transform: uppercase;
display: inline-block;
margin: 0 auto;
}
#franchise-steps-header-2 .sub-title {
padding: 0% 2% !important;
background: #0e1f2c !important;
}
#fran-2-sec-5 {
position: relative;
width: 100%;
margin: 0;
z-index: 350;
padding: 0;
pointer-events: none;
overflow: hidden;
}
#fran-2-sec-5 img {
position: relative;
width: 70%;
margin: 8% auto 7%;
z-index: 400;
pointer-events: all !important;
transition: all 1s;
}
#fran-2-sec-5 img:hover {
scale: 1.05 !important;
}
#fran-2-sec-5 .lottie {
margin-top: -10%;
height: 130%;
} #tempe-landing {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
background: url(https://nitecreamery.com/wp-content/uploads/2025/01/tempe-landing-bg-scaled.jpg) center center no-repeat;
background-size: cover;
position: absolute;
z-index: 1;
}
.tempe-landing-body {
padding: 10vw 30px 0 !important;
}
#tempe-lottie {
padding: 10vw 0 60px;
}
#tempe-lottie dotlottie-player {
max-width: 800px !important;
}
#tempe-jobs {
display: flex;
width: 100%;
box-sizing: border-box;
justify-content: space-between;
padding: 50px 30px;
}
@keyframes pulse {
0% {
transform: scale(1);
}
70% {
transform: scale(1);
}
85% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#tempe-1 {
width: 50vw !important;
animation: pulse 6s infinite;
animation-timing-function: ease-in-out;
}
#tempe-form {
width: 30vw !important;
background: #002B49 !important;
border: .5vw solid #081F2D !important;
box-sizing: border-box;
padding: 40px;
margin: 30px auto;
}
#tempe-form img {
width: 50%;
margin: 0 auto 30px !important;
}
#tempe-form p {
margin: 0 0 20px !important;
}
#tempe-3 {
width: 20vw !important;
}
#tempe-jobs a {
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
}
#tempe-jobs a:hover {
scale: 1.15;
} #nav-main.amb-nav {
justify-content: start;
} 
#nav-main.amb-nav #menu-main {
position: relative !important;
left: 0;
transform: none !important;
left: 3%;
}
#amb-content {
position: relative;
display: block;
padding: 200px 0 50px 50px;
max-width: 45%;
z-index: 155;
}
#amb-title {
width: 90%;
}
#amb-content p {
width: 80%;
}
#amb-content p:first-of-type {
margin: 30px 0 40px;
}
#amb-content h2 {
margin: 0 0 20px !important;
font-style: normal !important;
}
#amb-content ul {
margin: 0 0 30px !important;
width: 90%;
}
#amb-img {
position: fixed;
bottom: 0;
right: 3vw;
max-width: 45%;
max-height: 90vh;
z-index: 20;
}
.amb-button {
text-transform: uppercase;
font-size: 24px;
letter-spacing: 1px;
font-weight: 900;
color: #000;
display: inline-block;
padding: 10px 20px;
border-radius: 999px;
background: #fff;
text-decoration: none !important;
}
.amb-button:hover {
color: #052b49;
background: #ccc;
}
@media only screen and (max-width: 1024px) {
#nav-main.amb-nav {
justify-content: space-between !important;
} 
#amb-content {
padding: 0;
max-width: 90% !important;
width: 90% !important;
box-sizing: border-box !important;
margin: 200px auto 50px;
}
#amb-img {
position: relative;
bottom: auto;
right: auto;
max-width: 70% !important;
width: 600px !important;
max-height: none !important;
height: auto;
margin: 0 auto;
}
}
@media only screen and (max-width: 600px) {
#amb-content {
margin: 150px auto 50px;
}
} #f3-container {
width: 100%;
background: #fff1e4;
text-transform: uppercase;
}
#f3-hero {
background: #6b4e38;
display: flex;
flex-direction: column;
padding: 50px 30px 200px;
align-items: center;
}
#f3-hero #main-logo img {
width: 75px;
}
#f3-hero-title {
width: 90%;
max-width: 1400px;
margin: 150px auto 30px;
}
#f3-hero-button img {
width: 90%;
max-width: 350px;
}
#f3-intro {
display: flex;
flex-direction: column;
align-items: center;
color: #49361f;
}
.intro-item {
display: flex;
width: 90%;
max-width: 1200px;
align-items: center;
justify-content: space-between;
padding: 60px 0;
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
letter-spacing: -1px;
}
.intro-item.alt {
flex-direction: row-reverse;
text-align: right;
}
.intro-item.alt .intro-item-content img  {
margin-left: auto;
}
.intro-item p {
line-height: 110%;
font-size: 30px;
margin: 10px 0 0;
}
.intro-item img, .intro-item-content  {
width: 47%;
}
.intro-item-content img {
height: 30px;
width: auto;
}
#f3-map {
padding: 80px 30px;
display: flex;
flex-direction: column;
align-items: center;
color: #000;
}
#f3-map img {
width: 90%;
max-width: 1300px;
margin: 0 auto 80px;
}
#f3-map p {
width: 90%;
font-size: 18px;
text-align: center;
}
#f3-map a {
color: #000;
text-decoration: none;
}
#f3-footer {
display: block;
width: 100%;
height: auto;
clear: both;
} #mobilize-menu {
z-index: 9999 !important;
width: 60% !important;
}
#mobilize-menu.mobilize-theme-modern:before {
display: none !important;
}
.mobilize-menu-content ul li a {
text-decoration: none;
font-weight: 900;
font-style: italic;
font-size: 16px;
text-decoration: none !important;
text-transform: uppercase;
}
#mobile-nav {
display: none;
}
.mobilize-menu-content .mobilize-toggle {
font-size: 30px !important;
}
@media only screen and (max-width: 800px) {
#menu-main {
display: none !important;
}
#mobile-nav {
display: block;
font-size: 24px;
cursor: pointer !important;
}
} @media only screen and (max-width: 1100px) {
#rainbow-logo {
background: none !important;
}
.location {
width: 70% !important;
}
.location a {
height: 24vw;
}
}
@media only screen and (max-width: 800px) {
#nav-main {
justify-content: space-between;
}
#nav-main.generic-nav {
flex-direction: row !important;
}
#nav-main.generic-nav {
padding: 35px 35px 0 !important;
}
#nav-main.generic-nav #main-logo {
display: block;
}
audio, #rainbow-logo, #nav-ig, #home-audio {
display: none !important;
}
#nav-main.generic-nav {
padding: 35px 35px 0 !important;
}
#nav-main.story-page-nav {
padding: 10vw 7vw 0;
}
#flavor-copy {
font-size: 1.6vw;
}
#flavor-creamy {
display: none !important;
}
#flavor-container {
width: 80%;
}
#flavor-container a {
height: 25vw;
}
#flavor-container a .content span {
font-size: 1.25vw;
}
#flavor-container a .content h2 {
font-size: 4vw;
}
#flavor-container a .content p {
font-size: 2vw;
}
.location {
width: 90% !important;
}
.location a {
height: 30vw;
}
.location-title {
height: 20px;
}
#tempe-lottie {
padding: 10vw 0 30px;
}
#tempe-1 {
width: 60vw !important;
}
#tempe-form {
width: 60vw !important;
}
}
@media only screen and (max-width: 600px) and (orientation: portrait) {
html, body {
font-size: 14px;
}
#para-back .desktop-vid, #lead-in-vid {
display: none !important;
}
.preloader dotlottie-player {
max-width: 200px;
}
nav li {
margin: 0 10px;
text-align: center;
}
#nav-main {
padding: 15px 15px 0;
}
#nav-main img {
width: 8vw;
}
#nav-main.generic-nav {
padding: 15px 15px 0 !important;
}
#body-content {
padding: 0 20px;
}
#lead-in {
margin: 100px auto 60px;
padding: 0 30px;
box-sizing: border-box;
}
#lead-in-copy {
padding: 40px 40px 0;
}
#hero-animation {
width: 100%;
height: auto;
padding: 0 0 10px;
}
#hero-animation.flavors-animation {
height: auto !important;
}
#para-top, #para-mid-front, #para-mid-back, #para-back, #para-top-clouds, #para-bg-clouds {
bottom: 0;
}
#para-top {
margin-bottom: -2px;
}
#para-back {
width: 100% !important;
height: 100% !important;
padding: 0 0 10px;
}
#para-back .mobile-vid {
display: block;
padding: 0 0 10px;
}
#home-link-container {
background: none !important;
}
#home-links, #home-links.shop-page-buttons {
grid-template-columns: repeat(1, 1fr);
}
#home-links {
padding: 40px;
}
#home-links a {
border: 5px solid #fff;
height: auto !important;
}
#home-links a .content .title {
font-size: 24px;
}
#home-preload {
padding: 0 0 40px;
}
.copy-mobile {
display: block !important;
}
#story-container .copy-mobile {
display: flex;
}
.copy-desktop {
display: none !important;
}
#hero-bg.flavors-mobile-hero {
display: block;
}
#body-content.flavors-page {
position: absolute;
}
.page-title {
margin: 80px auto 40px;
font-size: 36px;
}
.flavor-title {
margin: 20% auto 40px;
}
nav#footer {
padding: 60px 0 40px;
display: none;
}
nav#footer ul {
display: flex;
flex-direction: column;
}
nav#footer li {
margin: 0 0 30px !important;
text-align: center;
}
.story-title-container .story-title {
margin: 160px auto 40px !important;
}
#gallery-container {
display: flex;
flex-direction: column;
padding: 30px;
width: 100%;
}
#gallery-container img {
width: 100% !important;
height: auto !important;
max-height: 900px;
}
#gallery-container img {
margin: 0 0 30px;
}
#gallery-container img:last-of-type {
margin: 0;
}
#story-gallery {
margin: 40px auto 0;
}
#path-image-2, #path-image-3 {
margin-top: -1vw !important;
}
#path-image-4, #path-image-5 {
margin-top: -5vw !important;
}
#path-image-7 {
margin-top: 0 !important;
}
#tempe-lottie dotlottie-player {
width: 80% !important;
padding: 15vw 0 0 !important;
}
#tempe-1 {
width: 70vw !important;
}
#tempe-form {
width: 70vw !important;
}
#tempe-3 {
width: 30vw !important;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.6),
only screen and (min--moz-device-pixel-ratio: 2.6),
only screen and (-o-min-device-pixel-ratio: 2.6/1),
only screen and (min-device-pixel-ratio: 2.6)
{  
html, body {
font-size: 14px;
}
#para-back .desktop-vid, #lead-in-vid {
display: none !important;
}
.preloader dotlottie-player {
max-width: 200px;
}
nav li {
margin: 0 10px;
text-align: center;
}
#nav-main {
padding: 15px 15px 0;
}
#nav-main img {
width: 8vw;
}
#nav-main.generic-nav {
padding: 15px 15px 0 !important;
}
#body-content {
padding: 0 20px;
}
#lead-in {
margin: 100px auto 60px;
padding: 0 30px;
box-sizing: border-box;
}
#lead-in-copy {
padding: 40px 40px 0;
}
#hero-animation {
width: 100%;
padding: 0 0 10px;
}
#hero-animation.flavors-animation {
height: auto !important;
}
#para-top, #para-mid-front, #para-mid-back, #para-back, #para-top-clouds, #para-bg-clouds {
bottom: 0;
}
#para-top {
margin-bottom: -2px;
}
#para-back {
width: 100% !important;
height: 100% !important;
padding: 0 0 10px;
}
#para-back .mobile-vid {
display: block;
padding: 0 0 10px;
}
#home-link-container {
background: none !important;
}
#home-links, #home-links.shop-page-buttons {
grid-template-columns: repeat(1, 1fr);
}
#home-links {
padding: 40px;
}
#home-links a {
border: 5px solid #fff;
height: auto !important;
}
#home-links a .content .title {
font-size: 24px;
}
#home-preload {
padding: 0 0 40px;
}
.copy-mobile {
display: block !important;
}
#story-container .copy-mobile {
display: flex;
}
.copy-desktop {
display: none !important;
}
#hero-bg.flavors-mobile-hero {
display: block;
}
#body-content.flavors-page {
position: absolute;
}
.page-title {
margin: 80px auto 40px;
font-size: 36px;
}
.flavor-title {
margin: 20% auto 40px;
}
nav#footer {
padding: 60px 0 40px;
display: none;
}
nav#footer ul {
display: flex;
flex-direction: column;
}
nav#footer li {
margin: 0 0 30px !important;
text-align: center;
}
.story-title-container .story-title {
margin: 160px auto 40px !important;
}
#gallery-container {
display: flex;
flex-direction: column;
padding: 30px;
width: 100%;
}
#gallery-container img {
width: 100% !important;
height: auto !important;
max-height: 900px;
}
#gallery-container img {
margin: 0 0 30px;
}
#gallery-container img:last-of-type {
margin: 0;
}
#story-gallery {
margin: 40px auto 0;
}
#path-image-2, #path-image-3 {
margin-top: -1vw !important;
}
#path-image-4, #path-image-5 {
margin-top: -5vw !important;
}
#path-image-7 {
margin-top: 0 !important;
}
.ig-browser #lead-in-vid, .ig-browser audio {
display: none !important;
}