@font-face {
    font-family: "CustomFont";
    src: url("../FONT/gotham-rounded-medium.woff") format("woff"),
    url("../FONT/gotham-rounded-medium.otf") format("opentype"),
    url("../FONT/gotham-rounded-medium.svg#filename") format("svg");
    }
    @font-face {
    font-family: "CustomFont2";
    src: url("../FONT/GoetheFFClan-Bold.woff") format("woff"),
    url("../FONT/GoetheFFClan-Bold.otf") format("opentype"),
    url("../FONT/GoetheFFClan-Bold.svg#filename") format("svg");
    font-weight: normal;
      font-style: normal;
    }
    @font-face {
    font-family: "CustomFont3";
    src: url("../FONT/GoetheFFClan-Book.woff") format("woff"),
    url("../FONT/GoetheFFClan-Book.otf") format("opentype"),
    url("../FONT/GoetheFFClan-Book.svg#filename") format("svg");
    font-weight: normal;
      font-style: normal;
    }
    
        body, html {
          margin:0;
          padding:0;
          box-sizing:border-box;
          -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          -webkit-font-smoothing:antialiased;
          -moz-font-smoothing:antialiased;
          -o-font-smoothing:antialiased;
          text-rendering:optimizeLegibility;
          height: 100%;
        }
          body {
          font:400 12px/1.625 "Helvetica Neue", Helvetica, Muli, sans-serif;
        }
    
    #p1,#p2,#p3,#p4,#p29_30{
      display: none;
      position: absolute;
      width: 100%;
      height: auto;
      z-index: 2;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    
    #pwrong{
      display: none;
      position: absolute;
      width: 100%;
      height: auto;
      z-index: 2;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    .vid{
      visibility: hidden;
      position: absolute;
      width: 100%;
      height: auto;
      z-index: 2;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    .imgr{
      width: 100%;
     /* height: 100%;*/
      height: auto;
    }.imgrico{
      position: absolute;
        display: block;
        top: 62%;
    left: 43%;
        width: 15%;
        height: auto;
    }.ss{
      /* background-color:cyan;*/
        position: fixed;
        display: block;
        top: 39.25%;
        left: 39.75%;
        width: 20%;
        height: 20%;
        text-align: center;
    }.smile{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: auto;
    }
    .container{
    z-index: 0;
    }.bg{
    position: absolute;
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    z-index: 0;
    }
    #GameDiv{
    /*background-color: bisque;*/
    margin-left: 20px;
    margin-right: 20px;
    position: absolute;
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    z-index: 1;
    }
    .hided{
    width: 0px;
    height: 0px;
    visibility: hidden;
    }
    
    
    #p26{
      display: none;
      position: absolute;
      width: 80%;
      height: auto;
      z-index: 2;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    #PurpleCard{
      opacity: 0;
        background-color: blueviolet;
        position: absolute;
        width: 40%;
        height: 60%;
        left: 35%;
        z-index: 2;
        top: 30%;
        -ms-transform: rotate(20deg);
        transform: rotate(5deg);
        cursor: pointer;
    }
    #BlueCard{
      background-color: blue;
        opacity: 0;
        position: absolute;
        width: 40%;
        height: 70%;
        left: 0%;
        z-index: 3;
        top: 0%;
        -ms-transform: rotate(20deg);
        transform: rotate(5deg);
        cursor: pointer;
    }
    .testfont{
      visibility: hidden;
      top:10%;
      position: absolute;
      z-index: 10;
    font-family: 'CustomFont', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    }
    .testfont2{
      visibility: hidden;
      top:20%;
      position: absolute;
      z-index: 10;
    font-family: 'CustomFont2', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    }
    
    .top_title{
      /*border-style: dotted dashed solid double;*/
        position: fixed;
        display: block;
        top: 9%;
        left: 21%;
        width: 55%;
        height: 25%;
        text-align: center;
        font-family: 'CustomFont2', sans-serif;
        font-size: 1.6vw;
        color: white;
        line-height: 4.5vw;
    }
    .central_image{
     /* border-style: dotted dashed solid double;*/
        position: fixed;
        display: block;
        top: 50%;
        left: 50%;
        width: 30%;
        /*height: 43%;*/
		height: 39%;
        transform: translate(-50%, -50%);
        text-align: center;
    
    }.child_1{
    /*  border-style: double;*/
        position: fixed;
        display: block;
        /*top: 50%;*/
		top: 40%;
        left: 17%;
        width: 20%;
        /*height: 45%;*/
		height: 40%;
       /* transform: translate(-50%, -50%);*/
        text-align: center;
    
    }.child_2{
    /*  border-style: dotted ;*/
        position: fixed;
        display: block;
        /*top: 45%;*/
		top: 33%;
        /*left: 53%;*/
		left: 51%;
        width: 25%;
        /*height: 50%;*/
		height: 40%;
        text-align: center;
    
    }.child_3{
      /*border-style: dashed;*/
        position: fixed;
        display: block;
        /*top: 50%;*/
		top: 40%;
        /*left: 73%;*/
		left: 67%;
        width: 20%;
        /*height: 49%;*/
		height: 40%;
        text-align: center;
    
    }
    
      .scenari_title{
     /* border-style: dotted dashed solid double;*/
        position: fixed;
        display: block;
        top: 64%;
        left: 22%;
        width: 55%;
        height: 25%;
        text-align: center;
        font-family: 'CustomFont2', sans-serif;
        font-size: 2.4vw;
        color: white;
    }
    /* All delay classes will take half the time to start */
