@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


	/* ________________________________ */



.columnSuplemento {
  float: left;

}

.leftSuplemento {
  width: 71%;
	padding: 2%;
}

.rightSuplemento {
  width: 25%;
	text-align: center;
}

/* Clear floats after the columns */
.rowSuplemento:after {
  content: "";
  display: table;
  clear: both;
}
	
		
@media screen and (max-width: 600px) {
  .columnSuplemento {
    width: 100%;
  }
}		



@media (min-width: 768px) {





	

.recuadro {
    text-align: left;
	font-size: 13px;
	color: #4A4A4A;
	border-left-width: 8px;
	border-top-style: solid;
	border-top-width: 8px;
	padding-left: 10px;
	padding-top: 2px;
	border-left-color: #f78d1e;
	border-top-color: #f78d1e;
	border-left-style: solid;
    }

.menuSeccion {
    
	/* Alinea al centro vertical / align-items: center;*/      
	text-align: center;
      padding: 10px;
    }

    .menu-buttonSeccion {
      display: inline-block;
      padding: 0px 5px;
      margin: 0 5px;
    
      color: #333;
      text-decoration: none;
   
    }

.menu-buttonSeccion:hover {
  color: red;
}
	
	
	
.fecha {
    overflow: hidden;
	width: 100%;
	/* position: fixed; */
	
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif'; 
	color: #404040; 
	font-size: 16px;
	line-height: 1;
	text-align: center;
	background-color: white;
	height: 40px;
	margin-top: -10px;
	vertical-align: bottom;
    }
	
	.logotipo {
	margin-top: 10px;
	
	width: 100%;
	height: 150px;
	/* position: fixed; */

	overflow: hidden;
	text-align: center;
    }
	
	
.menu {
	padding: 0 0 20px 0;
  list-style-type: none;
	/* position: fixed; */
  margin: 0;	
	text-align: center;
	width: 100%;
	background-color: white;
	font-size: 18px;
}



.menu li {
  display: inline-block;

}

.menu li a {
  display: block;
padding: 10px;
  text-decoration: none;
	color: white;
	width: 100px;

}

.menu li a:hover {
  background-color: gray;
}
	
	
section {
  background-color: white;
	margin: 0 auto;
	margin-left: 10%; margin-right: 10%;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 1.5;
	text-align: justify;

}
	
	
section a {
text-decoration: none;
}
	
	
	section .titulo {
 font-family: 'Bree Serif', serif;
		font-size: 46px;
		line-height: 1;
		text-align: center;

}
	
		section .titulo2 {
 font-family: 'Bree Serif', serif;
		font-size: 40px;
		line-height: 1;
		text-align: center;

}

	
	section .titulo-secundario {
	
	font-size: 26px; 
	text-align: center;
	font-weight: bold;
	color: #636363;

}

	

.double-column {
      column-count: 2;
      column-gap: 30px;
    }

	
.triple-column {
      column-count: 3;
      column-gap: 20px;
    }
	
	.cuadruple-column {
      column-count: 4;
      column-gap: 20px;
    }
	
	

		
	
	
/* Used in this example to enable scrolling */
}



@media (max-width: 768px) {
 
	
.rowSuplemento {
    width: 100%;
  }

	

h2{
	font-size: 20px;
}

	
.menu {
	padding: 0px 0px 20px 0px;
  list-style-type: none;
	
  margin: 0;	
	text-align: center;
	width: 100%;
	background-color: #FFFFFF;
	font-size: 12px;
}



.menu li {
  display: inline-block;

}

.menu li a {
  display: block;
  text-decoration: none;
	color: white;
	width: 70px;
	padding-top: 10px;
	padding-bottom: 10px;
	


}

.menu li a:hover {
  background-color: gray;
}

	
	section {
  background-color: white;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;
		font-weight: 300;
		line-height: 1.5;

}

	section .titulo  {
 font-family: 'Bree Serif', serif;
		font-size: 28px;
		line-height: 1;
	

		
}
	
		section .titulo2 {
 font-family: 'Bree Serif', serif;
		font-size: 28px;
		line-height: 1;
	

		
}
	
	

	
	
	
	
	
	 .imageTXTwrap-container {
        float: none;
        margin: 0;
        text-align: center;
      }
	
	 .imageTXTwrap-delCampus {
        float: none;
        margin: 0;
        text-align: center;
      }
	



	

		

.recuadro {
    text-align: left;
	font-size: 13px;
	color: #4A4A4A;
	border-left-width: 8px;
	border-top-style: solid;
	border-top-width: 8px;
	padding-left: 10px;
	padding-top: 2px;
	border-left-color: #f78d1e;
	border-top-color: #f78d1e;
	border-left-style: solid;
    }

.menuSeccion {
    
	/* Alinea al centro vertical / align-items: center;*/      
	text-align: center;
      padding: 10px;
    }

    .menu-buttonSeccion {
      display: inline-block;
      padding: 0px 5px;
      margin: 0 5px;
    
      color: #333;
      text-decoration: none;
   
    }

.menu-buttonSeccion:hover {
  color: red;
}
	
		
		
		
		.fecha {
    overflow: hidden;
	width: 100%;
	/* position: fixed; */
	
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif'; 
	color: #404040; 
	font-size: 16px;
	line-height: 1;
	text-align: center;
	background-color: white;
	margin-top: -10px;
	vertical-align: bottom;
    }
		
		.logotipo {
	margin-top: 10px;
	
	width: 100%;
	height: 115px;
	/* position: fixed; */

	overflow: hidden;
	text-align: center;
    }
		
      .menuSeccion {
        flex-wrap: wrap;
		  
      }

      .menu-buttonSeccion {
        margin: 5px;
        flex-basis: 45%;
		  text-decoration: none;
      }
		
		
		
		section .titulo-secundario {
	
	font-size: 16px; 
	text-align: center;
	font-weight: bold;
	color: #636363;

}

		
		
		
    }


