#main-cont{
    font-size:16px;
}
.sul-padding{
    padding-left:40px;
    padding-right:40px;
}
b {
    font-weight: bold;
}
.banner {
    min-height:150px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/placeholder.png);
    background-size:cover;
    background-position: 50% 50%;
}
.banner h1{   
    font-size:2em;
    text-transform: uppercase;
    color:#fff;
    font-weight: bold;
    text-align:center;
}
.breadcrumb{
    text-align:center;
    font-weight: bold;
    font-size:1em;
    text-transform: uppercase;
    margin:0.5em 0em 0.5em 0em;
    border-top:solid 2px #006937;
    border-bottom:solid 2px #006937;
    padding-top:0.75em;
    padding-bottom:0.55em;
}
.breadcrumb a{
    color:#000;
}
.breadcrumb a:visited{
    color:#000;
}
.breadcrumb a:hover{
    color:#006937;
}
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    width:70%; 
    margin-left:auto;
    margin-right:auto;
    gap:2em;
    box-sizing:border-box;
}
.section-button{
    display: flex;
    width: 100%;
	max-width: 900px;
    box-sizing:border-box;
    align-items: center;
    padding: 1em;
    background-color: #DCE3EB;
    justify-content: space-between;
    border-radius: 1em;
    color: #000;
    transition: background-color 500ms, color 500ms;
}
.section-button:hover{
    background-color:#006937;
    color:#fff;
}
.section-button h3{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
}
.section-button.centrado{
    margin: auto;
}
.service-icon{
    width:3em;
    margin-left:1em;
}
.content-cont{
    display: grid;
    grid-template-columns: 1fr 4fr;
    min-height: 50vh;
    column-gap: 1em;
}
.section-button.secondary{
    color:#000;
    width: calc(100% - 1em);
    margin-top:1em;
    margin-left:1em;
    box-sizing: border-box;
}
.section-button.secondary p{
    color:#006937;
    font-weight:bold;
    font-size:0.75em;
}
.section-button.secondary:hover{
	color:#fff;
}
.section-button.secondary:hover p{
	color:#fff;
}
.third-link {
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 1em;
    margin-top: 1em;
    display: flex;
    color: #006937;
    align-items: center;
    justify-content: space-between;
}
.third-link .icon{
    font-size:1.6em;
}
.fourth-link {
    font-weight: bold;
    margin-left: 1em;
    margin-top: 1em;
    display: flex;
    color: #000;
    align-items: center;
    justify-content: space-between;
    font-size:0.75em;
}
.fourth-link .icon {
    font-size:1.6em;
    color: #006937;
}
.fourth-link .vermas{
    font-size:1em;
    color:#006937;
    font-weight: bold;
}
.link-text{
    width:100%;
    padding-left:1em;
    padding-right:1em;
    font-weight:600;
}
.content {
    font-size:16px;
    line-height: 1.5em;
    padding-left:2em;
}
.content h1{
    color:#006937;
    font-weight: bold;
    font-size:1.25em;
    margin-bottom:1em;
}
.content p{
    margin-bottom:1em;
}
.content ul{
    margin-left:1em;
    margin-bottom:1em;
}
.content ul li::before  {
    content: "\2022";
    color: #006937;
    font-weight: bold;
    font-family: sans-serif;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
.content a{
    color:#006937;
}
.content .square-background{
    background-color:#DCE3EB;
    padding:0.5em 1em;
	width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
    width:fit-content;
    margin-top:2em;
}
h2.with-background{
    color:#006937;
    font-weight:bold;
    padding:0.5em;
    border-radius: 10px;
    background-color: #DCE3EB;
	width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
    width:fit-content;
    padding-right:2em;
    margin-bottom:1em;
}
a.with-background{
    color:#006937;
    font-weight:bold;
    padding:0.5em;
    border-radius: 10px;
    background-color: #DCE3EB;
	width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
    width:fit-content;
    margin-bottom:1em;
}
.destaque{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    background-color:#DCE3EB;
    padding:1em 1em;
    margin-top:2em;
}
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    max-width:750px;
	margin-left:auto;
	margin-right:auto;
    margin-bottom:2em;
  }
  .terceros-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:2em;
    margin-bottom:2em;
  }
  .terceros-grid a {
    padding: 0.5em 1em;
    color: #000;
    background-color: #DCE3EB;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    transition: background-color 500ms, color 500ms;
}
.terceros-grid a:hover{
    background-color: #006937;
    color:#fff;
}
.terceros-grid a:hover > .vermas{
        color:#fff;
}
.terceros-grid a .link-text{
    padding:0;
}
.terceros-grid a .vermas{
    text-align:center;
    font-size:0.75em;
    margin-top:0.5em;
    color:#000;
    transition:color 500ms;
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
.destaque img{
    width:8em;
margin-left:1em;
}
.month-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;

}
.contact-grid {
    display: grid;
    grid-template-columns: 2fr  1fr 1fr;
	width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
    width:fit-content;
    column-gap:0.5em;
    row-gap:1em;
    line-height:1em;
    margin-bottom:2em;
}
.uppercase{
    text-transform: uppercase;
}
.accordion-tab h2.with-background{
    width:auto;
}
.accordion-tab .vertoggle{
    font-size:0.75em;
    margin-left:1em;
}
.contact-grid .header{
    font-weight: bold;
    color:#006937;
}
.accordion-grid-cont{
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr 4fr;
    column-gap:1em;
    row-gap:1em;
    margin-bottom:1.5em;
    padding:1em;
    line-height:1em;
}
.static{
    border-radius: 0px !important;
}
.accordion-grid-cont .header {
    font-weight: bold;
    color:#006937;
    line-height: 1em;
}
.verde-sul{
    color:#006937;
    font-weight:bold;
}
.smaller{
    font-size:0.75em;
}
.document-link{
    color: #006937;
    display: flex;
	width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
    width: fit-content;
    align-items: center;
    line-height:1em;
    padding:1em;
}
.grid-cont{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}
.document-link .icon{
    font-size:1.5em;
}