/*    :root {
      --animate-delay: 0.5s;
    }*/
    .parco{
      color: #374105;
      position: fixed;/*must be fixed to run animation */
    }.mare{
      color:  #003969;
      position: fixed;/*must be fixed to run animation */
    }.montagna{
      color:  #C8B987;
      position: fixed;/*must be fixed to run animation */
    }.gelato{
      color:   #82055F;
      position: fixed;/*must be fixed to run animation */
    } 







/*-------- NUOVO CODICE -----------*/

.iperbody{
	/*background-color: #f5f5f5 !important;*/
}
.container{
	width: 80%;
	max-width: 1000px;
	margin:0 auto;
	margin-top:30px;
}
.page-container {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
.page-header-wrapper,
.page-content-wrapper,
.page-footer-wrapper {
    box-sizing: border-box;
    display: table-row;
}
.page-content-wrapper { height: 100%; }
.page-header {
    padding: 0 10px;
    min-height: 50px;
    border-bottom: 1px solid #1c2229;
    background: #222a32;
}
.page-header:before,
.page-header:after {
    display: table;
    content: "";
}
.page-header:after { clear: both; }
.page-content {
    margin: auto;
    padding: 20px 10px;
    max-width: 100%;
	height:100%;
}
.page-footer {
    padding: 5px 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid #38444f;
    background: #222a32;
    font-size: 12px;
    line-height: 24px;
}
.page-footer a,
.page-footer a:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
}
.page-footer .separator {
    width: 1px;
    display: inline-block;
    height: 12px;
    vertical-align: -2px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.6);
}
.product-logo { float: left; }
.product-logo img { height: 50px; }
.company-logo {
    float: right;
    margin-top: 9px;
}
.company-logo img { height: 31px; }
.page-info-wrapper { margin-bottom: 15px; }
.page-info {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ccc;
    background: #f2f2f2;
}
.page-info-heading {
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 24px;
}
.page-info p,
.page-info ul { margin: 15px 0; }
.page-info ul { padding-left: 20px; }
.product-info-wrapper p {
    margin: 0 0 15px;
    padding: 0;
}
.product-info-wrapper { margin: 0 -10px; }
.product-info-wrapper:before,
.product-info-wrapper:after {
    display: table;
    content: "";
}
.product-info-wrapper:after { clear: both; }
.product-info-wrapper .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 0 10px;
}

