/**{outline: 1px solid red;}*/

.portada{
  background-image: url(../img/programas/cuna/portada-cuna2.jpg);
  background-size: cover;
  background-position: 55%;
  background-position-y: 25%; 
  width: 100%;
  height: 450px;
  margin-top: 80px;
}
.portada .block{color:white; margin: 14% 24% 0 24%; text-align: center; border-top: 1px solid #fff; border-bottom:1px solid #fff;
padding: 0 10px;}
.portada h3 {font-size: 27px; text-transform:uppercase; margin:10px 0 20px; text-shadow:1px 1px 5px #2D3129;font-weight: bold;}
.portada h4{font-size:17px; font-weight: 400; text-align: center; padding: 0 10px; text-shadow:2px 1px 2px #2D3129;}

/*.portada .hoverAll{background: rgba(6,28,38,.2); width:100%; height:100%;}*/
/*-------submenu----------*/
.content-info .submenu #accordion{background: transparent; margin-bottom: 0;}
.content-info .submenu ._Title{border: none; margin-bottom: 4px;}
.content-info .submenu #accordion .spacy{background-color: rgb(229,229,229); height:30px;width:100%;}
.content-info .submenu #accordion h4{text-transform: uppercase; font-weight: 300; text-shadow: 0 1px 1px #000; font-size:15px; color: #fff;}
.content-info .submenu #accordion h3{text-transform: none; font-size: 14px; padding-left: 15px; text-shadow: 0 0 0 #000; font-weight:400; }
.content-info .submenu #accordion .glyphicon { margin-right:10px; }
.content-info .submenu #accordion .panel {border-radius: 0px; background: transparent; margin-top: 0px;}
.content-info .submenu #accordion .panel-mg-top{margin-top: 0px;}
.content-info .submenu #accordion .panel-body { padding:0px;}
.content-info .submenu #accordion .panel-body .table_1 h5 i { font-size:10px; width: 10px;}
.content-info .submenu #accordion .pd-bottom {margin-bottom: 5px; margin-top: -5px;}
.content-info .submenu #accordion .panel-body .table {margin-bottom: 0px; }
.content-info .submenu #accordion .panel-heading { border-radius: 0px; background:rgb(50,57,70);}
.content-info .submenu #accordion .panel-heading .fa {width:16px; margin-left:-20px; }
.content-info .submenu #accordion .panel-collapse .panel-body .table_1 h5{ color: #fff; background:transparent;
border-bottom:1px solid rgba(50,57,70,.5); margin: 0px; padding: 8px 15px;}
.content-info .submenu #accordion .panel-collapse .panel-body .table_1 .bottom{border-bottom:0px;}
.content-info .submenu #accordion .panel-collapse .panel-body .table_1:hover{background-color: rgba(251,65,65,.8); }
.content-info .submenu #accordion .panel-collapse .panel-body .table_1:hover a{color: #fff;font-weight: 500; }
.content-info .submenu #accordion .panel-body .table_1 h5 { padding-left: 15px; }
.content-info .submenu #accordion .panel-body .table_1 h5 a{color: #00000c; text-decoration: none;}
.content-info .submenu #accordion .panel-body .table_1 .active a{color:rgb(251,65,65); font-weight: bold;}
.content-info .submenu #accordion .tipo-programa{border-left: none; border-right: none; border-top: none; 
border-radius: 2px; color: rgb(50,57,70); background: #f5f5f5; box-shadow: inset -1px -1px 4px 0px rgb(50,57,70);}
.content-info .submenu #accordion .mg-bottom{margin-bottom: 5px;}
.content-info .submenu #accordion .panel-hover a{text-decoration: none;}
.content-info .submenu #accordion .panel-hover:hover{background-color: rgba(251,65,65,.7); box-shadow: none;}
.content-info .submenu #accordion .panel-hover:hover h3{color:#fff; text-shadow: 0 0px 1px rgba(251,65,65,.9); }


/*---------------- CONTENIDOO ----------*/
.titulo-programa{
    width: 100%;
    background: rgb(50,57,70);
    padding: 12px 1em;
    font-size: 30px;
    color: #fff;
    margin-bottom: 15px; text-shadow: 0 1px 1px #000; margin-top: 0px; 
 }
.content-info{
  background-image: url(../img/fondo-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}
.contenido-programas{padding: 30px; /*background: rgb(229, 229, 229);*/}
h4{ font-size: 16px; font-weight: 600;}
.gallery img {margin-bottom: 15px;}

.hoverDot {
  border: 4px solid #fff;
  background-color: rgb(50,57,70);
  width: 85%;
    height:0;
    padding-bottom: 85%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
  position: relative;
  text-align: center;
  margin: auto;
}

.hoverDot .icon-group {
  color: rgb(50,57,70);
  font-size: 100%;
  left: 5%;
  opacity: 1;
  font-weight: 600;
  position: absolute;
  top: 5%;
  padding: 30% 5%;
  height: 90%;
  width: 90%;
  border-radius: 100%;
  background: rgba(255,255,255,0.3);
  -webkit-transition: all 500ms;
}

.hoverDot:hover .icon-group{
    padding: 10%;
    font-size: 90%;
    background: none;
    color: #fff;
}
.hoverDot .flip-text {
  color: #fff;
  font-size: 24px;
  left: 20%;
  opacity: 0;
  position: absolute;
  top: 40%;
  width: 60%;
  height: 60%;
  border-radius: 100%;
  -webkit-transform: rotateY(-180deg);
  -webkit-transition: all 500ms;
}
.hoverDot, .flip-text{
    background-size: cover;
    background-position: center;
}
.cuna1{background-image: url(../img/programas/cuna/cuna1.jpg);}
.cuna2{background-image: url(../img/programas/cuna/cuna2.jpg);}
.cuna3{background-image: url(../img/programas/cuna/cuna3.jpg);}

.hoverDot:hover{
    background: rgb(67,86,99);
}
.hoverDot:hover .flip-text {
  opacity: 1;
  -webkit-transform: rotateY(0);
}

.gallery figure .foto1 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto1{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.gallery figure .foto2 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto2{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.gallery figure .foto3 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto3{-webkit-filter: grayscale(80%);filter: grayscale(80%);}
.gallery figure .foto4 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto4{-webkit-filter: grayscale(80%);filter: grayscale(80%);}
.gallery figure .foto5 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto5{-webkit-filter: grayscale(80%);filter: grayscale(80%);}
.gallery figure .foto6 {-webkit-filter: grayscale(0); filter: grayscale(0);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.gallery figure:hover .foto6{-webkit-filter: grayscale(80%);filter: grayscale(80%);}

@media only screen and (min-width: 1921px ) and (max-width: 2560px){
  .portada{height: 550px;}
  .portada .block{ margin: 18.5% 24% 0 24%;}
}
@media (max-width: 1093px){.portada .block{ margin: 16% 24% 0 24%;}}
@media (max-width: 768px){.portada .block{ margin: 21% 24% 0 24%;}.portada .block h4{font-size:16px;} }
@media (max-width: 500px){.portada .block{ margin: 29% 20% 0 20%;}}
@media (max-width: 375px){.portada .block{margin: 34% 20% 0 20%;}}
@media (max-width: 320px){.portada .block{margin: 33% 20% 0 20%;} .portada .block h3{font-size:1.6em;} }

@media (min-width: 270px) and (max-width: 633px){
  .hoverDot .icon-group {font-size: 80%;}
  .hoverDot:hover .icon-group{font-size: 80%;}
}
@media (max-width: 500px){
  .titulo-programa{font-size: 25px; text-align: center;}
}
@media (min-width: 200px) and (max-width: 270px){
  .hoverDot .icon-group {font-size: 75%;}
  .hoverDot:hover .icon-group{font-size: 67%;}
}
@media( max-width: 380px ){
   .gallery .col-xs-6{ width: 100%;}
   .servicios .col-xs-6{width: 100%;}
  .hoverDot {width: 70%; padding-bottom: 70%; margin-bottom: 5px;}
  .hoverDot:hover .icon-group{padding: 12.7%;}
  .servicios .col-xs-offset-3{margin-left: 0%;}
  .hoverDot .icon-group {font-size: 90%;}
  .hoverDot:hover .icon-group{font-size: 90%;}
}