header{position:fixed;top:0;left:0;height:100px;z-index:99999999;}
header .medio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}
.icon-menu{display:none;}
.efecto-menu{background:rgba(0, 0, 0, 0.4);}
.logo{position:fixed;top:0;height:150px;background:white;padding:10px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border:1px solid #ccc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.logo img{width:160px;}
.menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;}
.menu a{margin:5px;padding:10px;color:white;font-weight:bold;font-size:1.2rem;position:relative;overflow:hidden;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.menu a::after{border-top:1px solid white;content:attr(data-title);position:absolute;padding:10px;left:0;margin-top:10px;background:white;color:black;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.menu a:hover:after{margin-top:50px;z-index:10;margin-top:0;top:0 !important;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
@media screen and (max-width:768px){header{height:100px;background:rgba(0, 0, 0, 0.4);border-bottom:1px solid black;}
.logo{height:auto;background:transparent !important;position:relative;padding:0;border-style:none;}
.logo img{width:120px;}
.icon-menu{display:block;color:white;font-size:40px;position:absolute;right:20px;top:30px;cursor:pointer;}
.menu{position:fixed;background:rgba(82, 131, 187, 0.8);width:70%;right:-100%;top:100px;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.menu a{border-bottom:1px solid rgba(0, 0, 0, 0.5);color:white;text-align:center;margin:0;border-right:1px solid rgba(255, 255, 255, 0.5);}
.menu a::after{width:100%;}
.movimiento_menu{right:0;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
}
@media screen and (max-width:400px){.menu a{font-size:16px;padding:10px;text-align:left;}
.logo{height:auto;}
.logo img{width:100px;}
}