﻿/* ******************************************************************************************** QUESTI ELEMENTI SERVONO PER NASCONDERE O RENDERE VISIBILE GLI ELEMENTI */
.nomobile {
    display: block;
}
@media only screen and (max-width: 599px) {
    .nomobile {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .nomobile {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .nomobile {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .nomobile {
        display: none;
    }
}
.simobile {
    display: none;
}
@media only screen and (max-width: 599px) {
    .simobile {
        display: block;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .simobile {
        display: block;
    }
}
@media only screen and (min-width: 1000px) {
    .simobile {
        display: none;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .simobile {
        display: block;
    }
}
/* ******************************************************************************************** VEDO - NASCONDO */
.vedo {
    display: block;
}
.nascondo {
    display: none;
}
.nostampa {
    display: block;
}
.sistampa {
    display: none;
}
/* ******************************************************************************************** APRI CHIUDI */
#initiallyHiddenBlock {
    display: none;
}
#initiallyHiddenBlock2 {
    display: none;
}
/* ******************************************************************************************** TESTI E LINK */
a {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
a.linc:link, a.linc:visited, a.linc:hover {
    text-decoration: none;
    font-weight: lighter;
}
a.lincbianco:link, a.lincbianco:visited {
    color: #ffffff;
    text-decoration: underline;
}
a.lincbianco:hover {
    color: #ffffff;
    text-decoration: none;
}
a.linccarbone:link, a.linccarbone:visited {
    color: #1e2a36;
    text-decoration: underline;
}
a.linccarbone:hover {
    color: #1e2a36;
    text-decoration: none;
}
a.lincbiancosenzalinea:link, a.lincbiancosenzalinea:visited {
    color: #ffffff;
    text-decoration: none;
}
a.lincbiancosenzalinea:hover {
    color: #ffffff;
    text-decoration: none;
}
h1 {
    font-size: 3em;
    line-height: 1.5em;
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    h1 {
        font-size: 2em;
    }
}
h2 {
    font-size: 2.5em;
    line-height: 1.5em;
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    h2 {
        font-size: 1.8em;
    }
}
h3 {
    font-size: 2em;
    line-height: 1.5em;
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    h3 {
        font-size: 1.7em;
    }
}
h4 {
    font-size: 1.7em;
    line-height: 1.8em;
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    h4 {
        font-size: 1.5em;
    }
}
h5 {
    font-size: 1.2em;
    line-height: 1.5em;
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    h5 {
        font-size: 1.0em;
    }
}
p {
    margin-left: 0;
    padding: 0;
}
.zsei {
    font-size: 0.6em;
}
.zotto {
    font-size: 0.8em;
}
.znove {
    font-size: 0.9em;
}
.uno {
    font-size: 1.0em;
}
.unoedue {
    font-size: 1.2em;
}
.unoetre {
    font-size: 1.3em;
}
.unoemezzo {
    font-size: 1.5em;
}
.unoeotto {
    font-size: 1.8em;
}
.due {
    font-size: 2.0em;
}
.dueedue {
    font-size: 2.2em;
}
.dueetre {
    font-size: 2.3em;
}
.dueemezzo {
    font-size: 2.5em;
}
.tre {
    font-size: 3.0em;
}
.quattro {
    font-size: 4.0em;
}
blockquote {
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
}
blockquote p {
    width: 70%;
    margin-left: 15%;
    font-style: italic;
}
/* ******************************************************************************************** FORMATTAZIONE */
.bold {
    font-weight: bolder;
}
.uppercase {
    text-transform: uppercase;
}
/* ******************************************************************************************** ALLINEAMENTI */
.center {
    text-align: center;
}
.asinistra {
    text-align: left;
}
.adestra {
    text-align: right;
}
.zero {
    margin: 0;
    padding: 0;
}
/* ******************************************************************************************** COLORI */
.bianco {
    color: #ffffff;
}
.arancio {
    color: #ff5000;
}
.nero {
    color: #000000;
}
.grigio {
    color: #373737;
}
.grigiotopo {
    color: #402e2e;
}
.antracite {
    color: #3f4c59;
}
.grigioscuro {
    color: #1d1d1d;
}
.grigioperla {
    color: #f3f3f3;
}
.carbone {
    color: #1e2a36;
}
.rossocina {
    color: #c93930;
}
.verdescuro {
	color: #469146;
}
.marrone {
	color: #4f3125;
}
.viola {
	color: #ae18ae;
}
.verdemare {
	color: #18aea4;
}
.oro {
	color: #daa520;
}
/* ******************************************************************************************** Z-INDEX */
.zindex1 {
    z-index: 1;
}
.zindex10 {
    z-index: 10;
}
/* ******************************************************************************************** ELEMENTI DEDICATI ALLE IMMAGINI */
img {
    position: relative;
    width: 100%;
    border: 0;
    float: left;
}
p img {
    margin-bottom: 30px;
}
p img.portfolio {
    border: thin solid #ff5000;
    margin-bottom: 0px;
}
figure {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
}
figcaption {
    font-family: 'helv', arial, serif;
    font-size: 0.8em;
    margin-bottom: 30px;
}
img.flag {
    max-width: 24px;
    margin-right: 1px;
	margin-left: 1px;
}
img.iconapiupiccola {
    width: 100%;
    max-width: 30px;
    margin-right: 10px;
	margin-left: 10px;
}
img.iconapiccola {
    width: 100%;
    max-width: 40px;
    margin-left: 10px;
    margin-right: 10px;
}
img.icona {
    width: 100%;
    max-width: 50px;
    margin-right: 5px;
    margin-left: 5px;
}
img.iconamedia {
    width: 100%;
    max-width: 70px;
    margin-right: 10px;
	margin-left: 10px;
}
img.iconamediopiccola {
    width: 100%;
    max-width: 120px;
    margin-right: 10px;
	margin-left: 10px;
}
img.iconamediogrande {
    width: 100%;
    max-width: 180px;
    margin-right: 10px;
	margin-left: 10px;
}
img.iconagrande {
    margin-top: 10px;
    margin-right: 20px;
}
@media only screen and (max-width: 599px) {
    img.iconagrande {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    img.iconagrande {
        width: 100%;
        max-width: 200px;
        margin-bottom: 0px;
    }
}
@media only screen and (min-width: 1000px) {
    img.iconagrande {
        width: 100%;
        max-width: 200px;
        margin-bottom: 0px;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    img.iconagrande {
        width: 100%;
        max-width: 100%;
		margin-bottom: 0px;
    }
}
img.iconacorsi {
    
}
@media only screen and (max-width: 599px) {
    img.iconacorsi {
        width: 100%;
        max-width: 100%;
		margin-top: 10px;
		margin-right: 20px;
        margin-bottom: 10px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    img.iconacorsi {
        width: 100%;
        max-width: 200px;
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 20px;
    }
}
@media only screen and (min-width: 1000px) {
    img.iconacorsi {
        width: 100%;
        max-width: 200px;
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 20px;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    img.iconagrande {
        width: 100%;
		max-width: 100%;
		margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 10px;
    }
}
img.iconapodcastpiccola {
    width: 100%;
    max-width: 180px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
}
img.iconapodcast {
    width: 100%;
    max-width: 250px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
}
img.iconarivista {
    width: 100%;
    max-width: 350px;
    margin-right: 40px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 599px) {
    img.iconarivista {
        max-width: 100%;
        margin-right: 0px;
        margin-bottom: 40px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    img.iconarivista {
        max-width: 200px;
    }
}
@media only screen and (min-width: 1000px) {
    img.iconarivista {
        max-width: 350px;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    img.iconarivista {
        max-width: 100%;
        margin-right: 0px;
        margin-bottom: 40px;
    }
}
/* ******************************************************************************************** IFRAME */
iframe {
    width: 100%;
    height: 480px;
    border: 0;
    float: left;
}
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
iframe.podcast {
    width: 100%;
    height: 190px;
    border: 0;
    float: left;
}
iframe.podcastmobile {
    width: 280px;
    height: 190px;
    border: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
}
iframe.trasparente {
    width: 100%;
    height: 600px;
    border: 0;
    float: left;
}
@media only screen and (max-width: 599px) {
    iframe.trasparente {
        height: 700px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    iframe.trasparente {
        height: 700px;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1024px) {
    iframe.trasparente {
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1150px) {
    iframe.trasparente {
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    iframe.trasparente {
        height: 850px;
    }
}
iframe.ricerca {
    width: 100%;
    height: 200px;
    background-color: #3f4c59;
}
iframe.double {
    width: 100%;
    background-color: #ffffff;
}
@media only screen and (max-width: 599px) {
    iframe.double {
        height: 700px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    iframe.double {
        height: 700px;
    }
}
@media only screen and (min-width: 1000px) {
    iframe.double {
        height: 500px;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    iframe.double {
        width: 100%;
        height: 700px;
    }
}
iframe.formnewsletter {
    width: 100%;
    float: left;
    background-color: #ffffff;
}
@media only screen and (max-width: 599px) {
    iframe.formnewsletter {
        height: 400px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    iframe.formnewsletter {
        height: 370px;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1024px) {
    iframe.formnewsletter {
        height: 350px;
    }
}
@media only screen and (min-width: 1025px) {
    iframe.formnewsletter {
        height: 220px;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    iframe.formnewsletter {
        width: 100%;
        height: 550px;
    }
}
/* ******************************************************************************************** OMBRA */
.shadow {
    text-shadow: 2px 1px 1px #000000;
}
/* ******************************************************************************************** BOTTONE */
.bottonesemplice {
    font-family: 'helv', arial, serif;
    padding: 0px 15px 0px 0px;
    margin: 0px;
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    float: left;
    font-size: 1em;
    text-transform: none;
    color: #ff5000;
}
.bottone {
    font-family: 'helv', arial, serif;
    padding: 10px 20px;
    margin: 2px;
    background-color: #ff5000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    float: right;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #ffffff;
}
.bottonecellulare {
    width: 100%;
    font-family: 'helv', arial, serif;
    padding: 10px 20px;
    margin: 2px;
    background-color: #ff5000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    float: left;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-align: center;
}
.bottonepagaora {
    width: 350px;
}
/* ******************************************************************************************** SPESSORI IN PIXEL */
.spessore5 {
    position: relative;
    width: 100%;
    height: 5px;
    float: left;
}
.spessore10 {
    position: relative;
    width: 100%;
    height: 10px;
    float: left;
}
.spessore15 {
    position: relative;
    width: 100%;
    height: 15px;
    float: left;
}
.spessore20 {
    position: relative;
    width: 100%;
    height: 20px;
    float: left;
}
.spessore30 {
    position: relative;
    width: 100%;
    height: 30px;
    float: left;
}
.spessore40 {
    position: relative;
    width: 100%;
    height: 40px;
    float: left;
}
.spessore50 {
    position: relative;
    width: 100%;
    height: 50px;
    float: left;
}
.spessore60 {
    position: relative;
    width: 100%;
    height: 60px;
    float: left;
}
.spessore80 {
    position: relative;
    width: 100%;
    height: 80px;
    float: left;
}
.spessore100 {
    position: relative;
    width: 100%;
    height: 100px;
    float: left;
}
.spessore120 {
    position: relative;
    width: 100%;
    height: 120px;
    float: left;
}
.spessore150 {
    position: relative;
    width: 100%;
    height: 150px;
    float: left;
}
.spessore160 {
    position: relative;
    width: 100%;
    height: 160px;
    float: left;
}
.spessore170 {
    position: relative;
    width: 100%;
    height: 170px;
    float: left;
}
.spessore180 {
    position: relative;
    width: 100%;
    height: 180px;
    float: left;
}
.spessore190 {
    position: relative;
    width: 100%;
    height: 190px;
    float: left;
}
.spessore200 {
    position: relative;
    width: 100%;
    height: 200px;
    float: left;
}
.spessore250 {
    position: relative;
    width: 100%;
    height: 250px;
    float: left;
}
.spessore300 {
    position: relative;
    width: 100%;
    height: 300px;
    float: left;
}
.spessore400 {
    position: relative;
    width: 100%;
    height: 400px;
    float: left;
}
/* ******************************************************************************************** SPESSORI IN PERCENTUALE */
.spessoreh {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
}
.spessoreh5 {
    position: relative;
    width: 100%;
    height: 5%;
    float: left;
}
.spessoreh10 {
    position: relative;
    width: 100%;
    height: 10%;
    float: left;
}
.spessoreh20 {
    position: relative;
    width: 100%;
    height: 20%;
    float: left;
}
.spessoreh30 {
    position: relative;
    width: 100%;
    height: 30%;
    float: left;
}
.spessoreh40 {
    position: relative;
    width: 100%;
    height: 40%;
    float: left;
}
.spessoreh50 {
    position: relative;
    width: 100%;
    height: 50%;
    float: left;
}
.spessoreh60 {
    position: relative;
    width: 100%;
    height: 60%;
    float: left;
}
.spessoreh65 {
    position: relative;
    width: 100%;
    height: 65%;
    float: left;
}
.spessoreh70 {
    position: relative;
    width: 100%;
    height: 70%;
    float: left;
}
.spessoreh80 {
    position: relative;
    width: 100%;
    height: 80%;
    float: left;
}
.spessoreh90 {
    position: relative;
    width: 100%;
    height: 90%;
    float: left;
}
/* ******************************************************************************************** ELEMENTI LINEE COLORATE */
.lineabianca {
    position: relative;
    width: 100%;
    border-bottom: thin solid #ffffff;
    float: left;
}
.lineaarancio {
    position: relative;
    width: 100%;
    border-bottom: thin solid #ff5000;
    float: left;
}
.lineabianca2 {
    position: relative;
    width: 100%;
    border-bottom: 2px solid #ffffff;
    float: left;
}
.lineabianca3 {
    position: relative;
    width: 100%;
    border-bottom: 3px solid #ffffff;
    float: left;
}
.lineabianca6 {
    position: relative;
    width: 100%;
    border-bottom: 6px solid #ffffff;
    float: left;
}
.lineanera {
    position: relative;
    width: 100%;
    border-bottom: thin solid #000000;
    float: left;
}
.lineagrigia {
    position: relative;
    width: 100%;
    border-bottom: thin solid #808080;
    float: left;
}
.lineacarbone {
    position: relative;
    width: 100%;
    border-bottom: thin solid #1e2a36;
    float: left;
}
.lineacarbone2 {
    position: relative;
    width: 100%;
    border-bottom: 2px solid #1e2a36;
    float: left;
}
/* ******************************************************************************************** ANCORE */
.ancora50 {
    position: relative;
    top: -50px;
}
.ancora100 {
    position: relative;
    top: -100px;
}
.ancora200 {
    position: relative;
    top: -200px;
}
/* ******************************************************************************************** LINEE PER BORDI */
.borderbianco {
    border: thin solid #ffffff;
}
.borderarancio {
    border: thin solid #ff5000;
}
.bordercarbone {
    border: thin solid #1e2a36;
}
/* ******************************************************************************************** CASSETTI E PAYPAL */
.cassetto, .cassettopaypal, .umbraco {
    position: relative;
    width: 100%;
    float: left;
    z-index: 1;
}
.cassettofisso {
    position: fixed;
    width: 100%;
    float: left;
    z-index: 100;
}
.umbraco p img, .umbraco img {
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    float: left;
}
p img.umbraco {
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border: thin solid #ff5000;
    float: left;
}
.cassettopaypal {
    font-family: 'helv', arial, serif;
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1em;
    text-align: left;
    color: #000000;
    letter-spacing: 0.07em;
}
.cassettopaypal table {
    width: 350px;
}
.cassettopaypal table select {
    width: 350px;
    font-family: 'helv', arial, serif;
    font-size: 1em;
}
.cassetto10 {
    position: relative;
    width: 10%;
    margin-left: 45%;
    float: left;
}
.cassetto20 {
    position: relative;
    width: 20%;
    margin-left: 40%;
    float: left;
}
.cassetto24 {
    position: relative;
    width: 24%;
    margin-left: 38%;
    float: left;
}
.cassetto30 {
    position: relative;
    width: 30%;
    margin-left: 35%;
    float: left;
}
.cassetto40 {
    position: relative;
    width: 40%;
    margin-left: 30%;
    float: left;
}
.cassetto50 {
    position: relative;
    width: 50%;
    margin-left: 25%;
    float: left;
}
.cassetto60 {
    position: relative;
    width: 60%;
    margin-left: 20%;
    float: left;
}
.cassetto70 {
    position: relative;
    width: 70%;
    margin-left: 15%;
    float: left;
}
.cassetto80 {
    position: relative;
    width: 80%;
    margin-left: 10%;
    float: left;
}
.cassetto90 {
    position: relative;
    width: 90%;
    margin-left: 5%;
    float: left;
}
.cassettosx90 {
    position: relative;
    width: 90%;
    float: left;
}
.cassetto96 {
    position: relative;
    width: 96%;
    margin-left: 2%;
    float: left;
}
.cassetto98 {
    position: relative;
    width: 98%;
    margin-left: 1%;
    float: left;
}
/* ******************************************************************************************** CASSETTI COLORATI */
.cassettobianco {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    float: left;
}
.cassettonero {
    width: 100%;
    background-color: #000000;
    float: left;
}
.cassettoantracite {
    position: relative;
    width: 100%;
    background-color: #3f4c59;
    float: left;
}
.cassettogrigiotopo {
    position: relative;
    width: 100%;
    background-color: #402e2e;
    float: left;
}
.cassettocarbone {
    position: relative;
    width: 100%;
    background-color: #1e2a36;
    float: left;
}
.cassettogrigiochiaro {
    position: relative;
    width: 100%;
    background-color: #eeeeee;
    float: left;
}
.cassettogrigioscuro {
    position: relative;
    width: 100%;
    background-color: #1d1d1d;
    float: left;
}
.cassettogrigioperla {
    position: relative;
    width: 100%;
    background-color: #f3f3f3;
    float: left;
}
.cassettoperla {
    position: relative;
    width: 100%;
    background-color: #fbfaf6;
    float: left;
}
.cassettomarrone {
    position: relative;
    width: 100%;
    background-color: #4f3125;
    float: left;
}
.cassettoblu {
    position: relative;
    width: 100%;
    background-color: #2fa0e3;
    float: left;
}
.cassettopaglierino {
    position: relative;
    width: 100%;
    background-color: #ffffbf;
    float: left;
}
.cassettocyan {
    position: relative;
    width: 100%;
    background-color: #00aeef;
    float: left;
}
.cassettoazzurro {
    position: relative;
    width: 100%;
    background-color: #cef6f6;
    float: left;
}
.cassettoarancio {
    position: relative;
    width: 100%;
    background-color: #ff5000;
    float: left;
}
.cassettoverde {
    position: relative;
    width: 100%;
    background-color: #74c055;
    float: left;
}
.cassettoverdechiaro {
    position: relative;
    width: 100%;
    background-color: #a7ef8a;
    float: left;
}
.cassettoverdescuro {
    position: relative;
    width: 100%;
    background-color: #469146;
    float: left;
}
.cassettorosso {
    position: relative;
    width: 100%;
    background-color: #cc0000;
    float: left;
}
.cassettorosa {
    position: relative;
    width: 100%;
    background-color: #f8ebdc;
    float: left;
}
.cassettobluscuro {
    position: relative;
    width: 100%;
    background-color: #045977;
    float: left;
}
.cassettogrigio {
    position: relative;
    width: 100%;
    background-color: #a6a6a6;
    float: left;
}
.cassettogrigioscuro {
    position: relative;
    width: 100%;
    background-color: #585858;
    float: left;
}
.cassettoardesia {
    position: relative;
    width: 100%;
    background-color: #3b3c3b;
    float: left;
    display: block;
}
.cassettogrigiotopo {
    position: relative;
    width: 100%;
    background-color: #664e4e;
    float: left;
    display: block;
}
.cassettoavion {
    position: relative;
    width: 100%;
    background-color: #647687;
    float: left;
}
.cassettoocra {
    position: relative;
    width: 100%;
    background-color: #ffcc33;
    float: left;
}
.cassettoaragosta {
    position: relative;
    width: 100%;
    background-color: #cc5500;
    float: left;
}
.cassettonero {
    position: relative;
    width: 100%;
    background-color: #000000;
    float: left;
}
.cassettobianco {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    float: left;
}
/* ******************************************************************************************** PATTERN */
.pattern5 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern05.png') repeat;
    float: left;
}
.pattern10 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern10.png') repeat;
    float: left;
}
.pattern15 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern15.png') repeat;
    float: left;
}
.pattern20 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern20.png') repeat;
    float: left;
}
.pattern25 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern25.png') repeat;
    float: left;
}
.pattern30 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern30.png') repeat;
    float: left;
}
.pattern35 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern35.png') repeat;
    float: left;
}
.pattern40 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern40.png') repeat;
    float: left;
}
.pattern45 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern45.png') repeat;
    float: left;
}
.pattern50 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern50.png') repeat;
    float: left;
}
.pattern55 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern55.png') repeat;
    float: left;
}
.pattern60 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern60.png') repeat;
    float: left;
}
.pattern65 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern65.png') repeat;
    float: left;
}
.pattern70 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern70.png') repeat;
    float: left;
}
.pattern75 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern75.png') repeat;
    float: left;
}
.pattern80 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern80.png') repeat;
    float: left;
}
.pattern85 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern85.png') repeat;
    float: left;
}
.pattern90 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern90.png') repeat;
    float: left;
}
.pattern95 {
    position: relative;
    width: 100%;
    background: url('https://www.brioweb.eu/it/pattern/pattern95.png') repeat;
    float: left;
}
/* ******************************************************************************************** CASSETTO DIMENSIONE FISSA CHE SI ADATTA */
.f20 {
    position: relative;
    width: 100%;
    max-width: 20px;
    float: left;
}
.f40 {
    position: relative;
    width: 100%;
    max-width: 40px;
    float: left;
}
.f50 {
    position: relative;
    width: 100%;
    max-width: 50px;
    float: left;
}
.f120 {
    position: relative;
    width: 100%;
    max-width: 120px;
    float: left;
}
.f180 {
    position: relative;
    width: 100%;
    max-width: 180px;
    float: left;
}
.f200 {
    position: relative;
    width: 100%;
    max-width: 200px;
    float: left;
}
.f240 {
    position: relative;
    width: 100%;
    max-width: 240px;
    float: left;
}
.f250 {
    position: relative;
    width: 100%;
    max-width: 250px;
    float: left;
}
.f300 {
    position: relative;
    width: 100%;
    max-width: 300px;
    float: left;
}
.f350 {
    position: relative;
    width: 100%;
    max-width: 350px;
    float: left;
}
.f500 {
    position: relative;
    width: 100%;
    max-width: 500px;
    float: left;
}
/* ******************************************************************************************** CASSETTO DIMENSIONE FISSA AL CENTRO */
.a20 {
    position: relative;
    width: 100%;
    max-width: 20px;
    margin: 0 auto;
}
.a40 {
    position: relative;
    width: 100%;
    max-width: 40px;
    margin: 0 auto;
}
.a50 {
    position: relative;
    width: 100%;
    max-width: 50px;
    margin: 0 auto;
}
.a60 {
    position: relative;
    width: 100%;
    max-width: 60px;
    margin: 0 auto;
}
.a70 {
    position: relative;
    width: 100%;
    max-width: 70px;
    margin: 0 auto;
}
.a80 {
    position: relative;
    width: 100%;
    max-width: 80px;
    margin: 0 auto;
}
.a90 {
    position: relative;
    width: 100%;
    max-width: 90px;
    margin: 0 auto;
}
.a100 {
    position: relative;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
}
.a120 {
    position: relative;
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
}
.a140 {
    position: relative;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
}
.a150 {
    position: relative;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
}
.a180 {
    position: relative;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}
.a200 {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.a208 {
    position: relative;
    width: 100%;
    max-width: 208px;
    margin: 0 auto;
}
.a220 {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}
.a224 {
    position: relative;
    width: 100%;
    max-width: 224px;
    margin: 0 auto;
}
.a240 {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}
.a250 {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}
.a260 {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}
.a280 {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}
.a300 {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.a340 {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}
.a350 {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.a360 {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}
.a400 {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.a500 {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.a560 {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.a600 {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.a700 {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
.a800 {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.a1000 {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.a1200 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.a1400 {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.a1600 {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
.a1800 {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}
.a1900 {
    position: relative;
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
}
.a2000 {
    position: relative;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
}
/* ******************************************************************************************** ANTE */
.anta05 {
    position: relative;
    width: 0.5%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta05 {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta05 {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .anta05 {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta05 {
        display: none;
    }
}
.anta1 {
    position: relative;
    width: 1%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta1 {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta1 {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .anta1 {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta1 {
        display: none;
    }
}
.anta2 {
    position: relative;
    width: 2%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta2 {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta2 {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .anta2 {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta2 {
        display: none;
    }
}
.anta4 {
    position: relative;
    width: 4%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta4 {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta4 {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .anta4 {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta4 {
        display: none;
    }
}
.anta5 {
    position: relative;
    width: 5%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta5 {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta5 {
        display: none;
    }
}
@media only screen and (min-width: 1000px) {
    .anta5 {
        display: block;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta5 {
        display: block;
    }
}
.anta10 {
    position: relative;
    width: 10%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta10 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta10 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta10 {
        width: 10%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta10 {
        width: 100%;
    }
}
.anta12 {
    position: relative;
    width: 12%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta12 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta12 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta12 {
        width: 12%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta12 {
        width: 100%;
    }
}
.anta15 {
    position: relative;
    width: 15%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta15 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta15 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta15 {
        width: 15%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta15 {
        width: 100%;
    }
}
.anta18 {
    position: relative;
    width: 18%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta18 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta18 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta18 {
        width: 18%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta18 {
        width: 100%;
    }
}
.anta20 {
    position: relative;
    width: 20%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta20 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta20 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta20 {
        width: 20%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta20 {
        width: 100%;
    }
}
.anta22 {
    position: relative;
    width: 22%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta22 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta22 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta22 {
        width: 22%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta22 {
        width: 100%;
    }
}
.anta24 {
    position: relative;
    width: 24%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta24 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta24 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta24 {
        width: 24%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta24 {
        width: 100%;
    }
}
.anta25 {
    position: relative;
    width: 25%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta25 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta25 {
        width: 50%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta25 {
        width: 25%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta25 {
        width: 100%;
    }
}
.anta28 {
    position: relative;
    width: 28%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta28 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta28 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta28 {
        width: 28%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta28 {
        width: 100%;
    }
}
.anta30 {
    position: relative;
    width: 30%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta30 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta30 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta30 {
        width: 30%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta30 {
        width: 100%;
    }
}
.anta32 {
    position: relative;
    width: 32%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta32 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta32 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta32 {
        width: 32%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta32 {
        width: 100%;
    }
}
.anta33 {
    position: relative;
    width: 33.333%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta33 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta33 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta33 {
        width: 33%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta33 {
        width: 100%;
    }
}
.anta35 {
    position: relative;
    width: 35%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta35 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta35 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta35 {
        width: 35%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta35 {
        width: 100%;
    }
}
.anta40 {
    position: relative;
    width: 40%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta40 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta40 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta40 {
        width: 40%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta40 {
        width: 100%;
    }
}
.anta48 {
    position: relative;
    width: 48%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta48 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta48 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta48 {
        width: 48%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta48 {
        width: 100%;
    }
}
.anta50 {
    position: relative;
    width: 50%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta50 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta50 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta50 {
        width: 50%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta50 {
        width: 100%;
    }
}
.anta55 {
    position: relative;
    width: 55%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta55 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta55 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta55 {
        width: 55%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta55 {
        width: 100%;
    }
}
.anta60 {
    position: relative;
    width: 60%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta60 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta60 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta60 {
        width: 60%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta60 {
        width: 100%;
    }
}
.anta65 {
    position: relative;
    width: 65%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta65 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta65 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta65 {
        width: 65%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta65 {
        width: 100%;
    }
}
.anta70 {
    position: relative;
    width: 70%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta70 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta70 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta70 {
        width: 70%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta70 {
        width: 100%;
    }
}
.anta75 {
    position: relative;
    width: 75%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta75 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta75 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta75 {
        width: 70%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta75 {
        width: 100%;
    }
}
.anta80 {
    position: relative;
    width: 80%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta80 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta80 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta80 {
        width: 80%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta80 {
        width: 100%;
    }
}
.anta88 {
    position: relative;
    width: 88%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta88 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta88 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta88 {
        width: 88%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta88 {
        width: 100%;
    }
}
.anta90 {
    position: relative;
    width: 90%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .anta90 {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .anta90 {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .anta90 {
        width: 90%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .anta90 {
        width: 100%;
    }
}
.anta50fissa {
    position: relative;
    width: 50%;
    float: left;
}
/* ******************************************************************************************** WALLPAPER */
.wallpaper {
    width: 100%;
    float: left;
}
/* ******************************************************************************************** HOMEPAGE TUTTA PAGINA VIDEO E IMMAGINI */
#dots {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/it/design/dot.png');
    z-index: -15;
}#dotsgrigio {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/it/design/dotgrigio.png');
    z-index: -15;
}
.puntini {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/it/design/dot.png');
    z-index: 0;
}
.vimeo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    pointer-events: none;
    overflow: hidden;
}
.vimeo-wrapper iframe {
    position: absolute;
    width: 100vw;
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    min-height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.youtube-wrapper {
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #000000;
}
.youtube-wrapper iframe {
    position: relative;
    width: 70vw;
    height: 70vh; 
    left: 50%;
    transform: translate(-50%);
}
.vetrina {
    position: relative;
    width: 100%;
    height: 90%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .vetrina {
        height: auto;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .vetrina {
        height: auto;
    }
}
@media only screen and (min-width: 1000px) {
    .vetrina {
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .vetrina {
    }
}
.evidenza {
    position: relative;
    width: 100%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .evidenza {
        height: auto;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .evidenza {
        height: auto;
    }
}
@media only screen and (min-width: 1000px) {
    .evidenza {
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .evidenza {
    }
}
/* ******************************************************************************************** CUSTOM SEZIONE BLOG */
.contenitore {
    width: 100%;
    border: thin solid #ff5000;
    border-radius: 10px;
    background-color: #f3f3f3;
    float: left;
}
.contenitore p, .citazione p {
    font-size: 1.15em;
    line-height: 1.8em;
}
.contenitore ol {
    margin-right: 20px;
}
.citazione p {
    font-style: italic;
    text-align: center;
    margin-left: 20px;
    padding-bottom: 20px;
}
/* ******************************************************************************************** BOX TWITTER NEL BLOG */
.twitter {
    width: 80%;
    margin-left: 10%;
    border: thin solid #ff5000;
    border-radius: 10px;
    background-color: #f3f3f3;
    float: left;
}
.twitter p {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.5em;
    text-align: center;
}
p.click {
    margin-top: 15px;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 0;
    font-family: 'helv', arial, serif;
    font-size: 0.8em;
    line-height: 1.5em;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #ff5000;
}
/* ******************************************************************************************** SEZIONE PER FOTO POPUP */
img.foto {
    max-width: 400px;
}
p.box-uno {
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 10;
    float: left;
}
p.box-due {
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 20;
    float: left;
}
/* ******************************************************************************************** ROLLOVER IMMAGINE TESTO STANDARD NON È QUELLO DELLA HOMEPAGE VEDI CUSTOM.CSS */
.anteprima {
    position: relative; /* SERVE A POSIZIONARE IL DIV E PERMETTE A MASK DI RIMANERE DENTRO */
    width: 100%; /* PER RIEMPIRE IL DIV CHE LO CONTIENE */
    float: left; /* SERVE PER ADATTARE BENE IL DIV ANTEPRIMA */
}
.anteprima .mask {
    position: absolute; /* PER IL ROLLOVER */
    width: 100%; /* SI ADATTA ALLA LARGHEZZA */
    height: 100%; /* SI ADATTA ALL ALTEZZA */
    top: 0; /* PER POSIZIONARLO */
    left: 0;
    opacity: 0; /* LO RENDE TRASPARENTE */
    background: rgba(0, 0, 0, 0.6); /* GLI DA IL COLORE */
    z-index: 15; /* ATTENZIONE SE E' TROPPO ALTO SI SUPERANO LE FASCIE DESTRA E SINISTRA */
    transition: all 1s; /* SENZA QUESTO SAREBBE UN APPAIO E SCOMPAIO IMMEDIATO */
    text-align: center; /* METTE IL TESTO AL CENTRO E' IMPORTANTE CHE SIA QUI PER EVITARE LO SPOSTAMENTO DEL TESTO */
    text-transform: uppercase;
    font-family: 'segoe', arial, serif;
    font-size: 1.25em;
}
.anteprima:hover .mask {
    opacity: 1; /* IMPOSTA OPACITA QUANDO IL MOUSE PASSA SOPRA */
}
.mask::before { /* QUESTO SERVE A CREARE PRIMA DI OGNI DIV MASK LO SPAZIO CHE METTE AL CENTRO IN VERTICALE */
    content: " ";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.mask a.portfoliorollover {
    color: #ffffff
}
/* ******************************************************************************************** FORM */
.cassettoform {
    width: 96%;
    margin-left: 2%;
    float: left;
}
.quarto {
    width: 25%;
    float: left;
}
@media only screen and (max-width: 599px) {
    .quarto {
        width: 100%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
    .quarto {
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1024px) {
    .quarto {
        width: 25%;
    }
}
@media only screen and (max-device-width: 1440px) and (orientation: portrait) {
    .quarto {
        width: 100%;
    }
}