/*
    NOTE: all the classes are mobile first (320px to 767px).
    Media queries must be 'min-width', except for a 'max-width: 319px' media query.
*/

/********************************************************************************/
/***** 4 BOXES GRID *************************************************************/
/********************************************************************************/

.fourBoxesGrid {
    background: url('/SiteImg/Support_ThirdStripe.jpg') no-repeat center top;
    padding: 20px 0;
}

    .fourBoxesGrid .item {
        background-color: red;
        padding: 20px;
        margin-bottom: 20px;
        min-height: 230px;
    }

    .fourBoxesGrid .row:last-child .itemContainer:last-child .item {
        margin-bottom: 0;
    }

    .fourBoxesGrid .item h2 {
        margin-top: 0;
        text-transform: uppercase;
        color: #fff;
    }

    .fourBoxesGrid .item p {
        font-size: .9em;
        color: #fff;
        margin-bottom: 20px;
    }

    .fourBoxesGrid .item img {
        width: 100%;
        max-width: 130px;
        float: right;
        clear: both;
    }

    .fourBoxesGrid .row:first-child .itemContainer:first-child .item p {
        margin-bottom: 10px;
    }

    .fourBoxesGrid .item .button {
        color: #fff;
        background-color: blue;
        padding: 10px 20px;
        display: inline-block;
        font-size: 1em;
    }

        .fourBoxesGrid .item .button:hover {
            text-decoration: none;
            background-color: green;
        }

@media only screen and (min-width: 768px) {

    .fourBoxesGrid .item {
        min-height: 350px;
    }

        .fourBoxesGrid .item h2 {
            font-size: 1em;
        }
}

@media only screen and (min-width: 992px) {

    .fourBoxesGrid .item {
        min-height: 305px;
    }

        .fourBoxesGrid .item h2 {
            font-size: 1.5em;
        }
}

@media only screen and (min-width: 1200px) {

    .fourBoxesGrid .item {
        min-height: 270px;
    }
}

@media only screen and (min-width: 1600px) {

    .fourBoxesGrid .item {
        min-height: 250px;
    }
}

/* VERSION 1*/
.fourBoxesGrid.v1 {
    background: url('/SiteImg/GBK_Supporto1.jpg') no-repeat center top;
    background-color: #13b4d7;
    padding: 120px 0 20px 0;
}

    .fourBoxesGrid.v1 .item {
        background-color: #56b9e4;
    }

        .fourBoxesGrid.v1 .item h2 {
            color: #042d60;
        }

        .fourBoxesGrid.v1 .item p {
            color: #fff;
        }

        .fourBoxesGrid.v1 .item .button {
            color: #fff;
            background-color: #042d60;
        }

            .fourBoxesGrid.v1 .item .button:hover {
                background-color: #006ab4;
            }

/********************************************************************************/
/***** ONE COLUMN STANDARD ******************************************************/
/********************************************************************************/

.oneColumnStandard {
    background-color: #8dd3f1;
    padding: 30px 0;
}

    .oneColumnStandard img {
        width: 100%;
        max-width: 130px;
        float: right;
        clear: both;
    }

    .oneColumnStandard h2 {
        margin-top: 0;
        text-transform: uppercase;
        color: #042d60;
    }

    .oneColumnStandard p {
        font-size: .9em;
        color: #333;
    }

    .oneColumnStandard .button {
        background-color: #042d60;
        color: #fff;
        padding: 10px 20px;
        display: inline-block;
        font-size: 1em;
    }

        .oneColumnStandard .button:hover {
            text-decoration: none;
            background-color: #0c4387;
        }
    /* VERSION 2*/

    .oneColumnStandard.v2 {
        background-color: #c6c6c6;
    }


/********************************************************************************/
/***** ONE COLUMN BACKGROUND ****************************************************/
/********************************************************************************/

