@import url("mixins.less");
@import url("editor.less");
@import url("Plugin_MZGallery.less");

// @blue: #001dad;
@blue: #266fa2;
@black: #000000;
@darkgrey: #434A54;
@lightgrey: #CCD0D9;
@grey: #AAB2BD;

@new: #599bff;

/* fonts karavas
  Literata 600
  Source Sans 200 400 700
*/

.fnt() {
  -moz-font-smoothing: none;
  -webkit-font-smoothing: antaliased;
  -webkit-font-smoothing: subpixel-antaliased;
}

.light(@size:17px, @line-height:@size, @letter-spacing:0) {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: @size;
  line-height: @line-height;
  letter-spacing: @letter-spacing;
  font-weight: 200;
  .fnt;
}

.normal(@size:17px, @line-height:@size, @letter-spacing:0) {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: @size;
  line-height: @line-height;
  letter-spacing: @letter-spacing;
  font-weight: 400;
  .fnt;
}

.bold(@size:17px, @line-height:@size, @letter-spacing:0) {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: @size;
  line-height: @line-height;
  letter-spacing: @letter-spacing;
  font-weight: 600;
  .fnt;
}

.title(@size:17px, @line-height:@size, @letter-spacing:0) {
  font-family: 'Literata', serif;
  font-size: @size;
  line-height: @line-height;
  letter-spacing: @letter-spacing;
  font-weight: 600;
  .fnt;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: white;
  .normal;
//   overflow-x: hidden;
}
body {
  overflow-x: hidden;

  &.locked {
    overflow: hidden;
    height: 100vh;
  }
}

.popover, .tooltip {
	display: none !important;
}

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

h1, h2, h3, h4 {
  font-family: 'Crimson Text', serif;
}

.h1() {
  .title(33px,40px,1px);
  color: @blue;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 50px;
  @media @desktop {
    .title(26px,31px,1px);
    margin-top: 40px;
    margin-bottom: 28px;
  }
  @media @laptop {
    .title(22px,28px,1px);
    margin-top: 40px;
    margin-bottom: 27px;
  }
  @media @ipad {
    .title(27px,35px,1px);
    margin-top: 60px;
    margin-bottom: 40px;
  }
  @media @pad {
    .title(23px,30px,1px);
    margin-top: 60px;
    margin-bottom: 25px;
  }
  @media @pad-l {
    margin-top: 0;
  }
  @media @mobile {
    .title(25px,35px,1px);
  }

  & + .share {
    margin-top: -10px;
    margin-bottom: 35px;

    @media @desktop {
      margin-top: -12px;
      margin-bottom: 29px;
      .scale(0.85);
    }
    @media @laptop {
      margin-top: -15px;
      margin-bottom: 22px;
      .scale(0.80);
    }
    @media @ipad {
      margin-top: -22px;
      margin-bottom: 35px;
      .scale(1);
    }
    @media @pad {
      margin-top: -10px;
      margin-bottom: 35px;
      .scale(0.7);
    }
  }

  &.consequent {
    margin-top: 60px;
  }

}
.h2() {
  margin: 35px 0 15px;
  .title(29px);
  color: darken(@blue, 10%);
  @media @desktop {
    .title(24px,29px);
    margin: 35px 0 15px;
  }
  @media @laptop {
    margin: 25px 0 13px;
    .title(20px,26px);
  }
}
.h3() {
  margin: 32px 0 15px;
  .title(25px,27px);
  @media @desktop {
    margin: 29px 0 13px;
    .title(22px,27px);
  }
  @media @laptop {
    margin: 23px 0 11px;
    .title(18px,24px);
  }
}
.h4() {
  margin: 20px 0 15px;
  .title(18px,23px);
  border-bottom: thin solid @blue;
  padding-bottom: 6px;
  @media @desktop {
    margin: 20px 0 15px;
    .title(18px,23px);
  }
  @media @laptop {
    margin: 20px 0 13px;
    .title(17px,22px);
  }
}

.homeh1() {
  .light(41px,45px,4px);
  color: white;
  margin-bottom: 30px;
  margin-top: 0;
  text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
  text-align: center;

  @media @desktop {
    .light(35px,45px,3px);
    margin-bottom: 20px;
  }
  @media @laptop {
    .light(31px,31px,3px);
  }
  @media @ipad {
    .light(35px,45px,3px);
    margin-bottom: 20px;
  }
}

.quote() {
  border-left: 50px solid #97a6b5;
  margin-left: 25px;
  padding-left: 20px;
  font-style: italic;
  margin-right: 0;
  padding-right: 13%;
  position: relative;

  & p {
    .normal(14px,18px);
    @media @laptop {
      .normal(13px,18px);
    }
  }

  &:before {
    content: open-quote;
    position: absolute;
    top: -7;
    left: -32px;
    .serif400(87px);
    color: white;
    font-style: normal;
  }
}

.p() {
  margin: 0 0 10px;
  .normal(15px,19px);
  color: black;

  @media @desktop {
    margin: 0 0 7px;
    .normal(13.5px,17px);
  }
  @media @laptop {
    margin: 0 0 5px;
    .normal(13px,15px);
  }
  @media @ipad {
    margin: 0 0 10px;
    .normal(15px,18px);
  }
  @media @pad {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 23px;
  }
  @media @mobile {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 23px;
  }
}

.ul() {
  margin: 25px 0 20px;
  padding: 0;
  list-style-position: outside;
  padding-left: 35px;
  border-left: 2px solid @blue;

  & li {
    margin: 0 0 4px;
    .p;
    font-weight: 600!important;
    color: black;
    padding-left: 7px;
  }
}

.a() {
  display: inline-block;
  color: @blue;
  text-decoration: none;
  .transition;

  &:hover {
    color: darken(@blue, 20%);
    text-decoration: underline;
  }
}

