/******************************************************************************************
    FRONTEND.LESS

    interfacce frontend
******************************************************************************************/

/******************************************************************************************
IMPORT LESS
******************************************************************************************/
@import "../assets/bootstrap-3.0.2/less/variables.less";
@import "../assets/bootstrap-3.0.2/less/mixins.less";

@import "layout-base.less";
@import "variables.less";
@import "mixins.less";
@import "modules.less";
@import "copiaincolla.less";

/******************************************************************************************
LAYOUT
******************************************************************************************/
body {
    background-color: @blue;

    h1 {
        .font-style(@league_gothic; 85px; #FFF);

        span { color: @green; }
    }
    h2 {
        .font-style(@league_gothic; 65px; @green);
    }
    .divider-circles {
        background: url("/web/images/border-circle.png") repeat-x;
        margin: 10px 0;
        display: block;
    }

    .page-wrapper {
        margin: 50px 27px 50px 0;

        // responsive
        @media (max-width: @screen-lg-min) {
            margin-right: 0;
        }
        @media (max-width: @screen-xs-min) {
            margin-top: 30px;
            margin-bottom: 30px;
        }
    }

    .img-intro {
        margin: 20px 0 50px;

        // responsive
        @media (max-width: @screen-sm-min) {
            margin-bottom: 20px;
        }
        @media (max-width: @screen-xs-min) {
            margin-bottom: 10px;
        }
    }
}

/******************************************************************************************
HEADER
******************************************************************************************/
header {
    background-color: @green;
    border-bottom: 4px solid #FFF;

    .navbar-default {
        background: none;
        border: 0;
        margin-bottom: 0;

        .navbar-brand {
            margin-top: 5px;

            .img-responsive {
                @media (max-width: @screen-xs-min) {
                    width: 200px;
                }
            }
        }

        .navbar-toggle {
            background-color: #FFF;
            margin-top: 40px;

            .icon-bar { background-color: @blue; }

            // responsive
            @media (max-width: @screen-xs-min) {
                margin-top: 25px;
            }
        }

        .navbar-collapse {
            border-color: #FFF;
            padding: 0;
            max-height: none;
        }

        .menu-site {
            margin: 0;

            > li {
                > a {
                    padding: 0 0 0 35px;
                    display: block;
                    .font-style(@league_gothic; 30px; @blue);
                }
            }
        }
        #main-menu {
            padding: 42px 0;
            margin-right: 15px;
            float: right;

            > li {
                float: left;
                margin-left: 32px;

                &:first-child {
                    margin-left: 0;
                }

                > a {
                    background: url("/web/images/sprite-icone-menu.png") no-repeat top left;

                    &.home { background-position: 0 1px; }
                    &.scegli-noi { background-position: 0 -48px; }
                    &.prodotti { background-position: 0 -98px; }
                    &.contatti { background-position: 0 -150px; }
                }

                &.dropdown {

                    .dropdown-menu {
                        padding: 10px 0;
                        top: 115%;
                        border-radius: 10px;

                        li {
                            margin: 0;

                            a {
                                padding: 5px 70px 5px 20px;
                                .font-style(@league_gothic; 20px; @blue);
                                border-radius: 0;

                                &:hover {
                                    opacity: 1;
                                    background-color: @green;
                                }
                                &:focus { text-decoration: none; }

                                // responsive
                                @media (max-width: @screen-sm-min) {
                                    padding: 5px 0;
                                }
                            }
                        }

                        &:before {
                            content: " ";
                            width: 0;
                            height: 0;
                            border-style: solid;
                            border-width: 0 6.5px 9px 6.5px;
                            border-color: transparent transparent #ffffff transparent;
                            position: absolute;
                            left: 55px;
                            top: -9px;
                            z-index: 1000;

                            // responsive
                            @media (max-width: @screen-sm-min) {
                                display: none;
                            }
                        }
                        // responsive
                        @media (max-width: @screen-sm-min) {
                            position: relative;
                            left: 34px;
                        }
                        @media (max-width: @screen-xs-min) {
                            display: block;
                            float: none;
                            width: auto;
                            margin-top: 0;
                            background-color: transparent;
                            border: 0;
                            box-shadow: none;
                        }
                    }
                }

                // responsive
                @media (max-width: @screen-xs-min) {
                    margin: 5px 0;
                    float: none;
                }
            }

            // responsive
            @media (max-width: @screen-md-min) {
                float: left;
                padding: 24px 0;
                margin-left: 20px;
            }
        }

        /**
         * submenu che viene mostrato solamente nella versione iphone
         */
        #sub-menu {
            display: none;
            clear: both;
            margin-left: 20px;
            padding: 20px 0;

            > li > a {
                font-size: 25px;
            }

            @media (max-width: @screen-xs-min) {
                display: block;
            }
        }

        /**
         * linea che divide i 2 menu nella versione iphone
         */
        .divider {
            border: 1px solid #FFF;
            display: none;
            width: 100%;
            float: left;

            @media (max-width: @screen-xs-min) {
                display: block;
            }
        }
    }
}

