@import "rapidcss.less";
@import "reset.less";

// Hi !
// If you're not new to LESS or especially LESS Mixins then this file is for You!
// There are many mixins in this file that are working as shorthands so dont be afraid if you find something like: .p; .m; .bgc(@secondary-color) - it's just padding, margin and background color.
// If you'll check contents of a mixin you'll notice that they are almost self descriptive - check them out and dont write excessive css rules - save your time.
// If you're not feeling strong in LESS then please use mastersheet.css - it's an uncompressed version generated from this file, it's easier to read by folks who are not coding pro's.
// Remember to checkout the documentation and dont hesitate to ask if needed!

// Variables - few ofthese are changed for other @media's - search for responsive views
@dlhm: 7; // desktop line height modifier - .font mixin related
@mlhm: 5; // mobile line height modifier

@dpm: 1.9; // desktop padding modifier - .head mixin related
@mpm: 1.7; // mobile padding modifier
@hlhm: 3; // head line-height modifier, it's added to the line-height value - .head mixin related

@grid-spacing: 20px; // using @gridGutterWidth to keep few things equally separated on x, y axis according to Bootstrap grid
@media-path: "../images"; // path where you store your images. root is libs/retina so we need to go back 2 levels
@section-spacing: 70; // no units here
@element-spacing: 60; // no units also
@boxed-spacing: 70; // gap between content and color in boxed version

@base-font-size: 18px; // for desktop, redefined for smaller @media's

// Primary and secondary colors, redefine here to affect all elements and then compile to mastersheet.min.css
@primary-color: @pomegranate;
@secondary-color: @alizarin;

// Colors
@turquoise: #1abc9c;
@green-sea: #16a085;
@emerland: #2ecc71;
@nephritis: #27ae60;
@peter-river: #3498db;
@belize-hole: #2980b9;
@belize-hole-dark: #2C3E50;
@amethyst: #9b59b6;
@wisteria: #8e44ad;
@wet-asphalt: #34495e;
@midnight-blue: #2c3e50;
@sun-flower: #f1c40f;
@orange: #f39c12;
@carrot: #e67e22;
@pumpkin: #d35400;
@alizarin: #e74c3c;
@pomegranate: #c0392b;
@clouds: #ecf0f1;
@silver: #bdc3c7;
@concrete: #95a5a6;
@asbestos: #7f8c8d;
@black: #000000;
@white: #ffffff;
@grey: #92999d;
@grey-light: #ecf0f1;
@grey-dark: #606060;
@nice-grey: #dae1e5;

// background colors for boxed verions
@green-sea-dark: #0e5144;
@nephritis-dark: #13552f;
@belize-hole-dark: #2c3e50;
@wisteria-dark: #4b265a;
@midnight-blue-dark: #151d26;
@orange-dark: #c0392b;
@pumpkin-dark: #712d00;
@pomegranate-dark: #441713;

// Populated colors - accessible via color class name
// Due to the mixin constrution these colors are accessible only in conjuction with "boxed" class added to body tag

.populate-colors() {
  &.turquoise { .bgc(@secondary-color); }
  &.green-sea { .bgc(@primary-color); }
  &.emerland { .bgc(@emerland); }
  &.nephritis { .bgc(@nephritis); }
  &.peter-river { .bgc(@peter-river); }
  &.belize-hole { .bgc(@belize-hole); }
  &.belize-hole-dark { .bgc(@belize-hole-dark);}
  &.amethyst { .bgc(@amethyst); }
  &.wisteria { .bgc(@wisteria); }
  &.wet-asphalt { .bgc(@wet-asphalt); }
  &.midnight-blue { .bgc(@midnight-blue); }
  &.sun-flower { .bgc(@sun-flower); }
  &.orange { .bgc(@orange); }
  &.carrot { .bgc(@carrot); }
  &.pumpkin { .bgc(@pumpkin); }
  &.alizarin { .bgc(@alizarin); }
  &.pomegranate { .bgc(@pomegranate); }
  &.clouds { .bgc(@clouds); }
  &.silver { .bgc(@silver); }
  &.concrete { .bgc(@concrete); }
  &.asbestos { .bgc(@asbestos); }
  &.black { .bgc(@black); }
  &.white { .bgc(@white); }
  &.grey { .bgc(@grey); }
  &.grey-light { .bgc(@grey-light); }
  &.grey-dark { .bgc(@grey-dark); }

  &.green-sea-dark { .bgc(@green-sea-dark); }
  &.nephritis-dark { .bgc(@nephritis-dark); }
  &.belize-hole-dark { .bgc(@belize-hole-dark); }
  &.wisteria-dark { .bgc(@wisteria-dark); }
  &.midnight-blue-dark { .bgc(@midnight-blue-dark); }
  &.orange-dark { .bgc(@orange-dark); }
  &.pumpkin-dark { .bgc(@pumpkin-dark); }
  &.pomegranate-dark { .bgc(@pomegranate-dark); }
}

// Fonts
@first-font: "enriquetaregular", sans-serif;
@first-font-bold: "enriquetabold", sans-serif;
@second-font: "pontano_sansregular", sans-serif;
@third-font: "libre_baskervilleregular", sans-serif;
@third-font-bold: "libre_baskervillebold", sans-serif;
@third-font-italic: "libre_baskervilleitalic", sans-serif;

// Internal mixins - use or not but dont remove blindly
// These work as shorthands - no need to write excessive css while less can do it for you.
// Please remember that Im also using bootstrap mixins, so if you want to remove bootstrap be sure that everything is in place and the mixins are copied here

// font family
.family(@family) when (@family = 1) {
  font-family: @first-font;
}

.family(@family) when (@family = "1b") {
  font-family: @first-font-bold;
}

.family(@family) when (@family = 2) {
  font-family: @second-font;
}

.family(@family) when (@family = 3) {
  font-family: @third-font;
}

.family(@family) when (@family = "3b") {
  font-family: @third-font-bold;
}

.family(@family) when (@family = "3i") {
  font-family: @third-font-italic;
}

// font size for elements that are not headings
// these mixins vary from @media that is declared
// This might look like some crazy sorcery but in less 1.3.3 there is a bug related to global variables which are changing through different media types
// Untill LESS 1.4 the mixin needs to be varied, so you need to redeclare @media value to get this to work as it should

// This one is for desktops
.font(@size, @line-height: true, @media: desktop) when (@line-height = true) and (@media = desktop) {
  .fs(@size);
  .lh(unit((@size + @dlhm), px));
}

// This one is for mobiles
.font(@size, @line-height: true, @media: mobile) when (@line-height = true) and (@media = mobile) {
  .fs(@size);
  .lh(unit((@size + @mlhm), px));
}

