@import url('https://fonts.googleapis.com/css?family=Inter:400,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
body{font-family: 'Inter', Tahoma, Verdana, sans-serif;font-size: 14px; font-weight: 400; background-color:#f1f1f1;background-image:url(../images/bg.gif);}

h1{
    font-family: "Playfair Display";
    font-size:6rem;
    letter-spacing: 0px;
    font-weight: bold;
    color: #000;
line-height: 1.1em;}
h2{font: Bold Inter; font-weight: bold; font-size: 2.3rem;
    letter-spacing: 0px;
}
img{max-width: 100%;}
.bggrey{background-color:#f1f1f1}
.grey{color:#7F7F7F;}
a, img, div, li, :after, :before{transition: all 0.3s ease-in-out;}
.fit-content{
    width: fit-content;
}
.display-none{
    display: none;
}
.vcenter {
    display: flex;
    align-items: center;  
}
.relative{position: relative;}
.hright{
    display: flex;
    justify-content: flex-end;
}
.bg-lightblue{

  background-color: #DFF4FF !important;
}
.bg-lightgray{

    background-color: rgb(177, 177, 177);
  }
.lime-green{
    color: #5FC600;
}
.dark-grey{
    color: #2C2C2C;
}
.blue{color:#0081C6 !important}
.red{color:#fc0000 !important}
.green{color:#92cf4f !important}
.yellow{color:#EBCB1D !important}
.grey{color:#999;}
.white{color:#fff;}
.bg-dark{background-color:#777;}
    /*LOGIN*/
.loginerror{
    color: #ff4f4f;
}
.logo{
    width: 150px;
    padding-bottom: 10px;
}
.login-container{
    height: 100vh;
    display: flex;
    align-items: center;
}

.form-container{
    padding: 30px;
    width: 100%;
    /*height: 300px;*/
    border-radius: 0px;
    background-color: white;
    box-shadow: rgba(0, 0, 0,0.2) 0 10px 20px;
}

.min80{
    min-height: 500px;
}

.carousel-item{text-align: center;}
.carousel-item img{display:inline-block !important;max-height: 500px;height: auto;width: auto !important;max-width: 100%;;}

.containerRespondido{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    display: none;
    align-items: center;

}
.containerRespondido a{display:inline-block;border:1px solid #fff; color:#333; background-color:#fff;border-radius: 99em; padding:10px 20px; font-weight: bold; margin-top:20px;}
.containerRespondido a:hover{background-color:#fff;text-decoration: none;}
.containerRespondido h1, .containerRespondido h4 {
  text-shadow: 0 0 10px #000;  
}
.misPuntosContainer h4{font-weight: bold; font-size: 1.4rem;}
.misPuntosContainer ul{padding:15px;padding-top:0px;background-color:#f1f1f1; border-radius: 5px;}
.misPuntosContainer ul li{list-style: none; border-bottom: 1px solid #fff; width: 100%;padding: 15px 0px; font-weight: bold;}
.misPuntosContainer ul li img{float: right; max-width: 18px; max-height: 18px;;}

.misPuntosContainer span.number{border-radius: 99px; height: 30px; margin-right:10px;width:30px;background-color:#fff; color:#333;display:inline-flex; align-items: center;justify-content: center;}


.coordenadas{font-size: 100%;}
.coordenadas .other{display:none;background-color:#33333350; border: 0px solid; position: absolute;border-radius: 50rem;height: 16px;width: 16px;left:50%;top:50%; margin-left:-8px; margin-top:-8px;}

.coordenadas .me{display:none;background-color:#fff; border: 3px solid; position: absolute;border-radius: 50rem;height: 16px;width: 16px;left:50%;top:50%; margin-left:-8px; margin-top:-8px;}



input[type=text]{
    background:#fff;
    border:1px solid #000;
    border-radius: 0px;;
}


button{
    background-color:#0018ff;
    color:#fff;
    border:0px;
    border-radius: 0px;font-weight: bold;
}
.countdown{background-color:#f0f0f0; border-radius: 0px 0px 10px 10px; padding:10px 0px;font-weight: bold;font-size: 1.3rem;margin-bottom: 20px;;}

a, a:hover{font-family: 'Inter';display:inline-block;font-size:1.4rem; color:#0018ff; font-weight: 800; text-decoration: underline;}
a.fletxa:after{
    content:"--->";
    text-decoration: none !important;
    position: absolute;
    padding-left:15px;
    transition: all 1s ease-in-out;    
}
a:hover::after{
    padding-left:35px;
}

.fitxauser{
    background-color:#fff;
    box-shadow: 9px 9px 0px 0px #0018ff;
    padding:25px;
    height: 100%;
    text-align: center;
    font-size: 1.3rem;
    margin-bottom:30px;
}
.fitxauser b{
    font-family: "Playfair Display";
    font-size: 1.6rem;
}
.fitxauser:hover{
    box-shadow: 25px 25px 0px 0px #0018ff;
    transform: translate(-10px, -10px);
}

@media only screen and (max-width: 600px) {
    h1 {
      font-size: 4rem;
    }
    h3{font-size: 1.5rem;}
  }