@charset "utf-8";
/* CSS Document */

html, body {
height:100%;
scroll-behavior: smooth;
}

body {
margin:0; 
text-align:center;
font-family: 'Roboto', sans-serif;
}
	
.center {
width:1100px;
margin:0px auto;
text-align:left;
}

.clear {
clear:both;
}

a img, img a, a {
border:none;
text-decoration:none;
}

ul, li, h1, h2, h3, h4, h5, h6, p, img {
	margin:0;
	padding:0;
	list-style:none;
}
.col-50 {
	width:50%;
	float:left;
}
.col-33 {
	width:33%;
	float:left;
}
h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 45px;
	margin: 20px 0 20px 0;
}
@keyframes appear {
	from {opacity: 0.0;margin-top:-10px}
	to {opacity: 1.0;margin-top:0}
}

/****** SLIDER FADE *******/
.slider-fade {
	width: 100%;
	margin: 20px 0 -4px 0;
	text-align: center;
	overflow: hidden;
}
.mySlides1, .mySlides2 {
	position: relative;
}
.animate-fading {animation: fading 1s 1;}
@keyframes fading {
	/*0%{opacity:0;}
	10%{opacity:1;}
	95%{opacity:1}
	100%{opacity:0}*/
	from{right:-300px;opacity: 0}
	to{right:0;opacity: 1}
}

