html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width:100%;
    overflow:hidden;
    font-family: Arial, sans-serif;
}

/*---------------------------------------------*/
a {
    /*	font-family: Ubuntu-Regular;*/
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
    color: #fff;
}
p {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}

.hidden{display:none;}

#chat-application {
    right: calc(50% - 640px + 135px) !important;
    bottom: calc(100% - 720px ) !important;
    position:absolute !important;
}
#playerElement{background: black;}


#error {position:absolute;width:100%;height:20%;bottom:0;left:0;background: rgba(0,0,0,0);z-index:100;}
#error p {color: white;
    width: 40%;
    height: auto;
    margin-top: 2.5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.2em;
  font-size:.9em;}

#play, .btnPlay {
   /* background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_play.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%;
    position: absolute;
    left: 2%;
    bottom:3%;
    cursor: pointer;
    max-height:16px;max-width:16px;
}
#pause,  .btnPause {
    /*background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_pause.png) no-repeat;
    background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_pause.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%;
    position: absolute;
    left: 2%;
    bottom:3%;
    cursor: pointer;
    max-height:16px;max-width:16px;
}
#volumeOn, .AudioOn {
    /*background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_volume-on.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%;
    position: absolute;
    right: 19%;
    bottom:3%;
    cursor: pointer;
    max-height:16px;max-width:16px;
}
#volumeOff, .AudioOff{
   /* background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_volume-off.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%;
    position: absolute;
    right: 19%;
    bottom:3%;
    cursor: pointer;
    max-height:16px;max-width:16px;
}
#volumeController{width:8%;position:absolute;height:2%;bottom:14px;right:10%;max-height:16px;}
#volumeController .volume {
background: #000;
width: 100%;
position: absolute;
height: 40%;
    border-radius: 5px;}
#volumeController .volume .buffer{background: #fff;
    width: 80%;border-radius: 5px;height:100%;}
#volumeController .slider {
    -webkit-appearance: none;
    position:absolute;
    width: 100%;
    height: 40%;
    border-radius: 5px;
    background: rgba(0,0,0,0);
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

#volumeController .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    max-height:16px;max-width:16px;
}

#volumeController .slider::-moz-range-thumb {
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    max-height:16px;max-width:16px;
}
input[type=range]::-webkit-slider-runnable-track, input[type=range]:focus::-webkit-slider-runnable-track ,input[type=range]::-moz-range-track, input[type=range]::-ms-track {
    background: #rgba(255,0,0,0.7);
}

#fullscreen, .btnFullSreen {
   /* background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_fullscreen.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%;max-height:16px;max-width:16px;
    position: absolute;
    right: 5.8%;
    bottom:3%;
    cursor: pointer;
}
#fullscreenBack, .btnFullSreenBack {
    /*background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_fullscreen-back.png) no-repeat;*/
    background-size: contain;
    width: 3%;
    height: 5.35%; max-height:16px;max-width:16px;
    position: absolute;
    right: 5.8%;
    bottom:3%;
    cursor: pointer;
}
#logoShaa {
    background: url(https://d116823e9702b592cff7-99985e791a700f8bb4b44046f22bf5af.ssl.cf3.rackcdn.com/v3.0/live/thirdparty/cri/images/cri_logoShaa.png) no-repeat;
    background-size: contain;
    width: 6.5%;
    height: 3.47%;
    position: absolute;
    left: 10%;
    bottom: 2.7%;
    display:none;
}
#overlays-container {width:100%;height:100%;position:absolute;top:0;left:0;opacity:1;  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    /*background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));*/
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 82%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */

}
 #overlays-container > div {
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#overlays-container svg path {fill:#FFF;}
#overlays-container.hidden {opacity:0; }
.poster-play{width: 18%;
    height: 9%;
    position: absolute;
    margin: auto;
    top: 40%;
    left: 0;
    right: 0%;
    cursor:pointer;
 bottom: 0;
  background: url('https://028f77843683302d975d-852738fe59eaf20c31c385f00dd40231.ssl.cf3.rackcdn.com/resources/images/gse_btnPlay.jpg') no-repeat;

    background-size:contain;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .poster-play svg{display:none;}
    .poster-play:hover{opacity:0.7;}
/*#overlays-container > div:not(#login):hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#overlays-container .buttons, .buttons {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 5000;

}*/

 .btnSettings {
     width: 3%;
    height: 5.35%;
    position: absolute;
    right: 2%;
    bottom:3%;
    cursor: pointer;
   /*  background: url(https://fd1c4a1f9b61c2aaf118-5d297587fea1f0d9ae6c08d6626dd106.ssl.cf3.rackcdn.com/ducati/images/settings.png) no-repeat;*/
     background-size: contain;
     max-height:16px;max-width:16px;
}
div[class^="btn"]:hover{
    opacity:0.7;
    cursor:pointer;
}
#settings #selector{
position: absolute;
bottom: -7%;
background: rgba(0,0,0,0.7);
color: white;
padding: 1%;
right: 1%;
opacity:0; filter: alpha(opacity=0);visibility:hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.arrow {
    width: 0;
    height: 0;
    margin-left: 25%;
    border-right: .5vw solid transparent;
    border-left: .5vw solid transparent;
    border-top: .5vw solid rgba(0,0,0,0.7);
    position: absolute;
    bottom: -5.6%;
    right: 2%;
    opacity:0; filter: alpha(opacity=0);visibility:hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#settings.open #selector, #settings.open .arrow{
    opacity:1; filter: alpha(opacity=1);visibility:visible;
}
#settings.open #selector{bottom: 10%;}
#settings.open .arrow{bottom: 9.1%;}
#settings #selector.hidden{right:-100%;opacity:0; filter: alpha(opacity=0);visibility:hidden;}
#settings #selector ul li a{
    color:white;
    text-decoration: none;text-transform: capitalize;

}
#settings #selector ul li a:hover{
    opacity:0.7; filter: alpha(opacity=70);
}
#poweredSHAA {
    background: url(https://05e0774d6902e064b17c-371bd512ab4404d20c61c512ed90bb10.ssl.cf3.rackcdn.com/resources/images/vm_powered.svg) no-repeat;
    position: absolute;
    top: 1.8%;
    right: 1.8%;
    width: 9.21%;
    height: 2.14%;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    display:none;
}

#startscreen{
  /*background-image: url('https://080b5031902153a40b29-22a12b5a252a1e723de0fd59ccceee88.ssl.cf3.rackcdn.com/resources/images/ai_startscreen.jpg');*/
  background-image: url('https://028f77843683302d975d-852738fe59eaf20c31c385f00dd40231.ssl.cf3.rackcdn.com/resources/images/00_CARTELLO INIZIALE.jpg');
    width: 100%;
    background-size: contain;
    height: 100%;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
    background-position: center right;z-index:10;
  }

  .live{position: absolute;
    bottom: 2%;
    left: 6%;
    background: red;
    padding: 5px;
    color: white;
    font-size: 13px;
    border-radius: 6px;
    width: 55px;
    z-index: 1000;
    max-width: 70px;
    height: 24px;
    }


      #endscreen,#finalscreen {
        z-index:10;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
      }
      /*
      #finalscreen{z-index:11;}
      .it #endscreen{
        background-image: url('https://080b5031902153a40b29-22a12b5a252a1e723de0fd59ccceee88.ssl.cf3.rackcdn.com/resources/images/ai_choiceScreen.jpg');

      }
      .en #endscreen{
        background-image: url('https://080b5031902153a40b29-22a12b5a252a1e723de0fd59ccceee88.ssl.cf3.rackcdn.com/resources/images/ai_choiceScreen_en.jpg');

      }
      .it #finalscreen{
        background-image: url('https://080b5031902153a40b29-22a12b5a252a1e723de0fd59ccceee88.ssl.cf3.rackcdn.com/resources/images/ai_endscreen.jpg');

      }
      .en #finalscreen{
        background-image: url('https://080b5031902153a40b29-22a12b5a252a1e723de0fd59ccceee88.ssl.cf3.rackcdn.com/resources/images/ai_endscreen_en.jpg');
      }*/
      #endscreen.hidden,  #finalscreen.hidden{
      opacity:0; filter: alpha(opacity=0);visibility:hidden;
      }
      #endscreen .btn{
        position: relative;
        height: 46.1%;
    width: 17%;
    margin: 27% 1.5% 0 1.5%;
    float:left;
    color:white;
    text-indent:-9999px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;

      }
      #finalscreen .btn{
        position: relative;
    width: 40%;
    height: 21%;
    margin: 5% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    left: 55%;
      }
      #finalscreen .btn a{
        display: block;
        width: 100%;
        height: 100%;
      }


