/*
Theme Name: NXCQUADRO
Theme URI:
Author: soluzioni cquadro
Author URI: https://www.soluzionicquadro.com/
Description: OFFROAD EXPLORE, Salta in sella per la Sicilia, Italia, Europa. Noleggio moto Sicilia, enduro, crossover. Escursioni moto, Fornitura abbigliamento e action cam.
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:  one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, sticky-post, translation-ready
Text Domain: nxcquadro

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.
*/


/*************************************************
                          CSS GENERALE
bg logo 2b2a28
azzurro scuro 01a7e3
azzurro chiaro a8e1ff
bianco sporco c5c7c6
neretto 1d1d1b
**********************************************/

/* serve ad avere un top del mio menu, e quindi ad abbassarlo, solo quando accedo a wordpress, perchè il menu nero di
wordpress, copre il mio menu*/
.admin-bar .navbar{
  top:32px;
}


body{
  display:flex;
  min-height:100vh; /*vh st per vertical height cioè la totale altezza dello schermo, che però nel mio pc è 95*/
  flex-direction:column;
  padding-top:70px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color:#2b2a28;
  line-height: 28px;
}

/*solo nella home voglio un padding-top 0 altrimenti non vedo il menu e lo slider apparirà giu di 70 px come specificato nel
css di body*/
body{
  padding-top:0;
}

/*per evitare gli apazi bianchi in internet explorer*/
.main-content {
  flex:1 0 auto;
}
/*per evitare gli apazi bianchi in internet explorer*/
*{min-height:0.01px}

