* {
    box-sizing: border-box;
}

body {
    overflow:hidden;
    background-color: white;
    color: #000;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* common styles (begin) */
.page {
    display: none !important;
}
.displayed {
    display: block !important;
}
/* common styles (end) */

/* Connected & Connected Loading pages (begin) */
.fullpage-bg {
    background-color: #f6f6f6;
    width: 100%;
    height: 100%;
}
.fullpage-bg * {
    box-sizing: content-box !important;
}
.header-headband {
    background-color: #ffffff;
    width: 100%;
    height: 14%;
}

.header-headband .logo {
    width: 100%;
    height: 100%;
    margin-left: 6%;

    background-size: auto 40%;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-image: url('../images/sncr-logo@2x.png');
}

/* @2x Images (Pixel Ratio of 1.25+) */
@media  (-o-min-device-pixel-ratio: 5/4),
        (-webkit-min-device-pixel-ratio: 1.25),
        (min--moz-device-pixel-ratio: 1.25),
        (min-device-pixel-ratio: 1.25),
        (min-resolution: 1.25dppx) {
    .header-headband .logo {background-image:url('../images/sncr-logo@2x.png');}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media  (-o-min-device-pixel-ratio: 9/4),
        (-webkit-min-device-pixel-ratio: 2.25),
        (min--moz-device-pixel-ratio: 2.25),
        (min-device-pixel-ratio: 2.25),
        (min-resolution: 2.25dppx) {
    .header-headband .logo {background-image:url('../images/sncr-logo@3x.png');}
}

.content-headband {
    display: table;
    position: relative;
    width: 100%;
    height: 86%;
}
.content-headband > div {
    display: none;
}
.content-headband > div.displayed {
    display: table-cell !important;
}
.content-headband .headband .content-welcome {
    float: left;
    width: 50%;
    height: 100%;
}
.content-headband .headband .content-welcome > div {
    float: right;
    width: 59%;
    height: 57%;
    padding: 21% 8% 22% 0;
    text-align: center;
}
.content-headband .headband .content-welcome img {
    object-fit: contain;
    width: 32%;
}
.content-headband .headband .content-welcome .content-welcome-title {
    width: 100%;
    margin: 12% 0 2% 0;
    line-height: 1.43;
    font-family: Roboto;
    font-weight: 600;
    font-size: 1.2em;
    color: #0066cc;
}
.content-headband .headband .content-welcome .content-welcome-text {
    width: 100%;
    line-height: 1.67;
    font-family: Roboto;
    font-weight: 600;
    font-size: 1.5em;
    color: #333333;
}
.content-headband .headband .content-device {
    float: right;
    width: 50%;
    height: 100%;
}
.content-headband .headband .content-device > img {
    object-fit: contain;
    width: 32%;
    padding: 12% 0 0 20%;
}
.content-headband .loading > div {
    width: 100%;
}
.content-headband .loading .loading-cloud-logo {
    height: 37%;/*Should be equal to the top property of #thumbnail .loading-loader*/
    padding-top: 5%;
    text-align: center;
}
.content-headband .loading .loading-cloud-logo img {
    object-fit: contain;
    width: 5%;
}
.content-headband .loading .loading-cloud-logo span {
    display: inline-block;
    vertical-align: top;
    margin-left: 2%;
    line-height: 2.7;
    font-family: NHaasGroteskTXStd-75Bd;
    font-weight: 400;
    font-size: 1.5em;
    color: #0077be;
}
.content-headband .loading-loader {
    height: 20%;
    position: relative;
}
.content-headband .loading-loader img {
    display: block;
    height: 30%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.content-headband .loading .loading-text {
    height: 43%;
    padding-top: 8%;
    text-align: center;
    font-family: NHaasGroteskTXStd-65Md;
    font-weight: 400;
    font-size: 1.3em;
    color: #262626;
}
/* Connected & Connected Loading pages (end) */

/* Video Thumbnail page (begin) */
#thumbnail {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
#thumbnail .thumbnail {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#thumbnail .play-button {
    display: none;
    background-image: url('../images/video-play.png');
    background-size: auto 18%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
#thumbnail .loading {
    display: none;
    width: 100%;
    height: 86%;
    position:absolute;
    bottom: 0;
}
#thumbnail .loading-loader {
    height: 20%;
    top: 37%;/*Should be equal to the height of .content-headband .loading .loading-cloud-logo*/
    position: relative;
}
#thumbnail .loading-loader img {
    display: block;
    height: 30%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* @2x Images (Pixel Ratio of 1.25+) */
@media  (-o-min-device-pixel-ratio: 5/4),
        (-webkit-min-device-pixel-ratio: 1.25),
        (min--moz-device-pixel-ratio: 1.25),
        (min-device-pixel-ratio: 1.25),
        (min-resolution: 1.25dppx) {
    #thumbnail .play-button {background-image:url('../images/video-play@2x.png');}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media  (-o-min-device-pixel-ratio: 9/4),
        (-webkit-min-device-pixel-ratio: 2.25),
        (min--moz-device-pixel-ratio: 2.25),
        (min-device-pixel-ratio: 2.25),
        (min-resolution: 2.25dppx) {
    #thumbnail .play-button {background-image:url('../images/video-play@3x.png');}
}
/* Video Thumbnail page (end) */

/* Messages (begin) */
#message span {
    background: #fff;
    opacity: 0.8;
    border-radius: 0.8em;
    padding: 2.5% 7%;
}
/* Messages (end) */

#pictures {
    width: 100%;
    height: 100%;
}

