@font-face {
 font-family: "BoldFont";
 src: url("../fonts/bold.otf") format("opentype");
}
@font-face {
 font-family: "MedFont";
 src: url("../fonts/bold.otf") format("opentype");
}
@font-face {
 font-family: "LightFont";
 src: url("../fonts/light.otf") format("opentype");
}
.kerning {
 display: flex;
}

.letter {
 font-family: "BoldFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
 display: inline-block;
}
@media (max-width: 600px) {
 .letter {
  font-size: 9rem;
  line-height: 10rem;
 }
}

.letter.a {
 margin-left: -0.06em; /* Kerning value: -50 */
}

.letter.i {
 margin-left: -0.05em; /* Kerning value: -50 */
}

.letter.r {
 margin-left: -0.05em; /* Kerning value: -50 */
}

.letter.text {
 letter-spacing: -4%;
}

*, *::before, *::after {
 box-sizing: border-box;
}

* {
 margin: 0;
}

html, body {
 height: 100%;
}

body {
 -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}

input, button, textarea, select {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 3rem;
 line-height: 4rem;
}
@media (max-width: 600px) {
 input, button, textarea, select {
  font-size: 9rem;
  line-height: 12rem;
 }
}

p, h1, h2, h3, h4, h5, h6 {
 overflow-wrap: break-word;
}

#root, #__next {
 isolation: isolate;
}

.lines {
 background-color: #fff;
 background-position: center top;
 background-size: 100rem 1rem;
 background-repeat: repeat-y;
 background-image: url("/user/themes/mskn/images/lines.svg");
}

* {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 1.2rem;
 line-height: 1.6rem;
 transition: color 0.5s;
 transition: opacity 0.5s;
}
@media (max-width: 600px) {
 * {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}

body {
 width: 100%;
 margin: auto;
 -ms-overflow-style: none;
}
body.noscroll {
 overflow: hidden;
 position: fixed;
}

body::-webkit-scrollbar {
 display: none;
}

.light {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .light {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
.light p {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-bottom: 2rem;
}
@media (max-width: 600px) {
 .light p {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}

.lightSma {
 font-family: "LightFont";
 font-size: 0.9rem;
 line-height: 1.2rem;
}
@media (max-width: 600px) {
 .lightSma {
  font-size: 2rem;
  line-height: 2.4rem;
 }
}

.upper {
 text-transform: uppercase;
}

.txtMed, .txtMed > * {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 3rem;
 line-height: 4rem;
}
@media (max-width: 600px) {
 .txtMed, .txtMed > * {
  font-size: 9rem;
  line-height: 12rem;
 }
}

.bold, strong {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .bold, strong {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}

.bigBold {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .bigBold {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}

.separator {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
 padding: 0 1rem;
}
@media (max-width: 600px) {
 .separator {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
@media (max-width: 600px) {
 .separator {
  padding: 0 3rem;
 }
}

@media (max-width: 600px) {
 .hidemob {
  opacity: 0;
 }
}

.nobreak {
 white-space: nowrap;
}

h1 {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
}
@media (max-width: 600px) {
 h1 {
  font-size: 9rem;
  line-height: 10rem;
 }
}
@media (max-width: 600px) {
 h1 {
  font-size: 9rem;
  line-height: 12rem;
 }
}

h2 {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 3rem;
 line-height: 4rem;
}
@media (max-width: 600px) {
 h2 {
  font-size: 9rem;
  line-height: 12rem;
 }
}

hr {
 width: 100%;
 border: 0.015rem solid black;
 margin: 0.7rem 0;
}
@media (max-width: 600px) {
 hr {
  margin: 1.5rem 0;
 }
}

@media (max-width: 600px) {
 .blockMob {
  display: block;
 }
}

@media (max-width: 600px) {
 .fullscreen-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Added dynamic viewport height */
  z-index: 1000;
  background-color: rgb(255, 255, 255);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
 .fullscreen-container::-webkit-scrollbar {
  display: none;
 }
 .fullscreen-image {
  height: 100vh;
  height: 100dvh; /* Added dynamic viewport height */
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  max-width: none;
  min-width: auto;
  display: block;
 }
}
form input, form input:focus {
 padding: 1rem;
 height: 6rem;
 margin: 2rem 0;
 border: solid #000000 0.15rem;
 border-radius: 0;
 outline: none;
 width: 56rem;
}
@media (max-width: 600px) {
 form input, form input:focus {
  padding: 3rem;
  height: 14rem;
  margin: 6rem 0;
  width: 100%;
 }
}
@media (max-width: 600px) {
 form input, form input:focus {
  border: solid #000000 0.45rem;
 }
}
form textarea, form textarea:focus {
 padding: 1rem;
 height: 30rem;
 margin: 2rem 0;
 border: solid #000000 0.15rem;
 border-radius: 0;
 outline: none;
 width: 56rem;
}
@media (max-width: 600px) {
 form textarea, form textarea:focus {
  padding: 3rem;
  height: 70rem;
  margin: 6rem 0;
  width: 100%;
 }
}
@media (max-width: 600px) {
 form textarea, form textarea:focus {
  border: solid #000000 0.45rem;
 }
}

.buttons {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}
@media (max-width: 600px) {
 .buttons {
  width: 100%;
 }
}
.buttons .button, .buttons button, .buttons button:focus {
 color: #fff;
 background-color: #000000;
 text-align: center;
 font-weight: normal;
 padding: 2rem 6rem;
 height: 6rem;
 line-height: 2rem;
 margin: 2rem 0;
 width: auto;
 border: solid #000000 0.15rem;
 border-radius: 0;
 outline: none;
}
@media (max-width: 600px) {
 .buttons .button, .buttons button, .buttons button:focus {
  line-height: 8rem;
  padding: 3rem;
  height: 14rem;
  margin: 6rem 0;
  width: 100%;
 }
}
@media (max-width: 600px) {
 .buttons .button, .buttons button, .buttons button:focus {
  border: solid #000000 0.45rem;
 }
}
.buttons .button:hover, .buttons button:hover, .buttons button:focus:hover {
 background-color: #684e87;
 border: solid #684e87 0.15rem;
}
@media (max-width: 600px) {
 .buttons .button:hover, .buttons button:hover, .buttons button:focus:hover {
  border: solid #684e87 0.45rem;
 }
}
.buttons label {
 display: none;
}

.ensemble {
 position: fixed;
 right: 0;
 top: 30rem;
 width: 4rem;
 height: 32rem;
}
@media (max-width: 600px) {
 .ensemble {
  top: 78rem;
 }
}

a, a:visited, a:focus, a:active {
 color: #000000;
 text-decoration: none;
}
a:hover, a:hover > *, a:visited:hover, a:visited:hover > *, a:focus:hover, a:focus:hover > *, a:active:hover, a:active:hover > * {
 color: #684e87;
}
a:hover .hidehover, a:hover > * .hidehover, a:visited:hover .hidehover, a:visited:hover > * .hidehover, a:focus:hover .hidehover, a:focus:hover > * .hidehover, a:active:hover .hidehover, a:active:hover > * .hidehover {
 opacity: 1;
 color: #000000;
}

.under {
 text-decoration: underline;
}

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

.hidehover {
 opacity: 0;
}
@media (max-width: 600px) {
 .hidehover {
  opacity: 1;
 }
}

body {
 position: relative;
 top: 0;
 transition: top 1s;
 transition-timing-function: cubic-bezier(0.05, 0.55, 0.4, 1.02);
}
body.close {
 top: -100vh;
}

#welcome {
 position: relative;
 overflow: hidden;
 height: 100vh;
 z-index: 9999;
 background-position: bottom;
}
#welcome video {
 position: absolute;
 height: 100vh;
 width: 100vw;
 -o-object-fit: cover;
    object-fit: cover;
 bottom: 0;
}
#welcome img {
 position: absolute;
 height: 100vh;
 width: 100vw;
 -o-object-fit: cover;
    object-fit: cover;
 bottom: 0;
}

#mutebtn {
 cursor: pointer;
 position: absolute;
 width: 8rem;
 height: 8rem;
 bottom: 0;
 right: 0;
}
#mutebtn:hover {
 opacity: 0.5;
}
#mutebtn img {
 width: 8rem !important;
 height: 8rem !important;
 -o-object-fit: initial !important;
    object-fit: initial !important;
}
@media (max-width: 600px) {
 #mutebtn {
  width: 24rem !important;
  height: 24rem !important;
  bottom: 0;
  right: 0;
 }
 #mutebtn img {
  width: 24rem !important;
  height: 24rem !important;
 }
}