.shaa-caption {
    position: absolute;
    width: 10.62%;
    height: 13.5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    right: 0;
    top: 39.5%;
}
.shaa-caption a{
  display: block;
  width: 100%;
  height: 100%;
}
.shaa-caption a img{
  width: 100%;
  height: auto;
}
#audioTrackController, #abrController{position:absolute;opacity:0; filter: alpha(opacity=0);visibility:hidden;right:-10%;bottom: 10%;background: rgba(0,0,0,0.7);padding:1%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
#audioTrackController.visible, #abrController.visible{opacity:1; filter: alpha(opacity=100);visibility:visible;right:1%;}
#abrController{right:0}
#audioTrackController li, #abrController li{color:white;padding:5px;cursor:pointer;font-size:.8em;}
#audioTrackController li.selected, #abrController li.selected{color:red;}

#waiting{position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.7)
}

.ball-clip-rotate-multiple {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1vw;
  height: 1vw;
  position: absolute;
  left: 0;
  right: 0;
}
@keyframes rotate {
  0% {
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1)
  }

  50% {
      -webkit-transform: rotate(180deg) scale(.6);
      transform: rotate(180deg) scale(.6)
  }

  100% {
      -webkit-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1)
  }
}


.ball-clip-rotate-multiple>div {
  position: absolute;
  left: -40px;
  top: -40px;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 100%;
  height: 70px;
  width: 70px;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  animation: rotate 1s 0s ease-in-out infinite
}

.ball-clip-rotate-multiple>div:last-child {
  display: inline-block;
  top: -20px;
  left: -20px;
  width: 30px;
  height: 30px;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  border-color: #fff transparent;
  -webkit-animation-direction: reverse;
  animation-direction: reverse
}

.loader-07 {
  border: 0 solid transparent;
  border-radius: 50%;
  position: relative;
  font-size:4em;
  left: 25px;
    top: -2px;

}
.loader-07:before, .loader-07:after {
  content: "";
  border: 0.2em solid currentcolor;
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader-07 2s linear infinite;
          animation: loader-07 2s linear infinite;
  opacity: 0;
}
.loader-07:before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.loader-07:after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes loader-07 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes loader-07 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@media (max-width: 1279px) {
  /*  #box{width:100vw !important;height:56.25vw !important;}*/
    #chat-application {
        right: 13.7vw !important;
        bottom: calc(100% - 56.25vw)!important;
        top:auto !important;
    }
}
@media (max-width: 640px) {
    #error p{font-size:.5em !important;}
}
#controls{

}

@media (max-width: 640px) {
    .btnPlay, .btnPause,  .btnSettings, .btnFullSreen, .btnFullSreenBack, .AudioOn, .AudioOff {bottom:10px;height:20px;width:20px;}
    .btnFullSreen, .btnFullSreenBack{right:8.3%;}
    #settings.open #selector, #audioTrackController, #abrController {bottom:20%;}
    .live{width: 55px;
    padding-bottom: 1%;}
}