* {
    box-sizing: border-box; /* Esto aplica el modelo border-box a todos los elementos de la pagina */
}

p.titulo_main
{
	font-family: 'Lato', sans-serif;
    font-weight: 900;
    /* font-size: 36px; */
    font-size: 2.25em; /* 1 em = 16 pixeles por defecto, si no se cambia */
	text-align: center;
    color: #F8C300;
	padding: 10px 80px 30px 80px; 
    line-height: 30px; 
}

p.texto_main
{
	font-family: 'Lato', sans-serif;
/*    font-size: 18px; */
    font-size: 1.125em;
    font-weight: 100;
    color: lightgray;
    color: dimgray;
	padding: 0px 80px 10px 80px; 
/*	text-align: justify; */
	text-align: left;
}

/* Estilos responsive para la fuente general (para celulares) */
@media screen and (max-width : 600px){
	
	p.titulo_main
	{
/*		font-size: 20px;  */
		font-size: 1.25em; 
		padding: 10px 25px 30px 25px; 
	}

	p.texto_main
	{
/*		font-size: 16px; */
		font-size: 1em;
		padding: 0px 25px 10px 25px; 
	}
}

/* ================ módulo MySlider =============== */
div.myslider
{
	background-color: lightgray; 
	width: 100%; 
	/* margin: 90px 0px 0px 0px; */
	margin: 0px 0px 0px 0px;
	display: block; 
	/*	position: absolute */
	/*	
		position es relative para que los botones prev y next puedan tomar top = 50%, 
		y no se hace ninguna ubicacion relativa de este div para que quede en el mismo sitio
		luego los botones se posicionan absolute  y se aplica el top: 50% 
	*/
	position: relative;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: dimgray;
}

/* Animación de desvanecido para los slides, solo hay que incluir en class="slidefade" */
.slidefade {
  -webkit-animation-timing-function: ease;
  -webkit-animation-name: slidefade;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-name: slidefade;
  animation-duration: 1.5s;
}

@-webkit-keyframes slidefade {
  from {opacity: .2} 
  to {opacity: 1}
}

@keyframes slidefade {
  from {opacity: .1} 
  to {opacity: 1}
}

/* Animación de entrada deslizando para los slides de articulos, solo hay que incluir en class="slideIn" */
.slideIn {
	-webkit-animation: slideIn 3s 1;
	-webkit-transition: .3s ease-in;
	animation: slideIn 3s 1;
	transition: .3s ease-in;
}

@-webkit-keyframes slideIn {
  0% {
//    -webkit-filter: grayscale(100%) blur(4px);
    -webkit-filter: blur(4px);
    -webkit-transform: scaleX(0.2);
  }
  100% {
//    -webkit-filter: grayscale(0%) blur(0px);
    -webkit-filter: blur(0px);
    -webkit-transform: scaleX(1.0);
  }
}

@keyframes slideIn {
  0% {
//    filter: grayscale(100%) blur(4px);
    filter: blur(4px);
    transform: translateX(-1200px) scaleX(0.2);
  }
  100% {
//    -webkit-filter: grayscale(0%) blur(0px);
    filter: blur(0px);
    transform: translateX(0px) scaleX(1.0);
  }
}

/* Botones Next & Previous */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
/*  font-size: 80px; */
  font-size: 5em;
  transition: 0.3s ease;
  border-radius: 0 6px 6px 0;
}

/* Posicionar el boton "next" a la derecha */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* En hover, poner fondo negro y un poco de transparencia */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Estilos responsive para el módulo MySlider (para celulares) */
@media screen and (max-width : 600px){
	div.myslider
	{
		/* margin: 70px 0px 0px 0px; */
		margin: 0px 0px 0px 0px;
	}

	.prev, .next {
/*	  font-size: 50px;  */
	  font-size: 3.125em; 
	}

}
	
/* ================== módulo empresa ================ */
div.empresa
{
	width: 100%; 
	min-height: 570px; 
	margin: 0px 0px 0px 0px; 
	display: block; 
	position: static;
    background-color: lightgray;
	padding: 10px 0px 60px 0px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: black;

}

