.directorio{
    width: 100%;
    height: 80.5vw;
    /*padding-top: 4vw !important;*/
    z-index: 1;
}
.ocultarmapa{
    display: none;
}
.desactivarboton{
    opacity: .5;
    pointer-events: none;
    cursor: pointer;
}
.directoriomovil{
    display: none;
}
.fijadordirectorio{
    width: 10px;
    height: 10px;
    margin: -5vw;
    position: absolute;
}
.head1{
    width: 100%;
    height: 8vw;
    font-family: proximablack;
    font-size: 8.1vw;
    color:  rgba(33, 51, 96, 1.0);
    padding-top: 2.5vw;
    text-align: center;
}
.subtitulo{
    width: 53%;
    height: 5vw;
    font-family: proximaregular;
    font-size: .9vw;
    color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5vw;
    
}
.generalmapa{
    width: 100%;
    height: 43.2vw;
    padding-top: 6vw;
}
.boton_eleccion{
    width: 20%;
    height: auto;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color:rgba(33, 51, 96, 1.0);
    color: white;
    border-radius: 2vw;
    float: left;
}
.boton_eleccion:hover{
    width: 20%;
    height: auto;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color:rgba(33, 205, 192, 1.0);
    color: black;
    border-radius: 2vw;
    float: left;
}

.generalmapalatino{
    width: 100%;
    height: 48.2vw;
    padding-top: 6vw;
}
.mapamapa{
    width: 65%;
    height: 48vw;
    float: left;
    position: relative;
    transform: scale(88%);
    left: 3vw;
    top: 1vw;
}
.mapamapalatino{
    width: 65%;
    height: 48vw;
    float: left;
    position: relative;
    transform: scale(38%);
    left: 6vw;
    top: -8vw;
}
.mapaciudades{
    width: 20%;
    height: 38vw;
    float: left;
}
.estado{
    color: blue;
}

/*.mex2706{
    fill: rgb(128, 0, 255);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
.mex2706:hover{
    fill: aqua;
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}*/

svg{
    fill: gray;
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
    cursor: pointer;
    opacity: 1;
}
.inactivos{
    opacity: .3 !important;
}
svg #puertorico:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #dominicana:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #cuba:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #panama:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #rica:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #nicaragua:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #honduras:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #salvador:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #belice:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #guatemala:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #brasil:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #francesa:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #surinam:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #guyana:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #venezuela:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #colombia:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #ecuador:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #bolivia:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #paraguay:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #uruguay:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #argentina:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #chile:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #peru:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2706:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}

svg #MEX2707:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2708:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2709:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2710:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2711:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2712:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2713:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2714:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2715:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2716:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2717:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2718:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2719:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2720:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2721:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2722:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2723:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2724:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2725:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2726:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2727:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2728:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2729:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2730:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2731:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2732:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2733:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2734:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2735:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2736:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
svg #MEX2737:hover{
    fill:   rgba(33, 51, 96, 1.0);
    stroke: #fff; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}
.estados{
    width: 100%;
    height: auto;
    margin-top: 3.5vw;
}
.tituloestado{
    font-family: proximablack;
    font-size: 2.3vw;
    margin-left: 1.3vw;
}
.ciudad{
    border: none;
    font-family: proximabold;
    font-size: 1vw;
    margin-top: .9vw;
    margin-left: 1.2vw;
    background-color: rgb(60, 91, 168);
    color: white;
    width: 60%;
    padding-left: 1vw;
    border-radius: 1vw;
    cursor: pointer;
   
    
}
.esquinas{
    
    border-radius: .5vw !important;
    padding-bottom: .7vw !important;
   
    
}
.ciudad:hover{
    font-family: proximabold;
    font-size: 1vw;
    margin-top: .9vw;
    margin-left: 1.2vw;
    background-color:  rgb(60, 91, 168);
    width: 60%;
    padding-left: 1vw;
    border-radius: .5vw;
}
.hide{
    display: none !important;
}
.opcionesgenearl{
    display: block;
    font-family: proximabold;
    font-size: 1vw;
    margin-top: 0vw;
    margin-left: 1.2vw;
    background-color: rgb(203, 203, 203);
    width: 60%;
    height: auto;
    padding-left: 1vw;
    border-bottom-left-radius: .5vw;
    border-bottom-right-radius: .5vw;
    cursor: pointer;
}
.opcionciudad{
    font-family:proximaregular;
    font-size: .7vw;
    margin-top: 0vw;
    margin-left: -1vw;
    background-color: rgba(242, 201, 51, 0);
    width: 100%;
    padding-left: 1vw;
    cursor: pointer;
    padding-top: .3vw;
    border-bottom-left-radius: .5vw;
    border-bottom-right-radius: .5vw;
   
}
.opcionciudad:hover{
  
    font-family: proximaregular;
    font-size: .7vw;
    margin-top: 0vw;
    margin-left: -1vw;
    background-color: rgba(242, 201, 51,0);
    width: 100%;
    padding-left: 1vw;
    color: white;
    cursor: pointer;
   
}

.ciudadseleccionado{
    font-family: proximabold !important;
    font-size: 1vw !important;
    margin-top: .9vw !important;
    margin-left: 1.2vw !important;
    background-color: rgb(203, 203, 203) !important;
    width: 60% !important;
    padding-left: 1vw !important;
    border-top-right-radius: .5vw !important;
    border-top-left-radius: .5vw !important;
    border-bottom-right-radius: 0vw !important;
    border-bottom-left-radius: 0vw !important;
    cursor: pointer !important;
}
.ventanaparamapa{
  
    width: 100%;
    height: 20.5vw;
    margin-bottom: 0px;
   
}
.mapisn{
    width: 59%;
    height: 22vw;
    float: left;
    overflow: hidden;
}
.direccion{
    width: 40.99%;
    height: 20.3vw;
    float: left;
    background-image: url("../assets/img/direcciones.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.titudireccion{
    font-family: proximabold;
    font-size: 1.5vw;
    margin-top: 2.7vw;
    margin-left: 3.7vw;
}
.direcciondos{
    font-family: proximaregular;
    font-size:  1vw;
    margin-top: 1.2vw;
    margin-left: 3.7vw;
}
.direcciondosA{
    font-family: proximaregular;
    font-size:  1vw;
    margin-top: .1vw;
    margin-left: 3.7vw;
}
.direcciontres{
    font-family: proximaregular;
    font-size:  1vw;
    margin-top: 1.4vw;
    margin-left: 3.7vw;
}
.direccioncuatro{
    text-decoration: none;
    font-family: proximabold;
    font-size:  1vw;
    margin-top: 1.4vw;
    margin-left: 3.7vw;
}
.fotopresenta{
    width: 100%;
    height: auto;
}