// This one is for all media's when you pass something extra as second argument
// im using it like this: .font(18px, clean); - passing "clean"
// ofcourse you can pass whatever you want: .font(18px, potato); will also work because it's not "true"
// media does not matter in this case because we're not changing the line-height
.font(@size, @line-height) when not (@line-height = true) {
  .fs(@size);
  .lh(@size);
}


// font sizes for headings
// it's similar construction like the .font - we're defining the scope via @media
.head(@size, @padding: true) when (@padding = true) and (@media = desktop) {
  .fs(@size);
  .lh(unit((@size+@hlhm),px));
  .pb(ceil(unit((@dpm * @size), px))); // using desktop padding modifier @dpm
}

.head(@size, @padding: true) when (@padding = true) and (@media = mobile) {
  .fs(@size);
  .lh(unit((@size+@hlhm),px));
  .pb(ceil(unit((@mpm * @size), px))); // using mobile padding modifier @mpm
}

.head(@size, @padding) when not (@padding = true) {
  .fs(@size);
  .lh(unit((@size+@hlhm),px));
  .pb(0);
}

// retina mixin
.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }  
}

// ###############################################################################################################
// Base reset
// DEFINE THE SCOPE FOR FONT AND HEAD MIXINS!!! THIS IS UBER IMPORTANT!!!
@media: desktop;

body {
  .p;
  .m;
  .font(@base-font-size);
  .family(1);
  .c(@grey);
  &.delay {
    section, footer {
      .opacity(0);
    }
    .ignore {
      .opacity(100);
    }
  }
  &.boxed {
    .populate-colors; // remove this is you dont want to print out all background colors to css
    .wrapper {
      .bg(@white);
      // max width = grid width + 120px spacing on the left and right side
      .mxw(940+unit((@boxed-spacing*2), px));
      .mc;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  .p;
  .m;
  .fw;
  .c(@black);
}

h1 {
  @size: 53px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

h2 {
  @size: 40px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

h3 {
  @size: 30px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

h4 {
  @size: 24px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

h5 {
  @size: 22px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

h6 {
  @size: 18px;
  .head(@size);
  &[data-spacing="none"] {
    .head(@size, clean);
  }
  &[data-spacing="one-third"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/3), px)));
  }
  &[data-spacing="half"] {
    .head(@size, clean);
    .pb(ceil(unit(((@dpm * @size)/2), px)));
  }
}

header {
  & + .row {
    .pb(unit((@section-spacing/3), px));
    &:last-of-type {
      .pb;
    }
  }
}

p {
  .p;
  .m;
  @size: (-2+@base-font-size);
  .fs(unit(@size,px));
  .lh(unit(@size+7,px));

  // Watch out for this one, Im binding two elements that are presented one after another with @size var;
  // Next element will have padding-top calculated from @dpm and parent p @size: originaly: 18px * 1.9 (where 1.9 is @dpm)

  & + p,
  & + ul,
  & + ol {
    .pt(ceil(unit((@dpm * @size), px)));
  }

  & + .button {
    .mt(unit(@element-spacing, px));
  }

  a {
    .txd(underline);
    &:hover {
      .txd;
    }
  }
}

ul {
  .list-clean();
  &.unordered {
    .pb(unit(@element-spacing, px));

    li {
      .pl(16px);
      .mt(10px);
      .pos(relative);

      &:first-child {
        .mt;
      }

      &:before {
        content: '';
        .eqsize(6px);
        .border-radius(6px);
        .bgc(@clouds);
        .pos;
        left: 0;
        top: 8px;
      }
    }
  }
}

ol {
  .list-clean();

    &.ordered {
    li {
      .pl(26px);
      .mt(10px);
      .pos(relative);
      &:first-child {
        .mt;
      }

      span {
        .pos;
        .eqsize(16px);
        .border-radius(20px);
        left: 0;
        top: 3px;
        .bgc(@primary-color);
        .c(@white);
        .txa;
        .fs((-8+@base-font-size));
        .lh(16px);
        .family("3i");
      }
    }
  }
}

a {
  .c(@primary-color);
  .txd;
  .ol;
  .transition(all 0.25s ease-in-out 0s);
  &:hover,
  &:focus {
    .c(@primary-color);
    .txd;
    .ol;
    .transition(all 0.25s ease-in-out 0s);
  }
}

em {
  .family("3i");
  .fst;
}

figure {
  .p;
  .m;
  & + header {
    h3 {
      .pt(unit(@element-spacing, px));
    }
  }
}

blockquote {
  .pyx(30px, 0);
  .mt(20px);
  .brd;

  &.quote-right {
    .fr;
    .pl(30px);
    .ml(30px);
    .brdt(left, 7px solid @clouds);
  }

  &.quote-left {
    .fl;
    .pr(30px);
    .mr(30px);
    .brdt(right, 7px solid @clouds);
  }

  p {
    .family("3i");
    .fs((@base-font-size+12));
    .c(@black);
  }
}

section {
  .pyx(unit(@section-spacing, px), 0);
  
  &.important {
    
    .i("light.jpg");
    .pos(relative);


    #light {
      .w(100%);
      .h(100%);
      .pos;
      top: 0;
      left: 0;


      &.hidden {
        .dn;
        .vis;
      }
    }

    .light-content {
      .row {
        .pos(relative);
        .z(200);
      }
    }

  }
  &.subsection {
    .brdt(bottom);
    .p;
    .pb(unit(@section-spacing, px));

    &:last-of-type {
      .pb;
    }
  }
}

.button {
  .family("1b");
  .d(inline-block);
  .c(@white);
  .txt;
  .font((-3+@base-font-size), clean);
  .p(18px);
  .border-radius(5px);
  .mb(unit(@element-spacing, px));

  &[data-spacing="small"] {
    .mb(unit((@element-spacing/3), px));
  }

  &:hover,
  &:focus {
    .c(@white);
  }
  &.big {
    .font((@base-font-size+2), clean);
    .p(25px);
  }

  // colors
  &.green-sea {
    .bgc(@green-sea);
    &:hover {
      .bgc(@turquoise);
    }
    &:active {
      .bgc(@green-sea);
    }
  }

  &.nephritis {
    .bgc(@nephritis);
    &:hover {
      .bgc(@emerland);
    }
    &:active {
      .bgc(@nephritis);
    }
  }

  &.belize-hole {
    .bgc(@belize-hole);
    &:hover {
      .bgc(@peter-river);
    }
    &:active {
      .bgc(@belize-hole);
    }
  }

  &.wisteria {
    .bgc(@wisteria);
    &:hover {
      .bgc(@amethyst);
    }
    &:active {
      .bgc(@wisteria);
    }
  }

  &.orange {
    .bgc(@orange);
    &:hover {
      .bgc(@sun-flower);
    }
    &:active {
      .bgc(@orange);
    }
  }

  &.pumpkin {
    .bgc(@pumpkin);
    &:hover {
      .bgc(@carrot);
    }
    &:active {
      .bgc(@pumpkin);
    }
  }

  &.pomegranate {
    .bgc(@pomegranate);
    &:hover {
      .bgc(@alizarin);
    }
    &:active {
      .bgc(@pomegranate);
    }
  }

  &.asbestos {
    .bgc(@asbestos);
    &:hover {
      .bgc(@concrete);
    }
    &:active {
      .bgc(@asbestos);
    }
  }

  &.midnight-blue {
    .bgc(@midnight-blue);
    &:hover {
      .bgc(@wet-asphalt);
    }
    &:active {
      .bgc(@midnight-blue);
    }
  }
}

.buttons-group {
  @gutter: 20px;

  .ml(-(@gutter));
  .button {
    .ml(@gutter);
  }
}

.widget-contact {
  ul {
    li {
      span {
        .d(inline-block);
        .va(top);
      }

      > span {
        .pb(20px);

        + span {
          .pl(5px);
        }

        strong {
          .c(@black);
        }
      }

      i {
        .font(@base-font-size, clean);
        .c(@black);
        .mr(15px);
        .lh(24px);

        &.icon-mail {
          .mt(3px);
        }
      }
      a {
        .txd(underline);
        &:hover {
          .txd;
        }
      }
      &:last-child {
        span {
          .pb;
        }
      }
    }
  }
}

.alert {
  @size: 15px;

  .font(@size, clean);
  .bg;
  .brdw(3px);
  .brds(solid);
  .p(18px);
  .pl(45px);
  .pr(30px);
  .pos(relative);

  i {
    .pos;
    left: @size;
  }

  .close {
    .fs((-8+@base-font-size));
    .opacity(100);
    i {
      .c(@black);
      left: auto;
      .pos(relative);
      right: 10px;
    }
  }

  &.alert-danger {
    @color: @pomegranate;

    .c(@color);
    .brdc(@color);

    ul.unordered li:before {
      .bgc(@color);
    }
  }
  &.alert-success {
    @color: @primary-color;

    .c(@color);
    .brdc(@color);

    ul.unordered li:before {
      .bgc(@color);
    }
  }
  &.alert-warning {
    @color: @orange;

    .c(@color);
    .brdc(@color);

    ul.unordered li:before {
      .bgc(@color);
    }
  }
  &.alert-info {
    @color: @belize-hole;

    .c(@color);
    .brdc(@color);

    ul.unordered li:before {
      .bgc(@color);
    }
  }
}

#alert {
  .pt(40px);
}
#message {
  .dn;
  ul.unordered {
    .pb;
  }
}

hr {
    .brd;
    .brdt(top, 1px solid #eee);
    .m;
    .p;
    .opacity(0);
}

// ###############################################################################################################
#top {
  .p;
  .pt(70px) !important;
  .family(2);
  .brdt(bottom, 0);

  .navbar {
    .m;
    
    .nav {
      .pt(23px);
      .fr;
    }

    .nav li.dropdown.open > .dropdown-toggle,
    .nav li.dropdown.active > .dropdown-toggle,
    .nav li.dropdown.open.active > .dropdown-toggle {
      .bg;
    }

    .nav > li {
      .ml(50px);
      & > a {
        .p;
        .c(@grey-dark);
        &:hover {
          .c(@secondary-color);
        }
      }
      &.active { 
        & > a {
          .bg;
          .box-shadow(reset);
          .c(@secondary-color);
        }
      }
      &:first-child {
        .ml;
      }
    }

    .navbar-inner {
      .p;
      .bg;
      .reset-filter;
      .brd;
      .mnh;
      .box-shadow(reset);
      .border-radius(reset);
    }

    .brand {
      .p;
      .m;
      .text-shadow(reset);
      .hide-text;
    }
    
    .dropdown.open > .dropdown-menu {
      .opacity(100);
      .vis(visible);
      .z(10);
      top: 16px;

    }

    .dropdown-menu {
      .mt(10px);
      .brd;
      .bgc(@primary-color);
      .font((-4+@base-font-size));
      .box-shadow(reset);
      .border-radius(3px);
      .p(2px);
      .d;
      .opacity(0);
      .transition(all 0.25s ease-in-out 0s);
      .vis;
      .z(-100);
      top: 0;
      left: 0;
    }

    .dropdown-menu > li > a {
      .c(@white);
      .pyx(5px, 14px);
      .border-radius(2px);
      &:hover, &:focus {
        .bg(@secondary-color);
      }
    }

    .dropdown-menu:after {
      .brdt(bottom, 6px solid @primary-color);
      left: 16px;
    }

    .dropdown-menu:before {
      left: 16px;
      .brdt(bottom, 0);
    }

    .dropdown-menu .stack {
      position: relative;
    }

    .dropdown-menu .sub-menu {
      .pos;
      left: 100%;
      .ml(3px);
      top: 0;
      .vis;
      .mt(-1px);
      .opacity(0);
      .transition(all 0.25s ease-in-out 0s);
    }

    .dropdown .dropdown-menu li.open .sub-menu {
      .vis(visible);
      .d;
      .opacity(100);
    }

    .btn, .btn-group {
      .m;
    }

  }
}

// ###############################################################################################################



