@charset "UTF-8";
	@font-face {font-family: "Gadugi";
	  src: url("../fonts/3f3f1a887702b525cda01f7cd776b241.eot"); /* IE9*/
	  src: url("../fonts/3f3f1a887702b525cda01f7cd776b241.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	        url("../fonts/3f3f1a887702b525cda01f7cd776b241.woff2") format("woff2"), /* chrome、firefox */
	        url("../fonts/3f3f1a887702b525cda01f7cd776b241.woff") format("woff"), /* chrome、firefox */
	        url("../fonts/3f3f1a887702b525cda01f7cd776b241.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	        url("../fonts/3f3f1a887702b525cda01f7cd776b241.svg#Gadugi") format("svg"); /* iOS 4.1- */
	}

	@font-face {font-family: "Gadugi Bold";
	  src: url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.eot"); /* IE9*/
	  src: url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	  url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.woff2") format("woff2"), /* chrome、firefox */
	  url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.woff") format("woff"), /* chrome、firefox */
	  url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	  url("../fonts/687d35f2c8dd716e607b0a87a6086a9d.svg#Gadugi Bold") format("svg"); /* iOS 4.1- */
	}

	@font-face {
	  font-family: "fl-flat-icons-set-2";
	  src: url("../fonts/fl-flat-icons-set-2.eot");
	  src: url("../fonts/fl-flat-icons-set-2.eot#iefix") format("embedded-opentype"), url("../fonts/fl-flat-icons-set-2.woff") format("woff"), url("../fonts/fl-flat-icons-set-2.ttf") format("truetype"), url("../fonts/fl-flat-icons-set-2.svg") format("svg");
	  font-weight: normal;
	  font-style: normal;
	  font-display: swap;
	}

	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Gadugi";
	}
	.image-principal{
		width: 100%;
		height: 80vh;

		background: url(../image/1-1.png);
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-position: right bottom;
	}
	.contenedor-texto{
	width: 60%;
	height: 80vh;
	display: table-cell;
	vertical-align: middle;
	}
	.text-principal{
	font-family: "Gadugi Bold";
	font-weight: 700;
	font-size:  calc(1em + 1vw);
	text-align: right;
	width: 80%;
	}

	mark{ 
	color: white;
	background-color: black;
	}
	/** Segunda seccion - contenedor con separador */
	.s-contenedor-principal{  /** div principal */
		width: 100%;
		text-align: center;
		height: 200px;
	}
	.s-contenedor{ /** div hijo */
		background-color: white;
	  margin: 0 auto;
	  padding-top: 20px;
	  height: 250px;
	  padding-left: 25px;
	  padding-right: 25px;
	  margin-top: -50px;
	}

	.hr-text { /** texto separados */
	  display: flex;
	  flex-direction: row;
	  font-size: 33px;
	  font-family: "Gadugi bold";
	  font-weight: bold;
	}
.hr-text:before, 
.hr-text:after{ /** lineas de separador */
  content: "";
  flex: 1 1;
  border-bottom: 3px solid #FFCA08;
  margin: auto;
}
.hr-text:before {
  margin-right: 10px
}
.hr-text:after {
  margin-left: 10px
}
p{ /** parrafos justificados */
	text-align : justify;
}
/** Seccion carousel */
.centrado{ /** titulos centrados de servicios */
	font-size: 25px;
	font-family: "Gadugi Bold";
	line-height: 1.2;
}
.col-text{  /** columnas de titulos de servicios */
	background-color: #F5F5F5;
	display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.col-carousel{ /** columna servicio identidad corporativa */
 background-color: #E05C77;
}
.col-carousel-social{ /** columna social media */
 background-color: #266ABD;
}
.col-carousel-desarrollo{ /** columna social desarrollo */
 background-color: #21C4B1;
}
.col-carousel-publicidad{ /** columna social publicidad */
 background-color: #FFCA08;
}
.col-carousel-diseno{ /** columna social diseño */
 background-color: #ED5249;
}
.col-carousel-registro{ /** columna social registro */
 background-color: #A34BB5;
}

.horizontalLine{ /** linea horizontal bajo titulo */
	border-bottom:solid 3px #E05C77;
  width:auto;
   height:70px;
}
.horizontalLineSocial{
	border-bottom:solid 3px #266ABD;
  width:35%;
   height:70px;
}

.color-social {
	border-bottom: solid 3px #266ABD!important;
}

.color-desarrollo {
	border-bottom: solid 3px #21C4B1!important;
}

.color-publicidad {
	border-bottom: solid 3px #FFCA08!important;
}

.color-diseno {
	border-bottom: solid 3px #ED5249!important;
}

.color-registro {
	border-bottom: solid 3px #A34BB5!important;
}


.horizontalLineDesarrollo{
	border-bottom:solid 3px #21C4B1;
  width:35%;
   height:70px;
}
.horizontalLinePublicidad{
	border-bottom:solid 3px #FFCA08;
  width:35%;
   height:70px;
}
.horizontalLineDiseno{
	border-bottom:solid 3px #ED5249;
  width:35%;
   height:70px;
}
.horizontalLineRegistro{
	border-bottom:solid 3px #A34BB5;
  width:35%;
   height:70px;
}

.btn-acordeon-identidad{ /** boton acordeon de identidad */
	width: 40px;
	height: 40px;
	background-color: #E05C77;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
	cursor: pointer;
}
.btn-acordeon-social{
	width: 40px;
	height: 40px;
	background-color: #266ABD;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
	cursor: pointer;
}
.btn-acordeon-desarrollo{
	width: 40px;
	height: 40px;
	background-color: #21C4B1;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
}
.btn-acordeon-publicidad{
	width: 40px;
	height: 40px;
	background-color: #FFCA08;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
}
.btn-acordeon-diseno{
	width: 40px;
	height: 40px;
	background-color: #ED5249;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
}
.btn-acordeon-registro{
	width: 40px;
	height: 40px;
	background-color: #A34BB5;
	color: white;
	border: 0px;
	border-radius: 5px;
	position: absolute;
	bottom: 10%;
	right: 10%;
}

.panel{ /** div que se muestra y oculta */
	padding-top: 30px;
	text-align: right;
	overflow: hidden;
  	transition: max-height 0.2s ease-out;
}
.btn-cotizar-identidad{ /** boton cotizar de identidad */
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #E05C77;
}
.btn-cotizar-social{ /** boton cotizar de social*/
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #266ABD;
}
.btn-cotizar-desarrollo{ /** boton cotizar de desarrollo */
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #21C4B1;
}
.btn-cotizar-publicidad{ /** boton cotizar de desarrollo */
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #FFCA08;
}
.btn-cotizar-diseno{ /** boton cotizar de diseno */
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #ED5249;
}
.btn-cotizar-registro{ /** boton cotizar de registro */
	border-radius: 5px;
	color: white;
	font-weight: 600;
	border: 0px;
	width: 100px;
	height: 30px;
	background-color: #A34BB5;
}

.hr-planes { /** texto separados */

  display: flex;
  flex-direction: row;
  font-size: 25px;
}
.hr-planes:before, 
.hr-planes:after{ /** lineas de separador */
  content: "";
  flex: 1 1;
  border-bottom: 3px solid #FFCA08;
  margin: auto;
}
.hr-planes:before {
  margin-right: 40px;
  margin-left: 40px;
}
.hr-planes:after {
  margin-left: 40px;
  margin-right: 40px;
}
.div-paquetes{
	margin-top: 90px;
}

	#tabla-precios {
	display:inline-block;
	width:100%;
	margin-top:100px
	}
	
	/*Columnas*/
	
	.precio-col {
	display:inline-block;
	background-color:#f3f3f3;
	width:100%;
	max-width:500px;
	border-radius:10px;
	margin-bottom:50px;
	box-shadow: 0px 2px 5px #ddd;
	
	}
	.precio-col:nth-child(2){
	background-color:#fbd444;
	}

	/*Headers*/
	.precio-col-header {
		background-color:#e6e6e6;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.precio-col:nth-child(2) .precio-col-header {
 background-color:#FFCA08;
 margin-top: -50px;
}

.precio-col-header h3 {
 color:#333;
 text-align:center;
 font-size:20px;
 font-weight:600;
 margin-bottom:0
}

.precio-col-features h2{
	font-size: 28px;
	font-family: "Gadugi";
}

.precio-col-header p {
 text-align:center;
 color:#333;
 font-size:14px;
 margin-bottom:0;
 font-family: "Gadugi";
}

/*Características*/

.precio-col-features{
	padding: 0 20px 20px 20px;
	height: 350px;
	background: #f3f3f3;
}
.precio-col-features p{
	padding:10px 0;
	margin: 0;
	text-align: center;
	font-family: "Gadugi";
}
.precio-col-features h2{
	padding:15px 0;
	margin: 0;
	text-align: center;
}

.p-mx {
	margin-top: 0px!important;
	margin-bottom: 0px!important;
	padding-top: 0px!important;
	padding-bottom: 0px!important;
}

.mes-1 {
	margin-top: -10px!important;
}

.row-price {
	justify-content: center;
}

.mx-1 {
	display: flex;
	align-items: center;
}

.font-weight-700 {
	font-weight: 700;
}

.f-gris-bajo {
	color: #6E6E6E;
}

.ul-servicios-es {
	margin-left: 30px;
}

h2{
	padding:15px 0;
	margin: 0;
	text-align: center;
}

.precio-col-features p:first-child,
.precio-col-features p:last-child {
 border-top:none
}

.precio-col-features-centro{
	padding: 0 20px 20px 20px;
	height: 350px;
}
.precio-col-features-centro p{
	padding:10px 0;
	margin: 0;
	text-align: center;
}
.precio-col-features-centro p:first-child,
.precio-col-features-centro p:last-child {
 border-top:none
}

/*Comprar*/
.precio-col-comprar {
 padding:10px;
 max-width:100%;
 text-align:center; 
 margin: 0 auto 20px;
 border-radius:0px 0px 10px 10px;
 transition: all 0.3s;
 background-color: #f3f3f3;
}

.precio-col-comprar p{
 max-width:100%;
 text-align:center;
 font-family: "Gadugi";
 font-weight: 600;
 color: #6E6E6E;

}
/*Estilos de imagenes Carousel*/
.col-img{
	 display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.contenedor-img01 {
	display: inline-block;
	position: relative;
	
}
.image01 {
opacity: 1;
display: block;
width: 265px;
transition: .5s ease;
backface-visibility: hidden;
border-radius: 10px;
}
.hoverText {
position: absolute;
top:0;
height: 100%;
transition: .5s ease;
opacity: 0;
width: 18vw;
text-align: center;
}
.contenedor-img01:hover .hoverText {
opacity: 1;
}
.caption {
	background-color: rgba(0,0,0,0.7);
	color: white;
	font-size: 30px;
	border-radius: 10px;
	height: 100%;
	width: 265px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.caption p{
	text-align: center;
	font-size: 20px;
	font-family: "Gadugi Bold";
	margin-top: 15px;
}
.imgz1{
	width: 45px;
}

.row-0 {
	margin-right: 0px;
	margin-left: 0px;
}

.carouse-servicios-sp {
		display: none;
	}

.precio-col-header h3{
	font-family: "Gadugi bold";
	font-size: 28px;
}

.back-yellow-ff {
	background-color: #FFCA08;
}

.back-yellow-fb {
	background-color: #fbd444;
}

/** Reglas responsive **/
	@media screen and (min-width: 320px) and (max-width: 480px) {
		.contenedor-texto{ /**primer bloque*/
		height: 80vh;
		display: table-cell;
		vertical-align: middle;
		}
		.text-principal{
		font-size: 20px;
		padding-left: 15px;
		text-align: right;
		width: 70%;
		}	
		.image-principal{
		width: 100%;
		background-size: cover;
		height: 80vh;
		}
		.div-paquetes{
		margin-top: 50px;
		}
		#tabla-precios {
		display:inline-block;
		width:100%;
		margin-top:50px
		}
		.s-contenedor{ /**segundo bloque*/
			width: 100%;
			height: auto;
		}
		.hr-text{
				font-size: 5vw;
				margin-bottom: 20px;
		}
		.hr-planes{
				font-size: 5vw;
		}
		.hr-planes:before, 
		.hr-planes:after{ /** lineas de separador */
		  content: "";
		  flex: 1 1;
		  border-bottom: 3px solid #FFCA08;
		  margin: auto;
		}
		.hr-planes:before {
		  margin-right: 20px;
		  margin-left: 20px;
		}
		.hr-planes:after {
		  margin-left: 20px;
		  margin-right: 20px;
		}
		.contenedor-img01{
			margin-left: 0px;
		}
		.imgz1{
		width: 5vw;
		}
		.precio-col:nth-child(2) .precio-col-header {
			margin-top: 0px;
		}
		
	}	

	@media (max-width: 767px) {
		.image-principal{
			background: url(../image/1-4.png) no-repeat right center;
			background-size: cover;
		}
		.contenedor-texto{
			height: 80vh;
			display: flex;
			justify-content: flex-end;
			width: 100%;
		}

		.contenedor-texto .text-principal {
			height: 200px;
			margin-top: 20vh;
			width: 100%;
		}

	}

	@media (min-width: 768px) {
		.margin-top-50-ca {
			margin-top: 50px;
		}
	}

	@media (max-width: 475px){
		.br-principal{
			display: none;
		}
	}

	@media screen and (min-width: 481px) and (max-width: 767px){
		
		.text-principal{	
		text-align: right;
		padding-left: 15px;
		font-size: 23px;
		width: 75%;

		}
		.image-principal{
		width: 100%;
		background-size: cover;
		height: 80vh;
		}
		.s-contenedor{ /**segundo bloque*/
			width: 100%;
			height: auto;
		}

		.hr-text{
				font-size: 4vw;
				margin-bottom: 20px;

		}
		.contenedor-img01{
			margin-left: 0px;
		}
		.imgz1{
		width: 5vw;
		}
		.precio-col:nth-child(2) .precio-col-header {
			margin-top: 0px;
		}
	}

	@media (max-width: 575px) and (min-width: 422px) {
		.text-principal {
			font-size: 20px;
		}
	}

	@media (max-width: 421px) and (min-width: 383px) {
		.text-principal {
			font-size: 18px;
			padding-left: 0px;
		}
	}

	@media (max-width: 382px) {
		.text-principal {
			font-size: 16px;
			padding-left: 0px;
		}
	}

	@media (min-width: 768px) and (max-width:  991px) {
		.text-principal{
			font-size: 21px;
		}
	}

	@media (min-width: 992px) and (max-width:  1199px) {
		.text-principal{
			font-size: 27px!important;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1024px){
		.image-principal,
		.contenedor-texto{		
		height: 80vh;
		}
		.text-principal{
		width: 70%;
		}

		.image-principal {
			background-image: url(../image/1-3.png);
		}

		.contenedor-img01{
			margin-left: 0px;
		}
		.imgz1{
		width: 5vw;
		}
		.horizontalLineDiseno{
		border-bottom:solid 3px #ED5249;
		width        :auto;
		height       :80px;
		}
		.horizontalLineRegistro{
		border-bottom:solid 3px #A34BB5;
		width        :35%;
		height       :80px;
		}

	}
	@media screen and (min-width: 1025px) and (max-width: 1200px){
		.image-principal,
		.contenedor-texto{		
		height: 80vh;
		}
		.text-principal{
		font-size: 2.5vw;
		width: 70%;
		}
	}
	@media screen and (min-width:768px) {
		.precio-col {
		width:32%;

		float:left;
		margin-right:2%
		}
		.precio-col:last-child {
		margin-right:0
		}

	}

	.d-flex{
		display: flex;
	}

	.div-colores {
		position: absolute;
		width: 100%;
	}

	.texto-centrado-vertical {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.h-350 {
		height: 350px;
	}

	.h-400, 
	.h-400-1 {
		height: 400px;
	}

	@media (min-width: 992px) and (max-width: 1200px) {
		.image01,
		.caption {
			width: 215px;
		}

		.h-400,
		.col-carousel,
		.col-text,
		.col-img,
		.h-400-1 {
			height: 300px;
		}

	}

	@media (min-width: 768px) and (max-width: 991px) {
		.image01,
		.caption {
			width: 150px;
		}

		.h-400,
		.col-carousel,
		.col-text,
		.col-img,
		.h-400-1 {
			height: 250px;
		}

		.hr-text {
			font-size: 28px;
		}

		.precio-col-header h3 {
			font-size: 26px;
		}

	}

	@media (min-width: 576px) and (max-width: 767px) {
		.image01,
		.caption {
			width: 150px;
		}

		.h-400,
		.col-text {
			height: 150px;
		}

		.h-400-1 {
			height: 250px;
		}

		.col-carousel,
		.col-img {
			height: 250px;
		}

		.hr-text {
			font-size: 23px;
		}

		.br-titulo-servicios {
			display: none;
		}

		.horizontalLine {
			width: auto;
			height: auto;
		}

		.btn-acordeon-identidad {
			margin-bottom: 38px;
		}

		.precio-col-header h3 {
			font-size: 24px;
		}

		.col-carousel-identidad {
			height: 250px;
		}

		.col-carousel-social {
			height: 250px;
		}

		.col-carousel-desarrollo {
			height: 250px;
		}

		.col-carousel-publicidad {
			height: 250px;
		}

		.col-carousel-diseno {
			height: 250px;
		}

		.col-carousel-registro {
			height: 250px;
		}

		.btn-acordeon-identidad,
		.btn-acordeon-social,
		.btn-acordeon-desarrollo,
		.btn-acordeon-publicidad,
		.btn-acordeon-diseno,
		.btn-acordeon-registro {
			margin-bottom: 38px;
		}
	}

	@media (max-width: 575px) {
		.image01,
		.caption {
			width: 150px;
		}

		.owl-carousel .owl-item img {
			display: inline;
		}

		.h-400,
		.col-text {
			height: 150px;
		}

		.h-400-1 {
			height: 250px;
		}

		.col-carousel,
		.col-img {
			height: 250px;
		}

		.hr-text {
			font-size: 23px;
		}

		.br-titulo-servicios {
			display: none;
		}

		.horizontalLine {
			width: auto;
			height: auto;
		}

		.img-servicios {
			display: none;
		}
		.color-rosa{ /** columna servicio identidad corporativa */
			height: 100%;
			padding-top: 40px;
			padding-bottom: 30px;
		}

		.centrado {
			font-size: 22px;
		}

		.precio-col-header h3 {
			font-size: 22px;
		}

		.cont-1{
			background-color: #E05C77;
		}

		.cont-2 {
			background-color: #266ABD;
		}

		.cont-desarrollo {
			background-color: #21C4B1;
		}

		.cont-publicidad {
			background-color: #FFCA08;
		}

		.cont-diseno {
			background-color: #ED5249;
		}

		.cont-registro {
			background-color: #A34BB5;
		}

		.hoverText {
			opacity: 0.8;
			width: 100%;
		}

		.caption{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.caption img {
			width: 15vw!important;
		}

		.caption p {
			font-size: 18px;
		}

		.btn-acordeon-identidad,
		.btn-acordeon-social,
		.btn-acordeon-desarrollo,
		.btn-acordeon-publicidad,
		.btn-acordeon-diseno,
		.btn-acordeon-registro {
			margin-bottom: 38px;
		}

		.carouse-servicios-sp {
			display: block;
		}

		.carouse-servicios-sp {
			display: block!important;
		}

		.f-s-18 {
			font-size: 16px!important;
		}

	}

	@media (min-width: 1819px){
		.btn-acordeon-identidad,
		.btn-acordeon-social,
		.btn-acordeon-desarrollo,
		.btn-acordeon-publicidad,
		.btn-acordeon-diseno,
		.btn-acordeon-registro {
			margin-right: 2vw;
		}
	}

	@media (max-width: 400px) {
		.ul-servicios-es {
			margin-left: 10px;
		}
	}

	@media (max-width: 379px) {
		.precio-col-features {
			height: 450px;
		}
	}