/*----------------------
Bagni Italiani // CSS
bg@barbaragambini.com
2024-12-05
----------------------*/

html { scroll-behavior:smooth; }
body, html { width: 100%;  height: 100%;  }

::-moz-selection  { background: #FF5321; color: #ffffff; }
::selection { background: #FF5321; color: #ffffff; }
a { color:#6f9fb8; text-decoration: underline; }
a:hover { color:#1068B2; }

body { font-size:16px; color:#222; }

.line-height-1 { line-height:1; } .line-height-1.small { line-height:1.1; }
.line-height-n { line-height: normal; }
.line-height-2 { line-height: 2; }

.clear { clear:both; visibility:hidden; margin:0; }

.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}

/*-------------------------
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-playfair { font-family: 'Playfair Display', serif; }
.font-poppins { font-family: 'Poppins', serif; }
.font-raleway { font-family: 'Raleway', sans-serif; }




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

.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; }

/*-------------------------
colori e grandezze font
-------------------------*/
.rosso { color:#fa2b3a; }
.pink { color: #dd3a85 ;; }
.rosso-mattone { color:#b46854; }
.marrone { color:#534845; }
.blu { color:#0c6294; }
.ciano { color:#00a7ff;}
.giallo { color:#ffd531; }
.green { color:#8dac16; }



.light-verde { color:#E0F0D7; }
.light-blue { color:#e5ecf8; }
.dark-verde { color:#5bb2a6; }
.dark { color:rgba(0,0,0,.8); }
.heavy-verde { color:#1d2b0b; }
.gold { color: #d2bc79; }
.bianco { color: #fff; }
.orange { color:#f15422; }
.black { color:#222; }
.verde-dual { color:#8dac16; }
.grigio-dual { color:#777777; }
.magenta { color:#dd3a85; }
.viola { color:#693681; }

.verde-pro-bg { background-color:#8dac16; }
.magenta-bg { background-color:#dd3a85; }
.marrone-bg { background-color:#534845; }
.rosso-mattone-bg { background-color:#b46854; }
.rosso-bg { background-color:#fa2b3a; }
.ciano-bg { background-color:#00a7ff;}
.giallo-bg { background-color:#ffd531; }
.giallo-bg-dual { background-color:#feee77; }
.giallo-bg-dual2 { background-color:#f3bd31; }
.bianco-bg { background-color:#fff; }
.blu-bg { background-color:#0c6294; }
.verde-bg { background-color:#0c4c3b; }
.dark-verde-bg { background-color:#5bb2a6; }
.dark-bg { background-color:rgba(0,0,0,.8); }
.pink-bg { background-color: #dd3a85; }
.black-bg { background-color:#222; }

.light-verde-bg { background-color:#E0F0D7; }
.light-blue-bg { background-color:#e5ecf8; }
.heavy-verde-bg { background-color:#1d2b0b; }
.dark-bg { background-color:#222; }
.white-bg { background-color:#fff; }
.orange-bg { background-color:#f15422; }
.gold-bg { background-color: #d2bc79; }

.light-verde-bg { background-color:#c4e973; }
.light-grey-bg { background-color:#eee ; }
.cold-grey-bg { background-color:#d1d4d9 ; }
.dark { color:rgba(0,0,0,.7);}
.green-bg { background-color:#8dac16; }

.dark-grey { color:#333333;}
.dark-grey-bg { background-color:#333333; }

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


.violet-gradient-bg { 
 background: rgb(109,62,130);
background: linear-gradient(355deg, rgba(109,62,130,1) 0%, rgba(181,111,214,1) 100%); 
}
.violet-gradient-txt {  
 background: rgb(109,62,130);
background: linear-gradient(355deg, rgba(109,62,130,1) 0%, rgba(181,111,214,1) 100%); 
    
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


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

.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; }


.overlay { position:absolute; bottom:0; top:0; width:100%; height:100%; background: rgba(0, 0, 0, .4); z-index:1;}

.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; }



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

nav { position:relative; z-index:2000; box-shadow: 2px 2px 2px rgba(0,0,0,0); padding:0; }
nav .container { position:relative; z-index:2000; }
.brand { width:260px; }


.header-mobile { background: url(img/background-bagni-promo.jpg) no-repeat center center  / cover; position: relative; height: 480px; }
.main-cover { background: url("img/background-bagni-promo.jpg") no-repeat center right / cover;}
.claim { position: relative; z-index: 3; text-shadow: 1px 2px 3px rgba(0,0,0,.3); }

/*
.shape { position: absolute;  top: 0; left: 0;  max-width:16rem; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); padding: 5% 2% 8%; z-index: 3; }
.shape:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; 
}*/

header .container { position:relative; z-index:10; }
aside { outline: 3px solid #8dac16; outline-offset: -3px; }
.text-shadow { text-shadow:2px 2px 0 rgba(0,0,0,.5); }




/*----------------------------
Form
----------------------------*/
.form-control {
background:#eee;
border:none;
border-radius: 0;
box-shadow: none;
color: #333;
font-size: 16px;
padding:12px;
font-weight:normal;
line-height:normal;
border:;
}
.form-control::-moz-placeholder { opacity:1; color: #999; }
.form-control::placeholder { opacity:1; color:#999; }
select option { opacity:1; color:#999; }
.form-group { margin-bottom:0; }

.btn-custom { border:2px solid transparent; font-size:18px; font-weight:700; letter-spacing:.03em; padding:12px; text-transform:uppercase; width: 100%; border-radius:40px;
text-decoration:none; text-align: center; }
.btn-custom:hover { background:#ff5400; border:2px solid transparent; color:#fff; }


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


.form-control.custom-select-grip { padding:12px; }
.form-control select { padding:0px; }

.custom-select-grip { position:relative; }
.custom-select-grip:before { 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; }

.form-group-privacy {  }
.form-group-privacy .small {  }
.form-group-privacy a { } 
.form-group-privacy a:hover { }
.form-group-privacy label.radio-inline { font-size:14px; margin:0 0 6px 0; }
label.checkbox-terms { margin:0; line-height:1;}
.form-group-privacy input { margin: 2px 8px 0 0; vertical-align: text-top; }


/*----------------------------*/
.custom-list { position:relative; margin:0 0 0 30px; padding:0 0 0 0; list-style: none;  }
.custom-list li { margin:0 0 12px 0; position:relative; line-height: 1.1;  }
.custom-list i { font-size: 20px; left:-30px; position:absolute; top:4px; }
.custom-list strong { font-weight:700; font-size:large; }
.custom-list li:last-child  { margin-bottom: 0; }


.list-box { border:6px solid rgba(255,255,255,.4); padding:1rem; border-radius:10px; }

/*----------------------------*/
a.bnt-bottom { }
a.btn-custom.btn-bottom:hover { text-decoration:none;background:#ff5400; border:0px solid transparent; color:#fff; }

.box-shadow { box-shadow: -7px 6px 0px rgba(59,77,102,.2); }

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


.main-content { background: rgba(30,30,30,.8); color: #fff; max-width: 560px; }
.rivestimento-1 { background: url("img/gallery/calacatta-white-lux-60x60-pav-riv-2.jpg") repeat-x center center / cover; }


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


section.all-inclusive .img-bg { background: url("img/gallery/lp-promo-realizzazioni-3-large.jpg") repeat-x center center / cover; min-height:500px; }
.prezzo { background: url("img/gallery/gallery-cherry-2-close-up.webp") repeat-x center center / cover; min-height:400px; }



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

footer p { font-size:13px;  }

/*------------------------------
------------------------------*/
.funky-arrow { max-width:110px; }
.funky-arrow img { animation:pull 1s infinite; width:50px }
@-webkit-keyframes pull { 
0% { margin:0 0 0 0px; } 
50% { margin:0 0 0 20px; } 
100% { margin:0 0 0 0px; } 
}
@keyframes pull { 
0% { margin:0 0 0 0px; } 
50% { margin:0 0 0 20px; } 
100% { margin:0 0 0 0px; } 
}

/*------------------------------
scrolla
------------------------------*/

.scrolla { animation:scrolla 1s infinite; }
@-webkit-keyframes scrolla { 
0% { transform:rotate(0deg) } 
50% { transform:rotate(-10deg) }
100% { transform:rotate(0deg) }  
}
@keyframes pull { 
0% { transform:rotate(0deg) } 
50% { transform:rotate(-10deg) }
100% { transform:rotate(0deg) } }

/*------------------------------
RUOTA
------------------------------*/	
@keyframes rotating {
from
{
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating {
from
{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
.ruota {
-webkit-animation: rotating 22s linear infinite;
-moz-animation: rotating 22s linear infinite;
-ms-animation: rotating 22s linear infinite;
-o-animation: rotating 22s linear infinite;
animation: rotating 22s linear infinite;
}	




/* Custom Loader */

.loader-container {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loader {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	z-index: 101;
}

@keyframes load {
	50% {
		transform: rotatez(180deg);
		border-style: dashed;
		border-color: #DB3D88 #EAEFF3 #AA7BC1 #693580;
	}
	100% {
		transform: rotatez(360deg);
	}
}

.loader::before {
	content: "";
	color: white;
	height: 100px;
	width: 100px;
	background: transparent;
	border-radius: 50%;
	border: 20px solid #693580;
	animation: load 1s infinite;
}

.loader-bg {
	background-color: rgba(255, 255, 255, .9);
}

/*---------------------------
BS5 --> grid-breakpoints
-----------------------------

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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


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

@media(min-width:1920px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1600px; }
}


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

@media(min-width:1200px) {
.feedback-slick .box { min-height:460px;  }
}
@media(min-width:990px) {
footer p.copyright.text-lg-left { text-align: left!important; }

}	

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


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

@media(max-width:1200px) {
body { font-size:15px; }
.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; }
}

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

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

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


@media(max-width:990px) {
.prezzo {min-height:300px; } 
}


@media(max-width:767px) {

.shape { max-width: inherit; }


}


	
@media(max-width:480px) {
body { font-size:14px; }
.text-18 { font-size:16px; }
.text-20 { font-size:17px; }
.text-25 { font-size:18px; }
.text-30 { font-size:22px; }
.text-35 { font-size:28px; }
.text-40 { font-size:32px; }
.text-45 { font-size:33px; }
.text-50 { font-size:35px; }
.text-60 { font-size:45px; }
  
 
    
 
.brand { width: 220px; }
footer p { font-size: 12px; }
footer img { width: 120px !important; margin-bottom: 8px !important; }
.custom-list i { font-size: 18px; left: -25px; position: absolute; top: 1px; } 
}

@media(max-width:411px) { }
@media(max-width:375px) { }
@media(max-width:360px) { }