/* Animación de desvanecido para el logo, solo hay que incluir en class="logoempresa" */
.logoempresa {
	margin-right: 80px; 
	float: right; 
	padding: 0px 0px 0px 40px; 
	width: 100%;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-name: logofade;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-name: logofade;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

@-webkit-keyframes logofade {
	from {opacity: 0} 
	to {opacity: 1}
}

@keyframes logofade {
	from {opacity: 0} 
	to {opacity: 1}
}

/* Estilos responsive para el módulo Empresa (para celulares) */
@media screen and (max-width : 600px){
	.logoempresa {
		margin-right: auto; 
		float: none; 
		width: 80%;
		display: none;   /* ocultar el logo */
	}	
}

/* ================ modulo planes, responsive =============== */
div.planes
{
	width: 100%; 
	margin: 0px 0px 0px 0px; 
	background-color: lightgray; 
	background-color: #1b304b; /* azul grisoso */
	position: static;
	padding: 10px 80px 60px 80px;
	display: block;
	overflow: auto;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: white;
	font-family: 'Lato', sans-serif;
}

.columnasplanes {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    /*
	border: 1px solid #eee;
    border: 1px solid gray;
	*/
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: white;
	background-color: #1b304b; /* azul grisoso */
    text-transform: none;
	font-weight: 200;
}

/* resaltar con sombra la tabla en Hover */
.price:hover {
	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-o-transform: scale(1.1);
    box-shadow: 10px 10px 16px black; 
  	-moz-box-shadow:10px 10px 167px black;
  	-webkit-box-shadow: 10px 10px 16px black;
}

.price .header {
    background-color: #F8C300;
    color: black;
    background-color: #184FDE;
    color: white;
/*    font-size: 25px; */
    font-size: 1.6em;
	border-radius: 10px 10px 0px 0px;
    text-transform: uppercase;
}

.price li {
	background-color: white;
    border-bottom: 1px solid #eee;
    border-bottom: 1px solid gray;
    padding: 20px;
    text-align: center;
	float: none;
}

.price .gray {
    background-color: #184FDE;
    background-color: lightgray;
/*    font-size: 20px; */
    font-size: 1em;
	border-radius: 0px 0px 10px 10px;
}

.button {
    background-color: #F8C300;
    color: black;
    background-color: #184FDE;
    color: white;
    /* 
	-style: solid;
    border-width: 1px;
    border-color: black;
	*/
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
/*    font-size: 18px; */
    font-size: 1.125em;
	border-radius: 4px;

    /* Desactivar el gradiente del fondo
	background: -webkit-gradient(linear, left top, left bottom, from(#F8C300), to(#aa8500));
    background: -webkit-linear-gradient(top, #F8C300, #aa8500);
    background: -moz-linear-gradient(top, #F8C300, #aa8500);
    background: -ms-linear-gradient(top, #F8C300, #aa8500);
    background: -o-linear-gradient(top, #F8C300, #aa8500);
    background: linear-gradient(#F8C300, #aa8500); /* Standard syntax */
    /* background: linear-gradient(#F8C300, #bd9500); /* Standard syntax */
}

.button:hover {
	color: white;
    background: #000;
}

/* Estilos responsive para la tabla de precios (celulares) */
@media only screen and (max-width: 600px) {

	div.planes
	{
/*		padding: 10px 40px 60px 40px; */
		padding: 10px 25px 60px 25px;
	}

    .columnasplanes {
		/* Ancho de columna 100% para que salga solo una  */
		width: 100%;
		}

	.button {
		padding: 6px 20px;
/*		font-size: 14px; */
		font-size: 1em;

	}

	.price .header {
	/*    font-size: 25px; */
		font-size: 1.2em;
		border-radius: 10px 10px 0px 0px;
		text-transform: uppercase;
	}

	.price li {
		padding: 10px;
	}

}

/* =============== Articulos de producto ============== */
div.articulo
{
	font-family: 'Lato', sans-serif;
	width: 100%; 
	min-height: 570px; 
	margin: 0px 0px 0px 0px; 
	display: block; 
	position: static;
    background-color: lightgray;
	background-color: lavender; 
	padding: 30px 80px 0px 80px;
	border-style: solid;
	border-width: 0px 0px 5px 0px;
	border-color: #F8C300; /* Amarillo MasterSoft */
	}

div.unacolumna	
{
	position: static;
	display: block;
	margin-top: 0px;
    float: none;
    width: 100%;
	padding: 0px 0px 0px 0px;
	clear: both;
}

div.columnaizq
{
	position: static;
	display: block;
	margin-top: 0px;
    float: left;
    width: 50%;
	padding: 0px 0px 0px 0px;
}

div.columnader
{
	position: static;
	display: block;
	margin-top: 0px;
    float: left;
    width: 50%;
	padding: 0px 0px 0px 0px;
}
	
/* Titulo de los articulos de producto */
p.titulo_articulo 
{
    font-weight: 900;
/*    font-size: 30px; */
    font-size: 1.875em;
    font-size: 1.6em;
    color: #333;
	padding: 15px 0px 10px 0px; 
    line-height: 30px;
    margin-bottom: 10px;
}

/* Texto de los articulos de producto */
p.texto_articulo 
{
/*    font-size: 17px; */
    font-size: 1.06em;
    line-height: 25px;
	padding: 10px 0px 10px 0px; 
/* 	text-align: justify; */
	text-align: left;
}

/* Lista de caracteristicas de producto */
ul.art_lista 
{
    float: none;
	padding: 10px 20px 0px 20px; 
/*    font-size: 17px; */
    font-size: 1.06em;
    line-height: 25px;
	text-align: left;
	text-decoration: none;
	// color: #3399ff; 
	// color: #3388ff; 
	// color: #3377ff; 
	color: #3366ff; 
}

ul.art_lista a {
	text-decoration: none;
    cursor: pointer;
	color: #3366ff; 
}

/* Estilos responsive para el módulo Articulo (celulares) */
@media screen and (max-width : 600px){
	
	div.articulo
	{
		padding: 0px 40px 0px 40px;
	}

	div.columnader
	{
		position: static;
		display: block;
		margin-top: 0px;
		float: none;
		width: 100%;
		padding: 0px 0px 0px 0px;
		clear: both;
	}

	div.columnaizq
	{
		position: static;
		display: block;
		margin-top: 0px;
		float: none;
		width: 100%;
		padding: 0px 0px 0px 0px;
		clear: both;
	}

	p.titulo_articulo 
	{
/*		font-size: 26px; */
		font-size: 1.25em;
		line-height: 30px;
	}

	p.texto_articulo 
	{
/*		font-size: 16px; */
		font-size: 1em;
		line-height: 25px;
		padding: 10px 0px 10px 0px; 
/*		text-align: justify; */
		text-align: left;
	}
	
	ul.art_lista 
	{
/*		font-size: 16px; */
		font-size: 1em;
		line-height: 25px;
	}

}

/* ================= Acordeon ============== */
div.acordeon {
	margin: 0px 0px 0px 0px; 
}

/* Estilo del titulo de cada sección */
button.accordion, .accordionb {
    background-color: silver;
    cursor: pointer;
	padding: 18px 20px 18px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
	font-family: 'Lato', sans-serif;
    font-weight: bold;
/*    font-size: 24px;  */
    font-size: 1.25em; 
    color: #333;
    line-height: 30px;
    transition: 0.4s;
/*		text-align: justify; */
	text-align: left;

}

/* Resaltado del título de sección */
button.accordion.active {
    background-color: gray;
    color: white;
}

/* Contenido de cada sección */
div.panel {
	padding: 20px 20px 20px 20px;
/*		text-align: justify; */
	text-align: left;
	margin-top: 0px !important; 
	margin-bottom: 20px;
    background-color: white;
	// color: #3399ff; 
	// color: #3388ff; 
	// color: #3377ff; 
	color: #3366ff; 
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 4000px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

button.accordion:after {
    content: "+"; 
/*    font-size: 30px; */
    font-size: 1.875em; 
    color: #333;
    float: right;
}

button.accordion.active:after {
    content: "-"; 
/*    font-size: 30px; */
    font-size: 1.875em; 
}

/* Estilos responsive para la fuente general (para celulares) */
@media screen and (max-width : 600px){
	
	button.accordion, .accordionb {
		background-color: silver;
		cursor: pointer;
		padding: 12px 16px 12px 16px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-family: 'Lato', sans-serif;
		font-weight: bold;
/*		font-size: 20px;  */
		font-size: 1.125em; 
		color: #333;
		line-height: 26px;
		transition: 0.4s;
/*		text-align: justify; */
	text-align: left;

	}

	div.panel {
		padding: 16px 16px 16px 16px;
/*		text-align: justify; */
	text-align: left;
		margin-top: 0px !important; 
		margin-bottom: 16px;
		background-color: white;
		// color: #3399ff; 
		// color: #3388ff; 
		// color: #3377ff; 
		color: #3366ff; 
		max-height: 0;
		overflow: hidden;
		transition: 0.6s ease-in-out;
		opacity: 0;
	}

	button.accordion:after {
		content: "+"; 
/*		font-size: 26px; */
		font-size: 1.625em; 
		color: #333;
		float: right;
	}

	button.accordion.active:after {
		content: "-"; 
/*		font-size: 26px; */
		font-size: 1.625em; 
	}
	
}

/* =============== Pestañas con contenido =============== */
.tabs { 
	/* es el rectángulo contenedor */
	margin-right: 0px;
	margin-left: 0px;
	min-height: 200px;
	position: relative;
	width: auto; /*  1100px OJO debe ser auto o algo asi por que no se estira */
}

/* cada una de las pestañas */
.tab { 
	float: left;
}

/* la parte superior con el título de la pestaña */
.tab label { 
	border: 2px solid #000;
	border-bottom: 0px;
	border-radius: 5px 5px 0 0;
	background-color: #678;
	color: #000;
	cursor: pointer;
	left: 0;
	margin-right: 4px;
	padding: 5px 15px;
	position: relative;
}

/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
	border: 2px solid #000;
	background-color: #fff; 
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 20px;
	position: absolute;
	right: 0;
	top: 30px;
}

/* y un poco de animación */
.content > * {
	opacity: 0;
	-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-moz-transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
	background-color: #fff;
	color: #000;
	z-index: 2;
}

[type=radio]:checked ~ label ~ .content { z-index: 1; }

[type=radio]:checked ~ label ~ .content > * {
	opacity: 1;
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
}

/* ================ Galería de imágenes con lightbox =============== */
div.imgThumb {
    margin: 10px;
    border: 1px solid #ccc;
    border: 1px solid white;
    float: left;
    width: 180px;
}

/* resaltar cada miniatura con un borde */
div.imgThumb:hover {
    border: 1px solid #777;
}

div.imgThumb img {
    width: 100%;
    height: auto;
}

/* descripcion de la miniatura */
div.desc {
    padding: 15px;
	font-weight: 100;
/*	font-size: 14px; */
	font-size: 0.875em; 
    text-align: center;
}

/* bordes de la imagen miniatura */
.gallery {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

/* para atenuar cada imagen miniatura */
.gallery:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	font-weight: bold;
    text-align: center;
    color: lightgray;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #modal-caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.modalclose, .modalformclose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
/*    font-size: 40px; */
    font-size: 2.5em;
    font-weight: bold;
    transition: 0.3s;
}

.modalclose:hover,
.modalclose:focus,
.modalformclose:hover,
.modalformclose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 600px){
    .modal-content {
        width: 100%;
    }
}