.oneColumnBG {
    background: url('/SiteImg/GBK_SocialWall1.jpg') no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #0877b6;
    display: block;
    padding: 40px 0 200px 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

    .oneColumnBG:hover {
        text-decoration: none;
    }

    .oneColumnBG .layer {
        height: 500px;
        position: absolute;
        width: 100%;
        top: 0;
    }

    .oneColumnBG:hover .layer {
        background-color: rgba(255,255,255,0.15);
    }

    .oneColumnBG h1 {
        color: #a0d1f8;
        text-transform: uppercase;
        margin-top: 0;
        z-index: 2;
    }

    .oneColumnBG p {
        color: #fff;
    }

    /* VERSION 1*/
    .oneColumnBG.v1 h1 {
        color: #a0d1f8;
    }

    .oneColumnBG.v1 p {
        color: #fff;
    }

    /* VERSION 2*/
    .oneColumnBG.v2 h1 {
        color: #2d7fc5;
    }

    .oneColumnBG.v2 p {
        color: #333;
    }
/* VERSION 3*/

/********************************************************************************/
/***** TWO COLUMN - STANDARD ****************************************************/
/********************************************************************************/

.twoColumnsStandard {
    background-color: red;
    padding: 30px 0;
}

    .twoColumnsStandard h2 {
        margin-top: 0;
        text-transform: uppercase;
        color: blue;
    }

    .twoColumnsStandard p {
        font-size: .9em;
        color: #fff;
    }

    /* VERSION 1*/
    .twoColumnsStandard.v1 {
        background-color: #1b92a7;
    }

        .twoColumnsStandard.v1 h2 {
            color: #72deed;
            margin-bottom: 20px;
        }

        .twoColumnsStandard.v1 p {
            color: #fff;
        }

    /* VERSION 2*/
    .twoColumnsStandard.v2 {
        background: url('/SiteImg/GBK_Aggiornamenti1.jpg') no-repeat center top;
        padding-top: 120px;
    }

        .twoColumnsStandard.v2 h2 {
            color: #1b92a7;
        }

        .twoColumnsStandard.v2 h4 {
            margin-bottom: 0;
            color: #333;
        }

        .twoColumnsStandard.v2 p {
            color: #333;
        }

@media only screen and (min-width: 768px) {

    .twoColumnsStandard.v2 .row {
        display: table;
    }

    .twoColumnsStandard.v2 .left {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }

    .twoColumnsStandard.v2 .right {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}


/********************************************************************************/
/***** TWO COLUMN - LINK ********************************************************/
/********************************************************************************/

.twoColumnsLink {
    position: relative;
}

    .twoColumnsLink .link {
        display: block;
        position: relative;
        background-color: red;
    }

        .twoColumnsLink .link:hover {
            text-decoration: none;
            background-color: blue;
        }

        .twoColumnsLink .link h2 {
            color: #fff;
            text-transform: uppercase;
            margin: 30px 0;
        }

        .twoColumnsLink .link img {
            padding-bottom: 20px;
        }

@media (min-width: 600px) {
    .twoColumnsLink .container {
        height: 300px;
    }

    .twoColumnsLink .row {
        height: 220px;
        min-height: 0;
        display: flex;
        align-items: center;
    }

    .twoColumnsLink .link h2 {
        margin: 0 0 0 50px;
    }

    .twoColumnsLink .link img {
        padding-bottom: 0;
        margin: 0 auto;
    }

    .twoColumnsLink .layer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 112px;
        background: url('/SiteImg/componenti/banda_obliqua_scura.png') no-repeat center top;
    }

    .twoColumnsLink .layerV2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 112px;
        background: url('/SiteImg/componenti/banda_obliqua_media.png') no-repeat center top;
    }
}

@media (min-width: 768px) {
    .twoColumnsLink .link img {
        max-width: 300px;
    }
}

/* VERSION 1*/
.twoColumnsLink.v1 .link {
    background-color: #8ad3f3;
}

    .twoColumnsLink.v1 .link:hover {
        background-color: #2296d1;
    }

.twoColumnsLink.v1 .layer {
    background-image: url('/SiteImg/componenti/banda_obliqua_scura.png');
}

