/* IMPORTS */
@import url("var.less");
@import url("mixins.less");



//TROULIS LAW COLORS
@blue: #263645;
@lightblue: #00adef;
@cyan: #82a8ad;
@darkblue: #101f2c;
@darkgrey: #444141;
@lightgrey: #d1d2d4;
@grey: #9fa1a2;
@skin: #a7b7be;
@main: #221f20;

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

body,
html {
  //background: white;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

.columns.center {
  margin:0 auto;
  float: none!important;
}
// RESPONSIVE MAIN STYLES

.clear {
  clear: both;
}
a {
  color: #263645;
  text-decoration: none;
}
& .btn {
  margin-top:40px;
  & a {
    background: @main;
    color: @white;
    text-decoration: none;
    font-size: 19px;
    padding: 15px 70px;
    .transition;
    &:hover {
      background: #000;
      .transition;
    }
  }
}
body {
  font-family: 'Open Sans', sans-serif;
  overflow: hidden auto;
  &.person-page {
    & .head {
      background: @darkblue;
      color: @white;
      & .row {
        background: @blue;
        max-width: 35.625rem;
        & .person-image {
          width: 120px;
          height: 120px;
          background-size: cover;
          border-radius: 50%;
          margin: 4rem auto 1rem auto;
        }
        & .person-name {
          text-align: center;
          font-weight: 600;
          margin-top: 25px;

        }
        & .person-position {
          text-align: center;
          font-size: 13px;
          margin-top: 0.7rem;
          color: @lightblue;
        }
        & .flexthree {
          display: flex;
          & .getdirections {
            border-right: none!important;
          }
          & .call, .mailto, .getdirections {
            width:34%;
            text-align: center;
            margin-top: 2rem;
            border-top: thin solid #354c61;
            border-right: thin solid #354c61;
            & a {
              color: @white;
              display: block;
              padding: 8px;
              font-size:13px;
              .transition;
              & i {
                font-size:20px;
              }
              &:hover {
                background:@darkblue;
                .transition
              }
            }
          }
        }
      }
    }
    & .bottomContent {
      & .row {
        max-width: 35.625rem;
        padding: .935rem;
        box-shadow: 0px 2px 10px #999;
        margin-bottom: 4rem;
        & section {
          padding: 20px 0;
          position: relative;
          border-bottom: thin solid silver;
          margin: 0 35px 0 110px;
          &:last-child {
            border-bottom:none;
          }
          & .phone-image, .mail-image, .address-image {
            position:absolute;
            left: -58px;
            top: 7px;
            font-size: 26px;
            color: #a2a2a2;
          }
          &#company {
            font-size:15px;
          }
          &#phones {
            & .mobile, .telephone, .fax {
              margin-bottom:10px;
              font-size: 14px;
              & a {
                font-size: 14px;
              }
              & span {
                font-size: 13px;
              }
            }
          }
          &#mail {
            & .email {
              margin-bottom:10px;
              font-size: 14px;
              & a {
                font-size: 14px;
              }
              & span {
                font-size: 13px;
              }
            }
          }
          &#addresses {
            & .address {
              font-size:14px;
            }
            & .show-map {
              margin-top:15px;
              & a {
                font-size:14px;
                color: @white;
                background: @blue;
                padding: 4px 10px;
                .transition;
                &:hover {
                  background: @darkblue;
                  .transition;
                }
              }
            }
          }
          &#site {
            & .website {
              margin-bottom:10px;
              font-size: 14px;
              & a {
                font-size: 14px;
              }
              & span {
                font-size: 13px;
              }
            }
          }
          &#socialMedia {
            & .socials-title {
              font-size:14px;
              margin-bottom:8px;
            }
            & .socials {
              & a {
                color: @white;
                display: inline-block;
                width: 50px;
                height: 50px;
                text-align: center;
                font-size: 22px;
                line-height: 48px;
                border-radius: 50%;
                margin-right: 8px;
                &.fb-link {
                  background: #3b5998;
                  .transition;
                  &:hover {
                    background: #8b9dc3;
                    .transition;
                  }
                }
                &.tw-link {
                  background: #55acee;
                  .transition;
                  &:hover {
                    background: #66757F;
                    .transition;
                  }
                }
                &.li-link {
                  background: #0077b5;
                  .transition;
                  &:hover {
                    background: #313335;
                    .transition;
                  }
                }
              }
            }
          }
          &#vCard {
            text-align: center;
            & button {
              background: @blue;
              cursor: pointer;
              color: @white;
              padding: 13px;
              font-size: 14px;
              margin-top: 5px;
              .transition;
              &:hover {
                background: @darkblue;
                .transition;
              }
            }
          }
        }
      }
    }
  }
  & .icons {
    display:none;
  }
  &.menu-active {
    overflow: hidden;
    & .logo {
      position:relative;
      z-index: 999;
    }
  }
  &.links-page {
    & .article-content {
      & a {
        text-decoration: none;
        color: #fefefe;
        background: #4c5a67;
        padding: 11px 35px 11px 13px;
        display: block;
        width: 47%;
        float: left;
        margin: 8px;
        font-weight: 500;
        position: relative;
        .transition;
        @media (max-width:980px) {
          width:90%;
          float:none;
          margin: 8px auto;
        }
        &:hover {
          background: @blue;
          .transition;
        }
        &:after {
          content:"\f08e";
          font: normal normal normal 14px/1 FontAwesome;
          position: absolute;
          right: 16px;
          font-size: 18px;
          margin-top: 5px;
        }
      }
    }
  }
  & h1, h2, h3, h4, h5, h6 {font-family: 'Ubuntu', sans-serif;}
  & #topHead {
    background: -moz-linear-gradient(top,  rgba(16,31,44,1) 0%, rgba(16,31,44,1) 75%, rgba(125,185,232,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(16,31,44,1) 0%,rgba(16,31,44,1) 75%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom,  rgba(16,31,44,1) 0%,rgba(16,31,44,1) 75%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101f2c', endColorstr='#007db9e8',GradientType=0 );
    color: @white;
    padding:50px 0;
    position: relative;
    z-index: 999;
    & .logo {
        & img {
            max-height:52px;
        }
    }
    & .main-menu {
      &.active {
        & ul.menu {
          display:inline-block;
        }
        & .closer {
          display: inline-block;
          position: absolute;
          z-index: 999;
          right: 2rem;
          font-size: 29px;
          top: 1rem;
          cursor: pointer;
        }
      }
      & .toggler {
        display:none;
        @media (max-width:1020px) {
          display: inline-block;
          float: right;
          font-size: 27px;
          margin: 0 20px 0 0;
          cursor: pointer;
        }
      }
      .closer {
        display:none;
      }
      & ul.menu {
        list-style:none;
        padding:0;
        margin:0;
        display: inline-block;
        @media (max-width:1020px) {
          display:none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          background: #101f2c;
          padding: 9rem 0 3rem 0;
          text-align: center;
          & li {
            display: block!important;
            & a {
              font-size: 1.3rem!important;
              margin: 1rem 0!important;
              display: block;
            }
            & ul {
              display:none!important;
            }
          }
        }
        &.active {
          display: block;
        }
        & li {
          display: inline-block;
          margin: 0 5px;
          position:relative;
          & a {
            color: @white;
            text-decoration: none;
            font-size:14px;
            padding: 5px;
            &:hover {
              color: @cyan;
            }
          }
          &:hover {
            & ul {
              opacity: 1;
              visibility: visible;
              -webkit-transition: all 0.2s ease 0s;
              -moz-transition: all 0.2s ease 0s;
              -ms-transition: all 0.2s ease 0s;
              -o-transition: all 0.2s ease 0s;
              transition: all 0.2s ease 0s;
            }
          }
          & ul {
            position: absolute;
            z-index: 999999;
            color: #FFF;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.2s ease 0s;
            -moz-transition: all 0.2s ease 0s;
            -ms-transition: all 0.2s ease 0s;
            -o-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
            margin: 0;
            width: 280px;
            left: 0px;
            top:40px;
            padding: 6px 20px;
            background: #435363;
            border: 3px solid white;
            &:before {
              content:"";
              width: 0;
              position:absolute;
              top:-20px;
              height: 0;
              border-left: 15px solid transparent;
              border-right: 15px solid transparent;
              border-bottom: 20px solid @white;
            }
            & li {
              display: block;
              padding: 3px 0;
              margin: 3px 0;
              border-bottom: thin dotted;
              &:last-child {
                border:none;
              }
              & a {
                &:hover {
                  color: @cyan;
                }
              }
            }
          }
        }
      }
      & .mod-languages {
        display: inline-block;
        float: right;
        font-size: 15px;
        line-height: 25px;
        @media (max-width:1020px) {
          position: relative;
          right: 20px;
          top: 9px;
        }
        & ul {
          padding:0;
          & li {
            padding: 0 3px 0 0px;
            margin:0 3px;
            border-right:thin solid @white;
            &:last-child {
              border:none;
              padding:0;
            }
            &.lang-active {
              & a {
                font-weight: bold;
                color: @white;
              }
            }
            & a {
              padding:0;
              color: #ccc;
            }
          }
        }
      }
    }
  }
  & #sliderArea {
    background-color: @darkblue;
    margin-top: -55px;
    position: relative;
    min-height: 500px;
    background-position: center;
    background-size: cover;
    @media (max-width:830px) {
      min-height: 300px;
    }
    @media (max-width: 480px) {
        min-height: auto;
      }
    & .custom {
      height: 500px;
      width: 100%;
      background-size: cover;
      @media (max-width: 830px) {
        height: 300px;
      }
      
      &.bg-right {
        background-position: right;
      }
      &.bg-center {
        background-position: center;
      }
      &.bg-left25 {
        background-position: 25% 0;
      }
    }
    & .socials {
      position: absolute;
      bottom: 0;
      right: 0px;
      font-size: 25px;
      max-height:85px;
      & p {
        background: #263645a6;
        padding: 6px 54px 6px 12px;
      }
      & a {
        color: @white;
        margin: 0 5px;
      }
    }
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }
  & #topSection {
    background: @blue;
    color: @white;
    padding: 100px 0 0 0;
    position: relative;
    &::before {
      content:"";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      height:240px;
      background: rgb(6,9,10);
      background: -moz-linear-gradient(top,  rgba(6,9,10,1) 0%, rgba(38,54,69,1) 41%);
      background: -webkit-linear-gradient(top,  rgba(6,9,10,1) 0%,rgba(38,54,69,1) 41%);
      background: linear-gradient(to bottom,  rgba(6,9,10,1) 0%,rgba(38,54,69,1) 41%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06090a', endColorstr='#263645',GradientType=0 );
      z-index:0;
    }
    & .homepage-about {
      position: relative;
      z-index:1;
      text-align: center;
      margin-bottom:6rem;
      & .hp-icon {
        border: 4px solid @white;
        display: inline-block;
        padding: 40px;
        //border-radius: 50%;
        .radius(50%);
        margin-bottom: 1rem;
      }
      & h3 {
        font-weight: 100;
        font-size: 22px;
        margin-bottom: 0;
        & a {
          color: @cyan;
        }
      }
    }
  }
  & #outterTop {
    background: @skin;
    padding:3rem 0 5rem 0;
    & h3 {
      font-weight:100;
      color: @darkblue;
      text-align: center;
      font-size: 1.35rem;
      margin: 2rem 0 4rem 0;
    }
    & .moduletable {
      & .services-section {
        & .aservice {
          position: relative;
          margin: .9375rem 0;
          @media (max-width:640px) {
            margin:0px;
            padding:2rem;
          }
          & img {
            width:100%;
          }
          & .service-black-box {
            position: absolute;
            background: rgba(0,0,0,0.5);
            color: @white;
            top:50%;
            left:50%;
            transform: translateX(-50%) translateY(-50%);
            padding: 55px 40px;
            width: 85%;
            font-size:14px;
            -webkit-transition: padding 0.25s linear;
            transition:  padding 0.25s linear;
            & a {
              color: @white;
              text-decoration: none;
            }
            & .service-title {
              font-weight: 600;
            }
            @media (max-width:640px) {
              padding: 55px 40px;
              width: 85%;
              font-size:14px;
            }
          }
        }
        & .category-more {
          display: block;
          clear: both;
          text-align: center;
          padding-top: 3rem;
          & a {
            background: @blue;
            color: @white;
            padding: 6px 12px;
            .transition;
            &:hover {
              .transition;
              background: @darkblue;
            }
          }
        }
      }
    }
  }
  & #innerTop {
    background:@skin;
    padding: 100px 0;
    & .troulis-logo {

    }
    & .troulis-moto {
      color: @blue;
      text-align: center;
      & span {
        font-style:italic;
        font-size: 0.95rem;
        margin-top: 1rem;
        display: block;
      }
    }
  }
  & #innerBottom {
    & .custom {
      padding: 25rem 0;
      background-size: cover;
      background-attachment: fixed;
      background-position: right;
    }
  }
  & #mainArea {
    padding:3rem 0;
    & .service-page {
        & .service-description {
            text-align:justify;
        }
    }
    & a.file-pdf {
      background: @blue;
      color: @white;
      padding: 8px 15px 8px 32px;
      display: inline-block;
      position: relative;
      &:before {
        content:"\f1c1";
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        left: 10px;
        top: 11px;
      }
    }
    & .news-page-article {
      & .news-date {
        border-top: thin solid @blue;
        border-bottom: thin solid @blue;
        padding:4px;
        margin-top: -3rem;
        margin-bottom:2rem;
      }
      & .content {

      }
    }
    & .main-article {
        & p {
            text-align: justify;
        }
      & .panel-group {
        & .panel {
          &:hover {
            & .panel-heading {
              & a {
                font-weight: 600;
                color: @blue;
              }
            }
          }
          &.active {
            & .panel-heading {
              & a {
                font-weight: 600;
                color: @blue;
              }
            }
          }
          & .panel-heading {
            background: @blue;
            & a {
              font-weight: 600;
              color: @white;
            }
          }
        }
      }
    }
    & .mod-list {
      list-style: none;
      margin: 2rem 0;
      padding: 2rem 0;
      text-align: center;
      & li {
        display: inline-block;
        margin: 5px;
        & a {
          text-decoration: none;
          color: #fff;
          background: #8b7d74;
          padding: 6px 20px;
          &:hover {
            background: @blue;
          }
        }
      }
    }
    & h1 {
      font-weight: 100;
      color: #101f2c;
      text-align: center;
      font-size: 1.35rem;
      margin: 2rem 0 4rem 0;
    }
    & .cv-page {
      & h1 {
        margin-bottom:0px;
      }
      & .profession {
        text-align: center;
      }
      & .people-image {
        text-align: center;
        margin: 1rem 0;
      }
      & .cv-description {
          & p {
              text-align:justify;
          }
      }
      & .panel-group {
        margin:2rem 0;
        & .panel {
          & .panel-heading {
            & a {
              color: @blue;
              text-decoration: none;
              font-weight: 600;
            }
          }
        }
      }
      & .vpage-link {
        text-align: center;
        & a {
          background: @blue;
          color: @white;
          padding: 6px 12px;
          .transition;
          &:hover {
            background: @darkblue;
            .transition;
          }
        }
      }
    }
    & .troulis-clients {
      & .clients-page {
        & .client {
          margin: .9375rem 0;
          & img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            .transition;
          }
          &:hover {
            & img {
              -webkit-filter: grayscale(0%);
              filter: grayscale(0%);
              .transition;
            }
          }
        }
      }
    }
    & .news-page-article {
        & p {
            text-align:justify;
        }
    }
    & .newsfiles {
      & .news-page {
        & .file {
          position:relative;
          & .newsfile {
            margin: 1rem 0;
            color: #fff;
            padding: 5px 10px;
            line-height: 32px;
            font-size: 15px;
            font-weight: 600;
            background: @blue;
            & .file-icons {
              float: right;
              & a {
                color: #fff;
                font-size: 21px;
                margin: 0 7px;
              }
              & .edit-article-button {
                position: relative;
                display: inline-block;
                margin: -11px 0 -8px 0;
              }
            }
          }
        }
      }
    }
    & .people-page {
      & .acv {
        margin-top: .9375rem;
        margin-bottom: .9375rem;
        @media (min-width:640px) and (max-width: 968px) {
            display: block;
            float: none;
            width:570px;
            margin: 1rem auto;
        }
        &:last-child {
          float: left;
        }
        &:after {
          content:"";
          display: block;
          clear:both;
        }
        & .cv-image {
          float: left;
          width: 200px;
          margin-right: 20px;
          @media (max-width:460px) {
              float:none;
              margin:1rem auto;
          }
          & img {
            -webkit-filter: grayscale(90%);
            filter: grayscale(90%);
            .transition;
          }
          &:hover {
            & img {
              -webkit-filter: grayscale(0%);
              filter: grayscale(0%);
              .transition;
            }
          }
        }
        & .cv-info {
            text-align:justify;
          & h3 {
            color: @darkblue;
            font-size:18px;
            margin: 35px 0 -2px 0;
             @media (max-width:460px) {
                 text-align:center;
             }
          }
          & .profession {
            font-size:15px;
            color: #8b7d74;
            @media (max-width:460px) {
                 text-align:center;
             }
          }
          & .description {
            font-size: 14px;
            padding: 0 50px;
          }
          & .readmorecv {
            text-align: right;
            margin-right: 50px;
            font-size: 14px;
            & a {
              color: @blue;
              text-decoration: none;
              font-weight:700;
              &:hover {
                color: @darkblue;
              }
            }
          }
        }
      }
    }
    & .blog-homepage {
      & .category-more {
        display:block;
        text-align:center;
        & a {
          background: @skin;
          padding: 6px 12px;
          font-weight: 600;
          .transition;
          &:hover {
            background: @blue;
            color: @white;
            .transition;
          }
        }
      }
    }
    & .blog {
      & .category-more {
        display:none;
      }
    }
    & .blog-homepage, .blog {
      & .newsarticle {
        margin-bottom:2rem;
        min-height: 464px;
        & .newsarticle-image {
          margin-bottom:2rem;
        }
        & .news-date {
          font-weight: 600;
          border-top: 2px solid @black;
          border-bottom: 2px solid @black;
          padding: 5px 0;
          font-size: 16px;
        }
        & h3 {
          font-weight: 300;
          font-size: 1.2rem;
          margin-bottom: 15px;
        }
        & .intro {
          font-size:14px;
          color: @darkgrey;
          line-height: 23px;
        }
      }
    }
    
    & .services-page {
      & .aservice {
        position: relative;
        margin: .9375rem 0;
        & img {
          width:100%;
        }
        & .service-black-box {
          position: absolute;
          background: rgba(0,0,0,0.5);
          color: @white;
          top:50%;
          left:50%;
          transform: translateX(-50%) translateY(-50%);
          padding: 55px 40px;
          width: 85%;
          font-size:14px;
          -webkit-transition: padding 0.25s linear;
          transition:  padding 0.25s linear;
          @media (max-width:640px) {
            padding: 55px 40px;
            width: 85%;
            font-size:14px;
          }
          & a {
            color: @white;
            text-decoration: none;
          }
          & .service-title {
            font-weight: 600;
          }
        }
      }
    }
  }
  & footer {
    & .copyrights {
      background: @darkblue;
      color: @white;
      font-size:13px;
      padding: 10px;
      margin-top: -40px;
      &:after {
        content: "";
        display: block;
        clear: both;
      }
      & .copy {

      }
      & .creators {
        text-align: right;
        & a {
          color: @cyan;
          &:hover {
            color: @lightblue;
          }
        }
      }
    }
    & .footer-bar {
      height: 85px;
      background: #a7b7be;
    }
    & .footer-about {
      & p {
          text-align:justify;
      }
      & a {
        & i {
          font-size: 15px;
          margin: 8px 4px;
        }
      }
    }
    & .latest-news {
      & a.edit-article-button {
        display: none;
      }
    }
    & .footer-maps {
      & a {
        background: @darkblue;
        color: @white!important;
        padding: 6px 11px;
        margin-left: 15px;
        font-size: 13px;
        border-radius: 3px;
        &.mobile {
          display:none;
          @media (max-width:680px) {
            display: inline-block;
          }
        }
        &.desktop {
          display: inline-block;
          @media (max-width:680px) {
            display: none;
          }
        }
      }
    }
    & .footer-container {
      background: @blue;
      color: @white;
      min-height:300px;
      font-size:13px;
      padding: 60px 0;
      & .custom {
        width:100%!important;
      }
      & .footer-articles-list {
        & .newsfile {
          margin-bottom:5px;
          padding-bottom:5px;
          border-bottom: thin dotted @white;
          & i {
            margin-right:3px;
          }
          & .file-icons {
            margin: 0 10px 0 20px;
            float: right;
          }
        }
      }
      & h3.mod-title {
        font-size:18px;
        font-weight:100;
      }
      & a {
        color: @cyan;
      }
      & .footer-articles-list {
        & .newsarticle {
          display:block!important;
          width:100%!important;
          padding: 0 0 9px 0;
          margin-bottom: 2px;
          border-bottom: 2px solid #fff;
          &:last-child {
            border:none;
          }
          & .newsarticle-image, .news-date {
            display: none;
          }
          & h3 {
            font-size:14px;
            margin: 6px 0;
          }
          & .intro {
            font-size:13px;
          }
        }
      }
    }
    & .footer-menu {
      background: @darkblue;
      color: @white;
      & ul {
        list-style:none;
        padding:0;
        text-align: center;
        & li {
          display: inline-block;
          margin:13px;
          font-size:14px;
          & a {
            color: @white;
            text-decoration: none;
          }
        }
      }
    }
  }
}
// RESPONSIVE INDICATOR UNCOMMENT FOR PRODUCTION
#mzResponsive {
  //z-index: -1;
}

