@CHARSET "ISO-8859-1";

/* Reset CSS
 * --------------------------------------- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

table {
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-weight: normal;
    font-style: normal;
}

strong {
    font-weight: bold;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Patrick Hand SC', cursive;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}


/*=================================================================================
    basic styles
======================================================================================*/

body {
    color: #fff;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: 3.5em;
}

h2 {
    font-size: 2.8em;
}

p {
    line-height: 1.5;
    font-size: 1.5em;
    width: 60%;
    margin: 0 auto;
}

.section {
    text-align: center;
}

a {
    color: #880000;
}


/*=================================================================================
    sezione intro  ---  1
======================================================================================*/

.title-intro01 {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.title-intro02 {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.container-intro {
    margin: 30px auto;
}

.boy {
    height: 400px;
    position: relative;
    margin-top: 30px;
}

.fumetto-intro {
    position: absolute;
    width: 300px;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.arrow {
    margin-top: 30px;
    width: 20px;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}


/*=================================================================================
    sezione einstein  ---  2
======================================================================================*/

#title-einstein {
    opacity: 0;
}

#title-einstein.active {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

#p-einstein {
    opacity: 0;
}

#p-einstein.active {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

#formula {
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 4rem;
    position: absolute;
    top: 30%;
    left: 50%;
    opacity: 0;
}

#formula.active {
    opacity: 1;
    white-space: nowrap;
    /*Evitar saltos de línea*/
    overflow: hidden;
    width: 3.9em;
    -webkit-animation-name: scritta;
    animation-name: scritta;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(500);
    animation-timing-function: steps(500);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes scritta {
    from {
        width: 0px;
    }
}

@keyframes scritta {
    from {
        width: 0px;
    }
}

#section1 img {
    margin: auto;
}


/*=================================================================================
    sezione chiarotti  ---  3
======================================================================================*/

.chiarotti-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 40px auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 900px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.chiarotti-item {
    height: 220px;
    margin: auto;
    position: relative;
    z-index: 10;
}

