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

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

/******************************************************************************************
IMPORT LESS
******************************************************************************************/

@import "../assets/bootstrap-2.3.2/less/mixins.less";
@import "../assets/bootstrap-2.3.2/less/variables.less";
@import "fonts.less";
@import "anim.less";

@import "ipad.less";

/******************************************************************************************
RESET CSS
******************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1;
}
ol,
ul { list-style: none; }
blockquote,
q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*http://paulirish.com/2012/box-sizing-border-box-ftw/
******************************************************************************************/

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/******************************************************************************************
GENERAL VARIABLES
******************************************************************************************/
@white: #fff;

@fucsia_medium: #d4007a;

@pink_medium: #f19fc1;

@gray_medium: #565658;

/******************************************************************************************
HTML LAYOUT
******************************************************************************************/
html {
    background: @fucsia_medium url('/nientediscontato/images/bg-fucsia.jpg') repeat right top;

    body { min-height: 800px;

        .step {
            position: relative;
            width: 1170px;
            padding: 0;
            margin: 0 auto;
            font-size: 48px;
            line-height: 1.5;

            * {
                display: block;
                color: @white;
            }
        }
        &.impress-enabled {
            .step {
                margin: 0;
                .opacity(05);
                .transition(opacity 1s);
            }
            .step.active { .opacity(100); }
        }
        #impress {
            position: relative;
            z-index: 10;
        }
        a.link-button {
            font-family: @crabsalad;
            width: 290px;
            color: @fucsia_medium;
            text-decoration: none;
            text-align: center;
            font-size: 24px;
            line-height: 24px;
            padding: 15px 55px;
            background-color: @white;
            .border-radius(5px);
            .box-shadow(3px 4px 0 #720041);
            .transition(all 60ms linear);
            position: relative;

            &:hover,
            .hovered {
                .box-shadow(0 0 0 #720041);
                top: 4px;
                left: 3px;
            }
        }
        /**
         * bottone per l'avanzamento delle slide
         * visibile nella versione per iphone
         * ma in partenza nascosto
         */
        .btn-next { display: none; }
    }
}

/******************************************************************************************
BACKGROUND
******************************************************************************************/
#bg-white {
    background: #FFF url('/nientediscontato/images/bg-white.jpg') repeat right top;
    width: 0;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;

    #gradient-bg {
        background-color: transparent !important;
        #gradient > .radial(rgba(190, 190, 190, 0), rgba(190, 190, 190, 0.7));
        width: 100%;
        height: 100%;
    }
}
#bg-fucsia {
    background: @fucsia_medium url('/nientediscontato/images/bg-fucsia.jpg') repeat right top;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

#bg-black {
    -webkit-box-shadow: inset 0 0 0 0 #000;
    box-shadow: inset 0 0 0 0 #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    #link-container {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -75px;
        text-align: center;
        z-index: 1101;

        .link-site {
            color: white;
            font-family: @helveticaneuethin;
            font-size: 16px;
            text-decoration: none;
            .opacity(50);

            &:hover {
                text-decoration: none;
                .opacity(100);
            }
        }
    }
}

/******************************************************************************************
SPACEBAR
******************************************************************************************/
#spacebar {
    .size(40px, 190px);
    padding-top: 9px;
    background-color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: white;
    text-align: center;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 50%;
    margin: 0 0 -10px -95px;
    .opacity(60);
    .border-top-radius(10px);
    visibility: hidden;
}

