/* Page Styles
================================================ 
================================ */

/*

Paleta de colores de la página

Azul: #189aca

Humo: #aaabbc
Gris: #8b8982
Negro: #373f47
Azul: #6c91c2
Lila: #c3c9e9


*/


* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font: normal 1em/1.5 sans-serif;
	color: #222;
	font-family: 'Arimo', sans-serif;
}

a{text-decoration: none; color:#6c91c2;}

p{color: #373f47;}

h1, h2, h3, h4, h5, h6{color:#6c91c2;}
.heading-inherit{color:#373f47;}
.heading-white, .p-white{color:#fff;}

.center{text-align:center;}
.right{text-align:right; float: right;}

.visible-grid,
.visible-grid-2{
	background-color: tomato;
	margin-bottom: 15px;
}

.visible-grid-2{
	background-color: lightblue;
}

/* Custom CSS ======================== */

.ventajas-wrapper-home{
  box-shadow:2px 3px 5px #b8b8b8;
  padding:10px;
  margin-bottom:8px;
  border-top:2px solid #373f47;
}

.fullwidth-wrapper, .fullwidth-wrapper2{
  background-color:#D1D1D1;
  margin-bottom:25px;
  padding-bottom:30px;
  box-shadow:1px 2px 5px gray;
}

.fullwidth-wrapper2{
  background-color:#8b8982;
  border-top: 3px solid #373f47;
  border-bottom: 3px solid #373f47;
}

.custom-button a{
  background-color:#fff;
  color:#189aca;
}

.title-decoration{
  background-color:#6c91c2;
  padding: 9px;
}

.servicios-imgs img{
  margin-top: 10px;
  position: relative;
  transition:.2s ease-in-out;
}

.servicios-imgs img:hover{
  transform: scale(1.1);
  box-shadow:1px 2px 5px gray;
}

.servicios-imgs .hr{
  margin-top: 40px;
}

.industrias-button:hover{
   color:#4E73A3;
}


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

.main-header select {  display:block; }
.main-header  ul { display: none; }

.main-header select {
    border: 0 !important;  /*Removes border*/
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #fff url(../img/dropdown-arrow.png) no-repeat 97% center;
	width: 100%; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #6c91c2;
	padding: 10px;
	margin-bottom: 10px;
	font-size: 20px;
}

.main-header {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff; 
}

.main-logo img{
  width:320px;
}
 
.main-nav a {
	color: #373f47;
	padding: 3px 20px;
	border-left:1px solid lightgray;
}

/* Buttons
================================================ 
================================================ */

.default-button a{
   background-color:#6c91c2;
   color:#fff;
   border:1px solid #4B78B3;
   box-shadow:1px 1px 2px gray;
}

.expand-button{
   background-color:#6c91c2;
   color:#fff;
   text-align:center;
}

.expand-button a{
   color:#fff;
   padding:15px 30px;
}


.small a{
   font-size:.8em;
}


.tiny a{
   font-size:.6em;
}


.rounded-a a, .rounded-a{
   border-radius:5px;
}

.rounded-b a, .rounded-b{
   border-radius:15px;
}

.rounded-c a, .rounded-c{
   border-radius:50px;
}

/* Padding Buttons */
.expand-button, .default-button a, .dropdown-button button, .custom-button a{padding: 12px;}
/* button group ****************************************/

.button-group li{
   display:block;
   margin-bottom: 10px;
   background-color: #373f47;
   padding: 9px 0px;
}

.button-group li a{
   background-color: inherit;
   border: inherit;
   box-shadow: inherit;
}

/* Dropdown Button ****************************************/

.dropdown-button {
    position: relative;

    /** Make it fit tightly around it's children */
    display: inline-block;
}

.dropdown-button .dropdown-button-menu {
    position: absolute;

    /**
     * Set the top of the dropdown menu to be positioned 100%
     * from the top of the container, and aligned to the left.
     */
    top: 100%;
    left: 0;

    /** Allow no empty space between this and .dropdown */
    margin: 0;
}

/*Dropdown Button Functionality ***************************************/
.dropdown-button:hover .dropdown-button-menu {

    /** Show dropdown menu */
    display: block;
}

.dropdown-button {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

.dropdown-button .dropdown-button-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;

    /****************
     ** NEW STYLES **
     ****************/

    list-style: none; /** Remove list bullets */
    width: 100%; /** Set the width to 100% of it's parent */
    padding: 0;
}


/** Dropdown Button Styles ********************************************/
.dropdown-button button {
    background: #189aca;
    color: #FFFFFF;
    border: none;
    margin: 0;
    font-size: 1em;
}

/** List Item Styles **/
.dropdown-button a {
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #189aca;
    color: #333333;
}

/** List Item Hover Styles **/
.dropdown-button a:hover {
    background: #BBBBBB;
}

/* alert boxess 
================================================ 
================================================ */
.error-alert,
.success-alert,
.warning-alert,
.notification-alert{
   background-color:#FF4040;
   width:100%;
   padding:10px;
}

.error-alert span,
.success-alert span,
.warning-alert span,
.notification-alert span{
   color:#fff;
}

.success-alert{
  background-color:#3FD467;
}
.warning-alert{
   background-color:#F5D20F;
}
.notification-alert{
   background-color:#0F99F5;
}

/* Modal Window Styles - Tutorial in http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ 
================================================ 
================================================ */

/* Styling Modal Box */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

/* Functionality and Looks */
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 60%; /* adjust the width you want on your project */ 
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: inherit;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

/* Close Modal Box */
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

@media (min-width: 1px) and (max-width: 768px)  { /* Modal Box tablet and phone Width */
	.modalDialog > div {
	width: 90%;
    }
}

/* Panel information
================================================ 
================================================ */

.important-info-panel{
   background-color:#8b8982;
   padding:13px;
   box-shadow: 2px 2px 5px #b5b5b5;
   border: 1px solid #ccc;
}


/* Contact Form
================================================ 
================================================ */
.btn-submit{
	width: 150px;
	float: right;
	padding: 10px 10px;
	color: white;
	background-color: #6c91c2;
}

/*
label, input, textarea{
	float: left;
}*/

label{
	width: 100%;
	margin: 2% 0;
}

input[type=text], textarea{
	width: 100%;
	background-color: #ececec;
	color: gray;
}

input, textarea{
	padding: 1%;
	border:0;
}

textarea{
	height: 210px;
}

.contacto-wrapper{
	border: 3px solid #6c91c2;
	padding: 50px 10px 63px 10px;
}

.contacto-wrapper h3{
	text-align: center;
	margin-top: -20px;
	background-color: inherit;
}

.datos-contacto p{
    color: gray;
}


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

.main-footer {
	margin-top: 30px;
  border-top:3px solid #8b8982;
	padding-top: 5px;
	padding-bottom: 5px;
 	background-color: #373f47;
  font-size: 13px;
}

.main-footer p{color: #fff;}


@media (min-width: 768px) { 
	/* Main Header
	================================================ 
	================================ */

	.main-header select { display: none; }
    .main-header  ul { display: block; }

    .main-nav{
    	text-align:right;
    	margin-top:45px; 
    }

    .main-logo{
    	text-align: inherit;
    }

	.main-nav li {
		display: inline-block;
	}
	
	/* Dropdown menu **********/

.has-submenu, .has-dropdown{
   position:relative;
}

nav .dropdown-menu{
   display:none;
}

nav .dropdown-menu a{ /*color de los links del menu principal y secundario*/
  color: #fff;
}

nav .has-dropdown ul{
   text-align:left;
}

nav .submenu{
   display:none;
}

.dropdown-menu, .submenu{position:absolute;}

.dropdown-menu li{  /* estilos generales del Dropdown (Afecta tanto al dropdown principal y al submenu secundario) */
   display:block;
   border-bottom:1px solid lightgray;
   padding:10px 0px;
}

.submenu li{display:block;}


nav ul li:hover > .dropdown-menu{ /* dropdown principal */
   display:block;
   z-index:1000;
   width:210%;
   background-color:#8b8982; /* color de fondo del dropdown principal */
   top:100%; /* alto ajustable del dropdown principal */
}

nav ul li:hover > .custom-dropdown-width{ /* dropdown principal */
   width:105%;
}


nav ul li:hover > .submenu{ /* submenu secundario */
   display:block;
   background-color:#5A5F63; /* color de fondo del submenu secundario */
   left:100%;
   top:0%;
   width:155px; /* tamaño ajustable de acuerdo al texto del submenu*/
}

/*Button group*/

.button-group li{
   display:inline;
}

}

@media (min-width: 1px) and (max-width: 767px)  {
	.main-nav li {
		margin-top: 12px;
	}
}