:root 
{
  --header-font-size: 30px; /* Default font size */
  --body-font-size: 16px;
  --contact-font-size: 16px;
  --footer-brand-width: 0px;
}

@font-face {
	font-family: 'Dazzle Unicase Bold';
	src: url('Fonts/Dazzle Unicase Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

body 
{
	font-family: "Amiko", sans-serif;
	font-weight: 700;
	font-style: normal;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	color: #000000;
	position: relative;
  width: 100vw;
  overflow-x: hidden;
}

.hamburguer {
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

.hamburguer svg {
	margin: 0.5% 0;
	transition: transform 0.3s ease;
	width: 50%;
}

.rotado1 {
	transform: rotate(45deg) translateY(6px) translateX(3px);
	transform-origin: center;
}

.rotado2 {
	transform: rotate(-45deg) translateY(-6px) translateX(3px);
	transform-origin: center;
}

.movido {
	transform: translateY(250px);
}

.menu-list {
	list-style: none;
	margin-top: 20%;
	padding-left: 0px;
	margin-left: -25px;
	display: none;
	flex-direction: column;
	align-items: center;
}

.menu-list li {
	margin: 8% 10%;
	width: 50px;
}

.menu-list a {
	text-decoration: none;
}

.menu-list a img {
	width: 55%;
}

.menu-list.open {
	display: flex;
	align-items: center;
}

.navbar {
	position: fixed;
	right: 2%;
	z-index: 1000;
	top: 6%;
}

.navbar img {
	width: 70%;
}

/*CONTACT US-------------------------------------------------------------------------------------------------------------------*/
.contactus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10vw;
	height: 10vw;
	position: fixed;
	bottom: 0%;
	right: 0%;
	background-color: #000000;
	text-align: center;
	transition: transform 0.2s ease, width 0.2s ease; /* Añade transición al padding */
}
.contactus h4 
{
  font-size: var(--contact-font-size);
}
.contactus #main-text {
  display: inline-block;
}
.contactus #hover-text {
  display: none;
}
.contactus:hover 
{
    padding-top: 0%; /* Reduce el padding superior */
    width: 20vw;
  
    cursor: pointer;
}
.contactus:hover #main-text {
  display: none;
}
.contactus:hover #hover-text {
  display: inline-block;
}

h4 {
	color: #f4f4f4;
	font-size: 24px;
	font-weight: 700;
	margin: 0%;
}

p {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
}

h3 {
	font-family: 'Dazzle Unicase Bold', sans-serif;
	padding-left: 5%;
	font-size: 3rem;
	margin-top: 0%;
	line-height: 1;
}

.popup {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}



.close-popup {
    color: #aaa;
    float: right;
	margin: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close-popup:hover,
.close-popup:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#contact-form textarea {
    display: block;
    width: 90%;
	height: 20%;
    margin-bottom: 10px;
}

#contact-form label,
#contact-form input {
    display: block;
    width: 90%;
    margin-bottom: 10px;
}

#contact-form input,
#contact-form textarea {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
	background-color: #f4f4f4;
}

.popup-content {
    background-color: #f4f4f4;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding-bottom: 0; /* Elimina el padding inferior */
}

.form-container {
    padding: 20px; /* Aplica padding solo al contenedor del formulario */
}

.submit-button {
    padding: 20px 0;
    background-color: #000;
    border: none;
    cursor: pointer;
    width: 100%;
    margin: 0; /* Elimina los márgenes */
    display: block;
    color: #f4f4f4;
    font-size: 24px;
    font-family: "Amiko", sans-serif;
    font-weight: 700;
    transition: transform 0.2s ease, padding 0.2s ease; /* Añade transición al padding */
}

.submit-button:hover {
    padding-top: 15px; /* Reduce el padding superior */
    padding-bottom: 25px; /* Aumenta el padding inferior */
}

h2{
	font-family: 'Dazzle Unicase Bold', sans-serif;
	font-size: 2rem;
}

/* Estilo para el campo de Name */
#name:focus {
    border-color: #ff8961;
    outline: none; /* Elimina el borde de enfoque predeterminado */
	border-width: 2px; 
}

/* Estilo para el campo de Email */
#email:focus {
    border-color: #42d78e;
    outline: none;
	border-width: 2px; 
}

/* Estilo para el campo de Message */
#message:focus {
    border-color: #896492;
    outline: none;
	border-width: 2px; 
}



/*landing*/
h5{
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	
}

/*LANDING-------------------------------------------------------------------------------------------------*/
  
/*GRID----------*/ 
.parent 
{
	display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 10vw repeat(14, minmax(0, 1fr)) 10vw;
  grid-template-rows: 7vh repeat(8, minmax(0, 1fr)) 2vh;
  margin-left: auto;
  margin-right: auto;
}

.div1  /*MUCHO GAMES LOGO*/
{
	grid-area: 2 / 2 / 6 / 12;
  display: flex;
  align-self: stretch;
  justify-content: flex-start;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
}
.div1 img 
{
	width: 95%;
  justify-self: left;
  object-fit: contain;
}

.div2 /*MACACO MUCHO*/
{
	grid-area: 2 / 11 / 9 / 16;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
}
.div2 img 
{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.div7 /*NICE PEPOLE GOOD STUFF & BODY*/
{ 
  grid-area: 6 / 2 / 8 / 9;
  display: grid;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
}
.div7 h5
{
  margin: 0px;
  font-size: calc(var(--body-font-size)* 1.5);
}
.div7 p
{
  text-align: left;
  font-size: var(--body-font-size);
  margin: 0px;
  margin-top: -8%;
}

.div3 /*Arrow*/
{
  grid-area: 8 / 8 / 9 / 10;
  display: grid;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  align-items: center;
}
.div3 img 
{
	height: 30%;
  object-fit: contain;
}

/*SHAPES LANDING*/
#orange1
{
  position: relative;
  transform: scale(1);
  margin-top: 40%;
  margin-left: 40%;
  width: 100%;
}
#green1 
{
  position: relative;
  transform: scale(1);
  margin-top: 900%;
  margin-left: 850%;
  width: 200%;
}
#purpledot
{
  position: relative;
  width: 162%;
  margin-left: 781%;
  margin-top: 470%;
  transform: rotate(307deg);
  z-index: -1;
}
#purple1 
{
  position: relative;
  margin-top: 500%;
  margin-left: 720%;
  transform: rotate(327deg);
  width: 120%;
  z-index: 2;
}

 @-webkit-keyframes animationorange1 {
    0% {
      stroke-dashoffset: 340.0337829589844px;
      stroke-dasharray: 340.0337829589844px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 340.0337829589844px;
    }

    100% {
        stroke-dashoffset: 340.0337829589844px;
        stroke-dasharray: 340.0337829589844px;
      }
  }
  
  @keyframes animationorange1 {
    0% {
      stroke-dashoffset: 340.0337829589844px;
      stroke-dasharray: 340.0337829589844px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 340.0337829589844px;
    }

    100% {
        stroke-dashoffset: 340.0337829589844px;
        stroke-dasharray: 340.0337829589844px;
      }
  }
  
  #orange1 {
    -webkit-animation: aanimationorange1 4s ease-in-out 0.7s infinite both;
            animation: animationorange1 4s ease-in-out 0.7s infinite both;
	        z-index: 1;
  }

  

@-webkit-keyframes animationgreen1 {
	0% {
		stroke-dashoffset: 452.06768798828125px;
		stroke-dasharray: 452.06768798828125px;
	}
	50% {
		stroke-dashoffset: 0;
		stroke-dasharray: 452.06768798828125px;
	}
	100% {
		stroke-dashoffset: 452.06768798828125px;
		stroke-dasharray: 452.06768798828125px;
	}
}

@keyframes animationgreen1 {
	0% {
		stroke-dashoffset: 452.06768798828125px;
		stroke-dasharray: 452.06768798828125px;
	}
	50% {
		stroke-dashoffset: 0;
		stroke-dasharray: 452.06768798828125px;
	}
	100% {
		stroke-dashoffset: 452.06768798828125px;
		stroke-dasharray: 452.06768798828125px;
	}
}

