/* -------------------------------------------- */
/* Contactos - Section Styles      */
/* -------------------------------------------- */
.leftc p:first-of-type, .rightc h2:first-of-type {
	margin-top: 0;
}
	.input-text, input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {
	    width: 100%;
		font: normal 18px "nexa";
		padding: .6180469716em;
		padding-left: 30px;
		margin: 5px;
	    background-color: #f2f2f2;
	    color: #43454b;
	    outline: 0;
	    border: 0;
	    -webkit-appearance: none;
	    box-sizing: border-box;
	    box-shadow: inset 0 1px 1px rgba(0,0,0,.125);
	}
	::placeholder {
		color: #aaaaaa;
	    opacity: 1; /* Firefox */
	}
	.person {background: url(/ars/icon-person.png) no-repeat scroll 7px 10px;}
	.mail {background: url(/ars/icon-mail.png) no-repeat scroll 7px 10px;}
	.subject {background: url(/ars/icon-subject.png) no-repeat scroll 7px 10px;}
	textarea {padding-left: 5px;}
	input[type=text]:hover, textarea:hover {
    background-color: #fffeea;
	}
input[type=submit] {
	width: 100%;
	font: normal 20px "sailec";
	height: 50px;
    display: inline-block;
    vertical-align: middle;
	margin: 5px;
    padding: 4px 8px;
    text-align: center;
    color: #333;
	background-color: #ffffff;
    border: 2px solid #00aff0;
    border-radius: 3px;
    transition: .2s ease-out color, .2s ease-out background-color;
}
input[type=submit]:hover {
    color: #fff;
    background-color: #00aff0;
    text-decoration: none;
}
.spamfield {
	visibility: hidden;
	height:0;
	margin:0 !important;
	padding:0 !important;
}
.float {
	/* display: none; */
	position:fixed;
	width:60px;
	height:60px;
	bottom:10px;
	right:10px;
	color:#FFF;
	text-align:center;
	z-index:100;
	opacity: 0.9;
}
.ws {
	filter: drop-shadow(2px 2px 10px #222222);
	animation: popup .6s;
    transform: scale(0,0);
	transform-origin: bottom left 60px;
	animation-delay: 2s;
    animation-fill-mode: forwards; /* Add this so that your modal doesn't 
                                      close after the animation completes */
}
@keyframes popup {
    50% {
        transform: scale(1.1,1.1);
    }
	    100% {
        transform: scale(1,1);
    }
}
.mapcard p{
	margin: 0;
}
.leftc {
	width: 50%;
	float: left;
}
.rightc {
	width: 40%;
	float: right;
	text-align: left;
}
.rightc h2, #locations h2 {
	font: 700 30px/30px 'nexa', sans-serif;
	letter-spacing: -2px;
	color: #0083a4;
	margin: 15px 0 10px;
}
.leftc p, .rightc {
	max-width: 100%;
	font: normal 18px/22px "sailec";
	text-align: left;
}
#locations {
	clear:both;
	display: grid;
}
#locations h2 {
 	font-size: 28px;
 	margin: 0 0 0 20px;
 }
.sucursales {
	width:100%;
	height:auto;
	margin: 0 0 50px 0;
	background:#000;
	box-shadow: 1px 5px 5px rgb(0 0 0 / 10%);
	border-radius: 10px 10px 0 0;
}
#locations .sucursales h2 {
	margin: 10px 0 0 20px;
}
.ulvalores {
	columns: 2;
}
.ulvalores a, .ulvalores ul {
	color:#fff;
	box-shadow: inset 0 0 0 0 #eb363b;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.ulvalores a:hover {
	color:#cecece;
	font-weight: bold;
	box-shadow: inset 200px 0 0 0 #eb363b;
}
#locations .sucursales .ulvalores li {
	font: normal 18px "sailec";
	color: #fff;
}
@media only screen and (max-width: 480px) {
.leftc, .rightc {
	width: 90%;
	margin-left: 4%;
}
.rightc {
	margin: 50px 0 0 0;
}
.rightc h2, #locations h2 {
	font-size: 34px;
	line-height: 34px;
	margin: 30px 0 0;
}
#locations h2 {
	margin: 20px 0 20px 4%;
}
#locations .sucursales h2 {
	margin-top: 30px;
}
}