/* =============== ToolTip para promoción =================== */
.promobubble{
    position: fixed;
    top: 64px;
    right: 10px;
    width: 220px;
    height: 140px;
    color: dimgray;
    background: white; /* Standard syntax */
/*	font-size: 16px; */
	font-size: 1em;
	font-weight: bold;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    border: 1px solid dimgray;
    z-index: 1;
    margin-left: -60px;
/*  El opacity: 0 es para que cuando se haga visible aplique la transición */

}

/* Estilos responsive para la div promobubble */
@media screen and (max-width : 600px){
	
	.promobubble
	{
		width: 170px;
		height: 110px;
/*		font-size: 12px; */
		font-size: 0.75em;
	}

}

/* botón para cerrar el tooltip y el promobubble */
.smallclose {
    background: white;
    color: dimgray;
    position: absolute;
    top: 2px;
    right: 4px;
 /*   font-size: 16px; */
    font-size: 1em;
    font-weight: bold;
//	border-style: solid;
//	border-width: 1px;
//	border-color: dimgray;
    transition: 0.3s;
}

.smallclose:hover,
.smallclose:focus {
    background: dimgray;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos responsive */
@media screen and (max-width : 600px){
	
	.smallclose {
		background: white;
		color: dimgray;
		position: absolute;
		top: 2px;
		right: 4px;
	 /*   font-size: 16px; */
		font-size: 1.5em;
		font-weight: bold;
	//	border-style: solid;
	//	border-width: 1px;
	//	border-color: dimgray;
		transition: 0.3s;
	}

}

/* ================= módulo vea también =============== */
div.veatambien
{
	width: 100%; 
	margin: 0px 0px 0px 0px; 
	background-color: #1b304b; /* azul grisoso */
	position: static;
	padding: 10px 80px 50px 80px;
	display: block;
	text-align: center;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: lightgray;
}

p.texto_veatambien
{
/*	font-size: 22px;  */
    font-size: 1.06em;
    line-height: 25px;
	padding: 10px 0px 10px 0px; 
	color: white; 
	text-align: center;
}

.iconoborde {
	float: left; 
	width: 14%;
	border-radius: 50%; 
	/*
    box-shadow: 10px 10px 16px black; 
  	-moz-box-shadow:10px 10px 167px black;
  	-webkit-box-shadow: 10px 10px 16px black;
	*/
}

.iconoborde:hover {
    opacity: 0.8;
}

/* Estilos responsive para el módulo Vea También (celulares) */
@media screen and (max-width : 600px){

	div.veatambien
	{
		padding: 10px 40px 50px 40px;
	}

	p.texto_veatambien
	{
/*		font-size: 18px;  */
		font-size: 1em; 
		line-height: 25px;
	}

	.iconoborde {
		width: 30%;
	}

}

/* ================= Módulo blog =============== */
div.blog {
	font-family: 'Lato', sans-serif;
	float: left; 
	width: 80%; 
	min-height: 570px; 
	margin: 0px 0px 0px 0px; 
	display: block; 
	position: relative;
	background-color: #1b304b;
	padding: 30px 80px 0px 80px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: dimgray;
}

span.blog_notapie{
/*	font-size: 12px; */
	font-size: 0.75em;
	font-style: italic;
	text-align: right;
}

.blog_articlelist {
	position: absolute;
	top: 60px;
	right: 80px;
	width: auto;
	height: auto;
	background-color: gray;
	color: white;
/*	font-size: 16px; */
	font-size: 1em;
	text-align: left;
	border-radius: 6px;
	padding: 0px 10px;
	border: 2px solid white;
	z-index: 1;
	margin-left: -60px;
}    

/* Estilos responsive para el módulo Blog (celulares) */
@media screen and (max-width : 600px){

div.blog
	{ 	
		width: 100%; 
		padding: 20px 30px 0px 40px;
	}
}

/* ================= Módulo anuncios =============== */
div.ads_col
{ 	float: left; 
	width: 20%; 
	background-color: 	white; 
	margin-bottom: 40px; 
	padding: 20px 30px 20px 20px;

}

p.ads_text {
	font-size: 13px;
	padding-top: 10px;
	text-decoration: none;
}

.ads_text a {
	text-decoration: none;
	color: firebrick;
	color: orangered;
}

img.ads_image {
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	width: 100%; 
	cursor: pointer;
}

/* Estilos responsive para el módulo anuncios (celulares) */
@media screen and (max-width : 600px){

div.ads_col	{ 	
	float: none; 
	width: 100%; 
	padding: 30px 50px 30px 50px;
	}
	
p.ads_text {
/*	font-size: 16px; */
	font-size: 1em;
	padding-top: 20px;
	text-decoration: none;
	}

}




/* ================= Estilos guia rápida y actualizaciones =============== */
div.guia {
	position: static; 
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 40px 0px;
/*	font-family: Arial,Verdana,sans-serif; */
}

p.guia_titulo {

/*	padding: 15px 0px 10px 0px; 
    line-height: 30px;
    margin-bottom: 10px;
*/
	position: static; 
	margin: 20px 0px 0px 0px; 
	padding: 10px 20px 10px 20px; 
	border: 6px solid gray; 
	border-radius: 18px; 
	background-color: #4b87d6; /* Azul cielo */
	color: white;
/*    font-size: 30px; */
    font-size: 1.875em;
}

.guia_texto{
/*    font-size: 17px; */
    font-size: 1.06em;
    line-height: 25px;
	padding: 10px 0px 10px 0px; 
/*		text-align: justify; */
	text-align: left;
}

div.paso {
	position: static; 
	margin-top: 40px; 
	padding: 20px 40px 20px 40px; 
	border: 8px solid gray; 
	border-radius: 18px;
	background-color: lightgray; 
/*	min-height: 600px; */
	overflow: auto;
}

p.guia_numeracion {
	position: absolute; 
	margin: -48px 0px 0px -20px; 
	padding: 6px 14px 6px 14px; 
	background-color: orange; 
	color: white;
	border: 7px solid gray; 
	border-radius: 50%;
	font-weight: bold; 
/*	font-size: 24px;  */
	font-size: 1.5em; 
}

.guia_imagen {
	float: right;
	padding-left: 20px;
}


/* BOOSTRAP, NECESARIOS PARA EL NAVBAR Y OTROS DETALLES */

body {
    padding: 0;
    margin: 0;
    background: #f2f6e9;
}

.navbar {
    background:#6ab446;
    background:blue;
    background-color: #003399; /* Azul Mastersoft */
	padding: 0;
	margin: 0;

	/* Personalizados */
	border-style: solid;
	border-width: 0px 0px 5px 0px;
	border-color: #F8C300; /* Amarillo MasterSoft */
}

.nav-link,
.navbar-brand {
    color: #fff;
    cursor: pointer;
	padding: 0;
	margin: 0;
}


.nav-link {
    margin-right: 1em !important;
}

/* Personalizados */
.nav-link:hover {
    color: #F8C300; 
}

.navbar-collapse {
    justify-content: flex-end;
}

/* Personalizados */
.dropdown-menu {
    color: #fff;
    background: black;
}

/* Personalizados */
.dropdown-item {
    color: white;
}

/* Personalizados */
.dropdown-item:hover {
    background: #F8C300; /* Amarillo MasterSoft */
}

.header {
/*
    background-image: url('images/header-background.jpg');
    background-size: cover;
    background-position: center;
    position: ;
*/
}

.features {
	margin: 4em auto;
	padding: 1em;
	position: relative;
}

.feature-title {
	color: #333;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.features img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
}

.features .form-control,
.features input {
	border-radius: 0;
}

.features .btn {
    background-color: #589b37;
    border: 1px solid #589b37;
    color: #fff;
    margin-top: 20px;
}

.features .btn:hover {
    background-color: #333;
    border: 1px solid #333;
}

.exito_imgfeatures {
	width: 80px;
	height:80px;
	border-radius: 50%; 
}

.background {
	background: #dedec8;
	padding: 4em 0;
}

.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}

