@font-face {
    font-family: montserrat;
    src: url(./llibrerias/fonts/montserrat/Montserrat-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: montserrat;
    src: url(./llibrerias/fonts/montserrat/Montserrat-Regular.ttf);
    font-display: swap;
    font-weight: normal;
}

@font-face {
    font-family: montserrat;
    src: url(./llibrerias/fonts/montserrat/Montserrat-Bold.ttf);
    font-display: swap;
    font-weight: bold;
}

@font-face {
    font-family: montserrat;
    src: url(./llibrerias/fonts/montserrat/Montserrat-ExtraLight.ttf);
    font-display: swap;
    font-weight: lighter;
}

@font-face {
    font-family: mt;
    src: url(./llibrerias/fonts/scrpit_mt/scriptbl.ttf);
    font-display: swap;
}

html{
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scroll-behavior: smooth;
    overflow-x:hidden;
    
    
}


html::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;

}

body{
    font-family: montserrat!important;
    overflow-y:visible;

}


#cover{
    background-color: #181818;
    min-height: 100vh;
    height: 100vh!important;
    width: 100vw;
    z-index: 0!important;
}

@supports ( -webkit-touch-callout : none) {
    #cover {
    background-attachment:scroll
    }
    }
    
    @supports not ( -webkit-touch-callout : none) {
    #cover {
    background-attachment: fixed;
    }
    }
    
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
}

.cover-div{
    position: fixed;
    top: 70vh;
    color: white;
    z-index: 100;

}

.white-glass{
    background-color: rgba(255, 255, 255, 0.85)!important;
}
.btn-portada{
    
    font-size: x-large;
-webkit-backdrop-filter: blur(10px)!important;
backdrop-filter: blur(10px)!important;
background-color: rgba(255, 255, 255, 0.2)!important;  
color: white;
    transition: 0.4s;
    transition-delay: 0.1s;
}
a.btn:hover,button:hover{
    box-shadow:
    0px 1.2px 1.7px rgba(0, 0, 0, 0.052),
    0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
    0px 4.8px 7px rgba(0, 0, 0, 0.092),
    0px 8px 11.6px rgba(0, 0, 0, 0.108),
  0px 13.2px 19px rgba(0, 0, 0, 0.130)
}

#menuBtn:hover{
    box-shadow: none;
}
#data{
    font-size:2.5rem;
}


@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .btn-portada:hover{
-webkit-backdrop-filter: blur(10px)!important;
backdrop-filter: blur(10px)!important;
background-color: rgba(255, 255, 255, 0.5)!important;  
color: white!important;
}
}

#info,#route,#services,#maillot,#inscription,#rules,#contact,#sponsors,#resultats{
    min-height: 100vh;
    height: max-content;
    background-color: #181818;    
}

.bg{
    background-color: #181818;

}
.link-dark:hover{
    color: #0078ff!important;
}


.section {
    padding: 1rem;
    min-height: 100vh;
    text-align: center;
    position: relative;
    scroll-behavior: smooth;
    z-index: 1;
  
  }

  nav{
      z-index: 9999;
      width: 100vw;
  }

  #navbar {
    background-color: white;
    height: 7vh;
    min-height: 40px;
}
 
img{
    max-width: 100%;
    max-height: 100%;
}