/*questo codice lo ha trovato su Google cercando : Transition all css e cliccando sul primo link. Serve a inserire animazioni*/
.animate {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

a{text-decoration: none; color:#000}
a:hover{color:#2EA4DD!important}
/*************************************************
                          UTILITIES
**********************************************/

/*.container-fluid{overflow: hidden; padding-right: 0!important; padding-left: 0!important}*/
.alignwide {max-width: 1300px; margin-right: auto;  margin-left: auto;  padding-right: 25px;   padding-left: 25px;   width: 100%;}
.alignfull{margin-right: auto;     margin-left: auto;    padding-right: 0px!important;    padding-left: 0px!important;    width: 100%;}
.desktop{display:block;}
.mobile{display: none}

h1{ /*font-family: "Alfa Slab One", serif;*/ font-family:"Rajdhani", sans-serif;  font-weight: 400;  font-style: normal; font-size:70px;text-transform:uppercase!important;}
h1, h2, h3, h4, h5, h6{ font-family:"Rajdhani", sans-serif;  color:#2b2a28;text-transform: uppercase; font-weight: bold;}
h3{color:#01a7e3;  font-weight: 600;}

h4{font-size: 20px; color: #2ea4dd; letter-spacing: 2px}
h2{font-size: 38px !important; line-height: 39px}

.elenco ul {  list-style: none;   padding-left: 20px;}
.elenco li::before {  content: "\2713";   color: #2EA4DD;   font-weight: bold;  display: inline-block;  width: 1em;         margin-left: -1em;}

strong, b{color:#000!important; text-decoration: underline; text-decoration-color: #2ea4dd !important;     text-underline-offset: 4px;    text-decoration-thickness: 3px !important;}
.border_left{padding-left: 10px;border-right: 2px solid #000;}
.icone img{width:70px!important}
.icone a {text-decoration: underline; text-decoration-color: #fff !important;     text-underline-offset: 4px;  text-decoration-thickness: 1px !important;}
.icone_contatti img{width:40px!important}


.card {padding: 100px 50px; background: radial-gradient(circle at 60% 54%, rgba(255, 255, 255, 1) 0%, #f0f2f3 93%);  color: #333333;   line-height: 1.6;
      border-radius:5px; border: none}
.card  ul {  list-style: none;   padding-left: 20px;}
.card  li::before {  content: "\2713";   color: #2EA4DD;   font-weight: bold;  display: inline-block;  width: 1em;         margin-left: -1em;}


.image-slant-container {
  width: 100%;
  margin: -20px 0;
  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
  background: #333;
  padding: 2px 0;
}

/*.slidingVertical {font-family: 'Brush Script MT', cursive;   font-size: 2.5rem;  margin-bottom: 30px;text-transform:none!important}*/


/*PULSANTI**/

.btn, .wp-block-button__link {  font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 500;  letter-spacing: 2px; text-transform: uppercase; background-color: #000; border:1px solid #000; border-radius: 3px; padding:15px 18px; color:#fff!important;}
.btn:hover, .wp-block-button__link:hover{background-color: #01a7e3; color:#fff!important; border:1px solid #01a7e3;}
/*.btn:after, .wp-block-button__link:after{  content: "→";   display: inline-block;  font-weight: bold;   margin-right: 6px;}*/

/* MODAL */
/* Rimuove lo sfondo bianco e i bordi dal modal */
.custom-modal-flat {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Assicura che l'immagine occupi tutto lo spazio e non abbia margini */
.custom-modal-flat img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Opzionale: aggiunge un leggero arrotondamento agli angoli della foto */
}

/* Rimuove il padding di default di Bootstrap sul corpo del modal */
.modal-dialog {
    margin: 10px auto; /* Regola lo spazio dai bordi dello schermo su mobile */
}

/********************************
  LINK CON FRECCIA
***************/
.link {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 30px;
    transition: all 0.4s cubic-bezier(.22, .61, .36, 1);
    overflow: hidden;
}

/* LA RIGA A SINISTRA (Invisibile all'inizio) */
.link::before {
    content: "";
    position: absolute;
    left: 0;
    width: 35px; /* Lunghezza della riga */
    height: 1.5px;
    background-color: currentColor;
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(.22, .61, .36, 1);
}

/* LA FRECCIA A DESTRA (Visibile all'inizio) */
.link::after {
    content: "→";
    position: absolute;
    right: 5px;
    font-size: 18px;
    transition: all 0.4s cubic-bezier(.22, .61, .36, 1);
    opacity: 1;
}

.link:hover {
    color: #000;
    padding-left: 45px;
    padding-right: 0;
}

/* La riga entra e si posiziona a sinistra del testo */
.link:hover::before {
    transform: translateX(0);
    opacity: 1;
}

/* La freccia a destra viene "espulsa" fuori dal bordo */
.link:hover::after {
    transform: translateX(40px);
    opacity: 0;
}



/*************************************************
                    CAROUSEL
**********************************************/
#carouselExampleCaptions{margin-top:70px}
#carouselExampleCaptions,
#carouselExampleCaptions .carousel-inner,
#carouselExampleCaptions .carousel-item {
    height: 100vh;
}


#carouselExampleCaptions .carousel-item img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}



.carousel-item::after { content: "";position: absolute; top: 0;  left: 0;width: 100%;    height: 100%; background: linear-gradient(to right, rgba(0,0,0, 0), rgba(0,0,0, 0.2));z-index: 1;}
.carousel-caption {  z-index: 2; }

.carousel-caption h1, .carousel-caption h3{color:#fff}
.carousel-caption {right:8%; bottom:36%; text-align: right}
.carousel-control-next, .carousel-control-prev{width:10%}
/********************************
         TESTO BG
**************************/
.bg_contenitore{background:radial-gradient(circle at 60% 54%, rgba(1, 167, 227, 0.25) 0%, #012a3a  93%)/*background: linear-gradient(to bottom, #c7c9c8  0%, #01a7e3 100%) !important;*/}
.contenitore{position:relative; z-index:0; padding-top: 8rem; padding-bottom: 8rem;}
.contenuto{position:relative; z-index:2}
.word_bg {color: #c0c0c0;   opacity:0.25; font-size: 240px; font-weight: 800;  text-transform: uppercase;  position: absolute; top: 366px;    right: 80px;  z-index: 1;    font-family: "Rajdhani", sans-serif;}
.word_bg_white{color: #fff; opacity:0.3;  font-size: 240px; font-weight: 800;  text-transform: uppercase;  position: absolute;  top: 366px;    left: 62px;    letter-spacing: 11px;    z-index: 1;    font-family: "Rajdhani", sans-serif; }
.word_bg_balkans{color: #c0c0c0;   opacity:0.25; font-size: 240px; font-weight: 800;  text-transform: uppercase;  position: absolute; top: 366px;    right: 62px;  z-index: 1;    font-family: "Rajdhani", sans-serif;}
.contenitore img{/*width:70%; */filter: drop-shadow(0 20px 15px rgba(0,0,0,0.7));}

/*************************************************
                          MENU
**********************************************/
.bg-primary{     backdrop-filter: blur(10px) !important;  background-color: rgba(255, 255, 255, 0.7) !important;}
.navbar-transparent .bg-primary{     backdrop-filter: blur(10px) !important;   background-color: #2b2a28 !important;}
.navbar-transparent.is-scrolled .bg-primary{     backdrop-filter: blur(10px) !important;    background-color:#2b2a28!important;}
.navbar-transparent.is-scrolled .dropdown-item, .navbar-transparent .dropdown-item{ background-color: #2b2a28!important; }
.navbar-transparent.is-scrolled .dropdown-menu, .navbar-transparent .dropdown-menu{background-color:transparent!important}
/*il logo*/
.navbar-brand{ width:130px;}
.navbar-transparent.is-scrolled .navbar-brand { width:110px!important;}
.page.is-scrolled .navbar-brand { width:110px!important;}
.navbar-brand img {width: 100%;}

/*per stilizzare l testo*/
.navbar-nav li{padding: 0 5px; font-family:"Rajdhani", sans-serif;}
.nav-link, .dropdown-menu, .dropdown-item{ text-transform: uppercase; font-size:18px; color:#fff!important; font-weight: 700;}
.nav-link:hover, .dropdown-menu:hover, .dropdown-item:hover{color:#2ea4dd!important}
.dropdown-menu {  margin-top: 0px!important; border: 0px!important;    border-radius: 0px!important;}
.dropdown-menu .dropdown-item{padding-top: 5px!important;padding-bottom: 5px!important}

.dropdown-bs-toggle:after { content: "▼";  margin-left: 6px;  font-size: 0.8em;}

.navbar-social a:hover{text-decoration: none; color: #2ea4dd}
.navbar-social a{text-decoration: none; color: #fff; font-size:22px}
/*
immagine menu hamburger
*/
.navbar-toggler-icon {
    background-image: url(/wp-content/themes/nxcquadro/img/bars-solid-full.png)!important;
}


.transposh_flags img{padding-right:10px}

/*************************************************
                    BLOCCHI
******************************************************/
/******IMMAGINI COPERTINA DI GUTENBERG*****/
.wp-block-cover{height:auto}
/******IMMAGINI*****/
/*per avere le immagini responsive*/
.wp-block-media-text__media img, .wp-block-image img{height:auto}
.has-white-color { color: #fff!important;}
/*****BLOCCO TESTO PIù IMMAGINE****/
/*per dare spazio a sinistra nelìi blocchi testo più immagine*/
.wp-block-media-text{background-color: #f7f9fb}
.wp-block-media-text__content{padding: 100px 50px 100px 50px!important}
/*TABELLE*/
.wp-block-table.is-style-stripes thead th, .wp-block-table.is-style-stripes td{padding: 15px 8px!important; }
.wp-block-table.is-style-stripes thead th{color:#25315c!important}


/****************************************************************
                HOME
****************************************************************/
/****************************************************************
                PAGINA
****************************************************************/

.parallax {    background-repeat:no-repeat;    background-attachment:fixed!important;    overflow:hidden;}
.jumbotron_page_img,
.parallax {padding:280px 0 280px!important; }
.jumbotron_page_noimg {padding:180px 0 100px!important; }

.jumbotron_page_img h1,
.jumbotron_parallax h1{font-size:80px;   font-weight: bold; line-height: 90px; color:#fff!important; text-transform: uppercase;}

.jumbotron_page_noimg h1{font-size:80px;   font-weight: bold; line-height: 90px; color:#fff!important; text-transform: uppercase;}


/*
.jumbotron_page_img .image-wrapper {  position: relative;  display: inline-block;}
.jumbotron_page_img .image-wrapper img {  width: 100%;  height: auto;  display: block; border-radius: 10px}
.jumbotron_page_img .image-wrapper .overlay {  position: absolute;  inset: 0;  background: rgba(8,104,150, 0.3);   pointer-events: none; }*/


/****************************************************************
                FOOTER
****************************************************************/
.footer h3{color:#fff!important; text-decoration: underline;text-decoration-color:#fff!important; text-underline-offset: 9px; text-decoration-thickness: 1px!important;}
.footer a:hover, .blog .footer a:hover, .category .footer a:hover{text-decoration: none; color: #01a7e3; font-weight: 400!important}
.footer a, .blog .footer a, .category .footer a{text-decoration: none; color: #fff; font-weight: 400!important}
.info,.partita_iva{color: #fff; font-size: 15px;}
.web_design, .web_designer a{font-size: 15px; color: #999!important}
 hr{border-top: 1px solid #fff;}
.policy, .policy a{font-size: 15px; text-align: right;color: #999!important}
.logo_footer{margin-top: 1.6rem}

.footer strong, .footer b{color:#fff!important;}
/****************************************************************
                CONTATTI
****************************************************************/

input[type="text"],  input[type="email"],  textarea, select{padding:3px 10px; border: none; border-bottom: 2px solid #2b2a28; width:100%!important; }
textarea{ height: 130px;   border: none; border-bottom: 2px solid #2b2a28;}
/*per eliminare che il bordo delle text area si colori al clic al suo interno*/
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ outline: none; border-bottom: 2px solid #25315C; }

/*titolo delle singole celle....nome....mail...*/
.wpcf7-form p{font-size: 16px; font-weight: bold; font-family: "Rajdhani", sans-serif; text-transform: uppercase; margin-top: 20px;}
.wpcf7-form .campo{font-weight: 600}
/*pulsante invia del form*/

.wpcf7-submit {  font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 500;  letter-spacing: 2px; text-transform: uppercase; background-color: #000; border:1px solid #000; border-radius: 3px; padding:5px 18px; color:#fff!important;}
.wpcf7-submit:hover{background-color: #01a7e3; color:#fff!important; border:1px solid #01a7e3;}
.wpcf7-submit:focus{outline: none}
.wpcf7-list-item{margin-left: 0px!important}



/****************************************************************
                Comments
****************************************************************/

.comments-title{margin-bottom:40px;}
.comments{padding-top:40px;}
.comments textarea{width: 100%;}
.comments label{min-width:80px;} /* per dare alle label name - email- website, la stessa larghezza*/
.comments ul,
.comments ol{
  list-style-type:none;
}

/*per non visulaizzare i pallini e la numerazione delle lista nei commenti*/
.comment-author img{ border-radius:999px;} /*per rendere rotanda l'immginetta di chi commenta, invece di quadrata*/
.comment .reply{border-bottom: 1px solid #ccc; margin-bottom: 30px;padding-bottom:10px;} /* serve a dare un pò di margini alle risposte ai commenti*/

/***************************************************************
          Stiliziamo l' input e la textarea
******************************************************************/

input,
textarea{padding:5px 10px; border:1px solid #ccc;}


/*************************************************
        widget
*******************************************************/

/*SEARCH*/

/* è la laber "search for"*/
.widget{margin-top: 10px!important}
.widget_search .screen-reader-text{display:block;}
.widget_search #s{width:70%; float:left;}
.widget_search #searchsubmit{width:30%; float:left; background:#fff;}
.widget_block  {margin-bottom: 5px!important}
.widget_block  h2{margin-bottom: 0px!important}
/*************************************************
          Stile delle paginazione
*************************************************/
/*mostra i numeri delle pagine più distanti e all'interno di un quadrato*/
.page-numbers{display: inline-block; padding:10px 15px; border:1px solid #ddd; margin-right:4px;}
.pagination{margin-bottom:40px;}


/*************************************************
          TABLET
*************************************************/
@media (max-width:998px){

}




/*************************************************
          CELLULARE
*************************************************/

@media (max-width:767px){

h1 { font-size: 50px;  }
h2{font-size: 35px!important; line-height: 40px}
.wp-block-cover__inner-container h2{font-size: 27px!important; line-height: 38px}
/*h4{font-size: 20px; color: #2ea4dd; letter-spacing: 2px}*/
.desktop{display:none}
.mobile{display:  block;}
/*.alignfull .wp-block-column{padding-left: 10px; padding-right: 10px;}*/
.alignwide{padding-left: 15px; padding-right: 15px;}
.wp-block-group{padding-left: 15px; padding-right: 15px;}
.word_bg,
.word_bg_white,
.word_bg_balkans{display: none}

.contenuto img{width:100%!important; height:auto!important}
.bg_contenitore {
    background: radial-gradient(circle at 24% 55%, rgba(1, 167, 227, 0.25) 15%, #012a3a 93%) /*background: linear-gradient(to bottom, #c7c9c8 0%, #01a7e3 100%) !important;*/;
}

.btn, .wp-block-button__link{padding:15px 10px}
.border_left{border-right:0px; padding-left: 0px!important;}
.border_left h2, .sottotitolo{text-align: center!important; margin-right: 0px!important;}

:where(.wp-block-columns.is-layout-flex) {    gap: 0.5em;}
/*.border_left{flex-basis:70%!important}
:where(.wp-block-columns.is-layout-flex) {    gap: 1em;}*/

/*************
    menu
**********/

.navbar-collapse {margin-top: 20px}
.navbar-brand img{width:50%!important}
.navbar-brand{ width:250px!important;}
.navbar-transparent.is-scrolled .navbar-brand { width:220px!important;}
.page.is-scrolled .navbar-brand { width:220px!important;}
.navbar-brand img {padding-top: 10px; padding-bottom: 5px; width: 40%;}
.navbar-social{display:inline;}
.navbar-social li {display:inline;}
.navbar-social li svg{  padding-top: 20px!important; padding-bottom: 20px!important}
.dropdown-menu .dropdown-item {    padding-top: 8px !important;    padding-bottom: 8px !important;}
.transposh_flags img{padding-right:10px; padding-bottom:20px; width:10%}
/******
CAROUSEL
******/
.carousel-caption {    right: 8%;    bottom: 28%;    text-align: left;}
/******
HOME
******/
.contenitore {padding-top: 46px!important;padding-bottom:2rem!important}
.contenitore img{padding-top: 40px; padding-bottom: 30px}
/******
BLOCCO GRUPPO
******/
/*per dare spazio a sinistra nelìi blocchi testo più immagine*/
.wp-block-media-text__content {  padding: 50px 20px 100px 20px!important;}

/****************
    PAGINA
****************/

.jumbotron_page_img h1, .jumbotron_parallax h1 {padding-left: 0px!important; font-size: 60px; line-height: 68px}
.page-id-538 .alignfull{padding-top: 0px!important}
/****************
    FOOTER
****************/

.info, .partita_iva,
.blog .info, .blog .partita_iva  { color: #fff; }
.web_design{margin-top: 10px}
.policy{text-align: left!important; margin-top: 20px}


}















/*************************************************
        general wordpress style
******************************************************/

.alignfull {
  width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;/*
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width: 99.9vw;
    width: 99.9vw;*/
}
/*imposta questo css perchè dento la pag blog, c'erano delle immagini di copertina troppo grandi*/
.post img{max-width:100%; height:auto;}


/* =WordPress Core (per le best practices di Wordpress.org)
-------------------------------------------------------------- */
.gallery-caption{
  padding:5px;
  font-size:10px;
}
.bypostauthor{
  border-left: 3px solid #ddd;
  padding-left:20px;
  }

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}