#green1 {
	-webkit-animation: animationgreen1 3s ease-in-out 0.2s infinite both;
	animation: animationgreen1 3s ease-in-out 0.2s infinite both;
	position: relative;
	z-index: -1;
}


 @-webkit-keyframes animationpurple1 {
    0% {
      stroke-dashoffset: 571.5344848632812px;
      stroke-dasharray: 571.5344848632812px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 571.5344848632812px;
    }

    100% {
        stroke-dashoffset: 571.5344848632812px;
        stroke-dasharray: 571.5344848632812px;
      }
  }
  
  @keyframes animationpurple1 {
    0% {
      stroke-dashoffset: 571.5344848632812px;
      stroke-dasharray: 571.5344848632812px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 571.5344848632812px;
    }

    100% {
        stroke-dashoffset: 571.5344848632812px;
        stroke-dasharray: 571.5344848632812px;
      }
  }

#purple1 
{
    -webkit-animation: animationpurple1 3.5s ease-in-out 0s infinite both;
            animation: animationpurple1 3.5s ease-in-out 0s infinite both;
}


/*{}

/*toast*/

.isotipo {
	position: fixed;
	left: -20%;
	top: 6%;
	transform: scale(0.8);
	z-index: 1000;
	transition: left 0.5s;
	cursor: pointer;
  }

/*TOAST IT UP-------------------------------------------------------------------------------------------------*/
  
/*GRID----------*/ 
.toast 
{
  margin-top: 10vh;

	display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  grid-template-columns: 10vw repeat(14, minmax(0, 1fr)) 10vw;
  grid-template-rows: 2vh repeat(11, minmax(0, 1fr)) 2vh;
  margin-left: auto;
  margin-right: auto;
}
  
.toast1 /*LOGO*/
{ 
  grid-area: 2 / 6 / 5 / 10;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  /*background: saddlebrown;*/
}
.toast1 img
{ 
  align-self: center;
  width: 85%;
  height: auto;
  margin: 0px;
}

.toast2 /*Trailer vertical video*/
{ 
  grid-area: 2 / 10 / 8 / 15;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  /*background: slateblue;*/
}
.toast2 video
{ 
  object-fit: cover;
}

.toast7 /*Pitch Text*/
{
  grid-area: 5 / 3 / 7 / 10;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
 /* background: khaki;*/
}
.toast7 p 
{
    text-align: right;
    padding-right: 6%;
    margin: auto;
    height: auto;

    font-size: var(--body-font-size);
}

.toast3 /*Banner Image*/
{ 
  grid-area: 7 / 2 / 10 / 10;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  /*background: hotpink;*/
}
.toast3 img 
{
  object-fit: cover;
}

.toast4 /*Game of the day*/
{ 
  grid-area: 8 / 10 / 12 / 14;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  flex-direction: column;
  /*background: saddlebrown;*/
}
.toast4 p 
{
  margin-left: 6%;

  font-size: var(--body-font-size);
}
.toast4 h3 
{
  margin-top: 10%;
  font-size: calc(var(--header-font-size) * 1.5);
}
/*.appleGameOfTheDay
{
  position: relative;
  top: -40px;
  left: 470px;
}*/
.viewmore 
{
  width: 80%;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: black;
  margin-left: 6%;

  font-size: calc(var(--body-font-size) * 1.2);
}
.arrow-viewmore 
{
  margin-left: 40px;
  height: 80%;
  transform: scale(0.8) translateX(-100%);
  transition: transform 0.5s;
  overflow: hidden;
  align-items: center;
  display: flex;
}
.arrow-viewmore svg 
{
  object-fit: contain;
  height: 100%;
}

.toast5 /*Skins video*/
{ 
  grid-area: 10 / 6 / 13 / 10;
  display: flex;
  align-self: stretch;
  justify-content: center;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  background: lightsalmon;
}
.toast5 video 
{
  object-fit: cover;
}

.mobile-text{
  display: none;
}

