@charset "utf-8";
/*
Theme Name: NoveTheme
Theme URI: http://wearenove.com/
Author: Luis Solorio
Author URI: http://luisolorio.com/
Description: Tema para Agencia Nove
Version: 1.0
*/

/*
=====================================================
	GENERAL
=====================================================*/

/* - - - - Fuentes - - - - */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700);

/* - - - - Fuetes Responsivas - - - - */
/* xs */
@media screen and (max-width: 767px) {
	.text-children-xs-small{font-size: 1.08em}
	.text-children-xs-small-x2{font-size: .81em}
	.text-children-xs-big{font-size: 2.16em}
	.text-children-xs-big-x2{font-size: 2.52em}

	.text-xs-left{text-align: left}
	.text-xs-center{text-align: center}
	.text-xs-right{text-align: right}

	.boton{font-size: 1.62em!important}
	.boton-big{font-size: 1.8em!important}
	.boton.full-xs, .boton-big.full-xs{
		width: 100%;
		padding-left: 0!important;	padding-right: 0!important
	}
	.boton.small-xs, .boton-big.small-xs{font-size: 1.26em!important}
	.deja{font-size: 2.16em !important}
}
/* sm */
@media (min-width: 768px) and (max-width: 991px) {
	.text-children-sm-small{font-size: 1.44em}
	.text-children-sm-small-x2{font-size: 1.08em}
	.text-children-sm-big{font-size: 2.16em}
	.text-children-sm-big-x2{font-size: 2.52em}

	.text-sm-left{text-align: left}
	.text-sm-center{text-align: center}
	.text-sm-right{text-align: right}

	.boton.full-sm, .boton-big.full-sm{
		width: 100%;
		padding-left: 0!important;	padding-right: 0!important
	}
	.boton.small-sm, .boton-big.small-sm{font-size: 1.8em!important}
}
/* md */
@media (min-width: 992px) and (max-width: 1199px) {
	.text-children-md-small{font-size: 1.44em}
	.text-children-md-small-x2{font-size: 1.08em}
	.text-children-md-big{font-size: 2.16em}
	.text-children-md-big-x2{font-size: 2.52em}

	.text-md-left{text-align: left}
	.text-md-center{text-align: center}
	.text-md-right{text-align: right}

	.boton.full-md, .boton-big.full-md{
		width: 100%;
		padding-left: 0!important;	padding-right: 0!important
	}
}
/* lg */
@media screen and (min-width: 1200px) {
	.text-children-md-small{font-size: 1.44em}
	.text-children-md-small-x2{font-size: 1.08em}
	.text-children-md-big{font-size: 2.16em}
	.text-children-md-big-x2{font-size: 2.52em}

	.text-lg-left{text-align: left}
	.text-lg-center{text-align: center}
	.text-lg-right{text-align: right}

	.boton.full-lg, .boton-big.full-lg{
		width: 100%;
		padding-left: 0!important;	padding-right: 0!important
	}
}

/* - - - - General - - - - */
body {color:#4c4c4c;	font-family: 'Source Sans Pro', sans-serif;	font-size: 1em;	line-height: 1.5em;	background: #fafafa}
h1, .h1{color: #333;	font-size: 3.6em;	font-weight: 700;	line-height: 1.2em}
h2, .h2{font-size: 3.006em;	font-weight: 700;	line-height: 1.4em}
h3, .h3{font-size: 2.52em;	font-weight: 700;	line-height: 1.4em}
h4, .h4{font-size: 2.34em;	font-weight: 700;	line-height: 1.4em}
a, a img{
	/* Animacion */
	-webkit-transition:all 0.3s ease 0s;
	-moz-transition:all 0.3s ease 0s;
	-o-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
hr{height: 1px;	background: #ededed}
p{font-size: 1.8em; line-height: 1.5em}
p a{color: #ff0019}
p a:visited{color: #cc0014}
img.wp-post-image{margin-bottom: 10px;	border: 1px solid #d9d9d9}
.none {
	display: none
}
.clear {clear: both}

/* - - - - Botones - - - - */
button,
a.button{
	display: inline-block;
	margin-top: 20px;	padding: .84em 1.67em .94em;
	font-size: 1.8em;	font-weight: 600;	color: #333;	line-height: 1em;
	vertical-align: middle;
	border: none;
	border-top: 1px solid rgba(255,255,255,.25);
	background: #fafafa;
	/* CSS3 */
		border-radius: 4px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.37);
	/* Animacion */
	-webkit-transition:all 0.3s ease 0s;
	-moz-transition:all 0.3s ease 0s;
	-o-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
button:hover,
a.button:hover{
	color: #000;	text-decoration: none;
	background: #fff;
	/* CSS3 */
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.3)
}
button:focus,
a.button:focus{text-decoration: none}
button.flecha,
a.button.flecha{
	padding: 16px 11px 13px;
	border: 1px solid #545454;
	background: transparent;
	/* CSS3 */
		border-radius: 50px;
		box-shadow: none;
		opacity: .8
}
button.flecha::after,
a.button.flecha::after{
	content: "";
	display: block;
	width: 16px;	height: 9px;
	background: url(../img/sprite.png) -27px 0 no-repeat
}
button.flecha.blanca,
a.button.flecha.blanca{border-color: #fafafa}

button.flecha.blanca::after,
a.button.flecha.blanca::after{background-position: -44px 0}

button.flecha.arriba,
a.button.flecha.arriba{padding: 13px 11px 16px}

button.flecha.arriba::after,
a.button.flecha.arriba::after{background-position: -61px 0}

button.flecha:hover,
a.button.flecha:hover{opacity: 1}

button.close{
	margin-top: 0;
	box-shadow: none;
}
button.close:hover{background: none;}

/* - - - - Colores - - - - */
.rojo{color: #ff0019 !important}
.bg-rojo{color: #fff !important;	background: #ff0019 !important}
.azul{color: #2196f3 !important}
.bg-azul{color: #fafafa !important;	background: #2196f3 !important}
.morado{color: #673ab7 !important}
.bg-morado{color: #fafafa !important;	background: #673ab7 !important}

/* Hovers */
.bg-rojo:hover{color: #fff !important;	background: #ff1a30 !important}
.bg-azul:hover{color: #fff !important;	background: #249cff !important}
.bg-morado:hover{color: #fff !important;	background: #703fc4 !important}



/*
=====================================================
	RESPONSIVO
=====================================================*/

/* xs */
@media screen and (max-width: 767px) {

	/* Clientes regresen */
	#regresen{background-position: -390px 180px !important}

	/* Más ingresos */
	#ingresos{background-position: -413px 130px !important}

	/* Clientes */
	#clientes h2{margin-top: 1.94em !important}

	/* Somos equipo */
	#equipo h2{margin-top: 20% !important}

	/* Servicios */
	#servicios .color{height: 450px !important}

	/* Footer */
	footer .logo{margin-top: 30px !important}

}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {

	/* Clientes regresen */
	#regresen{background-position: -320px center !important}

	/* Más ingresos */
	#ingresos{background-position: 360px center !important}

	/* Servicios */
	#servicios .color{height: 400px !important}

}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {

	#cabecera .ipad{background: url(../img/ipad.png) no-repeat}

	/* Sección tipo escritorio */
	#web h3{margin-top: 2.78em !important}

	/* Clientes regresen */
	#regresen{background-position: -120px center !important}

	/* Más ingresos */
	#ingresos{background-position: 120% center !important}

}

/* lg */
@media screen and (min-width: 1200px) {

	#cabecera .ipad{
		background: url(../img/ipad.png) no-repeat;
		z-index: 1
	}

	/* Sección tipo escritorio */
	#web .img{
		height: 450px;
		background: none!important
	}
	#web .img .izq{
		position: absolute;	left: 0;
		width: 360px;	height: 450px;
		background: url(../img/venta-web.jpg) -10px center no-repeat
	}
	#web .img .der{
		position: absolute;	right: 0;
		width: 850px;	height: 450px;
		background: url(../img/venta-web.jpg) -420px center no-repeat
	}
	#web h3{margin-top: 2.78em !important}

}



/*
=====================================================
	MENÚ
=====================================================*/

#nav{
	padding: 20px 0;
	font-size: 1.8em;
	border-bottom: 1px solid #f5f5f5;
	background: #fff;
	z-index: 999
}
	#logo{
		width: 80px;
		margin-left: 10px
	}
	#nav a{color: #666}
	#nav a:hover{text-decoration: none;	color: #ff0019;	background: none}
	#nav a:focus{background: none}
	#nav li.active a{color: #ff0019}

	/* Hamburguer button */
	#nav button{
		background: #ededed;
		/* CSS3 */
			box-shadow: none
	}
	#nav button .icon-bar{background: #666}

	/* SubMenu */
	#subm{
		color: #666;
		padding: 14px 0;
		background: #fff
	}
	#subm ul{
		display: inline-block;
		margin-left: 10px
	}
	#subm li{
		display: inline-block;
		margin: 0 0 0 10px;
		font-size: 1.188em
	}
	#subm li a{
		display: block;
		padding: 3px 16px;
		background: #f0f0f0;
		/* CSS3 */
			border-radius: 3px;
		/* Animacion */
			-webkit-transition:all 0.2s ease 0s;
			-moz-transition:all 0.2s ease 0s;
			-o-transition:all 0.2s ease 0s;
			transition:all 0.2s ease 0s
	}
	#subm li a:hover{
		color: #fff;
		background: #ff0019
	}
	#subm h1{
		padding: 3px 10px 3px 7px;
		font-size: 1.188em;	color: #fff;	line-height: 1.5em;	font-weight: 700;
		background: #ff0019;
		/* CSS3 */
			border-radius: 3px
	}
	#subm h1 span{
		display: inline-block;
		width: 10px;	height: 7px;
		margin-right: 4px;
		background: url(../img/sprite.png) -5px 0 no-repeat
	}



/*
=====================================================
	CABECERA
=====================================================*/

#cabecera{color: #fff}
	#cabecera .img{
		height: 500px;
		background: url(../img/cabecera.jpg) center center;
		background-size: cover
	}
	#cabecera .ipad{
		height: 560px;
		margin-top: 24px;	margin-bottom: -100px;
		background: url(../img/iPad.png) center center no-repeat;
	}
	#cabecera h1{
		margin-top: 3.61em;
		color: inherit
	}
	#cabecera p{font-size: 1.998em;	line-height: 1.5em}
	#cabecera span{
		position: absolute;	bottom: -49px;
		width: 154px;	height: 83px;
		margin-left: 10px;
		background: url(../img/sin-compromiso.png)
	}



