@media only screen and (min-width:1200px){}
}
@media only screen and (min-width:960px) and (max-width:1199px){}
}
@media only screen and (min-width:768px) and (max-width:959px){.container{width:682px}
}
@media only screen and (min-width:480px) and (max-width:767px){.container{width:428px;margin:0 auto}
}
@media only screen and (max-width:479px){.container{width:320px;margin:0 auto}
}  
.puerto-menu{list-style:none;padding:0;margin:0;background:#FFF;height:70px; }
.puerto-menu li{float:right;position:relative}
.puerto-menu li a{display:block;text-decoration:none;padding:4px 20px;text-align:center;color:#777;border-right:1px solid #f9f9f9 ; font-family:'GETWO',sans-serif; font-weight:100; font-size:14px}
 
.puerto-menu li a i{display:block;font-size:35px;margin-bottom:5px}
.puerto-menu li a strong{display:block; }
.puerto-menu li a small{display:block;font-size:10px}
.puerto-menu li a i,.puerto-menu li a strong,.puerto-menu li a small{position:relative;transition:all 300ms linear;-o-transition:all 300ms linear;-ms-transition:all 300ms linear;-moz-transition:all 300ms linear;-webkit-transition:all 300ms linear}
.puerto-menu li:hover>a i{opacity:1;-webkit-animation:moveFromTop 300ms ease-in-out;-moz-animation:moveFromTop 300ms ease-in-out;-ms-animation:moveFromTop 300ms ease-in-out;-o-animation:moveFromTop 300ms ease-in-out;animation:moveFromTop 300ms ease-in-out}
.puerto-menu li:hover a strong{opacity:1;-webkit-animation:moveFromLeft 300ms ease-in-out;-moz-animation:moveFromLeft 300ms ease-in-out;-ms-animation:moveFromLeft 300ms ease-in-out;-o-animation:moveFromLeft 300ms ease-in-out;animation:moveFromLeft 300ms ease-in-out}
.puerto-menu li:hover a small{opacity:1;-webkit-animation:moveFromRight 300ms ease-in-out;-moz-animation:moveFromRight 300ms ease-in-out;-ms-animation:moveFromRight 300ms ease-in-out;-o-animation:moveFromRight 300ms ease-in-out;animation:moveFromRight 300ms ease-in-out}
.puerto-menu li:hover>a{color:#34495e}
.puerto-menu li a.active{position:relative;color:#34495e;border:0;border-top:4px solid #34495e;border-bottom:4px solid #34495e;margin-top:-4px;box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;-webkit-box-shadow:0 0 5px #DDD}
.puerto-menu li a.active:before{content:"";position:absolute;top:0;left:45%;border-top:5px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent}
@-webkit-keyframes moveFromTop{from{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);transform:translateY(200%)}
to{opacity:1;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}
}
@-webkit-keyframes moveFromLeft{from{opacity:0;-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-webkit-keyframes moveFromRight{from{opacity:0;-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);-o-transform:translateX(-200%);transform:translateX(-200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-moz-keyframes moveFromTop{from{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);transform:translateY(200%)}
to{opacity:1;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}
}
@-moz-keyframes moveFromLeft{from{opacity:0;-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-moz-keyframes moveFromRight{from{opacity:0;-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);-o-transform:translateX(-200%);transform:translateX(-200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-ms-keyframes moveFromTop{from{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);transform:translateY(200%)}
to{opacity:1;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}
}
@-ms-keyframes moveFromLeft{from{opacity:0;-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-ms-keyframes moveFromRight{from{opacity:0;-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);-o-transform:translateX(-200%);transform:translateX(-200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-o-keyframes moveFromTop{from{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);transform:translateY(200%)}
to{opacity:1;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}
}@-o-keyframes moveFromLeft{from{opacity:0;-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
@-o-keyframes moveFromRight{from{opacity:0;-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);-o-transform:translateX(-200%);transform:translateX(-200%)}
to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}
}
.puerto-menu li ul,.puerto-menu li ul li ul{position:absolute;height:auto;min-width:200px;padding:0;margin:0;background:#FFF;border-top:4px solid #34495e;opacity:0;visibility:hidden;transition:all 300ms linear;-o-transition:all 300ms linear;-ms-transition:all 300ms linear;-moz-transition:all 300ms linear;-webkit-transition:all 300ms linear;top:90px; z-index:9999999;}
.puerto-menu li ul:before{content:"";position:absolute;top:-11px;right:23%;border-bottom:5px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent}
.puerto-menu li:hover>ul,.puerto-menu li ul li:hover>ul{display:block;opacity:1;visibility:visible;top:79px}
.puerto-menu li ul li{float:none}
.puerto-menu li ul li a{padding:10px;text-align:right;border:0;border-bottom:1px solid #EEE}
.puerto-menu li ul li a i{font-size:16px;display:inline-block;margin:0 10px 0 0}
.puerto-menu li ul li ul{left:230px;top:0;border:0;border-left:4px solid #34495e}
.puerto-menu li ul li ul:before{content:"";position:absolute;top:15px;left:-14px;border-right:5px solid #34495e;border-bottom:5px solid transparent;border-top:5px solid transparent}
.puerto-menu li ul li:hover>ul{top:0;left:200px}
.puerto-menu li.float{float:right}
.puerto-menu li a.search{padding:29px 20px 30px 10px}
.puerto-menu li a.search i{margin:0;display:inline-block;font-size:18px}
.puerto-menu li a.search input{border:1px solid #EEE;padding:10px;background:#FFF;outline:0;color:#777}
.puerto-menu li a.search button{border:1px solid #34495e;padding:10px;background:#34495e;outline:0;color:#FFF;margin-left:-4px}
.puerto-menu li a.search input:focus{border:1px solid #34495e}
.search-mobile{display:none!important;background:#34495e;border-left:1px solid #34495e;border-radius:0 3px 3px 0}
.search-mobile i{color:#FFF;margin:0!important}
@media only screen and (min-width:960px) and (max-width:1199px){.puerto-menu li a.search input{width:100px}
}
@media only screen and (min-width:768px) and (max-width:959px){.puerto-menu{height:85px}
.puerto-menu li a{padding:12px}
.puerto-menu li a i{font-size:22px}
.puerto-menu li a strong{font-size:12px}
.puerto-menu li a small{font-size:10px}
.puerto-menu li a.search{display:none}
.search-mobile{display:block!important;margin:20px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.puerto-menu li:hover>ul{top:85px;min-width:180px}
.puerto-menu li ul li>ul{min-width:150px;left:200px;top:0}
.puerto-menu li ul li:hover>ul{min-width:150px;left:180px;top:0}
.puerto-menu li ul li ul li ul{min-width:150px;left:25px!important;top:54px;border:0;border-top:3px solid #34495e}
.puerto-menu li ul li ul li:hover ul{top:35px}
.puerto-menu li ul li ul li ul:before{border:0;border-bottom:5px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;left:10%;top:-8px}
.puerto-menu li:hover ul a{font-size:12px}
.puerto-menu li:hover ul a i{font-size:14px}
}
@media only screen and (min-width:280px) and (max-width:767px){.puerto-menu{height:42px;position:relative}
.puerto-menu li a{padding:12px 10.7px}
.puerto-menu li a strong,.puerto-menu li a small,.puerto-menu li a.search{display:none}
.puerto-menu li a i{margin:0;font-size:16px}
.puerto-menu li{position:static}
.puerto-menu li ul{min-width:100%;left:0;top:25px z-index:999999;}
.puerto-menu li:hover>ul{top:25px;}
.puerto-menu li>ul:before{border:0}
.puerto-menu li ul>li{position:relative}
.puerto-menu li ul li:hover>ul{left:34px}
.puerto-menu li a{position:relative;font-size:12px}
.puerto-menu li a:hover strong,.puerto-menu li a.active strong{display:block;font-size:10px;padding:3px 0;position:absolute;top:-30px;left:0;background:#bb2028;color:#FFF;min-width:100%; font-weight:normal}
.puerto-menu li a.active:before{left:40%}
.search-mobile{display:block!important}
.puerto-menu li ul li>ul{min-width:200px;left:200px}
.puerto-menu li ul li:hover ul{left:180px}
.puerto-menu li ul li ul:before{left:-9px}
.puerto-menu li ul li ul li ul{min-width:200px;border:0;border-top:3px solid #34495e;left:25px!important;top:45px}
.puerto-menu li ul li ul li:hover ul{top:40px}
.puerto-menu li ul li ul li ul:before{border:0;border-bottom:5px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;left:10%;top:-8px}
}