/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
/*
body {
  padding-bottom: 40px;
  color: #5a5a5a;
}
*/


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  text-align: center;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-left: 10px;
  margin-right: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}





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

      CAROUSEL MODIFICATIONS

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

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
   z-index: 10;
   bottom: 30px;
   left: 27%;
   padding-bottom: 0;
   padding-top: 0;
   right: 27%;
   text-shadow: none;  
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 100%;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 0;
}

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


/* Indicators */
.carousel .carousel-indicators { opacity: .6; }
.carousel:hover .carousel-indicators { opacity: 1; }
.carousel-indicators { bottom: 0; left: 0; margin-left: 0; right: 0; text-align: right; width: 92%; }

.carousel-control.right,
.carousel-control.left {
	background-image: none;
   width: 10%;
}
.carousel .item {
   height: 500px;
	min-height: 132px; 
	height: 100%;
	width:100%; 
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
    /* background-color: rgba(0, 0, 0, 0.27); */
   border-radius: 10px;
}
/*
.carousel-caption h3 {
	padding: .5em;
} */
.carousel .icon-container {
	display: inline-block;
	font-size: 25px;
	line-height: 25px;
	padding: 1em;
	text-align: center;
	border-radius: 50%;
}
.carousel-caption button {
	border-color: #00bfff;
	margin-top: 1em; 
}