/******************************************************************************************
STEP 01
******************************************************************************************/
#step-01 {
    text-align: center;
    padding-top: 0;

    img#title {
        margin: 120px auto 0;
        display: block;
    }
    img#logo {
        margin: 40px auto 0;
        display: block;
    }

    .premuto {
        .box-shadow(none);
        top: 4px;
        left: 3px;
        display: block;
    }
    a.link-button {
        width: 520px;
        margin: 100px auto 45px;
        display: block;
    }
    .link-informativa {
        margin-bottom: 30px;
        font-size: 12px;

        a {
            font-size: 12px;
            display: inline-block;
            text-decoration: none;

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

/******************************************************************************************
STEP 02
******************************************************************************************/
#step-02 {
    .content {
        margin-left: 455px;

        span {
            &.row-01 {
                font-family: @kg_alphabet;
                font-size: 76px;
                line-height: 70px;
            }
            &.row-02 {
                font-family: @futurabook;
                font-size: 125px;
                line-height: 100px;
                margin-top: -17px;

                em {
                    display: inline;
                    font-family: @impregnable;
                    font-style: normal;
                    font-size: 183px;
                }
            }
            &.row-03 {
                font-family: @pea_sdflenner;
                font-size: 56px;
                line-height: 88px;
                margin: 10px 0 0 165px;
            }
            &.row-04 {
                font-family: @impregnable;
                font-size: 183px;
                line-height: 115px;
                margin-top: -35px;
            }
        }
    }
}

/******************************************************************************************
STEP 03
******************************************************************************************/
#step-03 { width: 650px;
    .content {
        span {
            &.row-01 {
                font-family: @dinregular;
                font-size: 84px;
                line-height: 84px;
            }
            &.row-02 {
                font-family: @kg_love;
                font-size: 62px;
                line-height: 62px;
                margin-top: 17px;
            }
            &.row-03 {
                font-family: @komika;
                font-size: 81px;
                line-height: 81px;
            }
        }
    }
}

/******************************************************************************************
STEP 04
******************************************************************************************/
#step-04 { width: 650px;

    .content {
        span {
            &.row-01 {
                font-family: @channelregular;
                font-size: 200px;
                line-height: 150px;
                visibility: hidden;
            }
        }
    }
}

/******************************************************************************************
STEP 05
******************************************************************************************/
#step-05 { width: 370px;
    .content {
        span {
            font-family: @helveticaneueblack;
            font-size: 190px;
            color: @gray_medium;

            &.row-01 {
                line-height: 140px;
                margin-bottom: 30px;
            }
            &.row-02 {
                line-height: 80px;
            }
        }
        #orologio {
        	background: url('/nientediscontato/images/sprite-orologio.png') no-repeat 0 0;
        	width: 136px;
        	height: 137px;
        	float: left;
        }
        #freccia {
        	background: url('/nientediscontato/images/sprite-freccia.png') no-repeat 0 0;
        	width: 121px;
        	height: 160px;
        	float: right;
        }
    }
}

/******************************************************************************************
STEP 06
******************************************************************************************/
#step-06 { width: 650px;
    .content {
        span {
            color: @gray_medium;
            position: relative;

            &.row-01 {
                font-family: @palominomedium;
                font-size: 90px;
                line-height: 90px;
            }
            &.row-02 {
                font-family: @janda;
                font-size: 66px;
                line-height: 98px;

                div {
                    color: @gray_medium;
                    float: left;

                    &.su,
                    &.un,
                    &.agenzia { visibility: hidden; }
                    &.su { margin-right: 30px; }
                }
            }
            &.row-03 {
                font-family: @commymedium;
                font-size: 120px;
                line-height: 30px;
                visibility: hidden;
            }
            &.row-04 {
                font-family: @dinregular;
                font-size: 65px;
                line-height: 105px;
                font-weight: bold;
                color: @fucsia_medium;
                letter-spacing: -7px;
                visibility: hidden;
            }
        }
        #lampadina {
        	background: url('/nientediscontato/images/sprite-lampadina.png') no-repeat 0 0;
        	width: 144px;
        	height: 173px;
        	position: absolute;
        	top: -85px;
        	right: 110px;
            .rotate(35deg);
        }
    }
}

/******************************************************************************************
STEP 07
******************************************************************************************/
#step-07 {
    width: 710px;
    padding-bottom: 30px;
    overflow: hidden;

    .content {
        span {
            color: @gray_medium;
            font-family: @impregnable;
            font-size: 145px;
            line-height: 100px;
            text-indent: 10px;

            &.row-03 {
                position: relative;
                left: 165px;
                line-height: 130px;

                strong {
                    font-size: 385px;
                    font-weight: normal;
                    color: @fucsia_medium;
                    position: absolute;
                    top: -30px;
                    left: 120px;
                }
            }
            &.row-04 {
                position: relative;
                left: 450px;
                line-height: 80px;

                strong {
                    .size(152px, 89px);
                    .hide-text;
                    display: block;
                    background: url('/nientediscontato/images/punto-esclamativo.png') no-repeat 0 0;
                    position: absolute;
                    top: -45px;
                    left: 170px;
                }
            }
        }
    }
}

/******************************************************************************************
STEP 08
******************************************************************************************/
#step-08 {

    .content {
        text-align: center;

		span {
			&.row-01 {
				font-family: @helveticaneuethin;
                font-size: 75px;
                color: @gray_medium;
                line-height: 70px;
			}
			&.row-02,
            &.row-03,
            &.row-04 {
                font-family: @impregnable;
                font-size: 150px;
                color: @fucsia_medium;
                line-height: 100px;
                visibility: hidden;
			}
		}
        .ball {
            .square(345px);
            .border-radius(180px);
            display: block;
            background-color: @fucsia_medium;
            position: fixed;
            bottom: -80px;
            right: -60px;
        }
	}
}

/******************************************************************************************
STEP 09
******************************************************************************************/
#step-09 {
    .size(497px, 955px);

    .content {
        text-align: left;

        span {
            font-family: @impregnable;
            color: @gray_medium;
            text-indent: 10px;
            margin-left: 30px;

            &.row-01 {
                font-size: 125px;
                line-height: 70px;
                margin-top: 171px;
            }
            &.row-02 {
                font-size: 185px;
                line-height: 80px;

                &.color-fucsia { color: @fucsia_medium;}
            }
            &.row-03 {
                font-size: 81px;
                line-height: 70px;
                margin-left: 290px;
            }
        }
        .ingranaggi {
            position: absolute;
            right: 0;
            top: 0;
            background: url('/nientediscontato/images/sprite-ingranaggi.png') no-repeat 0 0;
            width: 624px;
            height: 450px;
        }
    }
}

/******************************************************************************************
STEP 10
******************************************************************************************/
#step-10 {
    .size(497px, 955px);

    .content {
        text-align: left;

        span {
            color: @gray_medium;

            &.row-01 {
                font-family: @amperzandregular;
                font-size: 84px;
                line-height: 64px;
                margin: 148px 0 0 35px;
            }
            &.row-02 {
                font-family: @dinregular;
                font-size: 42px;
                line-height: 52px;
                margin-left: 185px;
            }
            &.row-03 {
                font-family: @channelregular;
                font-size: 30px;
                line-height: 40px;
                margin: 7px 0 0 210px;
                float: left;
            }
            &.row-04 {
                font-family: Georgia, @baseFont;
                font-size: 60px;
                color: @gray_medium;
                margin-top: -31px;
                text-indent: 10px;
                float: left;
            }
            &.row-05 {
                font-family: @marketing;
                font-size: 80px;
                line-height: 45px;
                text-indent: 10px;
                margin-left: 25px;

                em {
                    font-size: 51px;
                    color: @gray_medium;
                    display: inline;
                }
            }
            &.row-06 {
                font-family: @helveticaneuethin;
                font-size: 70px;
                line-height: 65px;
                margin-left: 260px;
                opacity: 0;
            }
            &.color-fucsia { color: @fucsia_medium;}
        }
        .ingranaggi {
            position: absolute;
            right: 0;
            top: 0;
            background: url('/nientediscontato/images/sprite-ingranaggi.png') no-repeat 0 0;
            width: 624px;
            height: 450px;
        }
    }
}

/******************************************************************************************
STEP 11
******************************************************************************************/
#step-11 {
    .size(497px, 955px);

    .content {
        text-align: left;

        span {
            visibility: hidden;

            &.row-01 {
                font-family: @helveticaneuethin;
                font-size: 62px;
                line-height: 60px;
                text-indent: 73px;
                color: @gray_medium;
                margin-top: 237px;
                margin-left: 133px;
            }
            &.row-02 {
                font-family: @impregnable;
                font-size: 103px;
                line-height: 70px;
                color: @fucsia_medium;
                text-indent: -4px;
                margin-left: 32px;
            }
        }
        .ingranaggi {
            position: absolute;
            right: 0;
            top: 0;
            background: url('/nientediscontato/images/sprite-ingranaggi.png') no-repeat 0 0;
            width: 624px;
            height: 450px;
        }
    }
}

/******************************************************************************************
STEP 12
******************************************************************************************/
#step-12 {
    .size(300px, 915px);

    .content {
        text-align: center;

        span { font-family: @impregnable;
            &.row-01 {
                color: @gray_medium;
                font-size: 80px;
                line-height: 70px;
                margin-top: 65px;
            }
            &.row-02 {
                font-size: 160px;
                color: @fucsia_medium;
                line-height: 90px;
            }
        }

        .stelle {
            position: absolute;
            visibility: hidden;

            &.left {
                left: 0;
                bottom: 0;
            }
            &.right {
                right: 0;
                top: 0;
            }
        }
    }
}

