body{
    margin: 0;
    padding: 0;
    background-color: #F1F2F3;
    scroll-behavior: smooth;
    cursor:none;
    overflow-x: hidden;
    
}


#hello{
  width: 100%;
  height: 100vh;
  background: #1c1a1b;
  margin: auto;
  cursor: auto;
}

#hello .container-fluid{
  position: absolute;
  top: 40%;
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

}

.holagif{
  margin: auto;
  width: 100px;
  height: auto;
}

button.btn.btn-outline-light {
  border-radius: 50px;
  width: 10em;
}


.mask {
    background: 
      radial-gradient(circle 20px 
                      at var(--x,0) var(--y,0), 
                      #F1F2F3 99%,black 100%) 
                      fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
  }


.mask2 {
    background: 
      radial-gradient(circle 20px 
                      at var(--x,0) var(--y,0), 
                      #F1F2F3 99%,#776f6f 100%) 
                      fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
  }

  .mask3 {
    background: 
      radial-gradient(circle 20px 
                      at var(--x,0) var(--y,0), 
                      #F1F2F3 99%,#a9a9a9 100%) 
                      fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
  }

  .mask4 {
    background: 
      radial-gradient(circle 20px 
                      at var(--x,0) var(--y,0), 
                      #F1F2F3 99%,#565554 100%) 
                      fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
  }

 
h1, h2, h3, h4{
    font-family: 'Montserrat Alternates', sans-serif;
}

p{
    font-family: 'Roboto', sans-serif;
}

/* HOME */



#begin{
    width: 100%;
    height: 300vh;
    position: relative;
}

/* #back{
    height: 100vh;
    width: 100%;
    position: absolute;
    background-color: black;
    mix-blend-mode: difference;
    z-index: 0;
    animation: loading 7s;
    animation-iteration-count: 1;
    
} */

.izquierda{
  position: sticky;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  float: none;
  height: 50vh;
  z-index: 1111;
  background: white;
}


 .containizq{
    position: relative;
    width: 200%;
    height: 50vh;
    margin: auto;
    background: #F1F2F3;
    z-index: -33;
} 





#begin > div.izquierda > div > div.title{
    width: 50%;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 3em;
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    color: #000000;
    position: absolute;
    top: 50%;
    left: 0%;
}


#back{
    position: absolute;
    height: 100vh;
    width: 200%;
    top: 0; bottom: 0;
    right: 0;
    /* The opposite color of my visible blue one*/
    background: #ffffff;
    animation: loading 4s;
    mix-blend-mode: difference;
    
  }

  @keyframes loading {
    0% {
      left: 0%;
    }
    75%, 100% {
      left: -200%;
    }
  } 

#begin > div.izquierda > div > h1{
  
    font-size: 3em; 
} 

#begin h3, #begin h4{
    font-size: 2em;
}

#begin > div.derecha > div:nth-child(2) > h3:nth-child(1){
    color: #776f6f;
    
}
#begin > div.derecha > div:nth-child(2) > h3:nth-child(2){
    color: #a9a9a9;
}

.derecha{
    position: relative;
    left: 0px;
    top: 0px;
    right: 0px;
    width: 100%;
    float: none;
    z-index: 000;   
  }




  #begin .derecha{
    height: 260vh;
  }



  .derecha .containderecha{
      margin: auto;
      height: 100vh;
  }

  #begin .derecha .containderecha img{
    width: 200px;
    position: relative;
    margin: auto;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%); 
    text-align: center; 
}

 .derecha .containderecha h3, .derecha .containderecha p{
    /* position: relative; */
    margin: auto;
    top: 45%;
    left: 50%;
    /* transform: translate(-50%,-50%); */
    text-align: center;
  }

  #begin > div.derecha > div:nth-child(3){
      width: 400px;
  }

  #begin > div.derecha > div:nth-child(3) > p{
      font-size: 14px;
      color: #a9a9a9;
  }

  #begin > div.derecha > div:nth-child(3) > p > span{
      color: #776f6f;
      font-weight: 800;
  
  }


  .derecha .containderecha img{
      width: 200px;
  }

#jobs{
    width: 100%;
    height: 325vh;
    position: relative;
}

#jobs .derecha{
    height: 325vh;
  }


  /* #jobs > div.derecha > div:nth-child(1){
    height: 50vh;
  } */

  #jobs .derecha .containderecha{
    height: 50vh;
  }

.title2{
    width: 50%;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 38px;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
    color: #000000;
    position: absolute;
    top: 50%;
    left: 0%;
}


#jobs .derecha .containderecha img{
    width: 200px;
    position: relative;
    margin: auto;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%); 
    text-align: center; 
    cursor: pointer;
}

#destacados{
    width: 100%;
    height: 445vh;
    position: relative;
}

#destacados .derecha{
  height: 445vh;
}

#destacados h4{
  position: sticky;
   margin: auto;
   top: 50%;
   left: 50%;
   text-align: center;
   font-size: 30px;
}

#destacados > div.derecha > div:nth-child(2) > h4{
  color: rgb(27, 27, 27);
  font-weight: 900;
}

#destacados > div.derecha > div:nth-child(3) > h4{
  color: #3d3d3d;
  font-weight: 500;
}

#destacados > div.derecha > div:nth-child(4) > h4{
  color: #565554;
  font-weight: 100;
  font-style: italic;
}
/* 
#transicion{
  width: 100%;
    height: 100vh;
    position: relative;
}

#transicion > div.derecha > div{
  position: relative;
  height: 100px;
top: -40vh;
}

.svg {
  display: none;
  width: 500px;
  height: 500px;
  position: fixed;
  top: 500px;
  left: 50%;
  right: 0;
  bottom: 0;
  margin: auto;
} */

  #proyectos{
    width: 100%;
    height: auto;
    position: relative;
}