/*
=====================================================
	VENTA
=====================================================*/

/* - - - - Web - - - - */
#web{text-align: center;	background: #ededed}
	#web .img{
		background: url(../img/venta-web.jpg) center center no-repeat;
		background-size: cover
	}
	#web h3{margin-top: 2em}
	#web p{font-size: 1.998em;	line-height: 1.5em}
	#web a.button{margin-bottom: 4em}

/* - - - - Clientes regresen - - - - */
#regresen{
	height: 350px;
	color: #fff;
	background: url(../img/venta-regresen.jpg) #6ab7f1 left center no-repeat
}
	#regresen h3{
		margin-top: 2em;
	}

/* - - - - Más ingresos - - - - */
#ingresos{
	height: 350px;
	color: #1d3624;
	background: url(../img/venta-ingresos.jpg) #7fe79d right center no-repeat;
}
	#ingresos h3{
		margin-top: 2em;
	}



/*
=====================================================
	CLIENTES
=====================================================*/

#clientes{
	color: #fafafa;	text-align: center;
	background: #2196f3;
}
	#clientes span{
		position: absolute;	left: 50%;
		width: 0;	height: 0;
		margin-left: -30px;
		border: 30px solid transparent;
		border-top-color: #7fe79d;
	}
	#clientes h2{
		margin-top: 2.78em;
		color: inherit
	}
	#clientes p{
		margin-bottom: 2.75em;
		font-size: 1.98em;	line-height: 1.5em
	}

/* - - - - Imágenes - - - - */
	#clientes a{
		background: center center no-repeat;
		background-size: 100%;
		/* Animacion */
			-webkit-transition:all 2s ease 0s;
			-moz-transition:all 2s ease 0s;
			-o-transition:all 2s ease 0s;
			transition:all 2s ease 0s;
	}
	#clientes a:hover{background-size: 120%}
	#clientes a:hover img{opacity: 0}

/* AguaChiles */
	#clientes a.aguachiles{background-image: url(../img/clientes-AguaChiles-trans.jpg)}
	#clientes a.aguachiles:hover{background-image: url(../img/clientes-AguaChiles.jpg)}

/* Ferre del Golfo */
	#clientes a.ferre{background-image: url(../img/clientes-GolfoCalifornia-trans.jpg)}
	#clientes a.ferre:hover{background-image: url(../img/clientes-GolfoCalifornia.jpg)}

/* Por Un Mejor Andar */
	#clientes a.puma{background-image: url(../img/clientes-PorUnMejorAndar-trans.jpg)}
	#clientes a.puma:hover{background-image: url(../img/clientes-PorUnMejorAndar.jpg)}

/* AguaChiles */
	#clientes a.dent{background-image: url(../img/clientes-Dentista-trans.jpg)}
	#clientes a.dent:hover{background-image: url(../img/clientes-Dentista.jpg)}



/*
=====================================================
	SOMOS EQUIPO
=====================================================*/

#equipo{
	min-height: 400px;
	background: url(../img/somos-parte.jpg) center center no-repeat;
	background-size: cover
}
	#equipo h2{
		margin-top: 2.38em;
		font-size: 4.14em;	line-height: 1.2em
	}
	#equipo p{font-size: 1.98em;	line-height: 1.5em}
	#equipo button{margin-bottom: 3.3em}



/*
=====================================================
	SERVICIOS
=====================================================*/

#servicios{
	position: relative;
	padding-bottom: 60px; /* BORRAR cuando el boton "Más servicios" esté visible */
	color: #fafafa;	text-align: center
}
	#servicios .color{
		position: absolute;
		width: 100%;	height: 500px;
		background: #673ab7
	}
	#servicios h2{
		margin-top: 1.63em;
		color: inherit
	}
	#servicios p{margin-bottom: 2em}
	#servicios article{
		margin-bottom: 10px;
		color: #000;	text-align: left
	}
		#servicios .img{position: relative}
		#servicios img{
			min-width: 100%;
			margin-bottom: 20px;
			border-bottom: 10px solid
		}

	/* Iconos */
		#servicios span{
			position: absolute;	top: 50%;	left: 50%;
			width: 117px;	height: 108px;
			margin: -54px 0 0 -58px
		}
	/* Branding */
		#servicios .brand img{border-color: #ff0019}
		#servicios .brand span{background: url(../img/servicios-iconos-branding.png) center center no-repeat}
	/* Desarrollo web */
		#servicios .web img{border-color: #7fe79d}
		#servicios .web span{background: url(../img/servicios-iconos-web.png) center center no-repeat}
	/* Social media */
		#servicios .social img{border-color: #6ab7f1}
		#servicios .social span{background: url(../img/servicios-iconos-social.png) center center no-repeat}
	#servicios a.button{margin-top: 0;	margin-bottom: 4.4em}



/*
=====================================================
	CONTACTO
=====================================================*/

#contacto .cabecera{
	color: #fafafa;	text-align: center;
	background: url(../img/contacto.jpg) center center no-repeat;
	background-size: cover
}
	#contacto h2{
		margin: 2.62em 0 .55em;
		font-size: 4.14em;	line-height: 1.2em
	}
	#contacto b, #contacto .deja{
		margin-bottom: .24em;
		font-size: 1.67em;	line-height: 1.5em;	font-weight: 400
	}
	#contacto .tel{
		display: inline-block;
		width: 24px;	height: 30px;
		margin: 0 -5px -2px 6px;
		background: url(../img/sprite.png) 0 -13px no-repeat
	}
	#contacto strong{font-weight: 600}
	#contacto .deja{
		display: inline-block;
		margin: 1.67em 0
	}
		#contacto .deja a.button{margin: 0 7px}

/* Mensaje */
#contacto .mensaje{
	width: 100%;
	padding: 10px;
	background: -webkit-linear-gradient(135deg, #f00018 7%,
								transparent 7%, transparent 18%, #009ef0 18%, #009ef0 32%,
								transparent 32%, transparent 43%, #f00018 43%, #f00018 57%,
								transparent 57%, transparent 68%, #009ef0 68%, #009ef0 82%,
								transparent 82%, transparent 93%, #f00018 93%);
	background: -moz-linear-gradient(135deg, #f00018 7%,
								transparent 7%, transparent 18%, #009ef0 18%, #009ef0 32%,
								transparent 32%, transparent 43%, #f00018 43%, #f00018 57%,
								transparent 57%, transparent 68%, #009ef0 68%, #009ef0 82%,
								transparent 82%, transparent 93%, #f00018 93%);
	background: -ms-linear-gradient(135deg, #f00018 7%,
								transparent 7%, transparent 18%, #009ef0 18%, #009ef0 32%,
								transparent 32%, transparent 43%, #f00018 43%, #f00018 57%,
								transparent 57%, transparent 68%, #009ef0 68%, #009ef0 82%,
								transparent 82%, transparent 93%, #f00018 93%);
	background: linear-gradient(135deg, #f00018 7%,
								transparent 7%, transparent 18%, #009ef0 18%, #009ef0 32%,
								transparent 32%, transparent 43%, #f00018 43%, #f00018 57%,
								transparent 57%, transparent 68%, #009ef0 68%, #009ef0 82%,
								transparent 82%, transparent 93%, #f00018 93%);
	-pie-background: linear-gradient(135deg, #f00018 7%,
								transparent 7%, transparent 18%, #009ef0 18%, #009ef0 32%,
								transparent 32%, transparent 43%, #f00018 43%, #f00018 57%,
								transparent 57%, transparent 68%, #009ef0 68%, #009ef0 82%,
								transparent 82%, transparent 93%, #f00018 93%) 0 0 / 200px 200px, #fafafa;
	background-size: 200px 200px;
	background-color: #fafafa;
}
#contacto .cont{
	padding: 80px 0 70px;
	background: #fafafa
}

/* Formulario */
#contacto .result_div{
	font-size: 1.5em;	line-height: 1.5em
}
#contacto label{
	font-size: 1.98em;	color: #616161;	font-weight: 400;	line-height: 1.5em
}
#contacto input, #contacto textarea{
	height: auto;
	padding: 9px 20px 11px;
	font-size: 2.34em;	color: #949494;	font-weight: 300;	font-style: italic; line-height: 1.5em;
	border: 1px solid #c7c7c7;
	background-color: #fafafa;
	/* CSS3 */
		box-shadow: none
}
#contacto input.error{border-color: #f20000}
#contacto input:focus, #contacto textarea:focus{
	color: #474747;
	border-color: #adadad;
	background-color: #fff
}
#contacto textarea{font-size: 1.98em}
#contacto input#enviar{
	display: inline-block;	cursor: pointer;
	margin-top: 20px;	padding: .84em 1.67em .94em;
	font-size: 1.8em;	font-weight: 600;	color: #333;	line-height: 1em;
	vertical-align: middle;
	border: none;
	border-top: 1px solid rgba(255,255,255,.25);
	/* CSS3 */
		border-radius: 4px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.37);
	/* Animacion */
	-webkit-transition:all 0.3s ease 0s;
	-moz-transition:all 0.3s ease 0s;
	-o-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
#contacto input#enviar:hover{
	cursor: pointer;
	color: #000;	text-decoration: none;
	background: #fff;
	/* CSS3 */
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.3)
}

#contacto input#enviar:focus{text-decoration: none}



/*
=====================================================
	FOOTER
=====================================================*/

footer{
	padding: 40px 0 20px;
	font-size: 1.404em;	color: #fff;	line-height: 1.5em;
	background: #f00018
}
footer .logo{
	display: inline-block;
	width: 60px;	height: 34px;
	margin-top: -10px;
	background: url(../img/sprite.png) -24px -10px no-repeat
}
footer a.button{margin: 0}
footer img{
	display: inline-block;
	margin-top: -3px;
	vertical-align: middle
}
footer .text-xs-center{padding-top: 9px;	padding-bottom: 9px}
footer hr{
	width: 80px;
	border: none
}