@import "mixins.less";

@import "bs/bootstrap.less";
/* RESET
================================================== */
@import "components/yui_reset.less";



//@import "bs/mixins.less";
//@import "bs/variables.less";
@import "components/bootstrap-datetimepicker.less";

@import "components/iconmoon.less";
@import "components/typography.less";
@import "components/landing.less";
@import "components/form.less";

/*
* Social Colors
*/
@facebook : #3b5998;
@twitter : #55acee;
@gplus : #dc4e41;
@google : #ffffff;
@whatsapp : #68B114;
@linkedin : #0077b5;
@instagram : #3f729b;
@pinterest: #C9232D;
@rss : #F46507;
@youtube : #ED2C00;


@baseDim: 20px;

@text: #1a1a1a;
@black: #000000;
@gray99: #999999;
@gray97: #979797;
@gray: #a8a7a7;
@gray_dark: #878787;
@white: #ffffff;
@red: #ec1d24;
@grayab: #ababab;
@green: #00a75a;
@graybb: #bbbbbb;
@graya8: #a8a8a8;
@grayc8: #c8c8c8;
@graydd: #ddd9dc;
@grayf1: #f1f1f1;
@grayf4: #f4f2f4;
@grayd5: #d5d5d5;

/*
* Bootstrap variables
*/
@zindex-modal: 2050;
@modal-backdrop-opacity : 0.8;
@text-color : @black;
@input-color-placeholder : @gray;

//@font-family-sans-serif : 'Flama', sans-serif;
@font-family-serif : 'Playfair display',
serif;
@font-family-base: @font-family-serif;

@line-height-computed: 10px;
@font-size-base : 14px;
@font-size-large : ceil((@font-size-base * 1.25)); // ~18px
@font-size-small : ceil((@font-size-base * 0.85)); // ~12px
@link-color : @black;
@link-hover-decoration : none;
@link-hover-color : @black;
@btn-border-radius-base : 0;

@border-radius-large : 0;
@border-radius-base : 0;
@dropdown-border : @black;
@dropdown-fallback-border : @black;
@dropdown-link-color: @black;

@brand-primary: @black;

@link-hover-color: @black;
@link-hover-decoration: none;
@btn-link-disabled-color: @gray-dark;

/*
* grid variables (values in general/directives/device directive)
*/

@grid-gutter-width: 30px;

@container-tablet: (684px + @grid-gutter-width); //(720px + @grid-gutter-width);
@container-desktop: (934px + @grid-gutter-width); //(940px + @grid-gutter-width);
@container-large-desktop: (1190px + @grid-gutter-width); //(1140px + @grid-gutter-width);
@screen-xs: 480px; //480px
@screen-sm: 768px; //768px
@screen-md: (@container-desktop + 20px); //992px
@screen-lg: (@container-large-desktop + 20px); //1200px

@screen-xxs-max: (@screen-xs - 1px);
@containerPaddingXs: 20px;
@btn-transition: ~"all 0.3s ease-out";

//griglia con scrollbar < 1024;
//Nota: su device desktop/tablet c'è meta vieport width 1024; su smarkphone c'è device-width
//Importante: aggiornare angular-picture.js e general/service/device in caso di cambiamenti!
@screen-md: 769px;

//per avere le testate stiky full width (e non larghe come il viewport) occorre forzare body e testata sticky foglia
@media(min-width: @screen-md-min) {

    body,
    #article-fixed-header-desktop {
        //, .modal-content
        min-width: @container-desktop;
    }

    .modal-open .modal {
        overflow-x: auto;
    }
}

//fine griglia con scrollbar < 1024;

textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
textarea:active,
input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
button:focus,
button:active,
button:hover {
    outline: 0 !important;
    -webkit-appearance: none;
}

input[type="radio"] {
	-moz-appearance: radio;
	-webkit-appearance: radio;
}

input[type="checkbox"] {
	-moz-appearance: checkbox;
	-webkit-appearance: checkbox;
}

input[type="button"] {
	-moz-appearance: button;
	-webkit-appearance: button;
}

a,
.btn {
    text-decoration: none;
    outline: none !important;

    &:active,
    &.active,
    &:hover,
    &:focus {
        outline: 0;
        background-image: none;
        text-decoration: none;
        .box-shadow(none);
    }
}

.btn {
    border: 0 none;
    display: inline-block;
    margin-bottom: 0; // For input.btn
    font-weight: @btn-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid transparent;
    white-space: nowrap;
    background-color: transparent;
    .transition(@btn-transition);
}

.link {
    cursor: pointer;
}

.container-small {
    display: block;
    max-width: 480px;
    padding: 0 20px;
    margin: 0 auto 40px;

    @media(min-width: @screen-sm-min) {
        margin-bottom: 120px;
        max-width: 600px;
    }
}

.container-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;

    @media(min-width: @screen-sm-min) {
        padding-bottom: 120px;
    }
}

// Tabbable tabs
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
    >.tab-pane {
        display: none;
    }

    >.active {
        display: block;
    }
}

// Alignment
.text-left {
    text-align: left;
}

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

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

// Transformation
.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

// text color
.text-red {
    color: @red  !important;
}

.text-gray {
    color: @gray  !important;
}

.text-fb {
    color: @facebook;
}

.text-tw {
    color: @twitter;
}

.text-gp {
    color: @gplus;
}

// text style
.text-italic {
    font-style: italic;
}

.mrg-btm {
    margin-bottom: 20px;
}

.mrg-btm-xs {
    @media(max-width: @screen-xs-max) {
        margin-bottom: 20px;
    }
}

.no-mrg-btm {
    margin-bottom: 0 !important;
}

.mrg-top {
    margin-top: 20px;
}

.no-mrg-top {
    margin-top: 0 !important;
}

.no-border-top {
    border-top: none !important;
}

.no-border-btm {
    border-bottom: none !important;
}

.spacer {
    display: block;
    height: 44px;
}

.title {
    .flama();
    .medium();
    line-height: 1.2em;
    font-size: 20px;
    margin: 0 0 20px;
}

.lead {
    .flama();
    .light();
    color: @text;
    font-size: 20px;
    line-height: 1.35em;

    a {
        text-decoration: underline;
    }

    .section & {
        font-size: 22px;
    }
}

p {
    &.small {
        color: @black;
        font-size: 12px;
        margin-bottom: 20px;

        a {
            text-decoration: underline;
        }
    }

    &.cta,
    &.help {
        .flama();
        .light();
        font-size: 18px;
        margin: 20px 0;

        a.tab-link {
            color: @red;
            text-transform: uppercase;
        }
    }

    &.help {
        clear: both;
        line-height: 1.35em;
        font-size: 16px;
        /*a {
      text-decoration: underline;
    }*/
    }
}

.section-header {
    margin: 80px auto 40px;

    .title {
        font-size: 40px;

        @media(min-width: @screen-sm-min) {
            font-size: 60px;
        }

        color: @red;
        text-transform: uppercase;
    }

    .subtitle-i {
        font-size: 28px !important;
        margin-top: 0;
    }
}

.section-title {
    color: @black;
    display: block;
    .flama();
    .medium();
    font-size: 22px;
    line-height: @line-height-base;
    letter-spacing: 1px;
    margin: 0 0 40px;
    text-align: center;
    text-transform: uppercase;

    span {
        border-bottom: 3px solid @black;

        &.icon {
            border: none !important;
        }
    }

    i {
        display: block;
    }

    &.light {
        .light();
    }
}

@import "components/modal.less";