.imageTXTwrap-container {
      float: right;
      margin-left: 10px;
      margin-bottom: 10px;
    }

.imageTXTwrap-containerLEFT {
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    
    .imageTXTwrap-container img {
      max-width: 100%;
      height: auto;
    }


    .imageTXTwrap-containerLEFT img {
      max-width: 300px;
      height: auto;
    }

    
    .text-container {
      overflow: hidden;
    }

.text-containerScroll {
      height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 20px;
    }




.imageTXTwrap-delCampus {
      float: right;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    
    .imageTXTwrap-delCampus img {
      max-width: 100%;
      height: auto;
    }
    
    .text-delCampus {
      overflow: hidden;
    }

.text-delCampusScroll {
     height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 20px;
    }



.text-GerminalScroll {
     height: 800px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 20px;
    }











.pie-foto  {
        font-size: 12px;
	margin-top: -5px;
	margin-right: 10px;
	font-family: 'Bree Serif', serif;
	color: #646464;
}
	


section .periodista {
	
	border: 1px solid black;
	width: 210px;
	font-size: 12px;
	padding: 2px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left
	


}

section .fuente-foto {
	
	font-size: 12px; 
	font-style: italic;


}

section .subtitulo {
	
	font-size: 18px; 
	text-align: center;
	font-weight: bold;

}



/* página de créditos DEL CAMPUS */
    .bottom-bar {


      height: 60px;

      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }




#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: #870002;
	opacity: 0.8;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}









.fixed-icons {
      position: fixed;
      top: 80%;
      left: 0;
      transform: translateY(-50%);
      z-index: 999;
    
      padding: 10px;
    }
    
    .fixed-icons a {
      display: block;
      margin-bottom: 10px;
    }
    
    .fixed-icons img {
      width: 40px;
      height: 40px;
    }



.containerDelCampus {
	display: flex;
	height: 100%;
	 
        }



.containerExplanada {
	display: flex;
	height: 100%;
	 
        }






 .containerCriterios {
	display: flex;
	height: 650px;
	 
        }

.columnCriteriosZ {
	flex-basis: 50%;
    overflow-y: scroll;
	overflow-x: hidden;
	
	padding-right: 10px;
	padding-left: 20px;
			
        }



.columnCriteriosD {
	flex-basis: 50%;
    overflow-y: scroll;

	overflow-x: hidden;
	padding-left: 20px;
	padding-right: 10px;
	
        }


  @media (max-width: 768px) {
    .containerDelCampus {
    flex-direction: column;
	height: 100%;
		 }

	  .columnDelCampus   {
    flex-basis: 100%;
	overflow-y: hidden;
		overflow-x: hidden;
    padding-left: 10px;
	padding-right: 10px;
		
            }
	  
	  .containerExplanada {
    flex-direction: column;
	height: 100%;
		 }
	  
	  .columnExplanada   {
    flex-basis: 100%;
	overflow-y: hidden;
		overflow-x: hidden;
    padding-left: 10px;
	padding-right: 10px;
		
            }
	  
	  
	  .containerCriterios {
    flex-direction: column;
	height: 100%;
		 }

	.columnCriteriosZ   {
    flex-basis: 100%;
	overflow-y: hidden;
		overflow-x: hidden;
    padding-left: 10px;
	padding-right: 10px;
		margin-bottom: 15px;
			
            }
	  
	  
	 
	  
	.columnCriteriosD {
    flex-basis: 100%;
	overflow-y: hidden;
		overflow-x: hidden;
    padding-left: 10px;
	padding-right: 10px;
			
            }
	  
        }



@media (min-width: 768px) and (max-width: 1199px) {
      
section {
  background-color: white;
	margin: 0 auto;
	margin-left: 10%; margin-right: 10%;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 1.5;
	text-align: justify;

}	
	

.double-column {
      column-count: 1;
      
    }

	
.triple-column {
      column-count: 1;
     
    }

		.cuadruple-column {
      column-count: 1;
     
    }
	
	
      }




/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: auto; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}