// LOGIN FORM
div.login {
  position: absolute;
  margin-top: -350px;
  right: -300px;
  background: @main;
  width: 200px;
  text-align: center;
  .transition(all 0.6s ease);
  display:none;
  &.active {
    right: 23px;
    display:inline-block;
  }

  & > div.moduletable {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;

    & .close-button {
      position: absolute;
      top: -9px;
      left: -9px;
      .circle(20px);
      background: black;
      cursor: pointer;

      &:after,
      &:before {
        content: '';
        background: white;
        width: 14px;
        height: 1px;
        position: absolute;
        left: 3px;
        top: 10px;
        .origin(50%, 50%);
        .rotate(45deg);
      }

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

    & h3 {
      margin: 0 0 20px;
      .os700(14px,14px,4px);
      color: white;
    }

    & input {
      text-align: center;
      .noshadow;
      border: none;
      border-bottom: thin solid white;
      background: transparent!important;
      color: white;
      .cf700(12px);
      width: 100%;
      display: block;
      margin-bottom: 10px;
      padding: 5px;
    }

    & button {
      background: @skin;
      border: none;
      .transition;
      .os400(13px,13px,1px);
      margin: 5px 0 0;
      padding: 10px;
      cursor: pointer;

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

// LOGIN BUTTON
div.user-button-area {
  position: absolute;
  right: 20px;
  margin-top: -70px;

  & div.login-button,
  & div.logout-button {
    .circle(20px);
    border: thin solid grey;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: grey;
    .transition;
    opacity: 0.5;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }
    .no-mobile;
  }

  & div.login-button {
    background-image: url("../images/lock.png");
  }

  & div.logout-button {
    background-image: url("../images/unlock.png");
  }
}

// EDIT ARTICLE BUTTON
.edit-article-button, .edit-article-button-page {
  display: block;
  margin: 20px auto;
  width: 30px;
  height: 30px;
  .radius(15px);
  background-color: black;
  background-image: url("../images/edit-article.png");
  background-position: center;
  background-repeat: no-repeat;
  padding: 0!important !important;
  .transition;
  opacity: 0.5;
  @media @pad {
    display: none;
  }
  @media @mobile {
    display: none;
  }

  &:hover {
    opacity: 1;
  }
}

// EDITOR CSS
// EDITOR ELEMENTS
div.admin-editor-blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .alpha(10,0,0,0);
  z-index: 9999998;

  &:after {
    content: 'LOADING';
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 130px;
    height: 26px;
    .font(10px);
    background: black;
    color: white;
    margin-top: -20px;
    margin-left: -65px;
    line-height: 26px;
    letter-spacing: 6px;
    .radius(13px);
    .transition(all 1s ease);
    opacity: 1;
  }

  &.active {
    &:after {
      opacity: 0;
    }
  }

  &.saving {
    .alpha(50,255,255,255);

    &:after {
      content: 'SAVING';
    }
  }
}
div.admin-editor-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  z-index: 999999999999;
  background: black;

  & iframe {
    width: 100%;
    height: 100%;
  }
}

// POP UP IMAGE
& .mzPopUpImageFull {

  & .full-target {

    .close {
      background: @blue!important;
    }

  }

}
@-moz-keyframes move-bg {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(-1400px); } }

@-webkit-keyframes move-bg {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(-1400px); } }

@-o-keyframes move-bg {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(-1400px); } }

@-ms-keyframes move-bg {
  #react-app-container from, .react-fragment-container from, #react-search-bar from {
    -webkit-transform: translateX(0); }
  #react-app-container to, .react-fragment-container to, #react-search-bar to {
    -webkit-transform: translateX(-1400px); } }

@keyframes move-bg {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(-1400px); } }