*{
    margin: 0;
    padding: 0;
}

html,
body
{
    padding: 0;
    margin: 0;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size:1em;
    letter-spacing:1px;
}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
    overflow-x: hidden;
    background-color: #0a051b;
}



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    hieght:100%;
    background-color:#000; /* change if the mask should have another color then white */
    z-index:999999; /* makes sure it stays on top */
}

#status {
    width:240px;
    height:80px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */

    margin:-40px 0 0 -120px; /* is width and height divided by two */
    text-align:center;
}

.loading{margin-top:20px;}
.logo_indi{margin-bottom:20px;}

.floor-1{ }
.floor-2{background:rgba(0,0,0,0.8); z-index:991; overflow:hidden;}
.floor-3{background:rgba(100,0,0,0.8); z-index:992}
.floor-4{background:rgba(100,0,50,0.8); z-index:993}
.floor-5{background:rgba(140,0,0,0.8); z-index:994}
.floor-6{background:rgba(45,88,135,0.8); z-index:995}
.floor-7{background:rgba(32, 45, 65, 0.8); z-index:996}


nav{
    position: absolute;
    bottom: 20px;
    right: 20px;
}

li.selected{
    color: #0f0;
}

#ascensorBuilding{
    overflow: hidden;
    position:fixed !important;
    z-index:1;
}
nav{position:fixed !important;
    z-index:999;}

h1{font-size:80px;
    color:#fff;}


.noscroll{overflow:hidden}





/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
    position: fixed;
    bottom: 0;
    left: 0;
}

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */


.fondo
{
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 0;
    width: 4500px;
    height:1440px;
    background:url(../images/fondo.png) center bottom repeat-x;
}



.cielo
{
    z-index: 1;
    width: 3000px;
}


.stelle
{
    z-index: 1;
    width: 2600px;

}

.nuvole1
{
    z-index: 3;
    width: 2650px;
}

.nuvole2
{
    z-index: 4;
    width: 2850px;
}

.logo{
    position:fixed;
    bottom:-150px;
    left:50px;
    font-size:36px;
    color:#FFF;
    z-index:9999;
}


nav{
    position:fixed;
    bottom:-150px;
    right:50px;

    color:#FFF;
    z-index:9999;
    text-transform:uppercase;
}

nav ul{
    list-style:none; width:auto; text-align:right;}

nav ul li{
    font-family:  'Helvetica Neue', 'Arial', sans-serif;
    font-size:0.9em;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    -webkit-font-smoothing: subpixel-antialiased;
    letter-spacing:1px;
    float:left; padding-left:15px; cursor:pointer;
}



.mare
{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 3500px;
    height:91px;
    background:url(../images/mare.png) repeat-x;
}

.gratta4
{
    z-index: 20;
    width: 2700px;
}

.gratta3
{
    z-index: 30;
    width: 2800px;
}





.gratta2
{
    z-index: 40;
    width: 2900px;
}


.gratta1
{
    z-index: 50;
    width: 3000px;
}



.orizzonte
{
    position: fixed;
    bottom: -1px;
    left: 0;
    z-index: 60;
    width: 3500px;
    height:104px;
    background:url(../images/orizzonte.png) repeat-x;
}

h2{


    font-family:Helvetica, sans-serif;
    font-weight:300;
    font-size:24px;
}

.ponte
{
    z-index: 70;
    width: 3200px;
}

#welcome{width:100%; height:100%;  z-index:1; padding:0; margin:0; overflow:hidden}
#luci{width:100%; height:100%;  z-index:6; padding:0; margin:0; overflow:hidden}