main {
  img {
    .border-radius(3px);
  }
  .hero-unit {
    .bg;
    .border-radius(reset);
    .p;
    .m;
    &.main {
      .pb(20px);
    }
    &.nopadding {
      h2 {
        .pb;
      }
    }

        .bootstrap-select {
          .fr !important;
          .mt(30px);

          .btn:focus {
            .ol !important;
          }

          .family("3i");
        }

        .btn-group > .btn:first-child {
          .border-radius(3px);
        }

        .btn {
          .bg(@nice-grey);
          .border-radius(3px);
          .box-shadow(reset);
          .p;
          .h(50px);
          .brd;
          .c(@white);
          .family("3i");
          .text-shadow(reset);

          .caret {
            .brd;

            &:before {
              content: "\e026";
              font-family: "unicons";
              top: -5px;
              left: -15px;
              .pos;
              .fs(16px);
            }
          }

          .filter-option {
            .pl(5px);
          }


          &:focus {
            .ol !important;
            
          }
        }
        
        .dropdown-menu {
          .border-radius(reset);
          .box-shadow(reset);
          .brd;
          .p;
          .bg;

          li {
            .bg(@nice-grey);
            .mt;
            .border-radius(3px);

            a {
              .hlh(50px);
              .c(@white);
              .border-radius(3px);

              &:hover {
                .bg(@primary-color);
                .c(@white);
              }
            }
          }
        }

        .btn-group.open .dropdown-toggle {
          .bg(@nice-grey);
          .box-shadow(reset) !important;

        }

        .btn:focus {
          .box-shadow(reset) !important;
        }

    h1 {
      .family("3i");
      .ls(-4px);
      .pt(40px);
      .pb(40px);
      .c(@black);
      & + h2 {
        .p;
      }
    }

    h2, h3, h4, h5, h6 {
      .c(@grey);
      .ls(-3px);
    }

    .list {
      .bgc(@primary-color);
      .c(@white);
      .pyx(40px, 0);
      .border-radius(3px);

      header {
        .txa;
        .pos(relative);

        h3 {
          .c(@white);
          .p;
          .m;
          .pt(36px);
        }
      }

      ul {
        li {
          .lh(36px);
        }
      }

      a {
        .c(@white);
        &:hover,
        &:focus {
          .txd(underline);
        }
      }
    }

    form {
      .p;
      .m;
      fieldset {

        // re-declaration of input width's, doing it this way because we dont know what size of input you'll need in feature.
        @form-border-width: 4; // no units here
        @form-input-padding: 14; // no units here also. This is a var that defines input paddings.
        @form-border-color: @nice-grey; // the border color, defined once cause I'm lazy and I dont want to write the value more than 1 time :) it's also easier for you to modify one place
        
        input, textarea {
          .h;
          .mb(20px);
          .fs(@base-font-size);
          .family(2);
        }
        input[type="text"] {
          .brd(unit(@form-border-width,px) solid @form-border-color);
          .p(unit(@form-input-padding, px));
        }

        textarea {
          .brd(unit(@form-border-width,px) solid @form-border-color);
          resize: none;
          .mnh(180px) !important;
          .p(unit(@form-input-padding, px));
        }

        input[type="submit"] {
          .c(@white);
          .bgc(@primary-color);
          .pt(25px);
          .pl(40px);
          .pr(40px);
          .pb(20px);
          .brd;
          .txt;
          .border-radius(5px);
          .family("1b");
          .font((@base-font-size+2), clean);
          .transition(all 0.25s ease-in-out 0s);
          .mb;
          cursor: pointer;
          -webkit-appearance: none;

          &:hover {
            .bgc(@secondary-color);
          }
          &:active {
            .bgc(@primary-color);
          }
        }

        .actions {
          .pt(20px);
          .txa;
        }
      }
    }
  }

  .works-group {
    li {
      .pt(@grid-spacing);

      &:nth-child(-n + 4) {
        .p;
      }
      
      .item {
        .d;
        .mxw(220px);
        .mxh(220px);
        .pos(relative);
        .txa;
        .ovf;
        .transition(all 0.25s linear 0s);
        .border-radius(3px);

        &:before {
          content: '';
          .pos;
          top: 0;
          left: 0;
          .eqsize(100%);
          .bgc(@secondary-color);
          .z(10);
          .opacity(0);
          .transition(all 0.25s linear 0s);
        }

        img {
          .transition(all 0.25s linear 0s);
          .d;
        }

        .description {
          .pos;
          top: 40%;
          left: 0;
          .eqsize(100%);
          .c(@white);
          .z(30);
          .vis;
          .opacity(0);
          .transition(all 0.25s ease-in-out 0s);
          span {
            .d;
            &.title {
              .family("1b");
              .font((@base-font-size+4), clean);
            }
            &.subtitle {
              .pt(10px);
              .family("3i");
              .font((-2+@base-font-size));
            }
          }
        }

        &:hover,
        &:focus {
          &:before {
            .opacity(90);
          }

          img {
            .scale(1.1);

          }

          .description {
            .vis(visible);
            .opacity(100);
          }
        }
      }

      .start-project {
        .d;
        .mxw(220px);
        .mxh(220px);
        .pos(relative);
        .txa;
        .ovf;
        .transition(all 0.25s linear 0s);
        .border-radius(3px);
        
        a {
          .d;
          .mxw(220px);
          .mxh(220px);
          .eqsize(220px);
          .bgc(@primary-color);
          .c(@white);
          
          span {
            .d;
            .pos;
            left: 0;
            .size(100%, 50%);

            &.title {
              .font((@base-font-size+14), clean);
              top: 50px;
            }

            &.subtitle {
              .font((@base-font-size+10));
              .family("1b");
              top: 50%;
            }
          }
          &:hover {
            .bgc(@secondary-color);
            span {
              &.title {
                animation: moveFromTop 400ms ease;
                -webkit-animation: moveFromTop 400ms ease;
                -moz-animation: moveFromTop 400ms ease;
                -ms-animation: moveFromTop 400ms ease;
              }
              &.subtitle {
                animation: moveFromBottom 400ms ease;
                -webkit-animation: moveFromBottom 400ms ease;
                -moz-animation: moveFromBottom 400ms ease;
                -ms-animation: moveFromBottom 400ms ease;
              }

              @-webkit-keyframes moveFromTop {
                  from {
                      -webkit-transform: translateY(-300%);
                  }
                  to {
                      -webkit-transform: translateY(0%);
                  }
              }
              @-moz-keyframes moveFromTop {
                  from {
                      -moz-transform: translateY(-300%);
                  }
                  to {
                      -moz-transform: translateY(0%);
                  }
              }
              @-ms-keyframes moveFromTop {
                  from {
                      -ms-transform: translateY(-300%);
                  }
                  to {
                      -ms-transform: translateY(0%);
                  }
              }

              @-webkit-keyframes moveFromBottom {
                  from {
                      -webkit-transform: translateY(200%);
                  }
                  to {
                      -webkit-transform: translateY(0%);
                  }
              }
              @-moz-keyframes moveFromBottom {
                  from {
                      -moz-transform: translateY(200%);
                  }
                  to {
                      -moz-transform: translateY(0%);
                  }
              }
              @-ms-keyframes moveFromBottom {
                  from {
                      -ms-transform: translateY(200%);
                  }
                  to {
                      -ms-transform: translateY(0%);
                  }
              }
            }
          }
          &:active {
            .bgc(@primary-color);
          }
        }
      }
    }
  }

  .text-items-group {
    li {
      .mt(100px);

      &:nth-child(-n + 2) {
        .mt;
      }
    }
  }

  .text-item {
    .pos(relative);
    .pl(65px);
    
    i {
      .pos;
      top: 0;
      left: 0;
      .c(@black);
      .font((@base-font-size+14), clean);
    }
  }

  .scheme {
    li {
      .pos(relative);
      &:before {
        content: '';
        .at2x('@{media-path}/arrow.png', 127px, 14px);
        .size(127px, 14px);
        .d;
        .pos;
        right: -75px;
        top: 42px;
        .z(50);
      }
      &:last-child {
        &:before {
          .dn;
        }
      }
    }
    article {
      .txa;
      figure {
        @size: 100px;
        .bgc(@silver);
        .border-radius(@size);
        .eqsize(@size);
        .mc;
        .ovf;
        .pos(relative);

        i {
          .fs((@base-font-size+12));
          .c(@white);
          .mt;
          .pos;
          left: 0;
          top: 40px;
          .w(100%);

          &.icon-code {
            top: 46px;
          }
          &.icon-checkmark {
            top: 44px;
          }
        }
      }
      header {
        .mt(52px);
        h4 {
          .pb(26px);
        }
      }
    }
  }

  .widget-logos {
    .d(table);
    .w(100%);
    li {
      .d(table-row);
      span {
        .d(table-cell);
        .w(50%);
        .txa;
        .pyx(20px, 0);
      }
      &:first-child {
        span {
          .pt;
        }
      }
    }
  }
  
  .widget-carousel {
    .pos(relative);
    .ovf;
    .item {
      .h(620px);
      header {
        .txa;
        .pb;

        h4 {
          .p;
          .pt(37px);
        }

        p {
          .pt(15px);
        }

        & + p {
          .txa;
          .pt(37px);

          & + .widget-socials {
            .pt(37px);
          }
        }
      }

    }

    .widget-nav {
      .pos;
      top: 0;
      right: 0;
      li {
        .fl;
        .pl(1px);

        a {
          .bgc(@nice-grey);
          .size(50px, 40px);
          .lh(40px);
          .fl;
          .fs((@base-font-size+12));
          .ovf;
          .pos(relative);
          i {
            .c(@white);
            .pos;
            .w(100%);
            .pl(18px);

            &[class^="icon-select"] {
              top: 7px;
              .fs((@base-font-size+12));
              .pl(20px);
            }
          }
          &:hover {
            .bgc(@secondary-color);
          }
          &:active {
            .bgc(@primary-color);
          }
        }
        &:first-child {
          a {
            .border-left-radius(5px);
          }
        }
        &:last-child {
          a {
            .border-right-radius(5px);
          }
        }
      }
    }
  }

  .widget-socials {
    li {
      .txa;
      .d;
    }

    [class^="icon-"], [class*=" icon-"] {
      .va(middle);
      .c(@black);
      .mr(10px);
    }
  }

  #works-carousel {
    .item {
      .fl;
      .w(100%);
    }
  }

  .widget-tabs {
    nav {
      .clearfix();

      li {
        .fl;
        .ml(1px);

        &:first-child {
          .ml;
        }

        a {
          .bgc(@primary-color);
          .p(18px);
          .fl;
          .c(@white);
          .border-top-radius(6px);
          .txt;
          .family("1b");
          .font((-3+@base-font-size), clean);
          &:hover {
            .bgc(@secondary-color);
          }
        }

        &.active {
          a {
            .bgc(@clouds);
            .c(@grey);
          }
        }
      }
    }

    .tab-pane {
      .p(48px);
      .bgc(@clouds);
      .border-radius(0 5px 5px 5px);
    }
  }

  .widget-accordion {
    ul {
      li {

        @height: 45px;
        @width: 59px;

        .pos(relative);
        .bgc(@clouds);
        .mt(1px);
        .border-radius(5px);
        .pl(@width);


        &:first-child {
          .mt;
        }

        [class*="icon-"] {
          .size(@width,@height);
          .pos;
          top: 0;
          left: 0;
          .txa;
          .lh(@height);
          .c(@primary-color);
          cursor: pointer;
          .transition(all 0.25s ease-in-out 0s);
        }

        .title {
          .c(@grey);
          .lh(@height);
          .d;

          &:hover, 
          &:focus {
            .c(@grey);
          }
        }

        .data {
          .brdt(left, 1px solid #fff);
          .pl(20px);

          .inner {
            .p(20px);
            .pb(40px);
            .dn;
          }
        }

        // if you want to show particular accordion item on load then add class active
        // if not, this widget will roll nice either way

        &.active {
          [class*="icon-"] {
            .rotate(45deg);
          }
          .data .inner {
            .d;
          }
        }
      }
    }
  }

  .widget-cycle {
    ul {
      .clearfix();
      li {
        .w(100%);
      }
    }
    .cycle-nav {
      .bgc(@nice-grey);
      .txa;
      .h(40px);
      .lh(40px);
      .mt(1px);
      .pos(relative);
      .border-radius(5px);

      .cycle-pager {
        li {
          .d(inline-block);
          .mxw(22px);
          .txa;
          a {
            .bgc(@white) !important;
            .hide-text;
            .eqsize(14px);
            .border-radius(50px);
            .d(inline-block);
            cursor: pointer;
            .pos(relative);
            .mc;
          }
          &.cycle-pager-active {
            a {
              .bgc(@primary-color) !important;
              .eqsize(18px);
              bottom: -2px;
            }
          }
        }
      }

      .cycle-control {
        .size(50px, 40px);
        .bgc(@nice-grey);
        .pos;
        top: 0;
        .ovf;
        cursor: pointer;
        .transition(all 0.25s ease-in-out 0s);

        i {
          &[class^="icon-select"] {
            .pos;
            top: 7px;
            .fs((@base-font-size+6));
            .c(@white);
            left: 21px;
          }
        }
        &[class*="-prev"] {
          left: 0;
          .border-left-radius(5px);
          .brdt(right, 1px solid @white);
        }
        &[class*="-next"] {
          right: 0;
          .border-right-radius(5px);
          .brdt(left, 1px solid @white);
        }
        &:hover {
          .bgc(@secondary-color);
        }
        &:active {
          .bgc(@primary-color);
        }
      }
    }
  }

  .module-social {
    .bgc(@nice-grey);
    .p(25px);

    ul {
      li {
        .d(inline-block);
        .fb-like {
          .w(105px) !important;
        }
        .twitter-share-button {
          .mxw(90px);
        }
      }
    }
  }

  #contact-map {
    .size(95%, 345px);
  }

  .work-nav {
    .mb(unit(@element-spacing, px));
    ul {
      li {
        .fl;
        .pl(1px);
        a {
          .size(50px, 40px);
          .lh(40px);
          .bgc(@nice-grey);
          .d;
          .pos(relative);
          .c(@white);
          .ovf;
          i {
            .pos;
            .w(100%);
            .pl(18px);
          }
          .icon-small-thumbnails {
            top: 1px;
          }
          .icon-select-left, .icon-select-right {
            .fs((@base-font-size+12));
            top: 7px;
            .pl(20px);
          }
          &:hover {
            .bgc(@secondary-color);
          }
          &:active {
            .bgc(@primary-color);
          }
        }
        &:first-child {
          a {
            .border-left-radius(5px);
          }
        }
        &:last-child {
          a {
            .border-right-radius(5px);
          }
        }
      }
    }
  }

  .unicons-presentation {
    ul {
      li {
        .pt(25px);
        i {
          .mr(10px);
          .c(@black);
        }
        &:first-child {
          .pt;
        }
      }
    }
  }

  .isotope,
  .isotope .item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
  }

  .isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
  }

  .isotope .item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
         -o-transition-property: top, left, opacity;
            transition-property: transform, opacity;
  }

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

  .isotope-item {
    .z(2);
  }

  .isotope-hidden.isotope-item {
    pointer-events: none;
    .z(1);
  }

  .portfolio {
    .p;
    @v: 100px;
    @d: 0.5s;
    
    .isotope {
      .ovf(visible) !important;
    }
    
    &.small {
      .item {
        .w(33.333%);
      }
    }
    .item {
      .pos(relative);
      .d;
      .w(33.333%);

      &[class*="span"] {
        .w(33.333%);
        .p;
        .m;

      }
      .details {
        .p(30px);
        .pb;
        .pos(relative);

        ul {
          .mxw(106px);
          .mc;

          li {
            .fl;
            .pl(1px);

            a {
              .bg(#dae1e5);
              .c(@white);
              .d;
              .w(52px);
              .h(27px);
              .txa;
              .pt(12px);
              .font(16px, clean);

              &:hover {
                .bg(@primary-color);
              }

              &:active {
                .bg(#dae1e5);
              }
            }

            &:first-child a {
              .border-left-radius(3px);
            }
            &:last-child a {
              .border-right-radius(3px);
            }
          }
        }
      }

      figure {
        .pos(relative);

        img {
          .z(10);
          -webkit-transition: -webkit-transform @d;
          -moz-transition: -moz-transform @d;
          transition: transform @d;
          .pos(relative);
          .d;
          .border-radius(reset);
          .w(100%);
          .brd;
        }

        &:hover {
          img {
            -webkit-transform: translateY(-@v);
            -moz-transform: translateY(-@v);
            -ms-transform: translateY(-@v);
            transform: translateY(-@v);
          }
        }

        figcaption {
          .pos;
          .h(@v);
          .w(100%);
          top: auto;
          left: 0;
          bottom: 0;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
          .bg(#f6f7f9);
          .ovf;
        }
      }
    }

  }
}


  @media (min-width: 1200px) {
    body {
      &.boxed {
        main .portfolio .isotope {
          .ml;
        }
      }
    }
    main .portfolio .isotope {
      .ml(-1px);
    }
  }
  
// ###############################################################################################################
#prefooter {
  .font((-2+@base-font-size));

  p {
    .font((-2+@base-font-size));
  }

  h2, h3, h4, h5, h6 {
    .ls(-1px);
  }

  .widget-stream {
    ul li {
      .fl;
      .pr(15px);
      .pt(15px);
      &:nth-child(3n) {
        .pr(0);
      }
      &:nth-child(-n + 3) {
        .pt(0);
      }
    }
  }
  
  .widget-testimonials {
    .item {
      p {
        .p;
        .font(16px);
      }

      .good-word {
        .p(35px);
        .brd(3px solid #eff1f4);
      }

      .author {
        .pos(relative);
        .pt(25px);
        .txa(right);
        p {
          .font(14px);
          .c(#b6bdc1);
        }

        &:before {
          content: '';
          .pos;
          top: 0;
          left: 27px;
          .w(25px);
          .h(17px);
          .at2x('@{media-path}/testimonials-arrow.png', 25px, 17px);
          .mt(-3px);
        }
      }
    }
  }

  .widget-contact {
    ul {
      li {
        > span {
          .pb(30px);
        }
      }
    }
  }
}

// ###############################################################################################################
#footer {
  .pyx(unit(@section-spacing, px), 0);
  .family(2);
  .bgc(#f5f7f9);

  [class^="icon-"]:before, [class*=" icon-"]:before {
    .va(middle);
  }

  ul {
    li {
      .d(inline);
      .pl(32px);
      &:first-child {
        .p;
      }
    }
  }

  a {
    .c(@grey);
    &:hover {
      .c(@grey-dark);
    }
  }

  p {
    &.designer {
      .font((-4+@base-font-size), clean);
      .pt(16px);
      i {
        .va(top);
      }
    }
  }
}

.md-modal {
  @v: -50%;
  .pos(fixed);
  top: 50%;
  left: 50%;
  .w(50%);
  .mxw(630px);
  .mnw(320px);
  .h(auto);
  .z(2000);
  .vis;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(@v) translateY(@v);
  -moz-transform: translateX(@v) translateY(@v);
  -ms-transform: translateX(@v) translateY(@v);
  transform: translateX(@v) translateY(@v);
}

.md-show {
  .vis(visible);
}

.md-overlay {
  .pos(fixed);
  .eqsize(100%);
  .vis;
  top: 0;
  left: 0;
  .z(1000);
  .opacity(0);
  .bg(rgba(187,189,195,0.5));

  @v: 0.3s;
  -webkit-transition: all @v;
  -moz-transition: all @v;
  transition: all @v;
}

.md-show ~ .md-overlay {
  .opacity(1);
  .vis(visible);
}

.md-content {
  .bg(@white);
  .c(@black);
  border-radius: 3px;
  margin: 0 auto;

  .md-data {
    .p(30px);
    .pos(relative);
    .mnh(40px);

    p {
      .p;

      &.md-title {
        .c(@primary-color);
        .family("1b");
        .font(16px);
      }

      &.md-subtitle {
        .pt(4px);
        .c(@grey);
        .family("3i");
        .font(11px, clean);
      }
    }

    .md-close {
      .pos;
      top: 30px;
      right: 30px;
      .bg(@nice-grey);
      .w(52px);
      .pt(10px);
      .pb(6px);
      .txa;
      .border-radius(3px);
      
      [class*="icon"] {
        .fs(16px);
        .c(@white);
      }

      &:hover {
        .bg(@primary-color);
      }

      &:active {
        .bg(@nice-grey);
      }
    }
  }
}

.md-content {
  @v: -55%;
  -webkit-transform: translateY(@v);
  -moz-transform: translateY(@v);
  -ms-transform: translateY(@v);
  transform: translateY(@v);
  .opacity(0);
  .md-image {
    img {
      .mxw(100%);
    }
  }
}

.md-container,
.md-content {
  @v: 0.3s;
  -webkit-transition: all @v;
  -moz-transition: all @v;
  transition: all @v;
  .pos(relative);
}

.md-show .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  .opacity(1);
}


@media (min-width: 980px) and (max-width: 1200px) {


  // a fix for medium sized desktops
  // if you're desktop is more then 1200px there is no reason to refix the dropdown-menu for last two menu items

  #top .navbar .nav > li {
    &:nth-last-child(-n + 2) { // for last two menu items display dropdown to the right to avoid ugly horizontal scroll in browser
      .dropdown-menu {
        left: auto;
        right: 0;

        &:before, &:after { // repositionise the arrow
          left: auto;
          right: 16px;
        }

        // apply fix for the submenu
        .sub-menu {
          left: auto;
          right: 100%;
          .ml;
          .mr(3px);
        }
      }
    }
  }
}

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {

  main {
    .works-group {
      li {
        .item {
          .description {
            top: 30%;
          }
        }

        .start-project {
          a {
            .mxh(166px);
            span {
              .size(100%, auto);
              &.title {
                top: 30px;
                .font((@base-font-size+8), clean);
              }
              &.subtitle {
                top: 80px;
                .font((@base-font-size+8), clean);
              }
            }
          }
        }
      }
    }
    .widget-logos {
      li {
        span {
          .pl(5px);
          .pr(5px);
        }
      }
    }
    .scheme {
      li {
        &:before {
          .scale(0.5);
        }
      }
    }

  }

  #prefooter {
    .widget-stream {
      ul li {
        .fl;
        .pr(15px);
        .pt(15px);
        &:nth-child(3n) {
          .pr(15px);
        }
        &:nth-child(-n + 3) {
          .pt(15px);
        }
        &:nth-child(-n + 2) {
          .pt;
        }
      }
    }

    .widget-contact {
      ul {
        li {
          .pt(20px);
          
          &:first-child {
            .pt;
          }

          > span {
            .pb;

            + span {
              .pl(35px);
              .d;
            }

            strong {
              .c(@black);
            }
          }
        }
      }
    }
  }

}

