@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400|Open+Sans:400,800,600);
/* CSS Document */
/* -------------- NAV ------------.*/

#pagina {width: 940px; margin: 0 auto; margin-left: auto; margin-right: auto; background-color: white;
padding-left: 10px; padding-right: 10px;
font-family: 'open sans', sans-serif; color: #080041; font-size: 12px; text-align: center;}
body {background-color: #fafafa}
nav ul { float: left;    
    height: auto;
    padding: 0;
    width: 100%;}


#logo img {margin-top: 20px; }

nav li a {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        text-decoration: none;
        color: black;
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
        }

nav  ul li {
        z-index: 20;
        list-style:none;
        float:left;
        width: 24.7%;
        text-align: center;
        font-size: 0.7rem;
    border-style: solid;
    border-width: thin;
    margin-bottom: -20px;
   
   
        }
nav li a:hover {
    background-color: #19c8c8;
    color: white;
    }

footer p {padding-top: 10px; padding-bottom: 10px;
    font-family: 'Lato', sans-serif;
        font-weight: 400;
        color: black;
        text-align:center;
        font-size: 0.8rem;
    font-style: italic;
        color: gray;
    float: left;
    width: 960px; margin-left: -10px;;
background-color: white;}

#lineacolores1 img {width: 940px; margin-bottom: -20px; height: 5px;}

#info {width: 50%; text-align: left; padding-left: 20px; background-color: #fafafa; border-radius: 5px;
border-style: solid; border-color: #3da0b8; margin-top: 54px; float: left; height: 410px;}

#cuadros h2 {float: left; width: 200px;; margin-left: 5px; background-color: #fafafa; border-radius: 5px; border-style: solid; text-align: center;}
h2 {text-align: center; padding-top: 75px; font-size: 40px; color:black;}

#cuadros .c3:hover h2 {width: 410px; margin-top: -29px; background-color:#2bab9f; border-color:#2bab9f; color: white; font-size: 50px; padding-top: 70px; height: 130px;}

#cuadros .c2:hover h2 {background-color: #ff8880; color: white; border-color: #ff8880;}
#cuadros .c1:hover h2 {background-color: rgb(70, 49, 121);color: white; border-color: rgb(70, 49, 121);  line-height: 1; padding-top: 65px;
height: 135px;}

.c1 h2 {line-height: 1; margin-top:55px; padding-top: 65px; height: 135px; color: rgb(70, 49, 121); border-color: rgb(70, 49, 121);}
.c2 h2 {line-height: 1;margin-top:55px; height: 125px; color: #ff8880; border-color: #ff8880;}
#cuadros .c3 h2 {width: 410px; margin-top: -29px; border-color:#2bab9f; color: #2bab9f; font-size: 50px; padding-top: 70px; height: 130px;}

#hover {position: absolute; width:488px; ;  background-color: #3da0b8; border-radius: 5px;
border-style: solid; border-color: #3da0b8; margin-top: -3px; margin-left:-22px; ; height: 410px; display: block; ;}
#hover h2 {color: white; padding-top: 140px;}

#hover:hover {display: none; position: relative;}



h2 a {text-decoration: none; color: black;}

/**carta*/

#carta {text-align: left; margin-left: 20px; margin-right: 20px;}
h5 {font-size: 12px; margin-bottom: -10px; margin-top: 30px;}

#carta h2 {text-align: left;
   background-color: rgb(70, 49, 121);
   float: left;
    font-family: "Open Sans"; sans-serif; 
    color: white;
    margin-top: 25px;
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 800;
    width: 914px; height: 25px;
    padding-top: 10px;
    padding-left: 25px;
    padding-bottom: 10px;
    margin-left: -20px;
 }

/*mapa*/

#lineacolores2 img {width: 940px; margin-top: -200px; height: 5px; visibility: hidden;}

.botones a {float: left; width: 180px; height: 32px; padding-top: 15px; margin-left: 7px; 
text-decoration: none; font-weight: 800; border-radius: 5px; position: absolute; background-color: white;}

.botones {position: absolute; }

#mapatotal {width: 940px; height: 900px; margin-top: -7px; background-image: url(imagenes/mapa-01.png);padding-top: 20px; padding-right: 6px; margin-left: -3px;}

#uno a{background-color: #080041; color:white;}
#uno a:hover{background-color:white; border-color: #080041; border-style: solid; border-width: thin; color:#080041;}


#dos a, #nueve a, #catorce a, #quince a, #dieciseis a, #diecisiete a, #dieciocho a, #veinte a, #veintiuno a, #veintidos a {margin-left: 195px;}

