html,
    body {
        height: 100%;
    }
    
    @font-face {
        font-family: "DINPro";
        src: url("../fonts/DINPro-Black.woff2") format("woff2");
        font-weight: 700;
    }
    
    @font-face {
        font-family: "DINPro";
        src: url("../fonts/DINPro-Bold.woff2") format("woff2");
        font-weight: 800;
    }
    
    @font-face {
        font-family: "DINPro";
        src: url("../fonts/DINPro-Light.woff2") format("woff2");
        font-weight: 100;
    }
    
    @font-face {
        font-family: "DINPro";
        src: url("../fonts/DINPro-Medium.woff2") format("woff2");
        font-weight: 500;
    }
    
    @font-face {
        font-family: "DINPro";
        src: url("../fonts/DINPro-Regular.woff2") format("woff2");
        font-weight: 200;
    }
    
    body {
        background: #ffffff;
        font-family: "DINPro";
        color: #808080;
        display: flex;
        font-weight: 200;
        flex-flow: column;
    }
    
    footer {
        margin-top: auto;
        border-top: 1px solid silver;
        font-size: smaller;
        bottom: 0;
        width: 100%;
        /*height: 4em;*/
        padding-top: 0.5em;
    }
    
    main {
        margin-top: 10em;
    }
    
    .breadcrumb.briciole {
        background-color: transparent;
        border-width: 0;
        padding-left: 0;
    }
    
    .breadcrumb-item a {
        text-decoration: none;
    }
    
    .breadcrumb-item a:hover {
        text-decoration: none;
        color: #808080;
    }
    /*menu*/
    
    .navbar-light .navbar-nav .nav-link {
        color: rgba(0, 0, 0, 0.5);
    }
    
    .navbar-light .navbar-nav .nav-link:hover {
        color: #39d52d;
    }
    
    .navbar {
        border-bottom: 1px solid silver;
        padding-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        background-color: #fff;
    }
    
    .top,
    .logo,
    .bottom {
        display: flex;
        flex-wrap: wrap;
    }
    
    .img-fluid {
        border-radius: 35px;
    }
    
    i.fa {
        margin: 0.5em;
        font-size: 1em;
        color: #39d52d;
        border: 1px solid #39d52d;
        border-radius: 50%;
        padding: 0.6em;
        transition: all .5s ease;
        width: 2.3em;
        text-align: center;
    }
    
    ul.menu-principale {
        margin-top: 40px;
        padding-bottom: 0px;
    }
    
    aside,
    section {
        margin-bottom: 4em;
    }
    
    article {
        min-height: 200px;
        /* border-bottom: 1px solid silver; */
        /*margin-top: 1em;*/
        margin-bottom: 1em;
    }
    
    article.progetto {
        border-bottom: 0px!important;
    }
    
    article .round img,
    .project .round img {
        width: 170px;
        height: 170px;
        border: 2px solid #39d52d;
        padding: 1px;
    }
    
    article img,
    .project img {
        max-width: 100%;
        padding: 1em 0;
    }
    /*PROGETTI*/
    
    #projects .card-header {
        padding-right: 0px;
        background-color: transparent;
        margin-left: 12px;
    }
    
    #projects .card-img-left {
        width: 60px;
        height: 60px;
        border: 3px solid #39d52d;
    }
    
    #projects .card-img-left.territorio {
        border-color: #00572c;
    }
    
    .badge.territorio {
        background-color: #00572c;
    }
    
    .badge-chiuso {
        color: #fff;
        background-color: #808080;
    }
    
    #projects .card-img-left.educazione {
        border-color: #811a15;
    }
    
    .badge.educazione {
        background-color: #811a15;
    }
    
    #projects .card-img-left.sviluppo-economico {
        border-color: #7f5618;
    }
    
    .badge.sviluppo-economico {
        background-color: #7f5618;
    }
    
    #projects .card-img-left.inclusione-sociale {
        border-color: #3c1e4c;
    }
    
    .badge.inclusione-sociale {
        background-color: #3c1e4c;
    }
    
    #projects .card-img-left.comunita {
        border-color: #cc5a1b;
    }
    
    .badge.comunita {
        background-color: #cc5a1b;
    }
    
    #projects .card-img-left.cultura {
        border-color: #043b5a;
    }
    
    .badge.cultura {
        background-color: #043b5a;
    }
    
    #projects .card {
        margin-bottom: 15px;
    }
    
    #projects .titolo-progetto a {
        text-decoration: none;
        font-size: 1.1em;
    }
    
    .progetti .badge {
        font-size: .9em;
        /*font-style: none;*/
        font-weight: 400;
        padding: 5px;
    }
    
    .progetti .descrizione {
        color: #808080;
        font-style: italic;
        font-size: 1.1em;
    }
    
    a {
        color: #39d52d;
        text-decoration: underline;
    }
    
    .page-footer a.nav-link {
        text-transform: none;
        font-size: 1.2em;
    }
    
    a.nav-link {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.02em;
    }
    
    .dropdown-menu a.dropdown-item {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.02em;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #39d52d;
        text-decoration: none;
    }
    /*BLOCCO DONAZIONI*/
    
    .bg-fondazione {
        background-color: #39d52d;
    }
    
    #donazioni h3 {
        margin-top: .5em;
        font-size: 1.4em;
        font-weight: 400;
        color: #808080;
    }
    
    #donazioni,
    #info-progetto {
        min-height: auto;
        height: auto;
    }
    
    #donazioni .card,
    #info-progetto .card {
        border: 0;
    }
    
    #donazioni .card-header,
    #info-progetto .card-header {
        background-color: #39d52d;
        text-transform: uppercase;
        color: #fff;
        font-size: 1.3em;
        /*font-weight: 400;*/
        padding: 10px;
        text-align: center;
    }
    
    #donazioni .card-body,
    #info-progetto .card-body {
        border-left: 1px solid #39d52d;
        border-right: 1px solid #39d52d;
        border-bottom: 1px solid #39d52d;
        border-top: 0;
        border-radius: 0 0 25px 25px;
    }
    
    #donazioni .card-header:first-child,
    #info-progetto .card-header:first-child {
        border-radius: 20px 20px 0 0;
    }
    
    #donazioni .card-text img {
        width: 100px;
        height: 100px;
        border: 2px solid #39d52d;
        border-radius: 25px;
    }
    
    #donazioni .blocco-donazioni h2 {
        background-color: #39d52d;
        text-transform: uppercase;
        color: #fff;
        font-size: 1.2em;
        padding: 10px;
    }
    /*blocco descrizione tutti i progetti*/
    
    .card.progetti {
        border-radius: 25px;
    }
    
    .progetti .card-header {
        border-bottom: 0px;
    }
    /*blocco destra descrizione singolo progetto*/
    
    #info-progetto h3 {
        color: #808080;
        font-size: 1.1em;
        margin-bottom: 2px;
    }
    
    #info-progetto ul li {
        color: #808080;
    }
    
    p.info-progetto {
        font-size: 1.1em;
    }
    
    #donazioni .block-content {
        padding: 3px 10px;
        text-align: center;
    }
    
    #donazioni p.donazioni {
        color: #808080;
        margin-bottom: 5px;
        text-align: left;
        font-size: 1.1em;
        font-style: italic;
        margin-top: 7px;
    }
    
    #donazioni a {
        text-decoration: none;
    }
    
    #donazioni .btn {
        text-align: right;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
    .btn-primary:hover {
        color: #39d52d;
        background-color: #fff;
        border: 1px solid #39d52d;
    }
    
    .btn-primary {
        color: #fff;
        background-color: #39d52d;
        border: 0px;
    }
    
    a:hover {
        color: #808080;
        text-decoration: underline;
    }
    
    .sfondo {
        background-image: url('../img/sfondo.jpg');
        background-position: top left;
        background-size: auto;
        background-repeat: no-repeat;
    }
    
    #cerca {
        padding-bottom: 1em;
    }
    
    [v-cloak]>* {
        display: none;
    }
    
    [v-cloak]::before {
        content: " ";
        display: block;
        width: 40px;
        height: 40px;
        margin: 100px auto;
        background-color: #333;
        border-radius: 100%;
        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
        animation: sk-scaleout 1.0s infinite ease-in-out;
    }
    
    @-webkit-keyframes sk-scaleout {
        0% {
            -webkit-transform: scale(0)
        }
        100% {
            -webkit-transform: scale(1.0);
            opacity: 0;
        }
    }
    
    @keyframes sk-scaleout {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        100% {
            -webkit-transform: scale(1.0);
            transform: scale(1.0);
            opacity: 0;
        }
    }
    
    .md-50 {
        margin-top: 50px;
    }
    
    .pag-progetto {
        padding-top: 25px;
    }
    
    .btn-sm,
    .btn-group-sm>.btn {
        font-size: .9rem;
    }
    
    a .leggi {
        font-size: 1.1em;
    }
    
    .news p {
        color: #808080;
        margin-bottom: 0px;
    }
    
    .news {
        font-size: 1.2em;
    }
    
    .news h2 a {
        text-decoration: none;
        margin-bottom: 0px;
        font-size: 1em;
    }
    
    .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #39d52d;
        border-color: #39d52d;
    }
    
    ul.filtro-progetti li {
        list-style: none;
        display: inline;
        text-align: center;
    }
    
    h1.pagina-progetti {
        color: #808080;
        text-align: center;
    }
    
    h1.pagina-progetto,
    h2.pagina-progetto,
    h1.pagina-article,
    h2.pagina-article {
        color: #808080;
        text-align: left;
    }
    
    .filtro-progetti {
        text-align: center;
    }
    
    .filtro-progetti a {
        margin-left: 5px;
        text-decoration: none;
        font-size: 1.2em;
        border-right: 1px solid silver;
        padding-right: 8px;
    }
    
    .filtro-progetti a.ultimo {
        border-right: 0px;
    }
    /*.custom-control {
  display: inline;
}*/
    
    .custom-control-input:checked~.custom-control-label::before {
        color: #fff;
        border-color: #39d52d;
        background-color: #39d52d;
    }
    /*paginatore*/
    
    .page-link {
        background-color: #fff;
        border: 0px solid #dee2e6;
    }
    
    .pagination>li>a,
    .pagination>li>span {
        border-width: 0;
    }
    
    .page-item.disabled .page-link {
        background-color: #fff;
        ;
    }
    
    .pagination>li>a:hover {
        border-bottom: 0px solid silver;
        background-color: #fff;
    }
    
    .custom-switch {
        margin-top: 20px;
    }
    
    h4.contatti {
        margin-top: 30px;
        margin-bottom: 5px;
    }
    
    .allegati ul {
        padding: 0;
        margin: 0;
    }
    
    .allegati li {
        list-style: none;
    }
    
    .nav-link {
        display: block;
        padding: .5rem 1rem;
    }
    
    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }
    
    .nav-tabs {
        border-bottom: 1px solid #dee2e6;
    }
    
    .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }
    
    .projects-enter {
        transform: scale(0.5) translatey(-80px);
        opacity: 0;
    }
    
    .projects-leave-to {
        transform: translatey(30px);
        opacity: 0;
    }
    
    .projects-leave-active {
        position: absolute;
        z-index: -1;
    }
    
    .project {
        transition: all .35s ease-in-out;
    }
    
    .fixed-top {
        z-index: 900;
    }
    
    .search {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-30%, 0%);
        transition: all 1s;
        width: 50px;
        height: 50px;
        background: white;
        box-sizing: border-box;
        border-radius: 25px;
        border: 4px solid white;
        padding: 5px;
    }
    
    .inputsearch {
        position: relative;
        top: 0;
        left: 0;
        width: 200px;
        ;
        line-height: 30px;
        outline: 0;
        border: 0;
        display: none;
        font-size: 1em;
        border-radius: 20px;
        padding: 0 20px;
        border: 1px solid lightgray;
        margin-left: -70px;
    }
    
    .iconasearch {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 50%;
        color: #07051a;
        text-align: center;
        font-size: 1.2em;
        transition: all 1s;
        margin-top: 15px;
    }
    
    .search:hover {
        width: 200px;
        cursor: pointer;
    }
    
    .search:hover input {
        display: block;
    }
    /*.search:hover .iconasearch{
        background: #07051a;
        color: white;
    }*/
    
    .disabled {
        pointer-events: none;
        cursor: pointer;
    }
    
    td.actions {
        min-width: 15%;
    }

    .dona .form-check{
        padding-left: 0px;
    }