/*
Theme Name: Zuko
Theme URI: Zuko
Description: Zuko - February 2018
Author:Jacob Raccuia
Author URI:jacobraccuia.com
Version:1.0
Tags:
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

ZUKO THEMING
NOTE:this style sheet is controlled by gulp.  please contact jacobraccuia for questions on what you need to run through for browser compatibility, etc.

Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background:transparent; border:0; margin:0; padding:0; vertical-align:baseline; }
* { margin:0px; padding:0px; }
html { overflow:-moz-scrollbars-vertical; color:#000; }
html { overflow-x:auto; }
h1, h2, h3, h4, h5, h6 { clear:both; font-weight:normal; }
ol, ul { list-style-type:none; }
blockquote { quotes:none; }
blockquote:before, blockquote:after { content:''; content:none; }
del { text-decoration:line-through; }
/* tables still n`d 'cellspacing="0"' in the markup */
table { border-collapse:collapse; border-spacing:0; }
input { background:transparent; }

:invalid { box-shadow:none; }
:-moz-submit-invalid { box-shadow:none; }
:-moz-ui-invalid { box-shadow:none; }
:focus { outline:none; }
::-moz-focus-inner { border:0; }

input[type=button], input[type=text], input[type=number], input[type=email], input[type=tel], input[type=button] select { -webkit-appearance:none; -webkit-border-radius:0px; border-radius:0; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity:1; }
abbr[data-original-title], abbr[title] { border:0px; cursor:default; }


::-webkit-scrollbar { -webkit-appearance:none; width:7px; }
::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); -webkit-box-shadow:0 0 1px rgba(255,255,255,.5); }




/***********************************************/


html { overflow:-moz-scrollbars-vertical; overflow-x:hidden; }

