@charset "utf-8";

/* Reset Styles */
*, *::after, *::before { margin: 0; padding: 0; border: 0; line-height: inherit; color: inherit; text-transform: inherit; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; background-color: transparent; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-box-sizing: border-box; box-sizing: border-box; }
ol, ul { list-style: none inside none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: inherit;}
blockquote::before, blockquote::after, q::before, q::after { content: ""; }
blockquote, q { quotes: "" ""; }
button { cursor: pointer; }
button:focus, button:active { outline:0; }
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding:0; border: 0; margin: 0; line-height: normal; }
header, footer, nav, article, section, main { display: block; }
:-ms-input-placeholder { color: #5A6A77; opacity: 1; }
::-webkit-input-placeholder { color: #5A6A77; opacity: 1; }
::-moz-placeholder { color: #5A6A77; opacity: 1; }
::-ms-clear { display: none; }
select.__placeholder { color: #5A6A77; opacity: 1; }
input, textarea, select { background: none; margin: 0; padding: 0; display: block; width: 100%; line-height: normal; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; }
textarea { height: 100%; }
select::-ms-expand { display: none; }


/*- Extra Small Devices, Phones -*/
@media only screen and (min-width: 480px) {}

/* Small Devices, Tablets -*/
@media only screen and (min-width: 768px) {}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {}


/*---------------------------------------------------
Core Elements  
- styles used through out the project
-----------------------------------------------------*/
html {
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	-webkit-text-size-adjust: 100%;
}

body {
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#353535;
}
body.noscroll{overflow:hidden;}
a{text-decoration:none;}

@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1200px) {}

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
/* font-family: 'Varela Round', sans-serif;*/

/*-------------------------
icon fonts
---------------------------*/
/*Use one of the following classes on any item that has an icon :before or :after*/

/*Font Awesome - https://fontawesome.com*/
.icon-fab:before, .icon-fab:after,
.icon-fal:before, .icon-fal:after,
.icon-far:before, .icon-far:after,
.icon-fas:before, .icon-fas:after{-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1; }
.icon-fab:before, .icon-fab:after{font-family: 'Font Awesome 5 Brands'; font-weight:300;} /* Font Awwsome Brands */
.icon-fal:before, .icon-fal:after{font-family: 'Font Awesome 5 Pro'; font-weight:300;} /* Font Awwsome Light */
.icon-far:before, .icon-far:after{font-family: 'Font Awesome 5 Pro'; font-weight:400;} /* Font Awwsome Regular */
.icon-fas:before, .icon-fas:after{font-family: 'Font Awesome 5 Pro'; font-weight:900;} /* Font Awwsome Solid */

/*Material Icons - https://material.io/icons */
.icon-m:before, .icon-m:after{font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;
/* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


/*-------------------------
container
---------------------------*/
.container{width:100%; max-width:1230px; margin:0 auto; position:relative; padding:0 15px;}


/*-------------------------
header
---------------------------*/
.header{position:fixed; top:0; left:0; width:100%;  z-index:106; padding:10px 0; background:#FFF; }
.header .container{display:flex; justify-content:space-between; align-items:center;}
.header__logo{transition:.3s; position:relative; z-index:102; width:45px; height:45px; display:block; margin-right:50px;}
.header__logo-img{width:100%; height:auto; display:block;}
.header nav{display:none; font-family: 'Varela Round', sans-serif;}
.header__nav li{display:inline-block; text-transform:uppercase; font-weight:700; font-size:0.875rem;}
.header__nav li a{display:block; margin:0 15px; transition:.3s;}
.header__nav li a:hover{color:#ff3500;}
.header__social{margin-right:60px;}


@media only screen and (min-width : 992px) {
	.header nav{display:inline-block;}
	.header__logo{width:75px; height:75px;}
}

/*-------------------------
social list
---------------------------*/
.social-list{}
.social-list__item{display:inline-block; margin:0 6px; vertical-align:middle;}
.social-list__link{transition:.3s; width:35px; height:35px; border-radius:50%; background:#cdcdcd; color:#353535; display:flex; justify-content:center; align-items:center; font-size:1.067rem;}
.social-list__link:hover{background:#FFF; color:#ff3500;}
.fb:before{content:'\f39e';}
.ln:before{content:'\f0e1';}
.ig:before{content:'\f16d'; font-size:1.267rem;}


@media only screen and (min-width : 992px) {
	.social-list{margin-left:auto; display:inline-block;}
}

/*-------------------------
mobile menu button
---------------------------*/
.mobile-menu-button {height: 16px; width:20px; transition: all 0.25s; z-index:102; position:relative; display:block; }
.mobile-menu-button:focus,
.mobile-menu-button:hover {cursor: pointer;}
.mobile-menu-button:hover span{background-color:#ff3500;;}
.mobile-menu-button span {background-color: #353535; top:7px; display: block; height: 2px; opacity: 1; position: absolute; -webkit-transition: all 0.25s; transition: all 0.25s; width: 80%; right:0;}
.mobile-menu-button span:first-child {top: 0px; width: 100%; }
.mobile-menu-button span:last-child {top: 14px; width: 100%;}
.mobile-menu-button.is--active span:nth-child(2) {opacity: 0; background-color: #353535;}
.mobile-menu-button.is--active span:first-child {top: 7px; transform: rotateZ(45deg); background-color: #353535;}
.mobile-menu-button.is--active span:last-child {top: 7px; transform: rotateZ(-45deg); background-color: #353535;}


@media only screen and (min-width : 992px) {}

/*-------------------------
main menu
---------------------------*/
.side-menu{width:0; position:fixed; right:0; top:0; background:#FFF; transition: all 300ms; z-index:100; height:100%; padding:150px 0px 0;}
.side-menu nav{opacity:0; font-family: 'Varela Round', sans-serif;}
.side-menu nav li{display:block; text-transform:uppercase; font-weight:700; font-size:1.125rem; margin-bottom:20px;}
.side-menu.is--active{width:100%; padding:150px 40px 0;}
.side-menu.is--active nav{opacity:1;}

@media only screen and (min-width : 600px) {
	.side-menu.is--active{width:350px;}
}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}


/*-------------------------
button
---------------------------*/
.button{text-transform:uppercase; box-shadow: 10px 10px 38px 5px rgba(0,0,0,0.85); background:#ff3500; border:2px solid #FFF; transition:.3s; display:flex; align-items:center; justify-content:center; color:#000; text-decoration:none; height:51px;font-weight:700; padding:0 32px; line-height:1; }
.button:hover{background:#2A8894; box-shadow: none;}
.button--yellow{background:#ffe400;}

@media only screen and (min-width : 768px) {
	.button{max-width:250px; margin:0 auto;}
}

/*-------------------------
	Editor Content 
	(content that user enters via WordPress admin)
---------------------------*/
.editor-content{line-height:2;}
.editor-content h1, 
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6{line-height:1.25; font-weight:700; font-size: 1.4rem; margin:50px 0 14px;}
.editor-content a{position:relative; color:#ff3500;}
.editor-content a:hover{text-decoration:underline;}
.editor-content p, .editor-content ul{margin-bottom:30px;}
.editor-content ul, .editor-content ol{list-style-type: disc; list-style-position: outside; margin-left:15px;}
.editor-content li{margin-bottom:20px;}
.editor-content ol{list-style-type:decimal; }
.editor-content .italic, .editor-content em { font-style: italic; }
.editor-content strong, .editor-content b{font-weight:700;}
.editor-content img{max-width:100%; height:auto; display:block; margin-bottom:40px;}
.editor-content__video-container{position: relative; padding-bottom: 56.25%;  height: 0; overflow: hidden;}
.editor-content__video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.editor-content .wp-caption{max-width:100%;}
.editor-content form ul{list-style-type:none; margin-left:0;}


@media only screen and (min-width : 480px) { }
@media only screen and (min-width : 768px) {
	.editor-content{font-size:1.133rem; }
	.editor-content ul, .editor-content ol{margin-left:50px;}
	.editor-content img.alignright {float:right; margin:0 0 20px 20px;}
	.editor-content img.alignleft {float:left; margin:0 20px 20px 0;}
	.editor-content img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
	.editor-content a img.alignright {float:right; margin:0 0 20px 20px;}
	.editor-content a img.alignleft {float:left; margin:0 20px 20px 0;}
	.editor-content a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) { }

/*-------------------------
footer
---------------------------*/
.footer{font-size:0.875rem; color:#000; text-align:center; border-top:2px solid #e3e3e3; max-width:1700px; margin:20px auto 0;}
.footer__bottom{padding:20px 0; }
.footer a{transition:.3s;}
.footer a:hover{color:#ff3500;}
.footer__logo{transition:.3s; display:flex; align-items: center; text-align:center; flex:1; margin:20px 0;}
.footer__logo-img{width:125px; height:125px; display:block; margin:0 auto;}
.footer nav .footer__nav li{display:inline-block;}
.footer nav .footer__nav li a{padding: 0 10px;}

.footer__secondary{margin:0 0 20px 0; text-align:center; }
.footer__secondary-headline{color:#231f20; text-transform:uppercase; font-size:2.375rem; font-weight:700; margin:30px 0; font-family: 'Varela Round', sans-serif; line-height:1.1;}
.footer__secondary-logos img{width:150px; height:auto; display:inline-block; margin:0 25px 25px;}


@media only screen and (min-width : 768px) {
	.footer__secondary{margin:0 0 100px 0; }
	.footer__secondary-headline{font-size:3rem; margin:60px 0;}
	.footer__secondary-logos img{margin:0 25px;}
}
@media only screen and (min-width : 992px) {
	.footer{text-align:left;}
	.footer__bottom .container{display:flex; justify-content: center; align-items:center;}
	.footer__secondary-logos img{width:250px; margin:0 75px;}
	.footer__copyright{margin-right:auto; flex:1;}
	.footer__logo{margin:0;}
	.footer__logo-img{width:175px; height:175px; }
	.footer nav{margin-left:auto; flex:1; text-align:right;}
}


/*-------------------------
forms
---------------------------*/
.gfield_label{display:block; margin-bottom:6px;}
.ginput_container{margin-bottom:20px;}
.ginput_container input{border:1px solid #EAEAEA;}
.ginput_container input,
.ginput_container textarea{width: 100%; height: 100%; padding:12px 15px;}
.ginput_container_textarea textarea{height:100px; border:1px solid #EAEAEA;}
.gfield_checkbox li{position:relative; display:inline-block; margin:10px 20px 0 0;}
.gfield_checkbox li label{margin-left:28px; color: #646569;}
.gfield_checkbox input { padding:0; position: absolute; bottom: 50%; left: 0; width:20px; height:20px; margin: 0; vertical-align:middle; background: #FFF; border:1px solid #CCC; cursor:pointer; border-radius:2px; 
	-webkit-transform: translateY(50%);
	transform: translateY(50%);	
}
.gfield_checkbox input:checked:after { font-size: .668rem; position: absolute; bottom: 50%; right: 50%; content:'\f00c'; color:#2f2540; font-family:'Font Awesome 5 Pro'; 
	-webkit-transform: translate(50%, 50%); transform: translate(50%, 50%);
}
form input::-webkit-input-placeholder, form textarea::-webkit-input-placeholder{color: #646569;}
form input::-moz-placeholder, form textarea::-moz-placeholder{ /* Firefox 19+ */ color: #646569;}
form input:-ms-input-placeholder, form textarea:-ms-input-placeholder{color: #646569;}
form input[type=text]:focus, form textarea:focus, form select:focus, form input[type=email]:focus, form input[type=phone]:focus, form input[type=email]:focus {border: 1px solid #2f2540;}
.gform_button{margin-top:20px; background:#2A8894; width:auto; box-shadow:none; font-weight:700; cursor: pointer; display: inline-block; color: #fff; padding: 10px 35px; text-align:center; transition:.3s;}
.gform_button:hover{background:#ffe400;}

.validation_error{color:#F32B11; margin-bottom: 20px;}
.validation_message{position: relative; margin-bottom: 6px; padding-left: 20px; color: #F32B11; font-weight: bold;}
.validation_message:before{content: '\f06a'; position: absolute; bottom: 0px; left: 0; font-family: 'Font Awesome 5 Pro'; font-weight: 400;}
.gform_confirmation_message{color: #23272C;}


/*-------------------------
custom radio button
---------------------------*/
[type="radio"]:checked,
[type="radio"]:not(:checked) {position: absolute;left: -9999px;}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label{position: relative;padding-left: 28px;cursor: pointer;line-height: 20px;display: inline-block;}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {content: '';position: absolute;left: 0;top: 2px; width: 18px;height: 18px; border: 1px solid #CCC; border-radius: 100%; background: #fff;}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {content: '';width: 12px;height: 12px;background: #2f2540;position: absolute;top: 5px;left: 3px;border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
[type="radio"]:checked + label:after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}


/*-------------------------
page header
---------------------------*/
.pg-header{display:flex; justify-content:center; align-items:center; min-height:350px; background-repeat: no-repeat; background-size:cover; padding: 30px 0 0 0; border-top:2px solid #000; max-width:1700px; margin:0 auto 0; text-align:center; position:relative; width:100%;}
.pg-header:after{content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:#FFF; opacity:.3; z-index:1;}
.pg-header__headline{position:relative; z-index:5; margin:0 auto; width:80%; max-width:700px; letter-spacing:4px; color:#ffe400; text-transform:uppercase; font-size:3rem; text-shadow: 0px -1px 16px rgba(0, 0, 0, .85); font-weight:700; font-family: 'Varela Round', sans-serif; line-height:1;}

@media only screen and (min-width : 768px) {
	
	.pg-header__headline{font-size:5rem;}
}
@media only screen and (min-width : 992px) {
	.pg-header{padding: 50px 0 0 0; height:100vh;}
	.pg-header__headline{font-size:5rem; }
}

/*-------------------------
page intro
---------------------------*/
.pg-intro{margin:20px 0; text-align:center;}

@media only screen and (min-width : 992px) {
	.pg-intro{margin:60px 0;}
}

/*---------------------------------------------------
Page Views  
- styles specific to a page or view, only used once
-----------------------------------------------------*/
/*-------------------------
standard page
---------------------------*/
.pg-standard{padding:100px 0 50px;}
.pg-standard__top-headline{letter-spacing:4px; color:#231f20; text-transform:uppercase; font-size:2.375rem; font-weight:700; margin-bottom:30px; font-family: 'Varela Round', sans-serif; line-height:1;}


@media only screen and (min-width : 992px) {
	.pg-standard{padding:200px 0 50px;}
	.pg-standard__top-headline{font-size:3rem; margin-bottom:50px;}

}

/*-------------------------
home
---------------------------*/
.pg-home__hero{height:350px; position:relative; width:100%; max-width:1700px; margin:0 auto 20px;}
.pg-home__hero-img{width: 100%; height: 100%; object-fit: cover; overflow: hidden; object-position:bottom;}
.pg-home__hero-overlay-img{position:absolute; bottom:30px; right:15px; z-index:5; width:35%; max-width:550px; min-width:125px; display:block;}
.pg-home__hero-overlay-img img{width:100%; height:auto; display:block;}
.pg-home__hero-strike{background:#E90201; height:5px; width:0; position:absolute; left:22%; bottom:41%; transform:translateY(41%); transition:.3s;}
.pg-home__hero-strike.is--active{width:29%;}

.pg-home__flavors{height:350px; border-top:2px solid #e3e3e3; padding-top:20px; max-width:1700px; margin:0 auto; text-align:center; position:relative; width:100%;}
.pg-home__flavors-img{display:block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; }
.pg-home__flavors-headline{letter-spacing:4px; color:#ff3500; text-transform:uppercase; font-size:3rem; text-shadow: 0px -1px 16px rgba(0, 0, 0, .85); font-weight:700; margin-bottom:30px; font-family: 'Varela Round', sans-serif; line-height:1;}
.pg-home__flavors .pg-home__container{position:absolute; bottom:70%; right:50%; transform:translate(50%, 70%);}

.pg-home__history{height:350px; border-top:2px solid #e3e3e3; padding-top:20px; max-width:1700px; margin:20px auto 0; text-align:center; position:relative; width:100%;}
.pg-home__history-img{opacity:.73; display:block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; }
.pg-home__history-headline{letter-spacing:4px; color:#ffe400; text-transform:uppercase; font-size:3rem; text-shadow: 0px -1px 16px rgba(0, 0, 0, .85); font-weight:700; margin-bottom:30px; font-family: 'Varela Round', sans-serif; line-height:1;}
.pg-home__history .pg-home__container{position:absolute; bottom:50%; right:50%; transform:translate(50%, 50%);}

@media only screen and (min-width : 768px) {
	.pg-home__hero{height:100vh;}
	.pg-home__hero-overlay-img{bottom:30px; right:60px;}
	.pg-home__down{position:absolute; bottom:15px; z-index:6; color:#E90201; width:100%; display:flex; align-items:center; text-align:center;}
	.pg-home__down:before{content:'\f078'; width:30px; height:30px; display:block; margin:0 auto; font-size:2.375rem;}
	.pg-home__history,
	.pg-home__flavors{height:100vh;}
	.pg-home__flavors-headline,
	.pg-home__history-headline{font-size:5rem;}
}
@media only screen and (min-width : 992px) {
	.pg-home__flavors-headline,
	.pg-home__history-headline{font-size:7.5rem; margin-bottom:60px;}

}


/*-------------------------
products
---------------------------*/
.pg-products .pg-header{margin-bottom:20px;}
.pg-products .pg-header__headline{color:#ff3500;}
.pg-products .pg-header:after{opacity:.1;}
.pg-products__group{border-top:2px solid #e3e3e3; padding:60px 0; text-align:center;}
.pg-products__type-headline{color:#231f20; letter-spacing:4px; text-transform:uppercase; font-size:2.375rem; font-weight:700; margin-bottom:30px; font-family: 'Varela Round', sans-serif; line-height:1;}
.pg-products__wrapper{display:flex; flex-wrap:wrap; justify-content:center;}
.pg-products__single{background:#e3e3e3; border-radius:15px; margin:0 20px 40px; padding:20px 55px; transition: all 300ms;}
.pg-products__single img{width:75px; height:auto; display:block; margin:0 auto; transition: all 300ms;}
.pg-products__title{display:none;}
.pg-products__single:hover{transform: scale(1.1); transition: all 300ms;}
.pg-products__single:hover img{ -webkit-transform: rotate(-15deg); transform: rotate(-15deg) scale(0.8); transition: ease-out .5s; }
.pg-products__single:hover .pg-products__title{display:block; position:absolute; bottom:10px; right:50%; transform:translateX(50%); font-weight:700; width:80%;}

@media only screen and (min-width : 600px) {
	.pg-products__single{margin:0 20px 40px; padding:20px 55px;}
	.pg-products__single img{width:90px;}
}
@media only screen and (min-width : 992px) {
	.pg-products__type-headline{font-size:2.5rem; margin-bottom:60px;}
}

/*-------------------------
history
---------------------------*/
.pg-history__videos,
.pg-history__ads{border-top:2px solid #e3e3e3; padding:40px 0; text-align:center;}
.pg-history__headline{color:#231f20; letter-spacing:4px; text-transform:uppercase; font-size:2.375rem; font-weight:700; margin-bottom:30px; font-family: 'Varela Round', sans-serif; line-height:1;}
.pg-history__ad{width:100%; height:auto; margin:0 auto; max-width:900px;}
.pg-history__video-wrapper{display:flex; flex-wrap:wrap;}
.pg-history__video{margin-bottom:20px; width:100%; position: relative;}
.pg-history__video-container{position: relative; padding-bottom: 75%;  overflow: hidden;}
.pg-history__video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}

@media only screen and (min-width : 992px) {
	.pg-history__videos,
	.pg-history__ads{padding:60px 0;}
	.pg-history__headline{font-size:3rem; margin-bottom:60px;}
	.pg-history__video-wrapper{display:flex;}
	.pg-history__video{flex:1;}
	.pg-history__video:first-of-type{margin-right:20px;}
}

/*-------------------------
locate
---------------------------*/
.pg-locate{text-align:center; padding:100px 0 50px;}
.pg-locate .pg-standard__top-headline{margin-bottom:20px;}
.pg-locate__intro{max-width:800px; margin:0 auto;}
.pg-locate__image{width:100%; height:auto; display:block; max-width:850px; margin:40px auto;}

@media only screen and (min-width : 992px) {
	.pg-locate{padding:170px 0 50px;}
}


/*-------------------------
contact
---------------------------*/
.pg-contact .pg-header__headline{color:#00B1C6;}
.pg-contact__form{max-width:750px; margin: 60px auto;}