.footer-copyright {
    color: #666;
    padding: 40px 0;
}

@media (min-width: 40em) {

  /* Personalizados */
  /* 
  .nav-item, 
  .dropdown-item {
	padding-top: 2px;
	padding-bottom: 2px;
  }
 */
	
}

/* ESTILOS PARA LAS LANDING PAGES OBRAS Y CONTROL */

.div01 {
	width: 100%; 
	margin: 0px 0px 0px 0px;
	padding: 130px 80px 10px 80px;
	position: relative;
	display: inline-block;
	border-style: solid;
	border-width: 0px 0px 0px 0px;
	background-repeat: no-repeat; 
}

img.imgland01 {
	width: 45vw; 
	width: 50%; 
	position: sticky;
	position: absolute;
	top: 60px;
	right: 20px;
	z-index: 1;
}

p.txtland01
{
	font-family: 'Alexandria', sans-serif;
	font-size: 3.2vw;
    font-size: 2.5em;
    font-weight: 1000;
    color: white;
	line-height: 100%;
	text-align: left;
	text-shadow: 4px 4px .2rem rgba(0, 0, 0, .5);
}

p.txtland02
{
	font-family: 'Lato', sans-serif;
    font-size: 1.6vw;
    font-size: 1.25em;
    color: #003399; /* Azul MasterSoft */
	line-height: 100%;
	text-align: left;
}