body {
  .customBar;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  .customBar;

  @media @pad {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a2bed2+0,ffffff+19,ffffff+100 */
    background: rgb(162,190,210); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(162,190,210,1) 0%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(162,190,210,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(162,190,210,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2bed2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  }

  &.com_form2content {
    & .content {
      background: white url(../images/dark-top.jpg) left top repeat-x;
    }
  }

  & .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .transition;
    z-index: 1000;
    @media @pad {
      position: relative;
    }
    @media @mobile {
      position: relative;
    }

    & .header-logo {
      position: absolute;
      display: flex;
      align-items: center;
      .noselect;
      text-decoration: none;
      cursor: pointer;
      .transition;
      top: 20px;
      left: 20px;
      @media @laptop {
        top: 15px;
        left: 15px;
      }
      @media @pad {
        position: inherit;
        display: block;
        text-align: center;
      }
      @media @mobile {
        position: inherit;
        display: block;
        text-align: center;
      }

      &:hover {
        .scale(1.05);
        @media @laptop {
          .scale(1.02);
        }
        @media @ipad {
          .scale(1);
        }
        @media @pad {
          .scale(1);
        }
        @media @mobile {
          .scale(1);
        }
      }

      & img {
        width: 80px;
        height: auto;
        margin-right: 20px;
        .shadow;
        @media @desktop {
          width: 60px;
        }
        @media @laptop {
          width: 50px;
          margin-right: 10px;
        }
        @media @ipad {
          width: 80px;
          margin-right: 20px;
        }
        @media @pad {
          margin-top: 50px;
          width: 65px;
        }
        @media @pad-l {
          margin-top: 10px;
          width: 60px;
        }
        @media @mobile {
          margin-top: 50px;
          width: 65px;
        }
      }

      & div {
        .bold(19px,23px,2px);
        color:white;
        text-shadow: 0 0 3px #000000, 0 0 5px #000000, 0 0 7px #000000;

        @media @desktop {
          .bold(17px,21px,2px);
        }
        @media @laptop {
          .bold(15px,19px,2px);
        }
        @media @ipad {
          .bold(19px,23px,2px);
        }
        @media @pad {
          color: black;
          .bold(17px,20px,2px);
          text-shadow: none;
          margin-top: 13px;
        }
        @media @pad-l {
          margin-bottom: 50px;
        }
        @media @mobile {
          color: black;
          .bold(17px,20px,2px);
          text-shadow: none;
          margin-top: 13px;
        }

        & span {
          color: #82d6ff;
          @media @pad {
            color: @blue;
          }
          @media @mobile {
            color: @blue;
          }
        }
      }
    }

    & .perma {
      position: absolute;
      top: 0;
      right: 0;
      background: url(../images/top-menu-perma.png) left center no-repeat;
      background-size: auto 100%;
      display: flex;
      @media @laptop {
        .origin(100%,0);
        .scale(0.85);
      }
      @media @ipad {
        .scale(1);
      }
      @media @pad {
        .scale(0.9);
      }
      @media @mobile {
        .scale(1);
      }

      & div.menu-trigger {
        background: @blue;
        color: white;
        .bold(14px,14px,1px);
        padding: 12px 30px 12px 10px;
        cursor: pointer;
        .shadow(inset -5px -1px 5px 0px rgba(0, 0, 0, 0.6));
        position: relative;
        .transition;
        @media @desktop {
          .bold(12px,12px,1px);
        }
        @media @ipad {
          .bold(14px,14px,1px);
        }

        &:hover {
          background: black;
          &:before {
            border-color: transparent black transparent transparent;
          }
        }

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: -42px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 42px 42px 0;
          border-color: transparent @blue transparent transparent;
          .transition;

          @media @desktop {
            left: -35px;
            border-width: 0 35px 35px 0;
          }
          @media @laptop {
            left: -34px;
          }
          @media @ipad {
            left: -37px;
            border-width: 0 38px 38px 0;
          }
        }
      }

      & .mod-languages {
        margin: 8px 40px 10px 42px;
        @media @ipad{
          margin: 10px 36px 8px 42px;
        }

        & ul {
          & li {
            &.lang-active {
              display: none;
            }
            & a {
              .bold(14px,14px,1px);
              color: @blue;
              .transition;

              @media @desktop {
                .bold(12px,12px,1px);
              }
              @media @ipad {
                .bold(14px,14px,1px);
              }

              &:hover {
                color: black;
              }
            }
          }
        }
      }
    }

    &.minified {

    }
  }

  & .header-perma {
    background: black;
    position: fixed;
    z-index: 1001;
    width: 100%;
    top: 0;
    left: 0;
    .transition(all 0.4s ease);
    .translate(0,-100px,0);
    padding: 10px;
    overflow: hidden;

    @media @desktop {
      padding: 8px;
    }
    @media @laptop {
      padding: 5px;
    }
    @media @ipad {
      padding: 10px;
      .shadow;
    }
    @media @pad {
      display: none;
    }
    @media @mobile {
      display: none;
    }

    & .header-logo {
      display: flex;
      align-items: center;
      text-decoration: none;

      & img {
        height: 32px;
        @media @desktop {
          height: 25px;
        }
        @media @laptop {
          height: 20px;
        }
        @media @ipad {
          height: 32px;
        }
      }

      & div {
        .bold(17px,17px,1px);
        color:white;
        margin-left: 14px;
        @media @desktop {
          .bold(15px,15px,1px);
        }
        @media @laptop {
          margin-left: 10px;
          .bold(14px,14px,1px);
        }
        @media @ipad {
          .bold(17px,17px,1px);
          margin-left: 14px;
        }

        & br {
          display: none;
        }

        & span {
          color: @new;
          padding-left: 10px;
          @media @laptop {
            padding-left: 7px;
          }
          @media @ipad {
            padding-left: 10px;
          }
        }
      }
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 251px;
      background: url(../images/perma.png) center left no-repeat;
      @media @laptop {
        width: 213px;
      }
      @media @ipad {
        width: 251px;
      }
    }

    & .menu-trigger {
      position: absolute;
      top: 0;
      right: 0;
      .bold(15px,15px,1px);
      color: white;
      z-index: 2;
      background: darken(@blue, 20%);
      padding: 19px 18px 19px 5px;
      .transition;
      cursor: pointer;

      @media @desktop {
        .bold(12px,12px,2px);
        padding: 16px 18px 13px 11px;
      }
      @media @laptop {
        .bold(11px,11px,1px);
        padding: 10px 18px 13px 10px;
      }
      @media @ipad {
        .bold(15px,15px,1px);
        padding: 19px 18px 19px 5px;
      }

      &:hover {
        background: black;

        &:before {
          border-color: transparent black transparent transparent;
        }
      }

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -53px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 53px 53px 0;
        border-color: transparent darken(@blue, 20%) transparent transparent;
        .transition;
        @media @desktop {
            left: -41px;
            border-width: 0 41px 41px 0;
        }
        @media @laptop {
            left: -30px;
            border-width: 0 30px 30px 0;
        }
        @media @laptop {
            left: -53px;
            border-width: 0 53px 53px 0;
        }
      }
    }

    & .mod-languages {
      position: absolute;
      top: 0;
      right: 115px;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 1;
      @media @laptop {
        top: -2px;
        right: 100px;
      }
      @media @ipad {
        top: 0;
        right: 115px;
      }

      & ul {
        & li {
          @media @laptop {
            margin: 0;
          }
          &.lang-active {
            display: none;
          }
          & a {
            .bold(15px,15px,1px);
            color: white;
            .transition;
            @media @desktop {
              .bold(12px,12px,2px);
            }
            @media @laptop {
              .bold(11px,11px,1px);
            }
            @media @ipad {
              .bold(15px,15px,1px);
            }
            &:hover {
              color: black;
            }
          }
        }
      }
    }

    &.active {
      .transition(all 0.4s ease 0.1s);
      .translate(0,0,0);
    }
  }

  & .mobile-menu {
    .transition(all 0.4s ease);
    position: fixed;
    z-index: 999999999999999999999;
    top: 0;
    left: 110vw;
    width: 100vw;
    height: 100vh;
    // .translate(100vw,0,0);
    opacity: 0;
    .shadow;

    &.active {
      // .translate(0,0,0);
      left: 0;
      opacity: 1;

      & .mobile-menu-back {
        opacity: 1;
      }
    }

    & .mobile-menu-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .alpha(10,0,0,0);
      .transition(all 0.1s ease 0.4s);
      opacity: 0;
    }

    & .mobile-menu-inner {
      position: absolute;
      top: 0;
      right: 0;
      width: 25%;
      height: 100%;
      background: @blue;
      overflow-x: hidden;
      overflow-y: auto;
      .customBar;
      @media @desktop {
        width: 20%;
      }
      @media @ipad {
        width: 250px;
      }
      @media @pad {
        width: 100vw;
      }
      @media @mobile {
        width: 100vw;
      }

      & .close-menu {
        position: absolute;
        top: 17px;
        right: 20px;
        width: 25px;
        height: 25px;
        cursor: pointer;

        @media @desktop {
          top: 13px;
          right: 14px;
          width: 18px;
          height: 18px;
        }
        @media @laptop {
          top: 11px;
          right: 13px;
          width: 15px;
          height: 15px;
        }
        @media @ipad {
          top: 11px;
          right: 15px;
          width: 20px;
          height: 20px;
        }
        @media @pad {
          top: 11px;
          right: 15px;
          width: 20px;
          height: 20px;
        }
        @media @mobile {
          top: 11px;
          right: 15px;
          width: 20px;
          height: 20px;
        }

        &:before, &:after {
          content: '';
          position: absolute;
          .origin(50%,50%);
          width: 100%;
          height: 2px;
          left: 0;
          top: 50%;
          magrin-top: -1px;
          background: white;
          .rotate(45deg);
        }

        &:after {
          .rotate(-45deg);
        }
      }

      & h1 {
        .title(20px, 20px, 5px);
        color: white;
        margin: 0;
        .noselect;
        padding: 20px;
        background: black;
        .shadow;
        @media @desktop {
          .title(17px, 17px, 3px);
          padding: 12px 20px;
        }
        @media @laptop {
          .title(14px, 14px, 2px);
          padding: 12px 15px;
        }
        @media @ipad {
          .title(17px, 17px, 5px);
          padding: 14px 20px;
        }
        @media @pad {
          .title(17px, 17px, 5px);
          padding: 14px 20px;
          text-align: center;
        }
        @media @mobile {
          .title(17px, 17px, 5px);
          padding: 14px 20px;
          text-align: center;
        }
      }

      & ul.main-menu {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
        width: 100%;

        & li {
          text-transform: uppercase;
          background: white!important;
          border: none!important;
          position: relative;

          & a, & span {
            color: black!important;
            border-bottom: thin solid @blue!important;
            .bold(13px, 13px, 2px)!important;
            position: relative;

            @media @desktop {
              .bold(12px, 12px, 1px)!important;
            }

            @media @laptop {
              .bold(11px, 11px, 1px)!important;
            }

            @media @ipad {
              .bold(12px, 12px, 1px)!important;
            }
            @media @pad {
              .bold(13px, 20px, 1px)!important;
            }
            @media @mobile {
              .bold(13px, 20px, 1px)!important;
            }

            &:hover {
              color: white!important;
              background: @blue!important;

              @media @ipad {
                color: black!important;
                background: white!important;
              }
              @media @pad {
                color: black!important;
                background: white!important;
              }
              @media @mobile {
                color: black!important;
                background: white!important;
              }
            }
          }
        }

        // LEVEL 1

        & > li {
          background: lighten(@blue, 10%);
          border-bottom: thin solid @blue;

          &  > a, & > span {
            .bold(15px, 15px, 2px);
            padding: 15px 15px 15px 20px;
            text-decoration: none;
            color: white;
            text-transform: uppercase;
            display: block;
            .transition;

            &:hover {
              background: black;
            }
            @media @desktop {
              .bold(13px, 13px, 2px);
              padding: 10px 15px 10px 20px;
            }
            @media @laptop {
              .bold(12px, 12px, 2px);
              padding: 8px 15px;
            }
            @media @ipad {
              .bold(15px, 15px, 2px);
              padding: 11px 15px 11px 20px;
            }
          }

          // LEVEL 2

          & > ul {
            margin: 0;
            padding: 0;
            list-style: none;

            & > li {
              background: lighten(@blue, 20%);
              border-bottom: thin solid @blue;
              .transition;

              &:last-child {
                border: none;
              }

              &:hover {
                background: black;
              }

              & > a {
                .bold(15px,15px,2px);
                padding: 11px 15px 11px 50px;
                text-decoration: none;
                color: white;
                display: block;

                &:before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 20px;
                  .circle(8px);
                  background: @blue;
                  margin-top: -4px;

                  @media @desktop {
                    .circle(6px);
                    margin-top: -3px;
                  }
                  @media @laptop {
                    left: 13px;
                  }
                  @media @ipad {
                    .circle(8px);
                    margin-top: -4px;
                    left: 22px;
                  }
                }

                @media @desktop {
                  .bold(13px,13px,1px);
                  padding: 10px 15px 10px 35px;
                }
                @media @laptop {
                  .bold(12px,12px,1px);
                  padding: 8px 15px 8px 25px;
                }
                @media @ipad {
                  .bold(15px,15px,2px);
                  padding: 11px 15px 11px 40px;
                }

              }

              // LEVEL 3

              & > ul {
                margin: 0;
                padding: 0;
                list-style: none;

                & > li {
                  background: lighten(@blue, 30%);
                  border-bottom: thin solid @blue;
                  .transition;

                  &:last-child {
                    border: none;
                  }

                  &:hover {
                    background: black;
                  }

                  & > a {
                    .normal(14px,14px,3px);
                    padding: 15px 15px 15px 70px;
                    text-decoration: none;
                    color: white;
                    display: block;
                    text-transform: uppercase;

                    &:before {
                      content: '';
                      position: absolute;
                      top: 50%;
                      left: 35px;
                      width: 6px;
                      height: 6px;
                      background: black;
                      margin-top: -3px;

                      @media @desktop {
                        width: 4px;
                        height: 4px;
                        margin-top: -2px;
                      }
                      @media @laptop {
                        left: 24px;
                      }
                      @media @ipad {
                        width: 6px;
                        height: 6px;
                        margin-top: -3px;
                        left: 40px;
                      }
                    }

                    @media @desktop {
                      .normal(12px,12px,2px);
                      padding: 10px 15px 10px 50px;
                    }
                    @media @laptop {
                      .normal(12px,12px,2px);
                      padding: 8px 15px 8px 35px;
                    }
                    @media @ipad {
                      .normal(14px,14px,3px);
                      padding: 11px 15px 11px 55px;
                    }
                  }

                  // LEVEL 4

                  & > ul {
                    margin: 0;
                    padding: 0;

                    & > li {
                      background: lighten(@blue, 40%);
                      border-bottom: thin solid @blue;
                      .transition;

                      &:last-child {
                        border: none;
                      }

                      &:hover {
                        background: black;
                      }

                      & > a {
                        .light(14px,14px,3px);
                        padding: 15px 15px 15px 100px;
                        text-decoration: none;
                        color: white;
                        display: block;
                        text-transform: uppercase;

                        &:before {
                          content: '';
                          position: absolute;
                          top: 50%;
                          left: 50px;
                          .circle(4px);
                          background: @blue;
                          margin-top: -2px;

                          @media @laptop {
                            left: 37px;
                          }
                          @media @ipad {
                            left: 57px;
                          }
                        }

                        @media @desktop {
                          .light(12px,12px,3px);
                          padding: 10px 15px 10px 65px;
                        }
                        @media @laptop {
                          .light(12px,12px,2px);
                          padding: 8px 15px 8px 50px;
                        }
                        @media @ipad {
                          .light(14px,14px,3px);
                          padding: 11px 15px 11px 73px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

    }

  }

  & .moduletable.path {
    background: @blue;

    & ul.breadcrumb.path {
      margin: 0;
      padding: 0;
      text-align: center;

      & li {
        display: inline-block;
        .noselect;
        color: white;
        padding: 10px;
        .normal(15px);
        position: relative;
        @media @laptop {
          padding: 8px;
          .normal(13px);
        }

        &:after {
          content: '';
          .triangleR(8px, 8px, white);
          position: absolute;
          right: -6px;
          top: 50%;
          margin-top: -3px;
          @media @laptop {
            .triangleR(6px, 6px, white);
            margin-top: -2px;
          }
        }

        &:first-child {
          padding-right: 0;

          &:after {
            display: none;
          }
        }

        &:last-child {
          &:after {
            display: none;
          }
        }

        & .divider {
          display: none;
        }

        & a {
          color: white;
          text-decoration: none;
        }
      }
    }
  }

  & .content {
    background: white;

    & .hero-container {
      width: 100%;
      height: 100vh;
      background: @blue;
      position: relative;
      .noselect;
      z-index: 999;
      .transition(all 0.4s ease);

      @media @ipad {
        height: 70vh;
      }
      @media @pad {
        display: none;
      }
      @media @mobile {
        display: none;
      }

      .banner {
        position: absolute;
        z-index: 1000000;
        width: 300px;
        bottom: 40px;

        & img {
          width: 100%;
          height: auto;
        }

        &.banner-left {
          left: 40px;
        }

        &.banner-right {
          right: 40px;
        }
      }

      a.edit-button {
        position: absolute;
        right: 10px;
        bottom: 10px;
        background: @blue;
        .shadow;
        text-decoration: none;
        padding: 10px 8px;
        color: white;
        .normal(14px,14px,1px);
        .transition;
        opacity: 0.4;
        &:hover {
          opacity: 1;
        }
      }

      & .mask {

        & div {
          &.top {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 20%;
            width: 100%;
            opacity: 0.4;
            background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
          }
          &.bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 30%;
            width: 100%;

            background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
          }
          &.left {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 10%;
            opacity: 0.4;
            background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
          }
          &.right {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 10%;
            opacity: 0.4;
            background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
          }
        }
      }

      & .hero-details {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        & .hero-detail {
          .transition(all 0.4s ease);
          opacity: 0;
          position: absolute;
          left: 10%;
          bottom: 0;
          width: 80%;
          padding: 0 0 220px;

          @media @desktop {
            padding: 0 0 200px;
          }
          @media @desktop {
            padding: 0 0 160px;
          }

          & h1 {
            text-align: center;
            color: white;
            .light(60px,63px,2px);
            text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
            .transition(all 0.4s ease 0.2s);
            opacity: 0;
            .translate(0,100px,0);
            margin-bottom: 0;
            @media @desktop {
              .light(42px,50px,2px);
            }
            @media @laptop {
              .light(32px,32px,2px);
              margin-top: 0;
            }
            @media @ipad {
              .light(37px,37px,2px);
              margin-top: 0;
            }
          }

          & p {
            color: #b2faff;
            text-shadow: 0 0 5px #000000;
            text-align: center;
            .normal(18px,23px);
            .transition(all 0.4s ease);
            opacity: 0;
            .translate(0,100px,0);

          }

          &.active {
            opacity: 1;
            z-index: 99;

            & p {
              .transition(all 0.4s ease 0.2s);
              opacity: 1;
              .translate(0,0,0);
            }

            & h1 {
              .transition(all 0.4s ease);
              opacity: 1;
              .translate(0,0,0);
            }
          }
        }
      }

      & .hero-images {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: @blue;
        background-image: url(../images/45.gif);
        background-repeat: no-repeat;
        background-position: center center;

        & .hero-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .cover;
          .blured(5px);
          opacity: 0;
          .transition(all 0.4s ease);

          &.loading {
            opacity: 1;
          }

          &.active {
            .blured(0px);
            opacity: 1;

            & .main-image {
              opacity: 1;
            }
          }

          & .main-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            .transition(all 0.4s ease 0.2s);
            .cover;
          }
        }
      }

      & .navigator {
        position: absolute;
        left: 0;
        bottom: 90px;
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: center;
        z-index: 999;
        @media @laptop {
          bottom: 60px;
        }

        & .bullet {
          background: white;
          .shadow;
          width: 16px;
          height: 16px;
          margin: 0 15px;
          .radius(8px);
          cursor: pointer;
          .transition;

          @media @desktop {
            width: 12px;
            height: 12px;
            margin: 0 8px;
            .radius(6px);
          }
          @media @laptop {
            width: 8px;
            height: 8px;
            margin: 0 6px;
            .radius(4px);
          }
          @media @ipad {
            width: 12px;
            height: 12px;
            margin: 0 7px;
            .radius(6px);
          }

          &.active {
            background: @new;
          }
        }
      }

    }

    & .latestprojects {
      border-bottom: 50px solid @blue;
      @media @desktop {
        border-bottom: 30px solid @blue;
      }
      @media @ipad {
        border-bottom: 50px solid white;
      }

      & h1 {
        .h1;
        text-align: center;
        color: black;
        @media @pad-p {
          margin-bottom: 25px;
        }
      }

      & .projects-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        & .project-item {
          flex: 0 0 25%;
          overflow: hidden;
          position: relative;
          height: 250px;
          .cover;

          @media @desktop {
            height: 215px;
          }
          @media @desktop {
            height: 175px;
          }
          @media @ipad {
            height: 200px;
            flex: 0 0 33.3333%;
          }
          @media @ipad-l {
            height: 200px;
            flex: 0 0 25%;
          }
          @media @pad-p {
            flex: 0 0 100%;
            margin-bottom: 40px;
          }
          @media @mobile {
            flex: 0 0 100%;
            margin-bottom: 40px;
          }

          & .title {
            position: absolute;
            background: black;
            color: white;
            .light(17px);
            left: 0;
            width: 100%;
            bottom: 0;
            padding: 13px;
            .transition(all 0.4s ease);
            .translate(0,0,0);
            text-align: center;

            @media @desktop {
              .light(13px,14px,0.5px);
              padding: 12px;
            }
            @media @desktop {
              .light(11px,13px,0px);
              padding: 8px 20px;
            }
            @media @ipad {
              .normal(12px,14px,0px);
              padding: 10px 20px;
            }
            @media @pad {
              .normal(12px,14px,0px);
              padding: 10px 20px;
            }
            @media @mobile {
              .normal(12px,14px,0px);
              padding: 10px 20px;
            }
          }

          & .details {
            position: absolute;
            background: fade(@blue, 70%);
            color: white;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            .transition(all 0.4s ease);
            .normal(15px,20px);
            padding: 13px;
            @media @desktop {
              .normal(12px,16px);
            }
            @media @desktop {
              .normal(11px,12px);
            }
            @media @ipad {
              display: none;
            }
            @media @pad {
              display: none;
            }
            @media @mobile {
              display: none;
            }

            & .dtitle {
              .title(19px,22px);
              margin-bottom: 10px;
              @media @desktop {
                .title(14px,20px);
              }
              @media @laptop {
                .title(11px,16px);
              }
            }
          }

          & a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            .transition;

            &:before, &:after {
              content: '';
              width: 30px;
              height: 2px;
              position: absolute;
              background: white;
              right: 20px;
              bottom: 29px;
              .origin(50%,50%);
              @media @desktop {
                width: 20px;
              }
              @media @desktop {
                width: 16px;
              }
              @media @ipad {
                display: none;
              }
            }
            &:after {
              .rotate(90deg);
            }
          }

          &:hover {
            & .title {
              .translate(0,100%,0);
              @media @ipad {
                .translate(0,0,0);
              }
              @media @pad {
                .translate(0,0,0);
              }
            }
            & .details {
              top: 0;
            }
            & a {
              opacity: 1;
              .transition(all 0.2s ease 0.4s);
            }
          }
        }
      }
    }

    & .inner {
      min-height: 100vh;

      & .home-products-list {
        padding: 60px 0;
        .cover;

        @media @desktop {
          padding: 40px 0;
        }
      }

      & .article {
        max-width: 1024px;
        margin: 0 auto;
        position: relative;
        padding-bottom: 60px;

        @media @desktop {
          max-width: 950px;
        }
        @media @ipad {
          padding: 0 40px;
        }
        @media @pad {
          padding: 60px 30px;
        }
        @media @mobile {
          padding: 30px 15px;
        }

        &.home {

          & .article-inner {
            padding-bottom: 70px;
          }

          & h1 {
            .h1;
          }

          & p {
            & img {
              @media @desktop {
                width: 185px;
                height: auto;
              }
              @media @laptop {
                width: 160px;
                height: auto;
              }
              @media @ipad {
                width: 190px;
                height: auto;
              }
            }
          }
        }

        &.products {
          max-width:none;
          @media @ipad {
            padding-left: 0;
            padding-right: 0;
          }
          @media @pad {
            padding-left: 0;
            padding-right: 0;
          }
          @media @pad-l {
            padding-top: 0;
          }
          @media @mobile {
            padding-left: 0;
            padding-right: 0;
          }

          & .article-inner {
            padding-bottom: 30px;
            @media @laptop {
              padding-left: 30px;
              padding-right: 30px;
            }
          }

          & .moduletable.path {
            @media @pad-l {
              margin-bottom: 20px;
            }
          }

          & .nav.menu.mod-list {
            position: absolute;
            top: 7px;
            right: 66px;
            margin: 0;
            padding: 0;
            list-style: none;
            z-index: 2;
            border: none;

            & li {
              margin: 0;
              padding: 0;

              & a {
                background: black;
                text-decoration: none;
                padding: 6px 15px;
                color: white;
                .normal(14px,14px,1px);
                .transition;
                opacity: 0.4;
                &:hover {
                  opacity: 1;
                }
              }
            }
          }

          & .product-category {
            .product-category;
          }

          & .productGallery {
            background: @blue;
            padding-top: 30px;

            & h1 {
              .light(45px,45px,1px);
              color: white;
              text-align: center;
              margin-bottom: 30px;
              margin-top: 0;
              text-shadow: 0 0 2px #000000, 0 0 4px #000000, 0 0 6px #000000;
            }

            & .MZGalleryContainer {
              justify-content: center;
              padding-top: 0;
              padding-bottom: 30px;
            }

            & .MZGalleryImage {
              flex: 0 0 20%;
              height: 200px;
              overflow: hidden;
              background: none;
              margin: 0 10px 10px;
              .shadow;

              &:hover {
                & .GalleryImageTitle {
                  .translate(0,0,0);
                }
              }

              & .GalleryImageTitle {
                text-align: center;
                background: black;
                .translate(0,100%,0);
                .normal(14px);
                color: white;
              }

              & .inner {
                min-height: inherit;
                background-size: cover;
              }
            }
          }

          & .MZGalleryContainer {
            display: flex;
            flex-wrap: wrap;

            &.spareGallery {

              & .MZGalleryImage {
                flex: 0 0 20%;
                height: 180px;
                overflow: inherit;
                background: none;
                margin: 0 0 60px;

                & .GalleryImageTitle {
                  text-align: center;
                  background: none;
                  .translate(0,100%,0);
                  .normal(14px);
                  color: black;
                }

                & .inner {
                  min-height: inherit;
                  background-size: contain;
                }
              }
            }
          }

          & .projects-area {
            margin-top: 20px;

            & .nav.menu.mod-list {
              position: inherit;
              display: flex;
              justify-content: center;

              & li {
                margin: 0 10px;
              }
            }
          }
        }

        & .article-inner {
          max-width: 1024px;
          margin: 0 auto;
          position: relative;
          padding-bottom: 0;
        }

        & div.more, & a.more {
          .serif600(19px);
          color: @blue;
          margin-top: 15px;
          text-decoration: none;
        }

        & div.icons {
          display: none;
        }

        & .readmore {
          display: none;
        }

        & div.share {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
          @media @pad {
            justify-content: center;
            flex-wrap: wrap;
          }

          & h3 {
            .sans300(14px);
            color:black;
            margin: 0 10px 0 0;

            @media @laptop {
              .sans300(12px);
            }
            @media @pad {
              width: 100%;
              text-align: center;
              font-size: 17px;
              font-weight: 400;
              line-height: 17px;
              margin-bottom: 11px;
            }
          }

          & a {
            width: 25px;
            height: 25px;
            background-image: url(../images/ua-social-media-share.png);
            background-repeat: no-repeat;
            background-size: 25px 150px;
            margin-right: 5px;
            @media @pad {
              width: 30px;
              height: 30px;
              margin: 0 5px;
              background-size: 30px 180px;
            }

            &.facebook {
              background-position: center top;
              &:hover { background-position: center -25px; }
              @media @pad {
                &:hover { background-position: center -30px; }
              }
            }

            &.twitter {
              background-position: center -50px;
              &:hover { background-position: center -75px; }
              @media @pad {
                background-position: center -60px;
                &:hover { background-position: center -90px; }
              }
            }

            &.linkedin {
              background-position: center -100px;
              &:hover { background-position: center -125px; }
              @media @pad {
                background-position: center -120px;
                &:hover { background-position: center -150px; }
              }
            }
          }
        }

        & a.edit-article-button {
          position: absolute;
          right: 0px;
          top: 0px;
          background: @blue;
          text-decoration: none;
          padding: 8px 15px;
          color: white;
          .normal(14px,14px,1px);
          .transition;
          opacity: 0.4;
          &:hover {
            opacity: 1;
          }
        }

        & .main-image {
          width: 100%;
          height: 40vh;
          .cover;
          background-attachment: fixed;
          @media @pad {
            height: 25vh;
          }
          @media @mobile {
            display: none;
          }
        }

        & .related-projects {
          & h1 {
            color: black;
          }
          & .projects-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            & .project-item {
              flex: 0 0 25%;
              overflow: hidden;
              position: relative;
              height: 250px;
              .cover;

              & .title {
                position: absolute;
                background: black;
                color: white;
                .light(17px);
                left: 0;
                width: 100%;
                bottom: 0;
                padding: 13px;
                .transition(all 0.4s ease);
                .translate(0,0,0);
              }

              & .details {
                position: absolute;
                background: fade(@blue, 70%);
                color: white;
                top: -100%;
                left: 0;
                width: 100%;
                height: 100%;
                .transition(all 0.4s ease);
                .normal(15px,20px);
                padding: 13px;

                & .dtitle {
                  .title(19px,22px);
                  margin-bottom: 10px;
                }
              }

              & a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                .transition;

                &:before, &:after {
                  content: '';
                  width: 30px;
                  height: 2px;
                  position: absolute;
                  background: white;
                  right: 20px;
                  bottom: 29px;
                  .origin(50%,50%);
                }
                &:after {
                  .rotate(90deg);
                }
              }

              &:hover {
                & .title {
                  .translate(0,100%,0);
                }
                & .details {
                  top: 0;
                }
                & a {
                  opacity: 1;
                  .transition(all 0.2s ease 0.4s);
                }
              }
            }
          }
        }

        & h1 { .h1; }
        & h2 { .h2; }
        & h3 { .h3; }
        & h4 { .h4; }
        & blockquote {
          .quote;
        }
        & p {
          .p;
          & a { .a; }
        }
        & ul { .ul; }
        & ol { .ul; }
        & a {
          overflow-wrap: break-word;
          word-wrap: break-word;

          -ms-word-break: break-all;
          /* Instead use this non-standard one: */
          word-break: break-word;

          /* Adds a hyphen where the word breaks, if supported (No Blink) */
          -ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;
          hyphens: auto;
        }

        &.login {
          & h1 {
            text-align: center;
            .serif600(40px,40px,10px);
          }

          & form {
            & fieldset {
              border:  none;
              width: 500px;
              margin: 0 auto;

              & .control-group {
                display: flex;
                flex-wrap: wrap;

                & .control-label {
                  order: 2;
                  width: 100%;
                  text-align: center;

                  & label {
                    .serif400(15px);
                    color: @blue;
                    margin-top: 10px;
                    display: inline-block;
                    text-transform: uppercase;
                    margin-bottom: 10px;
                  }
                }

                & .controls {
                  order: 1;
                  width: 100%;
                  text-align: center;

                  & button {
                    margin-top: 25px;
                    background: @blue;
                    .serif400(20px,20px,3px);
                    border: none;
                    .noshadow;
                    .transition;
                    color: white;
                    text-transform: uppercase;
                    padding: 15px 40px;
                    cursor: pointer;

                    &:hover {
                      background: black;
                    }
                  }

                  & input {
                    border: none;
                    .noshadow;
                    border-bottom: thin solid grey;
                    .normal(17px,30px);
                    text-align: center;
                    width: 100%;
                    padding: 5px;

                    &:-webkit-autofill,
                    &:-webkit-autofill:hover,
                    &:-webkit-autofill:focus,
                    &:-webkit-autofill:active  {
                        -webkit-box-shadow: 0 0 0 30px white inset !important;
                    }
                    &:focus{
                        outline: none;
                    }
                  }
                }
              }
            }
          }

          & div.remind {
            text-align: center;

            & ul {
              margin: 0;
              padding: 0;
              list-style: none;

              & li {
                margin-top: 10px;

                & a {
                  color: grey;
                  text-decoration: none;
                  .serif400(16px);

                  &:hover {
                    color: black;
                  }
                }
              }
            }
          }
        }
      }

      & .home {
        padding-bottom: 60px;

        @media @desktop {
          padding-bottom: 20px;
        }
        @media @laptop {
          padding-bottom: 0;
        }
        @media @pad {
          padding-top: 0;
        }

        & .hero-container {
          display: flex;
          align-items: stretch;

          @media @pad {
            display: block;
          }
          @media @mobile {
            display: block;
          }

          & .col1 {
            width: 100%;
            position: relative;
            .noselect;

            @media @pad {
              height: 330px;
            }
            @media @pad-l {
              height: 300px;
            }
            @media @mobile {
              display: none;
            }

            & .heroadmin {
              position: absolute;
              z-index: 99999999;
              top: 10px;
              right: 10px;

              @media @pad {
                display: none;
              }

              & ul {
                margin: 0;
                padding: 0;
                list-style: none;

                & li {
                  & a {
                    background: @blue;
                    color: white;
                    display: block;
                    padding: 10px;
                    .serif400(14px);
                    text-decoration: none;
                    .transition;

                    &:hover {
                      background: black;
                    }
                  }
                }
              }
            }

            & .mask {
              position: absolute;
              width: 100%;
              height: 50%;
              left: 0;
              bottom: 0;
              /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,0.9+100 */
              background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.9) 100%);
              background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 100%);
              background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 100%);
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
            }

            & .hero-details {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;

              & .hero-detail {
                .transition(all 0.4s ease);
                opacity: 0;
                position: absolute;
                left: 20%;
                bottom: 0;
                width: 60%;
                padding: 0 0 60px;

                @media @pad {
                  padding-bottom: 30px;
                }
                @media @pad-l {
                  width: 80%;
                  left: 10%;
                }

                & h1 {
                  text-align: center;
                  color: white;
                  .serif600(35px,35px,1px);
                  text-shadow: 0 0 5px #000000;
                  .transition(all 0.4s ease 0.2s);
                  opacity: 0;
                  .translate(0,100px,0);

                  @media @laptop {
                    .serif600(28px,32px,1px);
                  }
                }

                & p {
                  color: #b2faff;
                  text-shadow: 0 0 5px #000000;
                  text-align: center;
                  .normal(16px,23px);
                  .transition(all 0.4s ease);
                  opacity: 0;
                  .translate(0,100px,0);

                  @media @laptop {
                    .normal(15px,22px);
                  }
                  @media @pad {
                    font-size: 17px;
                    line-height: 24px;
                  }
                }

                &.active {
                  opacity: 1;
                  z-index: 9999999;

                  & p {
                    .transition(all 0.4s ease 0.2s);
                    opacity: 1;
                    .translate(0,0,0);
                  }

                  & h1 {
                    .transition(all 0.4s ease);
                    opacity: 1;
                    .translate(0,0,0);
                  }
                }
              }
            }

            & .hero-images {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
              background-color: black;
              background-image: url(../images/45.gif);
              background-repeat: no-repeat;
              background-position: center center;

              & .hero-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                .cover;
                .blured(5px);
                opacity: 0;
                .transition(all 0.4s ease);

                &.loading {
                  opacity: 1;
                }

                &.active {
                  .blured(0px);
                  opacity: 1;

                  & .main-image {
                    opacity: 1;
                  }
                }

                & .main-image {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  .transition(all 0.4s ease 0.2s);
                  .cover;
                }
              }
            }
          }

          & .col2 {
            flex: 0 0 25%;
            background: @blue;

            @media @laptop {
              flex: 0 0 20%;
            }
            @media @pad-l {
              display: flex;
              flex-wrap: wrap;
              flex: 0 0 100%;
            }

            & .timer {
              .noselect;
              @media @pad-l {
                flex: 0 0 100%;
              }

              & .countdown {
                text-align: center;
                .sans600(80px,80px,-3px);
                color: white;
                padding: 50px 0 10px;

                @media @laptop {
                  .sans600(63px,63px,-3px);
                  padding: 30px 0 10px;
                }
                @media @pad {
                  padding-top: 20px;
                  font-size: 55px;
                  line-height: 55px;
                  letter-spacing: 2px;
                }
              }

              & .countdown-label {
                text-align: center;
                color: white;
                .serif400(14px,18px,1px);
                border-top: thin solid white;
                margin: 0px 39px 20px;
                padding-top: 9px;

                @media @laptop {
                  .serif400(12px,14px,1px);
                }
                @media @pad {
                  font-size: 17px;
                }
              }
            }

            & a.button {
              display: block;
              background: black;
              text-decoration: none;
              color: white;
              border: none;
              text-align: center;
              width: 100%;
              .serif400(17px,22px,1px);
              padding: 20px 40px;
              cursor: pointer;
              .transition;

              @media @laptop {
                .serif400(14px,18px,1px);
                padding: 15px 30px;
              }
              @media @pad {
                font-size: 18px;
                padding: 20px;
              }
              @media @pad-l {
                width: 50%;
                display: block;
              }
              &:nth-child(even) {
                @media @pad-l {
                  border-right: thin solid #303030;
                }
              }

              &:hover {
                background: darken(@blue, 10%);
              }

              & + a.button {
                border-top: thin solid #303030;
              }
            }

          }
        }

      }

    }

    & .certificates {
      background: url(../images/certificates-background2.jpg) center center no-repeat;
      background-size: cover;
      padding-bottom: 0;
      padding-top: 60px;

      & h1 {
        .homeh1;
        @media @laptop {
          margin-bottom: 40px;
        }
      }

      & .article {
        padding-top: 0;
      }

      & .certificatesGallery {

        & .MZGalleryImage {
          height: 250px;
          overflow: inherit;
          background: none;
          margin-bottom: 60px;
          width: 24%;

          @media @desktop {
            width: 25%;
            height: 220px;
            margin: 0 0 60px 0;
          }
          @media @laptop {
            width: 25%;
            height: 180px;
            margin: 0 0 60px 0;
          }
          @media @ipad {
            margin: 0 0 85px 0;
            width: 32%;
          }
          @media @ipad-l {
            width: 24%;
          }
          @media @pad-p {
            width: 49%;
          }
          @media @mobile {
            width: 49%;
            margin: 0 0 85px 0;
          }

          & .GalleryImageTitle {
            text-align: center;
            background: none;
            .translate(0,100%,0);
            .bold(14px);
            color: black;

            @media @desktop {
              .bold(12px);
            }
            @media @laptop {
              .bold(10px,14px);
              padding: 10px 45px;
            }
            @media @mobile {
              .bold(12px,16px);
            }
          }

          & .inner {
            background-position: center center;
            background-size: contain;
            min-height: inherit;
          }

          &:after {
            @media @laptop {
              background-size: 80px auto;
            }
            @media @ipad {
              opacity: 1!important;
            }
          }

          &:hover {

            & .inner {
              .scale(1);
            }

            &:after {
              @media @laptop {
                background-size: 80px auto;
              }
            }

            & .GalleryImageTitle {
              .translate(0,140%,0);
              @media @laptop {
                .translate(0,130%,0);
              }
              @media @laptop {
                .translate(0,100%,0);
              }
            }
          }
        }
      }
    }

    & .moduletable.products {
      background: @blue;
      position: relative;

      & .nav.menu.mod-list {
        position: absolute;
        top: 20px;
        right: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        z-index: 2;
        & li a {
          background: black;
          text-decoration: none;
          padding: 8px 15px;
          color: white;
          .normal(14px,14px,1px);
          .transition;
          opacity: 0.4;
          &:hover {
            opacity: 1;
          }
        }
      }

      & .home-products-list {
        max-width: 1024px;
        margin: 0 auto;
        position: relative;
        text-align: center;

        & a {
          text-decoration: none;
        }

        & h1 {
          .homeh1;
        }

        & p {
          .normal(16px,26px);
          color: white;
          margin: 0;

          @media @desktop {
            .normal(14px,20px,0.6px);
          }
          @media @laptop {
            .normal(13px,18px,0.6px);
            padding: 0 60px 20px;
          }
          @media @ipad {
            .normal(14px,20px,0.6px);
          }
        }
      }

      & .product-category {
        .product-category;
      }
    }
  }

  & a.eshop {
    display: block;
    background: @blue;
    color: white;
    text-align: center;
    padding: 20px;
    .transition;
    text-decoration: none;
    .normal(25px,25px,1px);

    &:hover {
      background: darken(@blue, 10%);
    }
  }

  & .fp-videos {
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    color: white;
    @media @ipad-p {
      display: block;
    }
    @media @pad {
      display: block;
    }
    @media @mobile {
      display: block;
    }

    & .vtitle {
      width: 100%;
      text-align: right;
      padding-right: 40px;
      .light(41px, 45px, 4px);
      @media @laptop {
        .light(31px, 31px, 3px);
        text-align: center;
        padding: 30px 0;
      }
      @media @ipad-l {
        .light(31px, 31px, 3px);
        padding: 0 40px 0 0;
      }
    }

    & .vcontent {
      flex: 0 0 50%;
      @media @ipad-l {
        flex: 0 0 70%;
      }

      & br {
        display: none;
      }

      & h3 {
        display: none;
      }

      & .vjs-big-play-button + div {
        display: none;
      }
    }
  }

  & .footer-info {
    height: 350px;
    padding-top: 20px;
    position: relative;
    @media @desktop {
      height: 330px;
    }
    @media @laptop {
      height: 300px;
    }
    @media @mobile {
      height: 340px;
    }

    & .design {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 50px;
      height: 50px;
      .transition;
      background: none;
      @media @desktop {
        width: 45px;
        height: 45px;
      }
      @media @desktop {
        width: 40px;
        height: 40px;
        bottom: -24px;
      }

      &:hover {
        background: white;
      }

      & img {
        width: 100%;
        height: auto;
      }
    }

    & .inner {
      width: 100%;
      max-width: 1024px;
      margin: 0 auto;
      position: relative;
      height: 100%;
      text-align: center;

      & a.espa {
        & img {
          margin-top: 10px;
        }
      }

      & .footer-logo {
        margin: 30px auto 0;
        text-align: center;
        display: block;
        text-decoration: none;

        & div {
          .bold(19px,23px,2px);
          color:white;
          text-shadow: 0 0 3px #000000, 0 0 5px #000000, 0 0 7px #000000;
          @media @laptop {
            .bold(16px,20px,2px);
          }
        }

        & img {
          width: 100px;
          height: auto;
          .shadow;
          margin-bottom: 10px;
          @media @desktop {
            width: 85px;
            margin-bottom: 16px;
          }
          @media @laptop {
            width: 60px;
            margin-bottom: 16px;
          }
        }
      }

      & h2 {
        text-align: center;
        color: @blue;
        margin-top: 0;
        .noselect;
        .normal(22px,22px,4px);
        display: none;
        @media @desktop {
          .normal(18px,20px,3px);
          margin-top: 5px;
        }
      }

      & .social {
        display: flex;
        justify-content: center;
        display: none;
        @media @desktop {
          .origin(50%,50%);
          .scale(0.9);
        }

        @socialsize: 35px;

        & a {
          display: block;
          height: @socialsize;
          flex:0 0 @socialsize;
          background-image: url(../images/pk-social-media.png);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: @socialsize auto;
          margin: 0 5px;

          &.facebook {
            background-position: center top;
            &:hover {
              background-position: center @socialsize * -1px;
            }
          }

          &.twitter {
            background-position: center @socialsize * -2px;
            &:hover {
              background-position: center @socialsize * -3px;
            }
          }

          &.linkedin {
            background-position: center @socialsize * -4px;
            &:hover {
              background-position: center @socialsize * -5px;
            }
          }

          &.instagram {
            background-position: center @socialsize * -6px;
            &:hover {
              background-position: center @socialsize * -7px;
            }
          }

          &.youtube {
            background-position: center @socialsize * -8px;
            &:hover {
              background-position: center @socialsize * -9px;
            }
          }

        }
      }

      & .copyright {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        .normal(15px,15px,1px);
        color:white;
        text-align: center;
        text-shadow: 0 0 3px #000000, 0 0 5px #000000, 0 0 7px #000000;
        padding: 20px;
        .noselect;
        @media @desktop {
          .normal(13px,13px,1px);
        }
        @media @laptop {
          .normal(11px,13px,1px);
        }
        @media @pad {
          bottom: 25px;
        }
        @media @mobile {
          bottom: 25px;
        }
      }

    }

    & div.iso-logo {
      position: absolute;
      top: 20px;
      left: 20px;

      & img {
        .shadow;
        width: 175px;
        .radius(10px);
        @media @desktop {
          width: 150px;
        }
        @media @laptop {
          width: 120px;
        }
        @media @pad {
          width: 100px;
        }
      }
    }
  }

  & .footer {
    background-image: url(../images/karavas-footer.jpg);
    .cover;
    background-position: center top;
    position: fixed;
    width: 100%;
    height: 380px;
    left: 0;
    bottom: 0;
    z-index: -1;
    @media @desktop {
      height: 320px;
    }
    @media @laptop {
      height: 270px;
    }
  }
}