.payoff{

    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;


    position:absolute; top:-100px; left:50%; width:960px; margin: 0 0 0 -480px; text-align:center;z-index:7; color:#FFF; font-size:2em; line-height:1.5em}




/**************************************************
*
*	SCROOLER GALLERYR STYLES
*
**************************************************/
/*! Scrollyeah - v0.3.1 - 2013-08-23
* https://github.com/artpolikarpov/scrollyeah
* Copyright (c) 2013 Artem Polikarpov; Licensed MIT */

.item_entry {
    float: left;
    width: 430px;
    height: 100%;
    text-align: center;
    margin: 0px;
    overflow:hidden;
}



.bianco{background:rgba(255,255,255,0.8); color:#222}
.nero{background:rgba(0,0,0,0.7); color:#FFF}

.entry {
    display:table;
    width:430px;

    height:100%;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    font-size:1.5em; line-height:1.5em;

}



.content{
    width:330px;
    padding:0 50px;
    display:table-cell;
    vertical-align:middle;
}


.item_service {
    float: left;
    width: 1024px;
    height: 768px;
    text-align: center;
    margin: 0px;
    overflow:hidden;
}

.service {
    display:table;
    width:100%;

    height:100%;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    font-size:1.5em; line-height:1.5em;

}

.content_service{
    width:80%;
    padding:0 10%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}


.item_gallery {
    float: left;
    width: 1024px;
    height: 768px;

    text-align: center;

    margin: 0px;
    overflow:hidden;
}

.gallery_uno, .gallery_due, .gallery_tre, .gallery_quattro, .gallery_cinque, .gallery_sei, .gallery_sette, .gallery_otto, .gallery_nove, .gallery_dieci, .gallery_undici {
    width:100%;
    height:100%;
}



.item_news {
    float: left;
    width: 1024px;
    height: 768px;

    text-align: center;

    margin: 0px;
    overflow:hidden;
}

#contact_container{




    float:left;

    width:100%;
    height:100%;
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:    0px 10px 10px rgba(0, 0, 0, 0.7);
    box-shadow:         0px 10px 10px rgba(0, 0, 0, 0.7);
    overflow:hidden;

}

#partner_container{
    float:left;
background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:    0px 10px 10px rgba(0, 0, 0, 0.7);
    box-shadow:         0px 10px 10px rgba(0, 0, 0, 0.7);
    overflow:hidden;
	display:table

}

.title_partner{width:80%; margin:20px 10% 20px 10%; text-align:center; color:#fff;  display:table-cell; vertical-align:middle}
.row_partner{float:left; width:100%; margin-bottom:20px; font-size:1.4em; line-height:1.2em}
.partner{float:left;width:80%; margin:20px 10% 20px 10%; text-align:center; color:#fff; font-size:0.9em; line-height:1.4em;}
.cp{width:600px; margin:0px auto;}
.row{float:left; width:100%; font-size:0.9em}
.row span{float:left; width:250px; margin:0 25px}

.login{float:left;width:80%; margin:20px 10% 20px 10%; text-align:center; color:#fff; }
.login a{padding:10px 20px; color:#fff; background:#182b47; font-size:1.2em; text-decoration:none; letter-spacing:2px}

#contact_foto {
    float: left;
    width: 500px;
    height: 100%;
}

#contact_txt {
    position:relative;
    top:0;
    right:0;
    width: 330px;
    padding:0 50px;
    height: 100%;
    display:table;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:80%;
}

/* Partners Page */
.item_partners,
.partners_entry{
    float: left;
    text-align: center;
    margin: 0px;
    overflow:hidden;
}
.partners_entry * {
    box-sizing: border-box;
}

.m-logo {
    display: block;
    padding: 15px 40px;
    color: #FFFFFF;
    width: 100%;
}
.m-logo:after {
    content: '';
    display: table;
    clear: both;
}
.m-logo figure {
    display: inline-block;
    width: 30%;
    float: left;
}
.m-logo figure img {
    display: block;
    max-width: 100%;
    height: auto;
}

.m-logo .address-mod {
    display: inline-block;
    max-width: 350px;
    padding: 0px 10px;
    text-align: left;
    margin-left: 15px;
    float: left;
}

.m-logo .address-mod .address {
    display: block;
}
.m-logo .address-mod .phone {
    text-decoration: none;
    color: white;
    font-weight: bold;
    margin-top: 6px;
    display: block;
}
.m-logo .address-mod .phone:hover {
    text-decoration: underline;
}


.login-form {
    position: relative;
    width: 50%;
    margin: 0 auto;
    top: 50%;
    margin-top: -120px;
}

.login-form form:after { content: ""; display: table; clear:both; }
.login-form form {
    color: white;
}

.login-form form h2{
    text-align: left;
}
.login-form .field-set {
    margin: 8px auto;
}
.login-form .field-set label{
    display: inline-block;
    width: 50%;
    float: left;
    padding: 4px 10px;
    text-align: right;
}
.login-form .field-set input{
    border: none;
    border: 1px solid #FFFFFF;
    width: 50%;
    color: #3b3b3b;
    padding: 3px 8px;
    background: #FFF;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
}
.login-form .forgot-pw {
    color: white;
    text-decoration: none;
    font-size: 11px;
}
.login-form input[type=submit] {
    display: inline-block;
    border: none;
    padding: 7px 20px;
    border: 1px solid white;
    background: none;
    color: white;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    float: right;
}
.login-form input[type=submit]:hover {
    background-color: white;
    color: #3b3b3b;
}
.item_partners .partners {
}
.item_partners .partners h2 {
    color: white;
}
.item_partners .row {

}
.item_partners .row:after {
    content: "";
    display: table;
    clear: both;
}
.indirizzo{
    display:table-cell;
    vertical-align:middle;
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    font-size:1.5em; line-height:1.5em;
}

.indirizzo a{color:#FFF; text-decoration:underline; }
.indirizzo p{margin-bottom:30px; }
.social{float:left; width:330px; height:30px; line-height:30px; margin-bottom:20px; font-size:0.8em}
.social_icon{float:left; width:40px; height:30px; line-height:30px;}
.social_txt{float:left; width:290px; height:30px; line-height:30px;}
.social_txt a{text-decoration:none;}
.social_txt a:hover{text-decoration:underline;}

.news_uno, .news_due,.news_tre,.news_quattro, .news_cinque, .news_sei,.news_sette,.news_otto, .news_nove, .news_dieci, .news_undici {
    width:100%;
    height:100%;
}



.scrollyeah {
    position: relative;
    overflow: hidden;
    *zoom: 1;
    top:0px;
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:    0px 10px 10px rgba(0, 0, 0, 0.7);
    box-shadow:         0px 10px 10px rgba(0, 0, 0, 0.7);
}

.scrollyeah__wrap {
    overflow: hidden;
    *zoom: 1;
}

.scrollyeah__shaft {
    float: left;
}

.scrollyeah__shaft, .scrollyeah__parallax {
    left: 0;
    position: relative;
}

.scrollyeah_active .scrollyeah__shaft {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
    *cursor: move !important;
}
.scrollyeah_active .scrollyeah__shaft_grabbing, .scrollyeah_active .scrollyeah__shaft_grabbing * {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing;
}

.scrollyeah__shadow {
    display: block;
    position: absolute;
    text-decoration: none;
    top: 0;
    bottom: 0;
    width: 10px;
    height: auto;
    -webkit-transition-property: left, right;
    -moz-transition-property: left, right;
    -o-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 333ms, 333ms;
    -moz-transition-duration: 333ms, 333ms;
    -o-transition-duration: 333ms, 333ms;
    transition-duration: 333ms, 333ms;
    -webkit-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1), cubic-bezier(0.1, 0, 0.25, 1);
    -moz-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1), cubic-bezier(0.1, 0, 0.25, 1);
    -o-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1), cubic-bezier(0.1, 0, 0.25, 1);
    transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1), cubic-bezier(0.1, 0, 0.25, 1);
    z-index: 10;
    *display: none !important;
    background-repeat: no-repeat;
    background-size: 1px 100%, 5px 100%;
}

