html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
  margin:0;
  padding:0;
  text-decoration:none;
  outline:none;
  border:none;
  font-size: 100%;
  list-style:none;
  font-family: Helvetica, Arial, sans-serif;
  color:#000;
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
}
*, *:before, *:after {
    box-sizing: border-box;
}
:focus { outline: 0;}
:link, :visited, :hover, :active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
u{  text-decoration: underline; }


html{
  position: relative;
  top:0px;
  left: 0px;
  width:100%;
  min-height:100%;
}

body{
  background: #fff; /* Old browsers */
  font-size: 16px;
  content: #000;
  background-image: url(../../images/fondo.jpg);
  background-size: contain;
  background-position: center;
}

#loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff url(../../codigo/img/loading.gif) no-repeat center;
  background-size: 150px;
  z-index: 1000000000;
}


.wrapper{
  max-width: 1024px;
  min-width: 700px;
  max-height: 688px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 5px;
  position: absolute;
  top: 80px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.wrapper > .content{
  background-color: #fff;
  width: 100%;
  height: 100%;
  max-height: 660px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.logo{
  width: 100px;
  height: 24px;
  position: absolute;
  top: -35px;
  right: 50px;
  background-image: url(../../images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.titulo{
  font-size: 1me;
  position: absolute;
  height: 60px;
  top: -60px;
  left: 50px;
  border-radius: 20px 20px 0px 0px;
  background-color: #fff;
  padding: 10px 20px;
}
.titulo > p:nth-child(1){
  color: #e3a61a;
  font-size: 1.2em;
  height: 21px;
}
.titulo > p:nth-child(2){
  color: #e3a61a;
  font-weight: bold;
  font-size: 1.5em;
  height: 25px;
}

.wrapper > .content .btnClose{
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  opacity: 0.8;
  background-image: url(../../images/boton_x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wrapper > .content .btnClose:hover{
  cursor: pointer;
  opacity: 1;
  transform: scale(1.1);
}




.wrapper > .content .btnMenu{
  background-color: #fff;
  width: 300px;
  height: 120px;
  border-radius: 20px;
  border:5px solid #e6b525;
  position: absolute;
  margin: auto;
  
  text-align: center;
  display: table;
  -webkit-box-shadow: inset 0px -5px 6px 0px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px -5px 6px 0px rgba(0,0,0,0.4);
box-shadow: inset 0px -5px 6px 0px rgba(0,0,0,0.4);
}
.wrapper > .content .btnMenu:hover{
  cursor: pointer;
  transform: scale(1.05);
  background-color: #fbf8ef;
}
.wrapper > .content .btnMenu > span{
  display: table-row;
}
.wrapper > .content .btnMenu > span:nth-child(1) > p{
  display: table-cell;
  font-size: 1.2em;
  color: #9b978e;
  vertical-align: bottom;
  padding-bottom: 3px;
}
.wrapper > .content .btnMenu > span:nth-child(2) > p{
  display: table-cell;
  font-size: 1.4em;
  color: #9b978e;
  vertical-align: top;
  padding-top: 3px;
  font-weight: bold;
}

.wrapper > .content .btnMenu > span:nth-child(1) > p{
  display: table-cell;
  font-size: 1.2em;
  color: #9b978e;
  vertical-align: bottom;
  padding-bottom: 3px;
}

.wrapper > .content .btnMenu[data-pantalla="1"] > span:nth-child(1) > p{
  font-size: 1.4em;
  font-weight: bold;
}
.wrapper > .content .btnMenu[data-pantalla="1"] > span:nth-child(2) > p{
  font-size: 1.2em;
  font-weight: normal;
}

.wrapper > .content .btnMenu[data-pantalla="1"]{
  top: 35%;
  left: 30%;
  margin-top: -50px;
  margin-left: -125px;
}
.wrapper > .content .btnMenu[data-pantalla="2"]{
  top: 35%;
  left: 70%;
  margin-top: -50px;
  margin-left: -125px;
}
.wrapper > .content .btnMenu[data-pantalla="3"]{
  top: 65%;
  left: 30%;
  margin-top: -50px;
  margin-left: -125px;
}
.wrapper > .content .btnMenu[data-pantalla="4"]{
  top: 65%;
  left: 70%;
  margin-top: -50px;
  margin-left: -125px;
}





.wrapper > .content .btnLateral{
  width: 225px;
  position: absolute;
  top: 30px;
  right: 0px;
  overflow: hidden;
}
.wrapper > .content .btnLateral > li{
  position: relative;
  right: -5px;
  background-color: #fff;
  width: 220px;
  height: 60px;
  border-radius: 10px 0px 0px 10px;
  border:2px solid #e6b525;
  margin: auto; 
  text-align: center;
  display: table;
  margin-bottom: 5px;
  border-right: none;
}
.wrapper > .content .btnLateral > li:hover{
  cursor: pointer;
  right: -2px;
  background-color: #fbf8ef;
}
.wrapper > .content .btnLateral > li > span{
  display: table-row;
}
.wrapper > .content .btnLateral > li > span:nth-child(1) > p{
  display: table-cell;
  font-size: 0.8em;
  color: #9b978e;
  vertical-align: bottom;
  padding-bottom: 2px;
}
.wrapper > .content .btnLateral > li > span:nth-child(2) > p{
  display: table-cell;
  font-size: 1em;
  color: #9b978e;
  vertical-align: top;
  padding-top: 2px;
  font-weight: bold;
}
.wrapper > .content .btnLateral > li[data-pantalla="1"] > span:nth-child(1) > p{
  font-size: 1em;
  font-weight: bold;
}
.wrapper > .content .btnLateral > li[data-pantalla="1"] > span:nth-child(2) > p{
  font-size: 0.8em;
  font-weight: normal;
}





.wrapper > .content > .box{
  padding: 20px;
  padding-top: 40px;
  padding-right: 220px;
  overflow-y: auto;
  height: 100%;
  max-height: 660px;
}
.wrapper > .content > .box > strong{
  font-size: 1.05em;
}
.wrapper > .content > .box > ul{
  margin: 15px 1%;
  width: 48%;
  float: left;
  margin-bottom: 50px;
}
.wrapper > .content > .box > ul > li{
  position: relative;
  margin-bottom: 10px;
  padding-left: 10px;
}
.wrapper > .content > .box > ul > li:before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #e2a900;
  position: absolute;
  top: 4px;
  left: 0px;
}

.wrapper > .content > .box > ul > li > p{
  width: 100%;
  margin-bottom: 5px;
  padding: 1px 3px;
}
.wrapper > .content > .box > ul > li > p:hover, .wrapper > .content > .box > ul > li > p.resaltado{
  background-color: #f9efd6;
  cursor: pointer;
}
.box .btn{
  display: inline-block;
  background-color: #e2a900;
  color: #fff;
  border-radius: 5px;
  font-size: 0.8em;
  padding: 3px 10px;
  font-weight: bold;
  margin: 0px 5px;
  margin-bottom: 20px;
}
.box .btn:hover{
  cursor: pointer;
  transform: scale(1.05);
  background-color: #b08403;
}