* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  
}
body {
  background-color: black;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--negro);
  /* opcional */
  line-height: 1.4em;
  /* opcional */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /* opcional */
  font-smooth: always;
  /* opcional */
  -webkit-font-smoothing: antialiased;
  /* opcional */
  -moz-osx-font-smoothing: grayscale;
  
  
}
hr{
  width: 100%;
  background-color: white;
  color: white;
  height: 1px;
}
a {
  text-decoration: none;
  color: white;
  display: block;
}
li {
  list-style-type: none;
}
/**********LOADING SCREEN**********/
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-weight: 300; 
  font-style: italic;
  font-size: 100px;
  margin: 0;
  padding: 0;
  background: black;
  color: white;
  min-height: 100vh;
}
.loading-screen, .cubo{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-loading{
  width: 20%;
  height: 300px;
  display: block;
  background-color: transparent;
}
.cubo{
  height: 30%;
  transform-style: preserve-3d;
  animation: rotar 8s linear infinite
}
.cubo >span{
  position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid white;
    box-shadow: inset 0px 0px 15px 5px rgba(67, 195, 255, .2),0px
    0px 40px 1px rgba(67, 195, 255, .15);
    border-radius: 4px; 
}
.cubo > span:nth-child(1){transform: rotateY(90deg)translateZ(.5em);}
.cubo > span:nth-child(2){transform: rotateY(90deg)translateZ(-.5em);}
.cubo > span:nth-child(3){transform: rotateY(90deg)translateZ(-.5em);}
.cubo > span:nth-child(4){transform: rotateY(90deg)translateZ(.5em);}
.cubo > span:nth-child(5){transform: translateZ(-.5em);}
.cubo > span:nth-child(6){transform: translateZ(.5em);}
@keyframes rotar {
    0% {transform: rotateY(0deg) rotateX(0deg);}
    50% {transform: rotateY(360deg) rotateX(360deg);}
    100% {transform: rotateY(0deg) rotateX(0deg);}
  }
/********HEADER*********/
.header {
  width: 100%;
  min-height: 2.5em;
  display: flex;
  padding: 3em 1em 2em 1em;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0; /* Añade esto */
  left: 0;
  background-color: black;
  z-index: 10;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-style: none;
}
.open-menu{
  display: flex;
  flex-direction: column;
  width: 2.25rem;
  height: 3rem;
  border: 0;
  background: transparent;
  gap: .65rem;
  display: none;
}
.open-menu div{
  background-color: white;
  height: 2px;
  width: 100%;
  border-radius: 5px;
  transition: all .5s;
  transform-origin: left;
}
.open-menu:hover div:first-child{
  transform: rotate(45deg);
}
.open-menu:hover div:nth-child(2){
  opacity: 0;
}
.open-menu:hover div:nth-child(3){
  transform: rotate(-45deg);
}
.bi-list {
  color: white;
}
header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1em;
}
header li {
  margin: 0 3em;
}
.titulo-filmmaker {
  font-size: 1.5em;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-style: none;
  padding-left: 5%;
}
header a {
  color: white;
}
header ul a:hover {
  transform: scale(1.3);
  transition: 0.1s;
}

/********MAIN*********/
.main {
  margin: 0 0 1em;
  margin-top: 7em;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.video-contenedor {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  overflow: hidden;
}
.video-contenedor iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section {
  width: 100%;
  min-height: 40vh;
  padding: 2em;
  margin: 1em 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.about-title{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  background-color: black;
  color: white;
  font-size: 1.5em;
  font-family: "Roboto Mono", monospace;
  font-style: none;
  padding-bottom: 0%;
}
.about-title h1{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height:100px;
  font-weight: 100;
  background-color: black;
}
#section-about{
  margin: 0;
  padding: 0;
  background-color: black;
  
}
.about {
  padding-top: 0;
  margin-top: 0;
  display: flex; /* Ajustar los elementos hijos como flexibles */
  justify-content: space-between; /* Espaciar los elementos hijos uniformemente */
}
section p {
  background-color: black;
  color: white;
  font-family: "Gruppo", sans-serif;
  padding-right: 10%;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 80;
  width: 50%; /* Dividir la anchura en dos partes iguales */
  margin: 0; /* Remover márgenes adicionales */
  margin-bottom: 60px;
}
.about-video {
  width: 100%;
  height: auto;
  margin: 0; /* Remover márgenes adicionales */
  background-color: none;
  padding: 12%;
  padding-top: 0;
}
/**************GALLERY*******************/
.gallery-title{
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  height: 100px;
  font-size: 1.5em;
  font-family: "Roboto Mono", monospace;
  font-style: none;
}
.gallery-title h1{
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  font-weight: 100;
}
.about-gallery{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: black;
  color: white;
  font-size: 1.5em;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-style: none;
  margin: 5%;
}
section .img-fluid {
  max-width: 100%;
  height: auto;
}
section .row {
  display: flex;
  flex-wrap: wrap;
}
.column img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px; /* Añade algo de espacio en la parte inferior de cada imagen */
}
.column {
  float: left;
  width: 25%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.sectionWork .a {
  max-height: 3em;
  padding-inline-start: 5px;
}
section .img {
  cursor: pointer;
  transition: all 0.5s ease;
  width: 100%;
  transition: transform 0.2s;
}
section .img:hover {
  transform: scale(0.95);
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.column {
  flex: 25%;
  padding: 5px;
  box-sizing: border-box; /* Para que el padding no aumente el ancho de las columnas */
}
.column img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.galeria {
  padding: 60px;
  display: none;
}
.lightbox .close{
  width: 2rem;
  height: 2rem;
}
/***********FOOTER***************/
.about-gallery{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: black;
  color: white;
  font-size: 1.5em;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-style: none;
  margin: 5%;
}
.contact-title{
  background-color: yellow;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.contact-title h1{
  background-color: black;
  width: 100%;
  height: 100px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 3em;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-style: none;
}
.footer {
  display: flex;
  background-color: black;
  height: 5em;
  color: white;
  font-family: "Raleway", sans-serif;
  align-items: center;
  justify-content: center;
}
.iconsContainer {
  display: flex;
  justify-content: center;
  width: 33%;
  height: 90%;
  align-items: center;
}
.footer .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  height: 100%;
  margin: 0 10px;
}
.youtube{
 background-color: black;
  width: 100%;
  height:auto ;
}
.youtube img{
  width: 100%;
  background-color: white;
}
.footer .icon svg {
  width: 1.5em; /* Puedes ajustar este valor según tus necesidades */
  height: 1.5em
}
.grid {
  width: 90%;
  max-width: 56.25rem;
  margin: 2rem auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); 
  gap: 1rem;
}
.grid .img {
  box-shadow: 0.2rem 0.2rem 0.5rem #474040, -0.2rem -0.2rem 0.5rem #5f5656;
  cursor: pointer;
  transition: all 0.5s ease;
  width: 100%;
  transition: transform 0.2s;
}
.grid .img:hover {
  transform: scale(0.95);
}
.grid .img:active {
  transform: scale(1.1);
}
.mail{
  opacity: 1;
}
.vimeo{
  fill: white;  
}
.lightbox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2rem);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
}
.lightbox.isActive {
  opacity: 1;
  pointer-events: auto;
}
.lightbox .close {
  width: 2rem;
  color: black;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-bottom: 0;
  border-radius: 5px;
}
.lightbox .close:hover {
  transform: scale(0.95);
}
.lightbox .close:active {
  transform: scale(1.1);
}
.lightbox .grande {
  width: auto;
  max-width: auto;
  height: 70vh;
  background-color: white;
}
 /*FORMULARIO*/
 #divForm{
  background-color: black;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0px;
  padding: 45px;  
  color: white; 
  transition: height 0.5s ease; 
  font-family: "Roboto Mono", monospace; 
 }
 .divForm label {
    display: block;
    margin: 4px;
    border-color: white; 
 }
 .divForm input{
    border: none; /* Elimina todos los bordes */
    border-bottom: 1px solid white; /* Establece solo el borde inferior con color blanco */
    background-color:black;
    outline: none; /* Elimina el contorno predeterminado */
    color: white; /* Cambia el color del texto a blanco */
    padding: 5px; /* Añade relleno alrededor del texto*/
 }
 button{
   display: block;
   margin-top: 10px;
   width: 20%;
   height: 20px;
   background-color: yellow(89, 105, 120);
   border-radius: 2px;
   color: black;
   font-family: "Roboto Mono", monospace;
   font-weight: 600;
 }
 #btn-mail{
   opacity: 0;
 }
/*///////////////////////////////////////////////////////////////////////////////////*/
                            /* Estilo para MOVIL */
/*///////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 576px) {
  .loading-screen {
    max-width:576px ;
    font-size: 30px;
    text-align: left;
  }
  .cubo >span{
    position: absolute;
      width: 2em;
      height: 2em;
      border: 1px solid white;
      box-shadow: inset 0px 0px 15px 5px rgba(67, 195, 255, .2),0px
      0px 40px 1px rgba(67, 195, 255, .15);
      border-radius: 4px; 
  }
  .cubo > span:nth-child(1){transform: rotateY(90deg)translateZ(1em);}
  .cubo > span:nth-child(2){transform: rotateY(90deg)translateZ(-1em);}
  .cubo > span:nth-child(3){transform: rotateY(90deg)translateZ(-1em);}
  .cubo > span:nth-child(4){transform: rotateY(90deg)translateZ(1em);}
  .cubo > span:nth-child(5){transform: translateZ(1em);}
  .cubo > span:nth-child(6){transform: translateZ(-1em);}
  @keyframes rotar {
      0% {transform: rotateY(0deg) rotateX(0deg);}
      50% {transform: rotateY(360deg) rotateX(360deg);}
      100% {transform: rotateY(0deg) rotateX(0deg);}
    }
  .column {
    flex: 50%; /* Cambia a dos columnas en vez de cuatro */
  }
  .about p{
    width: 100%;
    padding: 10%;
  }
   /* Esto ocultará el video*/
  .about-video{
    display: none;
  }
  /* Esto ocultará las columnas seleccionadas */
  .galeria .column:nth-child(3),
  .galeria .column:nth-child(4) {
    display: none;
  }
  header {
    height: 60px;
    max-width: 576;
    font-size: 30%;
    width: 100%;
  }
  header a {
    font-size: 2em;
    color: white;
    font-family: "Gruppo", sans-serif;
  }
  header ul {
    justify-content: center;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    align-items: center;
    overflow-y: auto; /*Coloca una barra de scroll*/
    opacity: 0;
    pointer-events: none;
  }
  header li {
    height: 60%;
    width: 80%;
    margin: 0;
    padding: 0;
  }
  li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: auto;
    font-size: 1.2rem;
  }
  h1 {
    max-height: 100%;
    width: auto;
  }
  h1 a {
    max-height: 100%;
    width: auto;
  }
  .titulo-filmmaker{
    padding-inline-start: 1%;
    padding-inline-end: 0;
    margin-right: 0;
    font-size: 3.5em;
    font-family: "Roboto Mono", monospace;
    font-weight: 300; /* Ajusta el peso a 300 (ligero) */
  }
  .open-menu{/*Refiere al boton hamburguesa*/
    margin: 2%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    width: 2.1rem;
    height: 2.3em;
    border: 0;
    background: transparent;
    gap: .65rem;
    z-index: 2;
  }
  .ulmenu{
    z-index: 19;
  }
  .li-inicio{
    width: 100%;
    z-index: 20;
    background-color: transparent;
    margin: 0;
    padding: 0;
  }
  .a-inicio-transparente{
    height: 60px;
    background-color: transparent;
    margin: 0;
    padding: 0;
  }
  .a-inicio{
    z-index: 21;
    background-color: black;
    width: 100%;
    height: 180px;
  }
  
  .li-gallery{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-gallery{
    margin: 0;
    padding: 0;
  }
  .li-about{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-about{
    margin: 0;
    padding: 0;
  }
  .li-contact{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-contact{
    margin: 0;
    padding: 0;
  }
  .open-menu div{
    background-color: white;
    height: 2px;
    width: 100%;
    border-radius: 5px;
    transition: all .5s;
    transform-origin: left;
    z-index: 20;
  }
  /*BOTON HAMBURGUESA*/
  .open-menu:hover div:first-child{
    transform: rotate(45deg);
  }
  .open-menu:hover div:nth-child(2){
    opacity: 0;
  }
  .open-menu:hover div:nth-child(3){
    transform: rotate(-45deg);
  }
  .menu_opened {
    opacity: 1;
    pointer-events: all;
    background-color: transparent;
    z-index: 18;
  }
  li a {
    z-index: 1001;
  }
  .about-title{
    font-size: 1em;
  }
.about{
  height: 60%;
  }
.section-about{
    height: 300px;
    padding: 0%;
    margin-top: 0%;
    background-color: wheat;
  }
 #about{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    text-align: center;
    padding-top: 0px;
  }
  .lightbox.isActive {
  width: 100%;
  }
  .lightbox .grande {
    width: 100%;
    height: auto;
    background-color: white;
  }
  .divFomr{
    width: 100%;
  }
}
.gallery-title{
  margin-top: 30px;
  font-size: 1em;
}

.contact-title{
  font-size: .70em;
}

/*//////////////////////////////////////////////////////////////////////////////////////*/
                                /*///////////TABLET//////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 577px) and (max-width: 768px) {

  .loading-screen {
    max-width: 768px;
    width: 100%;
    font-size: 30px;
  }
 .cubo >span{
    position: absolute;
      width: 2em;
      height: 2em;
      border: 1px solid white;
      box-shadow: inset 0px 0px 15px 5px rgba(67, 195, 255, .2),0px
      0px 40px 1px rgba(67, 195, 255, .15);
      border-radius: 4px; 
  }
  .cubo > span:nth-child(1){transform: rotateY(90deg)translateZ(1em);}
  .cubo > span:nth-child(2){transform: rotateY(90deg)translateZ(-1em);}
  .cubo > span:nth-child(3){transform: rotateY(90deg)translateZ(-1em);}
  .cubo > span:nth-child(4){transform: rotateY(90deg)translateZ(1em);}
  .cubo > span:nth-child(5){transform: translateZ(1em);}
  .cubo > span:nth-child(6){transform: translateZ(-1em);}
  @keyframes rotar {
      0% {transform: rotateY(0deg) rotateX(0deg);}
      50% {transform: rotateY(360deg) rotateX(360deg);}
      100% {transform: rotateY(0deg) rotateX(0deg);}
    }
  .column {
    flex: 50%; /* Cambia a dos columnas en vez de cuatro */
  }
  .about p{
    width: 100%;
    padding: 10%;
  }
   /* Esto ocultará el video*/
  .about-video{
    display: none;
  }
  /* Esto ocultará las columnas seleccionadas */
  .galeria .column:nth-child(3),
  .galeria .column:nth-child(4) {
    display: none;
  }
  header {
    height: 60px;
    font-size: 30%;
    padding:125px;
  }
  header a {
    font-size: 2em;
    color: white;
    font-family: "Gruppo", sans-serif;
  }
  header ul {
    justify-content: center;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    align-items: center;
    overflow-y: auto; /*Coloca una barra de scroll*/
    opacity: 0;
    pointer-events: none;
  }
  header li {
    height: 60%;
    width: 80%;
    margin: 0;
    padding: 0;
  }
  li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: auto;
    font-size: 1.2rem;
  }
  h1 {
    max-height: 100%;
    width: auto;
  }
  h1 a {
    max-height: 100%;
    width: auto;
  }
  .titulo-filmmaker{
    padding-inline-start: 3%;
    font-size: 3.5em;
    font-family: "Roboto Mono", monospace;
    font-weight: 300; /* Ajusta el peso a 300 (ligero) */
  }
  .open-menu{/*Refiere al boton hamburguesa*/
    margin: 2%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    width: 2.1rem;
    height: 2.3em;
    border: 0;
    background: transparent;
    gap: .65rem;
    z-index: 2;
  }
  .ulmenu{
    z-index: 19;
  }
  .li-inicio{
    width: 100%;
    z-index: 20;
    background-color: transparent;
    margin: 0;
    padding: 0;
  }
  .a-inicio-transparente{
    height: 60px;
    background-color: transparent;
    margin: 0;
    padding: 0;
  }
  .a-inicio{
    z-index: 21;
    background-color: black;
    width: 100%;
    height: 180px;
  }
  
  .li-gallery{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-gallery{
    margin: 0;
    padding: 0;
  }
  .li-about{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-about{
    margin: 0;
    padding: 0;
  }
  .li-contact{
    background-color: black;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .a-contact{
    margin: 0;
    padding: 0;
  }
  .open-menu div{
    background-color: white;
    height: 2px;
    width: 100%;
    border-radius: 5px;
    transition: all .5s;
    transform-origin: left;
    z-index: 20;
  }
  /*BOTON HAMBURGUESA*/
  .open-menu:hover div:first-child{
    transform: rotate(45deg);
  }
  .open-menu:hover div:nth-child(2){
    opacity: 0;
  }
  .open-menu:hover div:nth-child(3){
    transform: rotate(-45deg);
  }
  .menu_opened {
    opacity: 1;
    pointer-events: all;
    background-color: transparent;
    z-index: 18;
  }
  li a {
    z-index: 1001;
  }
  .about-title{
    font-size: 1em;
  }
.about{
  height: 60%;
  }
.section-about{
    height: 300px;
    padding: 0%;
    margin-top: 0%;
    background-color: wheat;
  }
 #about{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    text-align: center;
    padding-top: 0px;
  }
  .lightbox.isActive {
  width: 100%;
  }
  .lightbox .grande {
    width: 100%;
    height: auto;
    background-color: white;
  }
  .lightbox .close{
    width: 2rem;
    height: 2rem;
  }
 
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
                            /*ESTILOS PARA PC*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 769px) and (max-width: 992px) {
  .loading-screen {
    max-width: 992px;
    font-size: 60px;
  }
  .column {
    flex: 50%; /* Cambia a dos columnas en lugar de cuatro */
  }
  /* Esto ocultará las columnas seleccionadas */
  .galeria .column:nth-child(3),
  .galeria .column:nth-child(4) {
    display: none;
  }
  header {
    height: 100px;
    font-size: 50%;
  }
  header a {
    font-size: 2em;
    color: white;
    font-family: "Gruppo", sans-serif;
  }
  
  header li {
    height: 30%;
    width: 80%;
    margin-top: 1rem;
  }
  .titulo-filmmaker{
    padding-inline-start: 3%;
    font-size: 2.5em;
    font-family: "Roboto Mono", monospace;
    font-weight: 300; /* Ajusta a 300 (ligero) */
  }
  li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: auto;
    font-size: 1rem;
  }
  h1 {
    max-height: 100%;
    width: auto;
  }
  h1 a {
    max-height: 100%;
    width: auto;
  }
  .open-menu {
    background-color: black;
    color: white;
    width: 50px;
    height: 50px;
    padding: 0px;
    display: block;
  }
  .close-menu {
    background-color: black;
    color: white;
    width: 60px;
    height: 60px;
    display: block;
    align-self: flex-end;
    margin-top: 18px;
    margin-right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 15px;
    margin-bottom: 0px;
  }
  .menu_opened {
    opacity: 1;
    pointer-events: all;
  }
  .about-title{
    padding: 5%;
  }
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 350px;
    padding-top: 0;
    margin-top: 0;
  }
  .about-video{
    display: none;
  }
  .about p{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 80%;
   text-align: center;
   padding-left: 10%;
   padding-right: 10%;
   margin-top: 0%;
   padding-top: 0;
   background-color: black;
  }
  .iconsContainer{
    max-width: 20%;
  }
}

/*///////////////////////////////////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 993px) {
  .iconsContainer{
    max-width: 20%;
  }
}