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

/*------------- reset -------------*/
* {
	margin:0;
	border:0;
	padding:0;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


* {
	margin: 0;
	padding: 0;
}
ol, ul {
	list-style: none;
}

/*a img{
	border: none;
}*/

a { text-decoration: none; }

.destacado a:hover {
	border-bottom:0px;
}
.clearfix {
	display: block;
}

/* HTML5 para los navegadores viejos */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*---------------  estilos personales ---------------*/
body {
	font-family: 'Roboto Condensed', Trebuchet MS, Arial, sans-serif;
	font-size:1em;
	color:#000000;
        background: url('../img/fondo_gradient.jpg') center center fixed;
        /*background: #b5b5b5;
        background: -moz-linear-gradient(#b5b5b5,#ffffff);
        background: -webkit-linear-gradient(#b5b5b5,#ffffff);
        background: -o-linear-gradient(#b5b5b5,#ffffff);
        background: -ms-linear-gradient(#b5b5b5,#ffffff);
        background: linear-gradient(#b5b5b5,#ffffff);*/
}
#container {
	max-width: 100%;
}
#contenido {
    width: 80%; 
	margin:0 auto;
	padding:15px;
}
#logo {
	float:left;
	margin:0.5%;
	height:auto;
	overflow:inherit;
}
.clear {
	clear:both;
}
.ocultar {
	display:none;
}
h2 {
    color:#2e42e1;
}
#destacado {  
    width: 80%; 
	margin:0 auto;
}
#achica_img img{
	max-width:100%;
}
.achica_img{
	max-width:100%;
}
.float_left  {
float: left;
padding:0px 20px 20px 20px;
}
.float_right  {
float:right;
padding:0px 20px 20px 20px;
}


/*------------------- Articulos Productos -----------------------*/
.espacio-top {
    margin: 100px 0 0px 0;
    
}
#btn-productos ul {
	list-style:none;
}
#btn-productos ul li {
	display:inline-block;
	position: relative;
        border: 10px;
        /*opacity: 0.8;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	padding: 10px;
        border: 5px;
        border-color: #3399ff;
        border-radius: 15px;
}
 
#btn-productos ul li:hover {
        /*color:#CCCCCC;
	color:#0054a5;*/
}
 
#btn-productos ul li a {
	display:block;
        border: 10px;
        opacity: 0.6;
        box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}

#btn-productos ul li a:hover, a:active {
        opacity: 1;
	display:block;
}

/* ------------------------- Articulos Galeria de Imagenes ---------------------- */
#albumes ul {
	list-style:none;
}
#albumes ul li {
	display:inline-block;
	/*position: relative;
	padding: 10px;*/
}
 
/*#albumes ul li:hover {
	color:#CCCCCC;
	color:#0054a5;
}*/
 
/*#albumes ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
}*/

/*#albumes ul li a:hover {
	color:#CCCCCC;
	color:#ff355b;
	display:block;
	text-decoration:none;
}*/

/* ---------------------------------- Navegador ---------------------------------- */ 
#menu-mini {
	display:none;
}
nav {
	/*font-family: 'Varela Round', 'Calibri', Trebuchet MS, Arial, sans-serif;*/
	font-weight: 700;
	font-size:1.1em;
	width:100%;
	background: #2e42e1;
        background: -moz-linear-gradient(#51a1ff,#2e42e1);
        background: -webkit-linear-gradient(#51a1ff,#2e42e1);
        background: -o-linear-gradient(#51a1ff,#2e42e1);
        background: -ms-linear-gradient(#51a1ff,#2e42e1);
        background: linear-gradient(#51a1ff,#2e42e1);
	/*background-image:url(../img/bg_opacity80.png);*/
	z-index:15;
	box-shadow:0 0 20px rgba(0,0,0,0.4);
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.4);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.4);
	position:fixed;
}

#menu {
	padding:20px 0 0 0;
	height:55px;
	margin:0 auto;
}
 
nav ul {
	list-style:none;
	max-width:100%;
	margin:0 auto;
}

nav span {
	color:#FFF;
	margin-left:15px;
	font-size:1.1em;
}
 
nav ul li {
	display:inline-block;
	position: relative;
}
 
nav ul li:hover {
	/*border-bottom:thin dashed #FFFFFF;*/
}
 
nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding:20px 24px 15px 24px;
        font-weight: 400;
        font-size: 1em;
}

nav ul li a:hover {
	display:block;
	/*border-bottom:1px solid;
	border-top:1px solid;*/
	padding: 20px 24px 15px 24px;
        color:#cccccc;
}
 
nav ul li a span {
	margin-right:10px;
}

nav ul li a span:hover {
	color:#CCCCCC;
	/*color:#ff355b;*/
}
 
nav ul li:hover .children {
	display:block;
	text-align:left;
}
 
nav ul li .children {
	display: none;	
	position: absolute;
	width: 250px;
	text-align:left;
	/*z-index:10;*/
}
 
nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px dashed #fff;
	background: #2e42e1;
        /*background: -moz-linear-gradient(#51a1ff,#2e42e1);
        background: -webkit-linear-gradient(#51a1ff,#2e42e1);
        background: -o-linear-gradient(#51a1ff,#2e42e1);
        background: -ms-linear-gradient(#51a1ff,#2e42e1);
        background: linear-gradient(#51a1ff,#2e42e1);
	background-image:url(../img/bg_opacity80.png);*/
	width:250px;
}
 
