@import 'mixins.less';

*{ .box-sizing(border-box); }


// Elements
body{ margin: 0; padding: 40px; font-size: 15px; color: #4D4D4D; font-family: 'Futura W01 Medium', sans-serif; letter-spacing: 0.05em; }
section{ border-bottom: 8px solid #fff; .opacity(0.5); .transition(opacity 700ms);
strong{ font-family:'Futura W01 Heavy'; }

  &.active{ .opacity(1);  }
}
.touch section{ .opacity(1); }
p{ line-height: 2; }
h1, h2, strong{ font-weight: normal; }

// Global classes
.mobile{ display: none; }
.clear{ display: block; clear: both; }
.sprite{ background: url('/public/images/structure/hesen_sprite.svg'); background-size: 250px 200px; }
#wrapper, .center{ position: relative; z-index: 1; width: 100%; }

// Blocks
.block{ float: left;
  &.w25{ width: 25%; }
  &.w50{ width: 50%; }
  &.w75{ width: 75%; }
  &.adjust{ height: 100%; }
}

// Article
article{ padding: 40px 0 120px;
  .icon{ display: block; margin: 0 auto 35px; width: 23px; height: 13px; .sprite; background-position: -210px -30px; }
  h1,h2{ margin: 0 0 20px; text-align: center; font-family:'Chaparral W01 SmBd'; font-weight: normal; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.15em; }
  .a{ display: inline; padding: 0 4px; margin: 0 -4px; background: #606163; color: #fff; cursor: pointer;  }
  p.contact{ margin: 65px 0; font-family:'Chaparral W01 SmBd'; font-size: 1.466666667em; line-height: 1.181818182; }

  .btn{ display: inline-block; position: relative; padding: 0 46px 0 20px; height: 40px; .radius(5px); background: #fff; color: #494D53; font-family:'Chaparral W01 SmBd'; font-size: .933333333em; text-transform: uppercase; line-height: 40px; cursor: pointer; .transition(all 300ms);
    .arrow{ display: block; position: absolute; top: 50%; margin-top: -3px; right: 20px; width: 10px; height: 6px; .sprite; background-position: -210px -60px; .transition(background-position 300ms);}
    &:hover{ background: #929498; color: #fff; ;
      .arrow{ background-position: -210px -50px; }
    }
  }
}

// Header
header.main{ position: fixed; top: 0; left: 0; padding: 0 40px; width: 100%; height: 40px; background: #fff; z-index: 100;
  .center{ height: 40px;}
  #logo{ position: absolute; bottom: -175px; left: 0; z-index: 100; width: 160px; height: 175px; .sprite; background-position: -10px -10px; }
  nav.main{ position: absolute; top: 0; right: 0;
    ul{ float: left; margin: 0; padding: 0; list-style: none; }
    li{ float: left; margin-left: 30px; color: #A9AAAC; font-family:'Chaparral W01 SmBd'; font-size: 12px; text-transform: uppercase; line-height: 40px; cursor: pointer;
      &.active{ text-decoration: underline; }
    }
  }
  nav.spheres{ position: absolute; top: 120px; right: 20px;
    ul{ margin: 0; padding: 0; list-style: none; }
    li{ margin-bottom: 8px; width: 16px; height: 16px; .sprite; background-position: -180px -30px; cursor: pointer;
      &.active{ background-position: -180px -10px; }
      &.top{ margin-left: -4px; width: 24px; height: 24px; background-position: -180px -50px; }
    }
  }
}

// Player
.player.full{ padding-bottom: 60%; width: 100%; height: 1px; background: #BE9781; }
.player{ position: relative; overflow: hidden;
  .clicker{ position: absolute; top: 0; z-index: 100; width: 50%; height: 100%; }
  .player_next{ right: 0; cursor:url('/public/images/structure/arr_right.png') 40 18, auto; }
  .player_prev{ left: 0; cursor:url('/public/images/structure/arr_left.png') 0 18, auto; }
  .counter{ position: absolute; bottom: 20px; left: 50%; z-index: 1000; margin-left: -50px; width: 100px; color: #fff; font-family:'Chaparral W01 SmBd'; font-size: 2em;
    div{ float: left; }
    .slash{ margin: 0 20px 0 0;}
    .index{ position: relative; overflow: hidden; width: 40px; height: 30px;
      div{ position: absolute; left: 0; top: -100%; .transition(top 300ms)}
      .new{ top: -100%; }
      .current{ top: 0; }
      .hide{ top: 100%; }
    }
  }
  ul{ position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; .opacity(0);
    li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      figure{ position: absolute; top: 0; left: 100%; z-index: 1; margin: 0; height: 100%; width: 100%; overflow: hidden; .transition(left 700ms ease-in-out);
        &.swiping{ .transition(none) }
      }
      img{ position: absolute; top: 0; left: 50%; width: 100%; opacity: 0; .transition(opacity 500ms);
        //filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        //filter: gray; /* IE6-9 */
        //-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
      }

      &.new.next figure{ left: 200%; }
      &.new.prev figure{ left: -200%; }

      &.before_show figure{ left: -100%; }
      &.show figure{ left: 0; }
      &.after_show figure{ left: 100%; }

      &.hide.next figure{ left: -200%; }
      &.hide.prev figure{ left: 200%; }
    }
  }
}
html.touch .player
{
  .clicker{ display: none; }
  ul li figure{ .transition(left 300ms ease-out) }
}

section.active ul li img, .touch section ul li img{
//filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
//-webkit-filter: grayscale(0%);
}

// ABOUT
#about{ position: relative;
  .block:nth-child(2){ background: #404246 url('/public/images/structure/cement_bg_dark.jpg') center center;
    .inner{ margin: 0 25%; width: 50%; color: #ccc;
      .icon{ margin: 40px auto 35px; background-position: -210px -10px;}
      h1{ color: #f2f2f2; }
      .contact{ color: #f2f2f2; }
    }
  }
}

// PRO'S
#about_pros{
  .block:nth-child(1){ padding: 80px 40px; background: #494D53; color: #ccc;
    .title_holder, .list_holder{ float: left; width: 50%; }
    h2{ margin: 0; color: #fff; font-size: 1.5em;
      .five{ display: block; position: relative; top: 0; left: 0; float: left; font-size: 6em; line-height: 1; }
      .text{ display: block; float: left; margin-left: 40px; line-height: 1.8em }
    }
    ul{ margin: 0; padding: 0; list-style: none;
      li{ padding-bottom: 10px; font-size: 1.066666667em; color: #fff;
        span{ display: inline-block; width: 40px;  }
      }
    }
  }
}

// SOLUTION / SPECIAL
#solution, #special{
   .text{ padding: 40px; background: #E3E6E6; }
}

// Footer
#contact{ padding: 40px 0; background: #494D53; color: #ccc;
  .title{ display: block; margin-bottom: 30px; padding-right: 40px; color: #eee; font-family:'Chaparral W01 SmBd'; font-size: 1.4em; line-height: 1.4; }
  strong{ color: #eee; }

  .block:nth-child(1), .block:nth-child(4){ margin-left: 25%;
    .data{ display: block; position: relative; margin-bottom: 80px;
      .icon{ display: block; position: absolute; top: 3px; left: -30px; .sprite;
        &.person{ width: 16px; height: 16px; background-position: -220px -110px; }
        &.location{ top: 90px; width: 14px; height: 18px; background-position: -220px -80px; }
      }
    }
    .submenu{  font-family:'Chaparral W01 SmBd'; font-size: .933333333em; color: #ccc; text-decoration: none;
      &:hover{  text-decoration: underline;}
    }

  }
  .block:nth-child(2){
    .input_holder{ margin-bottom: 5px;
      label{ display: inline-block; width: 60px; font-family:'Chaparral W01 SmBd'; font-size: .933333333em;}
      input[type="text"]{ display: inline-block; padding: 0 10px ; width: 180px; height: 30px; background: #929498; border: 1px solid #ccc; font-family: 'Futura W01 Medium', sans-serif; font-size: 14px; }
    }
    .input_btn{ display: inline-block; position: relative; margin: 15px 0 0 95px;
      input[type="submit"]{ padding: 0 10px; width: 150px; height: 40px; background: #eee; border: none; .radius(5px); color: #494D53; font-family:'Chaparral W01 SmBd'; font-size: 14px; text-transform: uppercase; text-align: left; line-height: 40px; cursor: pointer; .transition(all 300ms)}
      .arrow{ display: block; position: absolute; right: 15px; top: 16px; z-index: 5; width: 5px; height: 8px; .sprite; background-position: -240px -50px; .transition(background-position 300ms)}
      &:hover{
        input{ color: #fff; background: #929498; }
        .arrow{ background-position: -230px -50px; }
      }
    }
    .error{ display: block; margin-bottom: 10px; font-family:'Chaparral W01 SmBd'; font-size: .933333333em; color: #FF4A56}
    .success{ color: #3FFF6A; }
  }
  #komma_link{ display: block; margin: 0; width: 230px; height: 36px; cursor: pointer; .opacity(.8); .transition(opacity 300ms); white-space: nowrap; font-family:'Chaparral W01 SmBd'; font-size: .933333333em;
    &:hover{ .opacity(1); }
  }
  #komma_logo{ display: block; float: left; margin: 0 10px 0 0; width: 36px; height: 36px; .sprite; background-position: -180px -80px; }
  #komma_text{ position: relative; top: 2px; left: 0; display: block; float: left; color: #ccc;
    strong{ color: #eee; }
  }
}


// Media Queries
@media screen and (min-width: 1680px)
{
  #wrapper, .center{ margin: 0 auto; width: 1600px; }
}
@media screen and (max-width: 1280px)
{
  #about .block:nth-child(2) .inner{ margin: 0 20%; width: 60%; }
  #solution, #special{
    .w25{ width: 30%; }
    .w75{ width: 70%; }
  }

  #about_pros{
    .block:nth-child(1){ width: 60%;
      .title_holder, .list_holder{ float: left; width: 100%; }
      .list_holder{ margin-top: 40px; padding-left: 78px; }
    }
    .block:nth-child(2){ width: 40%; }
  }

  #contact{
    .block.w25{ width: 50%; padding: 0 40px; }
    .block:nth-child(1), .block:nth-child(4){ margin-left: 0; padding-left: 80px }
  }
}

@media screen and (max-width: 1024px)
{
  #about .block:nth-child(2) .inner{ margin: 0 10%; width: 80%; }
  #about_pros{
    .block:nth-child(1){ width: 100%;
      .title_holder, .list_holder{ float: left; width: 100%; }
      .list_holder{ margin-top: 40px; padding-left: 78px; }
    }
    .block:nth-child(2){ display: none; }
  }

  #solution, #special{
    .w25{ width: 45%; }
    .w75{ width: 55%; }
  }
}

@media screen and (max-width: 850px)
{
  .block{
    &.w25,&.w50,&.w75{ width: 100%; }
    &.adjust{ height: 1px !important; padding-bottom: 60% }
  }
  #about .block:nth-child(1){ display: none; }
  #about .block:nth-child(2) .inner{ margin: 0 25%; width: 50%; }
  #solution, #special{
    .w25{ width: 100%; }
    .w75{ width: 100%; }
  }

  #contact{
    .block.w25{ width: 100%; margin-bottom: 40px; padding: 0 80px; }
    .block:nth-child(1), .block:nth-child(4){ margin-left: 0; }
    .block:nth-child(1) .data{ margin-bottom: 0;}
  }

  // Show mobile
  header.main{
    nav.main, #logo{ display: none; }
  }
  @import 'mobile.less';
}

@media screen and (max-width: 560px)
{
  section{ .opacity(1); }
  header.main nav.spheres{ display: none; }
  #about .block:nth-child(2) .inner{ margin: 0 10%; width: 80%; }

  #about_pros{
    .block:nth-child(1){ width: 100%;
      .list_holder{ padding-left: 3px; }
      h2{  font-size: 1.1em;
        .five{ font-size: 6em;  }
        .text{ line-height: 1.8em; margin-left: 20px; }
      }
      ul{
        li{  font-size: 0.9em;  }
      }
    }
  }

  #contact{
    .title{ font-size: 1em; }
    .block:nth-child(2){
      .input_btn{ margin-left: 0;}
    }
  }
}

@media screen and (max-width: 400px)
{
  body{ padding: 40px 0 0 0; }
}