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

body{font-family: 'Roboto', sans-serif;}
.titulo-general{background: rgb(50,57,70); color: #fff; padding: 12px 1em; margin:0 0 10px 0; font-size: 30px; 
	font-weight: 500; text-shadow: 0 1px 1px #000;}
.portada{
    width: 100%;
    height: 450px;
    background-image: url(../img/programas/proyectos-respon/portada-proyectos.jpg);
    background-size: cover;
    background-position: right;
    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:0px 1px 2px #2D3129;font-weight: bold;}
.portada h4{font-size:17px; font-weight: 400; text-align: center; padding: 0 10px; text-shadow:0px 1px 1px #2D3129;}
/*-------submenu----------*/
.section-info .submenu #accordion{background: transparent; margin-bottom: 0;}
.section-info .submenu ._Title{border: none; margin-bottom: 4px;}
.section-info .submenu #accordion .spacy{background-color: rgb(229,229,229); height:30px;width:100%;}
.section-info .submenu #accordion h4{text-transform: uppercase; font-weight: 300; text-shadow: 0 1px 1px #000; font-size:15px; color: #fff;}
.section-info .submenu #accordion h3{text-transform: none; font-size: 14px; padding-left: 15px; text-shadow: 0 0 0 #000; font-weight:400; }
.section-info .submenu #accordion .glyphicon { margin-right:10px; }
.section-info .submenu #accordion .panel {border-radius: 0px; background: transparent; margin-top: 0px;}
.section-info .submenu #accordion .panel-mg-top{margin-top: 0px;}
.section-info .submenu #accordion .panel-body { padding:0px;}
.section-info .submenu #accordion .panel-body .table_1 h5 i { font-size:10px; width: 10px;}
.section-info .submenu #accordion .pd-bottom {margin-bottom: 5px; margin-top: -5px;}
.section-info .submenu #accordion .panel-body .table {margin-bottom: 0px; }
.section-info .submenu #accordion .panel-heading { border-radius: 0px; background:rgb(50,57,70);}
.section-info .submenu #accordion .panel-heading .fa {width:16px; margin-left:-20px; }
.section-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;}
.section-info .submenu #accordion .panel-collapse .panel-body .table_1 .bottom{border-bottom:0px;}
.section-info .submenu #accordion .panel-collapse .panel-body .table_1:hover{background-color: rgba(251,65,65,.8); }
.section-info .submenu #accordion .panel-collapse .panel-body .table_1:hover a{color: #fff;font-weight: 500; }
.section-info .submenu #accordion .panel-body .table_1 h5 { padding-left: 15px; }
.section-info .submenu #accordion .panel-body .table_1 h5 a{color: #00000c; text-decoration: none;}
.section-info .submenu #accordion .panel-body .table_1 .active a{color:rgb(251,65,65); }
.section-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);}
.section-info .submenu #accordion .mg-bottom{margin-bottom: 5px;}
.section-info .submenu #accordion .panel-hover a{text-decoration: none;}
.section-info .submenu #accordion .panel-hover:hover{background-color: rgba(251,65,65,.8); box-shadow: none;}
.section-info .submenu #accordion .panel-hover:hover h3{color:#fff; text-shadow: 0 0px 1px rgba(251,65,65,.9); }
.section-info .submenu #accordion .panel-mg-top .active { background-color: rgba(251,65,65,.8); box-shadow: none;}
.section-info .submenu #accordion .panel-mg-top .active h3 { color:#fff; text-shadow: 0 0px 1px rgba(251,65,65,.9);}


/*-----------CONTENT-------*/
.section-info{background-image: url(../img/fondo-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;}
.content-info{ padding: 30px;}
.sub-titulo{ color: rgb(50,57,70);padding: 5px 15px;}
.sub-titulo h5{font-weight: 700; text-shadow: 0 1px 1px #fff; font-size: 16px;}	
.proyecto-resp{ margin: 10px 0;padding:20px 5px;  height: auto; background:#fff; }
.proyecto-resp .thumbnail{margin: 0px;}
.proyecto-resp .btn{padding: 2px 10px;}
button{background: rgba(251,65,65,.7); color: #fff;}
.proyecto-resp .btn:hover{ color:rgb(67,86,99); background: #eee; border:1px solid gray; }
.imagen-programa img{width: 100%;}
.modal-header{background: rgba(251,65,65,.7); color: #fff;}
.modal-header button{ background: : #fff;}
.modal-content, .modal-header{border-top-right-radius: 9px; border-top-left-radius: 9px;}
.modal.in .modal-dialog{margin: 30px auto; width: 72%;}
.modal-body .imagen img {width: 100%;}
.modal p, li{text-align: justify;}
@media (max-width: 450px){
	.proyecto-resp .col-xs-5{width: 100%;}
	.proyecto-resp .col-xs-7{width: 100%;}
}
@media (max-width: 750px){
    .portada .block {margin-bottom: 120px;}
}
@media (max-width: 400px){
    .portada .block h3{ font-size: 1.8em; }
    .portada .block h4{font-size:15px;}
}
@media (max-width: 330px){
    .portada .block {margin-bottom: 160px;}
    .portada .block h3{ font-size: 1.6em; }
    .portada .block h4{font-size:14px;}
}
@media (max-width: 461px){
    .portada .block{ margin-top: 130px;}
}
@media (max-width: 290px){
    .portada .block h3{ font-size: 1.5em; }
}

/*----------responsive large----------*/
@media only screen and (min-width: 1921px ) and (max-width: 2600px){
    .portada{ height: 550px;}
    .portada .block{ margin: 18.5% 24% 0 24%;}
    .modal.in .modal-dialog{ width: 52%;}
}
@media only screen and (min-width: 1441px ) and (max-width: 1920px){
    .portada{ height: 450px;}
    .portada .block{ margin: 14% 24% 0 24%;}
    .modal.in .modal-dialog{ width: 62%;}
}
@media (max-width: 1093px){
    .portada .block{ margin: 17% 24% 0 24%;}
}
@media (max-width: 768px){.portada .block{ margin: 19% 24% 0 24%;}.portada .block h4{font-size:16px;} }
@media (max-width: 500px){
    .titulo-general{font-size: 25px; text-align: center;}
    .portada .block{ margin: 30% 20% 0 20%;}
}
@media (max-width: 375px){.portada .block{color:white; margin: 33% 20% 0 20%;}}
@media (max-width: 320px){.portada .block{margin: 38% 20% 0 20%;}}