@font-face {
    font-family: 'Mada-Regular';
    src: url('../fonts/Mada-Regular/Mada-Regular.eot');
    src: url('../fonts/Mada-Regular/Mada-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Mada-Regular/Mada-Regular.woff2') format('woff2'),
        url('../fonts/Mada-Regular/Mada-Regular.woff') format('woff'),
        url('../fonts/Mada-Regular/Mada-Regular.ttf') format('truetype'),
        url('../fonts/Mada-Regular/Mada-Regular.svg#Mada-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Mada-Bold';
    src: url('../fonts/Mada-Bold/Mada-Bold.eot');
    src: url('../fonts/Mada-Bold/Mada-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Mada-Bold/Mada-Bold.woff2') format('woff2'),
        url('../fonts/Mada-Bold/Mada-Bold.woff') format('woff'),
        url('../fonts/Mada-Bold/Mada-Bold.ttf') format('truetype'),
        url('../fonts/Mada-Bold/Mada-Bold.svg#Mada-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap; }

@font-face { font-family: 'Mada-Light';    src: url('../fonts/Mada-Light/Mada-Light.eot');    src: url('../fonts/Mada-Light/Mada-Light.eot?#iefix') format('embedded-opentype'),        url('../fonts/Mada-Light/Mada-Light.woff2') format('woff2'),        url('../fonts/Mada-Light/Mada-Light.woff') format('woff'),        url('../fonts/Mada-Light/Mada-Light.ttf') format('truetype'),        url('../fonts/Mada-Light/Mada-Light.svg#Mada-Light') format('svg');    font-weight: 300;    font-style: normal;    font-display: swap;}/* Site */ a.c-btn{ border-radius: 26px 0px 26px 0px;
    display: inline-block;
    padding: 6px 63px 6px 63px;
    border: 2px solid #fff;
    font-family: 'Mada-Regular';
    color: #fff;
    font-size: 22px;
    letter-spacing: 6.5px; }

img {
    vertical-align: middle;
    border-style: none;
}
img {
    display: inline-block;
    vertical-align: middle;
}

img {
    -ms-interpolation-mode: bicubic;
}
img {
    max-width: 100%;
    height: auto;
}


#masthead{ /*background-color: #f0f;*/
    margin-bottom: -42px; }

#masthead .row{ max-width: 1280px;
    margin: 0 auto !important; }

#masthead:before{ content: "";
    background: rgb(255,255,255);
    background: linear-gradient( 0deg, rgb(255 255 255 / 0%) 65%, rgb(0 0 0 / 65%) 100%);
    width: 100%;
    height: 50%;
    display: block;
    position: absolute;
    z-index: 9; }

#masthead .col-2,
#masthead .col-8{ width: 30%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 99; }

#masthead .col-2{ width: 17%; }

#masthead .col-8{ width: 69%; }

#masthead .col-2.search-lang{ width: 4%; }

#main-navigation .sub-menu .sub-menu{ left: 115% !important; }

/*#masthead #menu-menu-top-dektop ul{ opacity: 0;
    display: block;
    -webkit-transition: all 1.0s ease 0s;
    -moz-transition: all 1.0s ease 0s;
    -o-transition: all 1.0s ease 0s;  }

#masthead #menu-menu-top-dektop .menu-item-has-children:hover ul{ display: block !important;
    opacity: 1; }

#masthead #menu-menu-top-dektop .menu-item-has-children:hover ul ul{ display: none !important; }

#masthead #menu-menu-top-dektop .menu-item-has-children:hover ul .menu-item-has-children:hover ul{ display: block !important;
    opacity: 1; }*/

/**/

.sf-menu ul {
    padding: 0;
    list-style: none;
    text-align: left;
    margin: 0px 0% 0 0;
    }
.sf-menu li ul {
    top: -999em;
    position: absolute;
    z-index: 99999;
    }
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    top: 40px;
    }
.sf-menu li:hover li ul,
.sf-menu li.sfHover li ul {
    top: -999em;
    }
.sf-menu li li:hover ul,
.sf-menu li li.sfHover ul {
    top: 0;
    left: 170px;
    }
.sf-menu li li:hover li ul,
.sf-menu li li.sfHover li ul {
    top: -999em;
    }
.sf-menu li li li:hover ul,
.sf-menu li li li.sfHover ul {
    top: 0;
    left: 170px;
    }
.sf-menu li {
    position: relative;
    visibility: inherit;
    display: inline-block;
    vertical-align: top;
    }
.sf-menu li a {
    float: left;
    display: block;
    }
.sf-menu li:hover li a,
.sf-menu li.sfHover li a {
    width: 130px;
    }

#main-navigation {
    clear: both;
    padding: 0px 0 0;
    margin: 0 -30px 0 -30px;
    }
#main-navigation .sf-menu {
    /* background: #ccc; */
    }
#main-navigation .sf-menu > ul > li:after {
    /*width: 1px;
    float: left;
    margin: 15px 0 0;
    content: "|";
    display: block;
    color: #666;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;*/
    }
#main-navigation .sf-menu > ul > li:last-child:after {
    display: none;
    }
#main-navigation .sf-menu > ul > li:hover:after,
#main-navigation .sf-menu > ul > li.sfHover:after,
#main-navigation .sf-menu > ul > li.current_page_item:after,
#main-navigation .sf-menu > ul > li.current-menu-item:after {
    color: #428bca;
    }
#main-navigation li a{
    margin: 0 0px 0 0px;
    padding: 0 0px 0 0px;
    color: #121e37;
    font-size: 12.1px;
    font-weight: 400;
    font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 50px;
    letter-spacing: 2.3px;
    }
#main-navigation li:last-child a{ margin: 0 0px 0 0px; }
#main-navigation li:hover ul,
#main-navigation li.sfHover ul {
    top: 50px;
    background: #428bca;
    background: rgb(253 253 253 / 75%);
    }
#main-navigation li li:hover ul,
#main-navigation li li.sfHover ul {
    top: 0;
    border-left: 1px solid #2074b1;
    }
#main-navigation li li {
    border-bottom: 0px solid #2074b1;
    height: 43px;
    }
#main-navigation li li a {
    /*color: #9fe0ff;*/
    }
#main-navigation li a:hover,
#main-navigation li.sfHover > a,
#main-navigation li.current_page_item > a,
#main-navigation li.current-menu-item > a,
#main-navigation li.current-menu-parent > a,
#main-navigation li.current-page-parent > a,
#main-navigation li.current-page-ancestor > a,
#main-navigation li.current_page_ancestor > a {
    color: #FFDF00;
    background-color: #00552c;
    }
#main-navigation li:hover li a,
#main-navigation li.sfHover li a {
    margin: 0;
    padding: 10px 20px;
    font-size: 1.1em;
    text-transform: none;
    line-height: normal;
    color: #215732;
    font-family: 'Mada-Regular';
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;

    }
#main-navigation li:hover li a:hover,
#main-navigation li.sfHover li a:hover {
    background: transparent;
    color: #FFDF00;
    }

/* Small Navigation */
.nav-open,
.nav-close {
    display: none;
    color: #333;
    font-size: 1.2em;
    font-weight: 400;
    font-family: "GothamHTF-Bold", Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 50px;
    letter-spacing: 1px;
    background: #ccc;
    }

/**/

