/* Space out content a bit */
body {
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

h2{
  text-transform: uppercase;
}

/* Custom page footer */
.footer {
  padding-top: 30px;
  color: #fff;
  background-color: #0CB7F2;
  padding-bottom: 20px;
  margin-top: 60px;
}
  .footer a{
    color: #fff;
    text-decoration: underline;
  }
  .footer a:hover{color:#066181;}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 960px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  background: url(img/fondo.jpg) no-repeat center top fixed;
  padding-top: 53px;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

.divider{
  height: 1px;
  background-color: #e3e3e3;
  width: 100%;
  margin: 50px 0px;
}

.stroke{
  text-align: center;
  color: white;
  letter-spacing: 0;
  text-shadow: -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 1px 1px 1px #333;
}
.imagen{
  margin-top:20px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

/**/
h2 a:hover{
  text-decoration: none;
  color: #0CB7F2;
}

/*menu principal
--------------------------------------------------------------*/
.cabecera{
  background-color: #0CB7F2;
  margin-bottom: 30px;
  width: 100%;
}

.logotipo{
  float: left;
  width: 45%;
  color: #fff;
  height: 60px;
}
.logotipo h3{float: left;}
.logotipo img{
  float: left;
  margin-top: 7px;
  margin-left: 25px; 
}

.menutop{
  float: right;
  width: 55%;
  margin: 20px 0px;
}
  .menutop ul{
    float: right;
    margin: 0px;
  }
  .menutop ul li{
    float: left;
    list-style: none;
  }
  .menutop ul li a{
    color: #fff;
    text-decoration: none;
    padding: 22px 15px;
  }
  .menutop ul li a:hover{
    background-color: #7cd9f9;
  }
  .menutop .active a{
    background-color: #7cd9f9;
  }

/* Añadidos
-----------------------------*/

.text-muted{
  font-size: 0.85em;
}
.goto{
  padding-top: 80px;
  font-size: 1.8em;
  font-weight: 200;
}
img {
  margin: 40px auto;
  display: block;
}

.panel-cabeza{
  background-color: #eee;
  font-weight: bold;
}

.intermission{
  width: 100%;
  background-color: #f6f6f6;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 90px 0px 100px 0px;
  margin: 40px 0px;
  color:#aaa;
}
.intermission h4{color: #888;}
.intermission p{margin: 20px 0px;}

.presidente{
  float: right;
  width: 30%;
  margin-left: 10px;
}
  .presidente img{
    margin: 0px 0px 10px 0px;
  }
  .presidente small{
    color: #0CB7F2;
    font-weight: bold;
    text-align: center;
  }

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

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



/* RESPONSIVE CSS
-------------------------------------------------- */

@media(min-width: 768px) and (max-width: 991px) {
  .logotipo{width:45%;}
    .logotipo h3{font-size: 21px;}
  .menutop{width: 55%};
}

@media (min-width: 768px) {
  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 769px) {
  .col-lg-3{
    width: 25%;
    float: left;
  }
  .logotipo{width:45%;}
    .logotipo img{}
  .menutop{width: 55%};
}
@media (min-width: 481px) and (max-width: 768px) { /*tablet version*/
  .col-lg-3{
    width: 50%;
    float: left;
    height: 350px;
  }
  .logotipo{width: 10%}
    .logotipo h3{display: none;}
    .logotipo img{
      margin-top: 6px;
      margin-left: 25px;}
  .menutop{width: auto;}
    .menutop ul{padding: 0px;}
    .menutop ul li a{padding: 22px auto;}
}
@media (max-width: 480px) { /*movil version*/
  .col-lg-3{
    width: 100%;
    float: left;
  }

  .logotipo{display: none;}
  .menutop{width: 100%;}
    .menutop ul{padding: 0px;}
    .menutop ul li a{padding: 22px auto;}
}


/*Popup*/
.cd-popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
  transform: translateY(-40px);
  transition-property: transform;
  transition-duration: 0.3s;
}
.is-visible .cd-popup-container {
  transform: translateY(0);
}