/*------------------------------------
Cassiopeia BarbaraGambini 
Custom Theme
bg@barbaragambini.com
2025-03-15
-------------------------------------*/

/*------------------------------------------
font
-------------------------------------------*/

.font-freeroad { font-family: 'Freeroad Bold', sans-serif; }
.font-opensans { font-family: 'Open Sans', sans-serif; }
.font-opensans-c { font-family: 'Open Sans Condensed', sans-serif; }
.font-muli { font-family: 'Muli', sans-serif; }
.font-coda { font-family: 'Coda', cursive; }
.font-oswald { font-family: 'Oswald', sans-serif; }
.font-anton { font-family: 'Anton', sans-serif; letter-spacing:0.03em; }
.font-norffo { font-family: 'Norffo'; }
.font-norffo-i { font-family: 'Norffo Italic'; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-pacifico { font-family: 'Pacifico', cursive; }
.font-rancho { font-family: 'Rancho', cursive; }
.font-lato { font-family: 'Lato', sans-serif; }
.font-arvo { font-family: 'Arvo', serif; }
.font-titillium { font-family: 'Titillium Web', sans-serif; }
.font-roboto { font-family: 'Roboto', sans-serif; }
.font-roboto-c { font-family: 'Roboto Condensed', sans-serif; }
.font-laila { font-family: 'Laila', serif; }
.font-roboto-slab { font-family: 'Roboto Slab', serif; }
.font-kaushan { font-family: 'Kaushan Script', cursive; }
.font-nunito-sans {font-family: 'Nunito Sans', sans-serif; }
.font-noto-sans-KR { font-family: 'Noto Sans KR', sans-serif; }
.font-lora { font-family: 'Lora', serif; }
.font-pt-sans { font-family: 'PT Sans', sans-serif; }
.font-nunito-sans {font-family: 'Nunito Sans', sans-serif; }
.font-caveat {font-family: 'Caveat', cursive; }
.font-poppins { font-family: 'Poppins', sans-serif;} 
.font-raleway { font-family: 'Raleway', sans-serif; }
.font-dosis {font-family: 'Dosis', sans-serif;}
.font-maven-pro { font-family: 'Maven Pro', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-catamaran { font-family: 'Catamaran', serif; }
.font-source-sans-3 { font-family: 'Source Sans 3', sans-serif; }
.noto-serif { font-family: "Noto Serif", serif; }
.font-quicksand { font-family: "Quicksand", serif; }
.font-lilita-one { font-family: "Lilita One", sans-serif; }
.font-barlow { font-family: "Barlow", sans-serif; }
.font-barlow-condensed { font-family: "Barlow Condensed", sans-serif; }
.font-barlow-semi-condensed { font-family: "Barlow Semi Condensed", sans-serif; }
.font-sansita { font-family: "Sansita", sans-serif; }

/*-------------------------
colori
-------------------------*/

.rosso { color:#c4211a; }
.pink { color: #ff3066; }
.rosso-mattone { color:#7c0505; }
.marrone { color:#330000; }
.blu { color:#014578; }
.ciano { color:#00a7ff;}
.giallo { color:#FFE500; }
.green { color:#00b9a9; }
.light-green { color:#76ffee; }
.light-blue { color:#e5ecf8; }
.dark-green { color:#175d6d; }
.dark { color:#444; }
.heavy-green { color:#1d2b0b; }
.gold { color: #fff; }
.bianco { color: #fff; }
.orange { color:#ef7d00; }
.black { color:#000; }

.marrone-bg { background-color:#330000; }
.rosso-mattone-bg { background-color:#7c0505; }
.rosso-bg { background-color:#c4211a; }
.ciano-bg { background-color:#00a7ff;}
.giallo-bg { background-color:#FFE500; }
.bianco-bg { background-color:#fff; }
.blu-bg { background-color:#014578; }
.green-bg { background-color:#00b9a9; }
.dark-green-bg { background-color:#175d6d; }
.dark-bg { background-color:#444; }
.pink-bg { background-color: #ff3066; }
.black-bg { background-color:#000; }
.light-grey { color:#ccc;}

.light-green-bg { background-color:#76ffee; }
.light-blue-bg { background-color:#e5ecf8; }
.heavy-green-bg { background-color:#1d2b0b; }
.white-bg { background-color:#fff; }
.orange-bg { background-color:#ef7d00; }
.gold-bg { background-color: #fff; }


.light-grey-bg { background-color:#e9e8e4 ; }
.cold-grey-bg { background-color:#d1d4d9 ; }

.dark-grey { color:#222222;}
.dark-grey-bg { background-color:#2d2d2e; }

.grey { color:#6e6e6e;}
.grey-bg { background-color:#6e6e6e; }

/*
Codici Colore del Thema
-----------------------------------------*/

.pink			{ color:#de3067; }
.pink-bg		{ background-color:#de3067; }
.pink-dark		{ color:#50333f; }
.pink-dark-bg	{ background-color:#50333f; }


.yellow			{ color:#c7dd4d; } 
.yellow-bg		{ background-color:#c7dd4d; }
.yellow-dark	{ color:#485212; }
.yellow-dark-bg	{ background-color:#485212; }


.cyan			{ color:#4abcd1; }
.cyan-bg		{ background-color:#4abcd1; }
.cyan-dark		{ color:#2d404d; }
.cyan-dark-bg	{ background-color:#2d404d; }

/*cyan-middle-dark*	#33a2b8 /

/*-----------------------------------------*/
::-webkit-selection { color: #fff;  background: #4abcd1; }
::-moz-selection 	{ color: #fff;  background: #4abcd1; }
::selection      	{ color: #fff;  background: #4abcd1; } 
/*-----------------------------------------*/



.text-16 { font-size:16px; }
.text-18 { font-size:18px; }
.text-20 { font-size:20px; }
.text-25 { font-size:25px; }
.text-30 { font-size:30px; }
.text-35 { font-size:35px; }
.text-40 { font-size:40px; }
.text-45 { font-size:45px; }
.text-50 { font-size:50px; }
.text-60 { font-size:60px; }
.text-70 { font-size:70px; }
.text-80 { font-size:80px; line-height:.9; }
.text-90 { font-size:90px; line-height:.7; }
.text-xxl { font-size:120px; line-height:.7; }


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

.border-radius-3 { border-radius:3px; }
.border-radius-5 { border-radius:5px; }
.border-radius-8 { border-radius:8px; }
.border-radius-10 { border-radius:10px; }
.border-radius-15 { border-radius:15px; }
.border-radius-20 { border-radius:20px; }
.border-radius-25 { border-radius:25px; }
.border-radius-30 { border-radius:30px; }
.border-radius-35 { border-radius:35px; }
.border-radius-40 { border-radius:40px; }

.letter-spacing-005 { letter-spacing:.05em; }
.letter-spacing-010 { letter-spacing:.1em; }
.letter-spacing-015 { letter-spacing:.15em; }
.letter-spacing-020 { letter-spacing:.2em; }
.letter-spacing-025 { letter-spacing:.25em; }

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


.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }


.max-width-90 { max-width:900px; }
.max-width-80 { max-width:800px; }
.max-width-70 { max-width:700px;  }
.max-width-60 { max-width:600px; }
.max-width-50 { max-width:500px; }
.max-width-40 { max-width:400px; }
.max-width-30 { max-width:300px; }


.opacity-10 { opacity:.1; }
.opacity-20 { opacity:.2; }
.opacity-30 { opacity:.3; }
.opacity-40 { opacity:.4; }
.opacity-50 { opacity:.5; }
.opacity-60 { opacity:.6; }
.opacity-80 { opacity:.8; }
.opacity-90 { opacity:.9; }

/*
Scroll to Bottom
--------------------------------------------------*/


.scroll-to-bottom {
position: relative;
overflow: hidden;
width: 90px;
height: 45px;
display: block;
text-align: center; text-decoration: none; color: #000;
display: flex; justify-content: center; align-items: center; }


/* bollo */
.scroll-to-bottom:after { 
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff;
text-align: center;
color: #000;
bottom: -45px;
left: 0;
transition: .2s all;
transform-origin: top center;
}

/* freccia */
.scroll-to-bottom:before { 
position:relative; z-index: 10;
content: ""; height: 20px; width: 20px;

background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000000' d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E");

animation:shake 1s infinite;
    
}



@-webkit-keyframes shake {
0% { transform: translateY(-.15rem); }
50% { transform: translateY(.3rem); } 
100% { transform: translateY(-.15rem); } 
}
@keyframes shake { 
0% { transform: translateY(-.15rem); }
50% { transform: translateY(.3rem); } 
100% { transform: translateY(-.15rem); }
}


.hp-section-header.sps.sps--abv .scroll-to-bottom:after { transform: scale(1) translate(0, 0); }
.hp-section-header.sps.sps--blw .scroll-to-bottom:after { transform: scale(0) translate(0, -30%); }

.hp-section-header.sps.sps--abv .scroll-to-bottom:before {  display: block; }
.hp-section-header.sps.sps--blw .scroll-to-bottom:before {  display: none; }

/*
Reset Tema Cassiopeia
-------------------------------------------------------*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family:unset; font-weight:inherit; }

.container-header { box-shadow:none; background:none!important; }
.mod-menu { flex-direction: inherit; }
.left.item-image { float: inherit; }



/*
Brand
-------------------------------------------------------*/

a.brand { text-decoration:none; text-decoration:none; }
a.brand h1 { line-height:1; font-family: 'Sansita', sans-serif ; font-size:24px; margin-bottom:4px; margin-top:0;font-weight:800; font-style: italic;  } 
a.brand h2 { line-height:1; margin:0; text-transform:uppercase; font-size:11px; font-family:Roboto Condensed, sans-serif; letter-spacing:.09em;  }

a.brand:hover img {
transform: rotate(360deg);
transition: 0.3s all 0s;
}

a.brand img {
transition: 0.3s all 0s; 
}

.gear { position: relative; }

/*
https://barbaragambini.online/images/favicon-gear-white.svg
https://barbaragambini.online/images/portfolio/graphic-design/BG-EyeGear-white-2023.svg
*/


.gear:before { 
display: block; content: "";  width: 70px; height: 40px; 
background: url("/images/BG-EyeGear-white-2023.svg") no-repeat center center / 100%; 
transition: 0.3s all 0s;
}


a.brand:hover .gear:before {
transform: rotate(360deg);
transition: 0.3s all 0s;
}


/*versione bianco*/
.brand-white a.brand,
.brand-white a.brand h1,
.brand-white a.brand h2 { color: #fff; }

/*versione nero*/
.brand-black a.brand,
.brand-black a.brand h1,
.brand-black a.brand h2 { color: #000; }
.brand-black .gear:before {background-image: url("/images/BG-EyeGear-black-2023.svg"); }


#mod-custom124 a.brand.d-inline-block



/*
OFF-Canvas 2022
------------------------------*/

.bg-offcanvas-menu .offcanvas-body ul.mod-menu { 

margin-bottom: 0; list-style-type: none;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40% 0 40% 30%;
width: 100%;
}


.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li { margin-bottom: 1.4rem; position: relative; }
.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li:last-child { margin-bottom:0; }


.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a { 
line-height: 1; font-size: 25px; font-weight: bold; display: block; position: relative; text-decoration: none; color: #000; font-weight: 500;  }

/*

.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a:before {
font-family: "Font Awesome 6 Brands";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;    
    
    
font-weight: 900; text-decoration: none; font-size:18px; text-align:center;
position:relative; content: "\f0ad"; z-index: 10; display: block; position: absolute; left: -2rem; top: .4rem;
color: #175d6d;
}

.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a.artworks:before { content: "\f568";  }
.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a.graphic-design:before { content: "\f568";  }
.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a.chi-sono:before { content: "\f06e";  }
.bg-offcanvas-menu .offcanvas-body ul.mod-menu > li > a.contatti:before { content: "\f1d8";  }

*/

.bg-offcanvas-menu .social-icons { padding:1rem 0 .5rem; border-top: 1px solid #ddd;
display: flex !important;
justify-content: space-between !important;
}
.bg-offcanvas-menu .social-icons a { color: #000; font-size: 20px; padding: 0 10px !important; } 

.offcanvas-header { justify-content: flex-end;  }

.bg-offcanvas-menu .offcanvas-body ul.mod-menu li a span { color: #175d6d; position: absolute; left: -45px; padding: 0 !important; top: 1px; }

/*
BG Menu Section Header 2022
------------------------------*/

body.homepage { background: #000; }
body.homepage .bg-nav { background:#175d6d; }

.bg-nav { background: #000; }


.hp-section-header.sps--abv .fissa { position: relative; }
.hp-section-header.sps--blw .fissa { position: fixed; top: 0; left: 0; width: 100%; z-index: 500; }


.bg-main-menu ul.mod-menu { display:flex; justify-content:flex-end ;margin-bottom: 0; padding: 0; flex-direction: row;  } 
.bg-main-menu ul.mod-menu li { list-style-type: none; min-width:200px; text-align: center; padding: 0; } 

.bg-main-menu ul.mod-menu li a { 
font-family:Roboto; text-transform: uppercase; color:#898989; font-weight: 800; font-family: Roboto Condensed, sans-serif; text-decoration: none;
display: block; padding: 1.8rem 0; line-height: 1;
}


.bg-main-menu ul.mod-menu li.active a { color: #fff; }

.bg-main-menu ul.mod-menu li a span { padding: 0!important; margin-right:.5rem; } /*icona*/


.homepage .hp-section-header .custom-bg-color { background: #175d6d; }
.homepage .bg-main-menu {  }
.homepage .bg-main-menu ul.mod-menu li a { color:#fff; }
.homepage .bg-main-menu ul.mod-menu li a:hover { background: #3ebaae; }







/*------------------------------------------------------------
offline.php
--------------------------------------------------------------*/
.coming-soon body .coming-soon-login { max-width: 300px; margin: auto; }
.coming-soon body .coming-soon-login .row { justify-content: center; }
.coming-soon body form#form-login input.btn.btn-success.login { width: 280px; background: #3ebaae; color: #fff; text-transform: uppercase; font-weight: 700; padding: 10px; }



/*------------------------------------------------------------
pager
--------------------------------------------------------------*/


nav.pagenavigation { padding:1rem 2rem; margin: 0; border-top: none;  }
 
nav.pagenavigation .pagination { margin: 0;  }

nav.pagenavigation a {  border:none; color: #666; padding: 0.8rem 4rem; border-radius: 0; text-decoration:none; position: relative; z-index: 2; background: none; }
nav.pagenavigation a:hover, 
nav.pagenavigation a:focus { background:none; }

nav.pagenavigation a span[aria-hidden="true"] { position: relative; z-index: 4; padding: .3rem .5rem; }
body.dark-theme nav.pagenavigation a span[aria-hidden="true"] { background: black;  }
body.light-theme nav.pagenavigation a span[aria-hidden="true"]  { background: white;  }

nav.pagenavigation a.previous { }
nav.pagenavigation a.next { }

nav.pagenavigation a { position: relative; z-index:1; }
nav.pagenavigation a:after { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/images/arrow.svg) no-repeat center center / auto; }
nav.pagenavigation a.previous:after { transform: rotate(-180deg); }

nav.pagenavigation a span.icon-chevron-left,
nav.pagenavigation a span.icon-chevron-right { display: none; }



/*
Articoli / GENERALI
------------------------------*/

.article-list .article { border: none; border-radius:0; }
.img_caption p.img_caption, .article-intro-image a figcaption.caption{ display:none; }
.article-details .article-ratings-social-share { display:none !important; }
.com-content-article__body { padding:1.4rem; }
.page-header h1 { font-weight: 200; }
.article-header h1 { margin:2rem 0; }
body.view-article main .com-content-article .page-header h1 { font-size: 40px; } /*titolo articolo esteso*/


/*
Articoli / DEFAULT
------------------------------*/

body.default-theme { background:#222; color: #ccc; }


/*
Portfolio / GENERALI
------------------------------*/



body.portfolio main .com-content-article .page-header h1 { margin-bottom: 1.5rem; font-size: 50px; text-align: center; }

body.portfolio  .article-list .article { margin-bottom: 30px; padding:0px ; }
body.portfolio  .article-list .article .article-intro-image  { margin: 0; padding:10px; border:none; }
body.portfolio  .article-list .article .article-intro-image img { border-radius: 0; }

body.portfolio .com-content-category-blog.blog .box .item-content .page-header h1, 
body.portfolio .com-content-category-blog.blog .box .item-content .page-header h2 { 
margin:.5rem auto 0 ; text-align:center; color:#666; padding:0; font-size: 15px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; }

body.portfolio figcaption.caption { display: none; }
body.portfolio figure { margin-bottom: 0;}
body.portfolio figure img { aspect-ratio: 1 / 1; object-fit: cover;  width: 100%; }


body.portfolio .com-content-category-blog.blog .box { padding: .4rem; height: 100%; }

body.portfolio .com-content-category-blog.blog .box .item-content { padding: .4rem; }
body.portfolio .com-content-category-blog.blog .box .item-content .page-header h1 a, 
body.portfolio .com-content-category-blog.blog .box .item-content .page-header h2 a { 
color:#666;
text-decoration: none; display:block;
}

.grey-border { border:1px solid rgba(0,0,0,0.2);}





/*
Portfolio / LIGHT
------------------------------*/
body.portfolio.light-theme { background-color: #eee; }

body.portfolio.light-theme .box { background:#fff; color:#666; }
body.portfolio.light-theme .com-content-category-blog.blog .box .item-content .page-header h1 a, 
body.portfolio.light-theme .com-content-category-blog.blog .box .item-content .page-header h1 a { color:#666 ; }


body.portfolio.light-theme .com-content-article.item-pageportfolio { background:#fff; color:#666; padding-bottom: 2rem; } /*articolo esteso*/



/*
Portfolio / DARK
------------------------------*/
body.portfolio.dark-theme { }
body.portfolio.dark-theme .box {background:#000; color:#666; }
body.portfolio.dark-theme .box .item-content .page-header h2 a { color:#666 ; }
body.portfolio.dark-theme .com-content-article.item-pageportfolio  { background:#000; color:#999; }    /*articolo esteso*/


/*
Portfolio Work
------------------------------*/


body.portfolio.work .article-list .article .article-intro-image a { max-height: 282px; display: block; overflow: hidden; }
  

/*
Portfolio Web Design
------------------------------*/
body.portfolio.web-design .article-list .article .article-intro-image img { border: 1px solid rgba(0,0,0,.2); }
body.portfolio.web-design dd.field-entry.work-description.wd-descrizione { max-width:inherit; }
/*body.portfolio.web-design .article .article-body .article-header { display:none; }*/




/*
Portfolio Logo Design
------------------------------*/

body.portfolio.logo-design  main .com-content-article .page-header,
body.portfolio.logo-design main .com-content-category-blog .box .item-content { display: none; } 
/*nasconde titolo in articolo anteprima + articolo esteso*/


/*
Portfolio Artworks
------------------------------*/

body.artworks  { background-color:#222; } 

body.portfolio.artworks .article { height: inherit; }
body.portfolio.artworks .article-list div[itemprop="blogPost"] { margin-bottom: 1rem; }
body.portfolio.artworks .article-list .article .article-intro-image a { max-height: 376px; display: block; overflow: hidden; }


/*
Portfolio Toglie Intestazione da articoli
------------------------------*/

body.view-category.portfolio .article-details .page-header {  }
body.view-article.portfolio .article-details .page-header { display:none; }


/*
Work Description (dinamico) PER VERTICALE
------------------------------*/


body.portfolio ul.fields-container { margin-bottom:2rem; padding-left: 0;  }

body.portfolio ul.fields-container li.work-description { margin-bottom:0; list-style: none; }

body.portfolio ul.fields-container li.field-entry.work-description span.field-label {  font-weight:900; }
body.portfolio ul.fields-container li.field-entry.work-description.wd-link-personalizzato a { text-decoration:none; }
body.portfolio ul.fields-container li.field-entry.work-description.wd-link-personalizzato strong { font-weight:700; display: inline-block; margin-bottom: 5px; }
body.portfolio ul.fields-container li.field-entry.work-description span.field-value { line-height:1.2; color: #ddd; }
body.portfolio ul.fields-container li.field-entry.work-description.wd-link-personalizzato { margin-top:10px; }
body.portfolio ul.fields-container li.field-entry.work-description.wd-descrizione { max-width: 600px; }


body.portfolio.artworks .article-details .fields-container { display: flex; justify-content:center; text-align: center; }
body.portfolio.artworks .fields-container li.work-description { margin-bottom:0; padding-left: 1rem; padding-right: 1rem;  }


body.portfolio.light-theme ul.fields-container li.field-entry.work-description span.field-value { color:inherit; }



/*
Work Description (dinamico) INLINE
------------------------------*/


.description-inline ul.fields-container { display:flex; justify-content:center; }
.description-inline ul.fields-container li { max-width: 500px; }
.description-inline ul.fields-container li.field-entry.work-description.wd-anno {  }
.description-inline ul.fields-container li.field-entry.work-description.wd-titolo { display:none;  }
.description-inline ul.fields-container li.field-entry.work-description { margin-bottom:0; position :relative; padding: 0 1rem; }
.description-inline ul.fields-container li.field-entry.work-description:after { content:""; display: block; width: 1px; height: 100%; position:absolute; background:rgba(0,0,0,.2); left: 0; top: 0; }
.description-inline ul.fields-container li.field-entry.work-description.wd-anno:after { display:none; }

body.dark-theme .description-inline ul.fields-container li.field-entry.work-description:after { background:rgba(255,255,255,.3); }


/*
Work-Filter-Sub-Menu
------------------------------*/

.work-filter-sub-menu ul.mod-menu.nav { 
list-style-type: none; padding: 0; margin:1rem 0 0rem; 
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
scrollbar-width: none;
display: flex;
flex-wrap: inherit; 
}


.work-filter-sub-menu ul.mod-menu.nav::-webkit-scrollbar { display: none; }


.work-filter-sub-menu ul.mod-menu.nav li { margin-right: .8rem; line-height: 1;  }
.work-filter-sub-menu ul.mod-menu.nav li a { display: block; padding: .5rem 2rem; border-radius: 40px; border:1px solid; text-decoration: none; color:#175d6d;  }
.work-filter-sub-menu ul.mod-menu.nav li a:hover { color:#175d6d; }
.work-filter-sub-menu ul.mod-menu.nav li.active a,
.work-filter-sub-menu ul.mod-menu.nav li.current a { background:#175d6d ; color: #fff; border-color: transparent; }

.work-filter-sub-menu ul.mod-menu.nav li h4 { font-size: 16px; margin: 0; }



/*
Portfolio Lavori Correlati
----------------------------------------------*/

.moduletable.lavori-correlati { border-top:1px solid #ccc; padding-top:1rem; margin-top:4rem; }

.moduletable.lavori-correlati h3 { text-align:left; }
.moduletable.lavori-correlati { list-style-type:none; margin:0;  }
.moduletable.lavori-correlati .box { max-width:114px; }
.moduletable.lavori-correlati .box h4 { font-size: 14px;font-weight: bold; margin: 6px 0 0; text-align:left; }
.moduletable.lavori-correlati .box h4 a { color:#666; }
.moduletable.lavori-correlati .image-thumb { border: 1px solid #ccc; overflow: hidden; }
.moduletable.lavori-correlati .image-thumb img { transition:.3s ease-out; aspect-ratio: 1 /1;  object-fit: cover; }
.moduletable.lavori-correlati .image-thumb:hover img { transform: scale(1.5);}


/*
Portfolio Lista Categorie principali
----------------------------------------------*/

body.portfolio .sp-module .box a { text-decoration:none; color:#fff; text-decoration:none; display:flex; height: 100%; width:100%; text-align: center; align-items: center; justify-content: center;  }
body.portfolio .sp-module .box a img { width:350px; }

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

body.portfolio .article-details div[itemprop="articleBody"] { }

/*
Scala iFrame
--------------------------------------------*/

a.btn-online-view { display: block; line-height: 1; padding: .5rem 1rem; text-decoration: none; color: #fff; border-radius: 2rem; margin: auto; max-width: 250px; }
a.btn-online-view i { margin-left: .2rem; }

.scaled-wrap { position: relative; box-shadow: 8px 4px 0px rgba(0,0,0,.1);
border-radius: 10px;
outline: 2px solid #ccc;
overflow: hidden;
}


.scaled-wrap:after { display: block; content: ""; position: absolute; left: 0; top: 0; }

.scaled-wrap.desk, .scaled-wrap.desk:after { width:720px; height:450px; }
.scaled-wrap.mobile, .scaled-wrap.mobile:after { width:180px; height:320px; }

.scaled-wrap.desk { margin-right:2rem; }

.scaled-iframe { 
position: relative; z-index: 2; background: #fff;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;

border:0;
}

.scaled-iframe.desk { width:1440px; height:900px;  } /*  1440x900 --> 720x450 scalato al 50% */
.scaled-iframe.mobile { width:360px; height:640px;  } /* 360x640	 --> 180x320 scalato al 50% */



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




/*
About
------------------------------*/

body.about { background-color:#222; }
body.about .profilo p strong { color: #f0f0f0; }

/*.twitter-timeline.twitter-timeline-rendered iframe { transform: scale(.8); }*/

blockquote.twitter-timeline {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius:0;
  border-style: solid;
  border-width:0;
  box-shadow:none;
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

/*
Contatti
------------------------------*/

body.contatti main .com-content-category-blog.blog .item-content joomla-hidden-mail a { color: #fff; }


/*
TYP
------------------------------*/
body.view-article.layout-blog.docs { background: #222;  }
body.view-article.layout-blog.docs main .com-content-article.item-page { color: #ddd; }

body.view-article.layout-blog.docs main .btn-custom:hover, 
body.view-article.layout-blog.docs main button.btn-custom:hover { background: #fff; color: #000; }


/*
myCarousel
------------------------------*/

.carousel-control-next, .carousel-control-prev { color: #000; opacity:1 }

.carousel-control-next-icon,
.carousel-control-prev-icon { position: relative; width:35px; height:35px; line-height: 1; background:#000; color: #fff;  border:none; border-radius: 50%; display: flex; justify-content: center; align-items: center; }


.carousel-control-next-icon:before,
.carousel-control-prev-icon:before {
display: block; content: ""; height: 20px; width: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E");
transform: rotate(-90deg);
}


.carousel-control-prev-icon:before { transform: rotate(90deg); }



/*
.carousel-control-next-icon:before,
.carousel-control-prev-icon:before { font-family:'Font Awesome 6 Free', 'Font Awesome 6 Regular', 'Font Awesome 6 Brands', 'Arial'; font-weight:normal; text-decoration: none; font-size:18px; line-height: 30px; text-align:center; }

.carousel-control-next-icon:before { content: "\f054"; }
.carousel-control-prev-icon:before { content: "\f053"; }
*/



/*
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}


.carousel-control-next-icon:before,
.carousel-control-prev-icon:before { 
font-family: 'Material Icons';
font-size:18px; text-align:center; 
}


.carousel-control-next-icon:before { content: "\ea3b"; }
.carousel-control-prev-icon:before { content: "\ea3b"; }
*/


.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover { outline: 0; opacity: .4; color: #000; }

.carousel-control-next-icon:before { margin: 0 0 0 1px; }
.carousel-control-prev-icon:before { margin: 0 2px 0 0; }


body.portfolio.web-design #myCarousel.carousel { }
body.portfolio.web-design #myCarousel .carousel-item img { width: 600px; margin: auto; display: block; border:1px solid #ddd;}
body.portfolio.web-design .carousel-inner {  }




.slider-thumbs img { margin:2px; border:1px solid #ddd; width:90px; }
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.3);
max-width: 300px;
left: 50%;
margin-left: -150px;
padding: 3px;
}

/*
skills
---------------------------------------------*/

.skills { margin-bottom:30px; }
.skills h2 { font-size:24px; }
.skills .span4 h2  { border:1px solid; padding:20px; margin:0 0 5px; background:#fff; }
.skills .span4 h2 span {  }

.skills ul { list-style: none; margin:0; padding:0;  }

.skills ul .skill-type {
display: block;
width: 100%;
float: left;
margin: 20px 0;
}
.skills ul li {
float: left;
width: 100%;
position: relative;
background: #f6f6f6;
display: block;
margin-bottom: 5px;
line-height: 30px;
}
.skills ul li div {
width: auto;
display: block;
height: 30px;
position: relative;
overflow: hidden;
opacity: 1;
transition: 0.3s all 0s;
}
.skills ul li div:hover {
opacity: 0.8;
cursor: default;
}
.skills ul li span {
font-size: 14px;
width: auto;
top: 0;
color: #fff;
text-align: left;
display: block;
padding-left: 10px;
position: absolute;
overflow: hidden;
}

.skills ul li .cyan-bg span { /*color:#2d404d;*/ color:#fff; }
.skills ul li .yellow-bg span { color:#485212; }
/*.skills ul li .pink-bg span { color:#50333f; }*/

.skills ul li span i.icon-hand-right { color: #fff; margin: 0 6px; }

.skills-2 {
float: left;
width: 100%;
display: block;
list-style: none;
margin: 10px 0 20px 0; }


.skills-2 .skill-type {
display: block;
width: 100%;
float: left;
margin: 20px 0; }


.skills-2 li {
float: left;
width: 100%;
position: relative;
display: block;
margin-bottom: 5px;
line-height: 30px; }


.skills-2 li div {
width: auto;
display: block;
height: 10px;
position: relative;
overflow: hidden;
background: #2c3e50;
opacity: 1;
transition: 0.3s all 0s; }


.skills-2 li div:hover {
opacity: 0.8;
cursor: default; }


.skills-2 li span {
font-size: 12px;
width: 100%;
color: #333;
float: left;
text-align: left;
display: block; }

.animate {
width: 0%;
max-width: 100%;
animation: progress 2s 1 forwards; 
}

@-webkit-keyframes progress {
  from {
    width: 0%; } }

@-moz-keyframes progress {
  from {
    width: 0%; } }

@-ms-keyframes progress {
  from {
    width: 0%; } }

@keyframes progress {
  from {
    width: 0%; } }


/*
Last-FM Album Box
---------------------------------------------*/


.albums { margin-left:-0.2rem; margin-right:-0.2rem; }

.albums { }
.albums h1,
.albums h2,
.albums h3 { line-height:1; color:#222; }

.albums .album {
float: none!important;
height: auto!important;
position: relative;
margin:0.2rem!important;
width:auto !important;
min-width:90px;
}

.albums .album .back { align-items:center; display:flex; height:100%; justify-content:center; }

/*
Last-FM RSS
---------------------------------------------*/

.last-fm-rss { border: 1px solid #555; padding: 1rem; border-radius: 0; }

.last-fm-rss h4  { line-height: 1; font-size: 20px; }
.last-fm-rss .feed ul.newsfeed { list-style-type: square; padding-right: 1.5rem; }
.last-fm-rss .feed ul.newsfeed li { border-bottom: 1px dotted #999!important; font-size: small; padding: .3rem 0; }
.last-fm-rss .feed ul.newsfeed li:last-child { border-bottom: none; }
.last-fm-rss .feed ul.newsfeed li a { text-decoration: none; color: #ccc; }
.last-fm-rss .feed ul.newsfeed li a:hover { color: #fff; }








/*
Instagram
---------------------------------------------*/

#ig-feed {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
max-width: 64rem;
margin: auto;
}

#ig-feed a { display: block; }

#ig-feed img { display: block; width: 100%; }






/*
Animazioni SVG
---------------------------------------------*/

svg:not(:root) { display: block; }


/*
Homepage Artworks --> See More Link
---------------------------------------------*/

.hp-section.eyegear a.see-more { position: relative; letter-spacing:.3em; text-decoration:none; }
.hp-section.eyegear a.see-more:hover { color: #fff; cursor: pointer; }
.hp-section.eyegear a.see-more::after {  display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: url(/images/arrow.svg) no-repeat center center / auto; z-index: 1;  }

.hp-section.eyegear a.see-more span { position: relative; z-index: 3; display: inline-block; background: #000; padding: .3rem 1rem;  text-align: center;   }




/*
Bottone Torna Su
---------------------------------------------*/

a.back-to-top-link.visible,
a.back-to-top-link:hover,
a.back-to-top-link:focus  { border-radius: 50%!important; border: none; background: #333; color: #fff; width: 40px; height: 40px; text-align: center; }

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

.footer { background:none; }

footer a:hover { color: #ccc; }
footer p.copyright { font-size:14px; font-weight:400; }
.text-shadow { text-shadow:2px 2px 0 rgba(0,0,0,.5); }

.footer-privacy-links a { color:#fff; }

footer .footer-privacy-links, 
footer .brand { display:none; }

body.light-theme footer ,
body.light-theme .social-icons a { color:#000; }


/*
btn-custom
----------------------------*/

.btn-custom, button.btn-custom { 
border:0px solid transparent; font-weight:700; letter-spacing:.03em; text-transform:uppercase; width: 100%; display:block; 
text-decoration:none; text-align: center; outline:0px solid #fff; outline-offset:0px; }

.btn-custom:hover, button.btn-custom:hover { background:none; border:0px solid #ffffff; color:#000; text-decoration:none; }

a.btn-outline { border:2px solid; text-decoration:none; text-transform:uppercase;  }
a.btn-outline:hover { color:#1aa4bf; background:#fff; }

a.btn-outline { border:2px solid; text-decoration:none; text-transform:uppercase;  }
a.btn-outline:hover { color:#1aa4bf; background:#fff; }



/*
form
----------------------------*/

.com-baforms-wrapper form.ba-form-1 .ba-form-footer p { display:none; }




/*
paginazione
----------------------------*/

nav.pagination-wrapper { margin-top: 2rem !important; }

ul.pagination .page-item.active .page-link { color: #fff; background-color: #000; border-color: #000; }
ul.pagination a.page-link { text-decoration: none; }
ul.pagination.ms-0.mb-4 { margin-bottom: 0!important; }

.pagination-wrapper .pagination-counter { margin-left: 2rem; }



/*----------------------------
BG-Form
----------------------------*/

.form-control {
background:#ffffff24;
border: none;
border-radius: 0;
box-shadow: none;
color:#ffff;
font-size:20px;
padding:15px;
font-weight:normal;
line-height:normal;
border:;
}
.form-control::-moz-placeholder { opacity:.5; color: #fff; }
.form-control::placeholder { opacity:.5; color:#fff; }
select option { opacity:1; color:#999; }

label.checkbox-terms { margin:0; line-height:1; }
.checkbox-terms input { margin:5px 0 0 ;}


.form-privacy { }
.form-privacy p a { color:#fff; }
.form-privacy a:hover { color:#fff; }
.form-privacy label.radio-inline { font-size:14px; margin:0 0 6px 0; }

input#AntiSpam { width:50px; border:0; border-radius:0; padding:5px 0; background:rgba(255,255,255,0.2); border: 1px solid #ddd; text-align:center; font-weight:600; color:#fff; }

.btn-custom { border:0 solid transparent; line-height:1; width:100%; display:block; text-decoration:none; text-align:center; transition:.4s; }

.btn-custom:hover  { text-decoration:none; color:#fff; transform: scale(1.05); }
.btn-custom:hover i { color:; }


.btn-custom.btn-outline { outline: 2px solid #fff; outline-offset: -2px; background: none; color: #fff; }
.btn-custom.btn-outline:hover { outline: 2px solid #fff; outline-offset: -2px; background:#fff; color:#222; }
.btn-custom.btn-outline:hover i { }

.bg-form .btn-custom:hover { transform:inherit; }


.form-control.custom-select-grip { padding:0; }
.form-control select { padding:18px; }
.custom-select-grip { position:relative; }
.custom-select-grip:after { position:absolute; right:15px; top:3px; content:""; display:block; 
right:14px; top:50%; margin-top:-8px; width: 10px; height: 18px; background: url(img/select-grip.svg) no-repeat center center / 100% auto; opacity: .5; }


select { 
appearance:none;
-moz-appearance:none;
-webkit-appearance: none;
background:none; border:none; width:100%;
color:#93b1ac; line-height:1;
}

.form-control:focus, textarea.form-control:focus { background:#ffffff24; border:none; box-shadow:none; color: #fff; }
input.form-control:focus::placeholder, 
textarea:focus::placeholder{ color: transparent; }

form.contactMe .form-check { margin-bottom: 5px; }

.form-group { margin-bottom:0!important; }


/*----------------------------
Error Page
----------------------------*/

body.error_site.homepage { color:#ddd; }
.errore-404 button.btn-custom:hover { background: none; border-color: #00b9a9; color: #00b9a9; border-width: 2px;}

/*------------------------------------------------------------
Ottimizzazione mobile
--------------------------------------------------------------*/



/* 
grid-breakpoints
-------------------------------
xs: 0,
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
------------------------------*/



/*----------------------------
mobile sopra i....
----------------------------*/

@media(min-width:1920px) {
body.homepage img.bg-stemma { width: 800px; }
}

@media(min-width:1600px) {
body.homepage img.bg-stemma { width: 700px; }
}

@media(min-width:1440px) {
}

@media(min-width:1198px) {
 
}



@media(min-width:1080px) { 
.mb-6 { margin-bottom:4.5rem; } 
}

@media(min-width:992px) {
.letter-spacing { letter-spacing:.03em; }
.vh-lg-100 { height: 100vh; }
}

@media(min-width:768px) {
}

/*----------------------------
mobile sotto i...
----------------------------*/
@media(max-width:1600px) {
}


@media(max-width:1440px) {

}


@media(max-width:1360px) {

}
@media(max-width:1280px) {

}

@media(max-width:1200px) {
.text-20 { font-size:18px; }
.text-25 { font-size:20px; }
.text-30 { font-size:25px; }
.text-35 { font-size:28px; }
.text-40 { font-size:30px; }
.text-45 { font-size:35px; }
.text-50 { font-size:40px; }
.text-60 { font-size:50px; }
.text-70 { font-size:60px; }
.text-80 { font-size:65px; }
.text-90 { font-size:70px; }
}

@media(max-width:1198px) {
body.homepage img.bg-stemma { width: 400px; }
.bg-main-menu ul.mod-menu li { min-width: 150px; }
}
@media(max-width:1080px) {


}

@media(max-width:992px) {

.scroll-to-bottom { width: 70px; height: 35px; }
.scroll-to-bottom:after { width: 70px; height: 70px; bottom:-35px; }

.scaled-wrap.desk, .scaled-wrap.desk:after { width:432px; height:270px; }
.scaled-wrap.mobile, .scaled-wrap.mobile:after { width:108px; height:192px; }
.scaled-iframe {
-moz-transform: scale(0.3);
-moz-transform-origin: 0 0;
-o-transform: scale(0.3);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.3);
-webkit-transform-origin: 0 0; 
}

.scaled-wrap { border-radius: 5px; }
.scaled-wrap.desk { margin-right:1rem; }
.hp-section.eyegear { padding:10%; }
    

body.portfolio.work.web-design .fields-container { display: block; } 
body.portfolio.work.web-design li.field-entry.work-description:after { display:none; }
    
    
.description-inline ul.fields-container { display:inherit; text-align: center; max-width: inherit; }
.description-inline ul.fields-container li.field-entry.work-description,
body.portfolio ul.fields-container li.field-entry.work-description.wd-descrizione { max-width: inherit; }  
.description-inline ul.fields-container li.field-entry.work-description:after { display:none; }
    
    
}


@media(max-width:768px) {


.custom-list { position:relative; margin:0 0 0 -30px; padding:0;  }
.custom-list li { line-height:1.2; position:relative; margin-bottom:10px; }
.custom-list li:last-child { margin:0; }
.custom-list i { left:0; position:relative; margin-right:5px;  }
.custom-list i span {  }


.work-filter-sub-menu { margin: 0; }
.work-filter-sub-menu ul.mod-menu.nav li { margin-right: .5rem;}
.work-filter-sub-menu ul.mod-menu.nav li a { padding: .5rem .8rem; border: 1px solid; }
.work-filter-sub-menu ul.mod-menu.nav li h4 { font-size: 14px; line-height: 1; }
    
    
body.portfolio.artworks .com-content-category-blog.blog .box { margin-bottom: 0; padding:2px; }
body.portfolio.artworks .com-content-category-blog.blog .box .item-content { display: none; }   

.avatar { border-radius: 50%;
border-radius: 50%;
overflow: hidden;
border: 3px solid #ffffff4f;
outline: 12px solid #ffffff21;
margin: 2rem auto 2rem;}
    
}


@media(max-width:576px) {

.scaled-wrap.desk, .scaled-wrap.desk:after { width:360px; height:225px; }
.scaled-wrap.mobile, .scaled-wrap.mobile:after { width:90px; height:160px; }
.scaled-iframe {
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0; }
    
.albums .album { min-width:inherit; }
    

nav.pagenavigation { padding:0; margin-bottom: .5rem;  }
nav.pagenavigation a { padding: 0.4rem 2rem; }
    
.gear:before { width: 60px; height: 30px; }
    
body.view-article main .com-content-article .page-header h1 { font-size:40px; font-weight: 300; }


}

	
@media(max-width:480px) {
    
.text-20 { font-size:16px; }
.text-25 { font-size:18px; }
.text-30 { font-size:20px; }
.text-35 { font-size:15px; }
.text-40 { font-size:30px; }
.text-45 { font-size:32px; }
.text-50 { font-size:35px; }
.text-60 { font-size:40px; }
.text-70 { font-size:45px; }
.text-80 { font-size:50px; line-height:.7; }
.text-90 { font-size:60px; line-height:.6; }
    
 

.pager { padding:1rem; }
.pager > li a { padding: .4rem 2rem; }

.carousel-control-next, .carousel-control-prev { display:none; }

.slider-thumbs img { margin-bottom:4px; }
	
    
body.view-article main .com-content-article .page-header h1 { font-size:25px; margin-bottom: .8rem; } /*articolo esteso*/
    
body.portfolio .article-details .article-header h1, 
body.portfolio .article-details .article-header h2 { font-size: 28px; margin: 0 0 0; padding: 0 0 1rem 0;  }
    
  
body.portfolio.dark-theme main .com-content-article .page-header h1 {color: #fff; font-weight:300; }
body.portfolio li.field-entry.work-description:after { display:none; }
    
body.portfolio .com-content-category-blog.blog .box { padding: 0;  }
body.portfolio.work .com-content-category-blog.blog .box { border: 1px solid #ccc; }

/*
.description-inline ul.fields-container { display:block; }
.description-inline ul.fields-container li { max-width: inherit; text-align: center; }
.description-inline ul.fields-container li.field-entry.work-description { margin-bottom:0; position :relative; padding: 0 1rem; }
.description-inline ul.fields-container li.field-entry.work-description:after { display: none;  }
*/

.work-filter-sub-menu ul.mod-menu.nav li a { padding: .5rem 1rem; }
    
.scaled-iframe.desk { width: 1440px; height: 2200px; }  
.scaled-iframe.mobile { width: 360px; height: 640px; }    
 
.scaled-wrap.desk, .scaled-wrap.desk:after { width:250px; height:300px; }
.scaled-wrap.mobile, .scaled-wrap.mobile:after { width:62px; height:113px; }

.scaled-iframe {
-moz-transform: scale(0.174);
-moz-transform-origin: 0 0;
-o-transform: scale(0.174);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.174);
-webkit-transform-origin: 0 0; 
}
     

.com-content-article__body { padding:0; }    
    

/*------------------------
2022-11-16 parte ottimizzata solo per sez. Artworks da mobile
------------------------*/
body.portfolio.dark-theme { background-color: #000; }
/*------------------------*/


body.portfolio.light-theme { background-color:#fff; }

}


@media(max-width:375px) {
body.homepage footer p { font-size: 12px; }
body.homepage img.bg-stemma  { width: 320px; }
.offcanvas-end { width: 320px; }
}