/**
 *
 * BEEPBOX
 * =======
 *
 * Colors
 * -------
 * corporativo   : #007195
 * corpLight     : #0095C4
 * corpDark      : #002F3E
 *
 * black         : #444
 * white         : #fff
 * gradient      : linear-gradient(90deg, #0766AF 0%, #177A5D 100%);
 *
 **/



/*
	UNIVERSAL BOX-SIZING
*/

html {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
			box-sizing: inherit;
}



/*
	UNIVERSAL
*/

html {
	height: 100%;
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1200px) {
	html { font-size: 57%; }
}

@media (max-width: 750px) {
	html { font-size: 52%; }
}

::-moz-selection {
	background-color: #007195;
	color: #fff;
}

::selection {
	background-color: #007195;
	color: #fff;
}


/*
	HACKS
*/

.container-fluid {
	max-width: 1170px;
}

.row.no-gutter [class*='col-'] {
	padding-right: 0;
	padding-left: 0;
}



/*
	ANIMATIONS
*/

@keyframes carga {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 23px 0;
	}
}



/*
	MAIN
*/

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #fff;
	overflow-x: hidden;
}



/*
	TEXT
*/

.blanco { color: #fff; }

h2 {
	margin: 0 0 4rem;
	padding: 0;
	font: 700 4.1rem/1.1 'Titillium Web', 'Helvetica', sans-serif;
	color: #007195;
}

h3 {
	margin: 2rem 0;
	padding: 0;
	font: 300 3rem/1.1 'Titillium Web', 'Helvetica', sans-serif;
}

h4 {
	margin: 0;
	padding: 0;
	font: 400 1.2rem/1.2 'Titillium Web', 'Helvetica', sans-serif;	
	color: #444;
	letter-spacing: 1px;
	text-transform: uppercase;
}

p { 
	margin: 0 0 3rem;
	padding: 0;
	font: 400 1.6rem/1.5 'Titillium Web', 'Helvetica', sans-serif;
	color: #444;
}



/*
	SECTIONS
*/

section {
	margin: 0;
	padding: 10rem 0;
}

section.gris {
	background-color: #f5f5f5;
}

.destacado {
	padding: 7rem 3rem;
	
	background-color: #007195;
	background-image: url('../img/lines-blue.png');
	background-size: 23px;
	
	text-align: center;
	color: #fff;

	animation-name: carga;
	animation-duration: 1500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

footer.footer {
	padding: 7rem 0 2rem;
	background-color: #002F3E;
}



/*
	HEADER
*/

header.header {
	width: 100%;
	height: 100vh;
	
	border: 1vh solid #fff;

	background-image: linear-gradient(90deg, #0766AF 0%, #177A5D 100%);
	background-image: url('../img/bg--teclado.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat; 
	
	position: relative;
}

.triangle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80px;
	height: 80px;
	
	background-image: url('../img/triangle.png');
	background-size: 80px 80px;
	background-repeat: no-repeat;
	
	z-index: 10;
}

.header__logo {
	padding: 4rem;

	width: 100vw;
	height: 100vh;
	
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.header__logo img {
	display: inline-block;
	margin: 0 auto;
	max-width: 50rem;
}

ul.header__lang {
	margin: 0;
	padding: 0;

	position: absolute;
	top: 30px;
	right: 30px;

	z-index: 9;
}

ul.header__lang li {
	margin: 0;
	padding: 0;
	display: inline-block;
	margin-left: 6px;
}

ul.header__lang li a {
	padding: 5px 8px;
	
	font: 400 12px/1 'Titillium Web', 'Helvetica', sans-serif;
	color: rgba(255,255,255,.4);
	text-decoration: none;

	transition: all 200ms;
}
	ul.header__lang li a:hover {
		color: rgba(255,255,255,1);
	}

ul.header__lang li a.active {
	border-bottom: 1px solid #fff;
	color: rgba(255,255,255,1);
}



/*
	SUMA
*/

.suma {
	width: 100%;
	margin: 50px auto 0;
}

.suma img {
	display: inline-block;
	margin-right: -4px;
}

.suma__beep { width: 20%; }

.suma__pcbox { width: 30%; }

.suma__pcbeep { width: 40%; }

.suma span {
	display: inline-block;
	width: 5%;
	margin-right: -4px;

	font: 400 1.6rem/1.5 'Titillium Web', 'Helvetica', sans-serif;
	text-align: center;
}



/*
	GALERÍA
*/

.gallery__img {
	margin-bottom: 30px;
	position: relative;
}

.gallery__img img {
	width: 100%;
	height: auto;
}

.gallery__img__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	background: #007195 url('../img/zoom.svg') center / 3rem;
	background-repeat: no-repeat;
	pointer-events: none;

	transition: 500ms all ease;
	visibility: hidden;
	opacity: 0;
	background-size: 2rem;
}

.gallery__img:hover .gallery__img__overlay {
	visibility: visible;
	opacity: .7;
	background-size: 3rem;
}



/*
	SERVICIOS
*/

.beepbox-logo {
	margin: 0 0 2rem;
	padding: 0;
	max-width: 35rem;
}

.servicios__servicio {
	text-align: center;
}

.servicios__servicio__icono {
	padding: 2rem 2rem 0;
}

.servicios__servicio__icono img {
	max-width: 13rem;
}

.servicios__servicio h4 {
	padding: 0;
}


@media (max-width: 490px) {
	.servicios__servicio {
		width: 50%;
		padding-right: 10px;
		padding-left: 10px;
	}
}



/*
	FOOTER
*/

footer.footer h3 {
	color: #0095C4;
}

@media (max-width: 600px) {
	footer.footer h2 br { display: none; }
}

/* Dirección y mapa */

.direccion-y-mapa {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.direccion-y-mapa__direccion {
	width: 100%;
}

.direccion-y-mapa__mapa {
	width: 100%;
	
	margin-bottom: 30px;
	height: 25.5rem;
}

/* /Dirección y mapa */

.footer__social {}

.footer__social a {
	margin: 0 5px 30px 0;
	display: inline-block;
	width: 50px;
	height: 50px;
	
	text-decoration: none;

	background-size: 50px;
	background-repeat: no-repeat;
	background-position: center;

	transition: all 100ms ease-in;
}

.footer__social a[title="facebook"] { background-image: url(../img/facebook.svg); }
.footer__social a[title="twitter"] { background-image: url(../img/twitter.svg); }

	.footer__social a:hover,
	.footer__social a:active {
		transform: scale(.9);
	}

.copyright p {
	text-align: center;
	color: rgba(255,255,255,.23);
	margin-top: 8rem;
}



/*
	FORM
*/

input[name="human"] { display: none; }
input[name="idioma"] { display: none; }

#formulario {
	width: 100%;
}

input,
textarea {
	margin: 0;
	padding:  1.8rem;
	margin-bottom: 30px;
	
	width: 100%;
	
	background-color: #fff;
	
	font: 400 1.6rem/1.5 'Titillium Web', 'Helvetica', sans-serif;
	color: #444;
	
	border: none;
	border-radius: 0;
	outline: none;

	transition: all 200ms;
}

@media (max-width: 490px) {
	.input-wrapper,
	.textarea-wrapper {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}
}

textarea {
	min-height: 20rem;
}

input:focus,
textarea:focus {
	-webkit-box-shadow: inset 0 0 0 3px #0095C4;
			box-shadow: inset 0 0 0 3px #0095C4;
}

::-webkit-input-placeholder { opacity: .5; }
:-ms-input-placeholder { opacity: .5; }
::placeholder { opacity: .5; }


input[type=submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	border: none;

	cursor: pointer;
	
	background-color: #0095C4;
	
	font: 700 1.6rem/1.5 'Titillium Web', 'Helvetica', sans-serif;
	text-align: center;
	color: #FFFFFF;
	
	max-width: 20rem;
	
	transition: all 200ms;
	
	padding: 1.8rem;
	float: right;
}

input[type=submit]:active {
	opacity: .8;
	transform: scale(.9);
}
#name {
	display: none;
}