@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


body, a, p {
    font-family: "Roboto", sans-serif;



    font-weight:400;

}

strong {
    font-family: "Roboto", sans-serif;


    font-weight:600;
}

.title, h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;

    font-weight:800;
}


a {
    color:#1554ff;
}


.custom-color {
    color:#1554ff;


}

.custom-bg {
    background:#1554ff;
}

.pb-20 {
    padding-bottom:20px;
}
/*top bar*/



#sp-main-body {
    padding:50px 0;
}


.sp-contact-info li {

}

#sp-header-topbar .container-inner {
    border-bottom:0;
}

.breadcrumb  {
    background:none;
    float:right;
}

.breadcrumb li a {

    color:#333;
}

.breadcrumb-item.active {
    color:#333;

}

.breadcrumb li {
    background:#fff;
    padding:10px 20px;
}

/*header */


#sp-header .logo {
    height:100%;
}

.logo-image {
    padding:10px;
}

#sp-header, #sp-header-topbar {

    background:#2d2a26;

}


#sp-header {
    height:90px;

}

/*#sp-header.header-sticky .sp-megamenu-parent {
    margin:0;

}*/


.logo {
    padding:10px;
}

/*menu*/

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    font-size:18px;
    text-transform:uppercase;
    color:#fff;
    padding:8px;
    letter-spacing: 0.3px;
}


.sp-megamenu-parent>li.active>a:before {

}

.sp-megamenu-parent>li.active>a:after {

}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {

}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    border:2px solid #fff;
    line-height: 35px;
    color:#fff;
    font-size:18px;
    font-weight:600;

}




/*menu*/





/*bottoni*/

/*bottoni*/

.btn-primary, .sppb-btn-primary {
    background:#1554ff !important;
    border:#1554ff !important;
    color:#fff;
}

.btn-primary:hover, .sppb-btn-primary:hover {
    background:#10369d !important;
    border:#10369d !important;
}


.btn-secondary, .sppb-btn-secondary {
    background:#cf303c !important;
    border:#cf303c !important;
    color:#fff;
}

.btn-secondary:hover, .sppb-btn-secondary:hover {
    background:#d54f59 !important;
    border:#d54f59 !important;
}

.btn-personal{
    font-size: 16px;
    color: #fff !important;
    padding: 12px 30px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    border: 1px solid #fff;
    background: #1554ff;
    box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}


.btn-personal a, .sppb-btn-primary.sppb-btn-outline {
    color:#2d2a26;
}


.btn-personal::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    background: #fff;
    z-index: -1;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.btn-personal:hover::before, .sp-megamenu-parent>li:hover::before {
    width: 105%;
    height: 105%;
    color:#2d2a26;
}



.btn-personal:hover {
    background: #fff;
    color:#333 !important;
}


/*footer and bottom*/


#sp-footer {
    background:#000;
    text-align: center;
    color:#fff;

}

#sp-bottom {
    background: #fff ;
    color:#000 !important;
    line-height:20px;
    font-size:16px;
}

#sp-bottom a {
    color:#000;

}

#sp-bottom .sp-module ul {
    list-style: square;
    padding-left:15px;
}

#sp-bottom .sp-module ul>li {
    margin-bottom:5px;
    display: list-item;
}

#sp-bottom .sp-module .sp-module-title {
    letter-spacing: 2px;
    color:#000;
    text-transform: uppercase;
    font-size: 25px;
}


#sp-bottom a:hover {
    color:#2d2a26;
}

/*home*/


.box1 {

    padding: 80px 40px!important;
    clip-path: polygon(100% 5%,100% 95%,0 100%,0 0)!important;
    margin: 0!important;
    background-color: #1554ff!important;
    z-index:1;
    color:#fff;


}

.box2 {
    padding: 80px 40px!important;
    clip-path: polygon(100% 0,100% 100%,0 95%,0 5%)!important;
    margin: 0!important;
    background-color: #343a40!important;
    z-index:1;
    color:#fff;

}



/*contatti*/


#sp-menu ul.social-icons a {
    color:#fff;
}
.social-icon-whatsapp{
    background:#25D366;



}

