/* A. I. LA. Associazione Italiana Lafora
   release date: march/april 2025
------------------------------------------- */
body {
    font-family: "Montserrat", sans-serif;
    padding-top: 50px;
}

@media (min-width: 1200px) {
    body {padding-top: 70px;}
}

.container {max-width: 1440px;}

.desktop-only {display: none;}

h2 {line-height: 1; font-weight: 700;}

@media (min-width: 992px) {
    .desktop-only {display: block;}
}

/* NAV
------------------------------------------- */
.navbar {
    max-width: 1440px; margin: auto;
    background: #497f90;
    color: #fff;
    position: fixed; top: 0; left: 0; right: 0; z-index: 999;
    -webkit-box-shadow: 0 0 20px 0px rgba(0,0,0,0.2); 
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);  
}

.navbar-brand {max-width: 140px;}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {width: 100%; font-size: 1.1rem;}
    .navbar-brand {max-width: 200px; padding: .5rem;}
}

@media (min-width: 1440px) {
    .navbar-expand-xl .navbar-nav {font-size: 1.2rem;}
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {background-color: #f90; color: #fff;}
.navbar-toggler {border: none;}
.navbar-toggler:focus {box-shadow: none;}

/* HOME - HERO 
------------------------------------------- */
.hero {
    position: relative;
    max-width: 1440px; margin: auto;
    color: #497f90;
}

.hero a {
    background: #f37021;
    color: #fff; text-decoration: none;
    text-transform: uppercase;
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem;
    border-radius: 4rem;
    font-size: 4.2vw; line-height: 1.2;
    font-weight: 500;
    position: absolute;
    bottom: 25%; left: 6%;
    padding: 3vw 8vw 3.5vw;
    -webkit-box-shadow: 0 0 20px 0px rgba(0,0,0,0.2); 
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);  
}

.hero a span {color: #497f90;}

.hero img {display: block; margin: auto;}

.hero .hero-desktop {display: none;} 

@media (orientation: landscape) {
    .hero .hero-mobile {display: none;}
    .hero .hero-desktop {display: block;}
    
    .hero a {
        font-size: 2.2vw;
        padding: 1.8vw 4vw 2vw;
        bottom: 8%; left: 4%;
    }
    
}

@media (min-width: 1440px) {
    .hero a {
        font-size: 2rem; padding: 1rem 3rem 1.2rem;
        bottom: 9%; left: 4.5%;
    }
}

/* HOME - MALATTIA
------------------------------------------- */
.malattia {
    background: #8caeb9; color: #fff;
    padding: 4vw; font-size: .85rem; line-height: 1.3;
}

.malattia h2 {
    color: #497f90;
    font-size: 1.9rem;
}
.malattia h3 {
    font-size: 1.1rem; line-height: 1.3; font-weight: 400;
}
.malattia h4 {
    font-size: 1.1rem; line-height: 1.3; font-weight: 700;
}

@media (min-width: 992px) {
    .malattia .padder {padding-left: 10%;}
}

@media (orientation: landscape) {
    .malattia {
        font-size: 1.85vw; line-height: 1.3;
    }    
    .malattia h2 {
        font-size: 4.2vw; line-height: 1; font-weight: 700;
    }
    .malattia h3 {
        font-size: 2.2vw; line-height: 1.3; font-weight: 400;
    }
    .malattia h4 {
        font-size: 2.2vw; line-height: 1.3; font-weight: 700;
    }
}

@media (min-width: 1200px) {
    .malattia {
        font-size: 1.2rem; line-height: 1.4;
    }
    .malattia h2 {
        font-size: 3.2rem; line-height: 1; font-weight: 700;
    }
    .malattia h3 {
        font-size: 1.6rem; line-height: 1.3; font-weight: 400;
    }
    .malattia h4 {
        font-size: 1.6rem; line-height: 1.3; font-weight: 700;
    }
}

/* HOME - EFFETTI
------------------------------------------- */
.effetti {
    padding: 2rem; font-size: 1.85vh; line-height: 1.3;
    text-align: center;
    max-width: 992px;
}

.effetti .col-md-6.col-xl-4 {
    background: #f7f7f7;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    padding: 1.5rem 1rem;
    border: 3vh solid #fff;
}

.effetti h2 {color: #497f90; line-height: 1.2;}
.effetti h3 {
    padding-top: 1.2rem;
    font-size: 2.2vh; line-height: 1.3; font-weight: 600; 
    text-transform: uppercase;
    color: #f37021; 
}

@media (orientation: landscape) {
    .effetti {
        font-size: 1.6vw;
    }
    .effetti h3 {
        font-size: 2vw;
    }
}

@media (min-width: 1180px) {
    .effetti {
        font-size: .9rem;
    }
    .effetti h3 {
        font-size: 1.3rem; line-height: 1.1;
    }
}

.effetti .step {
    width: 60%;
    margin: 1rem auto 0; padding: 3px; 
    font-size: larger; color: #518495;
    background: linear-gradient(to right,  #518495 37%,#c1c5c5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
}
.effetti .step strong {
    background: #f7f7f7;
    padding: 10px;
    display: block;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
}

/* HOME - LUCA
------------------------------------------- */
.luca {
    font-size: .9rem; line-height: 1.3;
    color: #fff;
    background: #497f90;
    margin: 0 auto; padding: 0 0 10%;
}

.luca h3 {
    background: #fff url(../img/bg-luca-mobile.jpg) top left no-repeat;
    padding: 67% 7% 5%; margin: 0 auto 1.5rem; 
    background-size: cover;
    font-size: 5vw;
    font-weight: 700; 
    color: #497f90; 
}

.luca p {
    padding: 0 7%;
}

.luca a {
    background: #fff;
    color: #497f90; text-decoration: none;
    text-transform: uppercase; padding: 1rem 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    font-size: .9rem; line-height: 1.2;
    font-weight: 500;
}

@media (min-width: 800px) {
    .luca {
        background: #497f90 url(../img/bg-luca.jpg) top left no-repeat;
        background-size: cover;
        color: #fff;
        padding: 3% 3% 3% 58%;
    }

    .luca h3 {
        background: transparent;
        padding: 0; margin: 0 0 2rem;
        font-size: 3vw;
        font-weight: 700; 
        color: #fff; 
    }

    .luca p {
        padding: 0 0 1.5rem; margin: 0;
    }
}

@media (min-width: 1280px) {
    .luca {
        font-size: 1.3rem; line-height: 1.3;
        padding: 3% 3% 3% 50%;
    }
    .luca h3 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 1440px) {
    .luca {
        padding: 7rem 7rem 7rem 50rem;
    }
}


/* HOME - INSIEME PER FERMARE LA MALATTIA
------------------------------------------- */
.insieme {
    background: #f37021; 
    color: #fff;
    padding: 5%;
    font-size: .9rem;
}
.insieme h1 {
    font-size: 6.5vw; line-height: 1.3;
}
.insieme h2 {
    font-size: 5.5vw;
    font-weight: 500; color: #a1d8e5;
}
.insieme span {
    font-weight: 700;
}
.insieme h3 {
    font-size: 4vw; line-height: 1.3;
}

.insieme a {
    background: #fff;
    color: #f37021; text-decoration: none;
    text-transform: uppercase; padding: 1rem 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    font-size: 1rem; line-height: 1.2;
    font-weight: 500;
    display: inline-block;
    margin: 1rem 0; white-space: nowrap;
}

@media (orientation: landscape) {
    .insieme {
        font-size: 1.2rem;
    }
    .insieme h1 {
        font-size: 4vw;
    }
    .insieme h2 {
        font-size: 4vw; 
    }
    .insieme h3 {
        font-size: 2vw;
    }
}

@media (min-width: 1200px) {
    .insieme h1 {
        font-size: 3rem;
    }
    .insieme h2 {
        font-size: 3.2rem;
    }
    .insieme h3 {
        font-size: 1.5rem; 
    }
}

/* HOME - PARTNERS
------------------------------------------- */
.partners h3 {color: #497f90; text-align: center;}
.partners img {display: inline-block; padding: 25px; max-width: 55%;}

@media (min-width: 600px) {
    .partners img {max-width: 85%; padding: 15px;}
}


/* LA MALATTIA DI LAFORA
------------------------------------------- */
.bg-blue {
    background: #8caeb9;
    color: #fff;
    font-size: .9rem;
}

.bg-blue h1, .bg-blue h2 {
    color: #497f90; padding-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
}


@media (min-width: 1280px) {
    .bg-blue p {
        font-size: 1.3rem;
    }    
}

.img-big-desc {
    margin: 0 auto; color: #fff;
    position: relative;
    max-width: 1440px;
}
.img-big-desc p {
    position: absolute;
    bottom: 1%; left: 4%;
    font-size: .7rem;
    padding-right: 5%;
}

@media (min-width: 1280px) {
    .img-big-desc p {
        font-size: 1.1rem;
    }   
}

/* WHITE */
.bg-white {
    background: #fff;
    font-size: .9rem;
}

.bg-white h1 {    
    text-transform: uppercase;
    font-weight: 700;
}

.bg-white .pink {color: #ff3b77;}

.bg-white h2 {
    color: #4e8293; padding-bottom: 1rem;
   line-height: normal;
    text-transform: uppercase;
    font-weight: 700;
}

.bg-white h4, .bg-white h5 {
    font-weight: 700;
}

.bg-white h4 {
   color: #8caeb9;
}

@media (min-width: 1280px) {
    .bg-white p, .bg-white ul {
        font-size: 1.3rem;
    }    
}

/* ORANGE */
.bg-orange {
    background: #f37021; color: #fff;
    font-size: .9rem;
}

.bg-orange h2 {
    color: #fff; padding-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
}

.bg-orange h5 {
    font-weight: 700;
    color: #f6c4a6;
}

@media (min-width: 1280px) {
    .bg-orange p {
        font-size: 1.3rem;
    }    
}


/* DONA 5X1000
------------------------------------------- */
.dona5x1000 {    
    font-size: .9rem;
}

.dona5x1000 h1, .dona5x1000 h2 {    
    text-transform: uppercase;
    font-weight: 700; line-height: 1;
    color: #ff3b77;
}

.dona5x1000 h1 {font-size: 1.6rem;}
.dona5x1000 h2 {font-size: 1.3rem;}

/* NUMERO 5X1000 */
.dona5x1000 .numero5x1000 {
    background: #ff3b77;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 1rem 0;
    margin: 2rem auto;
    max-width: 550px;
    font-size: 2.2rem; font-weight: 700;
}

/* NUMERO DI CONTO 5X1000 */
.dona5x1000 .conti5x1000 {
    background: #8caeb9;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 1rem 1rem 1.1rem;
    margin: 2rem auto;
}

.dona5x1000 .conti5x1000 h2 {
    font-size: 1.1rem; font-weight: 700;
    color: #fff; line-height: normal;
    margin: 0; padding: 0;
}

.dona5x1000 .conti5x1000 h2 span {
    color: #497f90;
}

.dona5x1000 .conti5x1000 p {
    margin: 0; padding: 0 0 .5rem;
}

@media (min-width: 600px) {
    .dona5x1000 h1 {font-size: 2rem;}
    .dona5x1000 h2 {font-size: 1.6rem;}
    .dona5x1000 .conti5x1000 {
        padding: 1rem 2rem 1.1rem;
    }
    .dona5x1000 .conti5x1000 h2 {
        font-size: 1.6rem;
    }
}

@media (min-width: 1280px) {
    .dona5x1000 h1 {font-size: 2.5rem;}
    .dona5x1000 h2 {font-size: 2rem;}
    .dona5x1000 {
        font-size: 1.3rem;
    }    
    .dona5x1000 .numero5x1000 {
        font-size: 3.6rem;
    }
    .dona5x1000 .conti5x1000 {
        padding: 1rem 3rem 1.1rem;
    }
    .dona5x1000 .conti5x1000 h2 {
        font-size: 2.5rem;
    }
}

/* CTA GUIDA */
.guida {
    background: #ff3b77;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 1rem 2rem;
    margin: 2rem auto; 
    font-size: 1.4rem; line-height: 1; font-weight: 700;
    display: inline-block;
    text-decoration: none;
}

@media (min-width: 600px) {
    .guida {
        font-size: 2rem;
    }
}

@media (min-width: 1200px) {
    .guida {
        font-size: 2.7rem;
        padding: 1rem 3rem;
    }
}


/* STORIE
------------------------------------------- */
.title-storia {
    background: #497f90; color: #fff;
    font-size: 6vw; list-style: 1;
    max-width: 1440px;
    margin: 0 auto;
    font-weight: 700;
}
@media (orientation: landscape) {
    .title-storia {font-size: 4vw;}
}
@media (min-width: 1280px) {
    .title-storia {font-size: 4.5rem;}
}


/* RICERCA
------------------------------------------- */
.read-more {
    background: #497f90;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 1rem 2rem; margin: 1.5rem 0 0;
    font-size: .8rem; line-height: 1; font-weight: 600;
    text-decoration: none; display: inline-block;
    white-space: nowrap; width: 100%;
}

.card h2 {font-size: 1.1rem; text-transform: none; margin: 0; padding: 0;}
.card p  {font-size: .8rem; margin: 0; padding: 15px 0 0;}
.card p a  {color: #497f90;}

@media (min-width: 600px) {
    .read-more {
        width: auto;
    }
}

@media (min-width: 768px) {
    .read-more  {margin: 0 0 0 2rem;}
}

@media (min-width: 1180px) {
    .read-more  {font-size: 1rem; margin: 0 0 0 4rem;}
    .card h2 {font-size: 1.4rem;}
    .card p  {font-size: 1rem;}
}


/* FOOTER
------------------------------------------- */
footer {
    background: #838080; color: #fff;
    text-align: center;
}

footer p {font-size: .85rem; line-height: 1.3; margin: 0; padding: 0;}
footer a {color: #fff; text-decoration: none;}