.toast2 video, .toast3 img, .toast4 img, .toast5 video, .toast6 img {
    height:100%; /* Asegúrate de que la imagen ocupe todo el espacio en altura */
    width: 100%; /* Asegúrate de que la imagen no se desborde horizontalmente */
	
}

  
  .viewmore:hover svg {
	animation: moveArrow 1s linear infinite;
  }
  
  @keyframes moveArrow {
	0% {
	  transform: translateX(-100%) scale(0.8);
	}
	50% {
	  transform: translateX(100%) scale(0.8);
	}
	100% {
	  transform: translateX(-100%) scale(0.8);
	}
  }


  
  @-webkit-keyframes animationorange2 {
    0% {
      stroke-dashoffset: 260.1396484375px;
      stroke-dasharray: 260.1396484375px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 260.1396484375px;
    }

    100% {
        stroke-dashoffset: 260.1396484375px;
        stroke-dasharray: 260.1396484375px;
      }
  }
  
  @keyframes animationorange2 {
    0% {
      stroke-dashoffset: 260.1396484375px;
      stroke-dasharray: 260.1396484375px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 260.1396484375px;
    }

    100% {
        stroke-dashoffset: 260.1396484375px;
        stroke-dasharray: 260.1396484375px;
      }
  }


  #orange2{
	-webkit-animation: animationorange2 3s ease-in-out 0.3s infinite both;
            animation: animationorange2 3s ease-in-out 0.3s infinite both;
	position: absolute;
    margin-top: 4%;
	margin-left: 70%;
	width: 11%;
	z-index: 2;
  }

  @-webkit-keyframes animatiogreen2 {
    0% {
      stroke-dashoffset: 448.0412292480469px;
      stroke-dasharray: 448.0412292480469px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 448.0412292480469px;
    }

    100% {
        stroke-dashoffset: 448.0412292480469px;
        stroke-dasharray: 448.0412292480469px;
      }
  }
  
  @keyframes animatiogreen2 {
    0% {
      stroke-dashoffset: 448.0412292480469px;
      stroke-dasharray: 448.0412292480469px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 448.0412292480469px;
    }

    100% {
        stroke-dashoffset: 448.0412292480469px;
        stroke-dasharray: 448.0412292480469px;
      }
  }


  #green2{
	-webkit-animation: animatiogreen2 3.5s ease-in-out 1s infinite both;
            animation: animatiogreen2 3.5s ease-in-out 1s infinite both;
	position: absolute;
	margin-top: 28%;
margin-left: 23%;
	width: 11%;
	z-index: 2;
  }

  @-webkit-keyframes animationpurple2 {
    0% {
      stroke-dashoffset: 151.14315795898438px;
      stroke-dasharray: 151.14315795898438px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 151.14315795898438px;
    }

    100% {
        stroke-dashoffset: 151.14315795898438px;
        stroke-dasharray: 151.14315795898438px;
      }
  }
  
  @keyframes animationpurple2 {
    0% {
      stroke-dashoffset: 151.14315795898438px;
      stroke-dasharray: 151.14315795898438px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 151.14315795898438px;
    }

    100% {
        stroke-dashoffset: 151.14315795898438px;
        stroke-dasharray: 151.14315795898438px;
      }
  }


  #purple2{
	-webkit-animation: animationpurple2 2s ease-in-out 0.3s infinite both;
            animation: animationpurple2 2s ease-in-out 0.3s infinite both;
	position: absolute;
	margin-top: 66%;
	margin-left: 80%;
	width: 7%;
	z-index: 2;
  }

  /*DOODLES-------------*/
  #orange2 
  {
    margin-top: 14%;
    margin-left: 20%;
    width: 12%;
  }
  #green2 
  {
    margin-top: 40%;
    margin-left: 80%;
    width: 13%;
  }
  #purple2 
  {
    margin-top: 78%;
    margin-left: 27%;
    width: 9%;
  }

/*CONTRACT WORK-------------------------------------------------------------------------------------------------*/

.mobile-proto{
  display:none;
}

@-webkit-keyframes animationpurple3 {
    0% {
      stroke-dashoffset: 464.0364990234375px;
      stroke-dasharray: 464.0364990234375px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 464.0364990234375px;
    }

    100% {
        stroke-dashoffset: 464.0364990234375px;
        stroke-dasharray: 464.0364990234375px;
      }
  }
  
  @keyframes animationpurple3 {
    0% {
      stroke-dashoffset: 464.0364990234375px;
      stroke-dasharray: 464.0364990234375px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 464.0364990234375px;
    }

    100% {
        stroke-dashoffset: 464.0364990234375px;
        stroke-dasharray: 464.0364990234375px;
      }
  }


