@font-face {
    font-family: 'Gomme Sans';
    src: url('WebConstruccionB/Fuentes/Gomme\ Sans\ W04\ SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gomme Sans';
    src: url('WebConstruccionB/Fuentes/Gomme\ Sans\ W04\ Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@keyframes move{
    100%{
        transform:translate3d(0,0,1px) rotate(360deg);
    }
}
.background{
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background:#303030;
    overflow:hidden;
}
.background span{
    width:40vmin;
    height:40vmin;
    border-radius:40vmin;
    backface-visibility:hidden;
    position:absolute;
    animation:move;
    animation-duration:46;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
.background span:nth-child(0){
    color:#303030;
    top:31%;
    left:32%;
    animation-duration:29s;
    animation-delay:-30s;
    transform-origin:14vw 7vh;
    box-shadow:80vmin 0 10.91345003388198vmin currentColor;
}
.background span:nth-child(1){
    color:#3f3f3f;
    top:99%;
    left:5%;
    animation-duration:22s;
    animation-delay:-15s;
    transform-origin:-10vw -4vh;
    box-shadow:80vmin 0 10.32397461727082vmin currentColor;
}
.background span:nth-child(2){
    color:#303030;
    top:4%;
    left:81%;
    animation-duration:31s;
    animation-delay:-25s;
    transform-origin:-14vw -13vh;
    box-shadow:-80vmin 0 10.108004811869066vmin currentColor;
}
.background span:nth-child(3){
    color:#3f3f3f;
    top:19%;
    left:86%;
    animation-duration:16s;
    animation-delay:-12s;
    transform-origin:-4vw 3vh;
    box-shadow:-80vmin 0 10.175295359490445vmin currentColor;
}
.background span:nth-child(4){
    color:#303030;
    top:35%;
    left:33%;
    animation-duration:37s;
    animation-delay:-21s;
    transform-origin:6vw -1vh;
    box-shadow:-80vmin 0 10.110208828793164vmin currentColor;
}
.background span:nth-child(5){
    color:#303030;
    top:73%;
    left:90%;
    animation-duration:42s;
    animation-delay:-28s;
    transform-origin:-20vw -16vh;
    box-shadow:80vmin 0 10.988641433164226vmin currentColor;
}
.background span:nth-child(6){
    color:#3f3f3f;
    top:97%;
    left:53%;
    animation-duration:36s;
    animation-delay:-6s;
    transform-origin:-9vw 7vh;
    box-shadow:80vmin 0 10.489250994937182vmin currentColor;
}
.background span:nth-child(7){
    color:#3f3f3f;
    top:21%;
    left:19%;
    animation-duration:25s;
    animation-delay:-35s;
    transform-origin:-1vw -9vh;
    box-shadow:80vmin 0 10.860208598258986vmin currentColor;
}
.background span:nth-child(8){
    color:#303030;
    top:8%;
    left:18%;
    animation-duration:23s;
    animation-delay:-34s;
    transform-origin:10vw 12vh;
    box-shadow:80vmin 0 10.080370950163076vmin currentColor;
}
.background span:nth-child(9){
    color:#3f3f3f;
    top:49%;
    left:47%;
    animation-duration:26s;
    animation-delay:-11s;
    transform-origin:-21vw 2vh;
    box-shadow:80vmin 0 10.877443869398594vmin currentColor;
}
.background span:nth-child(10){
    color:#3f3f3f;
    top:66%;
    left:31%;
    animation-duration:31s;
    animation-delay:-22s;
    transform-origin:21vw -5vh;
    box-shadow:80vmin 0 10.877323908750315vmin currentColor;
}
.background span:nth-child(11){
    color:#3f3f3f;
    top:13%;
    left:91%;
    animation-duration:20s;
    animation-delay:-4s;
    transform-origin:-20vw 16vh;
    box-shadow:-80vmin 0 10.045882610173843vmin currentColor;
}
.background span:nth-child(12){
    color:#303030;
    top:35%;
    left:1%;
    animation-duration:17s;
    animation-delay:-11s;
    transform-origin:4vw 6vh;
    box-shadow:80vmin 0 10.935523439045582vmin currentColor;
}
.background span:nth-child(13){
    color:#303030;
    top:71%;
    left:82%;
    animation-duration:45s;
    animation-delay:-40s;
    transform-origin:11vw -19vh;
    box-shadow:-80vmin 0 10.30779668198548vmin currentColor;
}
.background span:nth-child(14){
    color:#303030;
    top:27%;
    left:76%;
    animation-duration:31s;
    animation-delay:-26s;
    transform-origin:3vw -14vh;
    box-shadow:80vmin 0 10.000397710645627vmin currentColor;
}
.background span:nth-child(15){
    color:#303030;
    top:1%;
    left:98%;
    animation-duration:7s;
    animation-delay:-14s;
    transform-origin:18vw -16vh;
    box-shadow:80vmin 0 10.068403627560125vmin currentColor;
}
.background span:nth-child(16){
    color:#3f3f3f;
    top:88%;
    left:59%;
    animation-duration:27s;
    animation-delay:-35s;
    transform-origin:-14vw 12vh;
    box-shadow:-80vmin 0 10.472149147214653vmin currentColor;
}
.background span:nth-child(17){
    color:#303030;
    top:1%;
    left:92%;
    animation-duration:8s;
    animation-delay:-9s;
    transform-origin:12vw 14vh;
    box-shadow:-80vmin 0 10.801346025762237vmin currentColor;
}
.background span:nth-child(18){
    color:#3f3f3f;
    top:84%;
    left:63%;
    animation-duration:22s;
    animation-delay:-19s;
    transform-origin:20vw -6vh;
    box-shadow:80vmin 0 10.748959527762242vmin currentColor;
}
.background span:nth-child(19){
    color:#303030;
    top:83%;
    left:6%;
    animation-duration:11s;
    animation-delay:-30s;
    transform-origin:-21vw 22vh;
    box-shadow:80vmin 0 10.357574266391174vmin currentColor;
}





.Content{
     position: absolute; 
     color: #e5e4e4;
     width: 29vw;
     height: 31.5vw;
     margin-top: 8.5vw;
     margin-left: 35vw;

}

.logo{
    margin-bottom: 1.1vw;
    margin-left: 10vw;
}

.logo img{
    width: 9vw;
}

.TT1{
    font-family: 'Gomme Sans', sans-serif;
    font-weight: 700;
    font-size: 6.35vw;
}

.TT2{
    margin-left: 0.5vw;
    padding-top: 5vw;
    font-size: 1.8vw;
    line-height: 0.001vw;
    font-family: 'Gomme Sans', sans-serif;
    font-weight: 600;
    color: #ff5906;

}

.PL{
    display: flex;
}

.TL2{
    font-family: 'Gomme Sans', sans-serif;
    font-weight: 600;
    text-align: center;
    padding-top: 0.4vw;
     font-size: 0.99vw;
}


.Cnts{
    margin-top: 3.6vw;
    padding-top: 0.45vw;
    padding-bottom: 0.46vw;
    margin-left: 3.1vw;
    margin-right: 3.1vw;
    padding-left: 1.75vw;
    display: flex;
    font-family: 'Gomme Sans', sans-serif;
    font-weight: 600;
    font-size: 0.99vw;

    border-radius: 1vw;
    outline: 1px solid white;
}

.Cnts a{
    text-decoration: none;
    color: #e5e4e4;
    transition: color 0.3s ease;  
}


.Cnts a:hover {
    color: #ff5906;
  }

.sep{
    padding: 0vw 0.6vw;
    color: #ff5906;
}

.TL3{
    padding-top: 3.4vw;
    font-family: 'Gomme Sans', sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 0.95vw;
    margin: auto 0.65vw;
    

}

.RIco{
    padding-top: 3.6vw;
    padding-left: 11vw;
    display: flex;
}

.RIco img{
    width: 1.48vw;
}

.RIco a{
    padding-right: 1.35vw;
}

  /* Style for social media images */
.IN a img {
    height: auto;
    transition: opacity 0.3s ease; /* Smooth transition */
  }
  
  /* On hover, change the image */
  .IN a:hover img {
    content: url('WebConstruccionB/inH.png'); /* Replace with your hover image */
  }
  

  .LINK a img {
    height: auto;
    transition: opacity 0.3s ease; /* Smooth transition */
  }
  
  /* On hover, change the image */
  .LINK a:hover img {
    content: url('WebConstruccionB/linkedH.png'); /* Replace with your hover image */
  }
  
  .FB a img {
    height: auto;
    transition: opacity 0.3s ease; /* Smooth transition */
  }
  
  /* On hover, change the image */
  .FB a:hover img {
    content: url('WebConstruccionB/fbH.png'); /* Replace with your hover image */
  }
  

  @media screen and (max-width: 768px) {
    .Content {
        padding-top: 30vw;
        transform: scale(3);  
    }

    .TL2{
        font-size: 1.2vw;
    }


    .TL3{
        font-size: 1.2vw;
    }


    .Cnts{
       
        outline: 0.0001vw solid white;
    }

    .RIco{
    
        padding-left: 9.5vw;
      
    }
    
    

    .RIco a{
        padding-right: 2.8vw;
    }


  }