body, html { min-height: 100%; }
body { font-family: "Slabo 27px", serif;	font-size: 1.2rem;  }

body         { background: url("../media/bg/bg-2.jpg") center center no-repeat; background-attachment: fixed; background-size: cover; }
body#servizi { background: url("../media/bg/bg-2.jpg") center center no-repeat; background-attachment: fixed; background-size: cover; }
body#brava   { background: #fff; }

a { color: rgba(130,84,110,1); }
a:hover { color: rgba(130,84,110,1); }

h1,h2,h3,h4,h5,h6,h7 { font-family: "Patua One", cursive; }

h1.titolo { font-size: 1.2rem; color: rgba(130,84,110,1.0); }

.text-blu { color: #354151; }				.text-viola { color: rgba(130,84,110,1.0); }
.text-blu { color: #354151; }				.text-viola-50 { color: rgba(130,84,110,0.5); }
.bg-blu { background-color: #354151; }		.bg-viola { background-color: rgba(130,84,110,1.0); }
.bg-blu-50 { background-color: #354151; }	.bg-viola-50 { background-color: rgba(130,84,110,0.85); }
.bg-white-75 { background-color: rgba(255,255,255,0.75); }
.bg-white-50 { background-color: rgba(255,255,255,0.5); }
.bg-black { background-color: rgba(0,0,0,1); }

header { background-color: #354151; font-weight: 200; }
.nav-blu { background-color: #354151; }
.nav-blu a { color: #fff !important; transition: all 0.3s ease-in-out 0s; }
.nav-blu a:hover { background-color: rgba(255,255,255,0.1) !important; border-radius: 4px;  }
.nav-blu li.active a { color: #fff !important; background-color: rgba(130,84,110,1.0) !important; border-radius: 4px; }


.payoff-wrapper { text-align: center;}
.payoff { display: inline-block; padding: 100px 0;  }
.payoff-1 { font-size: 3rem; font-family: "Patua One", cursive; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 4px solid #82546e;}
.payoff-2 { font-size: 1.0rem; text-shadow: 0 1px 1px #fff; }
.payoff-3 { font-size: 1.2rem; font-style: italic; text-shadow: 0 0 1px #fff; }

.home-blocchi > div > div > p { height: 100px; }
.home-blocchi > div > div > h3 { text-shadow: 0 1px 2px #fff; }
.home-blocchi > div > div > img { max-width: 80%; }

.home-leve { font-size: 1rem; }

.banner-alto { position: relative; }
.banner-alto h1 { position: absolute; bottom: 10px; left:0; width: 100%; text-align: center; font-size: 3rem; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 3px #000; text-transform: uppercase; }

.img-titolo { position: relative; margin-bottom: 20px; }
.img-titolo img { width: 100%; border: 1px solid rgba(0,0,0,0.5); }
.img-titolo h2 { position: absolute; width: 100%; top: 45%; left:0%; color: #fff; text-align: center; text-shadow: 0 0 2px #000; }

.servizi-box { padding: 20px; }
.servizi-box p { margin-top: 20px; margin-bottom: 20px; }
.servizi-box span { display: block; padding:15px; margin: 10px 0; font-weight: bold; text-transform: uppercase; background-color: rgba(130,84,110,0.5); color: #354151; border-radius: 3px; }

.box4 > .card-deck > .card { background-color: #354151 !important; }
.box4 > .card-deck > .card > .card-body  i { color: rgba(130,84,110,1.0) !important; }
.box4 h5 { font-size: 2rem; text-shadow: 0 0 3px rgba(0,0,0,1.0); }

footer { background: url("../media/spirale.png") no-repeat; background-position: left bottom; background-attachment: fixed; }


/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.payoff-1 { font-size: 2.5rem; }
.payoff-2 { font-size: 1.1rem; }
.payoff-3 { font-size: 1.2rem; }
.home-leve { font-size: 1.2rem; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
.payoff-1 { font-size: 3.2rem; }
.payoff-2 { font-size: 1.1rem; }
.payoff-3 { font-size: 1.3rem; }
.home-leve { font-size: 1.5rem; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.payoff-1 { font-size: 4.2rem; }
.payoff-2 { font-size: 1.5rem; }
.payoff-3 { font-size: 1.7rem; }
.home-leve { font-size: 2rem; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.payoff-1 { font-size: 4.6rem; }
.payoff-2 { font-size: 1.8rem; }
.payoff-3 { font-size: 2.0rem; }
.home-leve { font-size: 2.4rem; }
}