// PRODUCT CATEGORY
.product-category() {
  display: flex;
  align-items: stretch;
  .noselect;
  @media @pad-p {
    flex-wrap: wrap;
  }
  @media @mobile {
    flex-wrap: wrap;
  }

  &:hover {
    & .image {
      & a {
        opacity: 1;
      }
    }
  }

  & h2 {
    margin: 0;
    .light(35px,37px,1px);
    color: @new;
    max-width: 70%;
    display: inline-block;
    margin-bottom: 20px;

    @media @desktop {
      .light(30px,30px,1px);
    }
    @media @laptop {
      .light(25px,25px,1px);
    }
    @media @ipad {
      .light(30px,30px,1px);
    }
    @media @pad {
      .light(30px,30px,1px);
      margin-top: 18px;
    }
    @media @mobile {
      .light(30px,30px,1px);
      margin-top: 18px;
    }
  }

  & p {
    .p;
  }

  & ul {
    .ul;
  }

  &:nth-child(odd) {
    & .image {
      order: 2;
      @media @pad-p {
        order: 1;
      }
      @media @mobile {
        order: 1;
      }
    }
    & .details {
      order: 1;
      // background: black;
      // color: white;
      text-align: right;
      padding: 30px 30px 30px 50px;
      @media @laptop {
        padding: 20px 20px 20px 40px;
      }
      @media @pad-p {
        order: 2;
        padding: 20px;
      }
      @media @mobile {
        order: 2;
        padding: 20px;
      }

      & p {
        // color: white;
      }
    }
  }

  & .image {
    flex: 0 0 50%;
    position: relative;
    .cover;

    @media @pad-p {
      height: 150px;
      flex: 0 0 100%;
    }
    @media @mobile {
      height: 150px;
      flex: 0 0 100%;
    }

    & a {
      position: absolute;
      top: 20px;
      left: 20px;
      width: calc(~"100% - 40px");
      height: calc(~"100% - 40px");
      border: 1px dotted white;
      .transition(all 0.5s ease);
      opacity: 0;

      &:before, &:after {
        content: '';
        position: absolute;
        width: 30px;
        height: 2px;
        background: white;
        top: 50%;
        left: 50%;
        margin: -1px 0 0 -15px;
        .origin(50%,50%);
      }

      &:after {
        .rotate(90deg);
      }
    }
  }

  & .details {
    flex: 0 0 50%;
    background: white;
    padding: 30px 50px 30px 30px;

    @media @laptop {
      padding: 20px 40px 20px 20px;
    }
    @media @pad-p {
      flex: 0 0 100%;
      padding: 20px;
      text-align: center!important;
    }
    @media @mobile {
      flex: 0 0 100%;
      padding: 20px;
      text-align: center!important;
    }

    & a {
      background: darken(@new, 10%);
      .light(17px,17px,1px);
      padding: 10px 20px 10px 35px;
      color: white;
      text-decoration: none;
      margin-top: 20px;
      display: inline-block;
      margin-bottom: 40px;
      position: relative;
      .transition(all 0.4s ease);

      @media @desktop {
        .normal(12px,14px,1px);
        padding: 10px 20px 10px 35px;
      }
      @media @laptop {
        .normal(10px,10px,1px);
        padding: 8px 15px 8px 30px;
      }

      &:hover {
        background: darken(@new, 20%);
      }

      &:before, &:after {
        content: '';
        background: white;
        width: 15px;
        height: 1px;
        position: absolute;
        top: 50%;
        left: 10px;
        .origin(50%,50%);
        @media @laptop {
          width: 10px;
          height: 2px;
          margin-top: -1px;
        }
      }
      &:after {
        .rotate(90deg);
      }
    }
  }
}

