html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }
    html, body {
        height: 100%;
    }
    canvas {
        display: block;
    }
    body {
        margin: 0;
    }
    #unity-container {
        width: 100%;
        height: 100%;
    }
    #unity-canvas {
        width: 100%;
        height: 100%;
        background: #222222;
    }
    #loading-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #unity-loading-bar {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #unity-logo {
        text-align: center;
        margin-bottom: 40px;
    }
    #unity-logo img {
        max-width: 80%;
    }
    #unity-progress-bar-empty {
        width: 30%;
        height: 24px;
        margin: 10px 20px 20px 10px;
        text-align: left;
        border: 2px solid #f7e4c8;
        padding: 2px;
    }
    #unity-progress-bar-full {
        width: 0%;
        height: 100%;
        background: #ff9955;
    }
    .light #unity-progress-bar-empty {
        border-color: black;
    }
    .light #unity-progress-bar-full {
        background: black;
    }

    #unity-fullscreen-button {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 38px;
        height: 38px;
        background: url('fullscreen-button.png') no-repeat center;
        background-size: contain;
    }

    .spinner,
    .spinner:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
    }
    .spinner {
    margin: 10px;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    transform: translateZ(0);
    animation: spinner-spin 1.1s infinite linear;
    }
    @keyframes spinner-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }

  body
        {
            font-family: Roboto, sans-serif;
            color: #0f3c4b;
        }
  .container
        {
            width: 100%;
            max-width: 680px; /* 800 */
            text-align: center;
            margin: 0 auto;
        }

  .container h1
            {
                font-size: 42px;
                font-weight: 300;
                color: #0f3c4b;
                margin-bottom: 40px;
            }
            .container h1 a:hover,
            .container h1 a:focus
            {
                color: #39bfd3;
            }

            .container nav
            {
                margin-bottom: 40px;
            }
                .container nav a
                {
                    border-bottom: 2px solid #c8dadf;
                    display: inline-block;
                    padding: 4px 8px;
                    margin: 0 5px;
                }
                .container nav a.is-selected
                {
                    font-weight: 700;
                    color: #39bfd3;
                    border-bottom-color: currentColor;
                }
                .container nav a:not( .is-selected ):hover,
                .container nav a:not( .is-selected ):focus
                {
                    border-bottom-color: #0f3c4b;
                }

            .container footer
            {
                color: #92b0b3;
                margin-top: 40px;
            }
                .container footer p + p
                {
                    margin-top: 1em;
                }
                .container footer a:hover,
                .container footer a:focus
                {
                    color: #39bfd3;
                }

    #holder.hover { border: 10px dashed #0c0 !important; }
    #holder.out { border: 10px dashed rgb(190, 190, 190) !important; }
    #holder { border: 10px dashed rgb(190, 190, 190) !important; }

    .box__dragndrop,
    .box__uploading,
    .box__success,
    .box__error {
    display: none;
    }

    .box {
        font-size: 1.25rem; /* 20 */
        background-color: #c8dadf;
        position: relative;
        padding: 50px 20px;
    }
    .box.is-dragover {
        outline-offset: -20px;
        outline-color: #c8dadf;
        background-color: #fff;
    }
    .box.has-advanced-upload
            {
                outline: 2px dashed #92b0b3;
                outline-offset: -10px;

                -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
                transition: outline-offset .15s ease-in-out, background-color .15s linear;
            }
            .box.is-dragover
            {
                outline-offset: -20px;
                outline-color: #c8dadf;
                background-color: #fff;
            }
                .box__dragndrop,
                .box__icon
                {
                    display: none;
                }
                .box.has-advanced-upload .box__dragndrop
                {
                    display: inline;
                }
                .box.has-advanced-upload .box__icon
                {
                    width: 100%;
                    height: 80px;
                    fill: #92b0b3;
                    display: block;
                    margin-bottom: 40px;
                }

                .box.is-uploading .box__input,
                .box.is-success .box__input,
                .box.is-error .box__input
                {
                    visibility: hidden;
                }

                .box__uploading,
                .box__success,
                .box__error
                {
                    display: none;
                }
                .box.is-uploading .box__uploading,
                .box.is-success .box__success,
                .box.is-error .box__error
                {
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    left: 0;

                    -webkit-transform: translateY( -50% );
                    transform: translateY( -50% );
                }
                .box__uploading
                {
                    font-style: italic;
                }
                .box__success
                {
                    -webkit-animation: appear-from-inside .25s ease-in-out;
                    animation: appear-from-inside .25s ease-in-out;
                }
                    @-webkit-keyframes appear-from-inside
                    {
                        from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
                        75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
                        to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
                    }
                    @keyframes appear-from-inside
                    {
                        from	{ transform: translateY( -50% ) scale( 0 ); }
                        75%		{ transform: translateY( -50% ) scale( 1.1 ); }
                        to		{ transform: translateY( -50% ) scale( 1 ); }
                    }

                .box__restart
                {
                    font-weight: 700;
                }
                .box__restart:focus,
                .box__restart:hover
                {
                    color: #39bfd3;
                }

                .js .box__file
                {
                    width: 0.1px;
                    height: 0.1px;
                    opacity: 0;
                    overflow: hidden;
                    position: absolute;
                    z-index: -1;
                }
                .js .box__file + label
                {
                    max-width: 80%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    display: inline-block;
                    overflow: hidden;
                }
                .js .box__file + label:hover strong,
                .box__file:focus + label strong,
                .box__file.has-focus + label strong
                {
                    color: #39bfd3;
                }
                .js .box__file:focus + label,
                .js .box__file.has-focus + label
                {
                    outline: 1px dotted #000;
                    outline: -webkit-focus-ring-color auto 5px;
                }
                    .js .box__file + label *
                    {
                        /* pointer-events: none; */ /* in case of FastClick lib use */
                    }

                .no-js .box__file + label
                {
                    display: none;
                }

                .no-js .box__button
                {
                    display: block;
                }
                .box__button
                {
                    font-weight: 700;
                    display: block;
                    padding: 8px 16px;
                    margin: 40px auto 0;
                }
  .box__button:hover,
  .box__button:focus{
    background-color: #0f3c4b;
  }
  .video {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    /*display: none;*/
    background-color: #e5edf1;

  }

  .header{
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
    width: 100%;
            max-width: 680px;
    margin: 0 auto;

  }
  .verify{
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .rule{
    display: inline-block;
  }
  .rules{
    padding-top: 25px;
  }
  #ruleVideo{
    padding-left: 50px;
  }
  li{
    text-align: left;
  }

  button:enabled {
    color: #e5edf1;
            background-color: #39bfd3;
  }

  button:disabled {
    color: #555;
            background-color: #aaa;
  }
  .cancel{
    padding-top: 10px;
    display: flex;
    justify-content: center;
  }
  #close{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-weight: bold;
    /*position: absolute;
    font-size: 18px;
    font-weight: bold;
    right: 10px;*/
    /*top: 10px;
    float: right;*/
    height: 20px;
    width: 104px;
    color: #a5a5a5;
  }
  #close:hover{
    /*background-color: #0f3c4b7a;*/
    color: #39bfd3;
  }
  .border{
    color: #0f3c4b;
    /*background-color: #c8dadf;*/
    display: inline-block;
    width: 100%;
  }
  .barProgress{
    color: rgb(36, 41, 36);
    background-color: #55555561;
    height: 10px;
    font-size: 8px;
    width: 0%;
  }
  .space,
  .spaceMax{
    display: inline-block;
    height: 20px;
  }
  .space{
    width: 20%;
  }
  .spaceMax{
    width: 60%;
  }

  .titleScene,
  .titleVideo,
  .titleImage,
  .titleAudio,
  .titleCSV{
    display: none;
    padding-bottom: 10px;
    font-size: 20px;
  }


  .header.ES,
  .header.EN,
  .header.FR
  {
    display: none;
  }
  .video.isScene.ES .header.ES,
  .video.isScene.EN .header.EN,
  .video.isScene.FR .header.FR
  {
    display: block;
  }
  .video.isImage.ES .header.ES,
  .video.isImage.EN .header.EN,
  .video.isImage.FR .header.FR
  {
    display: block;
  }
  .video.isVideo.ES .header.ES,
  .video.isVideo.EN .header.EN,
  .video.isVideo.FR .header.FR
  {
    display: block;
  }
  .video.isAudio.ES .header.ES,
  .video.isAudio.EN .header.EN,
  .video.isAudio.FR .header.FR
  {
    display: block;
  }
  .video.isCSV.ES .header.ES,
  .video.isCSV.EN .header.EN,
  .video.isCSV.FR .header.FR
  {
    display: block;
  }

  .video.isScene .titleScene,
  .video.isImage .titleImage,
  .video.isVideo .titleVideo,
  .video.isAudio .titleAudio,
  .video.isCSV .titleCSV
  {
    display: block;
  }


  .rulesScene,
  .rulesVideo,
  .rulesImage,
  .rulesAudio,
  .rulesCSV{
    display: none;
  }
  
  .video.isScene .rulesScene,
  .video.isImage .rulesImage,
  .video.isVideo .rulesVideo,
  .video.isAudio .rulesAudio,
  .video.isCSV .rulesCSV
  {
    display: block;
  }
  .buttonScene,
  .buttonVideo,
  .buttonImage,
  .buttonAudio,
  .buttonCSV{
    display: none;
  }
  
  .video.isScene .buttonScene,
  .video.isImage .buttonImage,
  .video.isVideo .buttonVideo,
  .video.isAudio .buttonAudio,
  .video.isCSV .buttonCSV
  {
    display: block;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }