/* CSS Document */


html { 
	font-size: 100%; /* 1 */
  font-family: 'Roboto', sans-serif; 
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */ 
}
	
/*html, button, input, select, textarea { font-family: 'Roboto', sans-serif; }*/

body { 
	font-family: 'Roboto', sans-serif; 
  color: #666;
	/*overflow-x: hidden; */
}

html, body { 
	width: auto !important; 
	/*overflow-x: hidden !important; */
}

/* ------------------------------------------------------ */

h1 { font-size: 2.5em; margin: 0.67em 0; }
h2 { font-size: 1.6em; margin: 0.83em 0; line-height: 1.4em; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }

/* ------------------------------------------------------ */

h2 b{
  color: #0D78B5;
}

.wrapper-bco{
   background-color: #fff;
   padding: 30px 0;
   margin-top: 0 !important;
}

.wrapper-gris{
   background-color: #f5f5f5;
   padding: 30px 0;
   margin-top: 0 !important;
}

.wrapper-gris2{
   background-color: #E0E1E3;
   padding: 30px 0;
   margin-top: 0 !important;
}

.wrapper-rojo{
   background-color: #d9534f;
   /*padding: 30px 0;*/
   margin-top: 0 !important;
   color: #fff;
}

.wrapper-azul{
  background-color: #0D78B5;
  padding: 30px 0;
  color: #fff;
}

.wrapper-verde{
  background-color: #57bb59;
  /*padding: 30px 0;*/
  color: #fff;
}

.wrapper-naranja{
  background-color: #d28b28;
  /*padding: 30px 0;*/
  color: #fff;
}

.wrapper-lila{
  background-color: #605277;
  padding: 30px 0;
  color: #fff;
}

.wrapper-banner{
  background-color: #E0E1E3;
  padding: 30px 0;
  color: #444;
  background-image: url('img/banner2.jpg');
  background-repeat: no-repeat;
  background-position: left bottom;
  min-height: 366px;
}

.wrapper-negro{
  background-color: #000000;
  padding: 30px 0;
  color: #eee;
  background-image: url('img/banner3.jpg');
  background-repeat: no-repeat;
  background-position: left bottom;
  /*min-height: 266px;*/
}


.page-header{
  margin-bottom: 10px;
  /*padding-bottom: 0;*/
  padding: 20px 0;
  text-align: center;
}

.page-header h2{
  font-size: 2.2em;
  font-weight: bold;
}

.page-header small{
  display: block;
  margin-top: 10px;
}

.container{
  overflow: hidden;
}

.c-top{
    padding: 10px 10px;
}

.c-color{
  color: #fff;
}

.c-color h3{
  /*font-family: 'Gloria Hallelujah', cursive;*/
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.6em;
  /*text-shadow: 1px 1px #444;*/
}

.c-color span{
  font-size: 3em;
}

.mt{
  padding: 35px 0;
}

.sec-tit-bco{
  color: #fff;
  text-align: center;
  font-size: 3em;
  font-weight: bold;  
  text-shadow: 1px 1px #444;  
  text-transform: uppercase;  
}

.sec-tit{
  color: #666;
  text-align: center;
  text-transform: uppercase;  
  font-size: 3em;
  font-weight: bold;
  text-shadow: 1px 1px #444;
  margin-bottom: 40px;
}

.sec-subtit{
  color: #666;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8em;
  margin-bottom: 20px;
}

/*-------------------------------------------------- */

.logo-txt{
  font-weight: 400;
  color: #0D78B5 !important;
}

.logo-txt a:hover {
  text-decoration: none;
}

.c-info{
  padding: 10px 10px;
  margin-bottom: 20px;
}

.c-info .logo-txt{
  font-size: 1.4em;
}

.c-info h2{
  font-size: 1.4em;
  margin: 0;
}

#breves{
}

#breves p{
  font-size: 1.2em;
}