.scrollyeah__shadow_prev {
    left: -10px;
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -webkit-radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -moz-radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -o-radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-position: 0 0, 0 0;
}

.scrollyeah__shadow_next {
    right: -10px;
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -webkit-radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -moz-radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), -o-radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.5), transparent);
    background-position: 100% 0, 100% 0;
}

.scrollyeah_shadow .scrollyeah__shadow_prev {
    left: 0;
}
.scrollyeah_shadow .scrollyeah__shadow_next {
    right: 0;
}

.scrollyeah_shadow_no-left .scrollyeah__shadow_prev {
    left: -10px;
}

.scrollyeah_shadow_no-right .scrollyeah__shadow_next {
    right: -10px;
}


h3{

    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    color:#FFF; font-size:2em; line-height:1em}

.section_txt{width:90%;
    margin-left:5%;
    margin-top:100px}

.ac-container{
    width: 100%;
    margin: 30px auto 30px auto;
    text-align: left;
}
.ac-container label{
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    color:#FFF; font-size:1.5em; line-height:1em;
    padding: 20px 0px;
    position: relative;
    z-index: 20;
    display: block;

    cursor: pointer;


}
.ac-container label:hover{
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{

    background: rgba(0,0,0,0.6);
    color: #fff;


}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:unchecked + label:hover:after{

}
.ac-container input{
    display: none;
}
.ac-container article{

    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article ul li{
    font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    color:#FFF; font-size:1.5em; line-height:1.5em}
}
.ac-container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
    height: 120px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 160px;
}
.ac-container input:checked ~ article.ac-large{
    height: 280px;
}








.container_alert{
    width: 100%;
    position: absolute;
    height:100%;
    text-align: center;

}

.tn-box {
    width: 360px;
    position: absolute;
    top:50%;
    left:50%;
    margin:-40px 0px 0px -196px;
    padding: 25px 16px;
    text-align: center;


    opacity: 0;

    display: none;
    z-index:99999;
}

.tn-box p {

    font-size: 16px;
    margin: 0;
    padding: 0 10px 0 10px;

}


.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.05),
    0 -1px 0 rgba(255,255,255,0.6);
}