.my-shadow{
    box-shadow:
  0px 1.2px 1.7px rgba(0, 0, 0, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 4.8px 7px rgba(0, 0, 0, 0.092),
  0px 8px 11.6px rgba(0, 0, 0, 0.108),
  0px 13.2px 19px rgba(0, 0, 0, 0.125);

 
}

.my-shadow2{
    box-shadow:
  0px 1.2px 1.7px rgba(0, 0, 0, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 4.8px 7px rgba(0, 0, 0, 0.092),
  0px 8px 11.6px rgba(0, 0, 0, 0.108),
  0px 13.2px 19px rgba(0, 0, 0, 0.125);
  
}

.dropbtn{
    background-color:white;
    border-style: none;
}

i:active{
    text-shadow:
  0px 1.2px 1.7px rgba(0, 0, 0, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 4.8px 7px rgba(0, 0, 0, 0.092),
  0px 8px 11.6px rgba(0, 0, 0, 0.108),
  0px 13.2px 19px rgba(0, 0, 0, 0.125),
  0px 23.1px 33.3px rgba(0, 0, 0, 0.148),
  0px 50px 72px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}

#dropDown{
    height: 100vh;
    background-color: white;
    box-shadow:
  0px 2.2px 1.7px rgba(0, 0, 0, 0.052),
  0px 5.3px 3.9px rgba(0, 0, 0, 0.075),
  0px 10px 7px rgba(0, 0, 0, 0.092),
  0px 17.9px 11.6px rgba(0, 0, 0, 0.108),
  0px 33.4px 19px rgba(0, 0, 0, 0.125),
  0px 80px 33.3px rgba(0, 0, 0, 0.148),
  0px 100px 72px rgba(0, 0, 0, 0.2)
}

#dropDown > a{
    text-decoration: none;
    color: black;
    line-height: 2.5em;
    font-size: 1.8em;
    font-weight: bold;
    transition-delay: 0.05;
  transition-timing-function:ease;
  transition: 0.6s;
    
}

#dropDown > a:hover{ 
    color: rgb(100, 100, 100);
    text-shadow:
  0px 1.2px 1.7px rgba(7, 4, 4, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 10px 7px rgba(0, 0, 0, 0.092);
  transition-delay: 0.1s;
  transition-timing-function:ease;
  transition: 0.6s;

}

.activeA{ 
    color: rgb(65, 65, 65);
    text-shadow:
  0px 1.2px 1.7px rgba(7, 4, 4, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 10px 7px rgba(0, 0, 0, 0.092);
  text-decoration: line-through!important;
    transition: 0s!important;
}


#social-btns{
    z-index: 999999;
    height: auto;
    background-color: white;    
}

.btn-orange{
    color: #fff!important;
    background-color: #fc4c02!important;
    border-color: #fc4c02!important;
}

.btn-orange:hover{
    color: #fff!important;
    background-color: #bd3900!important;
    border-color: #bd3900!important;
}

.btn-wikiloc{
    color: #fff!important;
    background-color: #4c8c2b!important;
    border-color: #4c8c2b!important;
}

.btn-wikiloc:hover{
    color: #fff!important;
    background-color: #34611e!important;
    border-color: #34611e!important;
}

#social-btns > a{
    color: rgb(53, 53, 53);
    text-decoration: none;
  transition-delay: 0.1s;
  transition-timing-function:ease;
  transition: 0.8s;
}

#social-btns > a:hover{
    
    text-shadow:
  0px 1.2px 1.7px rgba(7, 4, 4, 0.052),
  0px 2.7px 3.9px rgba(0, 0, 0, 0.075),
  0px 10px 7px rgba(0, 0, 0, 0.092);

  transition-delay: 0.1s;
  transition-timing-function:ease;
  transition: 0.6s;
}

#facebook:hover{
    color:#0078ff;
}

#instagram:hover{
    color:#C13584 ;
}

#youtube:hover{
    color:#c4302b ;
}
#strava:hover{
    color:#e34a00 ;
}

.komoot,#komoot:hover{
    color: #83d223!important;
}

.dark-lvl-1{
    background-color: #212121!important;
}

#section-title{
    z-index: 9999;
    height: 7vh;
    min-height: 40px;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    position: absolute;
    background-color: white;
   
}


#info-text,.info-text{
    color: white!important;
    font-weight: lighter!important;
    text-align: left;
    margin-left: 3%;
    margin-right: 3%;
    font-size: normal;
    line-height: 2em;
    
}

.p-info-space{
    padding-right:38vh ;
}


#div-imgs{
padding-top: 25vh;
width: 100vw;
height: auto;

}

#div-img{
    margin-top: 11vh;
    width: 100vw;
    position: relative;
}

.img1{
    width: 35vh;
    height: auto;
    margin-right: 27vh;
    float: right;
    margin-left: 2%;
    margin-bottom: 7%;
    
}

.img2{
    width: 35vh;
    height: auto;
    float: right; 
    position:absolute;
    top:25vh;
    right:3%;
    
}
.img3{
    width: 35vh;
    height: auto;
    float: left; 
    margin-left:3%;
    margin-right: 2%;
    margin-bottom: 3%;
    margin-top: 3%;
    
}
.img-space{
    width: 35vh;
    height: 25vh;
    margin-right: 3%;
    float: right;
    margin-left: 2%;    
}
.logo{
    width: 30vw;
    height: auto;
}