#purple3
{
	-webkit-animation: animationpurple3 3.5s ease-in-out 0.3s infinite both;
  animation: animationpurple3 3.5s ease-in-out 0.3s infinite both;
}

  @-webkit-keyframes animationgreen3 {
    0% {
      stroke-dashoffset: 225.1666717529297px;
      stroke-dasharray: 225.1666717529297px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 225.1666717529297px;
    }

    100% {
        stroke-dashoffset: 225.1666717529297px;
        stroke-dasharray: 225.1666717529297px;
      }
  }
  
  @keyframes animationgreen3 {
    0% {
      stroke-dashoffset: 225.1666717529297px;
      stroke-dasharray: 225.1666717529297px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 225.1666717529297px;
    }

    100% {
        stroke-dashoffset: 225.1666717529297px;
        stroke-dasharray: 225.1666717529297px;
      }
  }


#green3
{
	-webkit-animation: animationgreen3 2.5s ease-in-out 0s infinite both;
  animation: animationgreen3 2.5s ease-in-out 0s infinite both;	
}

  @-webkit-keyframes animationorange3 {
    0% {
      stroke-dashoffset: 602.77685546875px;
      stroke-dasharray: 602.77685546875px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 602.77685546875px;
    }

    100% {
        stroke-dashoffset: 602.77685546875px;
        stroke-dasharray: 602.77685546875px;
      }
  }
  
  @keyframes animationorange3 {
    0% {
      stroke-dashoffset: 602.77685546875px;
      stroke-dasharray: 602.77685546875px;
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: 602.77685546875px;
    }

    100% {
        stroke-dashoffset: 602.77685546875px;
        stroke-dasharray: 602.77685546875px;
      }
  }

  #orange3{
	-webkit-animation: animationorange3 3.5s ease-in-out 1s infinite both;
            animation: animationorange3 3.5s ease-in-out 1s infinite both;
	position: absolute;
	margin-top: -210px;
	margin-left: 53%;
	width: 10%;
	z-index: 20000000000;
  }

/*CONTRACT WORK-------------------------------------------------------------------------------------------------*/

/*GRID*/
.parent3 
{
  margin-top: 30vh;

  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  grid-template-columns: 10vw repeat(14, minmax(0, 1fr)) 10vw;
  grid-template-rows: 2vh repeat(16, minmax(0, 1fr)) 2vh;
  margin-left: auto;
  margin-right: auto;
}

/*CONTRACT WORK AND OTHER PROJECTS*/
.proto1 
{ 
  grid-area: 2 / 3 / 5 / 9;
  display: flex;
  align-self: stretch;
  justify-content: flex-start;
  justify-self: auto;
  width: auto;
  height: auto;
  padding: 0px;
  flex-direction: column;
  align-items: flex-start;
  /* background: saddlebrown; */
}
.proto1 h3 
{
	margin-top: 2%;
  margin-right: 4%;
  margin-bottom: 0%;
	padding: 0%;
  text-align: right;
  

  font-size: var(--header-font-size);
}
.proto1 p 
{
	padding: 0%;
  text-align: right;
  margin-right: 4%;
  font-size: var(--body-font-size);
}

/*GAMES--------------------------------------------*/
.proto2 
{ 
  grid-area: 2 / 13 / 7 / 9;
}
.proto3 
{ 
  grid-area: 7 / 16 / 10 / 9;
}
.proto4 
{ 
  grid-area: 9 / 2 / 12 / 9;
}
.proto5 
{ 
  grid-area: 4 / 5 / 9 / 9;
}
.proto6 
{ 
  grid-area: 12 / 4 / 15 / 9;
}
.proto7 
{ 
  grid-area: 10 / 9 / 15 / 13;
}

/*WORK WITH US--------------------------------------------*/
.proto8 /*WORK WITH US*/
{ 
    grid-area: 15 / 9 / 17 / 13;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-start;
}
.proto8 h3
{
  margin-top: 10%;
  margin-bottom: 0%;
  text-align: right;
  font-size: var(--header-font-size);
}
.proto8 p
{
  width: 65%;
  text-align: right;
  font-size: var(--body-font-size);
}