/******************************************************************************************
HOMEPAGE
******************************************************************************************/
body.homepage {
    #homepage-wrapper {

        h1 {
            .font-style(@league_gothic; 160px; @green);
            line-height: 145px;

            // responsive
            @media (min-width: @screen-sm-min) and (max-width: @screen-lg-min) {
                font-size: 140px;
                line-height: 120px;
            }
            @media (min-width: @screen-xs-min) and (max-width: @screen-sm-min) {
                font-size: 105px;
                line-height: 90px;
            }
            @media (max-width: @screen-xs-min) {
                font-size: 60px;
                line-height: 55px;
            }
        }
        h2 {
            margin: 0;
            .font-style(@league_gothic; 87px; #FFF);

            // responsive
            @media (min-width: @screen-sm-min) and (max-width: @screen-lg-min) {
                font-size: 76px;
                line-height: 79px;
            }
            @media (min-width: @screen-xs-min) and (max-width: @screen-sm-min) {
                font-size: 60px;
                line-height: 65px;
            }
            @media (max-width: @screen-xs-min) {
                font-size: 40px;
                line-height: 38px;
            }
        }

        .benefits-list {
            li {
                margin: 55px 0;
                overflow: hidden;

                .box-icon {
                    background: #FFF url("/web/images/sprite-icon-plus.png") no-repeat;
                    margin-right: 21px;
                    .square(94px);
                    float: left;
                    border-radius: 25px;

                    &.senza-opere { background-position: 20px -427px; }
                    &.alta-tecnologia { background-position: 18px 15px; }
                    &.facilita-uso { background-position: 22px -135px; }
                    &.pet { background-position: 12px -282px; }
                }
                .benefits-list-content {
                    overflow: hidden;

                    h3 {
                        padding: 12px 0 0 0;
                        .font-style(@league_gothic; 36px; @green);
                    }
                    p {
                        margin: 0;
                        .font-style("Arial"; 16px; #FFF);
                    }
                }
            }

            //responsive
            @media (max-width: @screen-xs-min) {

                li {
                    margin: 20px 0;

                    .box-icon {
                        .square(80px);
                        margin-bottom: 30px;

                        &.senza-opere { background-position: 13px -433px; }
                        &.alta-tecnologia { background-position: 12px 12px; }
                        &.facilita-uso { background-position: 16px -141px; }
                        &.pet { background-position: 7px -286px; }
                    }
                    .benefits-list-content h3 { line-height: 30px; }
                }
            }
        }

        .box-fumetto {
            margin-top: 220px;

            .fumetto {

                p {
                    background-color: #FFF;
                    margin: 0;
                    padding: 20px;
                    .size(270px; 138px);
                    .font-style(@league_gothic; 40px; @blue);
                    border-radius: 25px;

                    span {
                        color: @green;
                        font-size: 56px;
                    }
                }

                .triangolo {
                    margin-left: 45px;
                    margin-bottom: 15px;
                }
            }
            // responsive
            @media (max-width: @screen-sm-min) {
                margin-top: 0;

                .fumetto {

                    > p,
                    .triangolo {
                        margin: 0 auto;
                        display: block;
                    }
                }

                img {
                    margin: 0 auto;
                    display: block;
                }
            }
            @media (max-width: @screen-xs-min) {
                margin-top: 50px;
            }
        }

        #menu-protection-wrapper {
            //responsive
            @media (max-width: @screen-xs-min) {
                display: block;
            }
        }
    }

    #right-bar {
        //responsive
        @media (max-width: @screen-xs-min) {
            display: block;
        }
    }
    #brands-bar {
        //responsive
        @media (max-width: @screen-xs-min) {
            display: block;
        }
    }
}