/* VERSION 2*/
.twoColumnsLink.v2 .link {
    background-color: #2296d1;
}

    .twoColumnsLink.v2 .link:hover {
        background-color: #012b62;
    }

.twoColumnsLink.v2 .layer {
    background-image: url('/SiteImg/componenti/banda_obliqua_chiara.png');
}

/********************************************************************************/
/***** TWO COLUMNS - CROSS ******************************************************/
/********************************************************************************/

/*
    Two columns diagonal divs. The oblique side is set in the :after selector.
    In order to center the content inside, the row must be 'diplay: table' and
    the columns must be 'display: table-cell'.
    The height of the column content, oblique side included, must be in pixel:
    if it's set to 'height: 100%', IE doesn't render it properly. All the other browsers do.
    Go figure. In order to solve this, set a maximum height (e.g. 'height: 1000px') and
    give 'overflow: hidden' to the parent wrapper.
*/

/*****************/
/***** RIGHT *****/
/*****************/

.twoColumnsCrossR {
    overflow: hidden;
    position: relative;
}

    .twoColumnsCrossR .left {
        padding: 30px 15px;
        background-color: red;
    }

    .twoColumnsCrossR .right {
        padding: 30px 15px;
        background-color: blue;
    }

    .twoColumnsCrossR h2 {
        margin-top: 0;
        text-transform: uppercase;
        color: #fff;
    }

    .twoColumnsCrossR p {
        font-size: .9em;
        color: #fff;
    }

    .twoColumnsCrossR img {
        width: 100%;
        max-width: 130px;
        float: right;
        clear: both;
    }

    .twoColumnsCrossR .button {
        background-color: yellow;
        color: #fff;
        padding: 10px 20px;
        display: inline-block;
        font-size: 1em;
    }

        .twoColumnsCrossR .button:hover {
            text-decoration: none;
            background-color: green;
        }

@media only screen and (max-width: 319px) {
}

@media only screen and (max-width: 599px) {
}

@media only screen and (min-width: 768px) {

    .twoColumnsCrossR {
        background: linear-gradient(90deg, red 50%, blue 50%);
    }

        .twoColumnsCrossR .row {
            display: table;
        }

        .twoColumnsCrossR .left {
            display: table-cell;
            float: none;
            vertical-align: top;
            width: 50%;
        }

        .twoColumnsCrossR .right {
            display: table-cell;
            vertical-align: top;
            float: none;
            z-index: 1;
            width: 50%;
        }

            .twoColumnsCrossR .right:after {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                z-index: -1;
                height: 1000px;
                width: 50%;
                transform-origin: top right;
                transform: skewX(-5deg);
                background-color: blue;
            }
}

@media only screen and (min-width: 992px) {

    .twoColumnsCrossR .right:after {
        transform: skewX(-10deg);
    }
}

@media only screen and (min-width: 1200px) {
}

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

/* VERSION 1*/
.twoColumnsCrossR.v1 .left {
    background-color: #19a2de;
}

.twoColumnsCrossR.v1 .right {
    background-color: #58beea;
}

.twoColumnsCrossR.v1 h2 {
    color: #042d60;
}

.twoColumnsCrossR.v1 p {
    color: #fff;
}

.twoColumnsCrossR.v1 .number {
    background-color: #4f9900;
    color: #fff;
    padding: 5px 50px;
    display: inline-block;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: bold;
}

    .twoColumnsCrossR.v1 .number:hover {
        text-decoration: none;
    }

.twoColumnsCrossR.v1 .button {
    background-color: #042d60;
    color: #fff;
}

    .twoColumnsCrossR.v1 .button:hover {
        background-color: #0c4387;
    }

.twoColumnsCrossR.v1 .note {
    color: #fff;
    font-size: .6em;
    line-height: 15px;
}

