/*
Theme Name: 	Ufficiarredati Spider
Description: 	Responsive WordPress Theme based on Boostrap function and Font Awesome 5.15.
Version:     	2.0
Author:     	Alberto Cattani
Author URI:     https://albertocattani.com
Site:           https://albertocattani.com
Text Domain: 	spider
Domain Path: 	/languages
Tags:        	grid-layout, blog, custom-menu, featured-images, right-sidebar
License:    	GNU General Public License v3.0
License URI:	http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ------------------------------------------------------------------------- *
/* ! Fonts */
/* ------------------------------------------------------------------------- */



@font-face {
    font-family: 'Merriweather';
    src: url('fonts/Merriweather-Bold.woff2') format('woff2'),
        url('fonts/Merriweather-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('fonts/Merriweather-Black.woff2') format('woff2'),
        url('fonts/Merriweather-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Medium.woff2') format('woff2'),
        url('fonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2'),
        url('fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Light.woff2') format('woff2'),
        url('fonts/Inter-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Bold.woff2') format('woff2'),
        url('fonts/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------------- *
/* ! Color */
/* ------------------------------------------------------------------------- */

:root {
    --blue: #136DB5;
    --cyan: #3396D3;
    --white: #ffffff;
    --black: #000000;
    --red: #D31616;
    --ogreen: #82DD00;
}


/* ------------------------------------------------------------------------- *
/* ! Base */
/* ------------------------------------------------------------------------- */


/* ! Body */
body {
    font-family: 'Inter';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    background: #fff;
    margin: 0;
    padding: 0;
    line-height: 1.75;
    overflow-x: hidden;

}

strong {
    font-weight: 700;
}


/* h1,h2,h3,h4,h5,h6{font-family: "Recife Display";font-weight: bold;} */
h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: 900;
    font-style: normal;
}

a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 700;
}

/* ------------------------------------------------------------------------- *
/* ! Utility */
/* ------------------------------------------------------------------------- */

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

/* ! Buttons */
a.wp-block-button__link,
a.button,
.slider a.button,
.button {
    position: relative;
    display: block;
    border-radius: 0;
    border: 0;
    transition: 0.5s;
    text-align: center;
    padding: 10px 15px;
    color: #fff;
    width: 250px;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 20px 0;
    background: var(--red);
    z-index: 1;
    border: 2px solid var(--red);
    transition: 0.6s;
    border-radius: 5px;
}

a.wp-block-button__link {
    color: #fff;
    background: var(--red);
    border: 2px solid var(--red);
    width: auto;

}
a.wp-block-button__link strong {
    font-size: 1.25rem;

}

a.wp-block-button__link:hover {
    background: var(--blue);
    border: 2px solid var(--blue);
    color: #fff;
}

.slider a.button:hover,
.button:hover {
    background: var(--red);
    border: 2px solid transparent;
}

.wpcf7 .wpcf7-submit:disabled {
    opacity: 0.5;
}

/* ------------------------------------------------------------------------- *
/* ! body */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- *
/* ! Header */
/* ------------------------------------------------------------------------- */
header{width: 100%;}
header .header__container {background: var(--blue);display: flex;flex-direction: row;flex-wrap: wrap;position: relative;}


header .header__logo {width: 100%;}
header .header__logo a{margin: 0 auto 0 50px;display: block;text-align: center;}
header .header__logo img{width:500px;text-align: center;}

/* Navbar */
header  .navbar {
    width: 50px;
    height: 40px;
    position: absolute;
    top: 50px;
    right: 100px;
    z-index: 9999999;
    transition: all 0.6s;
    cursor: pointer;
}

header .navbar span {
    background: #fff;
    height: 8px;
    width: 50px;
    display: block;
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
}

header  .navbar span:nth-child(2),
header  .navbar span:nth-child(3) {
    margin-top: 10px;
}

/* Menu open */
body.menu-open header .navbar span:nth-child(1) {
    transform: rotate(45deg) translateY(13px) translateX(13px);
    background: #fff;
}

body.menu-open header .navbar span:nth-child(2) {
    background-color: transparent;
}

body.menu-open header .navbar span:nth-child(3) {
    transform: rotate(-45deg) translateY(-13px) translateX(13px);
    background: #fff;
}


/* ! Nav Header */
header .nav__header {width: 100%;height:100%;margin: 15px 0; padding: 0;justify-content: center;align-items: flex-end;z-index: 999;position: fixed;right: -100%;top:0;transition: 0.6s ;background: var(--red);}
body.menu-open header .nav__header{right: 0;}

header .nav__header nav {position: relative;z-index: 999;padding-top: 20%;}
header .nav__header nav ul {margin: 0;padding: 0;display: flex;flex-direction: column;list-style: none;}
header .nav__header nav ul li {position: relative;transition: 0.6s;}
header .nav__header nav ul li:hover a {color: var(--ogreen);opacity: 1;border-bottom-color: #fff}
header .nav__header nav ul li.current-menu-item a {color: var(--ogreen);}
header .nav__header nav ul li a {text-transform: uppercase;padding: 0px 20px;display: block;font-size: 2rem;margin: 0 8px;background: transparent;color: #fff;text-align: center;border-bottom: 2px solid transparent;border-top: 2px solid transparent;}
header .nav__header nav ul li a i {display: block;padding-top: 5px;}
header .nav__header nav ul li.menu-item-has-children a span::after{content: "\f0d7 ";font-family: "Font Awesome 5 Free";font-weight: 900;padding: 3px;display: inline-block;position: absolute;transition: 0.6s;line-height: 25px;}
header .nav__header nav ul li.menu-item-has-children.active a span::after{-ms-transform: rotate(180deg);transform: rotate(180deg);}
header .nav__header nav ul li.menu-item-has-children ul.sub-menu{position: absolute;background: #fff;left: 0;display: none;z-index: 9999;border-bottom: 4px solid var(--blue); display: flex;flex-direction: column;}
header .nav__header nav ul li.menu-item-has-children ul.sub-menu li{display: none;width: 0; transition: .6s;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li{display: block;width: 240px;margin: 0; padding: 0;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li a {text-align: left;padding: 0;color: var(--blue);background: #f6f6f6;margin:0;padding-left: 5px;border-color:transparent;border-bottom: 1px solid #ddd;line-height: 3rem;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li.current-menu-item a{color: #fff;background: var(--lgreen);}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li.current-menu-item a:before{content: "\f0da ";font-family: "Font Awesome 5 Free";font-weight: 900;color: #fff;padding-right:2px;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li a:hover{color:var(--lgreen);background: #fff;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li a:before{content: "\f0da ";font-size: 0px;transition: 0.6s;}
header .nav__header nav ul li.menu-item-has-children.active ul.sub-menu li a:hover::before{padding-right: 2px;color: var(--lgreen);font-family: "Font Awesome 5 Free";font-weight: 900;font-size: 1rem;}



/* Home subtitle */
header p.subtitle{text-align: center;margin: 0 auto;width: 100%;}

@media (max-width: 601px) {



}

.alignwide {
    max-width: 1350px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------------- *
/* ! Footer */
/* ------------------------------------------------------------------------- */

footer {
    background: var(--blue);
    color: #fff;
    border-top: 2px solid var(--cyan);
    margin-top: 50px;
}

footer a {
    color: #fff;
}
footer .footer__logo{max-width: 400px;}
footer .claim p{
    background: var(--red);
    text-align: center;
    color: #fff;
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
    margin-top: -30px;
    text-transform: uppercase;

}
/* ------------------------------------------------------------------------- *
/* ! Footer Credits */
/* ------------------------------------------------------------------------- */

footer p.mbcenter-title {
    font-size: 1em;
    line-height: 1.5rem;
}

footer .mbcenter-title a span {
    font-weight: bold;
}

footer .ottomedia {
    text-align: right;
    padding-top: 50px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 400;
    display: block;
    width: 100%;
    border-radius: 15px;
}

footer .ottomedia a span.logo {
    color: var(--ogreen);
}

footer .ottomedia a img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    margin-left: -10px;
    width: 150px;
    height: auto;
}

/* ------------------------------------------------------------------------- *
/* ! Back-to-top */
/* ------------------------------------------------------------------------- */

.back-to-top {
    display: block;
    position: fixed;
    line-height: 1rem;
    left: calc(50% - 27px);
    bottom: 5px;
    visibility: hidden;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    text-align: center;
    padding: 0;
    border-radius: 99px;
    border: 2px solid transparent;
    transition: 0.5s;
    background: var(--red);
    opacity: 0.7;
    z-index: 9;
}

.back-to-top:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px var(--red);
    width: 56px;
    height: 56px;
    left: calc(50% - 28px);
    border: 2px solid #fff;
}

.display-top .back-to-top {
    visibility: visible;
    z-index: 99;
}

.back-to-top a {
    color: #fff;
    padding: 0;
}

.back-to-top a .top-up {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.5s;
}

.back-to-top:hover a .top-up {
    top: 8px;
}

.back-to-top a .top-down {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.5s;
}

.back-to-top:hover a .top-down {
    top: 22px;
}

/* ------------------------------------------------------------------------- *
/* ! Form footer */
/* ------------------------------------------------------------------------- */
footer ul.nav-pills{display: flex; flex-direction: row;border-bottom: 2px solid var(--red);margin:0;list-style: none;cursor: pointer;font-size: 1rem;margin-block-start: 0;padding-inline-start:0;margin-bottom: 15px;margin-top: 15px;}
footer ul.nav-pills li{padding:10px 15px ;text-transform: uppercase;border-radius: 5px 0 0 0;transition: 0.6s;}
footer ul.nav-pills li.active{background: var(--red);color: #fff;}
footer .form-contact-info{height:0;position: fixed; left : 100vw; transition: 1s; overflow: hidden;}
footer .form-preventivo{height:0;position: fixed; left : 100vw; transition: 1s; overflow: hidden;}
footer .form-visita{height: 0;position: fixed; left : 100vw;transition: 1s; overflow: hidden;}
footer .form-contact-info.active{height:100%;position: static;}
footer .form-preventivo.active{height:100%;position: static;}
footer .form-visita.active{height:100%;position: static;}
footer .form-contact-info h5{text-transform: uppercase;padding: 10px;border-radius: 10px 0 0 0;font-size: 1rem;color: var(--green);margin: 0;}
footer h5.wp-block-heading{margin: 0;padding: 0;margin-bottom: 15px;margin-left: 15px;}
footer form label {display: inline-block!important;}

/* ------------------------------------------------------------------------- *
/* ! Gutenberg */
/* ------------------------------------------------------------------------- */

.subtitle {
    color: #fff;
    text-align: center;
    font-size: 1.75rem;
    font-family: 'Inter';
    font-weight: normal;
    font-style: normal;
}
@media (max-width: 768px) {
    .subtitle {

        font-size: 1rem;

    }
}


.title {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: 'Merriweather';

}
h2.h2__title{
    margin-bottom: 0;;
    
}

@media (max-width: 768px) {
    .title {
        font-size: 1.75rem;
    }
    h2.h2__title{
        font-size: 1.25rem;

    }
    .wp-block-spacer.cubetti{
        height: 0!important;
    
    }
}


 :where(.wp-block-columns.cubetti.is-layout-flex) {
    gap: 15px;
}
@media (max-width: 768px) {
    :where(.wp-block-columns.cubetti.is-layout-flex) {
        gap: 0;
    }
}

/* ------------------------------------------------------------------------- *
/* ! Contact Area */
/* ------------------------------------------------------------------------- */

.contact-area a.wp-block-button__link{
    font-size: 2rem ;
    padding: 1rem 4rem;

}



/* ------------------------------------------------------------------------- *
/* ! Cubetti*/
/* ------------------------------------------------------------------------- */
.cubetti h2 {
    font-size: 5rem;
    font-family: 'Inter';
    margin: 0;
}

.cubettti h3 {
    font-size: 2rem;
    font-family: 'Inter';
    font-family: 'Inter';
    font-weight: normal;
    font-style: normal;
}

section.city {
    color: #fff;
    padding: 4%;
}

section.city ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
}

section.city ul li:before {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    transition: 0.6s;
    padding-right: 3px;
}
@media (max-width: 768px) {
    section.city  :where(.wp-block-columns.is-layout-flex) {
        gap: 0;
    }
}

/* ------------------------------------------------------------------------- *
/* ! Footer title */
/* ------------------------------------------------------------------------- */
.footer__links{
    margin-top: 2rem;
    text-transform: uppercase;
    background: #3396D3;
    padding: 15px;
    border-radius: 15px;
}




/* ------------------------------------------------------------------------- *
/* ! Woocommerce */
/* ------------------------------------------------------------------------- */
.woocommerce-shop article h2::before{display: none;;}
.woocommerce-ordering select{border: 1px solid #eee;height: 2rem;}

/* Pagina della shop generale 
body.woocommerce-shop ul.products{display: flex;flex-wrap: wrap;flex-direction: row;width: 100%;}
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {margin: 1rem;width: 30%;background: #f8f8f8;}
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product span{padding: 5px;}*/



/* Woocommerce button */
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt{
    background-color: var(--blue);color: #fff;max-width: 100%;
}
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled[disabled]{
    color: #fff;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
    min-height: 3em;
    background: var(--blue);
    color: #fff;
}

.woocommerce .quantity .qty,
.woocommerce div.product form.cart .button, .woocommerce ul.products li.product .button{
width: 100%;
}
.woocommerce .quantity .qty{height: 3rem;font-size: 1.25rem;}
.product-template-default.woocommerce div.product form.cart{display: flex;}
.product-template-default.woocommerce div.product form.cart .button{width: 90%;}
.woocommerce div.product form.cart div.quantity{width: 10%;}

.woocommerce div.product form.cart .variations {padding: 15px;background: #eee;}
.woocommerce div.product form.cart .variations td, 
.woocommerce div.product form.cart .variations th{text-align: left;text-transform: uppercase;}
.woocommerce div.product form.cart .variations tr{
    display: flex;
    flex-direction: column;
}
.woocommerce div.product form.cart .variations select{
    height: 2.5rem;
}

.woocommerce-cart table.cart td.actions .coupon .input-text{height: 2.5rem;width: 300px;}
.woocommerce .woocommerce-ordering select{display: none;}

/* WOOCOMMERCE ACCOUNT LOGIN */
.woocommerce-account .woocommerce form.login{border: 1px solid #eee;background:#eee ;}


.woocommerce-account p.woocommerce-form-row{display: flex;flex-direction: row;}
.woocommerce-account p.woocommerce-form-row label{width: 25%;}
.woocommerce-account .woocommerce form .form-row input.input-text{border: 1px solid #ccc;height: 2rem; width: 300px;padding-left: 5px ;}
.woocommerce-account .woocommerce form .show-password-input, .woocommerce-page form .show-password-input{
    top: 5px;
}
.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__submit{margin-left: 5px;}


/* Woocommerce single page product */
.woocommerce div.product{margin-top: 2rem;}
.woocommerce div.product h1{font-size: 2rem;}


/* Woocommerce Form Checkout */
.woocommerce-checkout form.checkout .col-1,
.woocommerce-checkout form.checkout .col-2{max-width: none;}
.woocommerce-checkout form.checkout label{font-weight: bold;margin: 12px 0 0px;display: inline;width: 100%;}
li.wc_payment_method.payment_method_bacs label, li.wc_payment_method.payment_method_xpay label{display: inline;}
.woocommerce form.checkout .form-row {display: block;}
.woocommerce form.checkout input[type=text],
.woocommerce form.checkout input[type=email],
.woocommerce form.checkout input[type=number],
.woocommerce form.checkout input[type=password],
.woocommerce form.checkout input[type=search],
.woocommerce form.checkout input[type=tel],
.woocommerce form.checkout input[type=text],
.woocommerce form.checkout input[type=url]
{background: #fff;border: 1px solid #bbb;border-radius: 3px;padding: 10px;;height: 35px;line-height: 1rem;}
.woocommerce form.checkout select{padding-left: 5px;height: 28px;padding-left: 8px; padding-right: 20px;color: #444444;line-height: 28px;border-radius: 5px;padding-top: 3px; background: #fff;}
.woocommerce form.checkout span.optional{display: none;}
.woocommerce #coupon_code{height: 35px;;}

/* Select 2 */
.woocommerce form.checkout .select2 {width: 100%;}


.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text{border: 1px solid #bbb;border-radius: 3px;padding: 10px;height: 100px;}
/* ------------------------------------------------------------------------- *
/* ! Minicart */
/* ------------------------------------------------------------------------- */
.cart-shop{position: fixed;bottom: 20px;left: 60px;z-index:99999;}

.minicart { list-style-type : none; margin : 0px; width : 270px; max-height : 0px; overflow : hidden; position : absolute; z-index : 2; bottom : 62px; left : 25px; background : #ffffff; box-shadow : 0 10px 15px rgba(0,0,0,0.15); }
.minicart__inside { padding : 20px; position: relative;}
.minicart .widget { margin-bottom : 0; }
.minicart .widget li { position : relative; margin-top : 5px!important; }
.minicart .widget a { border : none; padding : 0px 0 0 0; color:#000 }
.minicart .widget a.button { padding : 10px; max-width: 100%;}
.minicart .widget_shopping_cart .total{ border-top : 1px solid #dddddd; margin-top : 10px; padding-top : 20px; }
.minicart .woocommerce-mini-cart__buttons { margin-bottom : 0; }

.cart-icon { display : block; position : relative; padding-bottom : 10px; margin-bottom : 10px; width : 40px; height : 40px; z-index : 30; }
.cart-icon .cart-contents { text-align : center; cursor : pointer; color : #333333; width : 60px; height : 60px; border-radius : 100px; font-size : 22px; line-height : 60px; position : relative; background : #dddddd; }
.cart-icon .cart-contents__number { position : absolute; height : 20px; width : 20px; line-height : 22px; border-radius : 20px; text-align : center; font-size : 10px; right : -5px; top : -4px; font-weight : bold; background : #fe316d; color : #ffffff; }

.cart--open { min-height : 50px; max-height : 600px; }
.woocommerce-mini-cart__buttons { margin-bottom : 0; }