@import "variabiliComuni.less";

/*inizio Classi utilizzate anche su CMS*/
.imgResize {
    width: 100%;
}

.imgResize90 {
    width: 90%;
}

.videoResize,
.mapResize {
    width: 100%;
    height: 490px;
}

.videoResizeDoppio1 {
    width: 405px;
    height: 228px;
}

.videoResizeDoppio2 {
    width: 405px;
    height: 240px;
}

.videoResizeHome {
    width: 100%;
    max-width: 870px;
    height: 500px;
}

.imgGrayScaleToColor,
.imgGrayScale {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.imgGrayScaleToColor:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

.boxFlex100,
.boxFlex100SpBetween,
.boxFlex100SpBetweenCenter,
.boxFlex100Start,
.box3Sezioni,
.boxCollaboratori {
    width: 100%;
    /*----flexbox-----*/
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /*align-items: center;*/
}

.boxFlex65 {
    width: 65%;
    /*----flexbox-----*/
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    //align-items: center;
    margin: 0 auto;
    justify-content: center;
}

.boxCollaboratori {
    justify-content: space-between;
    background-color: rgba(105, 228, 138, 0.7);
    border-radius: 5px;
    border: 4px solid #69E48A;
    padding: 15px 5px;
}

.boxFlex100 {
    justify-content: center;
}

.boxFlex100SpBetween {
    justify-content: space-between;
}

.boxFlex100SpBetweenCenter {
    justify-content: space-between;
}

.boxFlex100Start {
    justify-content: flex-start;
    align-items: center;
}

.boxFlexContent73Plan {
    width: 73%;
    margin: 0 3px 0 3px;
    text-align: center;
}

.boxFlexContent48,
.boxFlexContent48VideoDoppio,
.boxFlexContent48Immagini {
    width: 48%;
    margin: 0 3px 0 3px;
    text-align: center;
    min-width: 350px;
}

.boxFlexContentButtons {
    flex: 1;
    margin: 0 3px 0 3px;
    text-align: center;
}

.boxFlexContentButtons a {
    width: 220px;
    height: 220px;
    padding: 40px 0;
    /**/
    margin: 15px auto;
    display: block;
    border-radius: 400px;
    border: 4px dotted #DF1F6C;
    box-shadow: 1px 1px 1px @colore-sei;
    /*Grigio Scuro*/
    background-color: @colore-cinque;
    /*Bianco*/
    -webkit-transition: border 0.8s ease-out;
    -moz-transition: border 0.8s ease-out;
    -o-transition: border 0.8s ease-out;
    transition: border 0.8s ease-out;
}

.boxFlexContentButtons a span {
    display: block;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 @colore-cinque;
    /*Bianco*/
    font-size: @h4-size;
    /*20px*/
    font-family: 'Quicksand Bold';
    /*'Raleway Bold';*/
    color: #DF1F6C;
    -webkit-transition: color 0.8s ease-out;
    -moz-transition: color 0.8s ease-out;
    -o-transition: color 0.8s ease-out;
    transition: color 0.8s ease-out;
}

.boxFlexContentButtons a img {
    margin-bottom: 10px;
    -webkit-transition: filter 0.8s ease-out;
    -moz-transition: filter 0.8s ease-out;
    -o-transition: filter 0.8s ease-out;
    transition: filter 0.8s ease-out;
}

.boxFlexContentButtons a:hover {
    border: 7px solid #69E48A;
}

.boxFlexContentButtons a:hover span {
    color: #69E48A !important;
}

.boxFlexContentButtons a:hover img {
    filter: hue-rotate(136deg) saturate(5) brightness(0.89);
}

.boxFlexContent48capo {
    width: 48%;
    margin: 0 3px 0 3px;
}

.boxFlexContent48ProgressLeft,
.boxFlexContent48ProgressRight {
    width: 48%;
    margin: 0 2px 0 2px;
    padding: 0 5px 0 5px;
}

.boxFlexContent48ProgressLeft {
    text-align: right;
}

.boxFlexContent48ProgressRight {
    text-align: left;
}

.boxFlexContent48ProgressLeft p,
.boxFlexContent48ProgressRight p {
    clear: both;
    margin: 0 0 0 0;
    font-size: 0.85em !important;
}

.boxFlexContent33 {
    width: 33%;
    /*min-width: 250px;*/
    text-align: center;
}

.boxFlexContent25,
.boxFlexContent25Plan {
    width: 24.5%;
    margin: 0 3px 0 3px;
    text-align: center;
}

.boxFlexContent25Loghi {
    width: 24%;
    margin: 0 3px 12px 3px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.boxFlexContent25Loghi img {
    margin: 0 auto;
}

.boxFlexContent23 {
    width: 23%;
    margin: 0 3px 0 3px;
    text-align: center;
}

.boxFlexContentBorder {
    max-width: 297px;
    margin: 0 5px;
    border: 3px solid #44D2AE;
    background-color: @colore-cinque;
    /*Bianco*/
}

.boxFlexContentBorder img {
    border-bottom: 3px solid #44D2AE;
    margin-bottom: 10px;
}

.box3Sezioni {
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: space-between;
    /*border-radius: 5px;*/
    padding: 7px;
}

.box3Sezioni .sezioneBox3 {
    flex: 1;
    font-size: 26px;
    color: @colore-cinque;
    /*Bianco*/
    text-align: center;
}

.box3Sezioni .sezioneBox3:first-child,
.box3Sezioni .sezioneBox3:nth-child(2) {
    border-right: 2px solid @colore-cinque;
    /*Bianco*/
}

.box3Sezioni .sezioneBox3 p {
    margin: 10px 0 10px 0 !important;
}

.colonnaTesto {
    width: 47%;
    margin: 0 5px 0 5px;
}

.borderVertical,
.borderVerticalColonne {
    width: 1px;
    border-left: 1px solid @colore-sei; /*Grigio Scuro*/
}

/**/
// margine Sopra Destra 20 px, dimensione 15 px
// Da richiamare all'Html per definire il Button Scroll To Top
//CONTROLLARE CHE SIA CORRETTO
.buttonScrollToTop {
    max-width: 15px;
    padding: 15px;
    margin-bottom: 20px;
    margin-right: 20px;
    float: right;
    display: block;
    /*border: 1px solid #646464;*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: @colore-uno !important; /*#69E48A;*/
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    box-shadow: rgba(52,52,52,0.8) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    color: @colore-cinque !important; /*Bianco*/
}

.button {
    padding: 9px 18px;
    margin: 0 auto;
}

.buttonRight {
    padding: 9px 18px;
    margin-bottom: 10px;
    float: right;
}

.buttonLeft {
    padding: 9px 18px;
    margin-bottom: 10px;
    float: left;
}

.buttonSlim {
    padding: 5px 10px;
    margin: 0 auto;
}

.button,
.buttonSlim,
.buttonRight,
.buttonLeft {
    max-width: 300px;
    display: block;
    /*border: 1px solid #646464;*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: @colore-uno; /*!important; /*#69E48A;*/
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; /*text-shadow: 0 1px 0 #ffffff;*/
    color: @colore-cinque  !important; /*Bianco*/
    font-size: @h5-size; /*18px*/
    font-family: @font-bold;
    text-decoration: none;
    text-align: center;
    //vertical-align: middle;  CONTROLLARE E SE NON SERVE CANCELLARE
    -webkit-transition: background-color 0.8s ease-out;
    -moz-transition: background-color 0.8s ease-out;
    -o-transition: background-color 0.8s ease-out;
    transition: background-color 0.8s ease-out;
}

.button a,
.buttonSlim a,
.buttonRight a,
.buttonLeft a {
    color: @colore-cinque  !important;
    /*Bianco*/
    text-decoration: none !important;
    /*font-size:inherit !important;*/
    font-weight: normal;
    cursor: pointer;
}

.button:hover,
.button:active,
.buttonSlim:hover,
.buttonSlim:active,
.buttonRight:hover,
.buttonRight:active,
.buttonLeft:hover,
.buttonLeft:active {
    /*border: 1px solid #44D2AE;
            text-shadow: 0 1px 0 #000000;
            background-color: #646464;
            color: #ffffff;*/
    /*opacity: 0.5;*/
    color: @colore-due  !important;
    /*Blu Scuro*/
    background-color: @colore-tre;
    /*Arancione*/
    text-decoration: none !important;
}

.buttonRight:after,
.buttonLeft:after {
    display: block;
    float: none;
    clear: both;
}

.btnTornaProposte {
    position: absolute;
    top: 210px;
    right: 390px;
    font-size: 16px;
    font-family: 'Quicksand Bold';
    /*'Raleway Regular';*/
    font-style: italic;
    font-weight: bold;
    color: @colore-sei  !important;
    /*Grigio Scuro*/
}

.btnTornaProposte span.fa {
    font-size: @h6-size;
    /*16px*/
}

.imgStandardBorder {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 4px solid #DF1F6C;
    transform: rotate(2deg);
}

/*INIZIO DI TUTTI I @media*/

@media screen and (max-width: 1720px) {
    .btnTornaProposte {
        right: 290px;
    }
}

@media screen and (max-width: 1510px) {
    .btnTornaProposte {
        right: 220px;
    }
}

@media screen and (max-width: 1360px) {
    .btnTornaProposte {
        right: 170px;
    }
}

@media screen and (max-width: 1323px) {
    .videoResizeDoppio1 {
        width: 360px;
        height: 205px;
    }

    .videoResizeDoppio2 {
        width: 360px;
        height: 210px;
    }
}

@media screen and (max-width: 1255px) {
    .boxFlexContent25 {
        width: 22%;
        margin: 0 3px 0 3px;
    }

    .btnTornaProposte {
        right: 60px;
    }
}

@media screen and (max-width: 1215px) {
    .boxFlexContent33 {
        margin: 0 10px 0 10px;
        width: 30%;
    }
}

@media screen and (max-width: 1179px) {
    .videoResizeDoppio1 {
        width: 300px;
        height: 170px;
    }

    .videoResizeDoppio2 {
        width: 300px;
        height: 190px;
    }
}

@media screen and (max-width: 1140px) {

    .videoResize,
    .mapResize {
        height: 400px;
    }
}

@media screen and (max-width: 1078px) {
    .box3Sezioni .sezioneBox3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 1037px) {
    .btnTornaProposte {
        right: @h4-size; /*20px*/
    }
}

@media screen and (max-width: 995px) {

    .boxFlexContent25Plan,
    .boxFlexContent73Plan {
        width: 100%;
    }
}

@media screen and (max-width: 982px) {
    .videoResizeDoppio1 {
        width: 270px;
        height: 152px;
    }

    .videoResizeDoppio2 {
        width: 270px;
        height: 170px;
    }

    .boxFlexContent23 {
        width: 30%;
    }
}

@media screen and (max-width: 968px) {
    .box3Sezioni .sezioneBox3 {
        font-size: @h5-size; /*18px*/
    }
}

@media screen and (max-width: 955px) {
    .boxFlexContentBorder {
        max-width: 270px;
    }
}

@media screen and (max-width: 950px) {
    .boxFlexContent25 {
        width: 45%;
        margin: 0 10px 0 10px;
    }

    .btnTornaProposte {
        top: 180px;
    }
}

@media screen and (max-width: 920px) {
    .boxFlexContent33 {
        margin: 0 5px 0 5px;
    }
}

@media screen and (max-width: 890px) {

    .videoResizeDoppio1,
    .videoResizeDoppio2 {
        width: 405px;
        height: 250px;
    }

    .boxFlexContent48VideoDoppio {
        width: 100%;
    }
}

@media screen and (max-width: 875px) {

    .videoResize,
    .mapResize {
        height: 300px;
    }
}

@media screen and (max-width: 871px) {
    .boxFlexContentBorder {
        max-width: 250px;
    }
}

@media screen and (max-width: 860px) {
    .box3Sezioni {
        background-color: rgba(0, 0, 0, 1);
    }

    .box3Sezioni .sezioneBox3 {
        font-size: @h6-size; /*16px*/
    }
}

@media screen and (max-width: 850px) {

    .videoResize,
    .mapResize {
        height: 430px;
    }

    .boxFlexContent25Loghi {
        width: 30%;
    }
}

@media screen and (max-width: 871px) {
    .boxFlexContentBorder {
        max-width: 210px;
    }
}

@media screen and (max-width: 750px) {
    .videoResizeHome {
        height: 430px;
    }
}

@media screen and (max-width: 720px) {
    .boxFlexContent48capo {
        width: 98%;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 700px) {
    .boxFlexContent48Immagini {
        width: 99%;
    }
}

@media screen and (max-width: 692px) {
    .boxFlexContentBorder {
        max-width: 190px;
    }
}

@media screen and (max-width: 665px) {

    .videoResize,
    .mapResize {
        height: 330px;
    }
}

@media screen and (max-width: 645px) {

    .boxFlexContent33,
    .boxFlexContent25 {
        margin: 0;
        width: 100%;
    }
}

@media screen and (max-width: 632px) {
    .boxFlexContentBorder {
        max-width: 257px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 575px) {
    .videoResizeHome {
        height: 330px;
    }

    .boxFlexContentButtons {
        width: 45%;
    }

    .boxFlexContentButtons a {
        width: 190px;
        height: 190px;
        padding: 30px 0;
    }

    .boxFlexContentButtons a span {
        font-size: @h6-size !important; /*16px*/
    }
}

@media screen and (max-width: 566px) {
    .boxFlexContentBorder {
        max-width: 230px;
    }
}

@media screen and (max-width: 520px) {
    .boxFlexContent23 {
        width: 48%;
    }
}

@media screen and (max-width: 514px) {
    .boxFlexContentBorder {
        max-width: 200px;
    }
}

@media screen and (max-width: 498px) {
    .btnTornaProposte {
        top: 125px;
    }
}

@media screen and (max-width: 480px) {

    .videoResize,
    .mapResize {
        height: 230px;
    }
}

@media screen and (max-width: 454px) {
    /*.boxFlexContentBorder {
        max-width: 297px;
    }*/

    .boxFlexContentButtons {
        width: 95%;
        margin: 0 5px 0 5px;
    }

    .boxFlexContentButtons a {
        width: 220px;
        height: 220px;
        padding: 35px 0;
    }

    .boxFlexContentButtons a span {
        font-size: 22px;
    }
}

@media screen and (max-width: 450px) {

    .videoResizeDoppio1,
    .videoResizeDoppio2 {
        width: 350px;
        height: 220px;
    }
}

@media screen and (max-width: 437px) {
    .colonnaTesto {
        width: 99%;
        margin: 0 auto;
    }

    .borderVerticalColonne {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    .videoResizeHome {
        height: 240px;
    }

    .boxFlexContent25Loghi {
        width: 40%;
    }
}

@media screen and (max-width: 380px) {
    .btnTornaProposte {
        /*top: 65px;*/
        right: 10px;
    }
}

@media screen and (max-width: 390px) {

    .videoResizeDoppio1,
    .videoResizeDoppio2 {
        width: 260px;
        height: 150px;
    }
}

@media screen and (max-width: 355px) {
    .boxFlexContent23 {
        width: 99%;
    }
}

/*fine Classi utilizzate anche su CMS*/