p.titulo_programa
{
	font-family: 'Alexandria', sans-serif;
    font-size: 2.5em;
	font-size: 3.5em;
    font-weight: 1000;
    color: white;
	line-height: 100%;
	text-align: left;
	text-shadow: 4px 4px .2rem rgba(0, 0, 0, .5);
}

img.botoncontacto {
	display: block; 
	width: 100%; 
}

img.botondemo {
	display: block; 
	width: 100%; 
}

.div02{
	width: 100%; 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	display: inline-block;
	border-style: solid;
	border-width: 0px 0px 0px 0px;
	background-color: white;
}

p.txtland03
{
	font-family: 'Alexandria', sans-serif;
	font-size: 3.4vw;
    font-size: 2.8em;
    font-weight: 1000;
    color: white;
	line-height: 100%;
	padding: 130px 80px 10px 80px; 
	text-align: right;
}

p.txtland04
{
	font-family: 'Alexandria', sans-serif;
	font-size: 2.3vw;
    font-size: 1.8em;
    font-weight: 1000;
    color: #F8C300;
	line-height: 100%;
	margin: 0px 0px 0px 0px; 
	text-align: center;
}

.landicons {
	width: 40px;
	height:40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	display: block;
}

img.planes {
	display: block; 
	width: 80%; 
	margin-left: auto; 
	margin-right: auto
}