.proto2 img, .proto3 img, .proto4 img, .proto6 img, .proto5 img, .proto7 img
{
  height:100%; /* Asegúrate de que la imagen ocupe todo el espacio en altura */
  width: 100%; /* Asegúrate de que la imagen no se desborde horizontalmente */
  object-fit: cover;
}
.media-video 
{
    position:relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.media-video {
    display: none;
}

.proto2:hover .media-image,
.proto3:hover .media-image,
.proto4:hover .media-image,
.proto5:hover .media-image,
.proto6:hover .media-image,
.proto7:hover .media-image {
    display: none;
}

.proto2:hover .media-video,
.proto3:hover .media-video,
.proto4:hover .media-video,
.proto5:hover .media-video,
.proto6:hover .media-video,
.proto7:hover .media-video {
    display: block;
}

/*DOODLES-------------*/
#purple3 
{
  position: absolute;
  margin-top: -1%;
  margin-left: 74%;
  width: 12%;
}
#green3 
{
  position: absolute;
  margin-top: 97%;
  margin-left: 75%;
  width: 9%;
}

/* Footer */

.footer {
	background-color: black;
	color: #f4f4f4;
	padding: 106px;
	text-align: left;
	position: relative;
	z-index: 1000000000;
}

.footer p {
	margin: 0 0 100px 0;
	font-size: 18px;
}

.slider {
	height: 100px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 90%;
}

.slider::after {
	right: 0;
	top: 0;
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}

.slider::before {
	left: 0;
	top: 0;
}

.slider .slide-track {
	animation: scroll 20s linear infinite;
	display: flex;
	width: calc(250px * 18);
	padding: 10px;
}

.slider .slide-track:hover {
	animation-play-state: paused;
}

.slider .slide {
	height: 69px;
	width: 250px;
	padding: 10px;
	display: flex;
	justify-content: center;
}

.slide img {
	width: 80%;
}

.slide:nth-child(1),
.slide:nth-child(10) {
	background-color: black;
}

.slide:nth-child(2),
.slide:nth-child(11) {
	background-color: black;
}

.slide:nth-child(3),
.slide:nth-child(12) {
	background-color: black;
}

.slide:nth-child(4),
.slide:nth-child(13) {
	background-color: black;
}

.slide:nth-child(5),
.slide:nth-child(14) {
	background-color: black;
}

.slide:nth-child(6),
.slide:nth-child(15) {
	background-color: black;
}

.slide:nth-child(7),
.slide:nth-child(16) {
	background-color: black;
}

.slide:nth-child(8),
.slide:nth-child(17) {
	background-color: black;
}

.slide:nth-child(9),
.slide:nth-child(18) {
	background-color: black;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-250px * 9));
	}
}



::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-thumb {
	background-color: #f4f4f4;
	/* Color del thumb (la parte que se mueve) */
	border-radius: 0;
	/* Forma del thumb (rectangular) */
}

::-webkit-scrollbar-track {
	background: #000;
	/* Color de la pista */
}

/*CONTACT MOBILE ---------------------------------------------------------------------------------------------------*/
.mobile-contacts{
  display: none;
}

/*FOOTER-------------------------------------------------------------------------------------------------*/
  .footer 
  {
    display: none;
  }
  .mobile-footer 
  {
    display: grid;
    width: 100%;
    grid-template-columns: 3% repeat(5, minmax(0, 1fr)) 3%;
    grid-template-rows: 10% repeat(4, minmax(0, 1fr)) 10%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    background: black;
  }
  .mobile-footer #footer-header 
  {
    display: flex;
    align-self: stretch;
    justify-content: flex-start;
    height: auto;
    object-fit: cover;
    align-items: center;

    grid-area: 2 / 2 / 3 / 5;
  }
  .mobile-footer h5 
  {
    font-size: calc(var(--body-font-size)* 1.1);
    font-weight: 200;
    color: white;
  }

  .mobile-footer #footer-slider 
  {
    display: flex;
    align-self: stretch;
    justify-content: center;
    height: auto;
    object-fit: cover;

    grid-area: 3 / 2 / 6 / 7;
  }
  .mobile-footer .slider 
  {
    height: 70%;
    width: 100%;
    margin: 0px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
  .mobile-footer .slider .slide-track
  {
    padding: 1%;
    height: 100%;
  }
  .mobile-footer .slider .slide-track .slide 
  {
    height: auto;
    width: var(--footer-brand-width);
    padding: 0px;
  }
  @keyframes scroll 
  {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(var(--footer-brand-width) * -9));
    }
  }