#content {
 width: 84rem;
 margin: auto;
 min-height: calc(100vh - 38rem);
}
@media (max-width: 600px) {
 #content {
  width: 100rem;
 }
}

nav {
 width: 84rem;
 height: 18rem;
 margin: auto;
}
@media (max-width: 600px) {
 nav {
  height: 50rem;
 }
}
nav .nav {
 display: flex;
 justify-content: space-around;
 height: 5rem;
}
nav .logo {
 position: absolute;
 left: calc(50vw - 42.35rem);
 margin-top: 2rem;
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
}
@media (max-width: 600px) {
 nav .logo {
  font-size: 9rem;
  line-height: 10rem;
 }
}
@media (max-width: 600px) {
 nav .logo {
  position: absolute;
  margin-top: 12rem;
 }
}
@keyframes ticker {
 0% {
  transform: translate3d(0, 0, 0);
  visibility: visible;
 }
 45% {
  transform: translate3d(0, 0, 0);
 }
 50% {
  transform: translate3d(-100vh, 0, 0);
 }
 95% {
  transform: translate3d(-100vh, 0, 0);
 }
 100% {
  transform: translate3d(-200vh, 0, 0);
 }
}
nav .jobsBtn {
 display: none;
}
nav .ticker-wrap {
 position: fixed;
 bottom: 0;
 overflow: hidden;
 box-sizing: content-box;
 height: 8rem;
 line-height: 8rem;
 width: calc(100vh - 12rem);
 bottom: 0rem;
 transform-origin: 0% 100%;
 transform: rotate(-90deg) translateY(92rem);
}
@media (max-width: 600px) {
 nav .ticker-wrap {
  height: 11rem;
  width: calc(100vh - 60rem);
 }
}
nav .ticker-wrap .ticker {
 display: inline-block;
 height: 4rem;
 line-height: 4rem;
 white-space: nowrap;
 box-sizing: content-box;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-name: ticker;
 animation-duration: 25s;
}
nav .ticker-wrap .ticker__item {
 background-color: #FFF;
 display: inline-block;
 width: 100vh;
 padding: 0 0 0 4rem;
}
nav .menuBtn {
 position: fixed;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 width: 8rem;
 height: 8rem;
 text-align: center;
 line-height: 8rem;
 right: 0;
 transform-origin: 0;
}
@media (max-width: 600px) {
 nav .menuBtn {
  z-index: 99;
 }
}
nav #menu {
 position: fixed;
 z-index: 999;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 height: -webkit-fill-available;
 background-color: #fff;
 transform: translateX(100%);
 transition: transform 0.5s;
 transition-timing-function: cubic-bezier(0.05, 0.55, 0.4, 1.02);
 will-change: transform;
}
nav #menu.open {
 transform: translateX(0);
}
nav #menuList {
 width: 84rem;
 margin: auto;
 margin-top: 6.6rem;
 height: calc(100vh - 11rem);
 display: flex;
 flex-direction: column;
 justify-content: start;
}
nav #menuList a {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
}
@media (max-width: 600px) {
 nav #menuList a {
  font-size: 9rem;
  line-height: 10rem;
 }
}
@media (max-width: 600px) {
 nav #menuList a {
  font-family: "MedFont";
  font-feature-settings: "ss03" 1;
  font-size: 3rem;
  line-height: 4rem;
  display: block;
 }
}
@media (max-width: 600px) and (max-width: 600px) {
 nav #menuList a {
  font-size: 9rem;
  line-height: 12rem;
 }
}
nav #menuList span {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
}
@media (max-width: 600px) {
 nav #menuList span {
  font-size: 9rem;
  line-height: 10rem;
 }
}
@media (max-width: 600px) {
 nav #menuList span {
  font-family: "MedFont";
  font-feature-settings: "ss03" 1;
  font-size: 3rem;
  line-height: 4rem;
  display: block;
 }
}
@media (max-width: 600px) and (max-width: 600px) {
 nav #menuList span {
  font-size: 9rem;
  line-height: 12rem;
 }
}
nav #menuList .tiret {
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 4.5rem;
 line-height: 5rem;
 font-weight: normal;
}
@media (max-width: 600px) {
 nav #menuList .tiret {
  font-size: 9rem;
  line-height: 10rem;
 }
}
@media (max-width: 600px) {
 nav #menuList .tiret {
  display: none;
  font-family: "MedFont";
  font-feature-settings: "ss03" 1;
  font-size: 3rem;
  line-height: 4rem;
 }
}
@media (max-width: 600px) and (max-width: 600px) {
 nav #menuList .tiret {
  font-size: 9rem;
  line-height: 12rem;
 }
}
nav #menuList a.active {
 color: #684e87;
}

#footer {
 width: 100rem;
 background-color: #fbfbfb;
 margin: 15rem 0 15rem 0;
 padding: 8rem;
}
@media (max-width: 600px) {
 #footer {
  height: 26rem;
  flex-wrap: wrap;
 }
 #footer span, #footer span > a {
  line-height: 6rem;
  height: 6rem;
 }
}