img.icoempresa {
	width: 70%; 
	border-radius: 50%
}	

/* ESTILO ADICIONALES PARA LA LANDING PAGE DE CONTROL */

.div03 {
	width: 100%; 
	margin: 0px 0px 0px 0px;
	padding: 110px 80px 10px 80px;
	position: relative;
	display: inline-block;
	border-style: solid;
	border-width: 0px 0px 0px 0px;
	background-size: 100%; 
	background-repeat: no-repeat; 
	background-size: contain:
}

.div04{
	width: 100%; 
	margin: 0px 0px 0px 0px;
	padding: 80px 80px 10px 80px;
	position: relative;
	display: inline-block;
	border-style: solid;
	border-width: 0px 0px 0px 0px;
	background-repeat: no-repeat; 
}

.imgland02 {
	width: 60%; 
	width: 60vw; 
	position: sticky;
	position: absolute;
	top: 60px;
	left: 0px;
	z-index: 1;
}

p.txtland05
{
	font-family: 'Alexandria', sans-serif;
    font-size: 3.1vw;
    font-size: 2.5em;
    font-weight: 1000;
    color: white;
	padding-left: 52%;
	line-height: 100%;
	text-align: left;
	text-shadow: 4px 4px .2rem rgba(0, 0, 0, .5);
}