@media only screen and (min-width: 768px) {

    .twoColumnsCrossR.v1 {
        background: linear-gradient(90deg, #19a2de 50%, #58beea 50%);
    }

        .twoColumnsCrossR.v1 .left {
            padding: 30px 80px 30px 15px;
        }

        .twoColumnsCrossR.v1 .right:after {
            background-color: #58beea;
        }
}

/* VERSION 2*/
.twoColumnsCrossR.v2 {
    padding-bottom: 40px;
}

    .twoColumnsCrossR.v2 .whiteBottom {
        background-color: #fff;
        height: 40px;
        position: absolute;
        width: 50%;
        bottom: 0;
        z-index: 1;
    }

    .twoColumnsCrossR.v2 .left {
        background-color: #8dd3f1;
    }

    .twoColumnsCrossR.v2 .right {
        background-color: #042d60;
    }

    .twoColumnsCrossR.v2 .left h2 {
        color: #042d60;
    }

    .twoColumnsCrossR.v2 .left p {
        color: #333;
    }

    .twoColumnsCrossR.v2 .left .button {
        background-color: #042d60;
        color: #fff;
    }

        .twoColumnsCrossR.v2 .left .button:hover {
            background-color: #0c4387;
        }


    .twoColumnsCrossR.v2 .right h2 {
        color: #58beea;
    }

    .twoColumnsCrossR.v2 .right .button {
        background-color: #0080da;
        color: #fff;
    }

        .twoColumnsCrossR.v2 .right .button:hover {
            background-color: #006ab4;
        }

@media only screen and (min-width: 768px) {

    .twoColumnsCrossR.v2 {
        background: linear-gradient(90deg, #8dd3f1 50%, #042d60 50%);
    }

        .twoColumnsCrossR.v2 .left {
            padding: 30px 80px 30px 15px;
        }

        .twoColumnsCrossR.v2 .right:after {
            background-color: #042d60;
        }
}

/********************************************************************************/
/***** PRODUCT LIST *************************************************************/
/********************************************************************************/

.productList .category {
    padding: 12px 20px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: normal;
    color: #696969;
    background-color: #e6e6e6;
    margin-top: 0;
}

.productList .left {
    float: left;
    font-size: 28px;
}

.productList .right {
    float: right;
    font-size: 18px;
    margin-top: 7px;
}

.productList .category .link:hover {
    color: #696969;
}

.productList .prodotto {
    margin-bottom: 50px;
}

    .productList .prodotto > .row {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        display: flex;
        align-items: center;
    }

.productList .item {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #fff;
    color: #545454;
    position: relative;
}

    .productList .item img {
        width: 80%;
        height: auto;
        position: relative;
        z-index: 10;
    }

    .productList .item hr {
        width: 100%;
        height: 1px;
        background-color: #eee;
        margin: 1px;
        margin-left: 0px;
    }

    .productList .item .name {
        position: relative;
        width: 100%;
        height: 70px;
        overflow: hidden;
        text-align: center;
        z-index: 10;
    }

        .productList .item .name .textWrapper {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 70px;
            display: table;
        }

            .productList .item .name .textWrapper h4 {
                display: table-cell;
                vertical-align: middle;
                font-size: 18px;
                font-family: 'Open Sans';
                font-weight: 400;
            }

            .productList .item .name .textWrapper .etichetta {
                display: block;
                margin-bottom: 5px;
                color: #f00;
                font-size: 13px;
                font-weight: bold;
            }


    .productList .item .layer {
        position: absolute;
        background-color: #f0f0f0;
        top: 0px;
        left: 50%;
        width: 0;
        height: 100%;
        transition: 500ms;
    }

    .productList .item:hover .layer {
        left: 0;
        width: 100%;
        transition: 500ms;
    }

.productList .codice {
    display: inline-block;
    margin-top: 10px;
    color: #bebebe;
    font-size: 13px;
    line-height: 14px;
}

.productList .compare {
    margin-top: 7px;
}

    .productList .compare label {
        margin-bottom: 0;
        color: #bebebe;
        font-weight: normal;
        font-size: 14px;
    }

        .productList .compare label:after {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid #bebebe;
            font-size: 22px;
            line-height: 5px;
            font-weight: bold;
            margin-left: 5px;
        }

    .productList .compare input[type=checkbox] {
        display: none;
    }

        .productList .compare input[type=checkbox]:checked + label {
            color: #0092df;
            font-weight: bold;
        }

            .productList .compare input[type=checkbox]:checked + label:after {
                content: "\2713";
                color: #0092df;
                border-color: #0092df;
                text-align: center;
            }

.productList .colors {
    display: inline;
    width: auto;
    position: relative;
}

    .productList .colors p {
        position: relative;
        text-transform: uppercase;
        font-weight: lighter;
        letter-spacing: 1px;
        display: inline;
    }

    .productList .colors .circle {
        width: 20px;
        height: 20px;
        position: relative;
        margin: 1px;
        top: 6px;
        display: inline-block;
        border-radius: 15px;
        border: 1px solid #b7b7b7;
    }


/********************************************************************************/
/***** PAGE TITLE ***************************************************************/
/********************************************************************************/

.pageTitleSimple {
    background-color: #d2d2d2;
}

    .pageTitleSimple h1 {
        /*font-size: 1.4em;*/
        padding: 30px 0;
        color: #6e6e6e;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
    }

    .pageTitleSimple .container {
        margin-left: 0;
    }

.pageTitleImage {
    height: 200px;
}

    .pageTitleImage h1 {
        display: inline-block;
        padding: 20px 15px;
        background-color: rgba(255,255,255,0.7);
        font-size: 1.4em;
        color: #454545;
        text-decoration: none;
        margin: 0;
        text-transform: uppercase;
    }

    .pageTitleImage .container {
        margin-left: 0;
    }

.pageTitleBreadcrumb {
    position: relative;
    overflow: hidden;
}

    .pageTitleBreadcrumb .left {
        background-color: #d2d2d2;
    }

    .pageTitleBreadcrumb h1 {
        font-size: 1.4em;
        padding: 20px 15px;
        color: #6e6e6e;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
    }

    .pageTitleBreadcrumb .link {
        display: inline-block;
        font-size: 1em;
        font-weight: 800;
        color: #6e6e6e;
        text-decoration: none;
        text-transform: uppercase;
        margin: 15px;
    }

        .pageTitleBreadcrumb .link:hover {
            text-decoration: underline;
        }

.pageTitleStripe {
    background-color: #7d7e7a;
}

    .pageTitleStripe h1 {
        font-size: 1.4em;
        padding: 30px 0;
        color: #fff;
        text-decoration: none;
        margin: 0;
        text-transform: uppercase;
    }

    .pageTitleStripe h2 {
        font-size: 2em;
        color: #fff;
        text-transform: uppercase;
    }

    .pageTitleStripe p {
        font-size: 2em;
        color: #fff;
        font-size: 1.2em;
        font-weight: 600;
    }

    .pageTitleStripe .container {
        margin-left: 0;
    }

@media only screen and (min-width: 600px) {

    .pageTitleImage {
        height: 400px;
    }

        .pageTitleImage h1 {
            padding: 40px;
            font-size: 2.4em;
        }

    .pageTitleStripe {
        height: 210px;
        background: url('/SiteImg/componenti/banda_obliqua_modelli.png') no-repeat bottom center;
        background-color: #7d7e7a;
    }

        .pageTitleStripe h1 {
            font-size: 2.4em;
            padding: 0;
        }

        .pageTitleSimple .container, .pageTitleImage .container, .pageTitleStripe .container {
            margin-left: auto;
        }

    .pageTitleBreadcrumb {
        background: linear-gradient(90deg, #d2d2d2 50%, #fff 50%);
        margin-bottom: 20px;
    }

        .pageTitleBreadcrumb .row {
            /*min-height: 100%;*/
            display: flex;
            align-items: center;
        }

        .pageTitleBreadcrumb .left:after {
            position: absolute;
            top: 0;
            right: -38px;
            content: '';
            height: 1000px;
            width: 38px;
            transform-origin: top right;
            transform: skewX(-15deg);
            background-color: #72c3ee;
        }

        .pageTitleBreadcrumb .right {
            text-align: right;
        }

        .pageTitleBreadcrumb h1 {
            padding: 30px 15px;
        }

        .pageTitleBreadcrumb .link {
            margin: 0;
        }
}

/* VERSION 1 */
.pageTitleBreadcrumb.v1 .left {
    background-color: #d2d2d2;
}

.pageTitleBreadcrumb.v1 h1 {
    color: #6e6e6e;
}

@media only screen and (min-width: 600px) {

    .pageTitleBreadcrumb.v1 {
        background: linear-gradient(90deg, #d2d2d2 50%, #fff 50%);
    }

        .pageTitleBreadcrumb.v1 .left:after {
            background-color: #72c3ee;
        }
}

/* VERSION 2 */
.pageTitleBreadcrumb.v2 .left {
    background-color: #9ee0fa;
}

.pageTitleBreadcrumb.v2 h1 {
    color: #fff;
}

@media only screen and (min-width: 600px) {

    .pageTitleBreadcrumb.v2 {
        background: linear-gradient(90deg, #9ee0fa 50%, #fff 50%);
    }

        .pageTitleBreadcrumb.v2 .left:after {
            background-color: #b9e8fa;
        }

        .pageTitleBreadcrumb.v2 h1 {
            padding: 25px 0;
            font-size: 2em;
        }
}

/* VERSION 3 */
.pageTitleBreadcrumb.v3 .left {
    background-color: #f26722;
}

.pageTitleBreadcrumb.v3 h1 {
    color: #fff;
}

@media only screen and (min-width: 600px) {

    .pageTitleBreadcrumb.v3 {
        background: linear-gradient(90deg, #f26722 50%, #fff 50%);
        margin-bottom: 0;
    }

        .pageTitleBreadcrumb.v3 .left:after {
            background-color: #e1e1e1;
        }

        .pageTitleBreadcrumb.v3 h1 {
            padding: 25px 0;
            font-size: 2em;
        }
}

/********************************************************************************/
/***** PORCOFOLIO ***************************************************************/
/********************************************************************************/

.porcofolio {
    height: 250px;
    border: 1px solid #eaeaea;
}

    .porcofolio .box {
        height: 100%;
        position: relative;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

        .porcofolio .box .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            background-color: rgba(255, 231, 179, 0.3);
            transition: all 0.5s linear;
            opacity: 0;
        }

        .porcofolio .box .content {
            width: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
        }

        .porcofolio .box .labelImg {
            position: absolute;
            display: block;
            transform: scaleY(1);
            transition: all 0.7s ease-in-out;
            width: 70px;
            z-index: 10;
        }

        .porcofolio .box .mainImg {
            transform: scaleY(1);
            transition: all 0.7s ease-in-out;
            margin: 12px auto 0 auto;
        }

        .porcofolio .box .titleWrapper {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
        }

        .porcofolio .box h2 {
            transform: scaleY(1);
            transition: all 0.7s ease-in-out;
            width: 100%;
            padding: 20px 10px;
            background-color: rgba(250, 250, 250, 0.7);
            font-size: 17px;
            line-height: 18px;
            font-weight: normal;
            color: #333;
            margin: 0;
        }

        .porcofolio .box h3 {
            text-align: center;
            position: relative;
            padding: 10px;
            background: transparent;
            border-bottom: 1px solid rgba(51, 51, 51, 0.3);
            margin: 10px 30px 0px 30px;
            transform: scale(0);
            transition: all 0.5s linear;
            opacity: 0;
            font-size: 12px;
            font-weight: normal;
            color: #333333;
        }

        .porcofolio .box p {
            font-weight: normal;
            font-size: 10px;
            position: relative;
            padding: 10px 20px;
            text-align: center;
            color: #333333;
            opacity: 0;
            transform: scale(0);
            transition: all 0.5s linear;
            margin: 10px;
        }

        .porcofolio .box a.info {
            opacity: 0;
            transform: scale(0);
            transition: all 0.5s linear;
            width: 45%;
            margin: 0 auto;
            color: #333333 !important;
            display: block;
            text-align: center;
            position: relative;
            padding: 5px;
            padding-top: 10px;
            padding-bottom: 10px;
            border: 1px solid rgba(51, 51, 51, 0.3);
            cursor: pointer;
            background-color: rgba(255,0,0,0);
            text-transform: uppercase;
            text-decoration: none !important;
        }

            .porcofolio .box a.info:hover {
                background-color: #C6C6C6;
            }

        .porcofolio .box:hover img, .porcofolio .box:hover .title {
            transform: scale(10);
            opacity: 0;
        }

        .porcofolio .box:hover .mask {
            opacity: 1;
            background-color: #E6E6E6;
        }

        .porcofolio .box:hover h3,
        .porcofolio .box:hover p,
        .porcofolio .box:hover a.info {
            transform: scale(1);
            opacity: 1;
        }

/********************************************************************************/
/***** ROLLOVER EFFECTS *********************************************************/
/********************************************************************************/

/* Common style */
.hover {
    position: relative;
    overflow: hidden;
    height: auto;
    text-align: center;
    cursor: pointer;
}

    .hover img {
        position: relative;
        display: block;
        max-width: 100%;
        opacity: 0.8;
    }

    .hover .caption {
        padding: 2em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

        .hover .caption::before,
        .hover .caption::after {
            pointer-events: none;
        }

        .hover .caption,
        .hover .caption > a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

            /* Anchor will cover the whole item by default */
            /* For some effects it will show as a button */
            .hover .caption > a {
                z-index: 1000;
                text-indent: 200%;
                white-space: nowrap;
                font-size: 0;
                opacity: 0;
            }

    .hover h2 {
        word-spacing: -0.15em;
        font-weight: 300;
    }

        .hover h2 span {
            font-weight: 800;
        }

    .hover h2,
    .hover p {
        margin: 0;
    }

    .hover p {
        letter-spacing: 1px;
        font-size: 68.5%;
    }

    /*-----------------*/
    /***** Steve *****/
    /*-----------------*/

    .hover.effect-steve {
        z-index: auto;
        overflow: visible;
        background: #000;
        -webkit-box-shadow: 0 0 10px #333;
        box-shadow: 0 0 10px #333;
    }

        .hover.effect-steve:before,
        .hover.effect-steve h2:before {
            position: absolute;
            top: 0;
            left: 0;
            /*z-index: -1;*/
            width: 100%;
            height: 100%;
            background: #000;
            content: '';
            -webkit-transition: opacity 0.35s;
            transition: opacity 0.35s;
        }

        .hover.effect-steve:before {
            box-shadow: 0 3px 30px rgba(0,0,0,0.8);
            opacity: 0;
        }

        .hover.effect-steve .caption {
            z-index: 1;
        }

        .hover.effect-steve img {
            opacity: 1;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: perspective(1000px) translate3d(0,0,0);
            transform: perspective(1000px) translate3d(0,0,0);
        }

        .hover.effect-steve h2,
        .hover.effect-steve p {
            background: #fff;
            color: #2d434e;
        }

        .hover.effect-steve h2 {
            position: relative;
            margin-top: 2em;
            padding: 0.25em;
        }

            .hover.effect-steve h2:before {
                box-shadow: 0 1px 10px rgba(0,0,0,0.5);
            }

        .hover.effect-steve p {
            margin-top: 1em;
            padding: 0.5em;
            font-weight: 800;
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: scale3d(0.9,0.9,1);
            transform: scale3d(0.9,0.9,1);
        }

        .hover.effect-steve:hover:before {
            opacity: 1;
        }

        .hover.effect-steve:hover img {
            -webkit-transform: perspective(1000px) translate3d(0,0,21px);
            transform: perspective(1000px) translate3d(0,0,21px);
        }

        .hover.effect-steve:hover h2:before {
            opacity: 0;
        }

        .hover.effect-steve:hover p {
            opacity: 1;
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1);
        }

/********************************************************************************/
/***** SIDE TAB *****************************************************************/
/********************************************************************************/

.sideTab {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: -185px;
    z-index: 100;
    height: auto;
    display: none;
}

    .sideTab a {
        background-color: #fff;
        text-decoration: none;
        position: relative;
        right: 0px;
        width: 230px;
        padding: 10px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: flex;
        align-items: center;
        -webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #333;
        margin-bottom: 10px;
    }

        .sideTab a.serie {
            width: 150px;
            right: 80px;
            margin-left: auto;
        }

        .sideTab a:last-child {
            margin-bottom: 0;
        }

        .sideTab a:hover {
            right: 185px;
        }

        /*.sideTab a.acquista {
            right: -45px;
        }

            .sideTab a.acquista:hover {
                right: 0;
            }

        .sideTab a.confronta {
            right: -45px;
        }

            .sideTab a.confronta:hover {
                right: 0;
            }

        .sideTab a.ricerca {
            right: -45px;
        }

            .sideTab a.ricerca:hover {
                right: 0;
            }*/

        .sideTab a.toTop {
            background-color: #666;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: opacity .3s 0s, visibility 0s .3s;
            -moz-transition: opacity .3s 0s, visibility 0s .3s;
            transition: opacity .3s 0s, visibility 0s .3s;
        }

            .sideTab a.toTop:hover {
                right: 0;
            }

            .sideTab a.toTop.isVisible {
                -webkit-transition: opacity .3s 0s, visibility 0s 0s;
                -moz-transition: opacity .3s 0s, visibility 0s 0s;
                transition: opacity .3s 0s, visibility 0s 0s;
                visibility: visible;
                opacity: 1;
            }

        .sideTab a img {
            max-width: 48px;
            max-height: 48px;
        }

        .sideTab a h3 {
            margin: 0 0 0 10px;
            float: left;
            font-family: 'Open Sans Condensed', sans-serif;
            font-size: 1rem;
            font-weight: normal;
            color: #333;
        }

    .sideTab .validator {
        position: absolute;
        left: -330px;
        font-size: 0.6em;
        padding: 15px 15px 15px 37px;
        color: #fff;
        font-size: 0.7rem;
        background-color: #f00;
        background-image: url('/SiteImg/icons/white/ico_attenzione.png');
        background-repeat: no-repeat;
        background-position: 10px center;
        top: 12px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
    }

@media (min-width: 768px) {
    .sideTab {
        display: block;
    }
}

/********************************************************************************/
/***** ICO-TEXT-BUTTON BOX ******************************************************/
/********************************************************************************/

.icoTextButtonBox {
    margin-top: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    position: relative;
    background-color: #e1e1e1;
    overflow: hidden;
}

    .icoTextButtonBox h2 {
        text-transform: uppercase;
        font-size: 1.4rem;
    }

    .icoTextButtonBox p {
        color: #333;
        font-size: 1rem;
    }

    .icoTextButtonBox .button {
        display: block;
        text-align: center;
        border: 1px solid #fff;
        margin-top: 70px;
        width: 30%;
        padding: 5px 0;
        text-decoration: none;
    }

    /*VERSIONE ARANCIO*/
    .icoTextButtonBox.orange h2 {
        color: #bf4e02;
    }

    .icoTextButtonBox.orange .button {
        color: #fff;
        background-color: #ff9900;
    }

        .icoTextButtonBox.orange .button:hover {
            background-color: #f26721;
        }

    /*VERSIONE AZZURRA*/
    .icoTextButtonBox.azure h2 {
        color: #1c8fd7;
    }

    .icoTextButtonBox.azure .button {
        color: #fff;
        background-color: #0080da;
    }

        .icoTextButtonBox.azure .button:hover {
            background-color: #006ab4;
        }