#logo-top{ margin: 13px 0 0 4px;
    display: inline-block; }

    #main-navigation li a{ font-family: 'Mada-Bold';
    font-size: 17px;
    letter-spacing: 0.55px;
    color: #fff;
    padding: 26px 28px 22px 28px; }

    .search-lang a.search{ color: #FFDF00;
    border: 2px solid #FFDF00;
    padding: 10px;
    border-radius: 50px;
    margin: 30px 0 0 7px;
    display: inline-block;
    height: 40px;
    line-height: 0px; }

    .search-lang a.search:hover{ color: #8abd24;
    border-color: #8abd24; }

    .lang{ display: inline-block;
    vertical-align: top;
    margin: 34px 0 0 61px; }

    .lang a{ display: inline-block;
    vertical-align: top;
    font-family: 'Mada-Bold';
    color: #215732;
    border: 2px solid #FFDF00;
    background-color: #FFDF00;
    margin: 0 -3px;
    border-radius: 13px 0px 0px 0px;
    padding: 5px 7px 0px 7px;
    line-height: 28px; }

    .lang a:hover{ text-decoration: none; }

    .lang a:nth-child(2){ border-radius: 0px 0px 13px 0px;
    color: #FFDF00;
    border: 2px solid #FFDF00;
    background-color: transparent; }

    .lang:hover a{ color: #FFDF00;
    background-color: transparent; }

    .lang:hover a:hover{ color: #215732;
    background-color: #FFDF00; }

    .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
    background-color: #fff;
    box-shadow: 2px 2px 0px #00552c;} .fat-nav { -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0); }

    #inner-menu{ background-color: #215732;
    width: 90%;
    float: right;
    border-radius: 0px 0px 0px 13px;
    padding: 0 12% 40px 12%;
    right: -90%;
    position: relative;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s; }

    .fat-nav.active #inner-menu{ right: 0%; }

    #inner-menu #logo-menu{ display: block;
    margin: 11px auto 23px auto;
    width: 90px; }

    #inner-menu li{ text-align: left;
    margin-bottom: 0px;
    position: relative;
    font-size: 16px;
    min-height: 81px; }

    #inner-menu li:before{ content: "";
    width: 97%;
    height: 1px;
    background-color: #fff;
    display: block;
    top: 48px;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s; }

    #inner-menu li:last-child:before{ display: none; }

    #inner-menu li.act:before{ width: 0; }

    #inner-menu li a{ font-size: 22px;
    text-align: left;
    font-family: 'Mada-Bold'; }

    #inner-menu form{ border: 2px solid #ffdf00;
    width: 100%;
    margin: 0 auto 30px auto;
    border-radius: 35px; }

    #inner-menu form input[type=text]{ background-color: transparent;
    border-color: transparent;
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px 0 10px;
    color: #FFDF00;
    height: 28px;
    width: 85%; }

    #inner-menu form button{ background-color: transparent;
    border-width: 0px;
    padding: 0;
    font-size: 15px;
    float: right;
    margin: 0 13px 0 0; }

    #inner-menu form button i{ color: #FFDF00;
        top: 10px;
        position: relative; }

    #inner-menu li.menu-item-has-children:after{ content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    
    background-image:url("http://www.nutrioli.com/wp-content/themes/Nutrioli/img/row-b.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-90deg);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    right: 0;
    top: 9px;
    z-index: 999;
    cursor: pointer; }

    #inner-menu li.act:after{ transform: rotate(90deg); }

    #inner-menu li.act{ /*margin-bottom: 7px;*/ }

    #inner-menu li.menu-item-has-children ul{ width: 80%;
    display: block;
    padding: 35px auto 0 auto;
    overflow: hidden;
    height: 0;
    /*transform: scaleY(0);  */
    opacity: 0;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s; }

    #inner-menu .menu-mbl li.menu-item-has-children ul{ padding: 35px 0 0 0px !important;
    width: 110% !important; }

    #inner-menu .menu-mbl li ul li{ padding: 0px !important; }

    #inner-menu li.menu-item-has-children ul ul{ padding: 0; }

    #inner-menu li.act ul{ height: auto; 
    opacity: 1;
    /*transform: scaleY(1); */ }

    #inner-menu li.menu-item-has-children ul li{ margin-bottom: 0px;
        width: 93.1%;
        /*font-size: 16px;*/ }

    #inner-menu .menu{ margin: 0 auto;
    display: block;
    width: 100%; }/*  */.fat-nav__wrapper{ transform: translateY( 0%) !important; }

    .sub-menu{top: 98px !important;
    width: 300px !important;
    border-radius: 0px 25px 0px 25px;
    padding: 27px 30px 15px 9px !important; }

    #main-navigation .sub-menu a{ font-size: 17px;
    letter-spacing: 0.55px;
    padding: 0px 18px 0px 19px !important;
    line-height: 27px;
    font-family: 'Mada-Bold';
    margin: 0;
    padding: 10px 20px;
    font-size: 1.1em;
    text-transform: none;
    line-height: normal;
    color: #215732;
    font-family: 'Mada-Regular';
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;  }

    #main-navigation .sub-menu li{ position: relative; }

    #main-navigation .sub-menu li:before{ background-color: #215732;
    width: 94%;
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    bottom: 13px;
    left: 0;
    right: 0;
    margin: 0 auto; }

    #main-navigation .sub-menu li:last-child:before{ display: none;
    color: #FFDF00; }

    #main-navigation .sub-menu .sub-menu{ top: -25px !important;
    border-width: 0; }

    #main-navigation .sub-menu  li a:hover, #main-navigation .sub-menu  li.sfHover > a, #main-navigation .sub-menu  li.current_page_item > a, #main-navigation .sub-menu  li.current-menu-item > a, #main-navigation .sub-menu  li.current-menu-parent > a, #main-navigation .sub-menu  li.current-page-parent > a, #main-navigation .sub-menu  li.current-page-ancestor > a,#main-navigation .sub-menu  li.current_page_ancestor > a {
    color: #FFDF00;
    background-color: transparent;}

    #main-navigation .sub-menu li{ position: relative; }

    #main-navigation .sub-menu .menu-item-has-children:after{ position: relative;
    width: 15px;
    height: 15px;
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    background-image:url("http://www.nutrioli.com/wp-content/themes/Nutrioli/img/row.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-90deg);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;}

    #main-navigation .sub-menu .menu-item-has-children:hover:after{ transform: rotate(-180deg); }/*  */#block-1{ position: relative;
    overflow: hidden; }

    /**/

#colophon.site-footer{ background-color: #215732;
    position: relative;
    clear: both; }

    #colophon .footer-social{ text-align: center;
    border-top: 3px solid #8ABD24;
    padding: 32px 0 14px 0;
    width: 100%;
    max-width: 1260px;
    margin: 52px auto 25px auto; }

    #colophon .footer-social a{ display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 40px;
    margin: 0 22px; }

    #colophon .footer-social a:hover{ color: #ffdf00; }

    #colophon #form{ width: 100%;
    max-width: 1070px;
    margin: 52px auto 0 auto; }

    #colophon #form input,#colophon #form textarea{ width: 100%;
    background-color: transparent;
    border-radius: 0px;
    border: 2px solid #fff;
    height: 48px;
    color: #fff;
    margin: 0 0 32px 0;
    color: #ffffff;
    font-family: 'Mada-Regular';
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: -0.13469388px;
    padding: 0 20px 0 20px;  }

    #colophon #form input::-webkit-input-placeholder { color: #fff; }

    #colophon #form input:-ms-input-placeholder { color: #fff; }

    #colophon #form input::placeholder { color: #fff; }

    #colophon #form textarea{ min-height: 129px;
    color: #fff;
    padding: 6px 25px 6px 25px; }

    #colophon #form textarea::-webkit-input-placeholder { color: #fff; }

    #colophon #form textarea:-ms-input-placeholder { color: #fff; }

    #colophon #form textarea::placeholder { color: #fff; }

    #colophon #form .c-btn{  font-family: 'Mada-Bold';
    background-color: #8ABD24;
    border-color: #8ABD24;
    color: #ffffff;
    margin: -9px 0 0;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 5.1px;
    padding: 6px 43px 6px 43px;
    line-height: 43px;
    float: right; }

    #colophon #form .c-btn:hover{ color: #fff;
    background-color: #174827;
    border-color: #174827; }

    #colophon #form .c-btn{ line-height: 19px;
        display: inline-block;
        width: auto;
        border-radius: 26px 0px 26px 0px;
        padding: 16px 43px;
        height: 59px; }

    #colophon #form .wpcf7-not-valid-tip { line-height: 43px;
        margin: -25px 0 0 0; }

    #colophon #form .wpcf7 form.invalid .wpcf7-response-output{ color: #fff;
    line-height: 35px; }

    #colophon #footer-logo{ width: 100%;
    max-width: 550px;
    margin: 0 auto;
    text-align: center; }

    #colophon #footer-logo p{ color: #ffffff;
    font-family: 'Mada-Regular';
    font-size: 34px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 1px;
    margin: 74px 0 0 0; }

    #colophon #logo-footer{ margin: 32px 0 0 -53px; }

    #colophon .footer-links{ background-color: #fff;
    line-height: normal;
    height: 37px;
    text-align: center;
    padding: 31px 0 63px 0; }

    #colophon .footer-links a{   color: #215732;
  font-family: 'Mada-Regular';
  font-size: 22px;
  font-weight: 400;
  line-height: 34px;
  text-align: center;
  letter-spacing: -0.13469388px; }

    #colophon .footer-links a:hover{ color: #ffdf00;
        text-decoration: none; }

    #colophon .footer-links a:nth-child(2){ /*font-family: 'Mada-Bold';*/
    margin: 0 55px;
    position: relative; }

    #colophon .footer-links a:nth-child(2):before,#colophon .footer-links a:nth-child(2):after{     content: '';
    width: 2px;
    height: 52px;
    position: absolute;
    top: -11px;
    background-color: #ffdf00; }

    #colophon .footer-links a:nth-child(2):before{ left: -22px; }

    #colophon .footer-links a:nth-child(2):after{ right: -22px; }

    #colophon:before{ width: 197px;
    height: 256px;
    position: absolute;
    content: "";
    background-image: url(../img/hoja-2.svg);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    right: 0;
    top: 6%; }

   .hamburger{ display: none !important;
        top: 15px !important;
        right: 15px !important; }

   .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
    background-color: #fff;
    box-shadow: 2px 2px 0px #00552c;} .fat-nav { -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0); }

    .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before{ background-color: #fff !important; }

    .hamburger.active .hamburger__icon{ background-color: transparent !important; }

    .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before { background-color: #dee2e6 !importnt; }

    .hamburger.active{ background-color: #71717100;
        font-size: 0; }

    .hamburger.active:after{}

    .row { margin-right: 0px !important;
        margin-left: 0px !important; }

/**/

@media screen and (max-width: 992px) {

    #masthead .row{ display: none; }

    .hamburger{ display: block !important; }

}

@media screen and (max-width: 758px) {

    #colophon .footer-social{ margin: 30px auto 25px auto; }

    #colophon .footer-links a{ font-size: 18px; }

    #block-7 h2 br{ display: none; }

    #colophon #footer-logo .col-6,
    #colophon #form .col-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #colophon #logo-footer {
        margin: 0px 0 0 0px;
        width: 100%;
        max-width: 187px; }

    #colophon #footer-logo p{ margin: 25px 0 0 0; }

    #colophon .footer-links a{ display: block;
        margin: 9px; }

    #colophon .footer-links a:nth-child(2):before, #colophon .footer-links a:nth-child(2):after {
        display: none; }

    #colophon .footer-links a:nth-child(2) { border-top: 1px solid #FFDF00;
    border-bottom: 1px solid #FFDF00; }


    #colophon .footer-links a:nth-child(2){ padding: 4px 0; }

    #colophon .footer-links{ padding: 7px 0 175px 0; }

    #colophon .footer-social a { font-size: 35px;
        margin: 0 11px; }

    #colophon #form input, #colophon #form textarea{ text-align: center; }


}