.footerMenu {
 width: 84rem;
 display: flex;
 justify-content: space-between;
 height: 10rem;
}
@media (max-width: 600px) {
 .footerMenu {
  height: 26rem;
  flex-wrap: wrap;
 }
 .footerMenu span, .footerMenu span > a {
  line-height: 6rem;
  height: 6rem;
 }
}

.footerMenu2 {
 width: 84rem;
 height: 10rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.footerMenu2 span > .nav {
 height: auto;
}
@media (max-width: 600px) {
 .footerMenu2 {
  height: 26rem;
  flex-wrap: wrap;
 }
 .footerMenu2 span, .footerMenu2 span > a {
  line-height: 6rem;
  height: 6rem;
 }
}

#top2 {
 height: 24rem;
}

.lang {
 display: flex;
 width: 6rem;
 justify-content: space-between;
}

.module {
 position: relative;
 margin-bottom: 12rem;
}
.module img {
 -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 600px) {
 .module {
  margin-bottom: 24rem;
 }
}

.bottomMargSmall {
 margin-bottom: 4rem;
}
@media (max-width: 600px) {
 .bottomMargSmall {
  margin-bottom: 8rem;
 }
}

.legend {
 position: relative;
 line-height: 4rem;
}
@media (max-width: 600px) {
 .legend {
  line-height: 6rem;
  padding-top: 3rem;
  margin-left: 8rem;
 }
}

.north {
 position: absolute;
 width: 4rem;
 height: 4rem;
 bottom: -4rem;
 right: -0.75rem;
}
@media (max-width: 600px) {
 .north {
  width: 12rem;
  height: 12rem;
  bottom: -12rem;
  right: 7.6rem;
 }
}

.texte {
 display: flex;
 justify-content: space-between;
}
@media (max-width: 600px) {
 .texte {
  width: 77rem;
  display: block;
  margin-bottom: 15rem;
  margin-left: 8rem;
  margin-right: 8rem;
 }
}

.texteTitle {
 width: 28rem;
 margin-right: 3rem;
}

.teamList {
 margin-bottom: 8rem;
 width: 70rem;
}
@media (max-width: 600px) {
 .teamList {
  width: 77rem;
  margin-bottom: 15rem;
  margin-left: 8rem;
  margin-right: 8rem;
 }
}
@media (max-width: 600px) {
 .teamList hr {
  margin: 8rem 0;
 }
}
.teamList .nom {
 width: 22rem;
 display: inline-block;
}
@media (max-width: 600px) {
 .teamList .nom {
  width: 100%;
  display: block;
 }
}
.teamList .titre {
 width: 22rem;
 display: inline-block;
}
@media (max-width: 600px) {
 .teamList .titre {
  width: 100%;
  display: block;
 }
}