@-webkit-keyframes alien {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    15% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    30% {
        opacity: 1;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    35% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    40% {
        opacity: 1;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    45% {
        opacity: 0.9;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    50% {
        opacity: 0.8;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    55% {
        opacity: 0.6;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    60% {
        opacity: 0.5;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    65% {
        opacity: 0.4;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    70% {
        opacity: 0;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    75% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    80% {
        opacity: 0;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    85% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    90% {
        opacity: 0;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    95% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
}

@keyframes alien {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    15% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    30% {
        opacity: 1;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    35% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    40% {
        opacity: 1;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    45% {
        opacity: 0.9;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    50% {
        opacity: 0.8;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    55% {
        opacity: 0.7;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    60% {
        opacity: 0.6;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    65% {
        opacity: 0.5;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    70% {
        opacity: 0.4;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    75% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    80% {
        opacity: 0;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    85% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    90% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    95% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
}

#chiarotti-item01,
#chiarotti-item02,
#chiarotti-item04,
#chiarotti-item05,
#chiarotti-item06,
#chiarotti-item07,
#chiarotti-item08,
#chiarotti-item09,
#chiarotti-item10,
#chiarotti-item11,
#chiarotti-item12 {
    opacity: 1;
}

#chiarotti-item01.active,
#chiarotti-item02.active,
#chiarotti-item03.active,
#chiarotti-item04.active,
#chiarotti-item05.active,
#chiarotti-item06.active,
#chiarotti-item07.active,
#chiarotti-item08.active,
#chiarotti-item09.active,
#chiarotti-item10.active,
#chiarotti-item11.active,
#chiarotti-item12.active {
    -webkit-animation-name: alien;
    animation-name: alien;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

#chiarotti-item01.active {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

#chiarotti-item04.active {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

#chiarotti-item07.active {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

#chiarotti-item10.active {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#chiarotti-item02.active {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

#chiarotti-item08.active {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

#chiarotti-item12.active {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

#chiarotti-item03.active {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

#chiarotti-item09.active {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}

#chiarotti-item06.active {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

#chiarotti-item11.active {
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
}

#chiarotti-item05.active {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

.alien-item,
.alien-item05,
.alien-item06,
.alien-item07,
.alien-item08,
.alien-item09,
.alien-item10,
.alien-item11,
.alien-item12 {
    height: 220px;
    margin: auto;
    position: relative;
    top: -440px;
}

#title-chiarotti {
    opacity: 0;
}

#title-chiarotti.active {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

#p-chiarotti {
    opacity: 0;
    margin-top: -450px;
}

#p-chiarotti.active {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
    margin-top: -450px;
}


/*=================================================================================
    sezione caronte  ---  4
======================================================================================*/

.caronte-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
}

.sea {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -170px;
    z-index: 10;
    padding-bottom: 20px;
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.boat {
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#title-caronte {
    opacity: 0;
}

#title-caronte.active {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

#p-caronte {
    opacity: 0;
}

#p-caronte.active {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}


/*=================================================================================
    sezione segretaria  ---  5
======================================================================================*/

#title-segretaria {
    opacity: 0;
}

#title-segretaria.active {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

#p-segretaria {
    opacity: 0;
}

#p-segretaria.active {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

#fumetto01.active,
#fumetto02.active,
#fumetto03.active,
#fumetto04.active {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

.segretaria-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.segretaria-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: justify;
    align-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#fumetto01,
#fumetto03 {
    width: 170px;
    padding-top: 20%;
    padding-bottom: 30%;
    opacity: 0;
}

#fumetto01.active {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

#fumetto02,
#fumetto04 {
    width: 170px;
    opacity: 0;
}

#fumetto02.active {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

#fumetto03.active {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

#fumetto04.active {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}


/*=================================================================================
    sezione supereroi  ---  6
======================================================================================*/

#title-heroes {
    opacity: 0;
}

#title-heroes.active {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

#p-heroes {
    opacity: 0;
}

#p-heroes.active {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

.heroes-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 60px auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 1100px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.heroes {
    height: 220px;
    margin: auto;
    margin-left: -40px;
    -webkit-transition: 2s all;
    transition: 2s all;
}

.heroes:first-child {
    margin-left: 0px;
}

#hero01,
#hero02,
#hero03,
#hero04,
#hero05,
#hero06,
#hero07,
#hero08 {
    opacity: 0;
}

#hero01.active,
#hero02.active,
#hero03.active,
#hero04.active,
#hero05.active,
#hero06.active,
#hero07.active,
#hero08.active {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

#hero01.active {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

#hero02.active {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

#hero03.active {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

#hero04.active {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

#hero05.active {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

#hero06.active {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#hero07.active {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#hero08.active {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}


/*=================================================================================
    sezione grazie  ---  7
======================================================================================*/

.container-thanks {
    width: 90%;
    margin: 0 auto;
}

.container-thanks img {
    width: 300px;
    margin-top: 150px;
}

#move {
    display: inline-block;
}

#move.active {
    -webkit-animation-name: tremolo;
    animation-name: tremolo;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-iteration-count: 5;
    animation-iteration-count: 5;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes tremolo {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    15% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    20% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    25% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    30% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    35% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    40% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    45% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    50% {
        color: #0b8943;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    55% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    60% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    65% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    70% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    75% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    80% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    85% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    90% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    95% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    100% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
}

@keyframes tremolo {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    15% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    20% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    25% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    30% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    35% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    40% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    45% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    50% {
        color: #0b8943;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    55% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    60% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    65% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    70% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    75% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
    80% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    85% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    90% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    95% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
}


/*=================================================================================
    media query
======================================================================================*/

@media (max-width:1350px) {
    #fumetto01,
    #fumetto02 {
        left: 10em;
    }
    #fumetto03,
    #fumetto04 {
        left: 55em;
    }
}

@media (max-width:1050px) {
    #fumetto01 {
        top: 8em;
        left: 6em;
    }
    #fumetto02 {
        top: 25em;
        left: 6em;
    }
    #fumetto03 {
        top: 8em;
        left: 50em;
    }
    #fumetto04 {
        top: 25em;
        left: 50em;
    }
}

@media (max-width: 920px) {
    .container-intro {
        margin: 20px auto;
    }
    #section4 img {
        width: 90%;
    }
    #fumetto01,
    #fumetto02,
    #fumetto03,
    #fumetto04 {
        display: none;
    }
    #p-segretaria.active {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }
    .chiarotti-container {
        width: 400px;
    }
    #chiarotti-item02.active {
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
    }
    #chiarotti-item03.active {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
    }
    #chiarotti-item05,
    #chiarotti-item06,
    #chiarotti-item07,
    #chiarotti-item08,
    #chiarotti-item09,
    #chiarotti-item10,
    #chiarotti-item11,
    #chiarotti-item12,
    .alien-item05,
    .alien-item06,
    .alien-item07,
    .alien-item08,
    .alien-item09,
    .alien-item10,
    .alien-item11,
    .alien-item12 {
        display: none;
    }
    .heroes-container {
        width: 90%;
    }
    .heroes {
        height: 150px;
        margin: auto;
        margin-left: -5em;
    }
    #p-segretaria.active {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }
    .container-thanks h2 {
        font-size: 2em;
        margin-top: 2em;
    }
    .container-thanks img {
        margin-top: 50px;
    }
    #section1 img {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .boy {
        height: 300px;
    }
    .fumetto-intro {
        width: 150px;
    }
    h1 {
        font-size: 2.2rem;
    }
    p {
        font-size: 1.2rem;
        width: 90%;
        margin-top: 10px;
    }
    .sea {
        margin-top: -100px;
        width: 100%;
    }
    .boat {
        width: 90%;
    }
    #formula {
        font-size: 3rem;
    }
}

@media (max-width:480px) {
    h1 {
        font-size: 1.5rem;
        width: 90%;
    }
    p {
        font-size: 0.8rem;
    }
    .boy {
        height: 200px;
        margin-top: 10px;
    }
    .fumetto-intro {
        width: 100px;
    }
    .sea {
        margin-top: -50px;
    }
    .boat {
        width: 95%;
    }
    .chiarotti-container {
        width: 300px;
    }
    #hero06,
    #hero07,
    #hero08 {
        display: none;
    }
    .heroes-container {
        margin: 20px auto;
    }
    #p-heroes.active {
        -webkit-animation-delay: 3.2s;
        animation-delay: 3.2s;
    }
    .container-thanks h2 {
        font-size: 1.2em;
        margin-top: 1em;
    }
    .container-thanks img {
        margin-top: 10px;
        width: 200px;
    }
    #formula {
        font-size: 1.6rem;
    }
}