// MZPOP and GALLERIES
.MZPop {
  position: relative;
  cursor: pointer;
  overflow: hidden;

  &:before {
    content: '+';
    position: absolute;
    text-align: center;
    .circle(40px);
    border: 2px solid white;
    color: white;
    .normal(30px,37px);
    z-index: 3;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0;
    .transition;
  }

  & img {
    .transition;
    .origin(50%,50%);
  }

  &:hover {
    &:before {
      opacity: 1;
    }
    & img {
      .scale(1.1);
    }
  }
}

.MZPopUpBlock {
  position: fixed;
  .alpha(50,0,0,0);
  z-index: 100000000000000000000000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  & .MZPopUp {
    background: white;
    .shadow;
    position: absolute;
    .cover;

    & .title {
      position: absolute;
      z-index: 3;
      .alpha(70,0,0,0);
      color: white;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 10px;
      .serif400(16px);
    }

    & .close {
      position: absolute;
      .circle(30px);
      background: white;
      .shadow;
      top: -15px;
      right: -15px;
      z-index: 2;
      cursor: pointer;

      &:before, &:after {
        content: '';
        position: absolute;
        width: 52%;
        height: 2px;
        .radius(1px);
        background: black;
        .origin(50%,50%);
        top: 50%;
        left: 50%;
        margin: -1px 0 0 -25%;
        .rotate(45deg);
      }

      &:after {
        .rotate(-45deg);
      }
    }

    & .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .cover;
      .transition(all 0.4s ease);
      opacity: 0;
      z-index: 1;

      &.ready {
        opacity: 1;
      }
    }
  }
}

