@media only screen and (max-width:980px) {
    *{
        transition: none;
        animation: none;
    }

    .resp{
        height: 300px;
    }

    .title-resp{
        font-size: 20px !important;
        text-align: center;
    }

    .p-resp{
        font-size: 12px !important;
    }

    .img-resp img{
        width: 100% !important;
        height: auto !important;
    }



    header{
        height: 420px;
    }

    .main-head .main-nav section .header-link{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .header-redirection{
        display: flex;
        margin-right: 25px;
    }

    .header-redirection a{
        margin: 0 10px;
        font-size: 12px;
    }
    .dropdown{
        width: 50%;
    }

    .header-redirection .dropdown .dropbtn {
        width: 100px;
        height:50px ;
    }

    .dropdown:hover .dropbtn {
        width: 100px;
        background-color: transparent;
        
    }

    .dropdown span{
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dropdown-content{
        width: 50%;
        min-width: none;
    }

    .dropdown-content a{
        font-size: 10px;
    }
    .logo{
        width: 100px ;
        height: 100px ;
    }

    .hero-section{
        height: 100px;
    }

    .hero-section .hero-text h2{
        font-size: 20px;
        margin-top: 50px;
    }

    .hero-section .hero-text h3{
        font-size: 12px;
    }

    .hero-section .hero-text a{
        font-size: 10px;
        width: 100px;
        height: 30px;
    }

    .event{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
   
    }

    .event .event-img img{
        width: 90%;
        height: auto;
    }

    .event .event-description{
        width: 100%;
        margin: 0;
    }

    .event .event-description h2{
        font-size: 20px;
        width: 100%;
    }

    .event .event-description p{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .event .event-description a{
        font-size: 10px;
        width: 100px;
        height: 30px;
    }

    .shop{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    z

    .shop .shop-description{
        width: 100%;
    }

    .shop .shop-description h2{
        font-size: 20px;
        width: 100%;
    }

    .shop .shop-description p{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .shop .shop-items{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .shop .shop-items .shop-item{
        width: 100%;
        height: 250px;
    }

    .shop .shop-items .shop-item img{
        width: 100px;
        height: auto;
    }

    .about{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .about .about-description{
        width: 100%;
    }

    .about .about-description h2{
        font-size: 20px;
        width: 100%;
    }

    .about .about-description p{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .about .about-description a{
        font-size: 10px;
        width: 100px;
        height: 30px;
    }

    .volunter{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .volunter .volunter-description{
        width: 100%;
    }

    .volunter .volunter-description h2{
        font-size: 20px;
        width: 100%;
    }

    .volunter .volunter-description p{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .volunter .volunter-description a{
        font-size: 10px;
        width: 100px;
        height: 30px;
    }

    .items{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .items .calendar h2{
        font-size: 20px;
        width: 100%;
    }

    .items .result h2{
        font-size: 20px;
        width: 100%;
    }

    .category{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
    }

    .category .category-description{
        width: 100%;
    }

    .category .category-description h2{
        font-size: 20px;
        width: 100%;
        margin: 0;
    }

    .category .category-description p{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .category .categories-items{
        display: block;
        align-items: center;
    }

    .category .category-item{
        width: 100%;
    }

    .contact{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .contact .contact-description{
        width: 100%;
    }

    .contact .contact-description h2{
        font-size: 18px;
        width: 100%;
        text-align: center;
    }

    .contact .contact-form{
        width: 100%;
    }

    .contact .contact-form form{
        width: 100%;
    }

    .contact .contact-form form input{
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
    }

    .contact .contact-form form h2{
        font-size: 12px;
    }

    .contact .contact-form form input{
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
        font-size: 8px;
    }

    .contact .contact-form form textarea{
        width: 100%;
        height: 100px;
        margin-bottom: 20px;
        font-size: 8px;
    }

    .contact .contact-form form a {
        width: 100px;
        height: 30px;
        font-size: 10px;
    }

    .sponsor{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .sponsor .sponsor-description{
        width: 100%;
    }

    .sponsor .sponsor-description h2{
        font-size: 20px;
        width: 100%;
        margin: 0;
    }

    .footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .footer .logo-footer{
        margin-bottom: 1rem;
    }

    .footer .mail{
        text-align: center;
    }

    #backToTop{
        font-size: 20px;
    }

    .thanks{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .FCH{
        text-align: center;
        width: 100%;
    }

    .category img{
        margin-bottom: 30px;
        margin-right: 0;
    }

    .trainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .trainer img{
        margin-right: 0;
    }

    .trainer .trainer-description{
        width: 100%;
        margin: 0;
    }

    .trainer .trainer-description h2{
        margin-left: 0;
        
    }

}

@media only screen and (max-width:440px) {
    
    .shop .shop-items{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
}