p.txtland06
{
	font-family: 'Lato', sans-serif;
    font-size: 1.6vw;
    font-size: 1.25em;
	color: white;
	padding-left: 52%;
	padding-bottom: 30px;
	line-height: 100%;
	text-align: left;
}

.landingbubble{
	position: sticky;
	position: absolute;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 220px;
    height: 140px;
    color: dimgray;
    background: white; /* Standard syntax */
/*	font-size: 16px; */
	font-size: 1em;
	font-weight: bold;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    border: 1px solid dimgray;
    z-index: 1;
    margin-left: -60px;
/*  El opacity: 0 es para que cuando se haga visible aplique la transición */

}

.wacontact {
	width: 100%
}

/* Estilos responsive (para celulares) */
@media screen and (max-width : 600px){
	
	.div01 {
		padding: 80px 40px 10px 40px;
	}

	img.imgland01 {
		width: 45vw; 
		width: 0%; 
		position: sticky;
		position: absolute;
		top: 160px;
		right: 10px;
		z-index: 1;
		display: hidden;
	}

	p.txtland01
	{
		font-size: 3.2vw;
		font-size: 1.4em;
	}

	p.txtland02
	{
		font-size: 1.6vw;
		font-size: 1.0em;
		font-weight: bold;
	}

	p.titulo_programa
	{
		font-size: 3.2vw;
		font-size: 2.4em;
	}
	img.botoncontacto {
		display: block; 
		width: 90%; 
	}

	img.botondemo{
		display: block; 
		width: 30%; 
	}

	p.txtland03
	{
		font-size: 2em;
		font-size: 5.0vw;
		padding: 80px 80px 10px 80px; 
	}

	p.txtland04
	{
		font-family: 'Alexandria', sans-serif;
		font-size: 1.8em;
		font-size: 5.0vw;
		font-weight: 1000;
		color: #F8C300;
		line-height: 100%;
		margin: 0px 0px 0px 0px; 
		text-align: center;
	}

	img.planes {
		width: 100%; 
	}

	.div03 {
		padding: 0px 40px 10px 40px;
	}

	img.imgland02 {
		width: 50vw; 
		width: 0%; 
		position: sticky;
		position: absolute;
		top: 30px;
		left: 0px;
		z-index: 1;
		display: hidden;
	}
	
	p.txtland05
	{
		font-size: 3.1vw;
		font-size: 1.2em;
		padding-left: 0px;
		padding-left: 25%;
		padding-left: 35vw;
		padding-left: 0px;
		padding-top: 20px;
	}

	p.txtland06
	{
		color: #003399; /* Azul MasterSoft */
		color: #F8C300; /* Amarillo MasterSoft */
		font-size: 2.0vw;
		font-size: 0.9em;
		font-weight: bold;
		padding-left: 0px;
		padding-left: 25%;
		padding-left: 35vw;
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.div04{
		padding: 0px 50px 0px 50px;
	}

	.landingbubble{
		right: 10px;
		bottom: 10px;
		width: 170px;
		height: 110px;
		font-size: 0.9em;
		border-radius: 6px;
		padding: 5px 5px;
		border: 1px solid dimgray;
		z-index: 1;
		margin-left: -60px;
	/*  El opacity: 0 es para que cuando se haga visible aplique la transición */

	}

	.wacontact {
		width: 90%
	}

}

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

	p.txtland05
	{
		font-size: 3.1vw;
		font-size: 1.1em;
		padding-left: 25%;
		padding-left: 0px;
		padding-top: 30px;
	}

	p.txtland06
	{
		color: #003399;
		color: white; 
		font-size: 2.0vw;
		font-size: 1.2em;
		font-weight: bold;
		padding-left: 25%;
		padding-left: 0px;
	}
	
*/
	
}