.product-info-wrapper ul.links {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ddd;
    text-align: center;
}
.links > li {
    display: inline-block;
    float: left;
    vertical-align: top;
    width: 50%;
    margin-top: 15px;
}
.links > li > a {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
}
.links > li > a:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 5px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}
.blog:before { background-image: url(../img/blog.png); }
.forum:before { background-image: url(../img/forum.png); }
.knowledge-base:before { background-image: url(../img/knowledge-base.png); }
.facebook:before { background-image: url(../img/facebook.png); }
.twitter:before { background-image: url(../img/twitter.png); }
.linkedin:before { background-image: url(../img/linkedin.png); }

.fastcgi:before { background-image: url(../img/fastcgi.png); }
.php:before { background-image: url(../img/php.png); }
.ssi:before { background-image: url(../img/ssi.png); }

.product-info {
    border: 1px solid #bebebe;
    background: #fafafa;
}
.product-info-heading {
    margin: -1px;
    padding: 5px 11px;
    font-size: 16px;
    color: #fff;
    background: #09729f;
}
.product-info-content { padding: 10px; }

@media (max-width: 767px) {
    .page-header-wrapper { height: auto !important; }
}
@media (min-width: 480px) {
    .links > li { width: 33.33%; }
}
@media (min-width: 768px) {
    .page-header-wrapper { height: 51px; }
    .page-header {
        box-sizing: border-box;
        position: fixed;
        z-index: 300;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-height: 51px;
    }
    .page-header,
    .page-content,
    .page-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
    .page-info {
        box-sizing: border-box;
        min-height: 240px;
        padding: 20px 40px 20px 313px;
        border: 1px solid #ccc;
        background: #f2f2f2 url(../img/globe.png) no-repeat;
        background-size: 273px 240px;
    }
    .links > li { width: 33.33%; }
    .product-info-wrapper .col {
        width: 50%;
    }
}

.pathbar {
    display: inline-block;
    width: 100%;
    font-size: 12px;
}
.pathbar a {
    color: #2c2c2c;
    text-decoration: none;
    position: relative;
    float: left;
    margin-right: 3px;
    padding: 0 5px 0 15px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ebebeb;
}
.pathbar a:before {
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    content: "";
}
.pathbar a:after {
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 1;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ebebeb;
    content: "";
}
.pathbar a:hover { background: #2298cb; color: #fff; }
.pathbar a:hover:after { border-left-color: #2298cb; }
.pathbar a:first-child { padding-left: 10px; }
.pathbar a:first-child:before { display: none; }
.test h1 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    color: #444;
}
.test h2 {
    margin: 0 0 5px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #444;
}
.test p { margin: 12px 0; }
iframe { border: 1px solid #bebebe; }
.test-data table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.test-data td,
.test-data th { padding: 0; }
.test-data table > thead > tr > th,
.test-data table > tbody > tr > th,
.test-data table > tfoot > tr > th,
.test-data table > thead > tr > td,
.test-data table > tbody > tr > td,
.test-data table > tfoot > tr > td {
    padding: 6px 8px;
    line-height: 1.4;
    vertical-align: top;
    border-top: 1px solid #d6d6d6;
}
.test-data table > thead > tr:first-child > th,
.test-data table > tbody > tr:first-child > th,
.test-data table > tfoot > tr:first-child > th,
.test-data table > thead > tr:first-child > td,
.test-data table > tbody > tr:first-child > td,
.test-data table > tfoot > tr:first-child > td {
    border-top: 0;
}
.test-data table th {
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    background: #fafafa;
}
.start-video{
	text-align:center;
}
.btn-01{
 	-webkit-animation-delay: 0s, 7.5s ;
    -webkit-animation-duration: 8s, 2s;
    -webkit-animation-name: opac, bounce;
}
.btn-02{
 	-webkit-animation-delay: 0s, 8s ;
    -webkit-animation-duration: 8s, 2s;
    -webkit-animation-name: opac, bounce;
}
.btn-01a{
 	-webkit-animation-delay: 0s, 0s ;
    -webkit-animation-duration: 0s, 1s;
    -webkit-animation-name: opac2, bounce;
}
.btn-02a{
 	-webkit-animation-delay: 0s, 0s ;
    -webkit-animation-duration: 0s, 1s;
    -webkit-animation-name: opac2, bounce;
}
@keyframes opac{
	0%   { opacity: 0; }
	5%   { opacity: 0; }
	10%   { opacity: 0; }
	15%   { opacity: 0; }
	20%   { opacity: 0; }
	25%   { opacity: 0; }
	30%   { opacity: 0; }
	35%   { opacity: 0; }
	40%   { opacity: 0; }
	45%   { opacity: 0; }
	50%   { opacity: 0; }
	55%   { opacity: 0; }
	60%   { opacity: 0; }
	65%   { opacity: 0; }
	70%   { opacity: 0; }
	75%   { opacity: 0; }
	80%   { opacity: 0; }
	85%   { opacity: 0; }
	90%   { opacity: 0.5; }
	91%   { opacity: 0.55; }
	92%   { opacity: 0.6; }
	93%   { opacity: 0.65; }
	94%   { opacity: 0.7; }
	95%   { opacity: 0.75; }
	96%   { opacity: 0.8; }
	97%   { opacity: 0.85; }
	98%   { opacity: 0.9; }
	99%   { opacity: 0.95; }
  100% { opacity: 1; }
}
@-webkit-keyframes opac{
	0%   { opacity: 0; }
	5%   { opacity: 0; }
	10%   { opacity: 0; }
	15%   { opacity: 0; }
	20%   { opacity: 0; }
	25%   { opacity: 0; }
	30%   { opacity: 0; }
	35%   { opacity: 0; }
	40%   { opacity: 0; }
	45%   { opacity: 0; }
	50%   { opacity: 0; }
	55%   { opacity: 0; }
	60%   { opacity: 0; }
	65%   { opacity: 0; }
	70%   { opacity: 0; }
	75%   { opacity: 0; }
	80%   { opacity: 0; }
	85%   { opacity: 0; }
	90%   { opacity: 0.5; }
	91%   { opacity: 0.55; }
	92%   { opacity: 0.6; }
	93%   { opacity: 0.65; }
	94%   { opacity: 0.7; }
	95%   { opacity: 0.75; }
	96%   { opacity: 0.8; }
	97%   { opacity: 0.85; }
	98%   { opacity: 0.9; }
	99%   { opacity: 0.95; }
  100% { opacity: 1; }
}
@keyframes opac2{
	0%   { opacity: 0; }
	90%   { opacity: 0.5; }
	91%   { opacity: 0.55; }
	92%   { opacity: 0.6; }
	93%   { opacity: 0.65; }
	94%   { opacity: 0.7; }
	95%   { opacity: 0.75; }
	96%   { opacity: 0.8; }
	97%   { opacity: 0.85; }
	98%   { opacity: 0.9; }
	99%   { opacity: 0.95; }
  100% { opacity: 1; }
}
@-webkit-keyframes opac2{
	0%   { opacity: 0; }
	90%   { opacity: 0.5; }
	91%   { opacity: 0.55; }
	92%   { opacity: 0.6; }
	93%   { opacity: 0.65; }
	94%   { opacity: 0.7; }
	95%   { opacity: 0.75; }
	96%   { opacity: 0.8; }
	97%   { opacity: 0.85; }
	98%   { opacity: 0.9; }
	99%   { opacity: 0.95; }
  100% { opacity: 1; }
}
@keyframes bounce{
  		0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-100px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}

@-webkit-keyframes bounce /* Safari and Chrome */{
  		0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-100px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}
/*---------------------PAGINA INDEX-------------------------*/
.p-c-w{
	height: fit-content;
}
.s-v{
	height: auto;
	padding-top: 2%;
	padding-bottom:2%;
}
/*---------------------PAGINA SELECT-------------------------*/
.body-select, .body-select2, .body-start  {
  background-image: url('../img/elm/select/background.png');
  background-repeat: repeat;
  height: auto;
  min-height:auto;
}
.body-select2  {
  background-image: url('../img/elm/select/background-2.png');
}
.body-start {
	width: 100%;
	background-color: #a0c814;
	
}
.backto{
	position: absolute;
	left:20px;
	top:20px;
}
.cont-select{
	width:250px;
	margin:0 auto;
	height:100px;
}
.cont-btn{
	width: 100%;
}
.cont-elementare, .cont-drag, .cont-cruci, .cont-memo, .cont-ascol{
	text-align: center;
	width: 100%;
	position:relative;
	z-index:100;
}
.cont-elementare{
 	-webkit-animation-delay: 0s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-01;
}
.cont-drag{
 	-webkit-animation-delay: 0.1s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-02;
	width: 100%;
	height: 88px;
	background: url(/img/elm/select/01.png);
	background-position: center;
	background-size: 100%;
	display:block;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.cont-drag:hover{
	background: url(../img/elm/select/01hover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 95%;
}
.cont-cruci{
 	-webkit-animation-delay: 0.2s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-03;
	width: 100%;
	height: 87px;
	background: url(../img/elm/select/02.png);
	background-position: center;
	background-size: 100%;
	display:block;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.cont-cruci:hover{
	background: url(../img/elm/select/02hover-no.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 95%;
}
.cont-memo{
 	-webkit-animation-delay: 0.3s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-04;
	width: 100%;
	height: 87px;
	background: url(../img/elm/select/03.png);
	background-position: center;
	background-size: 100%;
	display:block;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.cont-memo:hover{
	background: url(../img/elm/select/03hover-no.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 95%;
}
.cont-ascol{
 	-webkit-animation-delay: 0.4s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-05;
	width: 100%;
	height: 133px;
	background: url(../img/elm/select/05.png);
	background-position: center;
	background-size:  100%;
	display:block;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.cont-ascol:hover{
	background: url(../img/elm/select/05hover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 95%;
}
@keyframes ani-01{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@-webkit-keyframes ani-01 /* Safari and Chrome */{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@keyframes ani-02{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@-webkit-keyframes ani-02 /* Safari and Chrome */{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@keyframes ani-03{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@-webkit-keyframes ani-03 /* Safari and Chrome */{
  		0%   { left: 50px;  }
        100% { left: 0px;  }
}
@keyframes ani-04{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@-webkit-keyframes ani-04 /* Safari and Chrome */{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@keyframes ani-05{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
@-webkit-keyframes ani-05 /* Safari and Chrome */{
  		0%   { left: 50px; }
        100% { left: 0px;  }
}
.cont-elementare img{
	z-index: 100;
	width:100%;	
}
.cont-drag img{
	width:259px;
}
.cont-cruci img{
	width:237px;
}
.cont-memo img{
	width:205px;
}
.cont-ascol img{
	width:201px;
}
.cont-titolo{
	margin:0 auto;
	height:180px;
	text-align: center;
}
.cont-titolo img{
	vertical-align: middle;
}
.section1, .section2, .section3, .section4 {
	width: 100%;
	margin: 0 auto;
	height: 0px;
	position: relative;
	padding: 0;
	left: 94px;
	z-index: 99;
}
.hscroll-line {
	height: 1px;
	position: absolute;
	overflow: hidden;
	width: 60px;
	transform: rotate(90deg);
	tranform-origin: 50% 50%;
}
.hscroll-line::before, .hscroll-line::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: ""
}
.hscroll-line:before {
	background: #788287;
}
.hscroll-line::after {
	background: #000;
	animation: move 3s infinite
}
 @keyframes move {
 0% {
 	transform: translate3d(-200%, 0, 0)
}
 60% {
 	transform: translate3d(100%, 0, 0)
}
 100% {
    transform: translate3d(100%, 0, 0)
}
}
.guy-1, .guy-2, .guy-3, .baloon{
	position:relative;
}
.guy-1 a img, .guy-2 a img, .guy-3 a img, .guy-1a a img, .guy-2a a img, .guy-3a a img{
	width:250px;
}
.baloon a img, .baloona a img{
	width:150px;
}
.guy-1{
	left: -230px;
    top: -360px;
	-webkit-animation-delay: 0s, 2.5s ;
    -webkit-animation-duration: 4s, 6s;
    -webkit-animation-name: tinLeftIn, shake1;
	-webkit-animation-iteration-count: 1, infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.guy-2{
	right: -200px;
    top: -720px;
	-webkit-animation-delay: 0s, 2.5s ;
    -webkit-animation-duration: 4s, 6s;
    -webkit-animation-name: tinRightIn, shake1;
	-webkit-animation-iteration-count: 1, infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.guy-3{
    right: -380px;
    top: -950px;
	-webkit-animation-delay: 0s, 2.5s ;
    -webkit-animation-duration: 4s, 6s;
    -webkit-animation-name: tinRightIn2, shake1;
	-webkit-animation-iteration-count: 1, infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.baloon{
    right: -423px;
    top: -1410px;
	-webkit-animation-delay: 0s ;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-name: twisterInDown;
	-webkit-animation-iteration-count: 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@keyframes shake1 {
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
	  opacity:1;
  }
  1% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
	  opacity:1;
  }
  2% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
	  opacity:1;
  }
  3% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  4% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  5% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  6% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  7% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  8% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  9% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  10% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
	  opacity:1;
  }
  10%, 20%, 30%; 40%, 50%, 60%, 70%, 80%; 90%, 100%{
    transform:none;
	opacity:1;
}
}
@-webkit-@keyframes shake1 {
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
	  opacity:1;
  }
  1% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
	  opacity:1;
  }
  2% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
	  opacity:1;
  }
  3% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  4% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  5% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  6% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  7% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  8% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  9% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
	  opacity:1;
  }
  10% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
	  opacity:1;
  }
  10%, 20%, 30%; 40%, 50%, 60%, 70%, 80%; 90%, 100%{
    transform:none;
	opacity:1;
}
}

@-webkit-keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100% }

@keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100%  }

@-webkit-keyframes tinRightIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(5000%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100%  }

@keyframes tinRightIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(5000%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100% }

@-webkit-keyframes tinRightIn2 {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(8500%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100%  }

@keyframes tinRightIn2 {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(8500%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1, 1) translateX(0); }
  60%,
  80%,
  100% }

@-webkit-keyframes twisterInDown {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%); }
  30% {
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%); }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) rotate(0deg) translateY(0%); } }

@keyframes twisterInDown {
	0%{ opacity: 0;}
	10%{ opacity: 0;}
	11%{ opacity: 0;}
	12%{ opacity: 0;}
	13%{ opacity: 0;}
	14%{ opacity: 0;}
	15%{ opacity: 0;}
	16%{ opacity: 0;}
	17%{ opacity: 0;}
	18%{ opacity: 0;}
	19%{ opacity: 0;}
	20%{ opacity: 0;}
	21%{ opacity: 0;}
	22%{ opacity: 0;}
	23%{ opacity: 0;}
	24%{ opacity: 0;}
	25%{ opacity: 0;}
	26%{ opacity: 0;}
	27%{ opacity: 0;}
	28%{ opacity: 0;}
	29%{ opacity: 0;}
	30%{ opacity: 0;}
	35%{ opacity: 0;}
	40%{ opacity: 0;}
	45%{ opacity: 0;}
	50%{ opacity: 0;}
	55%{ opacity: 0;}
	60%{ opacity: 0;}
	65%{ opacity: 0;}
	66%{ opacity: 0;}
	67%{ opacity: 0;}
	68%{ opacity: 0;}
	69%{ opacity: 0;}
	70%{ opacity: 0;}
	80% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%); }
  90% {
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%); }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) rotate(0deg) translateY(0%); } }
/*---------------------FINE PAGINA SELECT-------------------------*/

