@charset "UTF-8";
/* Estilos por página*/
/*Colores del proyecto*/
/*Estilos generales*/
body {
  font-family: "Roboto Flex", Arial, Helvetica, sans-serif; }

h1 {
  font-size: 5rem;
  text-align: center; }

h2 {
  text-align: center; }

p {
  padding: 1rem;
  text-align: center; }

.aside {
  background-color: #64a1f5;
  grid-area: aside;
  padding: 1rem 2rem; }

.navbar {
  background-color: #536175; }

/*Estilos footer*/
.pie {
  background-color: #4f7fc2;
  display: flex;
  justify-content: space-around;
  padding: 1rem 2rem; }

#facebook {
  background-color: aliceblue;
  height: 50px;
  transition: all 0.5s; }
  #facebook:hover {
    height: 75px; }

#youtube {
  height: 50px;
  transition: all 0.5s; }
  #youtube:hover {
    height: 75px; }

@media screen and (min-width: 768px) {
  /*Estilos página principal*/
  .principal {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "destacados aside"; }
  /*Estilos página colaboradores*/
  .colaboradores {
    background-color: #afcdf7;
    display: flex;
    margin: auto;
    width: 80%; } }

/*Estilos página principal*/
.encabezado {
  color: aliceblue;
  background-color: #304d75; }

.destacados {
  background-color: #afcdf7;
  grid-area: destacados;
  padding: 1rem 2rem; }

.img_main {
  border-radius: 2rem;
  filter: brightness(75%);
  display: block;
  margin: auto;
  width: 75%;
  transition: all 1s; }
  .img_main:hover {
    filter: brightness(100%);
    width: 100%; }

.video {
  margin: auto;
  display: flex; }

/*Estilos página colaboradores*/
.colaboradores {
  background-color: #afcdf7;
  margin: auto;
  width: 100%; }

.img_colab {
  border-radius: 1rem;
  display: block;
  filter: brightness(75%);
  margin: auto;
  width: 75%;
  transition: all 1s; }
  .img_colab:hover {
    filter: brightness(100%); }

/*Estilos formulario*/
.formulario {
  background-color: #afcdf7;
  display: block;
  margin: auto;
  width: 50%; }

/*Estilos nosotros*/
.img_nosotros {
  display: block;
  margin: auto;
  border-radius: 2%;
  filter: brightness(100%);
  width: 75%;
  transition: all 1s; }
  .img_nosotros:hover {
    filter: brightness(110%); }

/*Estilos proyecto*/
.img_proyecto {
  filter: blur(2px);
  width: 100%;
  transition: all 1s; }
  .img_proyecto:hover {
    filter: none; }