/* CSS HEX
    --cultured: #f3f3f3;
    --old-lace: #f5f1e3;
    --light-sky-blue: #83d3ff;
    --blue-green: #4291b4;
    --lapis-lazuli: #366489;
    --ruby: #d81159;

     CSS HSL
    --cultured: hsla(0, 0%, 95%, 1);
    --old-lace: hsla(47, 47%, 93%, 1);
    --light-sky-blue: hsla(201, 100%, 76%, 1);
    --blue-green: hsla(198, 46%, 48%, 1);
    --lapis-lazuli: hsla(207, 43%, 37%, 1);
    --ruby: hsla(338, 85%, 46%, 1);

    SCSS RGB
    $cultured: rgba(243, 243, 243, 1);
    $old-lace: rgba(245, 241, 227, 1);
    $light-sky-blue: rgba(131, 211, 255, 1);
    $blue-green: rgba(66, 145, 180, 1);
    $lapis-lazuli: rgba(54, 100, 137, 1);
    $ruby: rgba(216, 17, 89, 1);

    */

    .landing {
        z-index: 4;
        height: 100vh;
        position: relative;
        margin: 0;
        padding: 0;

    }
        /* html,body{
          background:#e74c3c;
          position:relative;
          height:100%;
          margin:0;
          padding:0;
        } */
    .page{
        display:block;
        float:left;
        position:relative;
        overflow:hidden;
        width:100%;
        height:100%;
    }
    .loaded{
        overflow-y:auto;
    }
    .main{
        display:none;
    }
    .tl,.tr,.bl,.br{
        z-index: 5;
        display:block;
        position:absolute;
        width:100%;
        height:100%;
        background-color: #f3f3f3;
        background:url(../../img/landing/bg_welcome_page2.png) no-repeat center center fixed #f3f3f3;
        -moz-background-size:cover;
        background-size:cover;
    }
    /* top left*/
    .tl{
        top:0;
        top:-50%;
        left:-50%;
    }
    /* top right*/
    .tr{
        top:-50%;
        left:50%;
    }
    /* botton left*/
    .bl{
        top:50%;
        left:50%;
    }
    /* botton right*/
    .br{
        top:50%;
        left:-50%;
    }
    .enter:after,
    .enter:hover:after,
    .enter,.enter:hover{
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease;
    }
    .enter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        width: 100px;
        height: 100px;
        z-index: 999999999;
        text-decoration: none;
    }

    .enter svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        margin: auto;
        width: 100px;
        height: 100px;
        z-index: 999999999;
        text-decoration: none;
        overflow: visible;
    }
    .enter svg .st0-landing{
        fill:#4391B5;
    }

    .enter svg .st1-landing{
        fill:#376586;
    }

    .enter svg .st0-landing:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        width: 80px;
        height: 80px;
        background-color: #3FB4BE;
        background-color: rgba(0, 235, 255, 0.44);
        z-index: 999999999;
        text-decoration: none;
        color: #f3f3f3;
        -webkit-box-shadow: 0 0 15px 2px #000;
        -moz-box-shadow: 0 0 15px 2px #000;
        box-shadow: 0 0 15px 2px #000;
    }
    .enter:hover svg .st0-landing{
        -webkit-box-shadow:0 0 4px 4px #3FB4BE;
        -moz-box-shadow:0 0 4px 4px #3FB4BE;
        box-shadow:0 0 4px 4px #3FB4BE;
    }
    .enter svg .st0-landing:after{
        background-color: #2A2A2B;
        background-color: rgba(17, 17, 17, 0.67);
    }
    .hideThis{
        -webkit-box-shadow:0 0 0 0 #3FB4BE;
        -moz-box-shadow:0 0 0 0 #3FB4BE;
        box-shadow:0 0 0 0 #3FB4BE;
        opacity:0;
        z-index:-5;
    }
    .enter p  {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, 0);
        font-weight: 600;
    }
    /* Layout
    ============================== */

    *, *:before, *:after{
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    ::-webkit-scrollbar{
        background-color:#000;
        width:5px;
        height:5px;
    }
    ::-webkit-scrollbar-thumb{
        height:10px;
        background-color:#333;
    }
    html{
        text-rendering:optimizeLegibility;
        -webkit-font-smoothing:antialiased;
    }

    .landing-citazione {
        position: absolute;
        top: 30vh;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 6;
        text-align: center;

    }
    .landing-citazione .firma {
        border: none;
        margin-bottom: 0;
    }
    .landing-citazione .box-firma hr {
        width: 20%;
        margin: auto;
        height: 3px;
        color: #366489;
        opacity: 1;
    }
    .comunicazioni {
        position: absolute;
        top: 90vh;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 6;
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
    }
    
    .enter .retropiede,
    .enter .avampiede,
    .enter .dito1,
    .enter .dito2,
    .enter .dito3,
    .enter .dito4,
    .enter .dito5 {
        transition: 5s ease;
    }

    @keyframes foot-pulse {
        0% {
            transform: scale(1.00);
        }
        2% {
            transform: scale(1.00);
        }
        6% {
            transform: scale(1.05);
        }
        10% {
            transform: scale(1.0);
        }
        100% {
            transform: scale(1.0);
        }
    }


    .enter .retropiede {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 0.5s;
        animation-iteration-count: infinite;
    }
    .enter .avampiede {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 0.8s;
        animation-iteration-count: infinite;
    }
    .enter .dito1 {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 1.1s;
        animation-iteration-count: infinite;
    }
    .enter .dito2 {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 1.2s;
        animation-iteration-count: infinite;
    }
    .enter .dito3 {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 1.3s;
        animation-iteration-count: infinite;
    }
    .enter .dito4 {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 1.4s;
        animation-iteration-count: infinite;
    }
    .enter .dito5 {
        animation-name: foot-pulse;
        animation-duration: 5s;
        animation-delay: 1.5s;
        animation-iteration-count: infinite;
    }