/*---------------------PAGINA SELECT 2-------------------------*/
.cont-play {
	text-align: center;
	width: 100%;
	position:relative;
	z-index:100;
	margin-bottom: 257px;
}
.cont-play{
	margin-top:30px;
 	-webkit-animation-delay: 0s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: ani-01;
}
.cont-play img{
	width: 90%;
}
.cont-titolo2{
	margin:0 auto;
	width: 50%;
	margin-top:14px;
	-webkit-animation-delay: 0s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: tinUpIn;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@-webkit-keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0); }
  60%,
  80%,
  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0); } }

@keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%); }
  50%,
  70%,
  90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0); }
  60%,
  80%,
  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0); } }
.cont-titolo2 img{
	width: 100%;
}

.guy-1a, .guy-2a, .guy-3a, .baloona, .guy-1name, .guy-2name, .guy-3name{
	position:relative;
}
.guy-1a{
	left: -230px;
   top: -445px;
}
.guy-2a{
	right: -200px;
   top: -805px;
}
.guy-3a{
   right: -380px;
   top: -1035px;
}
.guy-1name{
	left: -240px;
    top: -1400px;
	-webkit-animation-delay: 0s, 3s ;
    -webkit-animation-duration: 4s, 7s;
    -webkit-animation-name: tinLeftIn, shake1;
	-webkit-animation-iteration-count: 1, 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.guy-2name{
	right: -200px;
    top: -1460px;
		-webkit-animation-delay: 0s, 5s ;
    -webkit-animation-duration: 4s, 10s;
    -webkit-animation-name: tinRightIn, shake1;
	-webkit-animation-iteration-count: 1, 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.guy-3name{
    right: -380px;
    top: -1410px;
		-webkit-animation-delay: 0s, 8s ;
    -webkit-animation-duration: 4s, 14s;
    -webkit-animation-name: tinRightIn2, shake1;
	-webkit-animation-iteration-count: 1, 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.guy-1name img, .guy-2name img, .guy-3name img{
	width: 60px;
}
.baloona{
	right: -423px;
   top: -1495px;
	-webkit-animation-delay: 0s ;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: swashIn;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0); }
  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9); }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1); } }

@keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0); }
  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9); }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1); } }

/*---------------------PAGINA LAST-------------------------*/

.container-last{
	width:1000px;
	margin:0 auto;
	font-family: 'CustomFont2', sans-serif;
	overflow: hidden;
   padding: 15px;
	margin-top: 20px;
}
.left-last{
	width: 470px;
	float: left;
}
.right-last{
	width: 470px;
	float: right;
	margin-top: 50px;
}
.right-last img{
	height: 200px;
}
.right-last hastag{
	color:#a0c51f;
	font-size:30px;
	width: 100%;
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
}
.right-last credits{
	font-size:15px;
	width: 100%;
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
	font-weight: 300;
	font-family: 'CustomFont3', sans-serif;
}
.left-1{
	font-size:23px;
	line-height:1.3;
}
.left-1 .hallo{
	margin:0 auto;
	width: 100%;
	text-align:center;
	margin-top: 50px;
	margin-bottom: 50px;
}
.torna {
   display: flex;
   align-items:center;
	color:#788287;
	font-size: 22px;
   width: 100%;
}
.torna a {
   text-decoration: none;
	color:#788287;
}
.torna img {
   height: 100px;
}
.torna a span{
    float: left;
    margin-top: 32px;
}
.videoWrapper {
  position: relative;
  padding-bottom: 42.25%;
}
.videoWrapper .video-modal-poster img {
  position: absolute;
  width: 102%;
  height: 102%;
  top: 0;
  left: 0;
  z-index: 10;
	margin-left: -1px;
	margin-top: -1px;
}
#btnControl {
    display: block;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
	display: none;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}