.reco-mes {
    background-color: #DCE3EB;
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow:hidden;

}
.reco-mes span {
    padding:0.5em;
    color: #000;
    font-weight: bold;
}
.recomendaciones-sidebar .fourth-link {
    justify-content: left;
}
.recomendaciones-sidebar .fourth-link .link-text{
    width:auto;
}
.reco-mes span.mes{
    background-color:#c9d1d8;
    color:#006937;
}
.recomendaciones p {
    padding-left:2em;
}
.recomendaciones h1{
    color:#000;
}
.recomendaciones h2 {
    font-size: 1.15em;
    font-weight: bold;
    color: #006937;
    margin-bottom: 0.75em;
}
.recomendaciones p:before {
    color: #006937;
    content: '\e914';
    margin-left: -1em;
    font-size: 1.5em;
    width: 2em;
    display: block;
    position: absolute;
    font-family: 'icomoon' !important;
}
.maps-cont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom:2em;
}
.maps-cont img{
    width:100%;
}
.two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom:2em;
}
.cargos{
    text-align:left;
    background-color:#dce5ec;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:2em;
}
.cargos th{
    padding:1em;
    font-weight:600;
}
.cargos thead{
    background-color:#006937;
    font-weight: bold;
    color:#fff;
}
.cargos th.t-title{
    text-align:center;
    background-color:#dce5ec;
}
.cargos th.t-title h1{
    margin-bottom:0px;
}

/*LOGIN CSS*/
#main-cont form{
    text-align: center;
    width:100%;
    max-width: 600px;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    padding:0;
    display:flex;
    flex-direction: column;
    font-size: 16px;
    padding:0.5em;
    box-sizing: border-box;
}
#main-cont form h2{
    margin-bottom:1em;
}
#main-cont form input, #main-cont form select, #main-cont form textarea{
    box-sizing: border-box;
    width:100%;
    margin:0.75em 0em;
    padding:0.75em 1.5em;
    background: #E5E5E5;
    border-radius: 15px;
    border:none;
    font-size: 1em;
    font-family: 'Raleway', sans-serif;
    line-height: 1.5em;
}
#main-cont form input.invalid {
    background-color: #ffdddd;
}
#main-cont form .invalid {
    background-color: #ffdddd;
}
#main-cont form input:focus-visible, #main-cont form select:focus-visible, #main-cont form textarea:focus-visible{
    outline:solid 1px #006937; 
}
#main-cont form input[type=radio] {
    visibility: hidden;
    width:5px;
  }
#main-cont form label.radio {
  cursor: pointer;
  text-indent: 40px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  margin-right:2em;
  line-height: 35px;
}

#main-cont form label.radio:before {
  background: #C4C4C4;
  content:'';
  position: absolute;
  top:2px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}


#main-cont form input[type=radio]:checked + label:before {
	background:#006937;
}

.button{
    width:100%;
    /*padding:0.75em;
    border-radius: 15px;*/
	padding:0.70em;
    border-radius: 12px;
    background-color:#006937;
    color:#fff !important;
    font-weight: bold;
    margin:0.75em 0em;
    box-sizing: border-box;
    font-size: 1em;
    border:none;
    cursor: pointer;
}
.button.secondary{
    background-color:#008375;
}
a.forgot-password{
    color:#6C6C6C;
    font-weight: 600;
}
a.forgot-password:hover{
    color:#006937;
}
/****** register tabs ****************/
.tab {
    display: none;
    text-align: left;
}
#main-cont form .tab input, #main-cont form .tab select {
    margin:0.25em 0em 0.75em 0em;
}
#main-cont form .tab select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 50%;
    }
form .button-cont{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding:1em 2em;
    margin-top: 40px;
    gap: 1em;
}
form .button-cont .nextbtn-class{
    grid-column: 2/3;
    cursor: pointer;
}
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}
.step.active {
    opacity: 1;
    background-color: #006937;
}
.step.finish {
    background-color: #006937;
}
#confirmation {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #0069369f;
    display: none;
    z-index: 99999;
}

#confirmation .frame {
    text-align: center;
    background-color: #fff;
    display: inline-block;
    padding: 3em;
    border-radius: 15px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: rgb(0 0 0 / 30%) 0px 0px 12px;
}
/* CONTACT */
.contact-cont{
    display: grid;
    grid-template-columns: 3fr 2fr;
    min-height: 50vh;
    column-gap: 1em;
    text-align:left;
    padding:0;
}
.contact-cont .content{
    padding:2em;
    padding-bottom:150px;
}
.contact-cont .content h1{
    margin-top:1em;
}
.contact-cont form label{
    text-align:left;
}
.contact-cont form#contact-form {
    width:100%;
    max-width: unset;
}
.contact-cont form input {
    width:100%;
}
flex-row{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    gap:1em;
}
flex-row div{
    width:100%;
    text-align:left;
}
.contact-sidebar {
    background-color:#f5f5f5;
    padding-left:4em !important;
    
}

.contact-sidebar .icon {
    background-color: #006937;
    padding: 0.5em;
    border-radius: 1em;
    color: #fff;
    height:1em;
}
.contact-sidebar .dato{
    display:flex;
    gap:1em;
    margin-bottom:1.5em;
}
.contact-sidebar .dato p{
    align-self: center;
    margin-bottom:0;
}