nav ul li .children li a {
	display: block;
}

nav ul li .children li a:hover {
    color:#999999;
	/*color: #ff355b;*/
}
 
nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
 
nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}

/*------------------- Iconos -----------------------*/
@font-face {
	font-family: 'iconweb';
	src:url('iconweb.eot?uzsp5m');
	src:url('iconweb.eot?uzsp5m#iefix') format('embedded-opentype'),
		url('iconweb.ttf?uzsp5m') format('truetype'),
		url('iconweb.woff?uzsp5m') format('woff'),
		url('iconweb.svg?uzsp5m#iconweb') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'iconweb';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
	content: "\e990";
}
.icon-home:before {
	content: "\e90e";
}
.icon-home-outline:before {
	content: "\e980";
}
.icon-th-menu:before {
	content: "\e90b";
}
.icon-th-menu-outline:before {
	content: "\e97d";
}
.icon-arrow-up-outline:before {
	content: "\e981";
}
.icon-arrow-forward-outline:before {
	content: "\e982";
}
.icon-arrow-down-outline:before {
	content: "\e983";
}
.icon-arrow-back-outline:before {
	content: "\e984";
}
.icon-arrow-up:before {
	content: "\e9dc";
}
.icon-arrow-right:before {
	content: "\e9de";
}
.icon-arrow-left:before {
	content: "\e9e1";
}
.icon-arrow-down:before {
	content: "\e9ea";
}
.icon-device-phone:before {
	content: "\e9f6";
}
.icon-phone-outline:before {
	content: "\ea09";
}
.icon-phone:before {
	content: "\e95a";
}
.icon-location:before {
	content: "\e912";
}

/*------------------- Contenedor -----------------------*/
#contenedor {  
    width: 80%; 
    /*max-width: 960px;*/
    padding-top:85px;
    margin: 0 auto;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.4);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.4);
}

#contenedor-galeria {  
    width: 80%;
    margin: 0 auto;
}

/*--------------------- Sidebar ------------------------ */

/*aside {
	float: right;
	padding: 3%;
	width: 24%;
	background-color: #eee;
}*/
#ventajas {
	width: 50%;
}
#ventajas ul{
list-style: circle;
padding-left: 15px;
}
#sidebar {
	width: 50%; /* since this element is floated, a width must be given */
	/*float: right;
        padding: 10px 0; /* top and bottom padding create visual space within this div */
	/*background: #fff; /* the background color will be displayed for the length of the content in the column, but no further */
	/*margin-top:320px;
	margin-right:20px;
	border-radius: 20px;*/
}
#sidebar ul{
list-style: circle;
padding-left: 15px;
}

/*-------------------------------- Flexslider -------------------------------------*/

/* Browser Resets */
.flex-container a:active,
.flexslider a:active {
    outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {
    width: 100%;
    margin: 0;
    padding: 0;
}
.flexslider .slides > li {
    display: none;/* Hide the slides before the JS is loaded. Avoids image jumping */
} 
.flexslider .slides img {
    max-width: 100%;
    max-height: 650px;
    display: block;
}
.flex-pauseplay span {
    text-transform: capitalize;
}

/* Clearfix for the .slides element */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
} 
html[xmlns] .slides {
    display: block;
} 
* html .slides {
    height: 1%;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/
.flexslider {
    /*background: #fff;
    border: 4px solid #fff;*/
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    zoom: 1;
}
.flexslider .slides {
    zoom: 1;
}
.flexslider .slides > li {
    position: relative;/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
}
.flex-container {
    zoom: 1;
    position: relative;
}

/* Caption style */
/* IE rgba() hack */
.flex-caption {
    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
    zoom: 1;
}
/* Este es el estilo del texto que describe cada foto en el slideshow ----CARROUSEL----- */
.flex-caption {
    width: 50%;
    padding: 16px;
    position: absolute;
    background: rgba(255,255,255,.6);
    color: #2e42e1;
    text-shadow: 0 -1px 0 rgba(0,0,0,1);
    font-size: 1.1em;
    line-height: 21px;
    top: 30px;
    right:100px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
/* Este es el estilo del texto que describe cada foto en el slideshow ----GALERIA----- */
.flex-caption-galeria {
    width: 100%;
    padding: 16px;
    position: absolute;
    background: rgba(0,0,0,.4);
    color: #ffffff;
    font-size: 1.2em;
    line-height: 21px;
    /*top: 30px;
    right:100px;
    text-shadow: 0 -1px 0 rgba(0,0,0,1);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;*/
}
.caption-altura {
height: 60px;
}

/* Direction Nav */
.flex-direction-nav li a {
    width: 52px;
    height: 52px;
    margin: -13px 0 0;
    display: block;
    background: url(../img/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
}
.flex-direction-nav li .next {
    background-position: -52px 0;
    right: 20px;
}
.flex-direction-nav li .prev {
    left: 20px;
}
.flex-direction-nav li .disabled {
    opacity: .3;
    filter:alpha(opacity=30);
    cursor: default;
}

/* Control Nav */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 6px;
    text-align: center;
}
.flex-control-nav li {
    margin: 0 0 0 2px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.flex-control-nav li:first-child {
    margin: 0;
}
.flex-control-nav li a {
    width: 13px;
    height: 13px;
    display: block;
    background: url(../img/bg_control_nav.png) no-repeat 0 0;
    cursor: pointer;
    text-indent: -9999px;
}
.flex-control-nav li a:hover {
    background-position: 0 -13px;
}
.flex-control-nav li a.active {
    background-position: 0 -26px;
    cursor: default;
}

/*------------------- Modal -----------------------*/
/* The Modal (background) */
.modal, .modal1, .modal2 {
  display: none;
  position: fixed;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  z-index:1000000;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  z-index:1000000;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/*------------------- Tres Columnas -----------------------*/

.tres-columnas {
	width:28%;
	float: left;
	text-align: center;
        margin: 2% 1% 1% 4%;
}
.iconos{
    padding-bottom: 50px;
    color:#51a1ff;
    font-weight: 700;
}
.iconos a {
    color:#51a1ff;
}
.tres-columnas img {
    padding: 2% 0 0% 0;
    border:0px;
}
.tres-columnas a {
    text-decoration:none;
}
.tres-columnas a:hover {
    text-decoration: underline;
    /*border-bottom:1px dashed #cccccc;*/
}
.tres-columnas span {
    font-size:24px;
}

/*------------------- Formulario -----------------------*/

#envelope{
width: 100%;
/*margin: 10px 30% 10px 25%;
padding:10px 0;
border: 2px solid gray;
border-radius:10px;*/
}

#left {
width: 25%;
}
#right {
width: 25%;
}

form{
/*width:80%;
margin:0% 15%;
color:#FFFFFF;*/
}
.txt {
color:#2e42e1;
padding:5px;
font-size:14px;
}
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
/*margin-bottom: 20px;
margin-top: 10px;*/
color:#2e42e1;
font-size:14px;
width:90%;
padding: 10px;
margin:6px 0;
border-radius:5px;
border:1px solid #2e42e1;
background-color:rgba(255,255,255,0.5);
}
input[type=submit]
{
margin-bottom: 20px;
width:90%;
padding: 10px;
border-radius:5px;
border:1px solid #2e42e1;
background-color:rgba(46,66,225,1);
color: #fff;
font-size:15px;
cursor:pointer;
}
#submit:hover
{
background-color:rgba(199,38,44,1);
border:1px solid #C7262C;
webkit-transition: .4s linear; 
-moz-transition: .4s linear; 
-ms-transition: .4s linear; 
-o-transition: .4s linear; 
transition: .4s linear;
}
textarea{
width:90%;
/*font-family: 'Calibri', Trebuchet MS, Arial, sans-serif;*/
color:#2e42e1;
font-size:14px;
padding: 15px;
margin-top:6px;
margin-bottom:12px;
border:1px solid #2e42e1;
background-color:rgba(255,255,255,0.6);
border-radius:5px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #C7262C;
}

/*------------------- Footer -----------------------*/
footer{
	max-width:80%;
	margin:0 auto;
        color: #ffffff;
	font-size: 0.9em;
	background: #2e42e1;
        background: -moz-linear-gradient(#51a1ff,#2e42e1);
        background: -webkit-linear-gradient(#51a1ff,#2e42e1);
        background: -o-linear-gradient(#51a1ff,#2e42e1);
        background: -ms-linear-gradient(#51a1ff,#2e42e1);
        background: linear-gradient(#51a1ff,#2e42e1);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	/*border: solid 1px #003c76;
	padding:12px 0px;margin:0 auto;*/
        margin-bottom: 20px;
        overflow: auto;
}
.productos-lista {
    margin-left: 12px;
}
footer a {
	text-decoration:none;
	color:#FFFFFF;
}

footer a:hover {
	text-decoration:underline;
	/*border-bottom:dotted 1px;*/
}
.google-maps {
	position: relative;
	padding-bottom: 55%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.google-maps2 iframe {
	height: 60% !important;
}

/****************** ///////////////// ------------------- Achicar para Dispositivos ///////////////// -----------------------**********************/

@media screen and (max-width: 800px) {

* {
	margin:0;
	border:0;
	padding:0;
}

#logo img {
	display:none;
}
#contenedor {  
    width: 100%;
	/*margin: 0 auto;
	max-width: 960px;*/
	padding-top:55px;
	
}
#contenido {
    width: 98%;
}
/* -------- Navegador --------- */ 
.menu_bar {
	display:block;
	width:100%;
	height:55px;
	position: fixed;
	padding:0px;
	background: #2e42e1;
	/*box-shadow:0 0 20px rgba(0,0,0,0.4);
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.4);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.4);*/
	z-index:15;
}

#menu-mini {
	display:block;
}

#menu-mini img {
	width:auto;
	height:55px;
}
 
.menu_bar .bt-menu {
display: block;
padding:0 0 0 10px;
color: #fff;
overflow: hidden;
/*font-family: 'Varela Round','Calibri', Trebuchet MS, Arial, serif;
font-size: 12px;*/
text-decoration: none;
}
 
.menu_bar span {
float: right;
font-size: 1em;
}

.float_right  {
float: right;
padding:20px 0px;
}
 
nav {
width: 75%;
height: calc(80% - 25px);
position: fixed;
right:100%;
margin-top: 55px;
overflow: scroll;
text-align:left;
font-size: 14px;
}
 
nav ul li {
display: block;
border-bottom:1px solid rgba(255,255,255,.5);
text-align:left;
}
 
nav ul li a {
display: block;
}
 
nav ul li:hover .children {
display: none;
}
 
nav ul li .children {
width: 100%;
position: relative;
}
 
nav ul li .children li a {
margin-left:20px;
}

nav ul li .children li {
width:100%;
}

nav ul li .caret {
float: left;
}

/* -------- Flexslider ---------  */
.flex-caption {
    width: 80%;
    padding: 12px;
    font-size: 1.1em;
    line-height: 1.1em;
    top:25px;
    right:50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.flex-direction-nav li .next {
    right: 5px;
}
.flex-direction-nav li .prev {
    left: 5px;
}
.flex-caption-galeria {
    width: 100%;
}
#contenedor {
height:250px;
}
#contenedor-galeria {
height:100%;
width: 100%;
}
/*#contenedor img {
	zoom: 1.5;
}*/
.flexslider .slides li img {
    height:190px;	
    /*height:100%;
    width: 100%;*/
}
/*------------------- Sidebar ----------------*/
#sidebar {
width: 100%;
/*padding: 3%;*/
margin:auto;
float: left;
}
#ventajas {
width: 100%;
/*padding: 3%;*/
margin:auto;
margin-top: 100px;
}

/*------------------- Formulario -----------------------*/
#envelope{
width: 100%;
}

form{
width:80%;
}
#left {
width: 100%;
}
#right {
width: 100%;
}
/* -------- Footer ---------  */

#footer {
    width: 98%;
}

.tres-columnas {
	width:90%;
	float: left;
	margin: 2% 0 4% 4%;
	/*text-align: center;
	color:#CCCCCC;*/
}
.google-maps2 iframe {
	height: 100% !important;
}
}