/*
Theme Name: Lotti 2026
Theme URI:
Description: Lotti Projects
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/
@font-face {font-family: 'ES Klarheit Kurrent'; src: url('fonts/ESKlarheitKurrent-Regular.woff2') format('woff2'),
        url('fonts/ESKlarheitKurrent-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'ES Klarheit Kurrent'; src: url('fonts/ESKlarheitKurrent-Bold.woff2') format('woff2'),
        url('fonts/ESKlarheitKurrent-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap;}

/* ==========================================================================
   Reset
   ========================================================================== */
* {padding: 0; margin: 0; box-sizing: border-box; /*cursor:none;*/}
*,*:focus,*:hover {outline:none; /*cursor:none;*/}
html {height: 100%; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}
[hidden], template {display: none;}
a {background: transparent; text-decoration: none; transition: all 200ms ease-out; color: #000;}
a:active, a:hover {color: #000; outline: 0; transition: all 200ms ease-out;}
ul {list-style: none;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold; font-style: normal;}
img {border: 0;}
button {overflow: visible;}
button, select {text-transform: none;}
button, html input[type="button"],  input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled],
html input[disabled] {cursor: default;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
textarea {overflow: auto;}
textarea, input {outline: none;}
table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}
fieldset {border: none;}
button:focus {outline:0;}
input {border-radius: 0;}
img.alignright {float:right; margin:0 0 1em 1em;}
img.alignleft {float:left; margin:0 1em 1em 0;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em;}
a img.alignleft {float:left; margin:0 1em 1em 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
h1, h2, h3, h4, h5 {font-weight: bold; font-style: normal; font-size: 14px; text-transform: uppercase;}

/* ==========================================================================
   General
   ========================================================================== */
body {height: 100%; font-family: 'ES Klarheit Kurrent'; font-weight: normal; font-style: normal; font-size: 14px; overflow-x: hidden; -webkit-font-smoothing: antialiased;}
.row {width: 100%; margin: 0 auto; max-width: 1200px; padding: 0 10px;}
section {width: 100%; float: left;}
.container {width: 100%; height: 100%; position: relative; padding: 60px 80px 20px 120px; overflow-x: hidden;}
.container.home {background: #adf29c; display: flex; align-items: center; padding-bottom: 60px;}
.container nav {font-size: 16px; text-transform: uppercase; position: fixed; top: 20px; left: 20px; z-index: 5;}
.container.home nav, .container.home .featured {flex-grow: 1; position: initial; flex: 0 0 50%;}
.container.home  nav ul {width: 100%; text-align: center;}
.container nav li {display: inline-block;}
.container nav li a {padding: 5px; text-align: center;}
.container nav li a:hover, .container nav li.current-menu-item a {font-weight: bold;}
.container.home .featured .slick-track {display: flex !important; justify-content: center; align-items: center;}
.featured .slider {min-width: 100%;}
.featured .slider .slide {text-align: center; opacity: 0;}
.featured .slider .slide a {display: block; text-align: center; width: calc(50vw - 100px);}
.featured .slider .slide img {width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 140px);}
.logo {position: fixed; left: 20px; bottom: 20px; z-index: 10;}
.linkwork {position: fixed; left: 20px; top: 20px; text-transform: uppercase; font-size: 20px; z-index: 10;}
.linkabout {position: fixed; right: 20px; top: 20px; text-transform: uppercase; font-size: 20px; z-index: 10;}
.loader {position: fixed; top: 0; left:0; z-index: 100; background: #adf29c; width:100%; height: 100%; /*display: none; */}
.logoload {position: absolute; right: 20px; bottom: 25px; z-index: 10;}
.work, .taxo {width: 100%; display: flex; justify-content: flex-end; overflow-x: hidden;}
.grid, .thelist {width: 100%; max-width: 50vw;}
.grid {overflow-y: hidden;}
.prj {}
.prj a {display: flex; padding: 7px 7px 15px 7px; flex-direction: column;}
.prj img, .prj video {width: 100%; max-width: 100%; height: auto; margin-bottom: 8px;}
.prj p {text-align: center; text-transform: uppercase; font-size: 16px;}
.prj p span {font-weight: bold;}
.about {width: 100%; height: 100%; max-height: 100vh; position: absolute; top: 0; left: 0; text-transform: uppercase; font-size: 13px !important;}
.about .cover {width: 50%; height: 100%; background-size: cover; background-position: center center; position: absolute; top: 0; right: 0;}
.about .aboutcontent {display: flex; flex-direction: column; justify-content: center; align-content: center; padding: 80px 160px; width: 50%; height: 100%; background: #adf29c; position: absolute; top: 0; left: 0;}
.about .aboutcontent .bloc {max-width: 600px;}
.about .aboutcontent .bloc.double {display: flex; margin-top: 40px;}
.about .aboutcontent .bc {width: 50%;}
.about .aboutcontent .bd {margin-bottom: 10px;}
.about .aboutcontent .bloc a:hover {font-style: italic;}
.about .aboutcontent .bloc h1 {position: initial;}
.thelist {display: flex; justify-content: space-around; font-size: 15px; text-transform: uppercase; line-height: 1.5;}
.thelist h2 {margin-bottom: 20px;}
.thelist a:hover {font-style: italic;}
.single {display: flex; flex-direction: column; align-items: center; font-size: 14px; text-transform: uppercase;}
.single .galimg {max-width: 750px; width: 100%; display: flex; padding: 0 0 30px 0; position: relative; justify-content: center; align-items: center;}
.single .galimg img {width: auto; max-width: 100%; display: block; height: auto; align-self: center; max-height: calc(100vh - 185px);}
.single h1 {background: #fff; width: 100%; position: fixed; top: 0px; font-size: 20px; text-align: center; line-height: 1; z-index: 3; padding: 100px 40px 14px 40px;}
.single .post {padding-bottom: 30px; max-width: 750px; text-align: center;}
.single .post p {display: inline-block; font-size: 16px; padding-right: 8px;}
.vid {width: 100%; aspect-ratio : 16/9; max-width: 960px; /*padding:56.25% 0 0 0;*/ position:relative; z-index: 2; margin-bottom: 40px;}
.single-work .container {padding-top: 150px;}
.taxonomy {display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; text-transform: uppercase; padding-top: 60px;}
.taxonomy h1 {font-size: 20px;}
.taxonomy article {max-width: 750px; width: 100%; display: flex; padding: 20px 0 40px 0; justify-content: flex-end;}
.taxonomy article a {display: flex; flex-direction: column; align-items: flex-end;}
.taxonomy article img {width: auto; max-width: 100%; display: block; height: auto; align-self: center; max-height: 100%; margin: 0 auto;}
.taxonomy article h2 {font-size: 18px; margin: 10px 0 0 0; font-weight: normal;}
.arrowdown {position: fixed; right: 30px; bottom: 10px;}
.arrowdown img {width: 40px; height: 40px; display: block;}
span.collabwith {font-size: 15px; font-weight: 600; text-transform: uppercase;}
.taxo {justify-content: space-between;}
.taxo.clnt {justify-content: flex-end;}

/* ==========================================================================
   Plugins
   ========================================================================== */
.cursor {position: fixed; left: 0; top: 0; pointer-events: none;}
.cursor--dot {width: 23px; height: 23px; left: -3px; top: -3px; border-radius: 50%; z-index: 11000; background: #000; opacity: .5;}
.cursor--canvas {width: 100vw; height: 100vh; z-index: 12000;}
.flexmasonry {display: flex; flex-flow: column wrap; align-content: space-between;}
.flexmasonry-item {width: 100%;}
.flexmasonry-cols-2 .flexmasonry-item {width: 50%;}
.flexmasonry-cols-3 .flexmasonry-item {width: 33.333%;}
.flexmasonry-cols-4 .flexmasonry-item {width: 25%;}
.flexmasonry-cols-5 .flexmasonry-item {width: 20%;}
.flexmasonry-cols-6 .flexmasonry-item {width: 16.666%;}
.flexmasonry-cols-7 .flexmasonry-item {width: 14.285%;}
.flexmasonry-cols-8 .flexmasonry-item {width: 12.5%;}
.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) {order: 1;}
.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n) {order: 2;}
.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+1) {order: 1;}
.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+2) {order: 2;}
.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n) {order: 3;}
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+1) {order: 1;}
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+2) {order: 2;}
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+3) {order: 3;}
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n) {order: 4;}
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+1) {order: 1;}
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+2) {order: 2;}
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+3) {order: 3;}
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+4) {order: 4;}
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n) {order: 5;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+1) {order: 1;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+2) {order: 2;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+3) {order: 3;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+4) {order: 4;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+5) {order: 5;}
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n) {order: 6;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+1) {order: 1;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+2) {order: 2;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+3) {order: 3;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+4) {order: 4;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+5) {order: 5;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+6) {order: 6;}
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n) {order: 7;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+1) {order: 1;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+2) {order: 2;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+3) {order: 3;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+4) {order: 4;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+5) {order: 5;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+6) {order: 6;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+7) {order: 7;}
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n) {order: 8;}
.flexmasonry-break {content: ""; flex-basis: 100%; width: 0 !important; margin: 0;}
.flexmasonry-break-1 {order: 1;}
.flexmasonry-break-2 {order: 2;}
.flexmasonry-break-3 {order: 3;}
.flexmasonry-break-4 {order: 4;}
.flexmasonry-break-5 {order: 5;}
.flexmasonry-break-6 {order: 6;}
.flexmasonry-break-7 {order: 7;}
/* Slick Slider */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
.slick-dotted.slick-slider {margin-bottom: 30px;}
.slick-dots {position: absolute; top: 10px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
.slick-dots li {position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 0px; padding: 0; cursor: pointer;}
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
.slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {opacity: 1;}
.slick-dots li button:before {font-size: 34px; line-height: 20px; position: absolute; top: 0; left: 0; width: 14px; height: 14px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.slick-dots li.slick-active button:before {opacity: .75; color: black;}

/* ==========================================================================
   Animations
   ========================================================================== */

/* ==========================================================================
   Queries
   ========================================================================== */
@media only screen and (max-width: 1380px) {}
@media only screen and (max-width: 810px) {
    .container {padding: 80px 20px 40px 20px;}
    .container.home {flex-direction: column; padding: 40px 20px;}
    .container.home nav {flex: 0 0 100%; display: flex; justify-content: center; align-items: center;}
    .container.home .featured {display: none;}
    .featured .slider .slide a {width: 100vw;}
    .grid, .thelist {max-width: 100vw;}
    .taxo {align-items: center; min-height: calc(100vh - 120px);}
    .about .cover {position: initial; width: 100%; height: 80vh;}
    .about .aboutcontent {position: initial; width: 100%; height: initial; min-height: 30vh; padding: 80px 60px;}
    .about .aboutcontent .bloc.double {flex-direction: column;}
    .about .aboutcontent .bc {width: 100%; text-align: left !important;}
    .taxo {flex-direction: column;}
    .collabwith {align-self: flex-start; margin-bottom: 30px;}
}

/* ==========================================================================
   Animations JS
   ========================================================================== */
.cover:after {content: ""; width: 100%; height: 100%; position: absolute; background-color: #adf29c; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}
.loaded .cover:after {content: ""; width: 0%; height: 100%; position: absolute; background-color: #adf29c; left: 0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.aboutcontent .bloc {opacity: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.loaded .aboutcontent .bloc {opacity: 1;}
.exited .cover:after {/*background-color: #FFFFFF;*/}
.container:after {content: ""; width: 100%; height: 0%; bottom: 0; left: 0; position: absolute; background-color: #FFFFFF; -webkit-transition: height 1s ease 2s; -moz-transition: height 1s ease 2s; -o-transition: height 1s ease 2s; transition: height 1s ease 2s;}
.exited.container:after {content: ""; width: 100%; height: 100%; bottom: 0; left: 0; position: absolute; background-color: #FFFFFF; -webkit-transition: height 1s ease 2s; -moz-transition: height 1s ease 2s; -o-transition: height 1s ease 2s; transition: height 1s ease 2s; z-index: 12;}
.fexited.container:after {content: ""; width: 100%; height: 100%; bottom: 0; left: 0; position: absolute; background-color: #FFFFFF; -webkit-transition: height .2s ease .2s !important; -moz-transition: height .2s ease .2s !important; -o-transition: height .2s ease .2s !important; transition: height .2s ease .2s !important; z-index: 12;}
.exited.container {/*height: 0;*/}
.container:before {content: ""; width: 100%; height: 100%; top: 0; left: 100%; position: absolute; background-color: #AEFF98; -webkit-transition: left 1s ease 2s; -moz-transition: left 1s ease 2s; -o-transition: left 1s ease 2s; transition: left 1s ease 2s; z-index: 10;}
.single .leftintro.container:before {content: ""; width: 100%; height: 100%; top: 0; left: 0%; position: absolute; background-color: #AEFF98; -webkit-transition: left .5s ease; -moz-transition: left .5s ease; -o-transition: left .5s ease; transition: left .5s ease; z-index: 10;}
.tohome.container:before {content: ""; width: 100%; height: 0%; top: 0%; left: 0%; position: absolute; background-color: #AEFF98; /*-webkit-transition: height .5s ease;*/ /*-moz-transition: height .5s ease;*/ /*-o-transition: height .5s ease;*/ /*transition: height .5s ease;*/ z-index: 10;}
.topintro.tohome.container:before {content: ""; width: 100%; height: 100%; top: 0%; left: 0%; position: absolute; background-color: #AEFF98; -webkit-transition: height .8s ease; -moz-transition: height .8s ease; -o-transition: height .8s ease; transition: height .8s ease; z-index: 10;}
.slides-wrap {height: 100%; max-height: calc(100vh - 40px); display: flex; flex-flow: column wrap; left: 0px; position: relative; -webkit-transition: left 0.3s linear; -moz-transition: left 0.3s linear; -o-transition: left 0.3s linear; transition: left 0.3s linear;}
*:focus,a:hover {cursor: url("img/pointer-h.png") 16 16, default;}
.loader {animation-name: loaderfadeout; animation-duration: 1.0s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 1.8s;}
.loader.out {opacity: 0; animation-name: loaderfadein; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: .1s;}
/*.loader .out img.lott {*/
/*    height: 80px;*/
/*    width: 153px;*/
/*    right: 50px;*/
/*    object-fit: cover;*/
/*    object-position: left;*/
/*    animation-name: lottanime;*/
/*    animation-duration: 1.0s;*/
/*    animation-fill-mode: forwards;*/
/*    animation-timing-function: ease-in-out;*/
/*    animation-delay: 0.8s;*/
/*}*/
.loader.out img.i {animation-name: ianimeInit !important; animation-duration: 0.8s !important; animation-fill-mode: forwards; animation-timing-function: linear; animation-delay: 0.1s !important;}
.loader.out .logoload img.i {right: calc(100vw - 90px);}
.loader .logoload {width: 100%; height: 80px; /*overflow: hidden;*/}
.loader .logoload img {position: absolute;}
.loader .logoload img.lott {height: 80px; width: 153px; right: 50px; object-fit: cover; object-position: left; animation-name: lottanime; animation-duration: 1.0s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 0.8s;}
.loader .logoload img.i {right: 0; animation-name: ianime; animation-duration: 1.0s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 0.8s;}
@keyframes ianime {
    from {right: 0px;}
    to {right: calc(100vw - 90px);}
}
@keyframes lottanime {
    from {right: 50px; width: 153px; /*opacity: 1;*/}
    80% {width: 0px;}
    to {right: calc(100vw - 90px); width: 0px; /*opacity: 0;*/}
}
@keyframes loaderfadeout {
    from {opacity: 1; display: block;}
    to {opacity: 0; display: none; z-index: -5;}
}
@keyframes loaderfadein {
    from {opacity: 0; display: none; z-index: -5;}
    to {opacity: 1; display: block;}
}
@keyframes ianimeInit {
    from {right: calc(100vw - 90px);}
    to {right: calc(100vw + 200px);}
}
@keyframes lottanimeInit {
    from {right: 50px; width: 153px; /*opacity: 1;*/}
    80% {width: 0px;}
    to {right: calc(100vw - 90px); width: 0px; /*opacity: 0;*/}
}
.featured .slider .slide video {width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 140px);}
/*** video player ***/
.itvid {position: relative; z-index: 2; padding-bottom: 60px;}
.itvid .controls {width: 100%; z-index: 11; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 0; text-transform: uppercase; position: absolute; bottom: 25px; left: 0;}
.itvid .fullscreen, .itvid .mute, .itvid .btn-play {/*display: block;*/ text-align: center; font-family: 'Pitch Sans', sans-serif; font-weight: 500; color: #000; display: inline-block; cursor: pointer; font-size: 11px; font-weight: bold; text-transform: uppercase; margin: 0;}
.playbtn {position: absolute; width: 70px; height: 70px; top: calc(50% - 70px); left: calc(50% - 35px); z-index: 9999;}
.playbtn:hover {cursor: pointer; opacity: 0.7; width: 110px; height: 110px; top: calc(50% - 115px); left: calc(50% - 55px);}
.progress-full {-webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; height: 5px; position: relative; cursor: pointer; display: inline-block; margin: 0;}
.progress {height: 12px; display: block; background: url("img/dot.png") center left repeat-x; width: 0%;}
.btn-play {padding-right: 20px;}
.fullscreen, .mute {padding-left: 20px;}
.fullscreen .slick-active {width: 100vw;}
.fullscreen {padding: 0;}
.container.fullscreen .item.slick-slide {background-color: #000; height: 100vh !important; position: fixed !important; width: 100vw !important; left: 0 !important; right: 0 !important;}
.container.fullscreen .slider {height: 100vh;}
.fullscreen.itvid {position: relative; background-color: #000; height: 100vh !important; position: fixed !important; width: 100vw !important; left: 0 !important; top: 0 !important; z-index: 9999 !important;}
.fullscreen.itvid .fullscreen, .fullscreen.itvid .mute, .fullscreen.itvid .btn-play {color: #fff;}
.fullscreen.itvid .controls {width: 99vw; left: 0; z-index: 11; position: fixed; bottom: 5px; padding: 20px; text-align: left; max-width: 100%;}
.container.fullscreen .slider .item .counter-info, .slider .item .fullscreen .itvid {display: block !important; max-width: 1200px; margin: 0 auto;}
.fullscreen.itvid .progress {-webkit-filter: invert(100%); filter: invert(100%);}
.navigation.fullscreen {display: none;}
.home .container.fullscreen .slick-track, .slider-mode .container.fullscreen .slick-track {width: 100vw !important;}
.itvid .jsvideo {width: 100%; max-height: calc(100vh - 195px); max-width: 70vw;}
.fullscreen.itvid .jsvideo {width: 100%; max-height: 100%; max-width: 100vw;}
.item img {max-width: 100%; width: auto; height: auto; max-height: calc(100vh - 160px); display: block; margin: 0 auto; background: #f6f6f6 url('img/bg-loader.gif') center center
no-repeat;}
.item video {min-width:200px; min-height: 200px; max-width: 100%; width: auto; height: auto; max-height: calc(100vh - 200px); display: block; margin: 0 auto; background: #ffffff url('img/bg-loader.gif') center center
no-repeat;}
.mute-toggle {display: block !important; width: 31px  !important; height: 31px  !important; cursor: pointer; opacity:0.8; float: right; position: absolute; bottom: 7px; right: 5px; z-index: 888;}