.picture-container {
    opacity: 1;
    background-color: #fff;

    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
         -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
}

/*** FADE OUT ANIMATION ***/
@-webkit-keyframes fadeOut {
    to { opacity: 0; }
}
@-moz-keyframes fadeOut {
    to { opacity: 0; }
}
@-o-keyframes fadeOut {
    to { opacity: 0; }
}
@keyframes fadeOut {
    to { opacity: 0; }
}
.picture-container.fadeOut {
    -webkit-animation-name: fadeOut;
       -moz-animation-name: fadeOut;
         -o-animation-name: fadeOut;
            animation-name: fadeOut;
}

/*** ROTATE ANIMATION ***/
@-webkit-keyframes rotateZoomOut {
    to { -webkit-transform: rotate(360deg) scale(0); }
}
@-moz-keyframes rotateZoomOut {
    to { -moz-transform: rotate(360deg) scale(0); }
}
@-o-keyframes rotateZoomOut {
    to { -o-transform: rotate(360deg) scale(0); }
}
@keyframes rotateZoomOut {
    to { transform: rotate(360deg) scale(0); }
}
.picture-container.rotateZoomOut {
    -webkit-animation-name: rotateZoomOut;
       -moz-animation-name: rotateZoomOut;
         -o-animation-name: rotateZoomOut;
            animation-name: rotateZoomOut;
    background-color: transparent;
}

/*** ZOOM_CORNER ANIMATION ***/
@-webkit-keyframes zoomCornerOut {
    from { -webkit-transform: scale(1,1); -webkit-transform-origin: bottom left;}
    to { -webkit-transform: scale(0,0); -webkit-transform-origin: bottom left;}
}
@-moz-keyframes zoomCornerOut {
    from { -moz-transform: scale(1,1); -moz-transform-origin: bottom left;}
    to { -moz-transform: scale(0,0); -moz-transform-origin: bottom left;}
}
@-o-keyframes zoomCornerOut {
    from { -o-transform: scale(1,1); -o-transform-origin: bottom left;}
    to { -o-transform: scale(0,0); -o-transform-origin: bottom left;}
}
@keyframes zoomCornerOut {
    from { transform: scale(1,1); transform-origin: bottom left;}
    to { transform: scale(0,0); transform-origin: bottom left;}
}
.picture-container.zoomCornerOut {
    -webkit-animation-name: zoomCornerOut;
       -moz-animation-name: zoomCornerOut;
         -o-animation-name: zoomCornerOut;
            animation-name: zoomCornerOut;
    background-color: transparent;
}