#modulos{
  color: #fff;
  padding: 30px 0;
}

#modulos h2{
  /*font-family: 'Gloria Hallelujah', cursive;*/
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8em;
  /*text-shadow: 1px 1px #444;*/
}

#modulos .btn:hover{
  color: #fff;
  background-color: #444;
  border-color: #fff;
}

#caracteristicas{
  background-image: url('img/cebolla.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/* ------------------------------------------------------------------------ */



/* ------------------------------------------------------------------------ */

#base{
  background-position: bottom left; 
  background-color: #0D78B5;
  color: #fff;
  font-size: 1.2em;
  padding-top: 0;
  min-height: 100px;    
}

#base h2, #base h3{
  color: #fff;
}

/* ------------------------------------------------------------------------ */

.caja{
  background-color: #fff;
  padding: 20px;
  /*border-radius: 8px;*/
  color: #666;
  /*border: 1px solid #ccc;*/
}

.texto-big{
  font-size: 1.2em;
}


/* ------------------------------------------------ */

.menu-caja{
  list-style: none;
}

.menu-caja li{
  background-color: #8eb0c3;
  padding: 5px 8px;
  margin-bottom: 1px;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.9em;
}



/*-------------------------------------------------- */

.jumbotron{
  height: 400px;
  background-image: url('img/banner.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 0;
}

.jumbotron .txt{
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  background-color: #0D78B5;
  padding: 5px;
  margin: 2px 0;
}

.media-heading{
  font-weight: bold;
  text-transform: uppercase;
}

/* ----------------------------------------------- */

.menu{
  float: right;
  margin-top: 10px;
}

.menu-bco > a{
  color: #fff !important;
}

.menu-bco > a:hover{
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}

.menu a{
  color: #666;
  font-weight: bold;
  margin-left: 10px;
}

.menu a:hover{
    color: #666;
    border-bottom: 2px solid #666;
    text-decoration: none;
}

.menu .active{
    color: #0D78B5;
    text-decoration: none;
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 350px;
  margin-bottom: 60px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  width: 40%;
  margin-left: 30%;
  font-size: 1.2em;
  color: #666;
  text-shadow: none;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 350px;
  background-color: #777;
}

.carousel-caption-bco{
  color: #fff;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
  height: auto;
}

/**********************************************************************************************/

/* Fade transition for carousel items */

.carousel .item {
   left: 0 !important;
   -webkit-transition: opacity .4s;
   -moz-transition: opacity .4s; 
   -o-transition: opacity .4s; 
   transition: opacity .4s; 
}

.carousel-control { 
   background-image: none !important; 
} 

.next.left, .prev.right {
   opacity: 1; 
   z-index: 1;
}

.active.left, .active.right {
   opacity: 0;
   z-index: 2;
}

/***********************************************************************************************/

.footer {
  width: 100%;
  /*margin-top: 30px;*/
  padding: 20px;
  background-color: #000;
  font-size: 0.9em;
  color: #eee;
}

/* ------------------------------------------------------------------------------------------------ */

.div-alto{
  float: left;
  position: relative;
  width: 100%;
  /*height: 200px;*/
  /*
  padding: 0px;
  background: #12345F;
  font-size: 48px;
  color:#ffffff; 
*/
}

.div-pie{
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 96%;
  margin-bottom: 20px;
  /*min-width: 1020px;*/
  height: auto;
  /*
  padding: 0px;
  background: #FF7869;
  font-size: 18px;
  color:#000000; */
}

/* ------------------------------------- */

@media (max-width: 980px) {
  
  .wrapper-banner {
    background-color: #E1E6EC;
    background-image: none;
  }

  .wrapper-negro {
    background-color: #000000;
    background-image: none;
  }  

  #logo{
    margin: 0 auto;
    width: 100%;
    float: none !important;
    text-align: center;
  }

  #menu{
    width: 100%;
    margin: 0 auto;
  }



}