/**************** DOCUMENTOS DE INTERES ***************/ 
.documents{
    margin-bottom: 2em;
}
.documents.small-cards {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    /*grid-auto-rows: 20em;*/
}
.documents.big-cards{

}
.documents .item{
    display: grid;
    grid-template-columns: 25% auto;
    grid-template-rows: 1fr 3.5em;
    gap: 0.5em;
    min-height: 165px;
    padding:1em;
    border: solid 1px #dce3eb;
    margin:1em;
    border-radius: 15px;
}
.documents .item:hover{
	background-color:#00693728;
}
.documents .item .download{
    font-weight: bold;
    color:#000;
}
.documents .item div .download  {
    color:#006937;
} 
.documents .item .icon{
    font-size:1.5em;
}
.documents .item .img-cont{
    width: 100%;
    height: 100%;  
   grid-column: 1;
   grid-row: 1/3;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: left center;
    border-radius: 5px;
}

.documents .item .costo {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0em 1em;
    font-size: 0.9em;
    line-height:1.5em;
    max-width: 15em;
    max-height: 3.5em;
}
.documents.big-cards .item{
 max-width:800px;
 grid-template-columns: 15em 1fr;
 grid-template-rows: auto;
 margin-bottom:2em;
}
.documents.big-cards .img-cont{
    background-position: top center;
    min-height:10em;
}
.documents.big-cards p {
    color:#000;
}
/**************** MISION VISION OBJETIVOS *******************/
.mision-vision-cont{
    display:grid;
    grid-template-columns: 50% 50%;
    margin-bottom:2em;
}
.mision-vision-cont .mision, .mision-vision-cont .vision {
    padding:2em;
    display:flex;
    background-color:#dce5ec;
    gap:1em;
}
.mision-vision-cont .mision{
    background-color:#006937;
    color:#fff;
}
.mision-vision-cont .mision h1{
    color:#fff;
}
.mision-vision-cont img{
    width:3em;
    height:3em;
    margin-top: -0.75em;
}
.objetivos{
    display:flex;
    background-color:#dce5ec;
    padding:0.5em;
    align-items: center;
    gap:1em;
    margin-bottom:2em;
}
.objetivos h1{
    margin-bottom:0;
}
.objetivos img{
    width:3em;
    width:3em;
}
.content ul.objetivos-list {
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0em 2em ;
    margin-bottom:3em;
}
.content ul.objetivos-list li {
    padding: 1em 2em 1em 3em;
    background-color: #dce5ec;
}
.content ul.objetivos-list li::before {
    content: "\ea10";
    color: #006937;
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    margin-left: -1.5em;
    margin-right: 0.5em;
}
.novedades h1{
    color:#006937;
    font-size:1.5em;
    font-weight: bold;
    margin-bottom:0.5em;
}
.novedades h2{
    color:#006937;
    font-size:1.25em;
    font-weight: bold;
    margin-bottom:0.5em;
}
.novedades h3{
    color:#000;
    font-size:1.25em;
    font-weight: 500;
    margin-bottom:0.5em;
}
.novedades a{
    font-weight: bold;
}
.novedades .text-center {
    text-align:center;
}

#proximas #listado-pro{
    display:grid;
    grid-template-columns: 1fr 4fr;
    padding:1em;
    border-bottom: solid 2px #006937;
}
#proximas #listado-pro .img-pro{
    grid-row:1/5;
  }
#proximas #listado-pro .text1-pro{
  grid-column:2/3;
}
#proximas #listado-pro .text2-pro{
    grid-column:2/3;
}
#proximas #listado-pro .text3-pro{
    grid-column:2/3;

}
#proximas #listado-pro .btn-pro{

    grid-column:2/3;
}
/********** revista sul **********/
.logos_revistas {
    width: 100%;
    height: fit-content;
}
.logos-revistas-cont{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1em;
    align-items: center;
    margin-bottom:1em;
}
#revistas .listado-rev-cat p{
    margin-bottom: 0;
}
#revistas{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2em;
}
#revistas .listado-rev-cat img{
    width:100%;
}
.botones_revistas {
    margin-top: 2em;
    margin-bottom: 2em;
}
#listado-rev2{
    display:grid;
    grid-template-columns: 1fr 4fr;
    gap: 1em;
    margin-bottom: 2em;
}