@media (max-width: 979px) {

  img {
    .d;
    .h(auto);
    .mxw(100%);
  }

  #top {
    .pos(relative);
    .navbar {
      .caret {
        .dn;
      }
      .btn-navbar {
        .bg(@primary-color);
        .brd;
        .eqsize(62px);
        .p;
        .txa;
        .box-shadow(reset);
        .text-shadow(reset);
        .transition(all 0.25s ease-in-out 0s);
        .icon-bar {
          .size(16px, 2px);
          .myx(2px, auto);
          .box-shadow(reset);
        }
        &:hover {
          .bg(@secondary-color);
        }
        &:active {
          .bg(@primary-color);
        }
      }
      .nav {
        .bgc(@clouds);
        .fn;
        .pyx(27px, 30px);
        .pos(relative);
        .mt(30px);
        & > li {
          .m;
          .pt(20px);
          .fs(18px);
          &:first-child {
            .pt;
          }
          a {
            .fw;
            .m;
            &:hover, 
            &:focus {
              .bg;
            }
          }
        }
      }

      .dropdown-menu {
        .z(1);
        .m;
        .p;
        .vis(visible);
        .opacity(100);
        .bg;
        top: auto;
        left: auto;
        .font((@base-font-size));
        & > li {
          .pt(20px);
          & > a {
            .c(@grey-dark);
            .border-radius(0);
            .p;
            .pos(relative);
            .pl(20px);
            &:before {
              font-family: "unicons";
              content: '\e049';
              .mxw(12px);
              .ovf;
              .fw(bold);
              .c(@primary-color);
              .mr(10px);
              .pos;
              top: 8px;
              left: 0;
            }
            &:hover,
            &:focus {
              .c(@primary-color);
              .bg;
            }
          }
        }
      }
      .dropdown-menu .sub-menu {
        .d;
        .pos(relative);
        left: auto !important;
        top: auto;
        right: auto !important;
        .m;
        .vis(visible);
        .opacity(100);
        li {
          .pl(16px);
          a {
           &:before {
              font-family: "unicons";
              content: '\e049';
              .mxw(12px);
              .ovf;
              .fw(bold);
              .c(@primary-color);
              .mr(10px);
              .pos;
              top: 8px;
              left: 0;
           }
           &:after {
              font-family: "unicons";
              content: '\e049';
              .mxw(12px);
              .ovf;
              .fw(bold);
              .c(@primary-color);
              .mr(10px);
              .pos;
              top: 8px;
              left: -16px;
           }
          }
        }
      }
    }
  }

}

