﻿/* CLASSI AUTONOME */
.center {
    text-align: center;
}

.ver {
    vertical-align: bottom;
}

.asinistra {
    text-align: left;
}

.adestra {
    text-align: right;
}

.zero {
    margin: 0;
    padding: 0;
}

.fixed {
    position: fixed;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.relative {
    position: relative;
}

.zindex999 {
    z-index: 999;
}
/* CLASSI AUTONOME PER IL TESTO */
.compatto {
    line-height: 1.7em;
}

.lighter {
    font-weight: lighter;
}

.sizecinque {
    font-size: 5em;
}

.sizetre {
    font-size: 3em;
}

.sizedue {
    font-size: 2em;
}

.sizedueemezzo {
    font-size: 2.5em;
}

.sizeunoemezzo {
    font-size: 1.5em;
}

.sizeuno {
    font-size: 1em;
}

.piccolo {
    font-size: 0.8em;
}
/* CLASSI COLORE */
.orange {
    color: #ff5000;
}

.white {
    color: #ffffff;
}

.gold {
    color: #daa520;
}

.blu {
    color: #0013a2;
}

.viola {
    color: #630d91;
}

.lilla {
    color: #c259fa;
}
/* VEDO - NASCONDO */
.vedo {
    display: block;
}

.nascondo {
    display: none;
}
/* ELEMENTI DEDICATI ALLO SFONDO */
.pattern10 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern10.png');
}

.pattern20 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern20.png');
}

.pattern25 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern20.png');
}

.pattern30 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern30.png');
}

.pattern35 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern35.png');
}

.pattern40 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern40.png');
}

.pattern50 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern50.png');
}

.pattern60 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern60.png');
}

.pattern70 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern70.png');
}

.pattern75 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern75.png');
}

.pattern80 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/www/design/pattern80.png');
}

.pattern100 {
    z-index: -9998;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
}
/* ELEMENTI PER DATA BLOG */
.date {
    position: relative;
    background: url('/www/design/slash.svg') no-repeat center;
    left: 5px;
    top: -5px;
    width: 4em;
    height: 4em;
    overflow: hidden;
    content: "";
    float: left;
}

.moth {
    width: 100%;
    position: absolute;
    top: 0;
    text-align: left;
}

.day {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: right;
}
/* ELEMENTI DEDICATI ALLE IMMAGINI */
figure {
    margin: 0;
    padding: 0;
}

figcaption {
}

img {
    width: 100%;
    border: 0;
    float: left;
}

    img.icona {
        max-width: 50px;
    }

    img.flag {
        max-width: 30px;
        margin-top: 4px;
        margin-right: 4px;
    }

    img.foto {
        max-width: 400px;
    }
/* ELEMENTI PER CREARE LE VELATURE NEI DIV */
.cap {
    position: relative;
    width: 95%;
    margin-left: 5%;
    top: 60%;
    float: left;
}

.velo {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('/www/design/pattern30.png');
}

    .velo:hover {
        background-image: none;
    }
/* ELEMENTI PER CREARE LE CORNICI SOPRA LE FOTO */
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;
}
/* ELEMENTI DEDICATI AI VIDEO */
.videosfondo {
    display: block;
}

