* { padding:0px; margin:0px; }
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }
a, a:link, a:visited {color:#7c7c7c; text-decoration: none; font-weight: bold;}
a:hover { color: #d00; }
h1,h2,h3,ul,ol {margin-bottom: 10px;}
quote {margin-left: 40px; font-style:italic;}


#header .banner {width: 100%; float: left;}
#header .contactos {max-width: 200px; float:right;}
.soloMobile {display: none !important;}
@media screen and (max-width:769px) {
  .noMobile {display: none !important;}
  .soloMobile {display: block !important;}
  .searchSidebar {display: none;}
  #footer {display: none !important;;}
  .searchHeader {display: block !important;}
  #footer-responsive {display: block !important;}
  .columna_der { width: 100% !important; }
}
.textoTablas{font-size: 0.8em !important;}
.no-show { text-indent: -99000px; overflow: hidden; width: 21px; height: 10px; display: block; min-width: 21px; }
#hd { float: left; margin-left: 10px;}
#hd fieldset { border: none; }
#hd ul.text-options { margin-top: 5px; }
#hd ul.text-options li { list-style: none; float: left;}
#hd ul.text-options li a { display:inline-block; text-decoration:none; width:21px; height:10px;}
#hd ul.text-options li a.decrease-size { background:url(../imgs/text_decrease.jpg) no-repeat left top; width: 21px; height: 10px; }
#hd ul.text-options li a.increase-size { background:url(../imgs/text_increase.jpg) no-repeat left top; width: 21px; height: 10px; }
#hd ul.text-options li a.reset { background:url(../imgs/text_reset.jpg) no-repeat left top; width: 21px; height: 10px; }

.logo {width: 90px; height: 100px; display: block;}
.descripcion {font-size: 14px; text-align: left; vertical-align: top;}
.destaque {font-size:22px; color:#d00; font-weight: bold;}
.ps {}
.extra {font-size: 14px; font-style: italic; font-weight: bold;}
.contactos {width: 200px; font-size: 14px; text-align: right;}
.primario {font-size: 20px; color: #d00; font-weight: bold;}
.secundario {font-size: 14px; color: #000; font-weight: bold;}
.terciario {font-size: 11px; color: #000;}

#mainContainer {max-width: 900px; margin-left: auto; margin-right: auto;}

.medio {padding-bottom: 10px;}
.contenido {max-width: 650px; float: left; vertical-align: top; padding-left: 3px;padding-right: 3px;}
.contenido p {margin-bottom: 15px;}
.columna_der {border-left: 1px #ddd dotted; width:230px; float: right; vertical-align:top; padding-left: 5px;}

.licencia {width: 90px; vertical-align: top;}
.desarrollo {font-size: 10px; }

.aviso {background-color: #d00; color: #fff; text-align: center; font-weight: bold; font-size: 18px;}
.preview {background-color: #00d; color: #fff; text-align: center; font-weight: bold; font-size: 18px;}

.separador {border-top: 1px #ddd dotted; width: auto; paddig-left: 5px;}
.separadorLargo {clear: both; display: block; border-top: 1px #ddd dotted; width: 100%; margin-left: auto; margin-top: 15px; margin-bottom: 15px;}

.enlaces {list-style:none;}
.enlaces li {margin-bottom: 5px; margin-right: 5px; text-align: center;}
.corridos { width: auto;}
.corridos li { display: inline-block; vertical-align: middle; width: 70px;}

.titulo_componente { background-image:url(../imgs/nav_bg.png); background-repeat:repeat-x; height:30px; color: #fff; text-align:center;}

#licencia {margin-left: 20px;}
#licencia ul{ margin-left: 50px;margin-bottom: 25px;}
#licencia li{ margin-top: 5px;}

.tabla tr td{border-bottom:  1px #ddd dotted; vertical-align:top; padding-bottom: 10px;}
.tabla ul, .tabla ol {margin-left: 50px;}
.tabla li {margin-top: 5px;}

.personal td {vertical-align: top;}
.personal .foto {width: 120px; border:none;}
.personal img {border:none;}
.personal h2 {margin-bottom: 10px;}

.fotoGrande { text-align: center; width: auto; font-size: 10px; color: #7c7c7c; font-style: italic; position: relative; }
.fotoGrande img { border: 1px solid #000; }
.align_left { float: left; }
.align_right { float: right; }
.foto_container { display: block; clear: both; margin-bottom: 20px; text-align: center; width: 100%; }

#translate-this { float: right; margin-top: 10px;}
.translate {float: right !important; background-image: none !important; position: relative; top: -4px;}

.input_text {
    width: 100%;
    border: 1px solid #dddddd;
    background-color: #eee;
    padding: 5px;
    border-radius: 5px;}
.input_text:hover, .input_text:focus {background-color: #f9f9f9;}
.textarea {
    font-family:Arial, Helvetica, sans-serif;
    border: 1px solid #dddddd;
    background-color: #eee;
    padding: 5px 0 5px 5px;
    border-radius: 5px;
    width:100%; 
    height: 320px;
}
.textarea:hover, .textarea:focus {background-color: #f9f9f9;}

.miniCV {list-style: dash; margin-left: 20px;}

.blog_image { margin-right: 10px; position: relative; float: left;}
.blog_text { position: relative; }
.blog_item { margin-bottom: 10px; padding-bottom: 10px; display: block; clear: both; min-height: 100px;}
.blog_item_separator { border-bottom: 1px solid #4c4c4c; }
.blog_item_highlight { background-color: #f5f5d9; padding-top: 10px; padding-left: 10px; padding-right: 10px;}

#fancybox-overlay { z-index: 9999998 !important;}
#fancybox-wrap { z-index: 9999999 !important;}

.ampliarNota {margin-left: 50px; font-size: 80%; font-style: italic;}

.sendError,.sendOK {text-align: center;}
.sendError{color: black; padding: 10px; margin: 10px 10px 10px 10px; border-radius: 10px; border-color: #d00; background-color: pink;}
.socialLinks{clear:both; text-align: center;}

.gallery img {width:134px; border: 1px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;}
.gallery p.desc  {font-style: italic; font-size: smaller; text-align: center;}
.page_image {text-align: center; margin-bottom: 15px; margin-top: 10px;}

#search input[type="text"] {width: 95%; font-size: 12pt; padding: 3px 3px 3px 3px; }
#search input[type="submit"] {width: 100px; font-size: 12pt; padding: 3px 3px 3px 3px; }
.searchHeader {clear: both; padding-top: 10px; }

.closeGraph {float: right; margin-top: 4px; margin-right: 10px; color: #d00; font-weight: bold;font-size:14pt;}
.closeGraph:hover{cursor: pointer;}
.verGrafico:hover{cursor: pointer; font-weight: bold; }
.verGrafico{font-size: 10pt;}

.socialLinks {text-align: right;}
.socialLinks .box {display: inline-block;}
.socialLinks .FBLink a:hover {background: url(../imgs/FB_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .FBLink a {background: url(../imgs/FB_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .TWLink a:hover {background: url(../imgs/TW_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .TWLink a {background: url(../imgs/TW_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .GPLink a:hover {background: url(../imgs/GP_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .GPLink a {background: url(../imgs/GP_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .YTLink a:hover {background: url(../imgs/YT_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .YTLink a {background: url(../imgs/YT_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .EMLink a:hover {background: url(../imgs/EM_a.png) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .EMLink a {background: url(../imgs/EM_a.png) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}



.socialLinks .LELink a:hover {background: url(../imgs/LI_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .LELink a {background: url(../imgs/LI_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}

.socialLinks .PILink a:hover {background: url(../imgs/PI_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .PILink a {background: url(../imgs/PI_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}

.socialLinks .TBLink a:hover {background: url(../imgs/TB_a.jpg) top left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}
.socialLinks .TBLink a {background: url(../imgs/TB_a.jpg) bottom left no-repeat; width:30px; height:30px; display: block; text-indent: 300px; overflow: hidden;}




#contactFormContainer {max-width: 98%;}
#contactFormContainer .line {margin-bottom: 15px;}

.SB_button {background: #e3e3e3; font-size: 12pt; color: black; font-weight: bold; text-align: center; padding: 10px 0; margin-bottom: 5px;}
.SB_button:hover {background: #c3c3c3;}
.nota {font-size: 7pt;}
#ccNote {clear: both; display: block;font-weight: bold;}
.innerText { margin-left: 30px; margin-top: 5px !important;}
#enviar {padding: 8px; font-weight: bold; font-size: 1.3em; border-radius: 10px;}
#enviar:disabled {padding: 3px; font-weight: bold; font-size: 1.3em; color: #c4c4c4; background-color: #f0f0f0;}

#footer, #footer-responsive {clear: both; padding-top: 10px;width: 90%; padding: 10px; border-top: 2px solid #a0a0a0; background-color: #f0f0f0;display: flex;}
#footer .col {width: 45%; display: block;}
#footer-responsive hr { margin-top: 5px; margin-bottom: 5px;}
#footer-responsive .socialLinks { margin-top: 5px; margin-left: auto; margin-right: auto; float: none;text-align: center;}
nav {
  display: block;
  background: #c4c4c4;
}

.menu { display: block; }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child { margin-left: 0; }

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 15px 5px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover>a {
  color: #fff;
  background: #a4a4a4;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
  box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.5);
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.5);
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}

.menu ul li a:hover,
.menu ul li:hover>a {
  background: #FC6D58;
  color: #fff;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
  box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.5);
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
  box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.5);
}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 90%;
  padding: 20px 15px;
  background: #E95546;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  background: #E95546;
  color: #fff;
  text-decoration: none;
}

a.homer { background: #FC6D58; }
 @media (min-width: 768px) and (max-width: 979px) {

.mainWrap { width: 768px; }

.menu ul { top: 37px; }

.menu li a { font-size: 12px; }

a.homer { background: #E95546; }
}
 @media (max-width: 769px) {

.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }

.responsive-menu { display: block; }
a.responsive-menu {color: white;}

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover>a {
  background: #FC6D58;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li>ul ul:hover { transform: initial; }
}

.copete ul {margin-left: 20px;}


.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 65%;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}