.fondo{
		background-color: lightblue;
		color:white;
	}
	.fondo2{
		background-color: lightgray;
		color:white;
	}
	.fondo3{
		background-color: green;
		color:white;
	}

/*menu*/
.menu{
  
  background-color: #00327e;
}
.menu a{
  color:#fff !important;
  font-weight: 400;
  font-family: "roboto";
}

/*Masonry*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 33.3%;
  padding: 0 0.5rem;
}

.column img {
  /*margin-top: 8px;*/
  vertical-align: middle;
  width: 100%;
  filter: grayscale(1) brightness(0.5);
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s linear;
}
.column img:hover {
  filter: grayscale(0);
}
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
  .column img {
    filter: grayscale(0) brightness(1);
  }
}



footer.page-footer {
    bottom: 0;
    color: #fff;
}

.font-small {
    font-size: .9rem;
}

.blue {
    background-color: #2196f3 !important;
}

.page-footer a{
	color:#fff;
}



/*Cabecera*/

.cabecera{
	background-image: url('../img/cabecera.jpg'); 
	height: 300px;
	margin-bottom: 2rem;
}

.mascara{
	background-color: rgba(0, 0, 0, 0.6); 
	height: 300px;
}

/*Textos*/

.piedefoto{
	text-align: center;
	font-size: 16px;
	padding:1rem 1.5rem 0 1.5rem;
  font-family: "roboto";
  color:#626262; 
}


/*iconos redes*/

.facebook{
  background: url(../img/iconos/facebook.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.youtube{
  background: url(../img/iconos/youtube.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.instagram{
  background: url(../img/iconos/instagram.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.linkedin{
  background: url(../img/iconos/linkedin.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.twitter{
  background: url(../img/iconos/twitter.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.tiktok{
  background: url(../img/iconos/tiktok.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.pinterest{
  background: url(../img/iconos/pinterest.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.vimeo{
  background: url(../img/iconos/vimeo.svg) center center no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-size: 100% 100%;
  margin-right: 1rem;
}

.sm-icons {
  flex-direction: row;
}
@media only screen and (max-width: 960px) {
  .sm-icons .nav-item {
    padding-right: 1em;
  }
}