body {
  margin: 10;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

div {
  color: white;
  font-size: 23px;
  text-decoration: none;
  line-height: 1,7;
}

h1 {
  color: white;
  text-align: center;
  font-size: 39px;
}

h2 {
  color: white;
  text-align: center;
  font-size: 33px;
}

h3 {
  color: white;
  text-align: center;
}
/* Navbar container */
.navbar {
  overflow: hidden;
  float: left;
  background-color: none;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: right;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #818181;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a green background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #818181;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

#cuerpo a:link, a:visited {
  background-color: #818181;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#cuerpo a:hover, a:active {
  background-color: #000000;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 22%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@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%;
  }
}
.gallery {
	display: flex;
	padding: 2px;
	transition: .3s;
	
	&:hover &__image {
		filter: grayscale(1);
	}
	
	&__column {
		display: flex;
		flex-direction: column;
		width: 25%;
	}
	
	&__link {
		margin: 2px;
		overflow: hidden;
		
		&:hover {
			.gallery__image {
				filter: grayscale(0);
			}
			
			.gallery__caption {
				opacity: 1;
			}
		}
	}
	
	&__thumb {
		position: relative;
	}
	
	&__image {
		display: block;
		width: 100%;
		transition: .3s;
		
		&:hover {
			transform: scale(1.1);
		}
	}
	
	&__caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Raleway', sans-serif;
		font-size: 16px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
		transition: .3s;
	}
}

video {
  width: 100%;
  float: left;
}