/** * @example * .selector { * @include border-radius(20px 10px); * } */ /** * @example * .selector { * @include ellipsis(50%); * } */ /** * @example * .selector { * @include calc(width, "600px - 2em"); * } */ /** * @example * .selector { * @include opacity(0.3); * } */ /** * @example * .selector { * @include transform(rotate(1deg)); * } */ /** * @example * .selector { * @include transition(background 0.3s ease-in); * } */ /** * @example * .selector { * @include animation(jump 1s ease-out); * } */ /* * @example * @include keyframes(jump) { * from { top: 0; } * to { top: -10px; } * } */ /*======================================== FONTS ========================================*/ @font-face { font-family: 'm100'; src: url("../fonts/museo-100-webfont.eot"); src: url("../fonts/museo-100-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo-100-webfont.woff2") format("woff2"), url("../fonts/museo-100-webfont.woff") format("woff"), url("../fonts/museo-100-webfont.ttf") format("truetype"), url("../fonts/museo-100-webfont.svg#museo100") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'm300'; src: url("../fonts/museo-300-webfont.eot"); src: url("../fonts/museo-300-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo-300-webfont.woff2") format("woff2"), url("../fonts/museo-300-webfont.woff") format("woff"), url("../fonts/museo-300-webfont.ttf") format("truetype"), url("../fonts/museo-300-webfont.svg#museo300") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'aitalic'; src: url("../fonts/aleo-italic-webfont.eot"); src: url("../fonts/aleo-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aleo-italic-webfont.woff2") format("woff2"), url("../fonts/aleo-italic-webfont.woff") format("woff"), url("../fonts/aleo-italic-webfont.ttf") format("truetype"), url("../fonts/aleo-italic-webfont.svg#aleoitalic") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'aregular'; src: url("../fonts/aleo-regular-webfont.eot"); src: url("../fonts/aleo-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aleo-regular-webfont.woff2") format("woff2"), url("../fonts/aleo-regular-webfont.woff") format("woff"), url("../fonts/aleo-regular-webfont.ttf") format("truetype"), url("../fonts/aleo-regular-webfont.svg#aleoregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'lbold'; src: url("../fonts/lato-bold-webfont.eot"); src: url("../fonts/lato-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-bold-webfont.woff2") format("woff2"), url("../fonts/lato-bold-webfont.woff") format("woff"), url("../fonts/lato-bold-webfont.ttf") format("truetype"), url("../fonts/lato-bold-webfont.svg#latobold") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'llight'; src: url("../fonts/lato-light-webfont.eot"); src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'lregular'; src: url("../fonts/lato-regular-webfont.eot"); src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'm500'; src: url("../fonts/museo-500-webfont.eot"); src: url("../fonts/museo-500-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo-500-webfont.woff2") format("woff2"), url("../fonts/museo-500-webfont.woff") format("woff"), url("../fonts/museo-500-webfont.ttf") format("truetype"), url("../fonts/museo-500-webfont.svg#museo500") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'abitalic'; src: url("../fonts/aleo-bolditalic-webfont.eot"); src: url("../fonts/aleo-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aleo-bolditalic-webfont.woff2") format("woff2"), url("../fonts/aleo-bolditalic-webfont.woff") format("woff"), url("../fonts/aleo-bolditalic-webfont.ttf") format("truetype"), url("../fonts/aleo-bolditalic-webfont.svg#aleobolditalic") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'm700'; src: url("../fonts/museo700-regular-webfont.eot"); src: url("../fonts/museo700-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo700-regular-webfont.woff2") format("woff2"), url("../fonts/museo700-regular-webfont.woff") format("woff"), url("../fonts/museo700-regular-webfont.ttf") format("truetype"), url("../fonts/museo700-regular-webfont.svg#museo700") format("svg"); font-weight: normal; font-style: normal; } /*======================================== STYLE ========================================*/ html{ overflow: hidden; } body { background: #000; color: #fff; } body a { text-decoration: none; } body a:link { color: initial; } body a:visited { color: initial; } body .userImg { display: none; height: 48px; width: 48px; float: right; padding: 0; position: absolute; right: 20px; top: 20px; } body .userImg img { width: 100%; } body header { display: block; position: absolute; transform: translateY(-135px); -webkit-transform: translateY(-135px); -ms-transform: translateY(-135px); } body header img { margin-left: 10px; display: inline-block; position: relative; top: 10px; } body header h3 { display: inline-block; color: #fff; font: 15px/18px 'lbold'; margin: 30px 0 20px 10px; } body header div { display: block; width: 100%; height: 50px; background: #f7b617; box-sizing: border-box; border: 5px solid #fff; border-bottom-width: 0; } body header div h4 { text-transform: uppercase; font: 24px/27px 'm500'; margin: 12px 0 0 8px; } body .vr_active svg path { fill: #FDB913; } body #video { display: block; box-sizing: border-box; width: 100vw; height: 100vh; background: #000; } body #video .v_desc { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; z-index: 3; } body #video #loading,body #video #play{ position: absolute; left: initial; top: initial; display: flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; height: 100%; width: 100%; z-index: 2; background: rgba(0, 0, 0, 0.5); } body #video #loading div{ height: 75px; width: 200px; z-index: 9999; background: url('../img/OxoLoaderSprite.png') no-repeat; animation: play 1s steps(41, start) forwards; -webkit-animation: play 1s steps(41, start) forwards; -moz-animation: play 1s steps(42, start) forwards; -ms-animation: play 1s steps(42, start) forwards; } body #video #play div{ height: 50px; width: 50px; z-index: 9999; padding: 20px 40px; cursor: pointer; background-color: rgba(255,255,255,0.05); border-radius: 10px; } body #video #play div:hover { background-color: rgba(255,255,255,0.1); } body #video #play div:hover svg polygon { fill: white; } @keyframes play { 100% { background-position: -9225px; } } @-webkit-keyframes play { 100% { background-position: -9225px; } } @-moz-keyframes play { 100% { background-position: -9450px; } } @-ms-keyframes play { 100% { background-position: -9450px; } } body #video #loading .oxo-logo{ width: 100px; height: 100px; } body #video #aboutOxo{ width: 100%; height: 100%; position: absolute; z-index: 9999; } body #video #aboutOxo div { position: absolute; top: 50%; left: 50%; z-index: 9999; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); padding: 20px; width: initial !important; } body #video #aboutOxo div img { max-width: 200px; display: block; } body #video #aboutOxo div p { margin: 20px 0 0 0; padding: 5px 0; font: 16px/19px 'aitalic'; } body #video #aboutOxo div p a { color: #fff; text-decoration: none; } body #video #aboutOxo div p a:visited { color: #FDB913; } body #video #aboutOxo div p a:link { color: #FDB913; } body #video #aboutOxo div p:last-child { padding: 5px 0; font: 13px/13px 'lregular'; color: rgba(255, 255, 255, 0.5); } body #video .v_desc div { height: initial; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } body #video .v_desc div p { display: block; margin: 0; padding: 12px 5px 0; font: 18px/21px 'm700'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } body #video .v_desc div a { display: block; padding: 0 10px 10px; position: relative; float: left; top: 5px; box-sizing: border-box; } body #video .v_desc div span { display: block; width: initial !important;} body #video .v_desc div span .v_date { display: none; } body #video .v_desc div .v_pause { display: block; width: 100%; margin: 10px 0 0 0; box-sizing: border-box; border-top: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #justOne { display: none; width: 100% !important; height: initial !important; position: initial !important; transform: initial !important; padding: 10px 0 10px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #justOne a { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: 50px; height: 50px; padding: 0; margin: 0 0 0 5px; top: 0; float: initial; text-decoration: none; background: #000; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; } body #video #downloadPanel ul li.f_download , body #video .v_desc div .v_pause #justOne .f_download { display: inline-block; position: initial !important; transform: initial; width: 100% !important; height: initial !important; } body #video #downloadPanel ul li a.download, body #video .v_desc div .v_pause #justOne .download { display: inline-flex !important; width: 49%; padding: 10px; color: #fff; height: initial !important; background: none; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 5px; box-sizing: border-box; float: none; min-width: 0; flex-grow: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; flex-shrink: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; -ms-flex-shrink: 1; } body #video #downloadPanel ul li a.download, body #video .v_desc div .v_pause #justOne .download:first-child:last-child { width: 100%; margin: 0; } body #video #downloadPanel ul li a.download{ margin-bottom: 5px; } body #video #downloadPanel ul li a.download:hover, body #video .v_desc div .v_pause #justOne .download:hover{ background: rgba(255,255,255,0.3); color: #fff; } body #video #downloadPanel ul li a.download:focus, body #video .v_desc div .v_pause #justOne .download:focus { outline: none; } body #video #downloadPanel ul li a div.ext, body #video .v_desc div .v_pause #justOne div.ext{ width: 50px !important; padding: 0; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #000; display: inline-block; text-align: center; font-weight: bolder; font: 14px/21px 'm700'; text-transform: uppercase; position: initial; transform: initial; } body #video #downloadPanel ul li a.download p, body #video .v_desc div .v_pause #justOne .download p{ font: 13px/15px 'aitalic'; display: inline-block !important; width: 30%; margin: 5px 0; padding: 0 5px; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: initial; flex-grow: 2; -webkit-flex-grow: 2; -moz-flex-grow: 2; -ms-flex-grow: 2; } body #video #downloadPanel ul li a.download p:last-child, body #video .v_desc div .v_pause #justOne .download p:last-child{ width: initial; float: right; text-align: right; justify-content: flex-end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; flex-grow: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; } body #video #downloadPanel ul li a.download svg, body #video .v_desc div .v_pause #justOne .download svg{ display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; } body #video .v_desc div .v_pause #justOne a img { align-self: center; -webkit-align-self: center; -ms-align-self: center; height: 100%; max-width: 100%; margin: 0 auto; } body #video .v_desc div .v_pause #justOne .thumbnail:hover + .framePreview { /*display: inline-flex !important; }*/ display: none !important; } body #video .v_desc div .v_pause #justOne .thumbnail:hover ~ .c_desc { /*display: none !important; }*/ display: inline-block; } body #video .v_desc div .v_pause #justOne .framePreview { display: none; height: 50px; width: initial; padding: 0 10px; float: initial; overflow: hidden; position: initial; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; margin-left: -4px; list-style: none; } body #video .v_desc div .v_pause #justOne .framePreview:hover { display: inline-flex; } body #video .v_desc div .v_pause #justOne .framePreview:hover ~ div { display: none !important; } body #video .v_desc div .v_pause #justOne .framePreview li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: initial; margin: 0 0 0 5px; height: 50px; } body #video .v_desc div .v_pause #justOne .framePreview li img { display: block; height: 100%; } body #video .v_desc div .v_pause #justOne .c_desc { display: inline-block; width: 60% !important; height: initial !important; padding: 0 0 0 10px !important; box-sizing: border-box; position: relative !important; transform: initial !important; top: -5px !important; left: initial !important; border-bottom: initial; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; } body #video .v_desc div .v_pause #justOne .c_desc p { display: inline-block !important; font: 15px/18px 'm500'; margin: 0; padding: initial; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; width: 100%; border: initial; } body #video .v_desc div .v_pause #justOne .c_desc a { display: inline-block; float: right; margin: 0 10px 0 0; } body #video .v_desc div .v_pause #justOne .c_desc a:nth-child(1) { display: block; padding: initial; position: relative; float: left; top: 0; box-sizing: border-box; margin: 0; } body #video .v_desc div .v_pause #justOne .c_desc .c_date { display: block; width: 100%; height: initial !important; position: initial !important; transform: initial !important; top: initial !important; left: initial !important; padding: initial; border-bottom: initial; } body #video .v_desc div .v_pause #justOne .c_desc .c_date p { display: inline-block; font: 12px/15px 'aitalic'; margin: 0; padding: initial; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 50%; box-sizing: border-box; } body #video .v_desc div .v_pause #justOne .c_desc .c_date p:nth-child(2) { font: 12px/15px 'lbold'; text-align: right; width: 40%; } body #video .v_desc div .v_pause #justOne ul { display: inline-flex; width: initial; margin: 0; padding: 10px; top: initial; float: right; position: initial; align-self: center; -webkit-align-self: center; -ms-align-self: center; } body #video .v_desc div .v_pause #justOne ul li { display: inline-block; width: 50%; list-style: none; } body #video .v_desc div .v_pause #justOne ul li a { width: initial; height: initial; padding: 0; position: relative; top: 5px; background: none; } body #video .v_desc div span { display: block; width: 100%; } body #video .v_desc div .v_pause #gf_content { /*display: none;*/ position: initial !important; transform: initial !important; /*width: 100%;*/ height: initial; /*max-height: 90vh;*/ overflow: hidden; z-index: 4; box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #gf_content .f_content { display: block; /*width: 80vw;*/ height: initial; /*max-height: 90vh;*/ position: initial !important; transform: initial !important; /*padding-right: 300px;*/ overflow-y: scroll; overflow-x: hidden; } body #video .v_desc div .v_pause #gf_content .f_content #content { display: block; position: initial !important; transform: initial !important; /*width: 80vw;*/ height: initial; z-index: 15; box-sizing: border-box; } body #video .v_desc div .v_pause #gf_content .f_content #content div { display: block; display: -ms-flex; width: 100% !important; height: initial !important; position: initial !important; transform: initial !important; padding: 10px 0 10px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #gf_content .f_content #content div.ext{ width: 50px !important; padding: 0; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #000; display: inline-block; text-align: center; font-weight: bolder; font: 14px/21px 'm700'; text-transform: uppercase; } body #video .v_desc div .v_pause #gf_content .f_content #content div:last-child { border: none; } body #video .v_desc div .v_pause #gf_content .f_content #content div a { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: 50px; height: 50px; padding: 0; margin: 0 0 0 5px; top: 0; float: initial; text-decoration: none; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; } body #video .v_desc div .v_pause #gf_content .f_content #content div .f_download { display: inline-block; width: 100%; height: initial !important; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download { display: inline-flex !important; width: 49%; padding: 10px; color: #fff; height: initial !important; background: none; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 5px; box-sizing: border-box; float: none; min-width: 0; flex-grow: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; flex-shrink: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; -ms-flex-shrink: 1; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download:first-child:last-child { width: 100%; margin: 0; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download:hover{ background: rgba(255,255,255,0.3); color: #fff; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download p{ display: inline-block !important; width: 30%; margin: 5px 0; padding: 0 5px; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: initial; flex-grow: 2; -webkit-flex-grow: 2; -moz-flex-grow: 2; -ms-flex-grow: 2; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download p:last-child{ width: initial; float: right; text-align: right; justify-content: flex-end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; flex-grow: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; } body #video .v_desc div .v_pause #gf_content .f_content #content div .download svg{ display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; } body #video .v_desc div .v_pause #gf_content .f_content #content div a img { align-self: center; -webkit-align-self: center; -ms-align-self: center; height: 100%; max-width: 100%; margin: 0 auto; } body #video .v_desc div .v_pause #gf_content .f_content #content .wThumbs .thumbnail:hover + .framePreview { display: inline-flex !important; } body #video .v_desc div .v_pause #gf_content .f_content #content .wThumbs .thumbnail:hover ~ .c_desc { display: none !important; } body #video .v_desc div .v_pause #gf_content .f_content #content .wThumbs .framePreview { display: none; height: 50px; width: initial; padding:0 10px; float: initial; overflow: hidden; position: initial; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; list-style: none; } body #video .v_desc div .v_pause #gf_content .f_content #content div .framePreview:hover { display: inline-flex; } body #video .v_desc div .v_pause #gf_content .f_content #content div .framePreview:hover ~ div { display: none !important; } body #video .v_desc div .v_pause #gf_content .f_content #content div .framePreview li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: initial; margin: 0 0 0 5px; height: 50px; } body #video .v_desc div .v_pause #gf_content .f_content #content div .framePreview li img { display: block; height: 100%; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc { display: inline-block; width: initial !important; height: initial !important; padding: 0 0 0 10px !important; box-sizing: border-box; position: relative !important; transform: initial !important; /*top: -5px !important;*/ left: initial !important; border-bottom: initial; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc p { display: inline-block !important; font: 15px/18px 'm500'; margin: 0; padding: initial; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; width: 100%; border: initial; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc a { display: inline-block; float: right; margin: 0 10px 0 0; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc a:nth-child(1) { display: block; padding: initial; position: relative; float: left; top: 0; box-sizing: border-box; margin: 0; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc .c_date { display: block; width: 100%; height: initial !important; position: initial !important; transform: initial !important; top: initial !important; left: initial !important; padding: initial; border-bottom: initial; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc .c_date p { display: inline-block; font: 12px/15px 'aitalic'; margin: 0; padding: initial; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; box-sizing: border-box; } body #video .v_desc div .v_pause #gf_content .f_content #content div .c_desc .c_date p:nth-child(2) { font: 12px/15px 'lbold'; text-align: right; width: 40%; } body #video .v_desc div .v_pause #gf_content .f_content #content div ul { display: inline-flex; width: initial; margin: 0; padding: 10px; top: initial; float: right; position: initial; align-self: center; -webkit-align-self: center; -ms-align-self: center; } body #video .v_desc div .v_pause #gf_content .f_content #content div ul li { display: inline-block; width: 50%; list-style: none; } body #video .v_desc div .v_pause #gf_content .f_content #content div ul li a { width: initial; height: initial; padding: 0; position: relative; top: 5px; background: none;} body #video .v_desc div .v_pause #gf_content .f_content #content .c_back { display: none; text-decoration: none; width: 100%; } body #video .v_desc div .v_pause #gf_content .f_content #content .c_back h3 { margin: 0; padding: 10px 0 10px; background: #4d4d4d; box-sizing: border-box; text-align: center; text-transform: uppercase; font: 24px/27px 'm500'; color: #f7b617; } body #video .v_desc div .v_pause #shareContent { /*display: none;*/ width: 100%; height: 170px; position: initial; transform: initial; padding: 10px 0 10px; box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #shareContent .qrCode { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; align-self: flex-start !important; -webkit-align-self: flex-start !important; -ms-align-self: flex-start !important; flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; position: initial; transform: initial; height: 150px; width: 150px !important; margin: 0 10px 0 0; float: left; border-right: 1px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #shareContent .shareType { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; position: initial; transform: initial; width: 50% !important; align-self: flex-start !important; -webkit-align-self: flex-start !important; -ms-align-self: flex-start !important; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; top: 0; margin: 0 0 0 10px; } body #video .v_desc div .v_pause #shareContent .shareType h4 { margin: 10px 0 20px; } body #video .v_desc div .v_pause #shareContent .shareType ul { display: block; width: 100%; margin: 0; padding: 0; } body #video .v_desc div .v_pause #shareContent .shareType ul li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; list-style: none; width: 20%; } body #video .v_desc div .v_pause #shareContent .shareType ul li img { display: block; height: 2vw; width: 2vw; background: #125312; } body #video .v_desc div .v_pause #shareContent .shareType .shareUrl { display: block; width: 100% !important; position: initial; transform: initial; margin-top: 20px; } body #video .v_desc div .v_pause #shareContent .shareType .shareUrl svg { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: 10%; height: 25px; box-sizing: border-box; margin-right: 10px; padding-bottom: 5px; float: left; } body #video .v_desc div .v_pause #shareContent .shareType .shareUrl input { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; width: 85%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.6); background: none; float: left; } body #video .v_desc div .v_pause #shareContent .shareType .shareUrl input:focus { border: initial; } body #video .v_desc div .v_pause #gf_miniature { display: none; position: initial !important; transform: initial !important; width: 100%; height: initial; max-height: 90vh; overflow: hidden; z-index: 4; box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #gf_miniature .f_miniature { display: block; /*width: 80vw;*/ height: initial; max-height: 90vh; position: initial !important; transform: initial !important; /*padding-right: 300px;*/ overflow-y: scroll; overflow-x: hidden; } body #video .v_desc div .v_pause #gf_miniature .f_miniature #miniature { display: block; position: initial !important; transform: initial !important; /*width: 80vw;*/ height: initial; padding: 0 0 10px; z-index: 15; box-sizing: border-box; } body #video .v_desc div .v_pause #gf_miniature .f_miniature #miniature ul { display: flex; display: -webkit-flex; display: -ms-flex; width: 100%; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } body #video .v_desc div .v_pause #gf_miniature .f_miniature #miniature ul li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; margin: 3px; height: 50px; } body #video .v_desc div .v_pause #gf_miniature .f_miniature #miniature ul li a { display: block; height: 50px; padding: initial; position: initial; float: initial; top: initial; box-sizing: initial; } body #video .v_desc div .v_pause #gf_miniature .f_miniature #miniature ul li a img { display: block; height: 100%; } body #video .v_desc div .v_pause #gf_metadata { display: none; position: initial; width: 100%; height: initial; max-height: 90vh; overflow: hidden; z-index: 4; box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #gf_metadata #f_metadata { display: block; /*width: 80vw;*/ height: initial; max-height: 90vh; position: initial; padding-right: 300px; overflow-y: scroll; overflow-x: hidden; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata { display: block; position: initial; transform: initial; /*width: 80vw;*/ height: initial; padding: 0 0 10px; z-index: 15; box-sizing: border-box; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata a { display: block; text-decoration: none; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata a img { width: 100%; max-width: 100%; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata a:link { color: #fff; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata a:visited { color: #fff; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_back { display: none; text-decoration: none; width: 100%; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_back h3 { margin: 0; padding: 10px 0 10px; box-sizing: border-box; text-align: center; text-transform: uppercase; font: 24px/27px 'm500'; color: #f7b617; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_date { position: relative; width: 100%; height: initial; transform: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_date p { margin: 0; padding: 5px 10px; font: 12px/15px 'aitalic'; border: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_date p span { font: 12px/15px 'aitalic'; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_desc { padding: 10px 10px 20px; position: relative; width: 100%; height: initial !important; transform: initial !important; top: initial !important; left: initial !important; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_desc p { display: block; color: #fff; margin: 0; font: 16px/19px 'aitalic'; font-weight: initial; border: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data { position: relative; width: 100%; height: initial !important; transform: initial !important; top: initial !important; left: initial !important; padding: initial !important; box-sizing: border-box; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data div { display: inline-block; position: relative; width: 49%; left: initial !important; padding: initial; height: initial !important; transform: initial !important; top: initial !important; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data div:last-child { width: 100%; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data div p { display: inline-block; width: 49%; margin: 0; box-sizing: border-box; font: 12px/15px 'lregular'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data div p:nth-child(1) { font: 12px/15px 'lbold'; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_data div:nth-child(15) p { width: 100%; margin: 0; white-space: initial; text-align: left; border: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_tag { position: relative; margin-top: 20px; box-sizing: border-box; border-top: 2px solid rgba(255, 255, 255, 0.6); width: 100%; height: initial !important; padding: 10px 0; transform: initial !important; top: initial !important; left: initial !important; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_tag:first-child { margin-top: 0; border-top: 0; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_tag svg:not(:root) { position: relative; top: 1px; margin: 0 0 0 5px; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata .m_tag p { width: initial !important; display: inline-block; margin: 5px 0 0; padding: 0 10px; font: 12px/15px 'lbold' !important; text-transform: uppercase; border: initial; } body #video .v_desc div .v_pause #gf_metadata #f_metadata #metadata div { padding: 0 5px; } body #video .v_desc div .v_pause .v_rightcontrol { display: flex; display: -webkit-flex; display: -ms-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; align-items: center; -webkit-align-items: center; -ms-align-items: center; width: 100%; margin: 0; padding: 10px 0 17px 5px; list-style: none; background: none; height: 30px; } body #video .v_desc div .v_pause .v_rightcontrol li { display: inline-block; width: 45px; height: 35px; overflow: hidden; transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out; -ms-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; box-sizing: border-box; } body #video .v_desc div .v_pause .v_rightcontrol li:hover { border-bottom: 3px solid #f7b617; width: 145px; } body #video .v_desc div .v_pause .v_rightcontrol li:hover a svg { fill: #fff; } body #video .v_desc div .v_pause .v_rightcontrol li:hover:last-child { transition: initial; border-bottom: initial; } body #video .v_desc div .v_pause .v_rightcontrol li:hover:nth-child(5) { width: 145px; } body #video .v_desc div .v_pause .v_rightcontrol li:hover:nth-child(2) { width: 145px; } body #video .v_desc div .v_pause .v_rightcontrol li:hover:last-child a svg { fill: rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause .v_rightcontrol li:nth-child(6) svg { transition: transform 0.5s ease-in-out !important; -webkit-transition: -webkit-transform 0.5s ease-in-out !important; -ms-transition: -ms-transform 0.5s ease-in-out !important; -moz-transition: -moz-transform 0.5s ease-in-out !important; } body #video .v_desc div .v_pause .v_rightcontrol li a { padding: 0 10px; height: 30px; top: 0; width: 200px; text-transform: uppercase; text-decoration: none; } body #video .v_desc div .v_pause .v_rightcontrol li a svg:not(:root) { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; margin: 0 auto; height: 30px; transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body #video .v_desc div .v_pause .v_rightcontrol li a p { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; align-items: center; -webkit-align-items: center; -ms-align-items: center; padding: 0 0 0 10px; font: 14px/12px 'lbold'; color: #f7b617; position: relative; top: -10px; } body #video .v_desc div .v_pause .v_rightcontrol li .oxologo { float: right; width: initial; } body #video .v_desc div .v_pause .v_rightcontrol li .oxologo svg { transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body #video .v_desc div .v_pause .v_rightcontrol li .oxologo:hover svg { fill: #f7b617 !important; } body #video .v_desc div .v_pause .v_rightcontrol li:nth-child(5) { width: 35px; } body #video .v_desc div .v_pause .v_rightcontrol li:nth-child(2) { width: 35px; } body #video .v_desc div .v_pause .v_rightcontrol li:last-child { flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; } body #video .v_desc div .v_pause p { display: block; margin: 0; padding: 5px 0 5px 5px; text-overflow: initial; white-space: initial; overflow: initial; font: 14px/19px 'aitalic'; letter-spacing: 1px;} body #video .v_desc div .v_pause #filesThumb { position: initial; top: initial; display: none; width: 100% !important; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); border-bottom: 2px solid rgba(255, 255, 255, 0.6); overflow: hidden; } body #video .v_desc div .v_pause #filesThumb ul { display: flex; display: -webkit-flex; display: -ms-flex; align-items: center; -webkit-align-items: center; -ms-align-items: center; width: 100%; margin: 0 auto; padding: 10px 0; } body #video .v_desc div .v_pause #filesThumb ul li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; width: initial; list-style: none; overflow: hidden; } body #video .v_desc div .v_pause #filesThumb ul li #miniThumbs { display: flex; display: -webkit-flex; display: -ms-flex; padding: 0; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; height: 50px; overflow: hidden; } body #video .v_desc div .v_pause #filesThumb ul li #miniThumbs li { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; justify-content: flex-start; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; flex-grow: initial; -webkit-flex-grow: initial; -ms-flex-grow: initial; margin: 0 5px 5px; height: 50px; } body #video .v_desc div .v_pause #filesThumb ul li #miniThumbs li a { height: 100%; width: initial; padding: initial; margin: initial; position: initial; float: initial; color: initial; } body #video .v_desc div .v_pause #filesThumb ul li #miniThumbs li a img { display: block; height: 100%; } body #video .v_desc div .v_pause #filesThumb ul li a { display: block; width: 100%; padding: 0; margin: 0 auto; position: initial; float: initial; color: #fff; } body #video .v_desc div .v_pause #filesThumb ul li a svg:not(:root) { display: block; margin: 0 auto; width: 20px; height: 20px; } body #video .v_desc div .v_pause #filesThumb ul li a p { display: block; margin: 0; padding: 5px 0 0; text-align: center; font: 10px 'lregular'; } body #video .v_desc div .v_pause #filesThumb ul li:last-child { flex-grow: initial; -webkit-flex-grow: initial; -ms-flex-grow: initial; justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; align-items: center; -webkit-align-items: center; -ms-align-items: center; float: initial; width: 150px; } body #video .v_desc div .v_pause #filesThumb ul li:last-child:hover { border: initial; } body #video .v_desc div .v_pause #justMeta { display: none; width: 100%; border-bottom: 2px solid rgba(255, 255, 255, 0.6); padding: 5px 0; } body #video .v_desc div .v_pause #justMeta .m_data { position: relative; width: 100%; height: initial !important; transform: initial !important; top: initial !important; left: initial !important; padding: initial !important; box-sizing: border-box; } body #video .v_desc div .v_pause #justMeta .m_data div { display: inline-block; position: relative; width: 50%; left: initial !important; padding: initial; height: initial !important; transform: initial !important; top: initial !important; } body #video .v_desc div .v_pause #justMeta .m_data div span { width: 100%; } body #video .v_desc div .v_pause #justMeta .m_data div span p { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; margin: 0; padding: 0; box-sizing: border-box; font: 12px/15px 'lregular'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: initial; } body #video .v_desc div .v_pause #justMeta .m_data div span p:nth-child(1) { font: 12px/15px 'lbold'; } body #video .v_desc div .v_pause #justMeta .m_data div span p:nth-child(2) { width: 50%; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } body #video .v_desc div .v_pause #justMeta .m_data div:nth-child(15) p { width: 100%; margin: 0; white-space: initial; text-align: left; border: initial; } body #video .v_desc div .v_pause #justTags { display: none; width: 100%; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body #video .v_desc div .v_pause #justTags .v_tag { width: 100% !important; padding: 20px 0 20px 5px; } body #video .v_desc div .v_pause #justTags .v_tag svg:not(:root) { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; position: relative; float: left; top: 1px; margin: 0 0 0 5px; } body #video .v_desc div .v_pause #justTags .v_tag a { width: initial; display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; padding: 0 10px; font: 12px/15px 'lbold'; text-transform: uppercase; color: #fff; top: initial; } body #video .v_desc div .v_pause #justTags .v_tag a:link { color: #fff; } body #video .v_desc div .v_pause #justTags .v_tag a:visited { color: #fff; } body #video #touchToStart { display: block; height: 100%; width: 100%; position: absolute; z-index: 1; } body #video #backThumbnail { position: absolute; z-index: 1; } body #video #blurThumbnail { filter: blur(10px); -webkit-filter: blur(10px); -ms-filter: blur(10px); position: absolute; background: no-repeat center; background-size: cover; z-index: 2; } body #video #blurThumbnail img { width: 100%; } body #video #scenesPanel { /*display: none;*/ position: absolute; background: rgba(0, 0, 0, 0.8); padding: 00px; z-index: 10; right: 20px; left: 20px; top: 50px; bottom: 70px; overflow: auto;} body #video #scenesPanel .scene-container{ padding: 10px; } body #video #optionsPanel { /*display: none;*/ position: absolute; background: rgba(0, 0, 0, 0.5); padding: 20px; z-index: 10; right: 20px; bottom: 50px; } body #video #optionsPanel ul { display: inline-block; float: left; margin: 0; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.6); } body #video #optionsPanel ul:first-child { padding-left: 0; } body #video #optionsPanel ul:last-child { border: none; padding-right: 0; } body #video #optionsPanel ul li { list-style: none; padding: 5px 0; } body #video #optionsPanel ul li p { font-family: 'lbold'; margin: 0; text-transform: uppercase; } body #video #optionsPanel ul li a { color: #fff; padding: 10px 0; font: 16px/16px 'lregular'; } body #video #optionsPanel ul li a:hover { color: #f7b617; } body #video #downloadPanel { /*display: none;*/ font: 13px/15px 'aitalic'; position: absolute; background: rgba(0, 0, 0, 0.5); padding: 20px; z-index: 10; right: 20px; bottom: 50px; max-width: 400px; } body #video #downloadPanel ul { display: inline-block; float: left; margin: 0; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.6); } body #video #downloadPanel ul:first-child { padding-left: 0; } body #video #downloadPanel ul:last-child { border: none; padding-right: 0; } body #video #downloadPanel ul li { list-style: none; padding: 5px 0; } /*body #video #downloadPanel ul li p { font-family: 'lbold'; margin: 0; } body #video #downloadPanel ul li a { color: #fff; padding: 10px 0; font: 16px/16px 'lregular'; } body #video #downloadPanel ul li a:hover { color: #f7b617; }*/ body #video #v_menu { /*display: none;*/ position: absolute; bottom: 0; width: 100vw; height: 50px; background: rgba(0, 0, 0, 0.3); z-index: 4; } body #video #v_menu .seekThumbnail { cursor: pointer; width: 100%; height: 20px; position: absolute; top: -10px; z-index: 11; } body #video #v_menu .seekThumbnail:hover > span { display: block; } body #video #v_menu .seekThumbnail span { display: none; /*overflow: hidden;*/ position: absolute; bottom: 20px; } body #video #v_menu .seekThumbnail span a { margin: 0 0 0 -50%; display: block; position: relative; width: 100%; height: 100%; text-align: center; text-decoration: none; } body #video #v_menu .seekThumbnail span a img { display: block; border: 2px solid rgba(0,0,0,0.5); width: auto; height: auto; max-width: 160px; max-height: 90px;} body #video #v_menu .seekThumbnail span a .time { display: block; position: absolute; left: 0; bottom: 0; right: 0; height: 17px; padding: 3px; background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.75);} body #video #v_menu .v_totalTimebar { /*display: none;*/ width: 100%; height: 3px; background: rgba(255, 255, 255, 0.4); } body #video #v_menu .v_totalTimebar .v_progresbar { display: block; width: 50%; height: 3px; position: absolute; background: #FDB913; z-index: 4; } body #video #v_menu .v_totalTimebar .v_progresbar .dot { display: block; height: 15px; width: 15px; border-radius: 10px; position: absolute; z-index: 10; right: -5px; top: -5px; background: #FDB913; } body #video #v_menu .v_totalTimebar .v_bufferbar { display: block; width: 65%; height: 3px; position: absolute; background: rgba(255, 255, 255, 0.5); z-index: 1; } body #video #v_menu .v_leftcontrol { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; align-items: center; -webkit-align-items: center; -ms-align-items: center; margin: 0 0 0 10px; padding: 10px 0 10px; list-style: none; width: 140px; /*display: none;*/ float: left; } body #video #v_menu .v_leftcontrol li { display: inline-block; width: 32.3%; } body #video #v_menu .v_leftcontrol li a { height: 100vh; } body #video #v_menu .v_leftcontrol li a svg:not(:root) { display: block; margin: 0 auto; height: 30px; } body #video #v_menu .v_rightToolcontrol { display: inline-flex; display: -webkit-inline-flex; display: -ms-inline-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; align-items: center; -webkit-align-items: center; -ms-align-items: center; margin: 0 10px 0 0; padding: 10px 0 10px; list-style: none; width: initial !important; float: right; /*display: none;*/ } body #video #v_menu .v_rightToolcontrol li { display: inline-block; width: initial; } body #video #v_menu .v_rightToolcontrol li .volumeArea.seeking, body #video #v_menu .v_rightToolcontrol li:hover > .volumeArea { display: block; } body #video #v_menu .v_rightToolcontrol li #vr_volume { position: relative; z-index: 2; margin-right: 8px; } body #video #v_menu .v_rightToolcontrol li #vr_volumeOff { position: relative; z-index: 2; margin-right: 8px; } body #video #v_menu .v_rightToolcontrol li .volumeArea { display: none; width: 40px; height: 140px; position: absolute; bottom: 31px; z-index: 11; } body #video #v_menu .v_rightToolcontrol li .volumeArea:hover > .volumeArea, body #video #v_menu .v_rightToolcontrol li .volumeArea.seeking .volumeArea{ display: block; } body #video #v_menu .v_rightToolcontrol li .volumeArea .volumeBar { display: block; width: 40px; height: 140px; background: rgba(0, 0, 0, 0.2); position: absolute; bottom: 20px; } body #video #v_menu .v_rightToolcontrol li .volumeArea .volumeBar .volumeContainer { width: 100%; height: 75%; position: absolute; padding: 0 18px; cursor: pointer; margin-top: 20px; bottom: 15px; } body #video #v_menu .v_rightToolcontrol li .volumeArea .volumeBar .volumeContainer .currentVol { display: block; width: 3px; height: 100%; position: absolute; background: #FDB913; bottom: 0; z-index: 1; } body #video #v_menu .v_rightToolcontrol li .volumeArea .volumeBar .volumeContainer .currentVol .dot { display: block; height: 15px; width: 15px; border-radius: 10px; position: absolute; z-index: 10; right: -6px; top: -7px; background: #FDB913; } body #video #v_menu .v_rightToolcontrol li .volumeArea .volumeBar .volumeContainer .totalVol { display: block; width: 3px; height: 100%; position: absolute; background: #000; z-index: 1; } body #video #v_menu .v_rightToolcontrol li a { height: 100vh; position: relative; width: 40px; float: right; } body #video #v_menu .v_rightToolcontrol li a svg:not(:root) { display: block; margin: 0 auto; height: 30px; transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body #video #v_menu .v_rightToolcontrol li a:hover svg { fill: #fff !important; } body #video #v_menu .vl_more { display: flex; display: -webkit-flex; display: -ms-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; align-items: center; -webkit-align-items: center; -ms-align-items: center; height: 60px; width: 50px; position: absolute; bottom: 0; right: 10px; display: none; } body #video #v_menu .vl_more svg:not(:root) { display: block; padding: 5px 0 0; margin: 0 auto; height: 30px; } body #video #v_menu .v_centerInfo { /*display: none;*/ position: absolute; margin-left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); bottom: 0; height: 52px; } body #video #v_menu .v_centerInfo .v_number { display: inline-block; margin: 7px 0 0; color: #fff; } body #video #v_menu .v_centerInfo .v_number a{ color: #FDB913; } body #video #v_menu .v_centerInfo .v_time { display: inline-block; margin: 7px 0 0 10px; color: #fff; } body .op_active { display: flex !important; display: -webkit-flex !important; display: -ms-flex !important; } body .chooseActive { color: #FDB913 !important; } body .vrc_active { bottom: 45px !important; } body .m_active .userImg { height: 33px !important; width: 33px !important; top: 10px !important; } body .m_active div .v_pause #gf_metadata { display: block !important; transform: translateX(0) !important; -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; } body .m_active div .v_pause #gf_metadata p { height: initial !important; } body .m_active div .v_pause #gf_metadata #metadata .m_data div { height: initial !important; } body .share_active { display: flex !important; display: -webkit-flex !important; display: -ms-flex !important; } body .c_active .userImg { height: 33px !important; width: 33px !important; top: 10px !important; } body .c_active div .v_pause #gf_content { display: block !important; } body .c_active div .v_pause #gf_content p { height: initial !important; } body .mini_active .userImg { height: 33px !important; width: 33px !important; top: 10px !important; } body .mini_active div .v_pause #gf_miniature { display: block !important; } body .mini_active div .v_pause #gf_miniature p { height: initial !important; } body .v_desc_active { height: 45px !important; background: rgba(0, 0, 0, 0.2) !important; } body .v_desc_active div { margin-top: 0 !important; height: initial !important; } body .v_desc_active div .v_pause { display: none !important; } body .titleMood { width: 100% !important; } body .titleMood a svg:not(:root) { width: initial !important; height: initial !important; } body #video .v_desc div .v_title { display: inline-block; margin: 0; padding: 0; font: 18px/21px 'm700'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; color: #fff; position: initial; float: initial; width: 80%; } body #video .v_desc div .v_title:focus { outline: none; } body .titleMood span .v_title { font: 18px/21px 'm700' !important; color: #fff;} body .titleMood span .v_date { font: 16px/19px 'aitalic' !important; top: -1px !important; } body .titleMood span .v_date span { font: 16px/19px 'abitalic' !important; } body .volume { display: block !important; } body .justDesc .v_pause #justDesc { display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; width: 100%; box-sizing: border-box; border-bottom: 2px solid rgba(255, 255, 255, 0.6); } body .justDesc .v_pause #justDesc p { display: block !important; flex-grow: 2; -webkit-flex-grow: 2; -ms-flex-grow: 2; } body .justDesc .v_pause #justDesc a { display: block !important; top: initial !important; float: initial !important; position: initial !important; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; padding-bottom: 0 !important; } body .justDesc .v_pause #justDesc a svg { transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body .justDesc .v_pause #justDesc a:hover svg { fill: #fff; } body .justMeta .v_pause #justMeta { display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; } body .justMeta .v_pause #justMeta a { display: block !important; top: initial !important; float: initial !important; position: initial !important; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; padding-bottom: 0 !important; } body .justMeta .v_pause #justMeta a svg { transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body .justMeta .v_pause #justMeta a:hover svg { fill: #fff; } body .justOne .v_pause #justOne { display: block !Important; } body .justTags .v_pause #justTags { display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; } body .justTags .v_pause #justTags > a:last-child { display: block !important; top: initial !important; float: initial !important; position: initial !important; align-self: center !important; -webkit-align-self: center !important; -ms-align-self: center !important; padding-bottom: 0 !important; } body .justTags .v_pause #justTags > a:last-child span { width: 100% !important; } body .justTags .v_pause #justTags a:last-child svg { transition: fill 0.2s ease-in-out; -webkit-transition: fill 0.2s ease-in-out; -ms-transition: fill 0.2s ease-in-out; -moz-transition: fill 0.2s ease-in-out; } body .justTags .v_pause #justTags a:last-child:hover svg { fill: #fff; } body .moreFiles .v_pause #filesThumb { display: block !important; } .gallery-sheet{ padding-top: 1px; } .item-hover { /*display: none;*/ display: block; position: absolute; left: 0; right: 0; bottom: 0; border: 0 none; background: rgba(0,0,0,0.5); padding: 5px 10px; color: #FFF; font: 15px/18px 'm500'; } .item-hover li { display: none !important; position: absolute; left: 0; right: 0; bottom: 0; border: 0 none; background: rgba(0,0,0,0.5); padding: 5px 10px; color: #FFF; font: 15px/18px 'm500'; } .item-hover li button{ background: none; border: none; } .item-hover:hover { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: none; } .item-hover:hover > li { display: block !important; position: initial !important; background: none; top: 0; left: 0; right: 0; bottom: 0; border: none; } body #video .v_desc div .vr_download p{ color: #FFF; padding-right: 10px; font-size: 14px; font-style: normal; font: 16px/18px 'm500'; } .vr_downloads_disabled{ cursor: default; opacity: 0.5; } #media { margin: auto; } .fullscreen #media { height: 100%; } .qcplayer #media{ margin-bottom: 60px; margin-top: 45px; height: initial !important; } #media .file-download{ padding: 10px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: initial; width:60%; } #media .file-download a{ display: block; border: 1px solid rgba(255, 255, 255, 0.6); width: 100%; padding: 10px; color: #fff; text-decoration: none; } #media .file-download a:visited{ color: #fff; } #media .file-download a:link{ color: #fff; } #media .file-download h1{ font-size: 20px; margin: 0; padding: 10px 0; } #media .file-download a p{ display: inline-flex !important; display: -webkit-inline-flex !important; display: -ms-inline-flex !important; font: 13px/15px 'aitalic'; box-sizing: content-box; width: initial; margin: 5px 0; padding: 0 5px; align-self: center !important; -webkit-align-self: center !important; } #media .file-download a p:nth-child(3) { width: initial; float: right; text-align: right; } #media .file-download a:hover{ background: rgba(255, 255, 255, 0.3); } #media .file-download a:focus { outline: none; } #media .file-download a .ext{ height: 20px; width: 50px !important; padding: 0; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #000; display: inline-block; text-align: center; font-weight: bolder; font: 14px/21px 'm700'; text-transform: uppercase; position: initial; transform: initial; } .gallery-sheet .gallery-sheet-row .gallery-sheet-item:hover > i { background: rgba(255,255,255,0.6); } .gallery-sheet .gallery-sheet-row .gallery-sheet-item i { display: block; position: absolute; z-index: 1; width:100%; height:100%; background: rgba(255,255,255,0); } .scene-item .time { z-index: 2; } body #video #downloadPanel ul li a{ white-space: nowrap; } body #video #downloadPanel ul li p{ display: inline-block; margin-right: 15px; margin-top: 0; font-style: normal; font: 16px/18px 'm500'; } body #video #downloadPanel ul li p.ext { font-weight:normal; } body #video #downloadPanel ul li .icon{ width: 18px; margin-bottom: -5px; margin-right: 4px; } body .justDesc .v_pause #justDesc { max-height: 80px; overflow: hidden; } .modal{ left: 50%; position: fixed; z-index: 100; } .modal.top{ top: 30px; } .modal.bottom{ bottom:70px; } .modal .contents{ position: relative; left: -50%; background: #383838; border: 1px solid #434343; color: #FFF; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 3px 5px 3px #0006; max-height: 90vh; overflow: auto; } .modal.bottom .contents{ top: -50%; } .modal h3{ margin: 0 0 10px; display: flex; flex-direction: row; align-items: center; } .modal h3 > span{ flex: 1; } .modal h3.header{ cursor: pointer; margin: -10px -10px 10px; padding: 7px 10px 5px; } .modal h3.header:hover{ background: #ffb50082; } .modal h3.header .title{ flex: 1; } .modal .footer{ margin: 10px -10px -10px; padding: 10px 10px 10px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; background: rgba(31, 31, 31, 0.51); } .modal .close{ flex-shrink: 1; flex-grow: 0; font-size: 18px; font-weight: bold; cursor: pointer; background: #565656; padding: 0 5px 1px; line-height: 19px; border-radius: 4px; margin-left: 10px; } .modal .row{ display: flex; flex-direction: row; align-items: center; } .modal .row > *{ margin-right: 10px; } .modal .row > *:last-child{ margin-right: 0; } .modal .row > input{ flex-grow: 1; border-radius: 4px; border: 1px solid #adadad; padding: 2px; } .modal label{ display: block; cursor: pointer; margin: 8px 0; } .modal label:hover{ color:#fdb913; } .modal input.error{ color:#C00; } .modal .msg.error{ color:#ef3232; } .v_time > a, .v_time > a:link, .v_time > a:visited{ color:#FFF; display: block; margin-block-start: 0.8em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .v_time > a:hover { color: #FDB913; } .base-player{ position: absolute; bottom: 0; top: 0; left: 0; right: 0; } body .qcplayer{ display: flex; flex-direction: column; position: absolute; overflow: hidden; left: 0; right: 0; top: 0; bottom: 0; height: 100%; } body .qcplayer #video{ height: 47vh; overflow: hidden; position: relative; background: #252525; } body .qcplayer #video .v_desc{ background: transparent !important; } body .qcplayer #media video{ background: #252525; } body .qcplayer #qc{ flex: 1; overflow: hidden; border-top: 1px solid #333; display: flex; flex-direction: column; } body .qcplayer #qc .controls{ display: flex; flex-direction: column; justify-content: center; align-content: stretch; align-items: stretch; } body .qcplayer #qc .controls .controls__row{ padding: 3px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; } body .qcplayer #qc button, body .qcplayer #qc input{ flex: 1; background: #2d2d2d; border: 1px solid #484848; color: #fdb913; cursor: pointer; font: 12px arial,sans-serif; margin: 1px; outline: medium none; padding: 5px 12px; text-align: center; vertical-align: middle; white-space: nowrap; position: relative; } body .qcplayer #qc input{ padding: 2px; } body .qcplayer #qc .header{ background: #484848; padding: 6px 6px; flex: 0; display: flex; flex-direction: row; } body .qcplayer #qc .title{ font-weight: bold; flex: 1; } body .qcplayer #qc ul.menu{ flex: 0; display: flex; flex-direction: row; margin: 0; padding: 0; white-space: nowrap; } body .qcplayer #qc .menu li{ list-style: none; position: relative; padding: 3px 17px; margin: -3px 0; } body .qcplayer #qc .menu li:hover{ color:#FDB913; cursor: pointer; background: #333; } body .qcplayer #qc .menu li .submenu{ position: absolute; top: 100%; right: 0; background: #333; padding: 3px; display: none; z-index: 10; color:#FFF; } body .qcplayer #qc .menu li:hover .submenu{ display: block; } body .qcplayer #qc .menu li .submenu ul{ margin: 0; padding: 0; } body .qcplayer #qc .menu li .submenu ul li{ list-style: none; color:#999; padding: 7px 5px; } body .qcplayer #qc .menu li .submenu ul li.sub{ padding-left: 23px; } body .qcplayer #qc .menu li .submenu ul li label{ color:#FFF; cursor: pointer; } body .qcplayer #qc .menu li .submenu ul li:hover label{ color:#FDB913; } body .qcplayer #qc .menu li .submenu ul li label input[type=checkbox]{ margin-right: 5px; } body .qcplayer #qc .timelines{ display: flex; flex-direction: column; position: relative; height: 100%; flex: 1; overflow:hidden; } body .qcplayer #qc .timelines .currentpos{ position: absolute; top: 0; bottom: 0; width: 1px; background: #FDB913; z-index: 3; pointer-events: none; } body .qcplayer #qc .timelines .timeline{ display: flex; flex-direction: column; } body .qcplayer #qc .timelines .timeline .label{ color: #FDB913; display: flex; padding: 6px 6px; flex-direction: row; justify-content: flex-start; } body .qcplayer #qc .timelines .timeline .label button, body .qcplayer #qc .timelines .timeline .label input{ flex:0; margin: -1px 10px; } body .qcplayer #qc .timelines .timeline .label input[type='number']{ width: 50px; } body .qcplayer #qc .timelines .subtimeline{ display: flex; flex-direction: column; position: relative; } body .qcplayer #qc .timelines .subtimeline .label{ color: #CCC; font-size: 12px; position: absolute; z-index: 2; background: rgb(37 37 37); padding: 1px 4px; bottom: 100%; display: none; } body .qcplayer #qc .timelines .subtimeline:hover .label { display: block; } body .qcplayer #qc .timelines .timeline .timeline__row{ background: #252525; position: relative; margin-bottom: 2px; height: 35px; } body .qcplayer #qc .timelines .timeline .report-segments-list { margin: 5px 0 10px; padding: 0 0 0 30px; } body .qcplayer #qc .timelines .timeline .report-segments-list a { color: #FDB913; } body .qcplayer #qc .timelines .timeline .timeline__row .segment{ background: #02b2f58c; border: 1px solid #02b2f5; height: 100%; position: absolute; cursor: pointer; z-index: 2; box-sizing: border-box; } body .qcplayer #qc .timelines .timeline .timeline__row .segment.warn { background: #d09f263d; border: 1px solid #fffe00; } body .qcplayer #qc .timelines .timeline .timeline__row .segment.error { background: #ff00004a; border: 1px solid #F00; } body .qcplayer #qc .timelines .timeline .timeline__row .segment:hover{ background: #ffffff94; opacity: 1; z-index: 10; } body .qcplayer #qc .timelines .timeline .timeline__row .segment .timecode { background: rgba(79, 79, 79, 0.8); border: 1px solid #545454; color: #FFF; padding: 2px 5px; bottom: 50%; width: fit-content; } body .qcplayer #qc .timelines .timeline .timeline__row .segment .timecode.start { right: 100%; -webkit-transform: translate(calc(-100% - 1px), 50%); } body .qcplayer #qc .timelines .timeline .timeline__row .segment .timecode.stop { left: calc(100% + 1px); -webkit-transform: translate(0, 50%); } body .qcplayer #qc .timelines .timeline .timeline__row .segment .label { background: rgba(79, 79, 79, 0.8); border: 1px solid #545454; color: #FFF; padding: 2px 5px; -webkit-transform: translate(-50%, 0%); bottom: calc(100% + 1px); position: absolute; white-space: nowrap; font-size: 12px; } body .qcplayer #qc .timelines .timeline .timeline__row .segment .timecode.mark, body .qcplayer #qc .timelines .timeline .timeline__row .segment .timecode.duration { left: 50%; -webkit-transform: translate(-50%, 0%); bottom: initial; top: calc(100% + 1px); } body .qcplayer #qc .timelines .timeline .timeline__row .multiple-canvas{ width: 100%; height: 100%; border-bottom: 1px solid #000; } body .qcplayer #qc .timelines .timeline .timeline__row .multiple-canvas, body .qcplayer #qc .timelines .timeline .timeline__row canvas{ z-index: 0; position: absolute; pointer-events: none; } body .qcplayer #qc .timelines .timeline .timeline__row .multiple-canvas canvas{ } body .qcplayer #qc .timelines .timeline .timeline__row canvas.on-top{ z-index: 5; } body .qcplayer #qc .timelines .timeline.breakpoints .timeline__row{ } body .qcplayer #qc .timelines .timeline.breakpoints .timeline__row .segment{ display: flex; align-content: center; align-items: center; justify-content: center; color:#000; background: #6f4d00; border: 0 none; } body .qcplayer #qc .timelines .timeline.breakpoints .timeline__row .segment:nth-child(odd){ background: rgb(203 143 3); } .timelines .timecode{ background-color: #201f21; position: absolute; bottom: 20px; padding: 2px 5px; color: #828282; font-size: 12px; pointer-events: none; } .timelines .timecode.start{ left: 0; } .timelines .timecode.end{ right: 0; } .timelines .timeline-scroll .tracks{ position: relative; } .timelines .timeline-scroll .tracks .selection{ background-color: rgba(255, 255, 255, 0.15); border:1px dashed #FDB913; position: absolute; z-index: 50; pointer-events: none; } .timeline-scrollbar{ position: absolute; z-index:6; right: 17px; left: 0; bottom: 0; padding: 0; height: 20px; background-color: #2b2a2b; } .timeline-scrollbar .dragger{ position: absolute; height: 16px; margin: 2px 0; background-color: #a5a5a5; z-index: 1; border-radius: 5px; cursor: grab; } .timeline-scrollbar .dragger:hover{ background-color: #fff; } .timeline-scrollbar.dragging .dragger{ cursor: grabbing; } .timeline-scrollbar .currentpos{ position: absolute; height: 100%; width: 1px; background-color: #fff; z-index: 3; top: 0; bottom: 0; } .timeline-scrollbar .mousepos{ position: absolute; height: 100%; width: 1px; background-color: rgba(112, 112, 112, 0.62); z-index: 2; top: 0; bottom: 0; pointer-events: none; } .timeline-scrollbar .currentpos .timecode{ background-color: #FDB913; color: #000; } .timeline-scrollbar .mousepos .timecode{ background-color: rgba(112, 112, 112, 0.62); color:#FFF; } .timelines .timeline-scroll{ overflow-x: hidden; overflow-y: scroll; padding-bottom: 20px; flex: 1; } body #video #v_menu .v_SpotQCTimeBarArea{ margin-top: -10px; z-index: 3; position: relative; pointer-events: none; } body #video #v_menu .v_SpotQCTimeBarArea .v_totalTimebar{ background: transparent; height: 10px; } body #video #v_menu .v_SpotQCTimeBarArea .v_qcspotbar{ display: block; width: inherit; height: 23px; position: absolute; background: #02b2f58c; border: 1px solid #02b2f5; z-index: 1; } body .qcplayer #video #v_menu .v_totalTimebar .v_progresbar .dot{ height: 21px; width: 1px; right: 0; top: -8px; } .ver-resize, .hor-resize{ background: #000; overflow: hidden; display: flex; justify-content: center; } .ver-resize:hover, .hor-resize:hover{ background: #121212; } .ver-resize > i, .hor-resize > i{ display: block; background: #666; width: 3px; height: 3px; margin: 1px; } .ver-resize{ height: 100%; width: 7px; cursor: col-resize; flex-direction: column; } .hor-resize{ height: 7px; cursor: row-resize; flex-direction: row; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } span.copied-tooltip { position: absolute; right: 100%; white-space: nowrap; background: #FDB913; color: #000; font-size: 12px; padding: 2px 10px; border-radius: 6px; font-weight: bold; display: none; } span.copied-tooltip.on { display: block; } span.gallery-sheet-row{ display: flex !important; width: 100%; flex-direction: row; justify-content: center; align-items: center; }