body.navbar-inverse { background:transparent; padding:25px; border:0px; }
body { font-size:15px; color:#3b3d40; border:0px solid #fff; font-family:Arial, sans-serif; position:relative; text-rendering:optimizeLegibility; -webkit-font-feature-settings:'kern' 1; font-feature-settings:'kern' 1; }
body.logged-in { padding-top:32px; }

a { color:#2e71f2; text-decoration:none; transition:.5s ease color, .5s ease background-color; }
a:hover { color:#2e71f2; text-decoration:underline; }
a:active { color:#2e71f2; }
a:visited { color:#2e71f2; text-decoration:none; }
a:focus { text-decoration:none; outline:none; }
img { display:block; }
svg { width:100%; height:100%; }

h1 { font-size:45px; line-height:60px; margin:0px 0px 20px; font-weight:600; }
h2 { font-size:36px; line-height:52px; margin:0px 0px 20px; font-weight:600; }
h3 { font-size:24px; line-height:30px; margin:0px 0px 10px; font-weight:400; }
h4 { font-size:18px; line-height:24px; margin:0px 0px 10px; font-weight:600; }
h5 { font-size:16px; line-height:20px; margin:0px 0px 0px;  font-weight:600; }
h6 { font-size:14px; line-height:18px; margin:0px 0px 0px; font-weight:600; }

.uppercase { text-transform:uppercase; }
.lowercase { text-transform:inherit; }

a p { font-weight:400; }
strong, b { font-weight:bold; }

.text-wrapper, p { font-size:15px; line-height:24px; margin-bottom:20px; }

hr { margin:10px auto; }

section { overflow:hidden; margin:0px auto 0px; padding:0px; }

.hideme { display:none!important; }


/* create separate css for "bootstrap" */
/* create a drag and drop interface to determine which elements get what colors


/* code the  theme is actually using */


/*****************/
/* theme general */
/****************/


#page-progress { width:0px; position:absolute; top:0px; height:2px; display:none; z-index:999; background-color:#2e71f2; background:linear-gradient(to right, #3b3d40, #2e71f2); }
.logged-in #page-progress { top:32px; }


/**********************/
/* styling zuko grid */
.tight-col { padding-left:0px; padding-right:0; }
.large-icon i { font-size:40px; }
.product-header { margin-top:40px; }
.product-text { width:75%; margin:0px auto; margin-bottom:25px; }

.play-button:hover .fa-play-circle { color:#fff; }
.button a { color:white; }
.footer-menu a { color:#3b3d40; }

@media (max-width:575px) {

  .hp-product-text { text-align:center!important; }
  .product-header { margin-top:20px; }
  .product-header:first-child { margin-top:0px; }
  .product-text { margin-bottom:30px; }

}

/* alignment for columns, at least.. */
.align-left { text-align:left; }
.align-center { text-align:center; }
.align-right { text-align:right; }

/* padding helper classes */
.lg-padding { padding:30px; }
.md-padding { padding:20px; }
.sm-padding { padding:15px; }
.xs-padding { padding:10px; }

/* images */

/*.featured-image:hover, .blazy.b-loaded:hover { opacity:.8; }*/
.featured-image { overflow:hidden; position:relative; width:100%; height:275px; clear:both; display:block;
  -moz-transform:rotate(0);
  -webkit-backface-visibility:hidden;
  -webkit-transform:translate3D(0,0,0);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

/*.featured-image:after { position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.2); content:'' transition:1s ease background-color; }
.featured-image:hover:after { background-color:rgba(0,0,0,.3); }
*/

[class^="col-"] img { display:block; max-width:100%; height:auto; }
.left-aligned.col-image img { float:left; }
.right-aligned.col-image img { float:right; }


/* forms */
form { text-align:left; }
.form-centered { text-align:center; }
select, input, textarea { padding:8px 10px; font-size:14px; border:0px; margin:5px auto 12px; }
label { display:block; text-align:left; margin:10px 0 5px; }
textarea { width:100%; margin-bottom:30px; }

input { background-color:white; }
input.bottom-border { border-bottom:1px solid #3b3d40; }
input ~ input { margin-left:20px; }

.contact-form { max-width:700px; margin:0px auto; }
.div.wpcf7-mail-sent-ok { border:0px; color:green; }

.contact-form input[type="text"], .contact-form input[type="email"] { width:100%; }




div.youtube { position:relative; padding-bottom:56.26%; height:0; overflow:hidden; max-width:100%; width:100%; background:#000; margin-bottom:10px; }
div.youtube iframe { position:absolute; top:0; left:0; width:100%; height:100%; z-index:100; background:transparent; }
div.youtube img { bottom:0; display:block; left:0; margin:auto; max-width:100%; width:100%; position:absolute; right:0; top:0; border:none; height:auto; cursor:pointer; -webkit-transition:.4s all; transition:.4s all; }
div.youtube .play { height:72px; width:72px; left:50%; top:50%; margin-left:-36px; margin-top:-36px; position:absolute; background:url("//i.imgur.com/TxzC70f.png") no-repeat; cursor:pointer; }




.loading-ajax { display:none; }





/*****************************/
/* are these even used */
/* some definitely are!!!!! */
/* helper classes */

.left-aligned { text-align:left; }
.right-aligned { text-align:right; }
.center-aligned { text-align:center; }
.justify-aligned { text-align:justify; }

.vertical-align { display:flex; align-items:center; }
.col-text img { margin:0px auto; }

h1.content-header { margin-bottom:0px; }

img.img-responsive { width:100%; height:auto; margin-bottom:10px; }
img.rounded { border-radius:50%; }

img.alignleft { float:left; margin:10px 35px 20px 0px; display:inline-block; }
img.alignright { float:right; margin:10px 0px 20px 45px; display:inline-block; }

/* forms */
.form-centered { text-align:center; }
select, input, textarea { padding:8px 10px; font-size:14px; border:0px; margin:5px auto 12px; }
label { display:block; text-align:left; margin:10px 0 5px; }
textarea { width:100%; margin-bottom:30px; }

input { background-color:white; }
input.bottom-border { border-bottom:1px solid #3b3d40; }
input ~ input { margin-left:20px; }

.contact-form { max-width:700px; margin:0px auto; }
.div.wpcf7-mail-sent-ok { border:0px; color:green; }

.contact-form input[type="text"], .contact-form input[type="email"] { width:100%; }

.mc4wp-form :before {
  display:block;
  content:' ';
  margin-top:-285px;
  height:285px;
  visibility:hidden;
}


/****** use ninja form *******/
/*** for all contact stuff ***/
.nf-field-label label { font-weight:400; }



/* tables */

.table { width:100%; max-width:100%; margin-bottom:1rem; background-color:transparent; }
.table th, .table td { padding:0.75rem; vertical-align:top; }
.table thead th { vertical-align:bottom; }

.table-bordered { border:1px solid #dee2e6; }

.table-bordered th, .table-bordered td { border:1px solid #dee2e6; }

.table-bordered thead th, .table-bordered thead td { border-bottom-width:2px; }

.table-striped tbody tr:nth-of-type(odd) { background-color:rgba(0, 0, 0, 0.05); }

/* social media */
.social-media li { display:inline-block; margin:0px 4px; }
.social-media a { font-size:16px; }


/* img alignment and caption */
/* i need to target the wp page and not the taskbar... */
section .wp-caption { position:relative; clear:both; }
section .alignnone { width:100%!important; overflow:hidden; margin:25px 0px; display:block; }
section .alignleft { float:left; max-width:450px; max-height:400px; height:auto!important; margin:0px 25px 20px 0px; }
section .alignright { float:right; max-width:450px; max-height:400px; height:auto!important; margin:0px 0px 20px 25px; }

.wp-caption img { width:100%!important; height:auto!important; }

.wp-caption .wp-caption-text { position:absolute; bottom:0px; right:0px; color:#DDD; padding:8px 15px 5px; background:rgba(0,0,0,.2); font-size:12px; text-transform:uppercase; font-weight:300; letter-spacing:1.5px; line-height:18px; margin:0; }


/* large */
@media (max-width:1999px) {


}

/* medium */
@media (max-width:991px) {

  /* move this to bootstrap grid file */
  .container { width:100%; }

  /* specific for player to maintain ratio while centered */
  .youtube-player { max-height:75vh; max-width:133.35vh; }

  [class^="col-"].left-aligned:first-child, [class^="col-"].right-aligned:first-child { padding-left:40px; }
  [class^="col-"].left-aligned:last-child, [class^="col-"].right-aligned:last-child { padding-right:40px; }


/*
  .mobile-toggle { display:none; }
  .mobile-trigger { display:block; }
  .mobile-toggle { position:absolute; top:70px; background:white; left:0; width:100%; padding:20px; z-index:2000; }
  .nav li { display:block; margin:0px 0px 10px; }

  */


  .right-aligned.col-image img, .left-aligned.col-image img { float:none; margin:10px auto 0px; }

  /* why */
  /* commenting it all out ugh */
  /*[class^="col-"] { padding-left:30px; padding-right:30px; } */
  /* writing class below to fix, not sure if has a purpose */
  /*.row { margin-left:-30px; margin-right:-30px; }*/

  img.alignleft { width:50%; }
  img.alignright { width:50%; }

}



/* adjust for wp bar changing */
@media (max-width:782px) {

  body.logged-in { padding-top:46px; }

}

/* small */
@media (max-width:767px) {

  .container .row { display:block; }

  h1 { font-size:28px; line-height:32px; }
  h2 { font-size:24px; line-height:28px; }
  h3 { font-size:20px; line-height:24px; }
  h4 { font-size:18px; line-height:22px; }
  h5 { font-size:16px; line-height:20px; }
  h6 { font-size:14px; line-height:18px; }



  .featherlight .featherlight-content { padding-left:10px; width:90%; }
  .featherlight .featherlight-close-icon { width:30px; height:30px; }

  .youtube-player { height:calc(56.25vw - 15px); }

  .col-12 .content { margin-bottom:15px; }

}


/* remove wp bar */
@media (max-width:600px) {

  html { margin-top:0px; }
  #wpadminbar { display:none; }
  body.logged-in { margin-top:0; padding-top:0; }

}

/* xs */
@media (max-width:575px) {

  .image-wrapper { max-width:100%!important; }

  .col-12 .content { margin-bottom:20px; }

}

/* navigation */

nav { position:relative; padding:35px; margin:0px auto; text-align:left; display:flex; align-items:center; width:100%; }
/* note - it has opacity 0 because it fades in using intense sticky code! */
nav.stuck { position:fixed!important; background:white; box-shadow:7px 0 22px -10px rgba(0,0,0,0.4); opacity:0; z-index:5000!important; padding:25px 20px; }

nav.container { position:static; }
.overlay-nav nav { position:absolute; top:0; width:100%; left:0; z-index:100; margin-bottom:0; }

.admin-bar.overlay-nav nav { top:32px; }

/* overwrite the sticky height when overlay */
.overlay-nav .sticky-wrapper { height:0!important; }


.header-nav li { display:inline-block; margin:0; }


.header-nav > li > a { padding:0 10px; }

.stuck { top:0; width:calc(100% - 50px); /* why is this here */ width:100%; z-index:1000; }
.admin-bar .stuck { top:32px; }

.navbar-logo { display:inline-block; xwidth:150px; z-index:2006; }
.navbar-logo img { width:100%; height:auto; padding-left:0px; vertical-align:middle; display:inline; }

/* overlay nav basics */

/* underline links on hover, on overlay */
.overlay-nav a:hover { text-decoration:underline; }


.mobile-menu { margin-left:auto; }



/* header variations */
/*****************/

/* header default */
.header-default .menu-wrapper { margin-left:auto; }
.header-default .dropdown .menu-item-logo { display:none; }
@media (max-width:991px) {
 .header-default .dropdown .navbar-logo { display:block; }
    }

/* header default 2 */
.header-default-2 .menu-wrapper { margin-right:auto; }


/* header default 4 */
.header-default-4 nav { flex-direction:column; align-items:normal; }
.header-default-4 .menu-wrapper { margin-top:30px; }
.header-default-4 .header-nav > li { margin:0px 25px 0 0; }
.header-default-4 .mobile-menu { margin-left:auto; }
.header-default-4 .dropdown .menu-item-logo { display:none; }
@media (min-width:992px) {
 .header-default-4 .menu-wrapper::before { content:''; width:100%; }
    }
@media (max-width:991px) {
 .header-default-4 .dropdown .navbar-logo { display:block; }
    }


.header-center nav { flex-direction:column; }


.header-center .menu-wrapper { margin-top:15px; }


@media (max-width:991px) {
 .header-center nav { flex-direction:row; }
    }

.header-center-2 nav { flex-direction:column; }

.header-center-2 .menu-wrapper { margin-top:15px; width:100%; }

.header-center-2 .nav > li { line-height:30px; }

.header-center-2 .nav > .before-logo { float:left; }

.header-center-2 .nav > .after-logo { float:right; }

.header-center-2 .nav .navbar-logo { position:absolute; margin-top:-25px; margin-left:0px; margin-right:0px; left:50%; transform:translateX(-50%); }

@media (max-width:991px) {
 .header-center-2 nav { flex-direction:row; }
    }

.header-center-3 nav { flex-direction:column; }

.header-center-3 .menu-wrapper { margin-top:15px; }

.header-center-3 .navbar-logo { margin-right:0; }

.header-center-3 nav:not(.navbar-open) .mobile-menu { margin-left:0; }

.header-center-3 nav:not(.navbar-open) #veggie { position:relative; float:none; right:auto; xtransform:translateX(-50%); top:auto; }

.header-center-3 nav.navbar-open #veggie { top:17px; }

.header-center-3 nav.navbar-open .menu-wrapper { margin-top:0; }

@media (max-width:991px) {
 .header-center-3 xnav { flex-direction:row; }
    }




/* show mobile menu if desktop menu is set */
.desktop-veggie .mobile-menu { display:block; }
.mobile-menu { display:none; }
.mobile-menu .navbar-logo { display:none; }

.nav li a { color:#3b3d40; text-decoration:none; }
.navbar-center .header-nav { text-align:center; }



/* logo in center of nav */

.logo-center .nav .navbar-logo { position:absolute; margin-top:-20px; margin-left:0px; margin-right:0px; left:50%; transform:translateX(-50%); }

/* hide mobile logo */
.mobile-logo { display:none; }

/* default hovers - overwritten in theme_css */
.header-nav.active li a, .header-nav li a:hover { color:#2e71f2; }




/* medium */
@media (min-width:992px) {

    /* second lvl dropdown menu */
    /* the pseudo element is used to emulate a hover status.. seems like a bad hack */
    .menu-item-has-children { position:relative; }
    .menu-item-has-children::before { content:""; position:absolute; bottom:-20px; height:22px; width:100%; }

    .menu-item-has-children:hover .secondary-menu { display:block; }

    .secondary-menu { display:none; position:absolute; width:180px; margin-right:-90px; right:50%; padding:1px; background:#3b3d40; margin-top:15px; z-index:10; box-shadow:3px 3px 8px -3px rgba(0,0,0,.5); }
    .secondary-menu::after { content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); border:9px solid transparent; border-bottom:9px solid #3b3d40; border-top:0; z-index:1; }
    .secondary-menu::before { content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); border:9.5px solid transparent; border-bottom:9.5px solid #fff; border-top:0; z-index:2; }

    .secondary-menu li { display:block; background:white; padding:0; margin:0; }

    .secondary-menu li:first-child a { padding-top:14px; }

    .secondary-menu li:last-child a { padding-bottom:14px; }

    .secondary-menu li a { color:#3b3d40; padding:7px 18px; display:block; }
    .header-nav .secondary-menu li a { color:#3b3d40; }


    .overlay-nav .menu-item .secondary-menu { background:#EEE; }
    .overlay-nav .menu-item .secondary-menu::after { border-bottom-color:#EEE; }

}


/***##***#@@#***##***/
/***##***#@@#***##***/
/* veggie ## burger */
/* eat your veggies */
/***##***#@@#***##***/
/***##***#@@#***##***/

#veggie { height:35px; width:35px; float:right; cursor:pointer; position:absolute; display:block; z-index:2001; top:40px; right:40px; }

.veggieburger { width:24px; height:21px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:.5s ease-in-out; cursor:pointer; }
.veggieburger span { display:block; position:absolute; height:4px; width:50%; background:#333; opacity:1; transform:rotate(0deg); transition:.25s ease-in-out; }

#veggie.menu-active:hover span, .menu-active span { width:60%; }
.veggieburger span:nth-child(even) { left:50%; border-radius:0 1px 1px 0; }
.veggieburger span:nth-child(odd) { left:0px; border-radius:1px 0 0 1px; }
.veggieburger span:nth-child(1), .veggieburger span:nth-child(2) { top:0px; }
.veggieburger span:nth-child(3), .veggieburger span:nth-child(4) { top:8px; }
.veggieburger span:nth-child(5), .veggieburger span:nth-child(6) { top:16px; }
.menu-active .veggieburger span:nth-child(1), .menu-active .veggieburger span:nth-child(6) { transform:rotate(45deg); }
.menu-active .veggieburger span:nth-child(2), .menu-active .veggieburger span:nth-child(5) { transform:rotate(-45deg); }
.menu-active .veggieburger span:nth-child(1) { left:0px; top:4px; }
.menu-active .veggieburger span:nth-child(2) { left:calc(50% - 2px); top:4px; }
.menu-active .veggieburger span:nth-child(3) { left:-50%; opacity:0; }
.menu-active .veggieburger span:nth-child(4) { left:100%; opacity:0; }
.menu-active .veggieburger span:nth-child(5) { left:0px; top:14px; }
.menu-active .veggieburger span:nth-child(6) { left:calc(50% - 2px); top:14px; }

.overlay-nav .veggieburger span { background:#fff; }
.overlay-nav #veggie.menu-active:hover span, .overlay-nav .menu-active span { background:#fff; }

/* don't do hover effects on ios */
@supports not (-webkit-overflow-scrolling: touch) {

    #veggie:hover span { background:#828282; }
    #veggie.menu-active:hover span { background:$gradient-gray; }
    #veggie.menu-active:hover span, .menu-active span { background:#333; }

}

/* mobile toggle & triggers */
.mobile-trigger { display:none; }


/**** dropdown menu ****/



/* medium */
@media (max-width:991px) {

    .navbar-open .menu-wrapper.dropdown { display:block; }

    /* apply the classes immediately! we show the damn hamburger at this breakpoint anyways */

    #navbar .menu-item-has-children > a { position:relative; }

    #navbar .menu-item-has-children > a::after { content:'\f107'; vertical-align:middle; font-family:'Font Awesome 5 Pro'; padding-left:5px; }

    #navbar .secondary-menu { padding:10px; background:#f9f9f9; margin:5px auto; }

    #navbar .nav li { display:block; text-align:center; float:none; margin:0; }

    #navbar .nav > li { line-height:35px; }

    #navbar .secondary-menu { font-size:90%; }

    #navbar .secondary-menu li { line-height:25px; }

    .navbar-logo { margin-right:65px; }

    nav.navbar-open { opacity:1; }
}





/***************/
/* cabinet nav */
/**************/

.cabinet-logo { display:none; }

.navbar-open .cabinet, .desktop-veggie .cabinet { width:260px; height:100vh; position:fixed; right:-260px; background:white; top:0px; padding:40px 20px; z-index:1000; }

.navbar-open .cabinet.push, .desktop-veggie .cabinet.push { box-shadow:inset 7px 0 24px -19px rgba(0,0,0,0.4); }

.navbar-open .overlay.cabinet, .desktop-veggie .overlay.cabinet { width:0; right:0; transition:.3s ease width; padding:35px 20px; }

.navbar-open .cabinet ul, .desktop-veggie .cabinet ul { margin:0px auto; width:90%; text-align:center; }

.navbar-open .cabinet li, .desktop-veggie .cabinet li { display:block; }

.navbar-open .cabinet .nav > li, .desktop-veggie .cabinet .nav > li { margin:10px auto; }

.navbar-open .cabinet .secondary-menu li, .desktop-veggie .cabinet .secondary-menu li { line-height:30px; }

.navbar-open .cabinet-logo, .desktop-veggie .cabinet-logo { margin:20px 20px 60px; display:block; }

.navbar-open .cabinet-logo img, .desktop-veggie .cabinet-logo img { max-width:80%; max-height:110px; width:auto; height:auto; margin:0px auto; }

.navbar-open .overlay.cabinet .cabinet-logo, .desktop-veggie .overlay.cabinet .cabinet-logo { margin:0; margin:0px 65px 30px 10px; }

.navbar-open .overlay.cabinet .cabinet-logo img, .desktop-veggie .overlay.cabinet .cabinet-logo img { max-width:100%; width:100%; padding-left:0px; vertical-align:middle; display:inline; }

/* for overlay cabinet */

.navbar-open.menu-wrapper.overlay.cabinet, .desktop-veggie.menu-wrapper.overlay.cabinet { display:block; width:0; height:0; }

.navbar-open .navbar-logo, .desktop-veggie .navbar-logo { display:none; }

.navbar-open .overlay.cabinet, .desktop-veggie .overlay.cabinet { width:100%; height:calc(100vh + 70px); margin:0; }

/* cabinet-push class applied to html element when open */

.fw-overlay body { position:fixed; overflow-y:scroll; }
.cabinet-push, .cabinet-overlay { overflow:hidden; position:fixed; }
.cabinet-overlay nav { width:100vw; margin:0; }

.cabinet-push .navbar-open .navbar-logo { display:block; }


.admin-bar .navbar-open .overlay.cabinet { top:32px; }


/******************/
/* fw overlay nav */
/******************/

/* notes for future. we need to separate desktop veggie settings from open // media query settings */
/* mostly ignoring this for now */

/* need to redo all of this shit.
/* when redoing, make sure all styles for the dropdown menu are in the breakpoint for showing the menu */
/* this is so when you resize it past the breakpoint, it doesn't have any of the extra styles */
/* definitely try to find a way to code it for the setting in admin, at least eventually. */

.desktop-veggie .fw.overlay { transition:.5s ease width; right:0; }

.desktop-veggie .fw.overlay.left { left:0; right:auto; }


/* breakpoint for navbar */
@media (max-width:991px) {

    .navbar-open .fw.overlay { width:100vw; }

    .admin-bar .fw.overlay { top:32px; }
    .fw.overlay { width:0; height:100vh; left:0; top:0; overflow:hidden; z-index:3000; position:fixed; transition:.5s ease-in-out width, .5s ease-in-out opacity; background:white; display:block; }
    .fw.overlay .cabinet-logo { margin:0px 65px 30px 10px; }
    .fw.overlay .cabinet-logo img { max-width:100%; max-height:110px; width:100%; height:auto; margin:0px auto; }

}



/* large */
@media (max-width:1999px) {


}

/* medium */
@media (max-width:991px) {


    .menu-wrapper.dropdown { background:#fff; position:absolute; top:118px; left:0; width:100%; max-width:100%; padding:0 20px 20px; z-index:2000; box-shadow:0px 5px 6px -5px rgba(0, 0, 0, 0.4); }


    .sticky-wrapper .navbar-logo img { opacity:0; transition:.5s ease opacity; }
    .stuck .navbar-logo img { opacity:1; }


    /* control the cabinet movement */
    /* opacity looks cooler! */
    nav .menu-wrapper { opacity:0; display:none; }
    nav.navbar-open .menu-wrapper { opacity:1; display:block; }
    .mobile-menu { display:block; z-index:4000; }

    /* comment out cause i don't know why it is here
    nav.overlay-nav { padding-top:20px; }
    */


    nav.navbar-open .menu-wrapper { xtop:0; }

    /* hide the logo in the dropdown menu */
    nav .nav .menu-item-logo { display:none; }
    .mobile-menu .navbar-logo { display:inline-block; width:90px; }

    .standard-mobile-logo, .dropdown-mobile-logo { margin-left:20px; }

    .standard-mobile-logo { display:block; }
    .navbar-open .standard-mobile-logo { display:none; }
    .navbar-open .dropdown-mobile-logo { display:block; }


}


/* adjust for wp bar changing */
@media (max-width:782px) {


    .admin-bar .fw.overlay, .admin-bar.overlay-nav nav, .admin-bar .navbar-open .overlay.cabinet { top:46px; }

    .navbar-open .cabinet { padding-top:46px; }


}

/* small */
@media (max-width:767px) {

    /*what this do */
    /* removing???? .admin-bar .sticky-wrapper { margin-bottom:30px; } */
    nav.stuck { width:100%; padding:20px; }

    .navbar-open .overlay.cabinet .cabinet-logo { margin-left:0px; }

}


/* remove wp bar */
@media (max-width:600px) {


    .admin-bar .fw.overlay, .admin-bar.overlay-nav nav, .admin-bar .navbar-open .overlay.cabinet { top:0; }

    .admin-bar .stuck { top:0px; }

    .admin-bar .cabinet { top:-32px; }




}

/* xs */
@media (max-width:575px) {

    .navbar-logo { padding-right:0px; }
    #navbar { padding:35px 20px; }
    #veggie { right:25px; }


    /* commented out because it doesn't make sense to me */
    /* it depends on the padding on the navbar */
    /*.navbar-logo img { margin-left:20px; }*/



}