// Landscape phone to portrait tablet
@media (max-width: 767px) {

  // REDEFINE THE SCOPE TO MOBILE AND BASIC VARS FOR FONT AND HEAD MIXINS!!!
  // You may want to ask for example why this is better solution if headings below are repeated in their full shape - with those &[data-spacing=...] etc?
  // Well, point is when LESS will generate the CSS then there wont be any variables so it's impossible to change only one var's value and get different result for small tablets and phones.
  // You need to rewrite the code and when you can change only one variable then you save time - no need to change font-size, line-height individually for each headings etc.

  @media: mobile;
  @base-font-size: 15px;
  @section-spacing: 80;
  @element-spacing: 30;
  
  body {
    .font(@base-font-size);
  }

  h1 {
    @size: 40px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  h2 {
    @size: 27px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  h3 {
    @size: 24px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  h4 {
    @size: 20px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  h5 {
    @size: 18px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  h6 {
    @size: 15px;
    .head(@size);
    &[data-spacing="none"] {
      .head(@size, clean);
    }
    &[data-spacing="one-third"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/3), px)));
    }
    &[data-spacing="half"] {
      .head(@size, clean);
      .pb(ceil(unit(((@mpm * @size)/2), px)));
    }
  }

  header {
    & + .row {
      .pb(unit((@section-spacing/3), px));
    }
  }

  p {
    @size: @base-font-size;
    .font(@size);
    & + p,
    & + ul,
    & + ol {
      .pt(ceil(unit((@mpm * @size), px)));
    }

    & + .button {
      .mt(unit(@element-spacing, px));
    }
  }

  ul {
    &.unordered {
      .pb;
    }
  }

  figure {
    & + header {
      h3 {
        .pt(unit(@element-spacing, px));
      }
    }
  }

  section {
    .pyx(unit(@section-spacing, px), 30px);
    &.subsection {
      .pb(unit(@section-spacing, px));
      &:not(.grid-presentation) {
        [class*="span"] {
          & + [class*="span"] {
            .pt(unit(@section-spacing, px));
          }
        }
      }
      &.grid-presentation {
        [class*="span"] {
          .pt(20px);
          &:first-of-type {
            .pt;
          }
        }
      }
      .unicons-presentation {
        [class*="span"] {
          & + [class*="span"] {
            .pt(25px);
          }
        }
      }
    }
  }

  blockquote {
    .pyx(30px, 0);
    .mt(20px);
    .brd;

    &.quote-right {
      .fn;
      .pl(30px);
      .ml;
      .brdt(left, 7px solid @clouds);
    }

    &.quote-left {
      .fn;
      .pl(30px);
      .ml;
      .brd;
      .brdt(left, 7px solid @clouds);
    }

    p {
      .fs((@base-font-size+9));
    }
  }

  .button {
    .font((-3+@base-font-size), clean);
    .mb(unit(@element-spacing, px));

    &[data-spacing="small"] {
      .mb(unit((@element-spacing/3), px));
    }

    &.big {
      .font((@base-font-size+2), clean);
    }
  }

  .widget-carousel.people {
    .txa;
    .mxw(300px);
    .mc;
    .item {
      .mxw(300px);
      .fl;
    }

    header {
      .pb(70px);
    }

    .widget-nav {
      @center: ((300 - 102)/2); // carousel mxw - nav mxw / 2 = center
      right: auto;
      top: 70px;
      left: unit(@center, px);
      .mxw(102px);
      .mc;
      .mt(-10px);
      .h(40px);
      .pb(30px);
      .d;
      li {
        .fl;
        .pl(1px);
        a {
          .bgc(@nice-grey);
          .size(50px, 40px); // height, width
          .lh(40px);
          .fl;
          .fs((@base-font-size+12));
          .ovf;
          .pos(relative);

          i {
            .c(@white);
            .pos(absolute);
            .w(100%);
            .pl;
            left: -10px;
            &[class^="icon-select"] {
              top: 7px;
              .fs((@base-font-size+12));
              .pl(20px);
            }
          }
          &:hover {
            .bgc(@secondary-color);
          }
          &:active {
            .bgc(@primary-color);
          }
        }
        &:first-child {
          a {
            .border-left-radius(5px);
          }
        }
        &:last-child {
          a {
            .border-right-radius(5px);
          }
        }
      }
    }
  }


  .widget-contact {
    ul {
      li {
        i {
          .font(@base-font-size, clean);
        }
      }
    }
  }

  #top {
    .navbar {
      .brand {
        .ml(30px);
      }
      .btn-navbar {
        .mr(30px);
      }
    }
  }

  main {

    .list {
      .pyx(40px, 0);
      .txa;

      header {
        .txa;
        .pb(50px);
        h3 {
          .p;
          .m;
        }
      }

      ul {
        li {
          .fs(20px);
          .lh(36px);
        }
      }
    }

    .bootstrap-select {
      .mt(5px) !important;
    }

    .works-group {
    
      @element-mxw: 220;

      @width: unit(((2*@element-mxw) + @grid-spacing), px);
      .w(@width);
      .mc;

      li {
        .mxw(unit(@element-mxw, px));
        .fl;
        .p;
        .mt(@grid-spacing);
        .mr(@grid-spacing);
        &:nth-child(2n) {
          .mr;
        }
      }
    }

    .text-items-group {
      li {
        .mt(50px);

        &:nth-child(-n + 2) {
          .mt(50px);
        }
        &:first-child {
          .mt;
        }
      }
    }

    .text-item {
      i {
        .font((@base-font-size+14), clean);
      }
    }

    .widget-tabs {
      nav {
        li {
          a {
            .font((-3+@base-font-size), clean);
          }
        }
      }
    }

    .work-nav {
      .w(156px);
      .mc;
      .pb(50px);
      .clearfix();
      &.pull-right {
        .fn;
      }

    }

    .widget-cycle {
      .pb(50px);
    }

    .scheme {
      header {
        .txa;
      }

      li {
        .pt(50px);
        &:before {
          .dn;
        }
        &:first-child {
          .pt;
        }
      }
      article {
        header {
          .mt(30px);
          h4 {
            .pb(26px);
          }
        }
      }
    }
    
    #contact-map {
      .mb(40px);
    }

  }

  #prefooter {
    .font(@base-font-size);
    p {
      .font(@base-font-size);
    }

   .row > [class*="span"] {
    .pt(unit((@element-spacing*2), px));
    &:first-of-type {
      .pt;
    }
  }

  .widget-stream {
    ul li {
      .fn;
      .d(inline-block);
      .pr(15px);
      .pt;
      &:nth-child(3n) {
        .pr(15px);
      }
    }
  }
       
  }

  #footer {
    .txa;
    .pyx(unit(@section-spacing, px), 0);
    p {
      &.designer {
        .font((-2+@base-font-size), clean);
      }
    }
    [class*=span] {
      .fn;
    }
    ul {
      .fn;
      .pb(50px);
    }
  }

  .portfolio {
    .p;
    @v: 100px;
    @d: 0.5s;
    @vv: auto;

    .isotope {
      .ovf(visible) !important;
      .mxw(400px);
      .mc;
    }
    
    &.small {
      .item {
        .w(@vv) !important;
      }
    }
    .item {
      .pos(relative);
      .d;
      .w(@vv) !important;

      &[class*="span"] {
        .w(@vv) !important;
        .p;
        .m;

      }
    }

  }

}

