#menu{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; 
    -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    background: #0c0b0d; color: white; z-index: 10;
    padding: 5px 30px;
    position: relative;
}
#menu input[type="checkbox"],#menu input[type="radio"]{display: none;}
#menu .wrap{ margin: 0 auto; padding: 0 10px;}
#menu .btn{display: inline-block; color: #fff; padding: 10px 10px 10px 15px; border: 1.5px solid #ED9F2D; border-radius: 2px; }
#menu .btn:after{content: "〉"; display: inline-block; margin-left: 10px; color: #ED9F2D; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
#menu .btn:hover{color: #000; background: #ED9F2D; text-decoration: none; }
#menu  .btn:hover::after{color: #000;}

#menu a{color: white;}
#menu h1{display: block; font-size: 84px; width: 1em; height: 1em; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 8vw; position: relative; z-index: 10;}
#menu h1 a{text-indent: -9999px; color: transparent; font-size: 0; display: block; background: url(../images/alta_af_negativo.svg) center no-repeat; background-size: contain; width: 100%; height: 100%;}


#menu .menu{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
#menu .menu >ul{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
#menu .menu >ul >li{list-style: none; padding: 0; margin: 0; margin-right: 3vw;}
#menu .menu >ul >li>a,
#menu .menu >ul >li>label{-webkit-transition: color .4s ease-in-out;-o-transition: color .4s ease-in-out;transition: color .4s ease-in-out;}
#menu .menu >ul >li>a:hover,
#menu .menu >ul >li>label:hover{color: #ED9F2D; text-decoration: none;}
#menu .menu >ul >li label{position: relative; cursor: pointer; padding-right: 25px; background: url(../images/menu-plus.svg) right 62% no-repeat; background-size: 14px auto; }

#menu #search span{display: inline-block; cursor: pointer; background: url(../images/header-search.png) center no-repeat; width: 30px; height: 30px;}
#menu #search input{-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out; background-color: transparent; border: 0; border-bottom: 1px solid; color: white}

#menu .usuario{display: block; width: 40px; height: 40px; background: url(../images/login.svg) center no-repeat; background-size: 100% auto; }

#menu .menumobile{display: none;}

@media(min-width: 1200px){
    #menu .wrap{max-width: 800px;}
    .home #menu h1 a{height: 150px; width: 150px; background-image: url(../images/logo-aosfatos.svg);}

    #menu .menu >ul >li label:after{content: ""; position: absolute; left: 0; width: 100%; top: 100%; height: 0; background: white; -webkit-transition: all .4s .2s ease-in-out; -o-transition: all .4s .2s ease-in-out; transition: all .4s .2s ease-in-out;}
    #menu .menu >ul >li input[type="checkbox"]:checked ~ label:after{height: 3px; top: calc(100% + 30px);}
    #menu .menu >ul >li input[type="checkbox"]:not(:checked) ~ .drop{max-height: 0 !important; padding: 0; border-bottom: 0; z-index: 4;}
    #menu .drop{
        -webkit-transition: padding .6s ease-in-out,max-height .6s ease-in-out;
        -o-transition: padding .6s ease-in-out,max-height .6s ease-in-out;
        transition: padding .6s ease-in-out,max-height .6s ease-in-out; max-height: 500px; overflow: hidden; 
        position: absolute; top: 100%; left: 0; width: 100%; z-index: 5;
        padding: 60px 0;
        background: #0c0b0d; border-bottom: 3px solid white;
    }
    #menu .drop .wrap{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
    #menu .drop .explica{width: 25%;}
    #menu .drop .explica p{font-size: 22px; line-height: 1.45;}
    #menu .drop ul{list-style-type: none; -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;}
    #menu .drop ul li{margin: 0 0 25px 35px; width: 200px;}
    #menu .drop ul li a{font-weight: bold; font-size: 18px; display: block;}
    #menu .drop ul li a:after{content: ""; display: inline-block; width: 12px; height: 13px; background: url(../images/menu-plus-right.svg) center no-repeat; margin-left: 10px;}
    #menu .drop ul li span{display: block;}

    #menu .secundario{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;}
    #menu .secundario > *{margin-left: 30px;}
    #menu #search{display: block; width: 30px; height: 45px; position: relative;}
    #menu #search form{position: absolute; right: 0; top: 0; height: 100%; z-index: 2; background: #0c0b0d;}
    #menu #search form label{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%;}
    #menu #search span{width: 30px; height: 30px;}
    #menu #search input{width: 0; color: white; font: inherit;}
    #menu #search input:focus{width: 300px;padding: 6px;}
}
@media(max-width: 1199px){
    #menu{padding: 10px 20px;}
    #menu h1{font-size: 50px; margin-right: 20px;}
    #menu .menu{position: absolute; top: 70px; left: 0; width: 100%; max-height: 0; overflow: hidden; background: #0c0b0d; z-index: 99; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap;}
    #menu .menu >ul,
    #menu .menu >ul>li,
    #menu .drop .wrap,
    #menu .secundario{display: block; width: 100%;}
    #menu .menu >ul >li>a,
    #menu .menu >ul >li>label{display: block; width: 100%;}
    #menu .menu >ul>li {padding: 15px 20px;}
    #menu .menu >ul >li input[type="checkbox"]:not(:checked) ~ .drop{max-height: 0 !important; padding: 0; margin-top: 0; border-bottom: 0; z-index: 4;}

    #menu .drop{
        padding: 10px 0; background: #1D1D1D; margin: 20px -20px 0;
        -webkit-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
        transition: all .6s ease-in-out; max-height: 500px; overflow: hidden; 
    }
    #menu .drop .explica{display: none;}
    #menu .drop ul{list-style: none;}
    #menu .drop ul li{padding: 10px;}
    #menu .drop ul li span{display: none;}

    #menu #search form label{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px;}
    #menu #search span{-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto; width: 1.2em; height: 1.2em; background-size: 100% auto; margin-left: 10px;}
    #menu #search input{width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; border:0;}
    #menu #search input:focus{border-bottom: 1px solid;}
    #menu #search input::-webkit-input-placeholder{color: white;}
    #menu #search input::-moz-placeholder{color: white;}
    #menu #search input:-ms-input-placeholder{color: white;}
    #menu #search input::-ms-input-placeholder{color: white;}
    #menu #search input::placeholder{color: white;}
    #menu .secundario{padding: 10px 20px;}
    #menu .secundario .btn{display: none;}

    #menu .login{color: #ED9F2D; font-weight: 600;}
    #menu .usuario{width: 34px; height: 34px;}

    #menuHamburguer{display: block; position: relative; width: 20px; height: 16px; z-index: 5; cursor: pointer; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;}
    #menuHamburguer span,
    #menuHamburguer:before,
    #menuHamburguer:after{
        content:""; position: absolute; left: 0; width: 100%; top: 50%; 
        margin-top: -1px; height: 2px; background: white; 
        -webkit-transition: all .3s ease-in-out; 
        -o-transition: all .3s ease-in-out; 
        transition: all .3s ease-in-out;
        border-radius: 3px;
    }
    #menuHamburguer:before{margin-top: -8px;}
    #menuHamburguer:after{margin-top: 6px;}

    #abreMenu:checked ~ .menumobile #menuHamburguer span{width: 0;}
    #abreMenu:checked ~ .menumobile #menuHamburguer:before{margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
    #abreMenu:checked ~ .menumobile #menuHamburguer:after{margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
    #abreMenu:checked ~ .menu{max-height: 150vh; padding: 20px 0;}

    #menu .menumobile{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    #menu .menumobile >*{margin-left: 20px;}
    #menu .secundario .usuario{display: none;}
}