/*	======================================================================
	Global settings
	====================================================================== */

body {
	/*font-family: 'Lato', sans-serif;*/
	font-family: 'Raleway', sans-serif;
}

/*	Default content wrapper	*/
.content {
	margin: 0 auto; padding: 0;
	width: 90%;
	/*border: 1px solid blue;*/
}

/*	Float clearfix	*/
.clearfix:after		{ content: ""; display: table; clear: both; }

/*Headers*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
}

/*Icon images*/

.icon-images {
	width: 50px;
}

/*	Modal	*/
.modal {
	display: none;
	position: fixed;
	top: 0;
	width: 100%; height: 100%;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.75);
	z-index: 1000;
}

.modal-container {
	box-sizing: border-box;
	margin: auto auto; padding: 0;
	width: 90%; max-width: 50em;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}

.modal-close {
	position: absolute;
	text-align: right;
	margin-bottom: 0.5em;
	right: 0; bottom: 100%;
}

.modal-close a:link,
.modal-close a:visited {
	color: #fff;
	text-decoration: none;
}

.modal-video {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.modal-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.modal-container h2 {
	text-align: center;
}

/*	======================================================================
	Header
	====================================================================== */

/*	
	Mobile menu
	====================================================================== */

/*	2. Logo	*/
#mobile-logo {
	position: absolute;
	margin: 1em 0;
	left: 0;
	width: 6.75em; /*height: 2em;*/
}

#mobile-logo img {
	width: 100%;
	height: 100%;
}

/*	2. Hamburguer icon	*/
#mobile-menu {
	position: relative;
	height: 4em;
}

#hamburger-icon {
	position: absolute;
	margin: 1em 0;
	right: 0;
	width: 2em; height: 2em;
}

#hamburger-icon a {
	display: block;
	width: 100%; height: 100%;
	color: #000;
	text-align: right;
}

#menu-list {
	position: absolute;
	display: none;
	top: 4em;
	width: 100%;
	background: #FFF;
	border-bottom: 0.1em solid #000;
}

#mobile-menu-list {
	margin: 0 auto 1.5em; padding: 0;
	width: 90%;
	list-style: none;
}

#mobile-menu-list li {
	margin-top: 0.4em;
}

#mobile-menu-list li a {
	color: #000 !important;
	text-decoration: none;
	font-weight: bold;
}

/*
	Desktop menu
	====================================================================== */

#desktop-menu {
	display: none;
	position: relative;
	height: 5em;
}

/*	1. Logo	*/

#desktop-logo {
	position: absolute;
	margin: 1em auto;
	left: 0;
	width: 8em; /*height: 2em;*/
}

#desktop-logo a {
	display: block;
	width: 100%; height: 100%;
}

#desktop-logo a:hover {
	opacity: 0.75;
}

#desktop-logo a img {
	width: 100%; height: 100%;
}

#menu-links {
	position: absolute;
	margin: 1em auto;
	right: 0;
	height: 3em;
}

#menu-links ul {
	margin: 0; padding: 0;
	height: 100%;
	list-style: none;
}

#menu-links ul li {
	float: left;
	margin-left: 1.5em;
	height: 100%;
}

#menu-links ul li a {
	display: block;
	margin: 1em auto;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: #000;
}

#menu-links ul li a:link,
#menu-links ul li a:visited {
	color: #000;
	text-decoration: none;
}

#menu-links ul li a:hover {
	border-bottom: 0.1em solid #000;
}

/* ======================================================================
	Footer
	====================================================================== */

footer {
	padding: 2em 0 1em;
	width: 100%;
	text-align: center;
	background-color: #262a38;
	color: #fff;
}

#footer-two {
	display: none;
}

#footer-menu-list ul {
	margin: 0; padding: 0;
	list-style: none;
}

#footer-menu-list ul li {
	margin: 0.5em 0;
}

#footer-menu-list ul li a {
	font-weight: bold;
}

#footer-menu-list ul li a:link,
#footer-menu-list ul li a:visited {
	color: #fff;
	text-decoration: none;
}

#footer-menu-list ul li a:hover {
	border-bottom: 0.1em solid #fff;
}

#logo a {
	display: block;
	margin: 1em auto;
	width: 10em;
}

#logo a:hover {
	opacity: 0.75;
}

#logo a img {
	width: 100%;
}

#social a {
	display: inline-block;
	margin: 0.5em 0.5em 1em;
}

#social a:hover {
	opacity: 0.75;
}

#copy {
	margin-bottom: 1em;
}

/*	A- Landing	*/

/* ======================================================================
	Home section
	====================================================================== */

#home {
	font-size: 1.5em;
	text-align: center;
	color: #000;
}

#home h2 {
	font-family: 'Raleway', sans-serif;
}

/* ======================================================================
	Home image section
	====================================================================== */

#home-image {
	margin: 0; padding: 0;
	width: 100%; height: 10em;
}

#home-image img {
	width: 100%; height: 100%;
}

.parallax-hello {
	background: url('../img/pages/talk.png') no-repeat bottom center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* ======================================================================
	Services section
	====================================================================== */

#services {
	box-sizing: border-box;
	padding: 2.5em 0;
	width: 100%;
	text-align: center;
	background-color: #63a2a8;
	color: #fff;
}

#services-list {
	margin: 0 0 1em; padding: 0;
	list-style: none;
	font-size: 1.4em;
	text-align: left !important;
}

#services p {
	font-size: 1.15em;
	text-align: left !important;
}

/* ======================================================================
	Portfolio section
	====================================================================== */

#porfolio {
	width: 100%;
}

#portfolio-list {
	margin: 0; padding: 0;
	list-style: none;
}

#portfolio-list li {
	float: left;
	position: relative;
	width: 33.33%; height: 7.5em;
	font-size: 0.8em;
	text-align: center;
}

#portfolio-list li .portfolio-image {
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
}

#consumo {
	background: url("../img/services/consumo.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#servicios {
	background: url("../img/services/servicios.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#performance {
	background: url("../img/services/performance.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#influencers {
	background: url("../img/services/influencers.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#web {
	background: url("../img/services/web.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#ecommerce {
	background: url("../img/services/ecommerce.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#portfolio-list li .portfolio-name {
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
	background-color: rgba(0,0,0,0.25);
	cursor: pointer;
}

#portfolio-list li .portfolio-name:hover {
	background-color: rgba(0,0,0,0.5);
}

#portfolio-list li .portfolio-name h2 {
	position: absolute;
	margin: 0;
	top: 50%; left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	color: #FFF;
	font-size: 1em;
}

/* ======================================================================
	Clients section
	====================================================================== */

#clients {
	padding: 3em 0;
	width: 100%;
	text-align: center;
}

#clients-list {
	margin: 0; padding: 0;
	list-style: none;
}

#clients-list li {
	float: left;
	width: 50%;
}

#clients-list li a img {
	width: 100%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#clients-list li a img:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	cursor: text;
}

/* ======================================================================
	Address section
	====================================================================== */

#address {
	padding: 1em 0 2.5em;
	text-align: center;
}

#address p {
	font-size: 0.9em;
}

#address p a:link, 
#address p a:visited {
	color: blue;
}

/* ======================================================================
	Map section
	====================================================================== */

#map {
	width: 100%; height: 20em;
	background-color: grey;
}

/* ======================================================================
	Go to top section
	====================================================================== */

#go-to-top {
	padding: 3em;
	text-align: center;
}

#go-to-top a:link,
#go-to-top a:visited {
	color: #424242;
	text-decoration: none;
}

#go-to-top a:hover {
	border-bottom: 0.1em solid #424242;
}

/*	B- Agencia	*/

/*	C- Servicios	*/

/* ======================================================================
	Services list section
	====================================================================== */

#services-list-full ul {
	margin: 0; padding: 3em 0 0;
	list-style: none;
	text-align: center;
}

#services-list-full ul li {
	box-sizing: border-box;
	float: left;
	padding: 1em 1em 0;
	width: 50%;
}

.service-icon {
	margin: 0 auto;
	width: 3.5em; height: 3.5em;
}

.service-icon img {
	width: 100%; height: 100%;
}

#services-list-full ul li h2 {
	margin: 0; padding: 1em 0;
	font-size: 1em;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
}

#services-list-full ul li p {
	margin: 0; padding: 0;
	height: 22.5em;
	font-size: 0.9em;
}

/*	D- Hello	*/

#hello {
	box-sizing: border-box;
	padding: 3em 0;
	width: 100%;
	text-align: center;
	background-color: #63a2a8;
	color: #fff;
}

#hello p {
	margin: 0 auto 1em;
	font-size: 1.15em;
	text-align: center;
	width: 100%; max-width: 30em;
}

#services p {
	font-size: 1.15em;
	text-align: left !important;
}

#hello form {
	margin: 0 auto;
	width: 100%; max-width: 25em;
}

#hello form input,
#hello form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-bottom: 1em; padding: 1em 0.5em;
}

#hello form button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 1em;
	border: none;
	cursor: pointer;
	background-color: #262A38;
	color: #fff;
}

#hello form button:hover {
	opacity: 0.75;
}

/*Fixed Form*/
/*	D- Hello	*/

#fixed-form {
	box-sizing: border-box;
	padding: 1em 0;
	width: 100%;
	text-align: center;
	background-color: #63a2a8;
	color: #fff;
}

#fixed-form p {
	margin: 0 auto 1em;
	font-size: 1.15em;
	text-align: center;
	width: 100%; max-width: 30em;
}

#fixed-form form {
	margin: 0 auto;
	width: 100%; max-width: 25em;
}

#fixed-form form input,
#fixed-form form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-bottom: 1em; padding: 1em 0.5em;
}

#fixed-form form button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 1em;
	border: none;
	cursor: pointer;
	background-color: #262A38;
	color: #fff;
}

#fixed-form form button:hover {
	opacity: 0.75;
}

input:invalid {
	border: 1px solid red;
  }
  
  input:valid {
	border: 1px solid green;
  }