/******************************************************************************************
CHOOSE US
******************************************************************************************/
#choose-us-wrapper {

    h1 {
        // responsive
        @media (max-width: @screen-xs-min) {
            font-size: 70px;
            line-height: 70px;
        }
    }
    h2 {
        margin: 20px 0;
        .font-style(@league_gothic; 34px; @green);
    }
    p {
        .font-style(@arial; 16px; #FFF);
    }
    .choose-us-list {
        counter-reset:li;

        li {
            padding: 10px 40px;
            list-style: none;
            .font-style(@arial; 16px; #FFF);

            span {
                margin-right: 5px;
                .font-style(@league_gothic; 30px; @green);

                // responsive
                @media (max-width: @screen-xs-min) {
                    display: block;
                }
            }

            &:before {
                padding-left: 20px;
                content: counter(li)".";
                counter-increment: li;
                position: absolute;
                left: 0;
                .font-style(@league_gothic; 30px; #FFF);

            }
        }
    }
}

/******************************************************************************************
PROTECTIONS (ESTERNA, INTERNA, PERIMETRALE)
******************************************************************************************/
body.external_protection,
body.internal_protection,
body.perimeter_protection {
    #protection-wrapper {

        h1 {
            span { color: @green; }

            @media (max-width: @screen-xs-min) {
                font-size: 77px;
                line-height: 67px;
                margin-bottom: 20px;
            }
        }

        h3 {
            .font-style(@league_gothic; 30px; @green);

            @media (max-width: @screen-xs-min) {
                font-size: 28px;
                line-height: 31px;
            }
        }

        p {
            margin-top: 20px;
            .font-style(@arial; 16px; #FFF);

            @media (max-width: @screen-xs-min) {
                br { display: none; }
            }
        }

        .protection {
            background-color: @blue_dark;
            padding: 50px 40px 60px 60px;
            .border-top-radius(10px);

            img {
                margin-right: 50px;
                float: left;

                @media (max-width: @screen-sm-min) {
                    margin-right: 20px;
                    width: 200px;
                }
                @media (max-width: @screen-xs-min) {
                    width: 100%;
                    float: none;
                    margin-bottom: 25px;
                }
            }

            > div { overflow: hidden; }

            @media (max-width: @screen-sm-min) {
                padding: 20px 30px;
            }
            @media (max-width: @screen-xs-min) {
                padding: 20px;
            }
        }

        .submenu-products {
            background-color: @green;
            padding: 20px 60px;
            .border-bottom-radius(10px);
            overflow: hidden;

            li {
                display: inline-block;
                .font-style(@arial; 15px; @blue);
                float: left;

                &.last-child { float: right; }

                a {
                    background: #FFF url('/web/images/sprite-icon-products-blue.png') no-repeat left top;
                    margin-top: 10px;
                    display: block;
                    .font-style(@league_gothic; 29px; @blue);
                    border-radius: 10px;

                    &.antintrusione {
                        background-position: 14px 9px;
                        padding: 13px 10px 10px 60px;
                    }
                    &.videocontrollo {
                        background-position: 10px -252px;
                        padding: 13px 10px 10px 60px;
                    }
                    &.nebbiogeni {
                        background-position: 21px -122px;
                        padding: 13px 10px 10px 85px;
                    }
                }

                //responsive
                @media (max-width: @screen-sm-min) {
                    display: block;
                    float: none;

                    &.last-child {
                        float: none;
                        margin-top: 20px;
                    }
                }
            }

            //responsive
            @media (max-width: @screen-xs-min) {
                padding-left: 10px;
                padding-right: 10px;

                li strong { display: none; }
            }
        }

        //responsive
        @media (max-width: @screen-xs-min) {
            margin-bottom: 5px;
        }
    }

    //responsive
    @media (max-width: @screen-xs-min) {

        #right-bar {
            display: block;

            li {
                display: none;

                &.consulenza { display: block; }
            }
        }
    }
}

/******************************************************************************************
PRODUCTS (SIST. ANTINTRUSIONE, SIST. VIDEOCONTROLLO, SIST. NEBBIOGENI)
******************************************************************************************/
body.sistemi_antintrusione,
body.sistemi_videocontrollo,
body.sistemi_nebbiogeni {
    #product-wrapper {
        margin-bottom: 0;

        .img-product-icon {
            margin: 0 20px 0 0;
            float: left;
        }

        h1 {
            // responsive
            @media (min-width: @screen-xs-min) and (max-width: @screen-lg-min) {
                font-size: 75px;
                line-height: 75px;
            }
            @media (max-width: @screen-xs-min) {
                font-size: 50px;
                line-height: 50px;
            }
        }

        h2 {
            // responsive
            @media (max-width: @screen-xs-min) {
                font-size: 43px;
                line-height: 43px;
            }
        }

        h3 { .font-style(@league_gothic; 25px; @green); }

        p {
            margin: 20px 0;
            .font-style(@arial; 16px; #FFF);
        }
        .panel-group {
            .panel {
                background-color: @blue;
                padding: 0 29px 0 0;
                border: none;
                border-radius: 0;

                .panel-heading,
                .panel-body {
                    padding-right: 0;
                    padding-left: 0;
                }
                .panel-heading {
                    background-color: @blue;
                    padding-right: 0;
                    padding-left: 0;
                    border: none;

                    .arrow {
                        float: right;
                        position: relative;
                        left: 20px;
                    }

                    h4 {
                        a {
                            .font-style(@league_gothic; 32px; @green);

                            &.collapsed {
                                color: #FFF;

                                .arrow-down { display: block; }
                                .arrow-up { display: none; }
                            }
                        }
                    }
                }
                .panel-collapse {
                    .panel-body {
                        .font-style("Arial"; 13px; #000000);
                        border: none;

                        .collapsed {
                            float: right;
                            position: relative;
                            left: 20px;
                        }
//                        > img {
//                            float: left;
//                            margin-right: 20px;
//                        }

                        &.panel-ingredientiSicurezza {
                            p { margin: 0 0 20px 0; }
                        }
                    }
                }
                /**
                 * pannello aperto
                 */
                &.open {
                    .panel-heading {
                        .arrow-up { display: block; }
                        .arrow-down { display: none; }
                    }
                }
            }
        }
        .box-list {
            background-color: @blue_dark;
            padding: 10px 15px;
            border-radius: 10px;

            ul {
                padding: 0 0 0 15px;
                list-style-type: disc;

                li {
                    color: @green;

                    span {
                        .font-style(@arial; 16px; #FFF);
                    }

                }
            }
        }
    }
    //responsive
    @media (max-width: @screen-xs-min) {
        #right-bar {
            display: block;
            margin-top: 20px;
        }
    }
}

body.sistemi_antintrusione {
    #right-bar {
        .antintrusione { .opacity(.5); }
    }
}
body.sistemi_videocontrollo {
    #right-bar {
        .videocontrollo { .opacity(.5); }
    }
}
body.sistemi_nebbiogeni {
    #right-bar {
        .nebbiogeno { .opacity(.5); }
    }
}