/****** SLIDER HAND *******/
.slider-hand {
	width: 100%;
	height: auto;
	padding: 0 0 10px 0;
	display: flex;
	overflow-x: auto;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	/*scroll-snap-type: x mandatory;*/
}
.slider-hand-slide {
	/*width: 319px;*/
	margin: 0 10px;
	height: 100%;
	flex-shrink: 0;
}
.slider-hand > div {
  /* CURRENT way. */
  scroll-snap-align: start;
}
.slider-hand::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slider-hand::-webkit-scrollbar-thumb {
  /*background: #E900BD;*/
	background-image: linear-gradient(to bottom, #E900BD, #EF116C, #EF116C);

  border-radius: 10px;
}
.slider-hand::-webkit-scrollbar-track {
  background: transparent;
}


/****** SECTION HEADER *******/
.section-header {
	padding: 20px 0 0 0;
}

/****** HASHTAGS *******/
ul.hashtags  {
	margin:20px 0 20px 0;
	font-size: 15px;
}
ul.hashtags li {
	border-radius: 5px;
	background: #ccc;
	color: #fff;
	padding: 8px;
	margin: 5px 10px 0 0;
	display: inline-table;
	text-align: center;
}
.hashtags ul li a:hover {
}


/****** BOTONES CONTACTO *******/
.contact-btn {
	position: fixed;
	right: 10px;
	bottom: 40%;;
	z-index: 1000;
}
.contact-btn a:link, .contact-btn a:visited{
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	padding: 4px 5px 3px 5px;
	margin: 0 5px 10px 0;
	display: block;
	border-radius: 30px;
		/*ANIMACION*/
	animation-name: appear;
	background-image: linear-gradient(to bottom, #E900BD, #EF116C, #EF116C);
	right: 0;
	animation-duration: 1s;
}
.contact-btn a:hover {
	background-image: linear-gradient(to bottom, #E900BD, #1D1752);
	/*right: 50px;
	transition-duration: 5s;*/
}

/****** READ MORE BUTTON ******
.read-more-state {
  display: none;
	height: 0;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-wrap {
	height: auto;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
  content: 'VER MÁS';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'VER MENOS';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 5px 20px;
	font-family: "oswald", sans-serif;
  color: #fff;
	background-image: linear-gradient(to bottom, #E900BD, #EF116C, #EF116C);
  font-size:20px;
  border-radius: 5px;
}
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}*/

/****** MENU FLOTANTE *******/
#menu {
	background-image: linear-gradient(rgba(29, 23, 82,0.5), rgba(29, 23, 82,0.0));
	height: 150px;
	width: 100%;
	position: fixed;
	z-index: 1000;
}
.menu-float {
	background: url("../img/menu-bg.png") no-repeat;
	background-position: center 42px;
	width:100%;
	margin: 0px auto;
	padding: 10px 0 0 0;
	text-align: center;
		/*ANIMACION*/
	animation-name: appear;
	animation-duration: 1s;
}
.menu-float ul li{display: inline;}
.menu-float img {vertical-align: middle;}
a.menu-boton:link, a.menu-boton:visited {
	width: 46px;
	border-radius: 30px;
	padding: 13px 4px 14px 4px;
	transition: 0.9;
}
.dropdown:hover a.menu-boton, a.menu-boton:hover {
	background-image: linear-gradient(rgba(53,164,208,0.9), rgba(53,164,208,0.5));
}
.dropdown-content a:link, .dropdown-content a:visited {
	font-size: 20px;
	padding: 2px 0;
}
.dropdown-content a:hover {
	background: rgba(29,23,82,0.5);
}
a.menu-logo:link, a.menu-logo:link {}
a.menu-logo img {z-index: 20}
a.menu-logo:hover img{}
a.menu-logo img{filter: drop-shadow(0px 0px 5px #222);}

/****** MENU DESPLEGABLE *******/
.menu-float-in {width: 300px; margin: 0px auto; }
.dropdown {}
.dropdown-content {
    display: none;
	width:250px;
	position: fixed;
	/*z-index:-1;*/
	margin: -33px 0 0 25px;
	padding: 45px 0 15px 0;
	background-image: linear-gradient(rgba(0,0,0,0.0), #09667C 35px, #35A4D0, #35A4D0);
	border-bottom: 4px solid #1f4585;
	animation: 0.2s baja 1;
}
@keyframes baja {
	0% {height:0;}
	100% {height: auto;}
}
.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content a:link,
.dropdown-content a:visited {
	display: block;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #fff;
}

/****** INICIO *******/
#inicio {
	min-height: 100%;
	background-image: linear-gradient(#5F6CB3,#738EAB, #709DB8, #E49EA9, #FA9243);
}
.inicio-in {
	background: url("../img/inicio-stars.png") top repeat-x;
	min-height: 100%;
}
.inicio-ciudad {
	background: url("../img/inicio-ciudad.png") bottom no-repeat;
	float:left;
	width: 100%;
	height: 226px;
	bottom:0;
	position: absolute;
	border: 1px soilid #0f0;
}
.inicio-texto {
	padding: 150px 0 0 0;
	color: #fff;
}
.inicio-texto p {
	padding: 0 25% 0 25%;
	text-align: center;
}
.inicio-servicios {
	padding-top: 5%;
	text-align: center;
}
.inicio-servicios img {
	padding: 5px 0 5px 0;
	border-bottom: 5px solid transparent;
}
.inicio-servicios a:link, .inicio-servicios a:visited {
	transition: 0.3s;
}
.inicio-servicios a#inicio-btn-diseno:hover {
	border-bottom: 5px solid #1ce5ec;
}
.inicio-servicios a#inicio-btn-diseno:hover img {
  filter: opacity(.5) drop-shadow(0 0 0 #35a4d0) saturate(10);
}
.inicio-servicios a#inicio-btn-digital:hover {
	border-bottom: 5px solid #dcb3ec;
}
.inicio-servicios a#inicio-btn-digital:hover img {
  filter: opacity(.5) drop-shadow(0 0 0 #ffc8ff) saturate(10);
}

/****** AÑOS *******/
#anos {
	padding: 50px 0 0 0;
	background: #000;
}
.anos-mobile {display: none;}

/****** SERVICIOS *******/
#servicios {
	background: #000;
	padding: 50px 0 50px 0;
	color: #fff;
}
.servicios-in {
	text-align: left;
}
.servicios-in p {
	text-align: center;
	padding: 140px 15% 30px 15%;
}
.servicios-in img {
	float: left;
	margin: 0 0 0 -16px;
	position: absolute;
}
.servicios-in ul {
	text-align: center;
	margin: 0 0 50px 0;
}
.servicios-in ul li {}
.servicios-in a:link, .servicios-in a:visited {
	display: block;
	padding: 8px;
	margin: 7px 10% 7px 10%;
	border-radius: 5px;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 22px;
}
.servicios-in ul li a:hover {
	background: #fff;
}
/*diseño*/
.servicios-diseno {
	width:45%;
	float: left;
	padding: 9px 0 50px 0;
}
.servicios-diseno-in {
	background-image: linear-gradient(-45deg, #35A4D0, #09667C, #09667C);
	border-top: 5px solid #35A4D0;
	border-bottom: 5px solid #35A4D0;
	margin: 118px 0 0 0;
}
.servicios-diseno a:link {background: #35A4D0;}
.servicios-diseno a:hover {color: #1381A3;}

/*digital*/
.servicios-digital {
	width:45%;
	float: right;
	padding: 0 0 50px 0;
}
.servicios-digital-in {
	background: #C40062;
	background-image: linear-gradient(-45deg, #FF5FC6, #C40062, #C40062);
	border-top: 5px solid #FF5FC6;
	border-bottom: 5px solid #FF5FC6;
	margin: 127px 0 0 0;
}
.servicios-digital a:link {background: #FF5FC6;}
.servicios-digital a:hover {color: #EF116C;}



/****** DISEÑO *******/
#diseno {
	background: url("../img/servicios-bg.png") top repeat-x;
	padding: 186px 0 50px 0;
}
.diseno-in {
	background-image: linear-gradient(#14738D, #3DA3CB, #fff);
	padding: 30px 0;
}
.diseno-in h2 {color: #023168;}
.diseno-in p {font-weight: bold;color: #023168;}
.diseno-in .hashtags li {background: #023168;}

ul.diseno-logos {}
ul.diseno-logos li {display: inline;}
ul.diseno-logos li img{width:215px;	height: auto;}

.diseno-afiches {
	margin: 50px 0 0 0;
	border-top: 1px solid #999;
	width: 100%;
}
.diseno-afiches .slider-hand {
	margin-top: -10px;
}

/****** SITIO WEB *******/
#sitioweb {
	background: url("../img/sitioweb-bg.png") top repeat-x #000;
	padding: 186px 0 50px 0;
}
.sitioweb-in {
}
.sitioweb-in h2 {color: #EF116C;}
.sitioweb-in p {font-weight: bold;color: #EF116C;}
.sitioweb-in .hashtags li {background: #B70053;}


/****** MKT DIGITAL *******/
#mktdigital {
	background-image: linear-gradient(45deg, #FFFD08, #FF01FF, #7001FF);
	padding: 0 0 0 0;
}
.mktdigital-in {
	background: url("../img/mktdigital-bg.png") top repeat-x;
	padding: 186px 0 0 0;
}
.mktdigital-in .section-header img {
	filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}
.mktdigital-in h2 {color: #fff;}
.mktdigital-in p {font-weight: bold;	color: #fff;}
.mktdigital-in .hashtags li {background: #8000AA;}
.mktdigital-nubes {
	background: url("../img/mktdigital-nubes.png") bottom repeat-x;
	background-size: auto 100%;
	height: 90px;
	margin: -90px 0 0 0;
	z-index: 100;
		/*ANIMACION*/
	animation-name: nubes;
	animation-duration: 200s;
    animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
.mktdigital-nubes2 {
	height: 180px;
	background: #fff;
	background-image: linear-gradient(to bottom, #98fbff, #fff);
}



/****** CONTACTO *******/
.contacto-top {
	background: url("../img/conacto-nubes-top.png") bottom repeat-x;
	background-size: auto 100%;
	height: 150px;
	margin: -150px 0 0 0;
	z-index: 100;
		/*ANIMACION*/
	animation-name: nubes;
	animation-duration: 80s;
    animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
#contacto {
	background-image: linear-gradient(#5186dd, #b574f2, #e465ff, #ff33ff);
	padding: 80px 0 0 0;
}
.contacto-in {
	background: url("../img/contacto-nubes.png") bottom repeat-x;
		/*ANIMACION*/
	animation-name: nubes;
	animation-duration: 120s;
    animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
@keyframes nubes {
	0% {background-position: bottom left;}
	100% {background-position: bottom right;}
}
.contacto-in h2 {
	font-size: 20px;
	line-height: 25px;
	color: #fff;
	margin: 0 0 20px 0;
	padding: 0 20%;
}
.contacto-buzon {
	width: 500px;
	margin: 0px auto;
}
.contacto-buzon-bg {
	background: url("../img/contacto-buzon-bg.png") center repeat-y;
	background-position: center 200px;
	padding: 30px 0 50px 0;
	margin: -5px 0 0 0;
}
form {
}
input, textarea {
	width: 60%;
	margin: 5px 0;
	padding: 10px;
	border:0;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	color: #231f20;
}
.contacto-capcha {
	padding: 10px 0 15px 0;
}
input.contacto-boton, .contacto-sent a:link, .contacto-sent a:visited {
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    padding: 4px 20px 5px 20px;
    margin: 0 5px 10px 0;
    /*display: block;*/
    border-radius: 5px;
    background-image: linear-gradient(to bottom, #E900BD, #EF116C, #EF116C);
    right: 0;
	color: #fff;
	width: auto;
	font-size: 20px;
}
input.contacto-boton:hover {
	background-image: linear-gradient(to bottom, #E900BD, #1D1752);
}
.contacto-sent {
	background: url("../img/contacto-sent-bg.png") no-repeat;
	background-size: 100% auto;
	height: 400px;
	width: 400px;
	margin: 0px auto;
	border-radius: 350px;
}
.contacto-sent p {
	width:300px; 
	margin: 0;
	position: relative;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	color: #4b4b4b;
}


/****** VIDEO *******/



/******** BOTONES GRANDES **********/
.botones-grandes {
	background-image: linear-gradient(to bottom, #000, #787878);
}
.botones-grandes ul {
	padding: 40px 0;
	text-align: center;
}
.botones-grandes ul li {
	display: inline-table;
	width: 169px;
	margin: 30px 10px 30px 10px;
}
.botones-grandes a:link, .botones-grandes a:visited{
	background: #e1f3f4;
	background-image: linear-gradient(to top, #14738D, #3DA3CB);
	box-shadow: 2px 2px 10px rgba(0,0,0,.5);
	border-radius: 85px;
	display: block;
}
.botones-grandes a:hover {
	/*background: #1f4585;*/
	background-image: linear-gradient(to bottom, #E900BD, #EF116C, #EF116C);
}

/******** FOOTER **********/
.footer {
	background: #1f4585;
	text-align: center;
	color: #fff;
	font-weight: 700;
	padding: 10px;
}
.footer img {
	vertical-align: middle;
}

.footer a:link, .footer a:visited {
	color:#fff;
	font-weight:700;
	margin:0 25px 0 0;
	text-align: left;
}
.footer a:hover {
	text-decoration: underline;
}

/******** responsive **********/
@media screen and (max-width: 999px) {
	.col-33, .col-50, .center
	{width: 100%}
	.center h2, .center p, .center ul, .section-header
	{margin-left:10px;margin-right: 10px}
	.botones-grandes img, .slider-fade img
	{width: 100%; height: auto;}
	.botones-grandes ul li {width:90px; margin: 10px}
	.servicios-diseno, .servicios-digital 
	{width:90%; float:left; margin: 0 25px;}
	.contact-btn {bottom: 5%;}
	.inicio-texto p {padding: 0 5%; font-size: 13px;}
	.inicio-ciudad {background-size: auto 100%;border-bottom: 50px solid #000;}
	.diseno-in ul.diseno-logos li img {width: 32%; height: auto;}
	.contact-btn {bottom: 0;}
	.contact-btn ul li {display: inline-table;}
	.diseno-in p, .digital-in p, .sitioweb-in p, .mktdigital-in p, .servicios-in p
	{font-size: 13px; font-weight: normal;}
	ul.hashtags li {font-size: 10px;}
}
@media screen and (max-width: 700px) {
.anos-desktop img, .anos-mobile img {width:100%;height: auto;}
}
@media screen and (max-width: 500px) {
	/*ul.diseno-logos li {width: 180px; height: 180px; margin: 2% 1%}*/
	.inicio-servicios a:link, .inicio-servicios a:visited {border-bottom: 5px solid #fff;}
	.inicio-servicios img {	padding: 5px 0 1px 0;width:30%;height: auto;}
	img.inicio-servicios-y {width:14%;height: auto;}
	.section-header img, .diseno-afiches img
	{width: 85%; height: auto;}
	.contacto-buzon {width: 100%;margin:0;}
	.contacto-buzon img {width: 100%; height: auto;}
	.contacto-buzon-bg {background-size: 100% auto;}
	.contacto-top {height: 100px; margin: -100px 0 0 0; animation:none;}
	.contacto-in {animation: none;}
	.mktdigital-nubes {height: 50px; margin: -50px 0 0 0; animation: none;}
	.mktdigital-nubes2 {height: 100px;}
	.contacto-sent {margin: 0;}
	h2 {font-size: 22px; margin: 15px 0 10px 0;}
	.inicio-ciudad {height: 100px;}
	.footer {padding-bottom: 50px;}
	.servicios-in p {font-weight: 18px; padding: 130px 5% 30px 5%;}
	.servicios-diseno img {width: 250px; height: auto; margin: 0 0 0 -12px;}
	.servicios-diseno-in {margin: 100px 0 0 0;}
	.servicios-digital img {width: 220px; height: auto; margin: 0 0 0 -12px;}
	.servicios-digital-in {margin: 102px 0 0 0;}
}
@media screen and (max-width: 400px) {
	.anos-desktop {display: none;}
	.anos-mobile {display: block;}
}