.logo2{
    width: 17vw;
    height: auto;
}

#camiseta, #gorra{
 max-width: 15vw;
 height: 100%;
 -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.527));
 filter: drop-shadow(  0px 1.2px 1.7px rgba(0, 0, 0, 0.052))
  drop-shadow(0px 2.7px 3.9px rgba(0, 0, 0, 0.075))
  drop-shadow(0px 4.8px 7px rgba(0, 0, 0, 0.092))
  drop-shadow(0px 8px 11.6px rgba(0, 0, 0, 0.108))
}

#sponsors-div {
    padding-top: 9vh;
    height: 91vh;
}
#copy{
    color: grey;
}
#div-ruta{
    padding-top: 9vh;
    min-height: 100vh;
    position: relative;
}
#div-ruta>div{
    height: fit-content;
}
#iframe-rock{
    padding-top: 12vh;
    padding-left: 3%;
    padding-right: 3%;
}
#maillotFrame>iframe{
    width:100%;
    height:85vh;
    margin-top: 0vh
}
.list-info{
    line-height: 2.3rem;
    font-size: large;
}
.btn-contacto{
   
    font-size: 1.7rem!important;
}
.normal{
    font-weight:normal!important;
}
.bold{
    font-weight: bold!important;
}

.mt{
    font-family: mt!important;

}

.size12{
    font-size: 120%;
}

.mobil{
    display: none !important;
}

.large{
    font-size: large!important;
}
.larger{
    font-size: larger!important;
}

#sponsors-div > div > a{
    box-shadow: none;
}

.table td{
    text-align: right;
}
tr th{
    text-align: left;
}

#preu_t{
    text-align: right;
}

table{
    background-color:rgba(0, 0, 0, 0.0)!important;
    color: white!important;
}

  @media only screen and (max-width: 1366px) {
    .mobil{
        display: block!important;
    }
    #div-imgs{
        padding-top: 25vw;        
        }        
        
        .img1{
            width: 35vw;
            height: auto;
            margin-right: 27vw;
            margin-bottom: 2%;
            
        }
        
        .img2{
            width: 35vw!important;
            height: auto!important;
            max-height: 35vw!important;
            max-width: 35vw!important;
            top:25vw;
            
        }
        .img3{
            width: 25vw;
            height: auto;
            margin-top: 2%;
            
        }
        .img-space{
            width: 35vw;
            height: 25vw;
            margin-right: 5vw;
        }
        #info-text,.info-text{
            color: white!important;
            text-align: left;
            margin-left: 3%;
            margin-right: 3%;
            font-size:normal;
            line-height: normal;
        }

        #camiseta, #gorra{
            max-width: 90vw;
            height: auto;
           }
  }

 

@media only screen and (max-width: 900px) {
    .logo-nav{
        max-width: 70%!important;
    }
    #section-title{
        font-size: 1em;
        
    }

    #dropDown > a{
        font-size: 1em;
        
    }
    #info-imgs{
        padding-top: 13vh;
        font-size: small!important;
    }
    .img1{
        width: 35vw;
        height: auto;
        margin-right: 27vw;
        
    }
    
    .img2{
        width: 35vw;
        height: auto;
        top:25vw;
        
    }
    .img3{
        width: 30vw;
        height: auto;
        
    }
    .img-space{
        width: 35vw;
        height: 25vw;
        margin-right: 5vw;
    }
    #info-text,.info-text{
        color: white!important;
        text-align: left;
        margin-left: 3%;
        margin-right: 3%;
        font-size: medium;
    }
    .p-info-space{
        padding-right:0vh ;
    }
    .list-info{
        line-height:2.3rem;
        font-size: medium;
    }
    .logo{
        width: 60vw;
        height: auto;
        padding-left: 5.5vw;
        padding-right: 5.5vw;
    }
    
    .logo2{
        width: 34vw;
        height: auto;
        
    }
    #maillotFrame>iframe{
        width:100%;
        height:70vh;
        margin-top: 0vh
    }
    #iframeMaillot{
        max-width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }
    
  }