// MESSAGE
#system-message-container {
  position: absolute;
  width: 100%;

  & .alert {
    display: flex;
    align-items: center;
    padding: 10px;

    &.alert-success {
      background: green;
      color: white;
    }

    & .close {
      display: none;
    }

    & h4 {
      margin: 0 10px 0 0;
      .normal(15px);
    }

    & .alert-message {
      .normal(15px);
    }
  }
}

// LOGIN
.sourcecoast.sclogin-modal-links.sclogin, .footer-info .sclogin.sourcecoast {
  position: absolute;
  bottom: 10px;
  left: 10px;
  @media @pad {
    display: none;
  }
  @media @mobile {
    display: none;
  }

  & input[type="submit"], & > a {
    .light(14px);
    background: #66707e;
    color: white;
    padding: 10px;
    .radius(0);
    border: none;
    .transition;

    &:hover {
      background: black;
    }
  }
}

#login-modal {
  & .modal-body {
    width: 100%;
    & input {
      width: 100%!important;
    }
  }
}

// CONTACT
.mz-contact-module {
  height: 0px;
  position: relative;
  overflow: hidden;
  &.active {
    height: 550px;
    @media @desktop {
      height: 450px;
    }
    @media @desktop {
      height: 350px;
    }
    @media @ipad {
      height: 600px;
    }
    @media @pad-p {
      height: 70vh;
    }
    @media @mobile {
      height: 100vh;
    }
  }
  & #map {
    height: 100%;
  }
  & a.click-to-call {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 150px;
    margin-left: -75px;
    height: 60px;
    .radius(15px);
    background-color: seagreen;
    color: white;
    text-align: center;
    .font(20px);
    line-height: 60px;
    .shadow;
    display: none;
    text-decoration: none;
    @media @pad {
      display: block;
    }
    @media @mobile {
      display: block;
    }
  }
  & div.contact-details {
    background: @blue;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 250px;
    padding: 20px;
    text-align: center;
    @media @desktop {
      top: 30px;
      right: 30px;
      width: 220px;
      padding: 15px;
    }
    @media @laptop {
      top: 15px;
      right: 15px;
      width: 180px;
      padding: 10px;
    }
    @media @ipad {
      top: 30px;
      right: 30px;
      width: 220px;
      padding: 15px;
    }
    & h2 {
      color: white!important;
      text-align: center!important;
      .title(15px);
      @media @desktop {
        margin-bottom: 8px!important;
        font-size: 14px;
      }
      @media @laptop {
        margin-bottom: 12px!important;
        font-size: 11px;
        letter-spacing: 1px;
      }
      @media @ipad {
        margin-bottom: 8px!important;
        font-size: 14px;
      }
    }
    & p {
      .p;
      color: #afd1d2;
      margin-bottom: 0;
      @media @laptop {
        font-size: 11px;
        line-height: 13px;
      }
      @media @ipad {
        .p;
        color: #afd1d2;
      }
      @media @pad {
        line-height: 17px;
      }
      @media @mobile {
        line-height: 17px;
      }
    }
    & br {
      // @media @mobile-p {
      //   display: none;
      // }
    }
    & a {
      .p;
      @media @laptop {
        font-size: 11px;
        line-height: 13px;
      }
      @media @ipad {
        .p;
        color: #afd1d2;
      }
      color: #afd1d2;
      .transition;
      text-decoration: none;
      &:hover {
        color: white;
      }
    }
    & .directions {
      margin-top: 15px;
      // @media @mobile-p {
      //   display: none;
      // }
      & input {
        // .input;
        width: 100%;
        border: none;
        .normal(15px);
        margin-bottom: 10px;
        padding: 7px;
        @media @desktop {
          .normal(13px);
        }
        @media @laptop {
          .normal(10px);
          padding: 5px;
        }
        @media @ipad {
          .normal(13px);
        }
      }
      & .mapbutton {
        border: none;
        // .sans(14px, 14px, 1px);
        background: black;
        color: @lightgrey;
        padding: 8px 15px;
        cursor: pointer;
        .transition;
        @media @desktop {
          .normal(13px);
        }
        @media @laptop {
          .normal(11px);
        }
        @media @ipad {
          .normal(13px);
        }
        &:hover {
          color: white;
          .shadow;
          .translate(-1px, -1px,0);
        }
      }
    }
  }
}

