@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
html, body, div, span, applet, object, iframe, table, td, tr, caption,  
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,  
kbd, q, s, samp, small, strike, sub, sup, tt, var,  
h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr,  
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend {  
  vertical-align: baseline;  
  font-family: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  font-size: 100%;  
  outline: 0;  
  padding: 0;  
  margin: 0;  
  border: 0;  
}
html{
  height:100%;
}
body{
  height:100%;
  background: rgba(75,198,255,1);
  background: -moz-linear-gradient(top, rgba(75,198,255,1) 0%, rgba(230,229,228,1) 50%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(75,198,255,1)), color-stop(50%, rgba(230,229,228,1)));
  background: -webkit-linear-gradient(top, rgba(75,198,255,1) 0%, rgba(230,229,228,1) 50%);
  background: -o-linear-gradient(top, rgba(75,198,255,1) 0%, rgba(230,229,228,1) 50%);
  background: -ms-linear-gradient(top, rgba(75,198,255,1) 0%, rgba(230,229,228,1) 50%);
  background: linear-gradient(to bottom, rgba(75,198,255,1) 0%, rgba(230,229,228,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc6ff', endColorstr='#e6e5e4', GradientType=0 );
  background-attachment: fixed;
  font-family: 'ProximaNova';
}
@font-face{
  font-family: 'ProximaNova';
  src: url('proximanovarg.ttf');
}
@font-face{
  font-family: 'ProximaNova';
  src: url('proximanovargthin.ttf');
  font-weight: lighter;
}
@font-face{
  font-family: 'amaranth';
  src: url('Amaranth-Regular.otf');
}
body div table{
  background: rgba(255,255,255,1);
}

.encabezado{
  top: 0;
}
@media screen and (min-width: 981px){
  .menu{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    text-align:center;
    display: flex;
    justify-content: center;
    background: rgba(114,190,228,1);
    -moz-box-shadow: inset 0 0 10px #049;
    -webkit-box-shadow: inset 0 0 10px #049;
    box-shadow:inset 0 0 10px #049;
  }
  .menum{display:none;}
  .top,.sub,.subs{
    list-style:none;
  }
  .opt1{
    float:left;padding:15px;
  }
  .opt1 .opt12{
    font-weight: bold;font-size:105%;
  }
  .opt1:hover{
    background: rgba(1,90,254,0.3);
    cursor:pointer;
    color:#eee;
    -moz-box-shadow:0 0 10px #05b;
    -webkit-box-shadow:0 0 10px #05b;
    box-shadow:0 0 10px #05b;
  }
  .opt1:hover .sub{
    display: block;
    animation: mostrar 0.5s;
  }
  .redes{
    float:left;padding:15px;
  }
  .sub{
    position:absolute;
    float:left;
    z-index:10;
    display:none;
    background: rgba(98,152,254,0.90);
    margin: 15px 0 0 -15px;
    text-align:left;
    width:150px;
    -moz-box-shadow:0 0 10px #05b;
    -webkit-box-shadow:0 0 10px #05b;
    box-shadow:0 0 10px #05b;
  }
  .sub li{
    margin:5px 0;
  }
  .sub li span{
    margin:10px;
  }
  .sub li:hover{
    text-decoration:underline;
    cursor:pointer;
    font-weight:bold;
  }
  .mm{
    display:none;
  }
  .sub li:hover .subs{
    display:block;
    animation: mostrar 0.5s;
  }
  .subs{
    position:absolute;
    float:left;
    z-index:10;
    display:none;
    background: rgba(64,132,254,0.90);
    margin: -23px 0 0 150px;
    font-size:95%;
    text-align:left;
    padding:10px;
    width:180px;
    -moz-box-shadow:0 0 10px #05b;
    -webkit-box-shadow:0 0 10px #05b;
    box-shadow:0 0 10px #05b;
  }
  .contenido{
    width: 1000px;
    background-color: white;
    -webkit-box-shadow: 10px 0px 20px -10px #555;
    -moz-box-shadow: 10px 0px 20px -10px #555;
    box-shadow: 10px 0px 20px -10px #555;
  }
  .pie{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 1000px;
    background: #fff;
  }
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

.principal{
  align-content: center;
}

/*.parrafo{
padding: 50px;
text-align: justify;
}*/

@keyframes mostrar{
  from { opacity: 0; }
  to { opacity: 1; }
}

.link{
  color: #24678d !important;
  text-decoration: underline;
}

.link:hover{
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
}

h1{font-size: 36px;}
h2{font-size: 32px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
hr{width: 90%;}

@media print{
  .noimp, .noimp *{
    display: none !important;
  }
}

@media screen and (max-width: 980px){
  .contenido{
    width: auto;
    background-color: white;
  }
  .encabezado{
  display:none;
  }
  .pie{
    position: fixed;
    bottom: 0;
    width: auto;
    background: #fff;
  }
  .menu{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    text-align:right;
    background: rgba(114,190,228,1);
    -moz-box-shadow: inset 0 0 10px #049;
    -webkit-box-shadow: inset 0 0 10px #049;
    box-shadow:inset 0 0 10px #049;
    &::after {
      content: '';
      position: absolute;
      z-index: 99;
    }
  }
  .menum{
    display:block;
    padding:0.5em;
  }
  .menum img{float:left;margin-top:0.3em;width:250px}
  .menum span{
    cursor:pointer;
    background-color: lightgray;
    border-radius: 5px;
    padding: 0.2em;
  }
  .top{
    z-index:101;
    background: rgba(200,211,214,0.9);
  }
  .sub{
    z-index:102;
    background: rgba(157,202,214,0.9);
    width:100%;
  }
  .subs{
    z-index:103;
    background: rgba(114,190,214,0.9);
  }
  .top, .sub, .subs{
    list-style:none;
    position:fixed;
    right:0;
    border-radius: 10px 0 0 10px;
    top:0;
    transform: translateX(100%);
    transition: 0.5s;
  }
  .toggled{
    transform: translateX(0);
  }
  .togplus{
    transform: translateX(-100%);
  }
  .ocultar{
    transform: translateX(200%);
  }
  .top li{
    padding: 1em 2em;
    cursor:pointer;
    border-bottom: 1px solid #049;
    /*-moz-box-shadow: inset 0 0 10px #049;
    -webkit-box-shadow: inset 0 0 10px #049;
    box-shadow:inset 0 0 10px #049;*/
  }
  .top li:hover, sub li:hover, subs li:hover{
    background: rgba(1,90,254,0.3);
    cursor:pointer;
    color:#eee;
    -moz-box-shadow:0 0 10px #05b;
    -webkit-box-shadow:0 0 10px #05b;
    box-shadow:0 0 10px #05b;
  }
  .top li:hover ul{
    color:black;
  }
  .top a:last-child li, .sub a:last-child li, .subs a:last-child li{
    border-bottom: none;
  }
  .top li:nth-child(3) div{
    width:100%;
    height:100%;
  }
}

@media screen and (max-width: 480px){
}

.facebook{
    display: none;
}