html,body,h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    font-family: 'Comfortaa', cursive;
}

#container{
    min-height: 100%;
    height: unset;
}

h1{
    text-align: center;
    margin-top: 50px;
    text-transform: uppercase;
}

.top-bar, .top-bar ul{
    background: white;
}
footer{
    background: #333;
    color: white;
}

#calendardonations{
    list-style: none;
}

#calendardonations li::before {
    font-family: 'FontAwesome';
    content: '\f067';
    margin: 0 5px 0 -15px;
    color: #ec5e5e;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}


a,.breadcrumbs a{
    color: rgb(212, 35, 35);
}



a.homebox{
    color: unset;
    transition: 0.3s all ease;
}
a.homebox:hover{
    color:#b34d4d;
}



.homebox{
    padding: 0px 20px;
    text-align: center;
}
.homebox h4{
    text-transform: uppercase;
    margin-top: 20px;
    position: relative;
    padding-bottom: 5px;
}

.homebox h4::after{
    content: '';
border-bottom: 2px solid #cfcfcf;
display: inline-block;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.4s all ease;
}
.homebox img{
    border-radius: 50%;
    border:8px solid rgb(207, 207, 207);
    object-fit:cover;
    transition: 0.4s all ease;
}

.homebox:hover h4::after{
    border-color: rgb(212, 35, 35);
}

.homebox:hover img{
    border-color: rgb(212, 35, 35);
}


.boxcontainer{
    text-align: center;
}
.boxdescr{
    width: 100%;
margin: auto;
    padding: 20px;
}

.boxcontainer h4, h2,.textcontainer h4{
    text-transform: uppercase;
    margin-top: 20px;
    position: relative;
    padding-bottom: 5px;
}
h2{text-align: center;}

.boxcontainer h4::after, h2::after, .textcontainer h4::after{
    content: '';
border-bottom: 2px solid #cfcfcf;
display: inline-block;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.4s all ease;
}
.boxcontainer img{
    border-radius: 50%;
    border:8px solid rgb(207, 207, 207);
    object-fit:cover;
    transition: 0.4s all ease;
}

.boxcontainer:hover h4::after{
    border-color: rgb(212, 35, 35);
}

.boxcontainer:hover img{
    border-color: rgb(212, 35, 35);
}

.boxdescr{
    background: #f4f4f4;
}

#main{
    padding-bottom: unset;
}

footer{
    position: relative;
    padding-bottom: 20px;
}
footer h5{
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

footer p{
    margin-top: 20px;
}

footer .menu a{
    color: white;
}
footer .menu a:hover{
   text-decoration: underline;
}
footer .menu .active a{
    background: unset;
}

footer h5::after{
    content: '';
    border-bottom: 2px solid #cfcfcf;
    display: inline-block;
    width: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.4s all ease;
}

.off-canvas-content #content{
    padding: 0px;
}

#responsive-menu .menu{
    justify-content: center;
}

#responsive-menu li{
    margin: 0 5px;
}
#responsive-menu .menu a{
    transition: 0.3s all ease-in;
    text-transform: uppercase;
    color: rgb(212, 35, 35);
}

#responsive-menu .menu a.logo:hover{
    background: unset;
}

#responsive-menu .menu a:not(.logo):hover{
    background-color: rgb(218, 70, 70);
    color: white;
}
#responsive-menu .menu .active a{
    background-color: rgb(189, 47, 47);
    color: white;
}

.grid-container.full{
    background: rgb(242, 242, 242);
    padding: 30px;
    
}

.grid-container.full>.grid-x{
    width: 80%;
    margin: auto;
}

.slick-slider.homeslider{
    margin-bottom: 50px !important;
}

.breadcrumbs{
    justify-content: center;
    display: flex;
}

.grid-container{
    padding: 40px 50px;
    margin: 30px auto;
}
.grid-container.intro{
    padding: 10px 50px;
    margin: 10px auto;
}

.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus{
    background: rgb(223, 17, 17);
    text-transform: uppercase;
    font-weight: bold;
}

.button:hover, .button:focus{
    background: rgb(190, 10, 10);
}


#donationinfo{
    padding: 0px 50px;
}
#donationinfo .grid-x.grid-margin-x {
    margin-bottom: 40px;
}
#donationinfo h3,.feedback h3{
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    width: 100%;

}
#donationinfo h3::after, .feedback h3::after{
    content: '';
border-bottom: 2px solid #cfcfcf;
display: inline-block;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: 0.4s all ease;
}
#donationinfo h6{
    font-weight: bold;
}

.group{
    margin-top: 20px;
}
.organigramma {
    padding: 20px;
    background: #eee;
    margin-top: 10px;
}
.organigramma .profile{
    margin-bottom: 10px;
}
.organigramma .caption{
    text-align: center;
}

/*
.organigramma{display: flex;}
.profile{width:75%}
.caption{width:25%}*/

.contact a:hover{
    color: #e14b4b;
    text-decoration: underline;
}
.contact .icon, .socials i {
    background: #e14b4b;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    color: white;
    margin: 5px;
    line-height: 45px;
    font-size: 1.3rem;
    border-radius: 50%;
    border: 3px solid #d9d9d9;

}
.socials:hover i {
    background: #cc3030;
}

footer hr{
    margin: 40px 0px;
}
footer .grid-container{
    margin-bottom: 10px;
    padding-bottom: 0px;
}
footer .contact .icon {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    line-height: 30px;
    border-width: 1px;
}
footer .contact a{
    color: white;
}


h4, .history h3{
    position: relative;
    margin-bottom: 20px;
}
h4::after, .history h3::after {
    content: '';
border-bottom: 2px solid #e14b4b;
display: inline-block;
width: 50px;
position: absolute;
bottom: -5px;
left: 0;
transition: 0.4s all ease;
}

.history{
    margin-top: 40px;
}
.history h3{
    text-align: left;
    font-size: 1.2rem;
}
.history p, #donationinfo .cell {
    text-align: left;
    background: #f4f4f4;
    padding: 30px;
}
.thumbGallery{
    cursor: pointer;
}

.answers{
    display: flex;
    margin-top: 5px;
}
.answers label{
    margin-right: 20px;
    cursor: pointer;
}

.answers label:hover{
    color: #cc3030;
    
}

.question.invalid h6{
    color: #cc3030;
}

#feedback .is-invalid-label{
    color: unset;
}

.answers input{
    cursor: pointer;
}

.feedback h3{
    text-transform: uppercase;
    text-align: center;
}
#feedback h4{margin-top: 20px;}
#feedback h6 {
    font-style: italic;
    font-weight: bold;
}
.question{margin-top: 10px;}

#openmenu{
    background-color: #cc3030;
    padding: 10px;
    cursor: pointer;
}
#openmenu:hover{
    background-color: #e14b4b;
}
.title-bar{
    background: white;
}

#offCanvas{height: auto;}

#offCanvas .menu  a{
    color: #e14b4b;
}

#offCanvas .menu a:hover{
    background: #eee;
}

#offCanvas .menu .active > a{
    background-color: #e14b4b;
    color: white;
}
.submenu li{margin: 0px !important;}
.submenu a{
    width: 100%;
    text-align: center;
}