// POP UP GALLERY
.mzPopGallery {

  & > .wrap {

    & .imageContainer {
      @media @pad-p {
        padding: 20px;
      }
      @media @mobile {
        padding: 15px;
      }

      & .ImageTitle {
        @media @desktop {
          .normal(13px,13px,1px);
          padding: 12px 20px;
        }
      }
    }

    & .GalleryCounter {
      @media @desktop {
        .normal(13px,13px,1px);
        padding: 12px 20px;
      }
    }

    & .GalleryArrow {
      &.ArrowLeft.active {
        @media @pad-p {
          left: 7px;
        }
        @media @mobile {
          left: 5px;
        }
      }
      &.ArrowRight.active {
        @media @pad-p {
          right: 7px;
        }
        @media @mobile {
          right: 5px;
        }
      }
    }

    & .GalleryArrow, & .close {
      @media @desktop {
        .scale(0.8);
      }
      @media @mobile {
        .scale(0.6);
      }

      &.ArrowRight {
        @media @desktop {
          -moz-transform: rotate(180deg) scale(0.8, 0.8);
          -webkit-transform: rotate(180deg) scale(0.8, 0.8);
          -o-transform: rotate(180deg) scale(0.8, 0.8);
          -ms-transform: rotate(180deg) scale(0.8, 0.8);
          transform: rotate(180deg) scale(0.8, 0.8);
        }
      }
    }
  }
}