.video {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -9999;
    overflow: hidden;
    display: block;
}
/* ELEMENTI DEDICATI AI VIDEO */
#dots {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/www/design/dot.png');
    z-index: -5;
}
.vimeo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
}
.vimeo-wrapper iframe {
    width: 100vw;
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ELEMENTI HEADER */
header {
    width: 100%;
    float: left;
}

.testa {
    width: 100%;
    float: left;
}
/* ELEMENTI DEL CORPO */
section {
    width: 100%;
    float: left;
}

article {
    width: 100%;
    float: left;
}
/* ELEMENTI IFRAME */
iframe {
    width: 100%;
    height: 400px;
}
/* DIV PERSONALIZZATI */
.staff {
    width: 100%;
    max-width: 180px;
    float: left;
}
/* ELEMENTI ABACO GENERALI */
.boa {
    position: absolute;
    top: 45%;
    z-index: 0;
    width: 100%;
    float: left;
}

.wallpaper {
    width: 100%;
    height: 70%;
    float: left;
}

.armadio {
    width: 100%;
    float: left;
}

.armadio1100 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
/* ELEMENTI ABACO PER METTERE AL CENTRO GLI ELEMENTI */
.a50 {
    width: 100%;
    max-width: 50px;
    margin: 0 auto;
}

.a70 {
    width: 100%;
    max-width: 70px;
    margin: 0 auto;
}

.a80 {
    width: 100%;
    max-width: 80px;
    margin: 0 auto;
}

.a100 {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
}

.a120 {
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
}

.a180 {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}

.a200 {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.a250 {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.a300 {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.a500 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.a700 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.a800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
/* ELEMENTI ABACO CON ALTEZZA FISSA */
.z300 {
    width: 100%;
    height: 300px;
    float: left;
}

.z400 {
    width: 100%;
    height: 400px;
    float: left;
}

.z500 {
    width: 100%;
    height: 500px;
    float: left;
}
/* CASSETTI */
.cassetto20 {
    width: 20%;
    margin-left: 40%;
    float: left;
}

.cassetto30 {
    width: 30%;
    margin-left: 35%;
    float: left;
}

.cassetto40 {
    width: 40%;
    margin-left: 30%;
    float: left;
}

.cassetto50 {
    width: 50%;
    margin-left: 25%;
    float: left;
}

.cassetto60 {
    width: 60%;
    margin-left: 20%;
    float: left;
}

.cassetto70 {
    width: 70%;
    margin-left: 15%;
    float: left;
}

.cassetto80 {
    width: 80%;
    margin-left: 10%;
    float: left;
}

.cassetto90 {
    width: 90%;
    margin-left: 5%;
    float: left;
}

.cassetto96 {
    width: 96%;
    margin-left: 2%;
    float: left;
}

.cassetto98 {
    width: 98%;
    margin-left: 1%;
    float: left;
}

.cassetto {
    width: 100%;
    float: left;
}

.cassettopattern {
    width: 100%;
    background: url('/www/design/pattern10.png');
    float: left;
}

.cassettoblu {
    width: 100%;
    background-color: #2fa0e3;
    float: left;
}

.cassettoarancio {
    width: 100%;
    background-color: #ea772f;
    float: left;
}

.cassettoverde {
    width: 100%;
    background-color: #74c055;
    float: left;
}

.cassettoverdescuro {
    width: 100%;
    background-color: #469146;
    float: left;
}

.cassettorosso {
    width: 100%;
    background-color: #cc0000;
    float: left;
}

.cassettobluscuro {
    width: 100%;
    background-color: #045977;
    float: left;
}

.cassettogrigio {
    width: 100%;
    background-color: #f1f1f1;
    float: left;
}

.cassettogrigioscuro {
    width: 100%;
    background-color: #585858;
    float: left;
}

.cassettoardesia {
    width: 100%;
    background-color: #3b3c3b;
    float: left;
}

.cassettonero {
    width: 100%;
    background-color: #000000;
    float: left;
}

.cassettobianco {
    width: 100%;
    background-color: #ffffff;
    float: left;
}

.cassettoangoli {
    border-radius: 10px 10px 10px 10px;
    width: 100%;
    background-color: #ffffff;
    float: left;
}
/* ELEMENTI ABACO LINEE */
.lineabianca {
    width: 100%;
    border-bottom: thin solid #ffffff;
    float: left;
}

.lineabianca2 {
    width: 100%;
    border-bottom: 2px solid #ffffff;
    float: left;
}

.lineaorange {
    width: 100%;
    border-bottom: thin solid #ff5000;
    float: left;
}

.lineapurple {
    width: 100%;
    border-bottom: thin solid #900120;
    float: left;
}

.lineanera {
    width: 100%;
    border-bottom: thin solid #000000;
    float: left;
}

.lineablu {
    width: 100%;
    border-bottom: thin solid #0000ff;
    float: left;
}

.lineaviola {
    width: 100%;
    border-bottom: thin solid #630d91;
    float: left;
}

.linealilla {
    width: 100%;
    border-bottom: thin solid #c259fa;
    float: left;
}
/* ANTE */
.anta2 {
    width: 2%;
    float: left;
}

.anta3 {
    width: 3%;
    display: block;
    float: left;
}

.anta4 {
    width: 4%;
    float: left;
}

.anta5 {
    width: 5%;
    float: left;
}

.anta8 {
    width: 8%;
    float: left;
}

.anta10 {
    width: 10%;
    float: left;
}

.anta11 {
    width: 11%;
    display: block;
    float: left;
}

.anta15 {
    width: 15%;
    float: left;
}

.anta18 {
    width: 18%;
    float: left;
}

.anta20 {
    width: 20%;
    float: left;
}

.anta22 {
    width: 22%;
    float: left;
}

.anta25 {
    width: 25%;
    float: left;
}

.anta26 {
    width: 26%;
    float: left;
}

.anta27 {
    width: 27%;
    float: left;
}

.anta30 {
    width: 30%;
    float: left;
}

.anta32 {
    width: 32%;
    float: left;
}

.anta33 {
    width: 33.33%;
    float: left;
}

.anta34 {
    width: 34%;
    float: left;
}

.anta35 {
    width: 35%;
    float: left;
}

.anta36 {
    width: 36%;
    float: left;
}

.anta40 {
    width: 40%;
    float: left;
}

.anta45 {
    width: 45%;
    float: left;
}

.anta46 {
    width: 46%;
    float: left;
}

.anta47 {
    width: 47%;
    float: left;
}

.anta48 {
    width: 48%;
    float: left;
}

.anta49 {
    width: 49%;
    float: left;
}

.anta50 {
    width: 50%;
    float: left;
}

.anta60 {
    width: 60%;
    float: left;
}

.anta65 {
    width: 65%;
    float: left;
}

.anta70 {
    width: 70%;
    float: left;
}

.anta90 {
    width: 90%;
    float: left;
}
/* SPESSORI */
.spessore20 {
    width: 100%;
    height: 20px;
    float: left;
}

.spessore30 {
    width: 100%;
    height: 30px;
    float: left;
}

.spessore40 {
    width: 100%;
    height: 40px;
    float: left;
}

.spessore50 {
    width: 100%;
    height: 50px;
    float: left;
}

.spessore80 {
    width: 100%;
    height: 80px;
    float: left;
}

.spessore120 {
    width: 100%;
    height: 120px;
    float: left;
}

.spessore140 {
    width: 100%;
    height: 140px;
    float: left;
}

.spessore200 {
    width: 100%;
    height: 200px;
    float: left;
}

.spessoreh {
    width: 100%;
    height: 100%;
    float: left;
}

.spessoreh30 {
    width: 100%;
    height: 30%;
    float: left;
}

.spessoreh70 {
    width: 100%;
    height: 70%;
    float: left;
}

.spessoreh80 {
    width: 100%;
    height: 80%;
    float: left;
}

.spessoreh85 {
    width: 100%;
    height: 85%;
    float: left;
}

.spessoreh90 {
    width: 100%;
    height: 90%;
    float: left;
}
/* SORMONTI */
.sormonto20 {
    width: 100%;
    z-index: 20;
    top: -20px;
    position: relative;
    float: left;
}

.sormonto30 {
    width: 100%;
    z-index: 20;
    top: -30px;
    position: relative;
    float: left;
}
/* ELEMENTI PER CREARE UN PULSANTE */
.pulsante {
    width: 100%;
    position: relative;
    left: -15px;
    font-family: 'segoe', arial, serif;
    font-size: 1.5em;
    border: 2px solid #ff5000;
    padding: 15px;
    text-transform: uppercase;
    text-align: center;
}

    .pulsante a:link, .pulsante a:visited {
        color: #ff5000;
    }

    .pulsante a:hover {
        color: #ffffff;
    }

    .pulsante:hover a:link, .pulsante:hover a:visited {
        color: #ffffff;
    }

    .pulsante:hover {
        background-color: #ff5000;
        -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;
    }
/* ELEMENTI PER CREARE LE PAGINE A TASSELLO */
.tassellosx {
    width: 50%;
    float: left;
}

.tassellodx {
    width: 50%;
    float: right;
}

.towerwide {
}

.towersingle {
}

.towerduplex {
}

.towertessera {
}

.towerwide {
    width: 100%;
    height: 40%;
    float: left;
}

.towersingle {
    width: 100%;
    float: left;
}

.towerduplex {
    width: 100%;
    float: left;
}

.towertessera {
    width: 100%;
    height: 400px;
    float: left;
}
/* ELEMENTI DEDICATI AL PIEDE */
footer {
    width: 100%;
    float: left;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .anta11 {
        display: none;
    }

    .anta20 {
        width: 100%;
    }

    .anta22 {
        width: 100%;
    }

    .anta26 {
        width: 100%;
    }

    .anta30 {
        width: 100%;
    }

    .anta32 {
        width: 100%;
    }

    .anta40 {
        width: 100%;
    }

    .anta48 {
        width: 100%;
    }

    .anta70 {
        width: 100%;
    }

    .cassetto60 {
        width: 100%;
        margin: 0;
    }

    .fixed {
        top: 45%;
        position: relative;
    }

    .boa {
        position: relative;
    }
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-device-width: 1080px) and (orientation:portrait) {
    .anta11 {
        display: none;
    }

    .anta20 {
        width: 100%;
    }

    .anta22 {
        width: 100%;
    }

    .anta26 {
        width: 100%;
    }

    .anta30 {
        width: 100%;
    }

    .anta32 {
        width: 100%;
    }

    .anta40 {
        width: 100%;
    }

    .anta48 {
        width: 100%;
    }

    .anta70 {
        width: 100%;
    }

    .cassetto60 {
        width: 100%;
        margin: 0;
    }

    .fixed {
        top: 45%;
        position: relative;
    }

    .boa {
        position: relative;
    }
}