/******************************************************************************************
STEP 13
******************************************************************************************/
#step-13 {
    .size(300px, 915px);
    -webkit-transform-style: flat !important;

    .content {
        text-align: right;

        span {
            font-family: @impregnable;
            color: @gray_medium;
            margin-right: 140px;

            &.row-01 {
                font-family: @helveticaneuethin;
                font-size: 70px;
                line-height: 70px;
                margin-top: 70px;
            }

            &.row-02,
            &.row-03,
            &.row-04,
            &.row-05 {
                font-size: 76px;
                line-height: 55px;
                opacity: 0;
                color: @fucsia_medium;
            }
        }
        .stelle { position: absolute;

            &.left {
                left: 0;
                bottom: 0;
            }
            &.right {
                right: 0;
                top: 0;
            }
        }
    }
}

/******************************************************************************************
STEP 14
******************************************************************************************/
#step-14 {

    .content {
        text-align: center;

        span {
            color: @white;

            &.row-01 {
                font-family: @tabitha;
                font-size: 128px;
                line-height: 105px;
                text-indent: -200px;
            }
            &.row-02 {
                font-family: @futurabook;
                font-size: 105px;
                line-height: 60px;
                text-indent: 185px;

                em {
                    font-family: @helveticaneuethin;
                    font-size: 70px;
                    font-style: normal;
                    display: inline;
                    color: @white;
                }
            }
            &.row-03 {
                font-family: @burstmybubble;
                font-size: 125px;
                line-height: 135px;
            }
            &.row-04 {
                font-family: @helveticaneuethin;
                font-size: 90px;
                line-height: 90px;
                margin-top: -40px;

                em {
                    font-family: @tabitha;
                    font-size: 140px;
                    font-style: normal;
                    display: block;
                    visibility: hidden;
                }
            }
        }
    }
}

/******************************************************************************************
STEP 15
******************************************************************************************/
#step-15 {

    .content {
        text-align: center;

        span {
            color: @white;

            &.row-01 {
                font-family: @channelregular;
                font-size: 190px;
                line-height: 105px;
                text-indent: -200px;
            }
        }
    }
}

/******************************************************************************************
STEP 16
******************************************************************************************/
#step-16 {

    .content {
        text-align: center;

        span {

            &.row-01 {
                font-family: @chelsearegular;
                font-size: 86px;
                line-height: 80px;
            }
            &.row-02 {
                font-family: @clemente_p_dam;
                font-size: 50px;
                line-height: 50px;
            }
            &.row-03 {
                font-family: @creamboldregular;
                font-size: 70px;
                line-height: 75px;
            }
            &.row-04 {
                font-family: @debussy;
                font-size: 53px;
                line-height: 55px;

                em {
                    font-size: 100px;
                    font-style: normal;
                    margin-top: 18px;
                    visibility: hidden;
                }
            }
        }
    }
}

/******************************************************************************************
STEP 17
******************************************************************************************/
#step-17 {
    .size(450px, 915px);

    .content {
        text-align: center;

        span {
            color: @white;

            &.row-01 {
                font-family: @impregnable;
                font-size: 325px;
                line-height: 350px;
            }
        }
        #mouse-container {
            .size(120px, 170px);
            position: absolute;
            top: 300px;
            left: 550px;

            &:hover,
            &:focus,
            &:active {
                .opacity(60);
                text-decoration: none;
            }

            #click {
                background: url('/nientediscontato/images/sprite-click.png') no-repeat 0 0;
                .size(74px, 166px);
            }
            > span {
                font-family: @impregnable;
                font-size: 60px;
                color: @white;
                position: absolute;
                right: 0;
                top: 55px;
                text-decoration: none;
            }
        }
    }
}

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

    #cookie-bar {
        border-top: 2px solid #a38f44;
        border-bottom: 2px solid #a38f44;
        padding: 10px 0;
        background: #2b5f65;

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

            > p {
                margin: 5px 0 0 340px;
                font-family: Times, serif;
                font-size: 14px;
                text-align: center;

                #cookie-bar-prompt-button { display: none; }
            }
            .btn  {
                background: #f3d76b;
                color: #690300 !important;
                font-family: Times, 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;

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