body {
    
    box-sizing:                 border-box;
    font-family:                sans-serif;
    font-size:                  1em;
    margin:                     0;
    padding:                    0;
    overscroll-behavior:        contain;
    overflow-x:                 hidden;
    position:                   relative;
    z-index:                    0;
    
}
::-webkit-scrollbar {
    
    width:                      10px;
  
}
::-webkit-scrollbar-track {
    
    border-radius:              5px;
    box-shadow:                 inset 0 0 5px grey; 
  
}
::-webkit-scrollbar-thumb {
    
    background:                 #01babc; 
    border-radius:              5px;
  
}
::-webkit-scrollbar-thumb:hover {
    
    background:                 #01babc; 
  
}
a {
    
    color:                      inherit;
    cursor:                     pointer;
    position:                   relative;
    text-decoration:            none;
    
}
img {
    
    display:                    block;
    position:                   relative;
    width:                      100%;
    
}
button {
    
    appearance:                 none;
    -webkit-appearance:         none;
    -moz-appearance:            none;
    cursor:                     pointer;
    outline:                    none;
    
}
ul {
    
    list-style:                 none;
    margin:                     0;
    padding:                    0;
    
}
select {
    
    appearance:                 none;
    -webkit-appearance:         none;
    -moz-appearance:            none;
    
}
header * {
    
    box-sizing: border-box;
    
}
header {
    
    align-items:                center;
    background:                 white;
    box-sizing:                 border-box;
    display:                    flex;
    flex-wrap:                  wrap;
    justify-content:            center;
    margin:                     0 auto;
    padding:                    1em 0;
    position:                   relative;
    width:                      100%;
    z-index:                    9;
    
}
header .btn_nav_mobil {
    
    font-size:                  1.5em;
    order:                      5;
    padding:                    0 .5em;
    width:                      150px;
    
}
header .btn_nav_mobil span {
    
    font-size:      .8em;
    color: #515151;
    
}
header .logotipo {
    
    order:                      1;
    padding:                    .25em 1em;
    position:                   relative;
    text-align:                 center;
    width:                      calc(100% - 150px);
    
}
header .logotipo img {
    
    display:                    block;
    margin:                     auto;
    width:                      100%;
    
}
header .buscador {
    
    align-items:                center;
    margin:                     .5em auto auto;
    order:                      5;
    position:                   relative;
    width:                      95%;
    
}
header .buscador span {
    
    background:                 #01babc;
    color:                      white;
    cursor:                     pointer;
    font-size:                  .9em;
    padding:                    .5em .5em;
    position:                   absolute;
    right:                      0;
    z-index:                    1;
    
}
header .buscador input {
    
    background:                 #f0f0f0;
    border:                     none;
    border-radius:              4px;
    display:                    inline-block;
    font-size:                  .9em;
    margin:                     auto;
    outline:                    none;
    padding:                    .5em .25em;
    position:                   relative;
    width:                      100%;
    
}
header .buscador input:focus {
    
    background:                 #01babc;
    border:                     none;
    box-shadow:                 0 0 0 0.2em #01babc;
    color:                      white;
    outline:                    none;
    
}
header .buscador input:focus::placeholder {
    
  color:                        white;
  
}
header .barra_de_navegacion {
    
    background:                 #01babc;
    display:                    none;
    justify-content:            center;
    order:                      7;
    position:                   relative;
    width:                      100%;
    
}
header .barra_de_navegacion div {
    
    color:                      white;
    cursor:                     pointer;
    font-size:                  1em;
    font-weight:                600;
    padding:                    .5em 1em;
    transition:                 .5s;
    
}
header .fondo_menu {
    
    background:                 rgba(0,0,0,.5);
    display:                    none;
    height:                     100vh;
    left:                       0;
    position:                   fixed;
    top:                        0;
    width:                      100vw;
    z-index:                    999;
    
}
@media only screen and ( min-width: 756px ){
    
    header .btn_nav_mobil {
        
        display:                    none;
        
    }
    header .logotipo {
        
        order:                      1;
        width:                      130px;
            
    }
    header .logotipo img {
    
        display:                    inline-block;
        width:                      90%;
        
    }
    header .buscador {
        
        margin:                     auto;
        order:                      6;
        width:                      95%;
        
    }
    header .barra_de_navegacion {
        
        display:                    flex;
        margin-top:                 .5em;
        order:                      7;
        width:                      95%;
        
    }
    header .barra_de_navegacion div {
    
        color:                      white;
        cursor:                     pointer;
        font-size:                  .9em;
        padding:                    .5em 1em;
        transition:                 .5s;
        
    }
    header .barra_de_navegacion div:hover {
    
        background:                 #007475;
        color:                      white;
        
    }
    
}
@media only screen and ( min-width: 1024px ){
    
    header .logotipo {
        
        order:                      1;
        width:                      300px;
            
    }
    
    header .buscador {
        
        margin:                     auto;
        order:                      3;
        width:                      calc( 95% - 300px );
        
    }
    header .buscador span {
        
        font-size:                  1.2em;
        padding:                    .5em .5em;
        
    }
    header .buscador input {
    
        font-size:                  1.2em;
        padding:                    .5em .25em;
        
    }
    header .barra_de_navegacion {
        
        margin:                     auto;
        width:                      100%;
        
    }
    header .barra_de_navegacion div {
        
        font-size:                  1em;
        
    }
    
}