/******************************************************************************************
CONTACTS
******************************************************************************************/
#contacts-wrapper {

    h1 {
        margin-bottom: 30px;

        // responsive
        @media (max-width: @screen-sm-min) {
            font-size: 70px;
            line-height: 70px;
            margin-bottom: 10px;
        }
    }

    h2 {
        .font-style(@league_gothic; 35px; #FFF);
        line-height: 45px;

        span { color: @green; }

        // responsive
        @media (max-width: @screen-sm-min) {
            line-height: 35px;
        }
    }

    .contacts {
        background-color: @blue_dark;
        margin-top: 20px;
        padding: 20px 20px 60px;
        border-radius: 10px;

        form {
            label {
                float: left;
                .font-style(@arial; 15px; @green);

                &.privacy-label {
                    font-size: 12px;

                    a { color: @green; }
                }
            }
            input[type="text"],
            textarea {
                margin-bottom: 15px;
                padding: 5px 10px;
                width: 100%;
                display: block;
                border-radius: 10px;
                border-style: hidden;

                // responsive
                @media (max-width: @screen-xs-min) {
                    margin-bottom: 10px;
                }
            }
            input[type="checkbox"] {
                float: left;
                margin-right: 5px;
                height: 12px;
            }
            input[type="submit"] {
                background-color: @green;
                margin-top: 5px;
                padding: 3px 30px;
                float: right;
                .font-style(@league_gothic; 30px; @blue);
                border-radius: 10px;
            }
            .submit-container p {
                margin-top: 30px;
                float: left;
                .font-style(@arial; 12px; @green);
                font-weight: bold;
            }
            .errors {
                ul li {
                    float: right;
                    .font-style(@arial; 10px; #FFF);
                }
            }
        }
    }
    #map {
        background-color: #FFF;
        margin-top: 20px;
        border: #FFF solid 8px;
        border-radius: 10px;

        iframe {
            width: 100%;
            height: 320px;
        }

        // responsive
        @media (max-width: @screen-xs-min) {
            margin: 20px;
        }
    }
    .address {
        margin: 20px;
        display: block;
        .font-style(@arial; 15px; #FFF);
        font-weight: bold;

        span { color: @green; }
        a {
            color: #FFF;

            &.phone {
                cursor: text;

                &:hover { .opacity(1); }

                // responsive
                @media (max-width: @screen-xs-min) {
                    cursor: default;

                    &:hover { .opacity(.6); }
                }
            }
        }
    }

    h3 {
        margin: 80px 0 10px 20px;
        .font-style(@league_gothic; 30px; @green);

        // responsive
        @media (min-width: @screen-xs-min) and (max-width: @screen-lg-min) {
            margin-top: 40px;
        }
        @media (max-width: @screen-xs-min) {
            margin-top: 10px;
        }
    }

    .opening-time {
        background-color: @blue_dark;
        padding: 10px 20px;
        border-radius: 10px;

        table {
            .font-style(@arial; 15px; #FFF);

            tr {
                td,
                th {
                    padding-right: 10px;
                }
            }
        }

        // responsive
        @media (max-width: @screen-xs-min) {
            padding: 10px;
        }
    }
}


/******************************************************************************************
FOOTER
******************************************************************************************/
footer {
    #brands-bar {
        background-color: @green;
        padding: 15px 0;
        border-top: #FFF solid 5px;

        .brand-list {
            padding: 10px 0 0 0;
            text-align: center;

            li {
                padding: 0 5px;
                vertical-align: middle;

                a {
                    display: block;

                    > img {
                        max-width: 100%;
                        height: auto;
                    }
                }

                &:first-child {
                    padding-left: 0;
                    border-left: none;
                }
                &.last-child { padding-right: 0; }
            }

            // responsive
            @media (max-width: @screen-xs-min) {
                display: block !important;
                text-align: center;

                > li {
                    display: inline-block;
                    width: 140px;
                    border: none;
                    padding: 10px 19px;

                    &:first-child { padding-left: 19px; }
                }
            }

            .brands-bar-text {
                .font-style(@arial; 15px; @blue);
                margin-bottom: 0;

                span {
                    font-weight: bold;

                    // responsive
                    @media (max-width: @screen-xs-min) {
                        display: none;
                    }
                }
            }
        }

        // responsive
        @media (max-width: @screen-xs-min) {
            display: none;
        }
    }
    #site-info {
        background-color: #FFF;
        padding: 20px 0;

        .logo-design {
            margin: 20px 0 0 0;
            padding: 0;

            > img {
                max-width: 100%;
                height: auto;
            }

            // responsive
            @media (max-width: @screen-sm-min) {
                text-align: center;
            }
        }

        p {
            margin-bottom: 0;
            padding: 5px 0 0px 20px;
            .font-style(@arial; 14px; @blue);
            text-align: left;
            border-left: @green solid 1px;

            span { font-weight: bold; }

            a { .font-style(@arial; 10px; @blue); }

            // responsive
            @media (min-width: @screen-sm-min) and (max-width: @screen-lg-min) {
                font-size: 13px;
            }
            @media (max-width: @screen-sm-min) {
                padding: 25px 0 5px 0;
                border-left: 0;
                text-align: center;
            }
        }
    }

    .social-list {
        float: right;

        > li {
            vertical-align: middle;

            &:first-child {
                margin-right: 25px;

                // responsive
                @media (min-width: @screen-md-min) and (max-width: @screen-lg-min) {
                    display: none;
                }
                @media (max-width: @screen-xs-min) {
                    margin: 0 0 20px 0;
                    display: block;
                }
            }

            > a {
                display: block;
            }

            .fb-wrapper-tecnoallarmi {
                height: 55px;
                padding-right: 12px;
                position: relative;
                overflow: hidden;
                border-right: @green solid 1px;

                a {
                    .font-style(@arial; 12px; @blue_fb);
                    font-weight: bold;
                }
                img {
                    float: left;
                    margin: 5px 5px 0 0;
                    .square(50px);
                }

                .fb-like {
                    position: absolute;
                    left: 54px;
                    top: 22px;
                    text-align: left;
                }
            }
        }

        // responsive
        @media (max-width: @screen-lg-min) {
            float: none;
            text-align: center;
            margin: 15px auto;
        }
    }
}

.modal-content {
    .modal-header {
        > h4 {
            .font-style(@league_gothic; 30px; @blue);

            > strong { font-weight: normal; }
        }
    }
    .modal-body {
        padding-bottom: 0;

        > h5, a {
            .font-style(@league_gothic; 20px; @blue);

            > strong { font-weight: normal; }
        }
        > p {
            margin-bottom: 20px;
        }

        > table {
            thead { .font-style(@arial; 14px; @blue); }
            tr {
                td {
                    vertical-align: initial;
                    padding: 0 10px 10px 0;
                }
            }
        }
    }
    .modal-footer {
        .btn {
            background-color: @green;
            padding: 3px 30px;
            float: right;
            .font-style(@league_gothic; 30px; @blue);
            border-radius: 10px;
            border: 0;

            &:hover { .opacity(.6); }
        }
    }
}


/******************************************************************************************
COOKIE BAR
******************************************************************************************/
body {
  margin-top: 0 !important;


  #cookie-bar {
    top: inherit!important;
    bottom: 0!important;
    padding: 10px 0;
    background: #FFF;
    z-index: 100!important;

    #cookie-bar-content {
      // width: 1280px;
      margin: 0 auto;

      > p {
        font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
        color: @blue;
        font-size: 14px;
        text-align: center;
        // margin: 5px 0 0 250px;
        margin: 5px;

        #cookie-bar-prompt-button { display: none; }
      }

    .cookie-buttons-group {
        @media (max-width: @screen-sm-max) {
            position: relative;
            display: block;
            text-align: center;
        }
    }

      .btn  {
        background: @blue;
        color: #FFF !important;
        font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
        font-size: 16px;
        text-shadow: none;
        margin: 0 10px;
        border: 0;
        border-radius: 5px;
        cursor: pointer;
        display: inline-block;
        float: right;
        font-weight: bold;
        line-height: 1;
        padding: 5px 10px 6px;
        position: relative;

        @media (max-width: @screen-sm-max) {
            float: none;
        }

        &:hover {
          text-decoration: none;
          opacity: .6;
        }
      }
    }
  }
}