/*************** admin user **************/
#config-nav a{
    background-color: #006937;
    padding:0.5em 1em 0.5em 1em;
    border-radius: 15px;
    color:#fff;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#config-nav{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1em;
     max-width: 1100px;
     padding:1em;
     margin-left:auto;
     margin-right:auto;
}
#main-cont form.user-form {
    text-align:left;
}
#main-cont form.user-form h2 {
   margin-bottom:0em;
   margin-top:1em;
}
#main-cont form.user-form p {
    margin-bottom:0em;
 }

#main-cont form.user-form input[type=checkbox]{
    width: auto;
    display: inline-block;
}
.globos{
    padding:1em;
    margin:1em;
    border:solid 1px #006937;
    border-radius: 15px;
}

@media only screen and (max-width: 1200px) {
    .button-grid {
        width:100%; 
        
    }    
    .sul-padding{
        padding-left:20px;
        padding-right:20px;
    }
    #revistas{
        grid-template-columns: repeat(4, 1fr);
    }
    .documents .item {
        grid-template-columns: 33% auto;
    }
}
@media only screen and (max-width: 1100px) {
    .accordion-grid-cont {
        font-size: 0.75em;
    }
    .grid-cont{
        grid-template-columns: 1fr 1fr;
    }
    .terceros-grid{
        grid-template-columns: 1fr 1fr 1fr;
        gap:2em;
      }
      .contact-sidebar {
        padding-left: 2em !important;
    }
}
@media only screen and (max-width: 800px) {
.contact-cont{
    grid-template-columns: 1fr;
    padding-left:20px;
    padding-right:20px;
}
.documents.big-cards .item{
    grid-template-columns: 10em 1fr;
}
.contact-cont .content {
    padding-bottom: 50px;
}
.mision-vision-cont, .content ul.objetivos-list {
        grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 720px) {
    .button-grid {
        grid-template-columns: 1fr 1fr;        
    }
    #main-cont, .content{
        font-size:14px;
    }
    .content-cont {
        grid-template-columns: 1fr;
        padding-left:20px;
        padding-right:20px;
    }
    
    .content{
        padding-left:0;
    }
    .sidebar{
        grid-row: 2;
    }
    .contact-grid{
        font-size:0.75em;
    }
    .header{
        word-break: break-all;
    }
    .terceros-grid{
        grid-template-columns: 1fr 1fr ;
        gap:2em;
      }
      .maps-cont{
        grid-template-columns: 1fr;
    }
    .maps-cont img:nth-child(1) {
        display:none;
     }
     .two-col{
        grid-template-columns: 1fr;
    }
    #main-cont form{
        font-size: 14px;
    }
    #config-nav {
 
        grid-template-columns: repeat(2, 1fr);
        
    }
    #revistas{
        grid-template-columns: repeat(3, 1fr);
    }
    #listado-rev2{
        grid-template-columns: 1fr;
    }
    #listado-rev2 a{
        margin-left: auto;
        margin-right: auto;
    }
    .botones_revistas {
        margin-left: auto;
        margin-right: auto;
		width:-moz-fit-content; /*for Firefox 3+ and Firefox for Android 4+*/
        width: fit-content;
    }
}
@media only screen and (max-width: 480px) {
    .grid-cont{
        grid-template-columns: 1fr ;
    }
    .button-grid {
        grid-template-columns: 1fr;        
    }
    #main-cont, .content{
        font-size:12px;

    }
    .terceros-grid{
        grid-template-columns: 1fr ;
      }
      flex-row{
          flex-direction: column;
      }
      .documents.small-cards {
        
        grid-template-columns: 1fr;
    }
    .documents.big-cards .item{
        grid-template-columns: 1fr;
    }
    .logos-revistas-cont{
        grid-template-columns: repeat(3, 1fr);
    }
    #revistas{
        grid-template-columns: repeat(2, 1fr);
    }
}