body, html {
    display: inline;
    color:  #404040;    
    background-image: url('fondo.jpg');
    
    
    height: 100%;
   
    font-size: 100%;
    background-size: cover;
    background-attachment: fixed;

    
    font-size: 100%;
    background-repeat: no-repeat;

}



 a.anchor {
    display: block;
    position: relative;
    top: -105px;
}

 audio {
    height: 82px;
    width: 32px;
}

 p {
    
    font-size: 20px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto; 
    font-family: 'IM Fell English', serif;
    font-weight: 600;
    line-height: 134%;
    background-color: none;
}

p.portada {
    font-size: 19px;
}

fieldset legend {
    font-size: 20px;
    
    font-family: 'IM Fell English', serif;
    font-weight: 600;
} 



 p.quote {

  max-width: 540px;
  font-style: italic;
  line-height: 127%;
 }

 p.encab {
  font-style: italic;
  max-width: 815px;
  font-size: 131%;
 }



 #divcen {  
  margin-top: 10em;
  margin-bottom: 88px;
  margin-left: auto;
  margin-right: auto;
  max-width: 630px;
  background-color: white;
  padding: 3% ;
  padding-top: 0%;
  border-color: #b3ffeb;
  border: solid;
  border-width: 2px;
  border-radius: 8px;
}


 #divcenmas {
   margin-left: auto;
   margin-right: auto;
   max-width: 650px;
   font-size: 110%;
}





 pre {

  font-size: 111%;
  margin-left: 5%;


 }



 h1 {

font-family: 'Anton', sans-serif;
text-shadow: 2px 2px #999999;
font-size: 38px;
}

 h2 {

font-family: 'Anton', sans-serif;
text-shadow: 2px 2px #999999;

}


 #banner{
    background-color: #0c1a27;
    opacity: 0.9;
    width:100%;
    font-size: 333%;
    color: #b38f00;
    position: fixed;
    font-family: 'Anton', sans-serif;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
    top: 0%;


    border-radius: 6px;
    line-height: 96%;
}





 #header
{

 -webkit-align-items: center; /* Safari 7.0+ */
display: block;
align-items: stretch;
text-align: justify;

 }



 a:link.int {
    color: #00b3b3;
   text-decoration: none;
   text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}


 a:visited.int {
    color: #00b3b3;
    text-decoration: none;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;

}


 a:hover.int {
    color: #33ffff;
    text-decoration: none;
    text-shadow: 1px 1px black;
}


 a:active.int {
    color: #00b3b3;
    text-decoration: none;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}


a:visited.lnk{
    color: #4080bf;
    text-decoration: none;
}

  a:hover.lnk{
      text-decoration: underline;
      color: #4080bf;
      text-decoration: none;
      text-shadow: 1px 1px #33ffff;
}

  a:link.lnki{
    color:#1a53ff;
    text-decoration: none;
}   



  a:visited.lnki{
    color:#1a53ff;
    text-decoration: none;
}

  a:hover.lnki{
    text-decoration: none;
    color:#1a53ff;

     text-shadow: 1px 1px #33ffff;
}


  a {text-decoration: none;
    color: #007399;
   }

  a:visited{
    color:#007399;
    text-decoration: none;
}

  a:hover{
  text-decoration: none;
  text-shadow: 1px 1px #33ffff;
}

 nav  {
       max-width: 300px;
       top: 19%;
       float: right;
       position: fixed;
       font-size: 122%;
       background-color: #0c1a27;
       opacity: 0.9;
       padding:  1%;
       line-height: 89%;
       border-radius: 8px;
       font-weight: 600;
       border-color: #b3ffeb;
       border: solid;
       border-width: 2px;
       font-family: 'Anton', sans-serif;

 }

 nav ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
     }

 nav li {
    margin: 2;
    padding: 2;

 }

 ul.sub-menu {
    margin: 7;
    padding: 0;


 }


  ul.sub-menu li {
    margin: 7;
    padding: 0;
    font-size: 87%;
    text-decoration: none;
    line-height: 77%;
 }

  ol li  {
    
   margin: 0 0 8px 0;
    
 }


  li.dropdown {
    background-color: none;
    background:  none;
    border: none;
}


 .ejemplos {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    font-size: 118%;
    font-family: monospace;
}


 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 3%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    font-family: monospace;
}

 /* Modal Content */
.modal-content {

     color: #b3ffeb;
    
    font-family: monospace;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;


     margin: auto;
    padding: 0;

     width: 95%;
    height: 70%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 1.5s;
    animation-name: animatetop;
    animation-duration: 1.5s;
}

 .modal-header {
    font-family: monospace;
}

 .modal-body {padding: 2px 2 px;}



 /* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

 @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


 /* The Close Button */
.close {

     color: #00cc99;
    float: left;
    font-family: monospace;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}

 .close:hover,
.close:focus {
    font-family: monospace;
    color: #80ffdf;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}

 .expand {
  float: right;
  font-family: monospace;
    color: #00cc99;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;

 }

 .expand:hover,
.expand:focus {
    float: right;s
    font-family: monospace;
    color: #80ffdf;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}

.parentesis {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 115%;
}