.social-icon-whatsapp a {
    color:#fff;
    padding:8px;
}

.burger-icon>span, .offcanvas-active .close-offcanvas .burger-icon>span {
    background:#fff;
}

.offcanvas-menu {
    background:#000;
}

.offcanvas-menu .offcanvas-inner ul.menu>li a, .offcanvas-menu .offcanvas-inner ul.menu>li span, .offcanvas-menu .offcanvas-inner a, .offcanvas-menu .fa, .offcanvas-menu .fab, .offcanvas-menu .far, .offcanvas-menu .fas {
    color:#fff;
    opacity:1;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
    background:#fff;
    padding:5px;
}


/* CSS BOOTSTRAP SPECIFICI */

/* ------------------------------------------------------------------------------------ */

/* MOBILE */
@media (max-width: 767px){

    .logo-image {
        height: 45px !important;
    }

    h2 {
        font-size:2.5em !important;
    }


    h3 {
        font-size:1.8em !important;
    }

    .offcanvas-menu .logo-image {
        height: 50px !important;
    }

    #sp-header {
        height: 60px;
    }


}

/* IPAD VERTICALE */
@media (min-width: 768px) and (max-width: 1023px){

    .logo-image {
        height: 77px !important;
    }
    .offcanvas-menu .logo-image {
        height: 50px !important;
    }

    #sp-header {
        height: 80px;
    }
}

/* IPAD ORIZZONTALE e IPAD PRO VERTICALE */
@media (min-width: 1024px) and (max-width: 1365px){

    .logo-image{

        height: 60px !important;
    }

    .offcanvas-menu .logo-image {
        height: 50px !important;
    }

    #sp-header {
        height: 80px;
    }

    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, .sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
        font-size: 15px;
        padding:8px;
    }

}

/* IPAD PRO ORIZZONTALE */
@media (min-width: 1366px){



    .sp-contact-info span, .social-icons span, #content-address span {
        font-size:16px;
    }




    .logo-image {
        height: 77px !important;
    }

    .offcanvas-menu .logo-image {
        height: 50px !important;
    }

    #sp-header {
        height: 100px;
    }



    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, .sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
        font-size: 16px;
        padding:10px;
    }


}

@media (min-width: 1400px) and (max-width: 1679px){

    .sp-contact-info span, .social-icons span, #content-address span {
        font-size:22px;
        padding: 10px;
    }


    #sp-header {
        height: 100px;
    }

    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
        font-size:18px;

        padding:15px;
    }

}



@media (min-width: 1680px){



    .sp-contact-info span, .social-icons span, #content-address span {
        font-size:22px;
        padding: 10px;
    }


    .itemid-101 #sp-header {
        background:transparent;
    }

    .itemid-101 #sp-main-body {
        margin-top:-120px;
    }

    #sp-header.header-sticky  {
        background:#000;
    }

    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
        font-size:18px;

        padding:15px;
    }

}





.cc-revoke.cc-top {
    left: 0!important;
    font-size: 12px;
    top: auto!important;
    bottom: 0!important;
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}



.margin20 {
    margin-top:20px;
}

/*form*/



.bfQuickMode .bfElemWrap .form-inline label, .bfQuickMode .bfElemWrap .form-inline label, .bfQuickMode .bfElemWrap .form-inline label {
    width:95% !important;
}




.bfQuickMode .bfLabelLeft input, .bfQuickMode .bfLabelLeft textarea, .bfQuickMode .bfLabelLeft select, .bfQuickMode .bfLabelLeft button {
    padding:20px !important;
}

#bfLabel20 {
    width:80% !important;
}

.bfQuickMode .bfbs5-nonform-control, .bfQuickMode .nonform-control {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    float: left;
}

.bfQuickMode input[type=checkbox] {
    margin-right:10px !important;
}

.bfQuickMode .bfElemWrap .form-inline input[type="text"], .bfQuickMode .bfElemWrap .form-inline input[type="number"], .bfQuickMode .bfElemWrap .form-inline textarea, .bfQuickMode .bfElemWrap .form-inline select {
    max-width:  100% !important;
}