.carousel-caption.caption-shadow-large { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.carousel-caption.caption-shadow       { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.carousel-caption.caption-bg           { background: rgba(0, 0, 0, 0.52); padding: 10px; }

/* customize textos del carousel */
.carousel-caption h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   /* font-size: 46px */
	font-weight: bold;
   font-stretch: condensed;
   margin-top: 0;
} 

.carousel-caption p {
	/* font-size: 18px */
   /*font-size: 1.8rem;*/
	font-weight:normal;
	margin-bottom: 5%;
}

.carousel-caption a {
   /*font-size: 1rem;     /* font-size: 16px; */
   /* font-size: 1.3rem; */
	color: #428bca;
}

/* Animation delays */
.carousel-caption h3:first-child {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.carousel-caption h3:nth-child(3) {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}
.carousel-caption h3:nth-child(4) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

/*
inspired from http://codepen.io/Rowno/pen/Afykb 
http://stackoverflow.com/questions/26770055/bootstrap-carousel-fade-no-longer-working-with-maxcdn-3-3-bootstrap-min-css
*/
.carousel-fade .carousel-inner .item {
   opacity: 0;
   transition-property: opacity;
   -webkit-transition-duration: 1500ms; /* Safari */
   -webkit-transition-timing-function: linear; /* Safari */
   transition-duration: 1500ms;
   transition-timing-function: linear;
}
/*  transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; */

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


/* -------------- POSICIONAMIENTO DEL CAPTION ------ 
Caption Bottom (default):  <div class="carousel-caption">
Caption Bottom Right:      <div class="carousel-caption caption-bottom-right">
Caption Bottom Left:       <div class="carousel-caption caption-bottom-left">
Caption Left:              <div class="carousel-caption caption-left">
Caption Right:             <div class="carousel-caption caption-right">
Caption Top:               <div class="carousel-caption caption-top">
Caption Top Right:         <div class="carousel-caption caption-top-right">
Caption Top Left:          <div class="carousel-caption caption-top-left">

  '0' => 'top',
  '1' => 'top-left',
  '2' => 'top-right',
  '3' => 'top-right-r',
  '4' => 'left',   
  '5' => 'center',   
  '6' => 'right',
  '7' => 'right-r',
  '8' => 'bottom',
  '9' => 'bottom-left',
 '10' => 'bottom-right',
 '11' => 'bottom-right-r',
*/

.carousel-caption.caption-top           { left: 27%;  right: 27%;  bottom: auto; top: 10px; }
.carousel-caption.caption-top-w         { left: auto; right: auto; bottom: auto; top: 10px; width: 100%; }
.carousel-caption.caption-top-left      { width: 43%; bottom: auto; float: left;  left: 8%;   padding-top: 0; right: auto; text-align: left; top: 10px; }
.carousel-caption.caption-top-left-l    { width: 20%; bottom: auto; float: left;  left: 8%;   padding-top: 0; right: auto; text-align: left; top: 10px; }
.carousel-caption.caption-top-right     { width: 43%; bottom: auto; float: right; left: auto; padding-top: 0; right: 8%;   text-align: left; top: 10px; }
.carousel-caption.caption-top-right-r   { width: 20%; bottom: auto; float: right; left: auto; padding-top: 0; right: 8%;   text-align: left; top: 10px; }

/* .carousel-caption.caption-center    { bottom: auto; top: 50%; text-align: center; } */
.carousel-caption.caption-left           { bottom: 100px; top: 100px; float: left;  left: 8%;   right: auto; text-align: left; width: 43%; }
.carousel-caption.caption-center         { bottom: 100px; top: 100px;               left: 27%;  right: 27%;  }
.carousel-caption.caption-center-w       { bottom: 100px; top: 100px;               left: auto;  right: auto;  width: 100%; }
.carousel-caption.caption-right          { bottom: 100px; top: 100px; float: right; left: auto; right: 8%;   text-align: left; width: 43%;}
.carousel-caption.caption-right-r        { bottom: 100px; top: 100px; float: right; left: auto; right: 8%;   text-align: left; width: 20%;}

.carousel-caption.caption-bottom         { left: 27%; right: 27%; }
.carousel-caption.caption-bottom-w       { left: auto; right: auto; bottom: 30px; width: 100%; }
.carousel-caption.caption-bottom-left    { width: 43%; bottom: 30px; float: left;  left: 8%;   right: auto; text-align: left; }
.carousel-caption.caption-bottom-right   { width: 43%; bottom: 30px; float: right; left: auto; right: 8%;   text-align: left; }
.carousel-caption.caption-bottom-right-r { width: 20%; bottom: 30px; float: right; left: auto; right: 8%;   text-align: left; }


/*
.carousel-caption.caption-top, 
.carousel-caption.caption-bottom { left: 27%; right: 27%; }

.carousel-caption.caption-left, 
.carousel-caption.caption-right { top: 100px; }

.carousel-caption.caption-right, 
.carousel-caption.caption-left, 
.carousel-caption.caption-top-right, 
.carousel-caption.caption-top-left, 
.carousel-caption.caption-bottom-right, 
.carousel-caption.caption-bottom-left { width: 43%; }

.carousel-caption.caption-right { bottom: auto; float: right; left: auto; right: 8%; text-align: left; }

.carousel-caption.caption-right-r { bottom: auto; float: right; left: auto; right: 8%; text-align: left; }

.carousel-caption.caption-left { bottom: auto; float: left; left: 8%; right: auto; text-align: left; } 

.carousel-caption.caption-top { bottom: auto; top: 10px; }

.carousel-caption.caption-top-right { bottom: auto; float: right; left: auto; padding-top: 0; right: 8%; text-align: left; top: 10px; }

.carousel-caption.caption-top-left { bottom: auto; float: left; left: 8%; padding-top: 0; right: auto; text-align: left; top: 10px; }
 
.carousel-caption.caption-bottom-right   { bottom: 30px; float: right; left: auto; right: 8%; text-align: left; }

.carousel-caption.caption-bottom-left { bottom: 30px; float: left; left: 8%; right: auto; text-align: left; }

.carousel-caption.caption-center-l { bottom: auto; top: 50%; text-align: left; }
.carousel-caption.caption-center   { bottom: auto; top: 50%; text-align: center; }

*/





/* MEDIA QUERIES ================================================== ##f312 */
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
   .carousel-caption h3 {  font-size: 1rem;  } 
   .carousel-caption p  {  font-size: 0.5rem;   }

   .carousel-caption a {
      /*font-size: 1rem;     /* font-size: 16px; */
      font-size: 1.3rem;
   	color: #428bca;
   }
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
  /* Styles */
   .carousel-caption h3 {  font-size: 2rem;  } 
   .carousel-caption p  {  font-size: 0.5rem; }
   .carousel-caption a {   font-size: 0.5rem;   }
}
 
/* Smartphones (portrait and landscape) ----------- */
@media (max-width: 479px) {
   /* Styles */
   .carousel-caption h3 {  font-size: 2rem;  } 
   .carousel-caption p  {  font-size: 0.8rem; }
   .carousel-caption a {   font-size: 0.6rem;   }
}

/* Extra Small Devices, .visible-xs-* */
@media (min-width: 480px) and (max-width: 767px) {
   .carousel-caption h3 {  font-size: 2.5rem;  } 
   .carousel-caption p  {  font-size: 1.2rem; }
   .carousel-caption a {   font-size: 1.2rem;   }
}

/* Small Devices, .visible-SM-* */
@media (min-width: 768px) and (max-width: 991px) {
   .carousel-caption h3 {  font-size: 3rem;  } 
   .carousel-caption p  {  font-size: 1.2rem; }
   .carousel-caption a {   font-size: 1.2rem;   }
  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  .featurette-heading {
    /*font-size: 3rem;        /*  font-size: 50px; */  
    font-size: 50px;
  }   
}

/* Medium Devices, .visible-MD-* */
@media (min-width: 992px) and (max-width: 1199px) {
   .carousel-caption h3 {  font-size: 4rem;  }
   .carousel-caption p  {  font-size: 1.4rem; }
   .carousel-caption a {   font-size: 1.3rem;   }
  .featurette-heading   {  margin-top: 120px;   }    
}

/* Large Devices, .visible-LG-* */
@media (min-width: 1200px) {
   .carousel-caption h3 {  font-size: 4.5rem;  } 
   .carousel-caption p  {  font-size: 1.8rem; }
   .carousel-caption a {   font-size: 1.4rem;   }
}


/* Non mobile devices put in different order */