@-webkit-keyframes zoomCornerIn {
    from { -webkit-transform: scale(0,0); -webkit-transform-origin: top right;}
    to { -webkit-transform: scale(1,1); -webkit-transform-origin: top right;}
}
@-moz-keyframes zoomCornerIn {
    from { -moz-transform: scale(0,0); -moz-transform-origin: top right;}
    to { -moz-transform: scale(1,1); -moz-transform-origin: top right;}
}
@-o-keyframes zoomCornerIn {
    from { -o-transform: scale(0,0); -o-transform-origin: top right;}
    to { -o-transform: scale(1,1); -o-transform-origin: top right;}
}
@keyframes zoomCornerIn {
    from { transform: scale(0,0); transform-origin: top right;}
    to { transform: scale(1,1); transform-origin: top right;}
}
.picture-container.zoomCornerIn {
    -webkit-animation-name: zoomCornerIn;
       -moz-animation-name: zoomCornerIn;
         -o-animation-name: zoomCornerIn;
            animation-name: zoomCornerIn;
    background-color: transparent;
}

/*** ZOOM_CENTER ANIMATION ***/
@-webkit-keyframes zoomCenterOut {
    from { -webkit-transform: scale(1,1); opacity: 1;}
    to { -webkit-transform: scale(0,0); opacity: 0;}
}
@-moz-keyframes zoomCenterOut {
    from { -moz-transform: scale(1,1); opacity: 1;}
    to { -moz-transform: scale(0,0); opacity: 0;}
}
@-o-keyframes zoomCenterOut {
    from { -o-transform: scale(1,1); opacity: 1;}
    to { -o-transform: scale(0,0); opacity: 0;}
}
@keyframes zoomCenterOut {
    from { transform: scale(1,1); opacity: 1;}
    to { transform: scale(0,0); opacity: 0;}
}

@-webkit-keyframes zoomCenterIn {
    from { -webkit-transform: scale(0,0); opacity: 0;}
    to { -webkit-transform: scale(1,1); opacity: 1;}
}
@-moz-keyframes zoomCenterIn {
    from { -moz-transform: scale(0,0); opacity: 0;}
    to { -moz-transform: scale(1,1); opacity: 1;}
}
@-o-keyframes zoomCenterIn {
    from { -o-transform: scale(0,0); opacity: 0;}
    to { -o-transform: scale(1,1); opacity: 1;}
}
@keyframes zoomCenterIn {
    from { transform: scale(0,0); opacity: 0;}
    to { transform: scale(1,1); opacity: 1;}
}
.picture-container.zoomCenterOut {
    -webkit-animation-name: zoomCenterOut;
       -moz-animation-name: zoomCenterOut;
         -o-animation-name: zoomCenterOut;
            animation-name: zoomCenterOut;
    background-color: transparent;
}
.picture-container.zoomCenterIn {
    -webkit-animation-name: zoomCenterIn;
       -moz-animation-name: zoomCenterIn;
         -o-animation-name: zoomCenterIn;
            animation-name: zoomCenterIn;
    background-color: transparent;
}

.picture-container.hidden {
    visibility: hidden;
}

.fullscreen-picture {
    width: 100%;
    height: 100%;

    text-align: center;
    font-size: 20pt;

    top: 0;
    left: 0;
    position: absolute;
}

.picture-container .picture {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

.centeredY {
    width: 100%;
    padding: 0 30px;

    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: NHaasGroteskTXStd-65Md;
    font-weight: 400;
    font-size: 2em;
    color: #333;
}

.threeDots {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

#player-container,
#html5-player.fullscreen {
    width: 100%;
    height: 100%;
}

#player-container .info-box {
    position: absolute;
    top: 15%;

    width: 100%;
    text-align: center;
}

#player-container .artwork {
    display: inline-block;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

#player-container .artwork .loader {
    position: absolute;
    display: none;
}

#player-container .artwork .loader img {
    margin: auto;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#player-container .info {
    margin: 30px 15px 0 15px;
    font-size: 16pt;
}

.info span {
    width: 100%;
}

.info .title {
    font-weight: bold;
}

.info .desc {
    color: rgb(200, 200, 200);/*grey*/
}