.cards-wrap {
border: 0 solid blue;
margin: 1em 0 0 0;
width: 920px;
overflow: hidden;
}

.tarjeta1, .tarjeta2, .tarjeta3 { 
background-color: #fafafa;
border: 0 solid black;
float: left;
overflow: hidden;
padding: 0 0 .5em 0;
position: relative;
width: 210px; 
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.tarjeta1 { height: 240px; display: inline-block; margin: 12px 10px;}
.tarjeta2 { height: 240px; display: none; margin: 20px 10px;}
.tarjeta3 { height: 260px; display: none; margin: 20px 10px;}

.show { display: inline-block; }

/* /////////////////////////////////// ------------ INFO OVERLAY -------------- //////////////////////////////////*/

.mas { 
border: 0 solid #7bd0c1; 
background-color: #fafafa;
height: 190px; 
text-align: center;
padding: 8px 10px;
position: absolute;
width: 190px;
top: 158px;
transition: .5s ease;
}

.mas p { 
color: #657382; 
font-size: .9em; 
line-height: 1.4;
margin: 0;
}

.plus {
border: 0 solid red;
color: #7bd0c1; 
font-size: 2em; 
height: 23px;
line-height: .5;
margin: -2px 0 0 0;
padding-right: 0;
text-align: right;
width: 98%;
transition: .5s ease;
}

.mas:hover { top: 50px; z-index: 3;}
.mas:hover .plus {color: #fafafa; height: 15px; }

/* CARD CONTENT */

.choro p { 
border-bottom: 0 solid #7bd0c1; 
color: #657382; 
font-size: .9em; 
line-height: 1.4;
margin: 0;
text-align: center;
}

.nombre, .nombre2 { 
font-family: 'Montserrat', sans-serif;
font-weight: 700; 
font-size: .9em; 
text-transform: uppercase;
color: #333; 
}

.subtitulo { 
font-weight: 700; 
color: #CD7208; 
font-size: .85em; 
}

.tele { 
font-weight: 700; 
color: #CD7208; 
}

.choro a, .mas a { 
font-weight: 700; 
color: #CD7208; 
text-decoration: none;
border: 0;
}

.choro a:hover, .mas a:hover { color: #7bd0c1; }

/* /////////////////////////////////// ------------ FILTROS -------------- //////////////////////////////////*/


/* FILTER MENU */

#filtermenu { 
display: inline-block;
margin: 10px auto; 
text-align: left;
width: 100%;
height: 30px;
}

.browse {
color: #777; 
display: inline; 
font-family: 'Montserrat', sans-serif;
font-size: .8em;
font-weight: 600;
margin-right: 10px;
padding: 8px 0; 
text-transform: uppercase;
}

.dropbase {
border: 0 solid red;
position: relative;
display: inline-block;
padding: 0;
margin: 0;
}

.dropbtn {
background-color: none;
border: 0;
color: #bc74d8; 
cursor: pointer;
display: inline; 
font-family: 'Montserrat', sans-serif;
font-size: .8em;
font-weight: 600;
margin: 0;
padding: 8px; 
text-decoration: none;
text-transform: uppercase;
}

.mapbtn { display: inline; margin: 0; padding: 8px; }
.primero {
display: inline !important; 
font-weight: 600 !important; 
margin: 0 5px 0 0 !important;
padding: 8px !important;  }


.dropbtn:hover {
background-color: #7bd0c1;
color: #fff;
text-decoration: none;
}

.dropcont {
background-color: #fafafa;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
display: none;
margin: 0;
padding: 10px;
position: absolute;
width: 140%;
z-index: 3;
}

.btn {
background-color: transparent;
border: 0;
color: #bc74d8; 
cursor: pointer;
display: block; 
font-family: 'Montserrat', sans-serif;
font-size: .75em;
font-weight: 600;
margin: 0;
padding: 5px; 
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

.btn:hover, .btn.active  {
background-color: #7bd0c1;
color: #fff;
text-decoration: none;
}

.dropbase:hover .dropcont {display: block;}

/* /////////////////////////////////// ------------ MODAL
///////////////////////////////////*/


.mapbtn a {
border: 1px solid #bc74d8;
padding: 6px; 
color: #bc74d8; 
font-family: 'Montserrat', sans-serif;
font-size: .8em;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
}

.mapbtn a:hover { border: 1px solid #7bd0c1; background-color: #7bd0c1; color: #fff; }

.mapmodal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  transition: all 0.8s;
}

.mapmodal:target {
  opacity: 1;
  pointer-events: auto;
}

.map {
background: #fafafa;
width: 851px;
height: 315px;
position: relative;
margin: 10% auto;
padding: 20px 30px 20px 20px;
text-align: center;
}

.map img {
width: 100%;
height: 100%;
}

.closebtn {
border: 0;
color: #cd7208; 
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.3em;
font-weight: 700;
position: absolute;
right: -20px;
top: 0px;
text-align: center;
text-decoration: none;
top: 0;
width: 70px;
}

.closebtn:hover { color: #777; }


/* /////////////////////////////////// ------------ MEDIA
///////////////////////////////////*/

@media screen and (max-device-width: 800px) {
.cards-wrap { width: 768px; }
.tarjeta:nth-child(4n+0), .tarjeta2:nth-child(4n+0), .cards li:nth-child(4n+0) {margin-right: 21px; }
.map { width: 700px; height: 259px; margin: 10% 0; }
}

@media screen and (max-device-width: 414px) {
.cards-wrap { width: 350px; }
.tarjeta1, .tarjeta2, .tarjeta3 { float: left; padding: 0 0 .5em 0; width: 150px; overflow: hidden;}
.tarjeta1{ height: 195px; }
.tarjeta2 { height: 190px; margin: 12px 20px 12px 0; }
.tarjeta3 { height: 210px; margin: 12px 20px 12px 0;}
.tarjeta1:nth-child(odd) {margin-left: 0; }
.mas { height: 120px; width: 140px; top: 113px; padding: 5px; }
.mas p { font-size: .75em; }
.choro p { font-size: .75em; }
.mas p:last-child { font-size: .8em; }
.mas:hover { top: 0px; }
.plus { border: 0 solid red; font-size: 1.7em; height: 19px; margin: 8px 0 0 0; }
.nombre { font-size: .75em; }
.nombre2 { font-size: .7em; }
.quita { display: none; }
.info { font-size: .8em; top: 10px; left: 10px; width: 130px; }
#filtermenu { border: 0 solid red; margin: 10px 0; 
text-align: left;
width: 100%;
height: auto;
}
.browse { display: block; width: 30%; padding: 0; }
.dropbtn { padding: 5px; font-size: .75em; }
.btn { font-size: .75em; padding: 5px 0 5px 0; }
.primero { margin: 0 5px 0 0 !important; padding: 5px !important;  }
.mapbtn a { padding: 6px;  font-size: .75em; margin: 0;}
.map { width: 320px; height: 160px; padding: 10px 15px 10px 5px; margin: 65% auto;  }
.closebtn {right: -28px;
}