// Landscape phones and down
@media (max-width: 500px) {
  main {
    .works-group {
      
      @element-mxw: 220;
      .w(unit(@element-mxw,px));

      .mc;

      li {
        .mxw(unit(@element-mxw, px));
        .fn;
        .p;
        .mt(@grid-spacing);
        .mr;
        &:first-child {
          .mt;
        }
      }
    }

    .widget-carousel.people {
      @mxw: 220;
      .mxw(unit(@mxw, px));
      .item {
        .h(520px);
        .mxw(unit(@mxw, px));
        img {
          .mxw(unit(@mxw, px));
        }
      }
      .widget-nav {
        @center: ((@mxw - 102)/2); // carousel mxw - nav mxw / 2 = center
        left: unit(@center, px);
        .mxw(102px);
      }
    }
  }
  #prefooter {
    header {
      .txa;
    }

    .row > [class*=span] {
      .mxw(270px);
      .mc;
    }

    .widget-stream {
      ul li {
        .pt(15px);

        &:nth-child(3n) {
          .pr(0) !important;
        }
        &:nth-child(2n) {
          .pr(15px);
        }
        &:nth-child(-n + 3) {
          .pt;
        }
      }
    }

  }

  #footer {
    ul {
      li {
        .pyx(4px, 16px) !important;
        &:nth-child(2n) {
          &:after {
            content:"\A"; 
            white-space: pre;
          }
        }
      }
    }
  }

}

@media (max-width: 400px) {
  main {
    .hero-unit {
      .bootstrap-select {   
        .fn !important;
        .mb(20px);
      }
    }
  }
  #prefooter {
    .widget-stream {
      .clearfix();
      ul li {
        .fl;
        .pr(5px);
        .pt(5px);
        &:nth-child(3n) {
          .pr;
        }
        &:nth-child(2n) {
          .pr(5px);
        }
        &:nth-child(-n + 2) {
          .pt;
        }
      }
    }
  }
}