.grid-gallery {
    display: grid;
    grid-auto-rows: 200px;
    grid-gap: 0rem;
    grid-auto-flow: row dense;
  }

  #end{
    width: 100%;
    height: 80vh;
    position: relative;
  }

  .contain{    
    position: relative;
    left: 0px;
    top: 30%;
    right: 0px;
    width: 100%;
  }

  #end .contain h5,   #end .contain h6{
    /* position: relative; */
    margin: auto;
    top: 45%;
    left: 50%;
    /* transform: translate(-50%,-50%); */
    text-align: center;
  }

  h5.mask2 {
    font-size: 2.25rem;
    font-weight: 300;
    color: #776f6f;
}
h6.mask3{
    font-size: 2rem;
    font-weight: 200;  
    color: #a9a9a9;  
  }

  .contain2{       
     position: absolute;
    display: flex;
    width: 70%;
    justify-content: space-between;
    flex-direction: row;
    margin: auto;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.8em;
  }

  .contain2 ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    text-align: center;
    padding: 0;
  }

  .contain2 ul li i{
    color: #3d3d3d;
  }
  .contain2 ul li span{
    display: block;
    color: #3d3d3d;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    top: 10px;
    transition: 0.3s;
  }

  .contain2 ul li:hover span{
    color: #3d3d3d;
  }


  .contain2 ul li:hover i{
    color: whitesmoke;
    cursor: pointer;
    transition: 0.3s;
  }

  /* .contain2 i:hover div.contain2 span{
    display: block;
  } */
 

@media (min-width: 400px) and (max-width: 650px){
  

    #what h4 {
        font-size: 3em;
    }
}

@media (min-width: 650px) and (max-width: 850px){
 

    #what h4 {
        font-size: 4em;
    }
}

@media (min-width: 400px) and (max-width: 850px){
    h1{
        color: whitesmoke;
        font-size: 4em;
    }
    
 

  
}


@media (min-width: 850px){

  html::before {
    content:"";
    position:fixed;
    width:40px;
    height:40px;
    background:#000;
    border-radius:50%;
    top:var(--y,0);
    left:var(--x,0);
    transform:translate(-50%,-50%);
    z-index: -2;
  }

  #begin{
    height: 260vh;
  }

  .izquierda{
    width: 50%;
    float: left;
    height: 100vh;
    z-index: unset;
    background: unset;
  }

  .containizq{
    height: 100vh;
  } 

  .derecha{
    width: 50%;
    float: left;
    z-index: unset;
  }

  #begin .derecha .containderecha img{
    top: 45%;
  }

  #begin > div.derecha > div:nth-child(3) {
    width: 500px;
}

  h1{
        color: #3d3d3d;
        font-size: 6em;
    }
    
    .contain2{
    width: 500px;
    }
   
    .contain2 ul li span{
      color: white;
      top: 40px;
    }
    


    #jobs .jobicons img{
        width: 150px;
    }
    

     
}




@media all and (min-width: 320px) {
    .grid-gallery {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  @media all and (min-width: 768px) {
    .grid-gallery {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media all and (min-width: 1024px) {
    .grid-gallery {
      grid-template-columns: repeat(7, 1fr);
    }
  }

  .grid-gallery__item:nth-child(11n+1) {
    grid-column: span 3;
    grid-row: span 2;
    }


    .grid-gallery__item:nth-child(11n+1){
    
        background-image: url("../img/ebs.gif");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

    }
    

    .grid-gallery__item:nth-child(11n+2) {
        grid-column: span 2;
        grid-row: span 2;
        }

        .grid-gallery__item:nth-child(11n+2){
    
            background-image: url("../img/TF.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
    
        }
     
        
        .grid-gallery__item:nth-child(11n+3) {
            grid-column: span 2;
            grid-row: span 3;
            }

            .grid-gallery__item:nth-child(11n+3){
    
                background-image: url("../img/neo.gif");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
        
            }
    
            .grid-gallery__item:nth-child(11n+4) {
                grid-column: span 2;
                grid-row: span 3;
                }
    
                .grid-gallery__item:nth-child(11n+4){
                    background-image: url("../img/lagom.gif");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    position: relative;
            
                }
                .grid-gallery__item:nth-child(11n+5) {
                    grid-column: span 3;
                    grid-row: span 2;
                    }

                    .grid-gallery__item:nth-child(11n+5){
    
                        background-image: url("../img/sp2.gif");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        position: relative;
                
                    }
                    .grid-gallery__item:nth-child(11n+6) {
                        grid-column: span 2;
                        grid-row: span 2;
                        }
        
                        .grid-gallery__item:nth-child(11n+6){
    
                            background-image: url("../img/podcastDesign.jpg");
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            position: relative;
                    
                        }
                        .grid-gallery__item:nth-child(11n+7) {
                            grid-column: span 3;
                            grid-row: span 1;
                            }
            
                            .grid-gallery__item:nth-child(11n+7){
    
                                background-image: url("../img/rhul2.jpg");
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: cover;
                                position: relative;
                        
                            }




  .grid-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  
  }

  .grid-gallery__item{
    filter: grayscale(0.3);
  }

 


.over{
    display: block;
    position: absolute;
    padding: 1em;
    background-color: rgba(28, 28, 28, 0.9);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    color: whitesmoke;
    text-decoration: none;
    opacity: 0;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    transform: translate3d(0, -5%, 0);
}

.over .cont{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 2px solid whitesmoke; */
    padding: 1em;
    width: 100%;
    height: 100%;

}

.over ul{
    list-style: none;
    padding: 0;
    font-style: italic;
    font-size: 0.9em;
}

.over .nombre{
    font-size: 1.2em;
    text-transform: uppercase;
}



.grid-gallery__item:hover .over{
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }