@font-face {
font-family: 'Uniform';
src: url('../fonts/uniform/Uniform.otf') format('opentype');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Uniform';
src: url('../fonts/uniform/UniformLight.otf') format('opentype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Uniform';
src: url('../fonts/uniform/UniformMedium.otf') format('opentype');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Uniform';
src: url('../fonts/uniform/UniformBold.otf') format('opentype');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'Uniform';
src: url('../fonts/uniform/UniformBlack.otf') format('opentype');
font-weight: 900;
font-style: normal;
}

body,html {padding: 0; margin: 0; overflow-x: hidden; box-sizing: border-box; font-family: Uniform; width: 100vw;   scroll-behavior: smooth;
}

div { box-sizing: border-box;}
button {outline: 0 none !important;}

@phone: ~"only screen and (min-width: 1px) and (max-width: 479px)";
@smartphone: ~"only screen and (min-width: 480px) and (max-width: 768px)";
@smart600: ~"only screen and (min-width: 600px) and (max-width: 768px)";
@tablet: ~"only screen and (min-width: 769px) and (max-width: 992px)";

@mobile: ~"only screen and (min-width: 1px) and (max-width: 992px)";
@smallmobile: ~"only screen and (min-width: 1px) and (max-width: 768px)";
@smalldesktop: ~"only screen and (min-width: 769px)";

@desktop: ~"only screen and (min-width: 993px)";
@laptop: ~"only screen and (min-width: 993px) and (max-width: 1280px)";
@bigscreen: ~"only screen and (min-width: 1280px)";

@prim: #f86021;
@sec: #ab8d50;
@grey: #a3a3a3;
@lightgrey: #c2c2c2;
@text: #7f7f7f;
@heading: #000000;

h3 {font-size: 28px;}

.full {width: 100vw; float: left;}
.container1200 {max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100vw;}
.container {max-width: 100vw; margin: 0 auto; padding: 0 20px;}
.container60 {max-width: 100vw; margin: 0 auto; padding: 0 60px; @media @smallmobile {padding: 0 20px;}}

.flex-inline {display: flex; flex-direction: row;}
.space {justify-content: space-between;}
.fw {width: 100vw;}
.bw {width: 1240px; padding: 0 20px; max-width: 100vw; margin: 0 auto;}

.ac {position: absolute; top: 50%; transform: translateY(-50%);}
.acp {position: absolute; left: 50%; transform: translateX(-50%);}

.acc {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.xacc {position: relative; top: 0; left: 0; transform: translateX(0) translateY(0);}

.transitions {-webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; }
.transitionsFast {-webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; }
.transitionsSlow {-webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -ms-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear; }
.transitionsSlow2 {-webkit-transition: all 700ms linear; -moz-transition: all 700ms linear; -ms-transition: all 700ms linear; -o-transition: all 700ms linear; transition: all 700ms linear; }

.white {
  filter: grayscale(100%) brightness(0%) invert(100%);
-webkit-filter: grayscale(100%) brightness(0%) invert(100%);
-moz-filter: grayscale(100%) brightness(0%) invert(100%);
}

.gradient-animation( @start, @end, @transTime ){
  background-size: 100%;
  background-image: -webkit-linear-gradient(@start, @end);
  background-image: linear-gradient(@start, @end);
  position: relative;
  z-index: 100;
  &:before {
    border-radius: inherit;
    background-image: -webkit-linear-gradient(@end, @start);
    background-image: linear-gradient(@end, @start);
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    z-index: -100;
    -moz-transition: opacity @transTime ease-in-out;
    -webkit-transition: opacity @transTime ease-in-out;
    transition: opacity @transTime ease-in-out;
  }
  &:hover {
     &:before {
       opacity: 1;
     }
  }
}

.fixx {
  height: 101vh;
  overflow-y: hidden;
  min-height: 750px;
}



.link-button {font-size: 16px; color: #ffffff; letter-spacing: 0.4px;  display: table; padding: 30px 50px; border: 0px solid #000000; border-radius: 10px; font-weight: 600; text-transform: none; .transitions;
   background-image: linear-gradient(to top, #f86326, #e54806);
	&:hover {background-image: linear-gradient(to top, #e54806, #e54806); .transitions;}
}

.btn2 {font-size: 16px; color: #ffffff; letter-spacing: 0.4px;  display: table; padding: 1.5vw 2.125vw; border: 0px solid #000000; border-radius: 10px; font-weight: 600; text-transform: none; .transitions;
   background-image: linear-gradient(to top, #f86326, #e54806); float: left; margin: 0 11px; text-decoration: none !important;

   @media screen and (min-width: 768px) {font-size: calc(12px + 4 * ((100vw - 768px) / 232));}
   @media screen and (min-width: 1000px) {font-size: 16px;}
   @media @smallmobile {font-size: 16px;     padding: 3.083vw 4.125vw;}
   @media @phone {margin: 5px; text-align: center;  padding: 4.083vw 4.125vw;}


	&:hover {background-image: linear-gradient(to top, #e54806, #e54806); .transitions;}
}

.link-button2 {position: relative; text-decoration: none !important; font-size: 16px; color: #ffffff; letter-spacing: 0.4px;  display: table; padding: 30px 50px; border: 0px solid #000000; border-radius: 5px; font-weight: 600; text-transform: none;
.transitions;
.gradient-animation( #f86326, #e54806, 0.25s );// gradient animation mixin usage
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  &:active { // not part of the mixin, I just wanted to add for dramatic effect
     &:before {
       opacity: 0;
     }
  }
  &:hover {.transitions;
    -moz-transform: scale(0.98);
  -webkit-transform: scale(0.98);
  -o-transform: scale(0.98);
  -ms-transform: scale(0.98);
  transform: scale(0.98);}
  }

  .header {
    display: flex; justify-content: space-between;
    padding-top: 50px;
    width: 100%;
    .logo img {width: 130px;}
  }
  .headerfix.active {
      z-index: 11;
      position: relative;
      display: flex;
      width: 100%;
      .header {

      }
    }

  .h {width: 30%; display: flex; justify-content: flex-end; align-items: center;}

.viz {display: block;}
.hid {display: none;}

  .slogan {text-align: center; width: 700px; max-width: 100%; margin: 0 auto; padding: 0 15px; .acc;
    h1 {
      font-size: 54px;
      font-weight: bold;
      line-height: 1.11;
      letter-spacing: 1.35px;
      color: #ffffff;

      @media screen and (min-width: 320px) {font-size: calc(34px + 20 * ((100vw - 320px) / 680));}
      @media screen and (min-width: 1000px) {font-size: 54px;}

    }
    h2 {
      font-size: 18px;
      line-height: 1.56;
      color: #ffffff;
      font-weight: 600;
    }
    a {margin: 40px auto;}
  }
.mainc {
p, ul li {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: left;
  color: @text;
}
}

.canva {position: relative;}

img.c1 {position: absolute; top: 20%; left: 10%; width: 5%; height: 5%;}
img.c2 {position: absolute; top: 20%; left: 15%; width: 5%;}

#canvas {
width: 100%; height: auto;
  border: 1px solid #ccc;
  display: block;
}

// .top {width: 100%; height: 100vh; background: url('../img/top.jpg'); background-size: cover;}
// .area {cursor: grab; width: 1440px; height: 700px; margin: -100px auto 0 auto; width: 100vw; overflow-x: hidden; background: url('../img/corner.png'); background-position: top right; position: relative; background-repeat: no-repeat;}
// .item1 {position: absolute; top: 260px; left: 50px;}
// .item2 {position: absolute; top: 145px; left: 403px;}


video.fullscreen-video {
  min-width: 100%;
// height: 100%;
object-fit: cover;
}

.video-overlay img {
    min-width: 100%;
    min-height: 800px;
    object-fit: cover;
}

.top {width: 100%; height: 100vh; min-height: 800px; position: relative; background: url('../img/top.svg'); background-size: cover;}
.top-s {position: absolute; width: 100vw; z-index: 10;}
.area {width: 1440px; min-width: 100vw; margin-top: -3.472vw; overflow: hidden;
  // background: url('../img/corner.png'); background-position: top right;
  position: relative; background-repeat: no-repeat;
  @media @smallmobile {display: none;}
}
img.corner {object-fit: cover; width: 100vw; margin-top: -2.500vw;}
.item1 {position: absolute; top: 17.361vw; left: 2.778vw; width: 19.097vw; height: 15.972vw;  background: url('../img/item1.png') no-repeat;}
.item11 {position: absolute; opacity: 0; top: 24vw; left: 1.3vw; width: 4.444vw; height: 4.375vw;  background: url('../img/item11.png') no-repeat;
animation-name: item11move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 2s;
}

.item2 {position: absolute; top: 9.722vw; left: 27.778vw; width: 5.556vw; height: 7.708vw;  background: url('../img/item2.png') no-repeat;
animation-name: item2move2;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 5s;
}
.item21 {position: absolute; top: 23.264vw; left: 20.139vw; width: 5.556vw; height: 7.708vw;  background: url('../img/item2.png') no-repeat;
animation-name: item2move;
animation-duration: 15s;
animation-iteration-count: infinite;
}

.i2:hover .i2i, .i2i.hov {
  -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
    cursor: pointer;
}

.i1:hover .item, .item11.hov {
  -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
    cursor: pointer;
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

// .item22 {position: absolute; top: 13.589vw; left: 42.444vw; width: 5.556vw; height: 7.708vw;  background: url('../img/item2.png') no-repeat;}
.item3 {position: absolute; top: 4.167vw; left: 41.319vw; width: 6.806vw; height: 5.625vw; background: url('../img/item3.png') no-repeat;}
.item4 {position: absolute; top: 3.472vw; left: 52.083vw; width: 20.972vw; height: 14.792vw;  background: url('../img/item4.png') no-repeat;}
// .item4 {position: absolute; top: -2.028vw;left: 52.083vw;width: 25.972vw;height: 16.792vw;background: url('../img/item4.png') no-repeat;}

.item5 {position: absolute; top: 24.306vw; left: 38.194vw; width: 20.139vw; height: 13.056vw;  background: url('../img/item5.png') no-repeat;}
.item6 {position: absolute; top: 17.708vw; left: 61.458vw; width: 35.486vw; height: 26.458vw;  background: url('../img/item6.png') no-repeat;}


.i2i::before {content: ''; background: url('../img/wifi.png') no-repeat; background-size: cover; width: 2.222vw; height: 2.014vw; display: block; float: right;
    transform: translateX(50%) translateY(-50%);
    animation-name: wifi;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

.item3::before {content: ''; background: url('../img/wifi.png') no-repeat; background-size: cover; width: 2.222vw; height: 2.014vw; display: block;
        transform: translateY(-50%);
        animation-name: wifi;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }

.item {
  -webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-size: contain;
}
.item:hover , .item.hov {
  -webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
cursor: pointer;
background-size: contain;
}

// .item6:hover {-moz-transform: scale(1);
// -webkit-transform: scale(1);
// -o-transform: scale(1);
// -ms-transform: scale(1);
// transform: scale(1);
// cursor: default;
// }

.i2:hover .i2i,  .i2i.hov {background: url('../img/item2o.png') no-repeat;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
background-size: contain;

}

.item6:hover, .item6.hov {background: url('../img/item6o.png') no-repeat; background-size: contain;}
.item5:hover, .item5.hov {background: url('../img/item5o.png') no-repeat; background-size: contain;}
.item1:hover, .item1.hov {background: url('../img/item1o.png') no-repeat; background-size: contain;}
.item3:hover, .item3.hov {background: url('../img/item3o.png') no-repeat; background-size: contain;}
.item4:hover, .item4.hov {background: url('../img/item4o.png') no-repeat; background-size: contain;}

.i4i .item {position: absolute; width: 2.569vw; height: 2.292vw; opacity: 0; background: url('../img/bufor1.png') no-repeat; background-size: contain;}
.item41 {top: 7.3vw; left: 7vw; animation-name: appear; animation-duration: 2s; animation-delay: 10s;  -webkit-animation-fill-mode: forwards; }
.item42 {top: 6.3vw; left: 10vw; animation-name: appear; animation-duration: 2s; animation-delay: 12s; -webkit-animation-fill-mode: forwards;}
.item43 {top: 5vw; left: 13vw; animation-name: appear; animation-duration: 2s; animation-delay: 14s;-webkit-animation-fill-mode: forwards; }
.item44 {top: 4vw; left: 16vw; animation-name: appear; animation-duration: 2s; animation-delay: 16s; -webkit-animation-fill-mode: forwards;}
.item45 {top: 8.6vw; left: 8.6vw; animation-name: appear; animation-duration: 2s; animation-delay: 18s; -webkit-animation-fill-mode: forwards;}
.item46 {top: 7.6vw; left: 11.6vw; animation-name: appear; animation-duration: 2s; animation-delay: 20s; -webkit-animation-fill-mode: forwards;}
.item47 {top: 6.6vw; left: 14.3vw; animation-name: appear; animation-duration: 2s; animation-delay: 22s; -webkit-animation-fill-mode: forwards;}
.item48 {top: 5.4vw; left: 17.4vw; animation-name: appear; animation-duration: 2s; animation-delay: 24s; -webkit-animation-fill-mode: forwards;}

.i4:hover .i4ii,  .i4ii.hov {background: url('../img/bufor1o.png') no-repeat !important;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
background-size: contain;

}


.ah {position: absolute; width: 2.708vw; height: 1.389vw;  background: url('../img/ah.png') no-repeat;  background-size: contain;}
.ah1 {top: 25.764vw; left: 12.292vw;
  animation-name: ah1move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.ah2 {top: 23.264vw; left: 18.750vw;}

.dah {position: absolute; width: 3.681vw; height: 1.667vw;  background: url('../img/dah.png') no-repeat;  background-size: contain;
animation-name: wifi;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.dah1 {top: 17.708vw; left: 22.778vw;}
.dah2 {top: 12.569vw; left: 35.347vw;}
.dah3 {top: 16.806vw; left: 48.333vw;}
.dah4 {top: 26.333vw; left: 24.986vw;}

@keyframes ah1move {
  0% {top: 25.764vw; left: 12.292vw; opacity: 1;}
  50% {top: 25.764vw; left: 12.292vw; opacity: 1;}
  100% {top: 14.931vw; left: 40.625vw; opacity: 0;}
}

@keyframes item2move {
  0% {top: 23.264vw; left: 20.139vw;}
  10% {top: 20.486vw; left: 27.778vw;}
  25% {top: 25.694vw; left: 35.417vw;}
  40% {top: 20.486vw; left: 27.778vw;}
  60% {top: 13.589vw; left: 42.444vw;}
  90% {top: 23.264vw; left: 20.139vw;}
  100% {top: 23.264vw; left: 20.139vw;}
}

@keyframes wifi {
  0% {topacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

@keyframes item2move2 {
  0% {top: 9.722vw; left: 27.778vw;  opacity: 1;}
  40% {left: 35.764vw; top: 6.944vw; opacity: 1;}
  60% {top: 9.722vw; left: 27.778vw;  opacity: 1;}
  100% {top: 9.722vw; left: 27.778vw;  opacity: 1;}
}

@keyframes item11move {
  0% {top: 24vw; left: 1.3vw; opacity: 0;}
  10% {top: 24vw; left: 1.3vw; opacity: 1;}
  30% {top: 29vw; left: 11.3vw; opacity: 1;}
  50% {top: 26vw; left: 5.3vw; opacity: 1;}
  80% {top: 16.5vw; left: 29.3vw; opacity: 0;}
  100% {top: 16.5vw; left: 29.3vw; opacity: 0;}
}

.tiles {display: flex; flex-direction: row; width: 100%; margin-top: -5vw; margin-bottom: 80px; justify-content: space-between;
  @media @smallmobile {margin-top: 5vw; flex-wrap: wrap;}
}
.p0 {margin-top: 5vw;}

.tiles a  {padding: 1.583vw;   border: solid 1px #e7e7e7; background: #ffffff;
  -moz-transform: translateX(0px) translateY(0px);
  -webkit-transform: translateX(0px) translateY(0px);
  -o-transform: translateX(0px) translateY(0px);
  -ms-transform: translateX(0px) translateY(0px);
  transform: translateX(0px) translateY(0px);
  -webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
width: 15.666%;
margin: 0 0.5%;
text-decoration: none;
box-sizing: border-box;
border-radius: 6px;
word-break: break-word;
@media @mobile {text-align: center;}



@media @smallmobile {width: 48%; margin: 1%;}
@media @smart600 {width: 31.3333%; margin: 1%;}
@media @phone {width: 100%; margin: 1% 0;}


}
.tiles a.active, .tiles a:hover {
  box-shadow: 0 0 20px 0 rgba(23, 23, 23, 0.1);
  -moz-transform: translateX(0px) translateY(-1.389vw);
  -webkit-transform: translateX(0px) translateY(-1.389vw);
  -o-transform: translateX(0px) translateY(-1.389vw);
  -ms-transform: translateX(0px) translateY(-1.389vw);
  transform: translateX(0px) translateY(-1.389vw);
  -webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
cursor: pointer;
}

.tile {
  h3 {font-size: 18px; color: @heading; text-decoration: none;
    @media @mobile {font-size: 14px; text-align: center;}
  }

  p {font-size: 13px; color: @text; text-decoration: none;
    @media @mobile {font-size: 0px;}

    @media @smallmobile {font-size: 12px;}
  }
}

.tile0 {display: none;
  @media @smallmobile {display: flex;}
  @media @phone {display: none;}
  background: @prim;
  margin: 0 1%;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;

  @media @smallmobile {width: 48%; margin: 1%;}
  @media @smart600 {width: 31.3333%; margin: 1%;}
  @media @phone {width: 100%; margin: 1% 0;}
  h3 {font-size: 18px; color: #ffffff; display: flex; align-items: center; width: 100%; justify-content: center;}
}

@keyframes appear {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.tile img {
  width: 45px;
  @media @mobile {margin: 10px auto 0 auto;}
}

.footer {display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid #ececec;}

.footer {
  p, a {
  font-size: 13px;
  line-height: 1.46;
  letter-spacing: normal;
  color: #a0a0a0;
  text-decoration: none;
  @media @smartphone {font-size: 10px;}

  }
  a:hover {color: @prim;}
}

.ft1, .ft2, .ft3 {width: 33.33333%; display: flex; align-items: center;
  @media @phone {text-align: center; justify-content: center !important; width: 100%; margin: 15px 0;}
}
.ft1 {justify-content: flex-start;}
.ft2 {justify-content: center;}
.ft3 {justify-content: flex-end;}


.ft2 img {width: 110px; max-width: 100%; @media @smartphone {width: 50px;}}



.slogan {
h1>span , h2>span, p>span {
	display: block;
	position: relative;
	overflow: hidden;
}

h1>span>span, h2>span>span, p>span>span {
display: block;
position: relative;
-webkit-transform: translateY(200%) translateZ(0);
transform: translateY(200%) translateZ(0);
-webkit-transition: -webkit-transform 2.5s cubic-bezier(0.405, 0.005, 0, 1);
transition: -webkit-transform 2.5s cubic-bezier(0.405, 0.005, 0, 1);
transition: transform 1.5s cubic-bezier(0.505, 0.009, 0, 1);
transition: transform 1.5s cubic-bezier(0.505, 0.009, 0, 1), -webkit-transform 2.5s cubic-bezier(0.505, 0.009, 0, 1);
}
}

.visible h1>span>span, .visible h2>span>span , .visible p>span>span  {
	-webkit-transform: translateY(0) translateZ(0);
	transform: translateY(0) translateZ(0);
}


.hamburger {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
		align-items: center;
}

#nav-icon3 div {height: 19px; width: 29px; position: relative; cursor: pointer;}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
	background: #ffffff;
}

#nav-icon3 span:nth-child(1) {top: 0px; }
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {top: 9px; }
#nav-icon3 span:nth-child(4) {top: 18px;  width: 100%; transition-duration: 0.2s;}

#nav-icon3.open span:nth-child(1) {top: 9px; width: 0%; left: 50%; background: @prim;}
#nav-icon3.open span:nth-child(2) {transform: rotate(45deg); background: @prim;}
#nav-icon3.open span:nth-child(3) {transform: rotate(-45deg); background: @prim;}
#nav-icon3.open span:nth-child(4) {top: 9px; width: 0%; left: 50%; background: @prim;}

.menu-container {display: none;}
.menu-container.active {display: flex; width: 100vw; min-height: 750px; height: 100vh; position: absolute; z-index: 9;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+24,000000+24,000000+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 24%, #000000 24%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 24%,#000000 24%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 0%,#ffffff 24%,#000000 24%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
.transitions;
opacity: 1;
@media @smallmobile {background: #ffffff;}

 .container1200 {display: flex; width: 100vw; z-index: 9;}
}
div.menu {background: #ffffff; width: 10%; min-width: 320px; display: flex; justify-content: center; align-items: center;
  @media @smallmobile {width: 100%; text-align: center; min-width: 100%;}

}
div.slogan-menu {display: flex; justify-content: center; align-items: center;
  @media @smallmobile {display: none;}

  h3 {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.11;
    letter-spacing: 1.35px;
    color: #ffffff;


    @media screen and (min-width: 320px) {font-size: calc(34px + 20 * ((100vw - 320px) / 680));}
    @media screen and (min-width: 1000px) {font-size: 54px;}
  }
}

ul.menu {padding:0; margin: 0; width: 100%;
  li {list-style-type: none;
  a, .separator {
      font-weight: bold;
      color: #231f20;
      font-size: 24px;
      text-transform: uppercase;
      font-style: normal;
      text-decoration: none;
      padding: 20px 0;
      display: block;
    }
    a:hover {color: @prim; .transitions;}
  }
  li.current a  {color: @prim; .transitions;}
  ul.nav-child {padding: 0; margin: 0;
    li {
      a {
        font-weight: bold;
        color: #231f20;
        font-size: 16px;
        text-transform: none;
        padding: 10px 0;
      }
      a:hover {color: @prim; .transitions;}
    }
  }
}

.slogan-menu {
  margin: 0 auto;
  h3 {max-width: 730px; padding: 15px; width: 100%;}
}

.top-sub {height: 70vh; min-height: 800px; overflow: hidden; position: relative;}
.top-sub .h1c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1240px;
    padding: 20px;
    max-width: 100%;
    display: flex;
    align-items: center;
    .custom
      { width: 100%; display: flex; align-items: center;
        @media @smallmobile {flex-direction: column;}
    .modcon {
      width: 55%; margin-right: 5%;
      @media @smallmobile {width: 100%; margin: 10px 0; text-align: center;}
    }
    .modimg {width: 40%;
        align-items: center;
        display: flex;
        justify-content: center;
      img {max-width: 100%; max-height: 400px;
      @media @smallmobile {width: 100%; max-width: 200px; margin: 0 auto; max-height: 300px;}
      }
      @media @smallmobile {width: 100%; margin: 10px 0; text-align: center;}
    }
   }
  }
  .h1c .przenosniki h1::before {background: url('/templates/img/ico/transfer.svg');}
  .h1c .agv h1::before {background: url('/templates/img/ico/wagon.svg');}
  .h1c .pola-buforowe h1::before {background: url('/templates/img/ico/bufor.svg');}
  .h1c .scada h1::before {background: url('/templates/img/ico/scada.svg');}
  .h1c .insertery h1::before {background: url('/templates/img/ico/inserter.svg');}


  .h1c .custom h1::before {content: ''; display: block; float: left; width: 60px; height: 50px; background-size: contain; background-repeat: no-repeat; margin-right: 40px; .white;
  @media @smallmobile {float: none; margin: 10px auto;}
}
  .h1c .custom p {margin-left: 100px; color: #ffffff; font-size: 18px; line-height: 1.56;
    @media @mobile {margin-left: 0;}
  }

  .h1c.about .custom h1::before {display: none;}
  .h1c.about .custom p {margin-left: 0px; color: #ffffff; font-size: 18px; line-height: 1.56;}

    .h1c .custom h1 {
      font-size: 54px;
      font-weight: bold;
      line-height: 1.11;
      letter-spacing: 1.35px;
      color: #ffffff;
      margin: 0 0 30px 0;

      @media screen and (min-width: 320px) {font-size: calc(34px + 20 * ((100vw - 320px) / 680));}
      @media screen and (min-width: 1000px) {font-size: 54px;}
    }

    .top-content {padding: 4.333vw 4.861vw; border-radius: 6px; box-shadow: 0 0 20px 0 rgba(23, 23, 23, 0.1); background: #ffffff; margin-top: -2vw; position: relative; display: flex;
      @media @smallmobile {flex-direction: column;}
    }
    .wstep {width: 45%; margin-right: 5%;
  @media @smallmobile {width: 100%; margin: 15px 0;}
    }
    .v360 {width: 50%;
      @media @smallmobile {width: 100%; margin: 15px 0;}

    }

    .user-content {padding: 4.861vw; display: flex; border-radius: 6px;

      @media @smallmobile {flex-direction: column;}
        .user2, .user4, .user6 {width: 45%; margin-right: 5%; display: flex; flex-direction: column;
          @media @smallmobile {width: 100%; margin: 0;}
  }
    .user2.ab,.user4.ab,.user6.ab {justify-content: center;
      @media @smallmobile {text-align: center;}
      p {@media @smallmobile {text-align: center;}}
    }
        .user3,.user5,.user7 {width: 45%; margin-left: 5%;
          @media @smallmobile {width: 100%; margin: 0; text-align: center;}
          p {@media @smallmobile {text-align: center;}}
          img {max-width: 100%;
            @media @smallmobile {width: 100%; max-width: 500px; margin: 0 auto;}
          }
        }
      h2 {margin: 0 0 30px 0;}
      ul {
        margin: 0; padding: 0; list-style: none;
        li {
          background: url("/templates/img/right.svg") no-repeat;
          background-position: left top;
          background-size: 16px;
          padding-left: 30px;
          line-height: 1.6;
          margin-bottom: 15px;
        }
        // li::before {content: ''; display: block; float: left; background: url("/templates/img/right.svg"); background-size: contain; width: 16px; height: 16px;}
      }
    }

    .user-content.ab {padding: 70px 0;}

.top-content {
  ul {
    margin: 0; padding: 0; list-style: none;
    li {
      background: url("/templates/img/right.svg") no-repeat;
      background-position: left top;
      background-size: 16px;
      padding-left: 30px;
      line-height: 1.2;
      margin-bottom: 15px;
    }
  }
}

.underslider-feautures {display: flex; justify-content: space-around; width: 100%;
  @media @smallmobile {flex-wrap: wrap;}
  .feauture {
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 230px;
    padding: 0 15px;
    display: flex;
    @media @mobile {width: 170px; height: 170px;}
    @media @smallmobile {width: 110px; height: 110px; margin: 10px;}


    .feauture-title {
      font-size: 66px;
      font-weight: bold;
      color: @prim;
      text-align: center;
      line-height: 1;
      margin-bottom: 15px;
      @media screen and (min-width: 768px) {font-size: calc(32px + 34 * ((100vw - 768px) / 232));}
      @media screen and (min-width: 1000px) {font-size: 66px;}
      @media @smallmobile {font-size: 24px; margin-bottom: 5px;}

    }

    .feauture-description {
      font-size: 18px;
      font-weight: bold;
      text-align: center;


      @media screen and (min-width: 768px) {font-size: calc(14px + 4 * ((100vw - 768px) / 232));}
      @media screen and (min-width: 1000px) {font-size: 18px;}
      @media @smallmobile {font-size: 12px; }


    }
  }
}

.main-content .moduletable h3 {
  text-align: center;
  margin-bottom: 5.556vw;
}

.main-content.ab {padding: 6.944vw 0;}

.dostawcy {display: flex; justify-content: space-between; flex-direction: row; margin-top: 3.472vw;
@media @mobile {flex-direction: column;}
}
.dostawcy-naglowek {width: 45%; padding-right: 5%; @media @mobile {width: 100%; padding: 5% 0; text-align: center; max-width: 500px; margin: 0 auto;}}
.partners {width: 54%; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap;
  @media @mobile {width: 100%; padding: 5% 0; justify-content: center;}
  .partner {width: 200px; height: 100px; background: #f5f6f8; margin: 3px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;
    img {width: 60%;}
    @media @smallmobile {width: 100px; height: 50px;}
    }
}

.cta .custom {box-shadow: 0 0 20px 0 rgba(23, 23, 23, 0.1); border-radius: 6px;
 padding: 2.083vw 4.861vw; display: flex; justify-content: space-between; flex-direction: row; margin: 87px 0;

  @media @smallmobile {flex-direction: column; justify-content: center;}


  h4 {
font-family: Uniform;
font-size: 28px;
line-height: 1.5;
color: #171717;
font-weight: normal;
margin: 0;
align-self: center;

@media screen and (min-width: 768px) {font-size: calc(14px + 14 * ((100vw - 768px) / 232));}
@media screen and (min-width: 1000px) {font-size: 28px;}
@media @smallmobile {margin-bottom: 15px; text-align: center;}


  }
  p {margin: 0;
    @media @smallmobile {display: flex;
    justify-content: center;}
    @media @phone {flex-direction: column;}
  }
}

.video-overlay {position: relative;}
.video-overlay::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;   background-color: rgba(0, 0, 0, 0.65);}

.main-content p {column-count: 2; column-gap: 90px;
  @media @smallmobile {column-count: 1; column-gap: 0px;}
}

.nop {padding: 0;}

.article-content img {max-width: 100%; height: auto;}

hr {background: #ddd; color: #ddd; border: 0; height: 1px;}

.parent a {pointer-events: none;}
.nav-child a {pointer-events: all;}



.modal a.close-modal {.transitions; top: 20px !important; right: 20px !important; background-image: url('/images/icons/close-button.svg') !important; background-size: cover !important; filter: brightness(0) !important;}
.modal a.close-modal:hover {.transitions; .white !important;}

.blocker {z-index: 10 !important;}

.modal {
    display: none;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 10 !important;
    max-width: 1000px !important;
    box-sizing: border-box !important;
    width: 90% !important;
    background: @prim !important;
    padding: 40px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
    text-align: left !important;
		@media @phone {width: 100% !important; padding: 50px 15px 15px 15px !important;}
}



.modal a.close-modal {.transitions; top: 20px !important; right: 20px !important; background-image: url('/images/icons/close-button.svg') !important; background-size: cover !important; filter: brightness(0) !important;}
.modal a.close-modal:hover {.transitions; .white !important;}

.blocker {z-index: 10 !important;}

.modal {
    display: none;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 10 !important;
    max-width: 1000px !important;
    box-sizing: border-box !important;
    width: 90% !important;
    background: @prim !important;
    padding: 40px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
    text-align: left !important;
		@media @phone {width: 100% !important; padding: 50px 15px 15px 15px !important;}
}


.modal h3 {width: 100%; text-align: center;
@media @phone {font-size: 22px;}
}
.fox-container {max-width: 600px; margin: 50px auto;}
.fox-item, .fox-item > div {width: 100%; margin: 0 !important;}
.fox-item {
	input {width: 100% !important;
				height: 60px !important;
				border-radius: 5px !important;
				border: 0 none !important;
				margin: 0 0 20px 0 !important;
				font-size: 14px !important;
				padding-left: 25px !important;
	}


	input:focus, textarea:focus {box-shadow: none !important; background: #ffffff !important; color: @prim !important;}
	textarea {width: 100% !important;
		border-radius: 5px !important;
		border: 0 none !important;
		padding: 25px !important;
		height: 200px !important;
		font-size: 14px !important;
	}
	}
	.fox-item-checkbox .controls {text-align: center !important; margin: 25px auto 0 auto !important; float: none !important; max-width: 100% !important; color: #000000 !important;}
	.fox-item-checkbox {
		label {color: #000000; font-size: 13px; padding-left: 0px !important;}
		input {width: auto !important;
					height: auto !important;
					border-radius: 0px !important;
					border: 0 none !important;
					padding-left: 0px !important;
					box-shadow: none;
					margin: 0 auto!important;
					margin-left: -20px !important;
				}
		}
	.fox-item-submit .controls {text-align: center !important; margin: 25px 0; width: 100% !important;
    .btn {
    display: flex; font-size: 16px !important; color: #fff !important; .transitions;
    background: #f86c33 !important;
    margin: 50px auto 0 auto !important;
    cursor: pointer;
    font-weight: bold;
    justify-content: center; align-items: center;
    border: 0px solid #000000 !important;
    border-radius: 6px;
    padding: 25px 40px !important;
    span {color: #fff !important; font-size: 14px; text-shadow: none!important; font-weight: 500;}
    @media @smallmobile {margin-right: 25px;}
 }
		 .btn:hover {color: @prim; background: #fff !important; .transitions;
			 span {color: @prim !important;}
		 }
	}
.alert {margin: 30px auto; padding: 20px;
.close {cursor: pointer;	}
}
	ul.fox-messages {padding: 0; margin: 0;
		li {font-size: 16px; color: #ffffff !important;}
	}

	.fox-item-checkbox .controls {width: 90% !important;}

  .kontakt {
    .user-content .user2.ab, .user-content .user4.ab, .user-content .user6.ab {justify-content: flex-start;}
    .ab {padding: 0 !important;}
    .article-content {padding: 50px 0;}
    .user3 p {margin: 0; padding: 0;}
    .fox-item {
    	input {width: 100% !important;
    				height: 60px !important;
    				border-radius: 5px !important;
    				border: 1px solid #dddddd !important;
    				margin: 0 0 20px 0 !important;
    				font-size: 14px !important;
    				padding-left: 25px !important;
            outline: 0 !important;
    	}
      input:focus, textarea:focus {box-shadow: none !important; background: #ffffff !important; color: @prim !important; border-color: @prim !important;}
      textarea {width: 100% !important;
        border-radius: 5px !important;
        border: 1px solid #dddddd !important;
        padding: 25px !important;
        height: 200px !important;
        font-size: 14px !important;
        outline: 0 !important;

      }
    }
    .fox-item-checkbox {
      label {color: #000000; font-size: 13px; padding-left: 0px !important;}
      input {width: auto !important;
            height: auto !important;
            border-radius: 0px !important;
            border: 0 none !important;
            padding-left: 0px !important;
            box-shadow: none;
            margin: 0 auto!important;
            margin-left: -20px !important;
          }
      }
      .fox-item-submit .controls .btn:hover {color: #fff; background: @prim !important; .transitions;
        span {color: #fff !important;}
      }
      ul.fox-messages {padding: 0; margin: 0;
        li {font-size: 16px; color: @prim !important;}
      }

  }


  .v360 .moduletable {position: relative;}
  .v360 .moduletable::before {content: '';z-index: 99;  position: absolute; right: 0; top: 0; display: block; width: 47px; height: 47px; background: url('/templates/img/360.svg'); background-size: cover;}
  .v360 .a360g_nav_bar {left: 50% !important;  transform: translateX(-50%) !important;}
  .aikon-360-gallery {margin-top: 50px !important;}

  iframe {
    width: 100%;
    margin-bottom: 100px;
}


.video-overlay {position: relative;}
.video-overlay::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;   background-color: rgba(0, 0, 0, 0.65);}

.top-intro p {column-count: 2; column-gap: 90px;
  @media @smallmobile {column-count: 1; column-gap: 0px;}
}

.movie {
  width: 835px;
  max-width: 100%;
  margin: -13vw auto 100px auto;
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: @prim !important;
}

// .ytp-pause-overlay-controls-hidden .ytp-pause-overlay {display: none !important;}

.ls-wp-container {
   background-image: linear-gradient(to top, #141414, #2b2b2b);
   margin-top: 130px !important;
   h2 {
     font-family: Uniform;
font-size: 28px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #ffffff;
   }
   p {
font-family: Uniform;
font-size: 16px !important;
font-weight: normal !important;
font-stretch: normal !important;
font-style: normal !important;
line-height: 1.75 !important;
letter-spacing: normal !important;
text-align: center !important;
color: #ffffff !important;
width: 900px !important;
max-width: 100% !important;
margin: 0 auto !important;
   }
}

img.imgLoaded {
    width: 200px !important;
    height: auto !important;
    position: relative !important;
    margin: 0 auto !important;
}

hr {background: #ddd; color: #ddd; border: 0; height: 1px;}

.parent a {pointer-events: none;}
.nav-child a {pointer-events: all;}

.slide {margin: 150px 0 0 0;}

#slider {
  position: relative;
  overflow-x: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
  background-image: linear-gradient(to top, #141414, #2b2b2b);  text-align: center;
  padding: 30px 0;
  box-sizing: border-box;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: flex;
  float: left;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 40vw;
background-image: linear-gradient(to top, #141414, #2b2b2b);  text-align: center;

div {
  align-self: center;
  width: 100vw;

}

h3 {font-size: 28px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin: 0 0 10px 0;
}
p {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  padding: 0 15px;
box-sizing: border-box;
}

img {
  width: 400px; max-width: 90%; margin-bottom: 10px;
}

}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;

  opacity: 0.8;
  cursor: pointer;
  img {width: 45px; height: 38px;}
}

a.control_next {
  right: 0;
  -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

#slider {height: auto !important;}

video#player {
    width: 100%;
    z-index: 8;
}

.plyr__video-embed {position: relative; z-index: 8;}

.main-content {
  img {max-width: 100%;}
  h3 {color: @prim; font-weight: 700; font-size: 24px;}
  strong {color: @prim; font-weight: 500; font-size: 18px;}
}
.jai-map-wrap {text-align: center !important;}
.webui-popover-title {font-size: 12px !important; color: @prim; font-weight: 500; letter-spacing: 2px; text-align: center; line-height: 1.6 !important;}
.webui-popover-content {font-size: 12px; text-align: center; line-height: 1.6 !important; color: #7f7f7f !important;}

.type-view {
  display: flex;
  width: 400px;
  height: 400px;
  border: 1px solid @prim;
  padding: 25px;
  justify-content: space-around;
  flex-direction: column;
  margin: 50px auto;
  max-width: 100%;
  max-height: 100vw;
  background: @prim;
}

ul li.open {color: @prim;}

.ins {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.ins span {width: 20px; height: 20px; background: #ffffff;
  @media @phone {width: 10px; height: 10px;}
}

.dwa {
  .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11 {display: none;}
}
.trzy {
  .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11 {display: none;}

}
.piec {
  .s6, .s7, .s8, .s9, .s10, .s11 {display: none;}

}
.siedem {
  .s8, .s9, .s10, .s11 {display: none;}
}
.dziewiec {
  .s10, .s11 {display: none;}
}
.jedanascie {

}

.vnone {display: none;}

.typew {
  p {font-size: 12px; color: @prim; line-height: 22px;}
  ul {display: flex; flex-direction: row;flex-wrap: wrap; justify-content: center;  margin: 0; padding: 0;
    li {
      list-style: none; padding: 5px; border: 1px solid #dddddd; margin: 3px; cursor: pointer;
    }
    li:hover {background: @prim; color: #ffffff;}
    .open {background: @prim; color: #ffffff;}
  }
}

.typeh {
  p {font-size: 12px; color: @prim; line-height: 22px;}
  ul {display: flex; flex-direction: row ;flex-wrap: wrap; justify-content: center; margin: 0; padding: 0;
    li {
      list-style: none; padding: 5px; border: 1px solid #dddddd; margin: 3px; cursor: pointer; text-align: center;
    }
    li:hover {background: @prim; color: #ffffff;}
    .open {background: @prim; color: #ffffff;}
  }
}