#tres a, #cuatro a, #cinco a, #veintitres a, #diez a, #once a, #diecinueve a { margin-left: 382px;}

#seis a, #siete a, #doce a {margin-left: 569px; }
#ocho a, #trece a {margin-left: 756px;}

#dos a, #cinco a, #siete a {background-color: #d1186c; color: white;  }
#dos a:hover, #cinco a:hover, #siete a:hover{background-color:white; border-color: #d1186c; border-style: solid; border-width: thin; color:#080041;}

#tres a, #cuatro a, #seis a, #ocho a {border-style: solid; border-width: thin; color:#080041; border-color: #d1186c;}
#tres a:hover, #cuatro a:hover, #seis a:hover, #ocho a:hover {background-color: #d1186c; color: white;}

#cuatro a {margin-top: 55px;} #cinco a, #seis a {margin-top: 110px;}
#siete a, #ocho a {margin-top: 165px;}

#veintidos a, #veintitres a{margin-top: 220px;}
#veintidos a {background-color: #2bab9f; color: white;}
#veintidos a:hover{background-color:white; border-color: #2bab9f; border-style: solid; border-width: thin; color:#080041;}
#veintitres a {color: #080041; height: 150px; padding: 0;float: left; width: 180px; height: 32px; padding-top: 15px; margin-left: -86px; z-index: 2;
text-decoration: none; font-weight: 800; border-radius: 5px; position: absolute;}
#gran a {border-style: solid; border-width: thin; border-color:#2bab9f; padding-top: 130px; margin-top: 102px; margin-left: -88px;z-index: 1; background-color: white;}

#nueve a, #diez a {margin-top: 393px;}
#once a, #doce a, #trece a {margin-top:448px;}

#nueve a, #once a {background-color: rgb(70, 49, 121); color: white;}
#nueve a:hover, #once a:hover{background-color:white; border-color:  rgb(70, 49, 121); border-style: solid; border-width: thin; color:#080041;}
#diez a, #doce a, #trece a {background-color:white; border-color:  rgb(70, 49, 121); border-style: solid; border-width: thin; color:#080041;}
#diez a:hover, #doce a:hover, #trece a:hover {background-color: rgb(70, 49, 121); color: white;}

#catorce a {margin-top: 503px; background-color: #0dacce; color: white;}
#catorce a:hover {background-color:white; border-color:  #0dacce; border-style: solid; border-width: thin; color:#080041;}

#quince a{margin-top: 558px; background-color: #3da0b8; color: white;}
#quince a:hover {background-color:white; border-color:  #3da0b8; border-style: solid; border-width: thin; color:#080041;}

#dieciocho a {margin-top: 613px; background-color: #150e7c; color: white;}
#dieciocho a:hover {background-color:white;border-style: solid;border-width: thin; border-color: #150e7c; color:#080041;}
#diecinueve a {margin-top: 613px; border-style: solid;border-width: thin; border-color: #150e7c; color:#080041;}
#diecinueve a:hover {background-color: #150e7c; color: white;}

#dieciseis a {margin-top: 668px; background-color: #ff8880; color: white;}
#dieciseis a:hover {background-color:white;border-style: solid;border-width: thin; border-color: #ff8880; color:#080041;}

#diecisiete a {margin-top: 723px; background-color: #ff8880; color: white;}
#diecisiete a:hover {background-color:white;border-style: solid;border-width: thin; border-color: #ff8880; color:#080041;}

#veinte a {margin-top: 778px; background-color: #19c8c8; color: white;}
#veinte a:hover {background-color:white;border-style: solid;border-width: thin; border-color: #19c8c8; color:#080041;}

#veintiuno a {margin-top: 833px; background-color: #19c8c8; color: white;}
#veintiuno a:hover {background-color:white;border-style: solid;border-width: thin; border-color: #19c8c8; color:#080041;}

.botones1 a { float: left; width: 39px; height: 32px; padding-top: 15px; 
text-decoration: none; font-weight: 800; border-radius: 5px; background-color: white;}

.botones1 {position: absolute; width: 187px; margin-left: 752px; }

#a a, #b a, #c a, #d a {background-color:white; border-color: #d1186c; border-style: solid; border-width: thin; color:#080041; margin-left: 5px; margin-top: 102px;}
#a a:hover, #b a:hover, #c a:hover, #d a:hover {background-color: #d1186c; color: white;  }
#b a{margin-top: 85px;} #c a {margin-top: 68px;} #d a {margin-top: 51px;}

#ocho a {z-index: 2;}