@charset "UTF-8";
/*
Theme Name: Fuzzys
Author: Johnson & Sekin
Author URI: https://johnsonandsekin.com/
Description: Custom Theme for Fuzzy's Tacos
Version: 1.0
Text Domain: fuzzys
*/

/*
Fonts:
- Proxima Nova
- Food Truck Signage
- Food Truck Chalkboard
*/

@font-face {
	font-family: 'Proxima Nova';
	src: url('/wp-content/themes/fuzzys/assets/fonts/proxima_nova_reg-webfont.woff') format('woff'),
	     url('/wp-content/themes/fuzzys/assets/fonts/proxima_nova_reg-webfont.woff2') format('woff2'),
}

@font-face {
    font-family: 'food-truck';
    src: url('/wp-content/themes/fuzzys/assets/fonts/food-truck-signage-regular/webfonts/food-truck-signage-regular.woff2') format('woff2'),
         url('/wp-content/themes/fuzzys/assets/fonts/food-truck-signage-regular/webfonts/food-truck-signage-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FoodTruckChalkboard';
    src: url('/wp-content/themes/fuzzys/assets/fonts/food-truck-chalkboard-regular/webfonts/food-truck-chalkboard-regular.woff2') format('woff2'),
         url('/wp-content/themes/fuzzys/assets/fonts/food-truck-chalkboard-regular/webfonts/food-truck-chalkboard-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
     font-family: 'food-truck';
     src: url('/wp-content/themes/fuzzys/assets/fonts/food-truck-signage-italic/webfonts/food-truck-signage-italic.ttf') format('tff');
     font-weight: normal;
     font-style: italic;
}

* {
	box-sizing: border-box;
}


body {
     margin: 0 !important;
     z-index: 1;
     padding-top: 0;
	 line-height: 1.5;
}

.parallax-wrap {
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	position: relative;
	perspective: 1px;
	perspective-origin: bottom;
}

.parallax-back {
	/* transform-origin: bottom */
	width: 100%;
	height: auto !important;
	top: 0;
	left: 0;
	position: absolute;
	z-index: -1;
	transform: translateZ(-1px) scale(4);
}

.para-wrap {min-height: 136em; position: relative; max-width: 100em; margin: 0 auto; min-width: 0;}

.para {position: relative; overflow: hidden; height: 60vw;}

.para-img, .para-img-mobile {width: 100%; position: absolute; bottom: -250px; left: 50%; transform: translateY(0%) translateX(-50%); height:auto;}

.para.reverse img {bottom: unset; top: 0px;}

.p-layer2 {z-index:999;}

@media screen and (max-width: 650px) {.para{height: 425px;}}

header {
     position: sticky;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 999999;
}

img {
     max-width: 100%;
}

p {
     font-family: 'Proxima Nova', sans-serif;
}

.hero {
     margin-top: -50px;
}
.yellow-background{
	display:none;
}
.yellow-hero{
	padding-top:20px !important;
}
.hero-text-wrap h3{
	font-family: 'FoodTruckChalkboard', sans-serif !important;
}
.yellow-hero .hero-text-wrap h1{
	text-transform:uppercase important!;
}

/* ANIMATION STYLES */
/*
     Add class 'anim-element' to all animation elements triggered by scroll / in-view
     Add class 'slide-up', 'slide-right', 'slide-left'.
*/
/*  Animation speed default ---- Changing --anim-speed effects all animated elements */
:root {
     --anim-speed: 800ms;
}

/* Anim Elem */
.anim-element {
     opacity: 0;
     position: relative;
}


/* Slide right animation */
.anim-element.slide-right {
     opacity: 0;
     -moz-transition: all var(--anim-speed) ease;
     -webkit-transition: all var(--anim-speed) ease;
     -o-transition: all var(--anim-speed) ease;
     transition: all var(--anim-speed) ease;
     -moz-transform: translate3d(-100px, 0px, 0px);
     -webkit-transform: translate3d(-100px, 0px, 0px);
     -o-transform: translate(-100px, 0px);
     -ms-transform: translate(-100px, 0px);
     transform: translate3d(-100px, 0px, 0px);
}

.anim-element.slide-right.in-view {
     opacity: 1;
     -moz-transform: translate3d(0px, 0px, 0px);
     -webkit-transform: translate3d(0px, 0px, 0px);
     -o-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     transform: translate3d(0px, 0px, 0px);
}

/* Slide left animation */
     .anim-element.slide-left {
     opacity: 0;
     -moz-transition: all var(--anim-speed) ease;
     -webkit-transition: all var(--anim-speed) ease;
     -o-transition: all var(--anim-speed) ease;
     transition: all var(--anim-speed) ease;
     -moz-transform: translate3d(100px, 0px, 0px);
     -webkit-transform: translate3d(100px, 0px, 0px);
     -o-transform: translate(-100px, 0px);
     -ms-transform: translate(100px, 0px);
     transform: translate3d(100px, 0px, 0px);
}

.anim-element.slide-left.in-view {
     opacity: 1;
     -moz-transform: translate3d(0px, 0px, 0px);
     -webkit-transform: translate3d(0px, 0px, 0px);
     -o-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     transform: translate3d(0px, 0px, 0px);
}



/* Slide up animation */
.anim-element.slide-up {
     opacity: 0;
     -moz-transition: all var(--anim-speed) ease;
     -webkit-transition: all var(--anim-speed) ease;
     -o-transition: all var(--anim-speed) ease;
     transition: all var(--anim-speed) ease;
     -moz-transform: translate3d(0px, 100px, 0px);
     -webkit-transform: translate3d(0px, 100px, 0px);
     -o-transform: translate(0px, 100px);
     -ms-transform: translate(0px, 100px);
     transform: translate3d(0px, 100px, 0px);
}

.anim-element.slide-up.in-view {
     opacity: 1;
     -moz-transform: translate3d(0px, 0px, 0px);
     -webkit-transform: translate3d(0px, 0px, 0px);
     -o-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     transform: translate3d(0px, 0px, 0px);
}

/**

     Slide up value icons in sequence
     Replace '.sequenced' with class of sequential fade up elements
     Adjust depending on how many elements there are

*/
.sequenced .anim-element.slide-up:nth-of-type(2) {
     -moz-transition: all calc(var(--anim-speed) + 300ms) ease;
     -webkit-transition: all calc(var(--anim-speed) + 300ms) ease;
     -o-transition: all calc(var(--anim-speed) + 300ms) ease;
     transition: all calc(var(--anim-speed) + 300ms) ease;
}

.sequenced .anim-element.slide-up:nth-of-type(3) {
     -moz-transition: all calc(var(--anim-speed) + 600ms) ease;
     -webkit-transition: all calc(var(--anim-speed) + 600ms) ease;
     -o-transition: all calc(var(--anim-speed) + 600ms) ease;
     transition: all calc(var(--anim-speed) + 600ms) ease;
}

.sequenced .anim-element.slide-up:nth-of-type(4) {
     -moz-transition: all calc(var(--anim-speed) + 900ms) ease;
     -webkit-transition: all calc(var(--anim-speed) + 900ms) ease;
     -o-transition: all calc(var(--anim-speed) + 900ms) ease;
     transition: all calc(var(--anim-speed) + 900ms) ease;
}

.sequenced .anim-element.slide-up:nth-of-type(5) {
     -moz-transition: all calc(var(--anim-speed) + 1200ms) ease;
     -webkit-transition: all calc(var(--anim-speed) + 1200ms) ease;
     -o-transition: all calc(var(--anim-speed) + 1200ms) ease;
     transition: all calc(var(--anim-speed) + 1200ms) ease;
}

/* Floating animation */
.anim-element.floating {
     opacity: 0;
     -moz-transition: all var(--anim-speed) ease;
     -webkit-transition: all var(--anim-speed) ease;
     -o-transition: all var(--anim-speed) ease;
     transition: all var(--anim-speed) ease;
     -moz-transform: rotate3d(1, 1, 0, 5deg);
     -webkit-transform: rotate3d(1, 1, 0, 5deg);
     -o-transform: rotate3d(1, 1, 0, 5deg);
     -ms-transform: rotate3d(1, 1, 0, 5deg);
     transform: rotate3d(1, 1, 0, 5deg);
}

.anim-element.floating.in-view {
     opacity: 1;
     animation: 1s floatAnim cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}

@keyframes floatAnim {
0% {
     transform: rotate3d(45deg, 1, 0, 50deg);
}
50% {
     transform: rotate3d(0deg, -1, 0, -50deg);
}
100% {
     transform: rotate3d(0,0,0,0);
}
}
 /* END ANIMATION STYLES */

.current_page_item a {
    color: white !important;
}

.menu-container .text-wrapper h4, .menu-slide p {
    font-family: 'food-truck', sans-serif !important;
	font-size:28px;
}

.menu-container .text-wrapper .nutrition-info {
    font-family: 'FoodTruckChalkboard', sans-serif !important;
	font-size:28px;
}
.privacy-content p img{
	width:500px;
}
.privacy-content p .large-img{
	width:100%;
}