.works {
 margin-bottom: 8rem;
 width: 70rem;
}
@media (max-width: 600px) {
 .works {
  width: 77rem;
  margin-bottom: 15rem;
  margin-left: 8rem;
  margin-right: 8rem;
 }
}
.works .projectTitle {
 display: inline-block;
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 3rem;
 line-height: 4rem;
}
@media (max-width: 600px) {
 .works .projectTitle {
  font-size: 9rem;
  line-height: 12rem;
 }
}
@media (max-width: 600px) {
 .works .projectTitle {
  display: inline;
  width: 63rem;
  font-family: "MedFont";
  font-feature-settings: "ss03" 1;
  font-size: 3rem;
  line-height: 4rem;
 }
}
@media (max-width: 600px) and (max-width: 600px) {
 .works .projectTitle {
  font-size: 9rem;
  line-height: 12rem;
 }
}
@media (max-width: 600px) {
 .works .projectTitle a {
  font-family: "MedFont";
  font-feature-settings: "ss03" 1;
  font-size: 3rem;
  line-height: 4rem;
 }
}
@media (max-width: 600px) and (max-width: 600px) {
 .works .projectTitle a {
  font-size: 9rem;
  line-height: 12rem;
 }
}
.works .lieu {
 width: 16rem;
 display: inline-block;
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .lieu {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
.works .lieu a {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .lieu a {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
@media (max-width: 600px) {
 .works .lieu {
  width: 83rem;
 }
}
.works .type {
 width: 18rem;
 display: inline-block;
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .type {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
.works .type a {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .type a {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
@media (max-width: 600px) {
 .works .type {
  width: 83rem;
 }
}
.works .date {
 width: 8rem;
 display: inline-block;
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .date {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
.works .date a {
 font-family: "LightFont";
 font-size: 1.2rem;
 line-height: 1.6rem;
}
@media (max-width: 600px) {
 .works .date a {
  font-size: 3.5rem;
  line-height: 6rem;
 }
}
@media (max-width: 600px) {
 .works .date {
  width: 83rem;
 }
}

.productList {
 table-layout: auto;
 position: relative;
 width: 70rem;
}
@media (max-width: 600px) {
 .productList tr {
  display: block;
  float: left;
  padding: 3rem 0;
 }
}
.productList tr:hover td a {
 color: #684e87;
 cursor: pointer;
}
@media (max-width: 600px) {
 .productList td {
  display: block;
  float: left;
  padding: 0;
 }
}
@media (max-width: 600px) {
 .productList td:first-child {
  width: 9rem;
 }
}
@media (max-width: 600px) {
 .productList td:nth-child(2) {
  width: 77rem;
 }
}
@media (max-width: 600px) {
 .productList td:nth-child(4) {
  padding-left: 3rem;
 }
}
@media (max-width: 600px) {
 .productList td:last-child {
  width: 100%;
 }
}

.jobsList {
 table-layout: auto;
 position: relative;
 width: 70rem;
}
@media (max-width: 600px) {
 .jobsList tr {
  display: block;
  float: left;
  padding: 3rem 0;
 }
}
.jobsList tr:hover td a {
 color: #684e87;
 cursor: pointer;
}
@media (max-width: 600px) {
 .jobsList td {
  display: block;
  float: left;
  padding: 0;
 }
}
@media (max-width: 600px) {
 .jobsList td:first-child {
  width: 9rem;
 }
}
@media (max-width: 600px) {
 .jobsList td:nth-child(2) {
  width: 77rem;
 }
}
@media (max-width: 600px) {
 .jobsList td:last-child {
  width: 100%;
 }
}

.texteCol {
 width: 33rem;
}
@media (max-width: 600px) {
 .texteCol {
  width: 77rem;
 }
 .texteCol .image {
  width: 77rem;
  height: 77rem;
 }
}

.twoCol {
 width: 28rem;
}
.twoCol .image {
 width: 28rem;
 height: 17rem;
}
@media (max-width: 600px) {
 .twoCol {
  width: 77rem;
  width: 100rem;
 }
 .twoCol .image {
  width: 100rem;
  height: 100rem;
 }
}

.threeCol {
 width: 42rem;
}
.threeCol .image {
 width: 42rem;
 height: 25rem;
}
@media (max-width: 600px) {
 .threeCol {
  width: 77rem;
  width: 100rem;
 }
 .threeCol .image {
  width: 100rem;
  height: 100rem;
 }
}

.fourColSquare {
 width: 56rem;
}
.fourColSquare .image {
 width: 56rem;
 height: 56rem;
}
@media (max-width: 600px) {
 .fourColSquare {
  width: 77rem;
 }
 .fourColSquare .image {
  width: 77rem;
  height: 77rem;
 }
}

.fourCol {
 width: 56rem;
}
.fourCol .image {
 width: 56rem;
 height: 34rem;
}
@media (max-width: 600px) {
 .fourCol {
  width: 77rem;
  width: 100rem;
 }
 .fourCol .image {
  width: 100rem;
  height: 100rem;
 }
}

.fiveCol {
 width: 70rem;
}
.fiveCol .image {
 width: 70rem;
 height: 42rem;
}
@media (max-width: 600px) {
 .fiveCol {
  width: 77rem;
  width: 100rem;
 }
 .fiveCol .image {
  width: 100rem;
  height: 100rem;
 }
}

.sixCol {
 width: 84rem;
}
.sixCol .image {
 width: 84rem;
 height: 51rem;
}
@media (max-width: 600px) {
 .sixCol {
  width: 77rem;
  width: 100rem;
 }
 .sixCol .image {
  width: 100rem;
  height: 100rem;
 }
}

.twoCol.portrait .image {
 height: 37rem;
}
@media (max-width: 600px) {
 .twoCol.portrait {
  width: 77rem;
  width: 100rem;
 }
 .twoCol.portrait .image {
  width: 100rem;
  height: 100rem;
 }
}

.threeCol.portrait .image {
 height: 56rem;
}
@media (max-width: 600px) {
 .threeCol.portrait {
  width: 77rem;
  width: 100rem;
 }
 .threeCol.portrait .image {
  width: 100rem;
  height: 100rem;
 }
}

.fourCol.portrait .image {
 height: 75rem;
}
@media (max-width: 600px) {
 .fourCol.portrait {
  width: 77rem;
  width: 100rem;
 }
 .fourCol.portrait .image {
  width: 100rem;
  height: 100rem;
 }
}

.fiveCol.portrait .image {
 height: 93rem;
}
@media (max-width: 600px) {
 .fiveCol.portrait {
  width: 77rem;
  width: 100rem;
 }
 .fiveCol.portrait .image {
  width: 100rem;
  height: 100rem;
 }
}

.sixCol.portrait .image {
 height: 112rem;
}
@media (max-width: 600px) {
 .sixCol.portrait {
  width: 77rem;
  width: 100rem;
 }
 .sixCol.portrait .image {
  width: 100rem;
  height: 100rem;
 }
}

.pos1 {
 left: 0;
}
@media (max-width: 600px) {
 .pos1 {
  left: 0;
 }
}

.pos2 {
 left: 14rem;
}
@media (max-width: 600px) {
 .pos2 {
  left: 0;
 }
}

.pos3 {
 left: 28rem;
}
@media (max-width: 600px) {
 .pos3 {
  left: 0;
 }
}

.pos4 {
 left: 42rem;
}
@media (max-width: 600px) {
 .pos4 {
  left: 0;
 }
}

.pos5 {
 left: 56rem;
}
@media (max-width: 600px) {
 .pos5 {
  left: 0;
 }
}

.desk-0-0 {
 -o-object-position: 0% 0%;
    object-position: 0% 0%;
}

.desk-0-10 {
 -o-object-position: 0% 10%;
    object-position: 0% 10%;
}

.desk-0-20 {
 -o-object-position: 0% 20%;
    object-position: 0% 20%;
}

.desk-0-30 {
 -o-object-position: 0% 30%;
    object-position: 0% 30%;
}

.desk-0-40 {
 -o-object-position: 0% 40%;
    object-position: 0% 40%;
}

.desk-0-50 {
 -o-object-position: 0% 50%;
    object-position: 0% 50%;
}

.desk-0-60 {
 -o-object-position: 0% 60%;
    object-position: 0% 60%;
}

.desk-0-70 {
 -o-object-position: 0% 70%;
    object-position: 0% 70%;
}

.desk-0-80 {
 -o-object-position: 0% 80%;
    object-position: 0% 80%;
}

.desk-0-90 {
 -o-object-position: 0% 90%;
    object-position: 0% 90%;
}

.desk-0-100 {
 -o-object-position: 0% 100%;
    object-position: 0% 100%;
}

.desk-10-0 {
 -o-object-position: 10% 0%;
    object-position: 10% 0%;
}

.desk-10-10 {
 -o-object-position: 10% 10%;
    object-position: 10% 10%;
}

.desk-10-20 {
 -o-object-position: 10% 20%;
    object-position: 10% 20%;
}

.desk-10-30 {
 -o-object-position: 10% 30%;
    object-position: 10% 30%;
}

.desk-10-40 {
 -o-object-position: 10% 40%;
    object-position: 10% 40%;
}

.desk-10-50 {
 -o-object-position: 10% 50%;
    object-position: 10% 50%;
}

.desk-10-60 {
 -o-object-position: 10% 60%;
    object-position: 10% 60%;
}

.desk-10-70 {
 -o-object-position: 10% 70%;
    object-position: 10% 70%;
}

.desk-10-80 {
 -o-object-position: 10% 80%;
    object-position: 10% 80%;
}

.desk-10-90 {
 -o-object-position: 10% 90%;
    object-position: 10% 90%;
}

.desk-10-100 {
 -o-object-position: 10% 100%;
    object-position: 10% 100%;
}

.desk-20-0 {
 -o-object-position: 20% 0%;
    object-position: 20% 0%;
}

.desk-20-10 {
 -o-object-position: 20% 10%;
    object-position: 20% 10%;
}

.desk-20-20 {
 -o-object-position: 20% 20%;
    object-position: 20% 20%;
}

.desk-20-30 {
 -o-object-position: 20% 30%;
    object-position: 20% 30%;
}

.desk-20-40 {
 -o-object-position: 20% 40%;
    object-position: 20% 40%;
}

.desk-20-50 {
 -o-object-position: 20% 50%;
    object-position: 20% 50%;
}

.desk-20-60 {
 -o-object-position: 20% 60%;
    object-position: 20% 60%;
}

.desk-20-70 {
 -o-object-position: 20% 70%;
    object-position: 20% 70%;
}

.desk-20-80 {
 -o-object-position: 20% 80%;
    object-position: 20% 80%;
}

.desk-20-90 {
 -o-object-position: 20% 90%;
    object-position: 20% 90%;
}

.desk-20-100 {
 -o-object-position: 20% 100%;
    object-position: 20% 100%;
}

.desk-30-0 {
 -o-object-position: 30% 0%;
    object-position: 30% 0%;
}

.desk-30-10 {
 -o-object-position: 30% 10%;
    object-position: 30% 10%;
}

.desk-30-20 {
 -o-object-position: 30% 20%;
    object-position: 30% 20%;
}

.desk-30-30 {
 -o-object-position: 30% 30%;
    object-position: 30% 30%;
}

.desk-30-40 {
 -o-object-position: 30% 40%;
    object-position: 30% 40%;
}

.desk-30-50 {
 -o-object-position: 30% 50%;
    object-position: 30% 50%;
}

.desk-30-60 {
 -o-object-position: 30% 60%;
    object-position: 30% 60%;
}

.desk-30-70 {
 -o-object-position: 30% 70%;
    object-position: 30% 70%;
}

.desk-30-80 {
 -o-object-position: 30% 80%;
    object-position: 30% 80%;
}

.desk-30-90 {
 -o-object-position: 30% 90%;
    object-position: 30% 90%;
}

.desk-30-100 {
 -o-object-position: 30% 100%;
    object-position: 30% 100%;
}

.desk-40-0 {
 -o-object-position: 40% 0%;
    object-position: 40% 0%;
}

.desk-40-10 {
 -o-object-position: 40% 10%;
    object-position: 40% 10%;
}

.desk-40-20 {
 -o-object-position: 40% 20%;
    object-position: 40% 20%;
}

.desk-40-30 {
 -o-object-position: 40% 30%;
    object-position: 40% 30%;
}

.desk-40-40 {
 -o-object-position: 40% 40%;
    object-position: 40% 40%;
}

.desk-40-50 {
 -o-object-position: 40% 50%;
    object-position: 40% 50%;
}

.desk-40-60 {
 -o-object-position: 40% 60%;
    object-position: 40% 60%;
}

.desk-40-70 {
 -o-object-position: 40% 70%;
    object-position: 40% 70%;
}

.desk-40-80 {
 -o-object-position: 40% 80%;
    object-position: 40% 80%;
}

.desk-40-90 {
 -o-object-position: 40% 90%;
    object-position: 40% 90%;
}

.desk-40-100 {
 -o-object-position: 40% 100%;
    object-position: 40% 100%;
}

.desk-50-0 {
 -o-object-position: 50% 0%;
    object-position: 50% 0%;
}

.desk-50-10 {
 -o-object-position: 50% 10%;
    object-position: 50% 10%;
}

.desk-50-20 {
 -o-object-position: 50% 20%;
    object-position: 50% 20%;
}

.desk-50-30 {
 -o-object-position: 50% 30%;
    object-position: 50% 30%;
}

.desk-50-40 {
 -o-object-position: 50% 40%;
    object-position: 50% 40%;
}

.desk-50-50 {
 -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.desk-50-60 {
 -o-object-position: 50% 60%;
    object-position: 50% 60%;
}

.desk-50-70 {
 -o-object-position: 50% 70%;
    object-position: 50% 70%;
}

.desk-50-80 {
 -o-object-position: 50% 80%;
    object-position: 50% 80%;
}

.desk-50-90 {
 -o-object-position: 50% 90%;
    object-position: 50% 90%;
}

.desk-50-100 {
 -o-object-position: 50% 100%;
    object-position: 50% 100%;
}

.desk-60-0 {
 -o-object-position: 60% 0%;
    object-position: 60% 0%;
}

.desk-60-10 {
 -o-object-position: 60% 10%;
    object-position: 60% 10%;
}

.desk-60-20 {
 -o-object-position: 60% 20%;
    object-position: 60% 20%;
}

.desk-60-30 {
 -o-object-position: 60% 30%;
    object-position: 60% 30%;
}

.desk-60-40 {
 -o-object-position: 60% 40%;
    object-position: 60% 40%;
}

.desk-60-50 {
 -o-object-position: 60% 50%;
    object-position: 60% 50%;
}

.desk-60-60 {
 -o-object-position: 60% 60%;
    object-position: 60% 60%;
}

.desk-60-70 {
 -o-object-position: 60% 70%;
    object-position: 60% 70%;
}

.desk-60-80 {
 -o-object-position: 60% 80%;
    object-position: 60% 80%;
}

.desk-60-90 {
 -o-object-position: 60% 90%;
    object-position: 60% 90%;
}

.desk-60-100 {
 -o-object-position: 60% 100%;
    object-position: 60% 100%;
}

.desk-70-0 {
 -o-object-position: 70% 0%;
    object-position: 70% 0%;
}

.desk-70-10 {
 -o-object-position: 70% 10%;
    object-position: 70% 10%;
}

.desk-70-20 {
 -o-object-position: 70% 20%;
    object-position: 70% 20%;
}

.desk-70-30 {
 -o-object-position: 70% 30%;
    object-position: 70% 30%;
}

.desk-70-40 {
 -o-object-position: 70% 40%;
    object-position: 70% 40%;
}

.desk-70-50 {
 -o-object-position: 70% 50%;
    object-position: 70% 50%;
}

.desk-70-60 {
 -o-object-position: 70% 60%;
    object-position: 70% 60%;
}

.desk-70-70 {
 -o-object-position: 70% 70%;
    object-position: 70% 70%;
}

.desk-70-80 {
 -o-object-position: 70% 80%;
    object-position: 70% 80%;
}

.desk-70-90 {
 -o-object-position: 70% 90%;
    object-position: 70% 90%;
}

.desk-70-100 {
 -o-object-position: 70% 100%;
    object-position: 70% 100%;
}

.desk-80-0 {
 -o-object-position: 80% 0%;
    object-position: 80% 0%;
}

.desk-80-10 {
 -o-object-position: 80% 10%;
    object-position: 80% 10%;
}

.desk-80-20 {
 -o-object-position: 80% 20%;
    object-position: 80% 20%;
}

.desk-80-30 {
 -o-object-position: 80% 30%;
    object-position: 80% 30%;
}

.desk-80-40 {
 -o-object-position: 80% 40%;
    object-position: 80% 40%;
}

.desk-80-50 {
 -o-object-position: 80% 50%;
    object-position: 80% 50%;
}

.desk-80-60 {
 -o-object-position: 80% 60%;
    object-position: 80% 60%;
}

.desk-80-70 {
 -o-object-position: 80% 70%;
    object-position: 80% 70%;
}

.desk-80-80 {
 -o-object-position: 80% 80%;
    object-position: 80% 80%;
}

.desk-80-90 {
 -o-object-position: 80% 90%;
    object-position: 80% 90%;
}

.desk-80-100 {
 -o-object-position: 80% 100%;
    object-position: 80% 100%;
}

.desk-90-0 {
 -o-object-position: 90% 0%;
    object-position: 90% 0%;
}

.desk-90-10 {
 -o-object-position: 90% 10%;
    object-position: 90% 10%;
}

.desk-90-20 {
 -o-object-position: 90% 20%;
    object-position: 90% 20%;
}

.desk-90-30 {
 -o-object-position: 90% 30%;
    object-position: 90% 30%;
}

.desk-90-40 {
 -o-object-position: 90% 40%;
    object-position: 90% 40%;
}

.desk-90-50 {
 -o-object-position: 90% 50%;
    object-position: 90% 50%;
}

.desk-90-60 {
 -o-object-position: 90% 60%;
    object-position: 90% 60%;
}

.desk-90-70 {
 -o-object-position: 90% 70%;
    object-position: 90% 70%;
}

.desk-90-80 {
 -o-object-position: 90% 80%;
    object-position: 90% 80%;
}

.desk-90-90 {
 -o-object-position: 90% 90%;
    object-position: 90% 90%;
}

.desk-90-100 {
 -o-object-position: 90% 100%;
    object-position: 90% 100%;
}

.desk-100-0 {
 -o-object-position: 100% 0%;
    object-position: 100% 0%;
}

.desk-100-10 {
 -o-object-position: 100% 10%;
    object-position: 100% 10%;
}

.desk-100-20 {
 -o-object-position: 100% 20%;
    object-position: 100% 20%;
}

.desk-100-30 {
 -o-object-position: 100% 30%;
    object-position: 100% 30%;
}

.desk-100-40 {
 -o-object-position: 100% 40%;
    object-position: 100% 40%;
}

.desk-100-50 {
 -o-object-position: 100% 50%;
    object-position: 100% 50%;
}

.desk-100-60 {
 -o-object-position: 100% 60%;
    object-position: 100% 60%;
}

.desk-100-70 {
 -o-object-position: 100% 70%;
    object-position: 100% 70%;
}

.desk-100-80 {
 -o-object-position: 100% 80%;
    object-position: 100% 80%;
}

.desk-100-90 {
 -o-object-position: 100% 90%;
    object-position: 100% 90%;
}

.desk-100-100 {
 -o-object-position: 100% 100%;
    object-position: 100% 100%;
}

@media (max-width: 600px) {
 .mob-0-0 {
  -o-object-position: 0% 0%;
     object-position: 0% 0%;
 }
 .mob-0-10 {
  -o-object-position: 0% 10%;
     object-position: 0% 10%;
 }
 .mob-0-20 {
  -o-object-position: 0% 20%;
     object-position: 0% 20%;
 }
 .mob-0-30 {
  -o-object-position: 0% 30%;
     object-position: 0% 30%;
 }
 .mob-0-40 {
  -o-object-position: 0% 40%;
     object-position: 0% 40%;
 }
 .mob-0-50 {
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
 }
 .mob-0-60 {
  -o-object-position: 0% 60%;
     object-position: 0% 60%;
 }
 .mob-0-70 {
  -o-object-position: 0% 70%;
     object-position: 0% 70%;
 }
 .mob-0-80 {
  -o-object-position: 0% 80%;
     object-position: 0% 80%;
 }
 .mob-0-90 {
  -o-object-position: 0% 90%;
     object-position: 0% 90%;
 }
 .mob-0-100 {
  -o-object-position: 0% 100%;
     object-position: 0% 100%;
 }
 .mob-10-0 {
  -o-object-position: 10% 0%;
     object-position: 10% 0%;
 }
 .mob-10-10 {
  -o-object-position: 10% 10%;
     object-position: 10% 10%;
 }
 .mob-10-20 {
  -o-object-position: 10% 20%;
     object-position: 10% 20%;
 }
 .mob-10-30 {
  -o-object-position: 10% 30%;
     object-position: 10% 30%;
 }
 .mob-10-40 {
  -o-object-position: 10% 40%;
     object-position: 10% 40%;
 }
 .mob-10-50 {
  -o-object-position: 10% 50%;
     object-position: 10% 50%;
 }
 .mob-10-60 {
  -o-object-position: 10% 60%;
     object-position: 10% 60%;
 }
 .mob-10-70 {
  -o-object-position: 10% 70%;
     object-position: 10% 70%;
 }
 .mob-10-80 {
  -o-object-position: 10% 80%;
     object-position: 10% 80%;
 }
 .mob-10-90 {
  -o-object-position: 10% 90%;
     object-position: 10% 90%;
 }
 .mob-10-100 {
  -o-object-position: 10% 100%;
     object-position: 10% 100%;
 }
 .mob-20-0 {
  -o-object-position: 20% 0%;
     object-position: 20% 0%;
 }
 .mob-20-10 {
  -o-object-position: 20% 10%;
     object-position: 20% 10%;
 }
 .mob-20-20 {
  -o-object-position: 20% 20%;
     object-position: 20% 20%;
 }
 .mob-20-30 {
  -o-object-position: 20% 30%;
     object-position: 20% 30%;
 }
 .mob-20-40 {
  -o-object-position: 20% 40%;
     object-position: 20% 40%;
 }
 .mob-20-50 {
  -o-object-position: 20% 50%;
     object-position: 20% 50%;
 }
 .mob-20-60 {
  -o-object-position: 20% 60%;
     object-position: 20% 60%;
 }
 .mob-20-70 {
  -o-object-position: 20% 70%;
     object-position: 20% 70%;
 }
 .mob-20-80 {
  -o-object-position: 20% 80%;
     object-position: 20% 80%;
 }
 .mob-20-90 {
  -o-object-position: 20% 90%;
     object-position: 20% 90%;
 }
 .mob-20-100 {
  -o-object-position: 20% 100%;
     object-position: 20% 100%;
 }
 .mob-30-0 {
  -o-object-position: 30% 0%;
     object-position: 30% 0%;
 }
 .mob-30-10 {
  -o-object-position: 30% 10%;
     object-position: 30% 10%;
 }
 .mob-30-20 {
  -o-object-position: 30% 20%;
     object-position: 30% 20%;
 }
 .mob-30-30 {
  -o-object-position: 30% 30%;
     object-position: 30% 30%;
 }
 .mob-30-40 {
  -o-object-position: 30% 40%;
     object-position: 30% 40%;
 }
 .mob-30-50 {
  -o-object-position: 30% 50%;
     object-position: 30% 50%;
 }
 .mob-30-60 {
  -o-object-position: 30% 60%;
     object-position: 30% 60%;
 }
 .mob-30-70 {
  -o-object-position: 30% 70%;
     object-position: 30% 70%;
 }
 .mob-30-80 {
  -o-object-position: 30% 80%;
     object-position: 30% 80%;
 }
 .mob-30-90 {
  -o-object-position: 30% 90%;
     object-position: 30% 90%;
 }
 .mob-30-100 {
  -o-object-position: 30% 100%;
     object-position: 30% 100%;
 }
 .mob-40-0 {
  -o-object-position: 40% 0%;
     object-position: 40% 0%;
 }
 .mob-40-10 {
  -o-object-position: 40% 10%;
     object-position: 40% 10%;
 }
 .mob-40-20 {
  -o-object-position: 40% 20%;
     object-position: 40% 20%;
 }
 .mob-40-30 {
  -o-object-position: 40% 30%;
     object-position: 40% 30%;
 }
 .mob-40-40 {
  -o-object-position: 40% 40%;
     object-position: 40% 40%;
 }
 .mob-40-50 {
  -o-object-position: 40% 50%;
     object-position: 40% 50%;
 }
 .mob-40-60 {
  -o-object-position: 40% 60%;
     object-position: 40% 60%;
 }
 .mob-40-70 {
  -o-object-position: 40% 70%;
     object-position: 40% 70%;
 }
 .mob-40-80 {
  -o-object-position: 40% 80%;
     object-position: 40% 80%;
 }
 .mob-40-90 {
  -o-object-position: 40% 90%;
     object-position: 40% 90%;
 }
 .mob-40-100 {
  -o-object-position: 40% 100%;
     object-position: 40% 100%;
 }
 .mob-50-0 {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
 }
 .mob-50-10 {
  -o-object-position: 50% 10%;
     object-position: 50% 10%;
 }
 .mob-50-20 {
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
 }
 .mob-50-30 {
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
 }
 .mob-50-40 {
  -o-object-position: 50% 40%;
     object-position: 50% 40%;
 }
 .mob-50-50 {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
 }
 .mob-50-60 {
  -o-object-position: 50% 60%;
     object-position: 50% 60%;
 }
 .mob-50-70 {
  -o-object-position: 50% 70%;
     object-position: 50% 70%;
 }
 .mob-50-80 {
  -o-object-position: 50% 80%;
     object-position: 50% 80%;
 }
 .mob-50-90 {
  -o-object-position: 50% 90%;
     object-position: 50% 90%;
 }
 .mob-50-100 {
  -o-object-position: 50% 100%;
     object-position: 50% 100%;
 }
 .mob-60-0 {
  -o-object-position: 60% 0%;
     object-position: 60% 0%;
 }
 .mob-60-10 {
  -o-object-position: 60% 10%;
     object-position: 60% 10%;
 }
 .mob-60-20 {
  -o-object-position: 60% 20%;
     object-position: 60% 20%;
 }
 .mob-60-30 {
  -o-object-position: 60% 30%;
     object-position: 60% 30%;
 }
 .mob-60-40 {
  -o-object-position: 60% 40%;
     object-position: 60% 40%;
 }
 .mob-60-50 {
  -o-object-position: 60% 50%;
     object-position: 60% 50%;
 }
 .mob-60-60 {
  -o-object-position: 60% 60%;
     object-position: 60% 60%;
 }
 .mob-60-70 {
  -o-object-position: 60% 70%;
     object-position: 60% 70%;
 }
 .mob-60-80 {
  -o-object-position: 60% 80%;
     object-position: 60% 80%;
 }
 .mob-60-90 {
  -o-object-position: 60% 90%;
     object-position: 60% 90%;
 }
 .mob-60-100 {
  -o-object-position: 60% 100%;
     object-position: 60% 100%;
 }
 .mob-70-0 {
  -o-object-position: 70% 0%;
     object-position: 70% 0%;
 }
 .mob-70-10 {
  -o-object-position: 70% 10%;
     object-position: 70% 10%;
 }
 .mob-70-20 {
  -o-object-position: 70% 20%;
     object-position: 70% 20%;
 }
 .mob-70-30 {
  -o-object-position: 70% 30%;
     object-position: 70% 30%;
 }
 .mob-70-40 {
  -o-object-position: 70% 40%;
     object-position: 70% 40%;
 }
 .mob-70-50 {
  -o-object-position: 70% 50%;
     object-position: 70% 50%;
 }
 .mob-70-60 {
  -o-object-position: 70% 60%;
     object-position: 70% 60%;
 }
 .mob-70-70 {
  -o-object-position: 70% 70%;
     object-position: 70% 70%;
 }
 .mob-70-80 {
  -o-object-position: 70% 80%;
     object-position: 70% 80%;
 }
 .mob-70-90 {
  -o-object-position: 70% 90%;
     object-position: 70% 90%;
 }
 .mob-70-100 {
  -o-object-position: 70% 100%;
     object-position: 70% 100%;
 }
 .mob-80-0 {
  -o-object-position: 80% 0%;
     object-position: 80% 0%;
 }
 .mob-80-10 {
  -o-object-position: 80% 10%;
     object-position: 80% 10%;
 }
 .mob-80-20 {
  -o-object-position: 80% 20%;
     object-position: 80% 20%;
 }
 .mob-80-30 {
  -o-object-position: 80% 30%;
     object-position: 80% 30%;
 }
 .mob-80-40 {
  -o-object-position: 80% 40%;
     object-position: 80% 40%;
 }
 .mob-80-50 {
  -o-object-position: 80% 50%;
     object-position: 80% 50%;
 }
 .mob-80-60 {
  -o-object-position: 80% 60%;
     object-position: 80% 60%;
 }
 .mob-80-70 {
  -o-object-position: 80% 70%;
     object-position: 80% 70%;
 }
 .mob-80-80 {
  -o-object-position: 80% 80%;
     object-position: 80% 80%;
 }
 .mob-80-90 {
  -o-object-position: 80% 90%;
     object-position: 80% 90%;
 }
 .mob-80-100 {
  -o-object-position: 80% 100%;
     object-position: 80% 100%;
 }
 .mob-90-0 {
  -o-object-position: 90% 0%;
     object-position: 90% 0%;
 }
 .mob-90-10 {
  -o-object-position: 90% 10%;
     object-position: 90% 10%;
 }
 .mob-90-20 {
  -o-object-position: 90% 20%;
     object-position: 90% 20%;
 }
 .mob-90-30 {
  -o-object-position: 90% 30%;
     object-position: 90% 30%;
 }
 .mob-90-40 {
  -o-object-position: 90% 40%;
     object-position: 90% 40%;
 }
 .mob-90-50 {
  -o-object-position: 90% 50%;
     object-position: 90% 50%;
 }
 .mob-90-60 {
  -o-object-position: 90% 60%;
     object-position: 90% 60%;
 }
 .mob-90-70 {
  -o-object-position: 90% 70%;
     object-position: 90% 70%;
 }
 .mob-90-80 {
  -o-object-position: 90% 80%;
     object-position: 90% 80%;
 }
 .mob-90-90 {
  -o-object-position: 90% 90%;
     object-position: 90% 90%;
 }
 .mob-90-100 {
  -o-object-position: 90% 100%;
     object-position: 90% 100%;
 }
 .mob-100-0 {
  -o-object-position: 100% 0%;
     object-position: 100% 0%;
 }
 .mob-100-10 {
  -o-object-position: 100% 10%;
     object-position: 100% 10%;
 }
 .mob-100-20 {
  -o-object-position: 100% 20%;
     object-position: 100% 20%;
 }
 .mob-100-30 {
  -o-object-position: 100% 30%;
     object-position: 100% 30%;
 }
 .mob-100-40 {
  -o-object-position: 100% 40%;
     object-position: 100% 40%;
 }
 .mob-100-50 {
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
 }
 .mob-100-60 {
  -o-object-position: 100% 60%;
     object-position: 100% 60%;
 }
 .mob-100-70 {
  -o-object-position: 100% 70%;
     object-position: 100% 70%;
 }
 .mob-100-80 {
  -o-object-position: 100% 80%;
     object-position: 100% 80%;
 }
 .mob-100-90 {
  -o-object-position: 100% 90%;
     object-position: 100% 90%;
 }
 .mob-100-100 {
  -o-object-position: 100% 100%;
     object-position: 100% 100%;
 }
}
.videoWithControls::-webkit-media-controls-panel, .videoWithControls::-webkit-media-controls-play-button, .videoWithControls::-webkit-media-controls-volume-slider-container, .videoWithControls::-webkit-media-controls-volume-slider, .videoWithControls::-webkit-media-controls-mute-button, .videoWithControls::-webkit-media-controls-timeline, .videoWithControls::-webkit-media-controls-current-time-display, .videoWithControls::-webkit-full-page-media::-webkit-media-controls-panel, .videoWithControls::-webkit-media-controls-timeline-container, .videoWithControls::-webkit-media-controls-time-remaining-display, .videoWithControls::-webkit-media-controls-seek-back-button, .videoWithControls::-webkit-media-controls-seek-forward-button, .videoWithControls::-webkit-media-controls-fullscreen-button, .videoWithControls::-webkit-media-controls-rewind-button, .videoWithControls::-webkit-media-controls-return-to-realtime-button, .videoWithControls::-webkit-media-controls-toggle-closed-captions-button {
 display: none !important;
 -webkit-appearance: none !important;
}

.video-container {
 display: flex;
 justify-content: space-around;
}
.video-container video {
 width: 42rem;
 height: 26rem;
 -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 600px) {
 .video-container video {
  width: 50rem;
  height: 50rem;
  margin: 0 -4rem;
 }
}

.half > .video-container > video {
 width: 20rem;
}
@media (max-width: 600px) {
 .half > .video-container > video {
  width: 50rem;
  height: 50rem;
  margin: 0 -4rem;
 }
}

.video-controls {
 margin-bottom: -2rem;
 position: relative;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
@media (max-width: 600px) {
 .video-controls {
  justify-content: flex-start;
  top: -8rem;
  left: 0rem;
  margin-bottom: -4rem;
 }
}

.reloadplaypause {
 display: flex;
 flex-direction: row;
}

.video-control {
 line-height: 1.6rem;
 font-size: 1.6rem;
 width: 2rem;
 height: 2rem;
 cursor: pointer;
 background-color: #FFF;
}
@media (max-width: 600px) {
 .video-control {
  width: 4rem;
  height: 4rem;
 }
}

.videoWithControls {
 cursor: pointer;
}

.play-btn {
 background-image: url("/user/themes/mskn/images/play.svg");
 background-size: 75%;
 background-position: center;
 background-repeat: no-repeat;
}

.pause-btn {
 background-image: url("/user/themes/mskn/images/pause.svg");
 background-size: 75%;
 background-position: center;
 background-repeat: no-repeat;
}

.fullscreen-btn {
 float: right;
 background-image: url("/user/themes/mskn/images/fullscreen.svg");
 background-size: 75%;
 background-position: center right;
 background-repeat: no-repeat;
}
@media (max-width: 600px) {
 .fullscreen-btn {
  margin-left: 2rem;
  background-position: center;
 }
}

.replay-btn {
 background-image: url("/user/themes/mskn/images/reload.svg");
 background-size: 75%;
 background-position: center;
 background-repeat: no-repeat;
}
@media (max-width: 600px) {
 .replay-btn {
  display: none;
 }
}

.hiddenVideo {
 opacity: 0 !important;
 transition: 0.5s;
}

.hiddenjs {
 display: none !important;
}

.textehome {
 position: relative;
 top: -75rem;
}

.homeimg {
 position: relative;
 top: -14rem;
 right: 4rem;
 z-index: -1;
 margin-bottom: -40rem;
}

.selector {
 position: relative;
 width: 100vw;
 height: calc(100vh - 20rem);
}

.clicks {
 cursor: pointer;
 position: absolute;
 display: flex;
 width: 100vw;
 height: calc(100vh - 20rem);
}

.clickWater, .clickGarden {
 width: 50vw;
 height: calc(100vh - 20rem);
}

.videos {
 position: absolute;
 display: flex;
 width: 100vw;
 height: calc(100vh - 20rem);
 overflow: hidden;
}

.videoWater, .videoGarden {
 overflow: hidden; /* Ensures the video is clipped */
 font-family: "MedFont";
 font-feature-settings: "ss03" 1;
 font-size: 3rem;
 line-height: 4rem;
 position: relative; /* Enable positioning for child elements */
 width: 50vw;
 transition: width 3s cubic-bezier(0.25, 0.8, 0.25, 1);
 will-change: width;
 display: flex; /* Enable flexbox for centering */
 align-items: center; /* Center vertically */
 justify-content: center; /* Center horizontally */
 color: white; /* Ensure the text is visible */
}
@media (max-width: 600px) {
 .videoWater, .videoGarden {
  font-size: 9rem;
  line-height: 12rem;
 }
}

#videoWater, #videoGarden {
 position: absolute; /* Ensure the video covers the entire container */
 top: 0;
 left: 0;
 -o-object-fit: cover;
    object-fit: cover;
 width: 100rem;
 height: calc(100vh - 20rem);
 z-index: -1;
}

.zeroWidth {
 width: 20vw;
}

.fullWidth {
 width: 80vw;
}

.custom-carousel {
 position: relative;
 max-width: 84rem;
 overflow: hidden;
}

.carousel-container {
 display: flex;
 transition: transform 0.5s ease;
 width: 84rem;
}

.carousel-item {
 min-width: 84rem;
 max-width: 84rem;
 box-sizing: border-box;
 overflow: hidden;
}

.carousel-item img {
 width: 84rem;
 height: 50.6024096386rem;
 -o-object-fit: cover;
    object-fit: cover;
 display: block;
}

div.prev, div.next {
 background-color: #fff;
 color: rgb(0, 0, 0);
 border: none;
 padding: 1rem;
 cursor: pointer;
 z-index: 10;
}

div.prev:hover, div.next:hover {
 color: rgba(33, 33, 33, 0.7);
}

.carousel-btns {
 cursor: pointer;
 display: flex;
 justify-content: end;
 position: relative;
 top: -4rem;
}