/* Colors */

.tn-box-color-1{


}
.tn-box-color-1 p {
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-size:0.9em;
    color:#fff;
    text-transform:uppercase;
}

.tn-box-color-2{
    background: rgba(0,0,0,0.6);

}
.tn-box-color-2 p {
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    -webkit-font-smoothing:antialiased;
    font-size:0.9em;
    color:#fff;
    text-transform:uppercase;
}


/* Fire the animations */

input.fire-check:checked ~ .alert .tn-box {
    display: block;
    -webkit-animation: fadeOut 5s linear forwards;
    -moz-animation: fadeOut 5s linear forwards;
    -o-animation: fadeOut 5s linear forwards;
    -ms-animation: fadeOut 5s linear forwards;
    animation: fadeOut 5s linear forwards;
}



/* If you use JavaScript you could add a class instead: */

.tn-box.tn-box-active {
    display: block;
    -webkit-animation: fadeOut 4s linear forwards;
    -moz-animation: fadeOut 4s linear forwards;
    -o-animation: fadeOut 4s linear forwards;
    -ms-animation: fadeOut 4s linear forwards;
    animation: fadeOut 4s linear forwards;
}



@-webkit-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -webkit-transform: translateY(0px);}
    99% { opacity: 0; -webkit-transform: translateY(-30px);}
    100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -moz-transform: translateY(0px);}
    99% { opacity: 0; -moz-transform: translateY(-30px);}
    100% { opacity: 0; }
}

@-o-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -o-transform: translateY(0px);}
    99% { opacity: 0; -o-transform: translateY(-30px);}
    100% { opacity: 0; }
}

@-ms-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -ms-transform: translateY(0px);}
    99% { opacity: 0; -ms-transform: translateY(-30px);}
    100% { opacity: 0; }
}

@keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }
}

@-webkit-keyframes runProgress {
    0%{ width: 0%; background: rgba(255,255,255,0.3); }
    100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-moz-keyframes runProgress {
    0%{ width: 0%; background: rgba(255,255,255,0.3); }
    100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-o-keyframes runProgress {
    0%{ width: 0%; background: rgba(255,255,255,0.3); }
    100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-ms-keyframes runProgress {
    0%{ width: 0%; background: rgba(255,255,255,0.3); }
    100%{ width: 96%; background: rgba(255,255,255,1); }
}

@keyframes runProgress {
    0%{ width: 0%; background: rgba(255,255,255,0.3); }
    100%{ width: 96%; background: rgba(255,255,255,1); }
}





/* Last example pauses on hover (causes problems in WebKit browsers) */

.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}