html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html{
    scroll-behavior: smooth;
}
@font-face {
    font-family: magnetik-bold;
    src: url("./font/Magnetik-Bold.otf") format("opentype");
}
@font-face {
    font-family: magnetik-light;
    src: url("./font/Magnetik-light.otf") format("opentype");
}
@font-face {
    font-family: magnetik-bold;
    src: url("./font/Magnetik-Bold.otf") format("opentype");
}
@font-face {
    font-family: magnetik-medium;
    src: url("./font/Magnetik-Medium.otf") format("opentype");
}
.header{
    background-color: #040500;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;

}
h2{
    font-family: magnetik-bold;
    text-transform: uppercase;
    font-size: 32px;
}
h4{
    font-family: magnetik-light;
    text-transform: uppercase;
}
p{
    font-family: magnetik-light;
    text-transform: uppercase;
    font-size: 16px;
}
h3{
    font-family: magnetik-medium;
    text-transform: uppercase;
    font-size: 24px;
}
h1{
    text-transform: uppercase;
    font-family: magnetik-bold;
    color: white;
    margin:100px 20px -600px;
    text-align: end;
    z-index: 500;
    font-size: 54px;
}

.first{
    display: flex;
    flex-direction: column;

}
.divh1{
    z-index: 100;
}
.second{
    background-color: #CDD03B;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 100;
    padding: 5vh 20px;
    text-align: center;
}
.second svg{
    fill: black;
    width: 35%;
    margin-bottom: 50px; 
}
.second h2{
    margin-top: 25px;
}
#third{
    color: transparent;
}

.third{
    background-color: white;
    padding: 30px;
}
.fourth{
    background-color: #040500;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:start;
    text-align: start;
    margin-top: 25px;

}
.left svg{
    fill: #0367FB;
    width: 16vw;
}
.right svg{
    fill: #0367FB;
    width: 16vw;
}
.center svg{
    fill: #CDD03B;
    width: 16vw;
}
.left h3{
    text-align: start;
}
.left p{
    text-align: start;
    opacity: 0.6;
    margin-top: 10px;
}
.right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:end;
    text-align: end;
    margin-top: 25px;
}

.right h3{
    text-align: end;
}
.right p{
    text-align: end;
    opacity: 0.6;
    margin-top: 10px;
}

.center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    text-align: center;
    margin-top: 25px;
}
.center h3{
    text-align: center;
    color: white;
}
.center p{
    text-align: center;
    color: white;
    opacity: 0.4;
    margin-top: 10px;
}
.square-btn-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.square-btn{
    background-color: #CDD03B;
    border-radius: 12px;
    fill: black;
    margin: 8px;
    transition: 0.8 ease-in-out;
    width: 20%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.square-btn svg{
    fill: black;
    width: 80%;
}
.square-btn:active{
    background-color: #999b21;
    scale: 0.8;
}

.arrow{
    fill: black;
    width: 35%;
    transform: rotate(90deg);
}
.arrow:active{
    fill: rgb(20, 20, 20);
    scale: 0.8;

    
}

.header h4{
    margin: 0 10px;
}

.header svg{
    fill: white;
    width: 25vw;
}
.bg{
    height: 100%;
    width: 100%;
}
.footer{
    margin-top: 75px;
    fill: white;
    width: 45%;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #1f1f1fe0;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    columns: 150px;
    width: 100%; /* Could be more or less, depending on screen size */
  }
  .modal-content img{
    width: 100%;
  }
  .modal-content h2{
    color: white;
  }
  
  /* The Close Button */
  .close{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: rgb(255, 255, 255);
    font-size: 45px;
    text-decoration: none;
    cursor: pointer;
  }
  .modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content2 {
    background-color: #1f1f1fe0;
    /* 15% from the top and centered */
    padding: 20px;
    width: 100%;
    border: 1px solid #888;
    height: 100%; 
    display: flex;
    flex-direction: column;
/* Could be more or less, depending on screen size */
  }
  .modal-content2 img{
    width: 100%;
  }
  .modal-content2 h2{
    color: white;
  }
  
  /* The Close Button */
  .close2{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close2:hover,
  .close2:focus {
    color: rgb(255, 255, 255);
    font-size: 45px;
    text-decoration: none;
    cursor: pointer;
  }
  .hidden {
    opacity: 0;
  }

  
.text-focus-in.animate {
	animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    opacity: 1;
}


@keyframes text-focus-in {
    0% {
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  }
  .slide-in-top {
	animation: slide-in-top 1.2s ease-in-out both;
}
@keyframes slide-in-top {
    0% {
      transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }


  .slide-in-right.animate {
	animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
  
@keyframes slide-in-right {
    0% {
      transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .slide-in-left.animate {
	animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-left {
    0% {
      transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .slide-in-bottom.animate {
	animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-bottom {
    0% {
      transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .an1{
    animation-delay: 0.2s !important;
  }
  .an2{
    animation-delay: 0.4s !important;
  }
  .an3{
    animation-delay: 0.6s !important;
  }
  .an4{
    animation-delay: 0.8s !important;
  }
  .an5{
    animation-delay: 1s !important;
  }
  .an6{
    animation-delay: 1.2s !important;
  }
  .modal-header{
    display: flex;
    flex-direction: row;
  }
  .modal-header h2{
    margin-right: 100px;
    margin-bottom: 35px;
  }
  .videoss{
    width: 80%;
  }
  .videoss video{
    width: 100%;
  }
  .izi-portafolio{
    
    padding: 50px 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    text-align: center;
  }