/** Web Site Special Variables **/
@import url(themify-icons.css);
@import url(animate.css);
@import url(jquery.fancybox.min.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  font-family: "Montserrat", sans-serif;
  line-height: 1;
  font-size: 14px; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }

strong {
  font-weight: 600; }

.errorBox {
  display: none; }

.succesData {
  font-size: 16px;
  color: #fff;
  background: #34bfa3;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

.errorData {
  font-size: 16px;
  color: #fff;
  background: #c0392b;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

.center {
  margin: 0 auto;
  width: 90%; }

.clearfix {
  clear: both; }

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

#slides {
  position: relative;
  background: #000; }

#slides .slides-container {
  display: none; }

#slides .scrollable {
  *zoom: 1;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%; }

#slides .scrollable:after {
  content: "";
  display: table;
  clear: both; }

.slides-navigation {
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 46%;
  width: 100%; }

.slides-navigation a {
  position: absolute;
  display: block;
  width: 150px;
  background: rgba(0, 0, 0, 0.5);
  padding: 60px 0 60px 0;
  color: #fff;
  font-size: 24px; }

.slides-navigation a.prev {
  text-align: right;
  left: 0;
  padding-right: 20px;
  text-decoration: none; }

.slides-navigation a.next {
  text-align: left;
  right: 0;
  padding-left: 20px;
  text-decoration: none; }

.slides-pagination {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  text-align: center;
  width: 100%; }

.slides-pagination a {
  border: 2px solid #fff;
  width: 10px;
  height: 10px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  margin: 2px;
  overflow: hidden;
  text-indent: -100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; }

.slides-pagination a.current {
  background: #fff; }

/***/
.slides-container div {
  position: relative; }
.slides-container img {
  opacity: 0.5; }

.sliderCaption {
  position: absolute;
  top: 43%;
  bottom: 43%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  color: #fff; }
  .sliderCaption h2 {
    font-size: 72px;
    font-weight: 700; }
  .sliderCaption .buttons {
    margin-top: 30px; }
    .sliderCaption .buttons .slBtn1 {
      padding: 10px 20px;
      border: 2px solid #fff;
      color: #fff;
      font-weight: 700; }
    .sliderCaption .buttons .slBtn2 {
      padding: 10px 20px;
      border: 2px solid #303030;
      background: #303030;
      color: #000;
      font-weight: 700;
      margin-left: 10px; }
      .sliderCaption .buttons .slBtn2:hover {
        color: #303030;
        background: #000;
        border-color: #000; }

.sectors {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  height: 400px; }
  .sectors li {
    position: relative;
    float: left;
    width: 30%;
    height: 100%;
    overflow: hidden; }
    .sectors li h1 {
      position: absolute;
      bottom: 150px;
      right: 50%;
      margin-right: -120px;
      width: 240px;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 36px;
      padding: 20px 0;
      z-index: 9;
      border:2px solid #fff;
      -webkit-box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.75);
      background: rgba(0, 0, 0, 0.5);
      }
      .sectors li .img {
        position: absolute;
        top:0;
        left:0;
        bottom: 0;
        width: 100%;
      }
    .sectors li img {
      height: 100%; }
    .sectors li:hover .img {
      opacity: 0.7;
      transition: 1s; }
    .sectors li:nth-child(1) {
      background: #34495e; }
    .sectors li:nth-child(2) {
      background: #2ecc71; }
    .sectors li:first-child{
      width: 70%;
    }


header {
  position: relative;
  float: left;
  z-index: 5;
  width: 100%;
  background: #303030; }
  header a#logo {
    float: left;
    background: #fff;
    text-align: center;
    width: 350px; }
    header a#logo h1 {
      float: left;
      width: 100%;
      height: 140px;
      text-indent: -999999px;
      background: url("/assets/img/logo_new.png") no-repeat center center; }
  header .headerRight {
    float: right;
    margin-top: 40px; }
    header .headerRight ul.projects {
      float: right; }
      header .headerRight ul.projects > li {
        float: left; }
    header .headerRight ul.socials {
      float: right; }
      header .headerRight ul.socials > li {
        float: left;
        margin-left: 10px; }
        header .headerRight ul.socials > li a {
          float: left;
          text-align: center;
          padding: 10px 20px;
          color: #000;
          background: #fff; }
          header .headerRight ul.socials > li a:hover {
            background: #000;
            color: #fff; }
  header .headerNav {
    float: right; }
    header .headerNav nav {
      float: right;
      padding: 0 10px; }
      header .headerNav nav ul {
        float: left; }
        header .headerNav nav ul li {
          float: left;
          margin: 0 10px; }
          header .headerNav nav ul li a {
            float: left;
            padding: 10px;
            color: #fff;
            font-weight: 700;
            font-size: 14px; }
            header .headerNav nav ul li a:hover, header .headerNav nav ul li a.active {
              background: #000; }
    header .headerNav .phone {
      float: right;
      background: #fff;
      color: #000;
      font-weight: 700;
      padding: 10px 20px; }

.homeAbout {
  position: relative; }
  .homeAbout .left {
    float: left;
    width: 90%;
    padding: 5%;
    background: #eeeeee; }
    .homeAbout .left h3 {
      font-size: 36px;
      font-weight: 700; }
    .homeAbout .left h4 {
      font-size: 24px;
      font-weight: 300; }
    .homeAbout .left p {
      width: 80%;
      margin-top: 20px;
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      margin-bottom: 30px; }
    .homeAbout .left a {
      float: left;
      width: 200px;
      padding: 10px 20px;
      border: 2px solid #34495e;
      background: #34495e;
      color: #fff;
      font-weight: 700;
      -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19); }
      .homeAbout .left a:hover {
        background: #000;
        border-color: #000; }
      .homeAbout .left a i {
        float: right; }
  .homeAbout .right {
    float: right;
    width: 40%;
    padding: 5%;
    background: #d9d9d9; }
    .homeAbout .right ul.companyInfo {
      float: left;
      width: 80%;
      padding: 5%;
      background: #fff;
      -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19); }
      .homeAbout .right ul.companyInfo > li {
        position: relative;
        float: left;
        width: calc(50% - 1px);
        height: 180px;
        border-bottom: 1px solid #d8d8d8;
        border-right: 1px solid #d8d8d8;
        -webkit-transition: all 0.2s;
        transition: all 0.2s; }
        .homeAbout .right ul.companyInfo > li:nth-child(2) {
          border-right: none; }
        .homeAbout .right ul.companyInfo > li:nth-child(3) {
          border-bottom: none; }
        .homeAbout .right ul.companyInfo > li:nth-child(4) {
          border-right: none;
          border-bottom: none; }
        .homeAbout .right ul.companyInfo > li i {
          position: absolute;
          top: 20px;
          right: 20px;
          background: url("/assets/img/aboutSprite.png") no-repeat top left; }
        .homeAbout .right ul.companyInfo > li:nth-child(1) i {
          background-position: -660px 0px;
          width: 100px;
          height: 83px; }
        .homeAbout .right ul.companyInfo > li:nth-child(2) i {
          background-position: -440px 0px;
          width: 100px;
          height: 108px; }
        .homeAbout .right ul.companyInfo > li:nth-child(3) i {
          background-position: 0px 0px;
          width: 100px;
          height: 78px; }
        .homeAbout .right ul.companyInfo > li:nth-child(4) i {
          background-position: -220px 0px;
          width: 100px;
          height: 84px; }
        .homeAbout .right ul.companyInfo > li p {
          position: absolute;
          bottom: 20px;
          left: 20px;
          color: #000;
          font-weight: 900;
          font-size: 48px; }
          .homeAbout .right ul.companyInfo > li p span {
            display: inherit;
            font-size: 14px;
            font-weight: 600; }

#projectMaps {
  float: left;
  position: relative;
  width: 100%;
  height: 450px; }
  #projectMaps h3 {
    position: absolute;
    width: 220px;
    top: 0;
    left: calc(50% - 110px);
    background: #34495e;
    color: #fff;
    padding: 20px 0;
    z-index: 10;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); }
  #projectMaps #map {
    width: 100%;
    height: 450px; }

.mapProject {
  width: 145px;
  padding: 10px; }
  .mapProject img {
    float: left;
    width: 145px;
    margin: 40px 0; }
  .mapProject a {
    float: left;
    width: calc(100% - 40px);
    padding: 10px 20px;
    border: 2px solid #34495e;
    background: #34495e;
    color: #fff;
    font-weight: 900;
    text-align: center; }
    .mapProject a:hover {
      background: #000;
      border-color: #000; }

#homeNews {
  float: left;
  width: 100%;
  padding: 30px 0; }
  #homeNews ul {
    float: left;
    width: 100%; }
    #homeNews ul > li {
      float: left;
      width: 50%; }
      #homeNews ul > li a {
        float: left;
        color: #000; }
        #homeNews ul > li a .newsImage {
          float: left;
          width: 255px;
          height: 255px; }
          #homeNews ul > li a .newsImage img {
            height: 255px; }
        #homeNews ul > li a .newsContent {
          float: left;
          width: 300px;
          margin-left: 20px;
          margin-top: 40px; }
          #homeNews ul > li a .newsContent span.line {
            float: left;
            display: inherit;
            width: 75px;
            height: 4px;
            background: #34495e;
            margin-bottom: 10px; }
          #homeNews ul > li a .newsContent h4 {
            float: left;
            width: 100%;
            display: inherit;
            font-size: 18px;
            font-weight: 600;
            margin-top: 10px;
            line-height: 24px; }
          #homeNews ul > li a .newsContent p {
            float: left;
            display: inherit;
            margin-top: 10px;
            line-height: 18px; }
  #homeNews .thButton {
    float: left;
    width: 180px;
    margin-left: calc(50% - 90px);
    margin-top: 20px;
    border: 4px solid #303030;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
    background: transparent;
    -webkit-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29); }
    #homeNews .thButton:hover {
      background: #000;
      border-color: #000;
      color: #fff; }

#ozpolat {
  float: left;
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background: url("/assets/img/ozpolatbg.jpg") top center no-repeat; }
  #ozpolat img {
    max-width: 100%; }

footer {
  float: left;
  width: 100%;
  background: #34495e; }
  footer .left {
    float: left;
    width: 50%;
    height: 115px;
    padding: 5%; }
    footer .left a.flogo {
      float: left; }
      footer .left a.flogo img {
        width: 220px; }
    footer .left ul.footerDetail {
      float: left;
      width: 50%;
      margin-top: 20px;
      margin-left: 20px; }
      footer .left ul.footerDetail li {
        float: left;
        width: 100%;
        color: #fff;
        margin-bottom: 10px; }
        footer .left ul.footerDetail li i {
          width: 50px;
          margin-right: 10px; }
  footer .right {
    float: right;
    width: 30%;
    height: 115px;
    padding: 5%;
    background: #354e5e;
    color: #fff; }
    footer .right span.line {
      float: left;
      width: 20%;
      background: #fff;
      height: 4px; }
    footer .right h5 {
      float: left;
      width: 100%;
      font-size: 24px;
      font-weight: 700;
      margin-top: 10px; }
    footer .right p {
      float: left;
      width: 100%;
      margin-top: 5px;
      font-size: 14px;
      line-height: 18px; }
    footer .right form {
      position: relative;
      float: left;
      width: 100%; }
      footer .right form input {
        float: left;
        width: calc(100% - 24px);
        border: 2px solid #fff;
        padding: 10px;
        color: #fff;
        margin-top: 10px;
        background: none; }
        footer .right form input::-webkit-input-placeholder {
          color: #fff; }
        footer .right form input:-moz-placeholder {
          color: #fff; }
        footer .right form input::-moz-placeholder {
          color: #fff; }
        footer .right form input:-ms-input-placeholder {
          color: #fff; }
      footer .right form button {
        position: absolute;
        top: 17px;
        right: 5px;
        color: #fff;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer; }
      footer .right form .error {
        float: left;
        width: 100%;
        color: #fff;
        font-weight: 600;
        margin-top: 5px; }
  footer .copyright {
    float: left;
    Width: 100%;
    padding: 20px 0;
    background: #2c3e50;
    color: #fff;
    font-size: 12px; }
    footer .copyright p {
      float: left; }
    footer .copyright a {
      float: right;
      color: #fff; }

/** Sub Page **/
.head {
  float: left;
  width: 100%;
  height: 140px;
  background: #303030; }

.subpage {
  float: left;
  width: 100%;
  min-height: 400px;
  padding: 20px 0; }
  .subpage h2.title {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase; }
    .subpage h2.title i {
      font-size: 14px; }
    .subpage h2.title::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      height: 4px;
      width: 40px;
      background: #303030; }
  .subpage article {
    line-height: 24px; }

/** Project Detail **/
.projectHead {
  position: relative;
  float: left;
  width: 100%;
  height: 350px;
  overflow: hidden;
  background: #000; }
  .projectHead .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .projectHead .img img {
      width: 100%;
      opacity: 0.8; }
  .projectHead .content {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 200px;
    z-index: 10;
    color: #fff; }
    .projectHead .content h2 {
      position: relative;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 20px; }
      .projectHead .content h2::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        height: 4px;
        width: 40px;
        background: #303030; }
    .projectHead .content h3 {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 5px; }

.projectHeadNav {
  position: relative;
  float: left;
  Width: 100%;
  z-index: 12; }
  .projectHeadNav nav {
    float: left;
    width: 100%;
    background: #34495e; }
    .projectHeadNav nav ul {
      float: left; }
      .projectHeadNav nav ul li {
        float: left; }
        .projectHeadNav nav ul li a {
          position: relative;
          float: left;
          padding: 20px;
          color: #fff;
          font-weight: 700; }
          .projectHeadNav nav ul li a.active, .projectHeadNav nav ul li a:hover {
            background: #000; }
            .projectHeadNav nav ul li a.active:before, .projectHeadNav nav ul li a:hover:before {
              top: 100%;
              left: 50%;
              border: solid transparent;
              content: " ";
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
              border-color: rgba(255, 219, 0, 0);
              border-top-color: #000;
              border-width: 14px;
              margin-left: -14px; }
    .projectHeadNav nav a.catalog {
      float: right;
      background: #2e4053;
      color: #fff;
      padding: 0 20px;
      font-size: 13px;
      font-weight: 700; }
      .projectHeadNav nav a.catalog i {
        float: left;
        margin: 15px 0 14.5px 0;
        font-size: 24px; }
      .projectHeadNav nav a.catalog span {
        float: right;
        margin-top: 20px;
        margin-left: 5px; }

.projectData {
  float: left;
  width: 100%;
  margin-top: 40px; }
  .projectData h3 {
    float: left;
    margin-left: 5%;
    width: 95%;
    font-size: 24px;
    font-weight: 700;
    color: #343434;
    background: #efefef; }
    .projectData h3 div {
      float: left;
      width: 10px;
      height: 44px;
      background: #34495e; }
    .projectData h3 span {
      float: left;
      background: #fff;
      padding: 10px 20px; }
  .projectData .generalInformation .left {
    position: relative;
    float: left;
    width: 60%;
    margin-top: 20px;
    line-height: 24px; }
    .projectData .generalInformation .left h5 {
      float: left;
      width: 100%;
      margin: 10px 0;
      font-weight: 600;
      font-size: 18px; }
    .projectData .generalInformation .left ul {
      float: left;
      width: 100%; }
      .projectData .generalInformation .left ul li {
        float: left;
        width: 47.5%;
        margin-right: 2.5%; }
        .projectData .generalInformation .left ul li span {
          float: left;
          width: 10px;
          height: 10px;
          margin: 8px;
          background: #34495e; }
  .projectData .generalInformation .right {
    float: right;
    width: 40%;
    margin-top: 20px; }
    .projectData .generalInformation .right form {
      float: right;
      padding: 20px;
      border: 5px solid #efefef;
      width: 330px; }
      .projectData .generalInformation .right form h2 {
        position: relative;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px; }
        .projectData .generalInformation .right form h2::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -10px;
          height: 4px;
          width: 40px;
          background: #303030; }
      .projectData .generalInformation .right form input[type=text], .projectData .generalInformation .right form input[type=email] {
        float: left;
        width: calc(100% - 24px);
        padding: 10px;
        border: 2px solid #303030;
        margin-top: 10px;
        font-weight: 400;
        font-family: "Montserrat", sans-serif; }
        .projectData .generalInformation .right form input[type=text]::placeholder, .projectData .generalInformation .right form input[type=email]::placeholder {
          font-weight: 600; }
      .projectData .generalInformation .right form .checkbox {
        float: left;
        width: 100%;
        margin-top: 10px; }
        .projectData .generalInformation .right form .checkbox input[type="checkbox"] {
          display: none; }
          .projectData .generalInformation .right form .checkbox input[type="checkbox"] + label {
            color: #000; }
            .projectData .generalInformation .right form .checkbox input[type="checkbox"] + label span {
              display: inline-block;
              width: 25px;
              height: 22px;
              margin: 0 5px 0 0;
              vertical-align: middle;
              background: url("/assets/img/checkbox.png") top center no-repeat;
              cursor: pointer; }
          .projectData .generalInformation .right form .checkbox input[type="checkbox"]:checked + label span {
            background: url("/assets/img/checkboxon.png") top center no-repeat; }
      .projectData .generalInformation .right form button {
        float: left;
        Width: 100%;
        padding: 10px 0;
        text-align: center;
        font-weight: 700;
        color: #fff;
        background: #34495e;
        border: none;
        font-size: 14px;
        margin-top: 10px;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        transition: all 0.2s; }
        .projectData .generalInformation .right form button:hover {
          background: #000; }
  .projectData .simpleApartment .tab-slider-container {
    float: left;
    width: 100%;
    margin-top: 20px; }
  .projectData .simpleApartment .tab-slider-nav {
    float: left;
    width: 100%;
    background: #303030; }
    .projectData .simpleApartment .tab-slider-nav ul {
      float: left; }
      .projectData .simpleApartment .tab-slider-nav ul li {
        float: left;
        padding: 20px;
        font-weight: 700;
        cursor: pointer; }
        .projectData .simpleApartment .tab-slider-nav ul li.active, .projectData .simpleApartment .tab-slider-nav ul li:hover {
          background: #000;
          color: #303030; }

/** PikaChoose **/
#pikame {
  float: left;
  width: 100%;
  height: 100%;
  margin: 20px 0; }

.pika-stage {
  float: left;
  width: 100%;
  margin-top: 20px; }

/* Style the thumbnails */
.pika-thumbs {
  padding: 0 16px;
  height: 75px; }

.pika-thumbs li {
  width: 100px;
  height: 100px;
  padding: 0;
  overflow: hidden;
  float: left;
  list-style-type: none;
  cursor: pointer; }

.pika-thumbs li .clip {
  position: relative;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden; }

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage,
.pika-textnav {
  width: 100%; }

.pika-stage {
  position: relative;
  text-align: center;
  height: 500px !important;
  overflow: hidden; }

.pika-stage img {
  height: 100%; }

.pika-stage .caption {
  display: none; }

.pika-imgnav {
  opacity: 1 !important; }

.pika-imgnav a {
  position: absolute;
  display: block;
  z-index: 3;
  cursor: pointer;
  color: #fff;
  background: #34495e;
  width: 50px;
  padding: 10px 0;
  font-size: 24px;
  bottom: 0px; }

.pika-imgnav a.previous {
  right: 60px; }

.pika-imgnav a.next {
  right: 0; }

.pika-imgnav a.play {
  display: none; }

.pika-imgnav a.pause {
  display: none; }

.pika-textnav {
  display: none; }

.pika-tooltip {
  display: none; }

.pika-counter {
  display: none; }

.pika-loader {
  color: white;
  width: 60px;
  font-size: 11px;
  padding: 5px 3px;
  text-align: right;
  position: absolute;
  top: 15px;
  right: 15px; }

.jcarousel-skin-pika .jcarousel-container-horizontal {
  float: left;
  width: 100%;
  overflow: hidden; }

.jcarousel-skin-pika .jcarousel-clip-horizontal {
  width: 100%;
  margin-top: 10px; }

/****/
.interiorStructure ul {
  float: left;
  width: calc(100% / 3);
  margin-top: 20px; }
  .interiorStructure ul li {
    float: left;
    width: 90%;
    margin-bottom: 20px; }
    .interiorStructure ul li div.img {
      position: relative;
      float: left;
      width: 100%;
      height: 230px;
      margin-bottom: 10px;
      overflow: hidden;
      -webkit-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
      -moz-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
      box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29); }
      .interiorStructure ul li div.img span {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 15px 0;
        background: #34495e;
        color: #fff;
        font-weight: 700;
        text-align: center; }
      .interiorStructure ul li div.img img {
        width: 100%; }
    .interiorStructure ul li .half {
      float: left;
      width: 100%; }
      .interiorStructure ul li .half .tab {
        position: relative;
        margin-bottom: 2px;
        width: 100%;
        color: #000;
        overflow: hidden;
        /* :checked */
        /* Icon */ }
        .interiorStructure ul li .half .tab input {
          position: absolute;
          opacity: 0;
          z-index: -1; }
        .interiorStructure ul li .half .tab label {
          position: relative;
          display: block;
          padding: 0 0 0 1em;
          background: #e5e5e5;
          font-weight: 600;
          line-height: 3;
          cursor: pointer;
          font-size: 12px;
          -webkit-transition: all 0.4s;
          transition: all 0.4s; }
        .interiorStructure ul li .half .tab .tab-content {
          display: none;
          overflow: hidden;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          line-height: 22px; }
        .interiorStructure ul li .half .tab .tab-content p {
          margin: 1em; }
        .interiorStructure ul li .half .tab input:checked ~ .tab-content {
          display: block; }
        .interiorStructure ul li .half .tab input:checked ~ label {
          background: #000;
          color: #fff; }
        .interiorStructure ul li .half .tab label::after {
          position: absolute;
          right: 10px;
          top: -5px;
          display: block;
          line-height: 3;
          font-size: 16px;
          text-align: center;
          -webkit-transition: all .35s;
          -o-transition: all .35s;
          transition: all .35s; }
        .interiorStructure ul li .half .tab input[type=checkbox] + label::after {
          content: "+"; }
        .interiorStructure ul li .half .tab input[type=radio] + label::after {
          content: "-"; }
        .interiorStructure ul li .half .tab input[type=checkbox]:checked + label::after {
          transform: rotate(315deg); }
        .interiorStructure ul li .half .tab input[type=radio]:checked + label::after {
          transform: rotateX(180deg); }

.technicalOptions .half {
  float: left;
  width: 100%;
  margin-top: 20px; }
  .technicalOptions .half .tab {
    position: relative;
    margin-bottom: 5px;
    width: 100%;
    color: #000;
    overflow: hidden;
    /* :checked */
    /* Icon */ }
    .technicalOptions .half .tab input {
      position: absolute;
      opacity: 0;
      z-index: -1; }
    .technicalOptions .half .tab label {
      position: relative;
      display: block;
      padding: 0 20px;
      background: #e5e5e5;
      line-height: 3;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      -webkit-transition: all 0.4s;
      transition: all 0.4s; }
    .technicalOptions .half .tab .tab-content {
      display: none;
      overflow: hidden;
      line-height: 22px; }
      .technicalOptions .half .tab .tab-content img {
        float: left;
        margin: 10px 10px 10px 0; }
    .technicalOptions .half .tab .tab-content p {
      margin: 1em; }
    .technicalOptions .half .tab input:checked ~ .tab-content {
      display: block; }
    .technicalOptions .half .tab input:checked ~ label {
      background: #34495e;
      color: #fff; }
    .technicalOptions .half .tab label::after {
      position: absolute;
      right: 10px;
      top: -13px;
      display: block;
      line-height: 3;
      font-size: 24px;
      text-align: center;
      -webkit-transition: all .35s;
      -o-transition: all .35s;
      transition: all .35s; }
    .technicalOptions .half .tab input[type=checkbox] + label::after {
      content: "+"; }
    .technicalOptions .half .tab input[type=radio] + label::after {
      content: "-"; }
    .technicalOptions .half .tab input[type=checkbox]:checked + label::after {
      transform: rotate(315deg); }
    .technicalOptions .half .tab input[type=radio]:checked + label::after {
      transform: rotateX(180deg); }

.floorPlan {
  text-align: center; }
  .floorPlan div.img {
    float: left;
    width: 100%; }
    .floorPlan div.img img {
      max-width: 1200px;
      width: 100%; }
  .floorPlan div.brut {
    float: left;
    width: 100%;
    margin: 20px 0;
    text-align: center; }
    .floorPlan div.brut span {
      float: left;
      width: 180px;
      margin-left: calc(50% - 90px);
      border: 4px solid #303030;
      color: #000;
      font-size: 20px;
      font-weight: 900;
      padding: 20px 0;
      background: transparent;
      -webkit-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
      -moz-box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29);
      box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.29); }

.contactleft {
  float: left;
  width: 42%; }

.contactleft ul li {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 5px; }

.contactleft ul li span {
  float: left;
  margin-right: 5px;
  width: 100px;
  font-weight: 700; }

.contactleft p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 10px; }

.contactright {
  float: right;
  width: 55%; }

#contact {
  float: right;
  padding: 20px;
  border: 5px solid #efefef; }
  #contact h2 {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px; }
    #contact h2::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      height: 4px;
      width: 40px;
      background: #303030; }
  #contact div.col1 {
    float: left;
    width: 100%; }
  #contact div.col2 {
    float: left;
    width: 100%; }

#contact input, #contact textarea {
  float: left;
  width: calc(100% - 24px);
  padding: 10px;
  border: 2px solid #303030;
  margin-top: 10px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif; }
  #contact input::placeholder, #contact textarea::placeholder {
    font-weight: 600; }

#contact button {
  float: left;
  Width: 100%;
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #34495e;
  border: none;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }
  #contact button:hover {
    background: #303030; }

.contactmap {
  width: 100%;
  height: 400px;
  margin-top: 20px; }

.projects {
  float: left;
  width: 100%;
  list-style: none; }
  .projects li {
    position: relative;
    float: left;
    width: 47.5%;
    height: 300px;
    margin-right: 2.5%;
    margin-top: 2.5%;
    overflow: hidden;
    background: #000;
    color: #fff; }
    .projects li:hover {
      background: #34495e; }
    .projects li a {
      color: #fff; }
    .projects li img {
      width: 100%;
      opacity: 0.5; }
    .projects li div.text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: calc(100% - 40px);
      padding: 20px; }
      .projects li div.text h2 {
        position: relative;
        font-weight: 700;
        font-size: 18px; }
        .projects li div.text h2::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -10px;
          height: 4px;
          width: 40px;
          background: #303030; }
      .projects li div.text span.line {
        float: left;
        width: 20%;
        background: #fff;
        height: 4px; }
      .projects li div.text p {
        margin-top: 20px; }

#bilgiformu {
  display: none; }
  #bilgiformu .fancybox-close-small {
    background: #303030; }
    #bilgiformu .fancybox-close-small::after {
      color: #fff;
      border-radius: 0;
      background: none; }
      #bilgiformu .fancybox-close-small::after:hover {
        background: none; }
    #bilgiformu .fancybox-close-small:hover {
      background: #000; }
  #bilgiformu form {
    float: right;
    padding: 20px;
    width: 330px; }
    #bilgiformu form h2 {
      position: relative;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 20px; }
      #bilgiformu form h2::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        height: 4px;
        width: 40px;
        background: #303030; }
    #bilgiformu form input[type=text], #bilgiformu form input[type=email] {
      float: left;
      width: calc(100% - 24px);
      padding: 10px;
      border: 2px solid #303030;
      margin-top: 10px;
      font-weight: 400;
      font-family: "Montserrat", sans-serif; }
      #bilgiformu form input[type=text]::placeholder, #bilgiformu form input[type=email]::placeholder {
        font-weight: 600; }
    #bilgiformu form .checkbox {
      float: left;
      width: 100%;
      margin-top: 10px; }
      #bilgiformu form .checkbox input[type="checkbox"] {
        display: none; }
        #bilgiformu form .checkbox input[type="checkbox"] + label {
          color: #000; }
          #bilgiformu form .checkbox input[type="checkbox"] + label span {
            display: inline-block;
            width: 25px;
            height: 22px;
            margin: 0 5px 0 0;
            vertical-align: middle;
            background: url("/assets/img/checkbox.png") top center no-repeat;
            cursor: pointer; }
        #bilgiformu form .checkbox input[type="checkbox"]:checked + label span {
          background: url("/assets/img/checkboxon.png") top center no-repeat; }
    #bilgiformu form button {
      float: left;
      Width: 100%;
      padding: 10px 0;
      text-align: center;
      font-weight: 700;
      color: #000;
      background: #303030;
      border: none;
      font-size: 14px;
      margin-top: 10px;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      transition: all 0.2s; }
      #bilgiformu form button:hover {
        background: #000;
        color: #303030; }

.error {
  display: inherit;
  color: #c0392b;
  font-size: 12px;
  margin-top: 5px; }

.formResult {
  display: none; }

.contactResult {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #34bfa3;
  padding: 10px; }

.subNews {
  float: left;
  width: 100%; }
  .subNews > li {
    float: left;
    width: 50%;
    margin-bottom: 20px; }
    .subNews > li a {
      float: left;
      color: #000; }
      .subNews > li a .newsImage {
        float: left;
        width: 255px;
        height: 255px; }
        .subNews > li a .newsImage img {
          height: 255px; }
      .subNews > li a .newsContent {
        float: left;
        width: 300px;
        margin-left: 20px;
        margin-top: 40px; }
        .subNews > li a .newsContent span.line {
          float: left;
          display: inherit;
          width: 75px;
          height: 4px;
          background: #34495e;
          margin-bottom: 10px; }
        .subNews > li a .newsContent h4 {
          float: left;
          width: 100%;
          display: inherit;
          font-size: 18px;
          font-weight: 600;
          margin-top: 10px;
          line-height: 24px; }
        .subNews > li a .newsContent p {
          float: left;
          display: inherit;
          margin-top: 10px;
          line-height: 18px; }

.newsImage {
  float: left;
  margin-right: 10px;
  margin-bottom: 20px; }

.mobileMenu {
  display: none; }

.sectorhead {
  position: relative;
  float: left;
  width: 100%;
  height: 255px;
  overflow: hidden; }
  .sectorhead img {
    float: right; }
  .sectorhead ul {
    position: absolute;
    left: 5%;
    bottom: 20px; }
    .sectorhead ul li {
      float: left;
      padding: 20px;
      background: #34495e;
      font-size: 16px;
      font-weight: 700;
      margin-right: 10px;
      color: #fff; }
      .sectorhead ul li span {
        font-weight: 200; }
@media only screen and (max-width: 1300px) {

  header {
    top: 0;
    background: #fff;
    padding: 20px 0; }
    header h1#logo {
      float: left;
      width: 142px;
      height: 80px;
      text-indent: -999999px;
      background: url("/assets/img/logo_mobil.png") no-repeat top center; }
    header .headerRight {
      display: none; }
    header .mobileMenu {
      display: block;
      float: right;
      text-align: center;
      width: 50px;
      padding: 10px 0;
      color: #34495e;
      background: none;
      font-size: 24px;
      border: 1px solid #34495e;
      margin-top: 40px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%; }

}
@media only screen (max-width: 1024px) {
  header h1#logo {
    float: left;
    width: 200px;
    height: 113px;
    text-indent: -999999px;
    background: url("/assets/img/logo2.png") no-repeat top center; }

  .homeAbout .right ul.companyInfo > li p {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-weight: 900;
    font-size: 24px; }
    .homeAbout .right ul.companyInfo > li p span {
      display: inherit;
      font-size: 14px;
      font-weight: 600; } }

@media only screen and (max-width: 1023px) {
  .sectors {
    height: auto; }
    .sectors li {
      width: 100% !important;
      height: 300px; }
    .sectors li img{
      width: 100%;}
      .sectors li h1 {
        bottom: 95px;
      }

  header {
    top: 0;
    background: #fff;
    padding: 20px 0; }
    header h1#logo {
      float: left;
      width: 142px;
      height: 80px;
      text-indent: -999999px;
      background: url("/assets/img/logo_mobil.png") no-repeat top center; }
    header .headerRight {
      display: none; }
    header .mobileMenu {
      display: block;
      float: right;
      text-align: center;
      width: 50px;
      padding: 10px 0;
      color: #34495e;
      background: none;
      font-size: 24px;
      border: 1px solid #34495e;
      margin-top: 40px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%; }

  .homeAbout {
    position: relative; }
    .homeAbout .left {
      float: left;
      width: calc(100% - 10%);
      padding: 5%;
      height: auto; }
      .homeAbout .left h3 {
        font-size: 36px;
        font-weight: 700; }
      .homeAbout .left h4 {
        font-size: 24px;
        font-weight: 300; }
      .homeAbout .left p {
        width: 100%;
        margin-top: 20px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 30px; }
      .homeAbout .left a {
        float: left;
        width: 200px;
        padding: 10px 20px;
        font-weight: 700; }
        .homeAbout .left a i {
          float: right; }
    .homeAbout .right {
      float: right;
      width: calc(100% - 10%);
      padding: 5%;
      background: #d9d9d9; }
      .homeAbout .right ul.companyInfo {
        float: left;
        width: calc(100% - 10%);
        padding: 5%;
        background: #fff;
        -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.19); }
        .homeAbout .right ul.companyInfo > li {
          position: relative;
          float: left;
          width: calc(50% - 1px);
          height: 180px;
          border-bottom: 1px solid #d8d8d8;
          border-right: 1px solid #d8d8d8;
          -webkit-transition: all 0.2s;
          transition: all 0.2s; }
          .homeAbout .right ul.companyInfo > li p {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: #000;
            font-weight: 900;
            font-size: 48px; }
            .homeAbout .right ul.companyInfo > li p span {
              display: inherit;
              font-size: 14px;
              font-weight: 600; }

  footer {
    float: left;
    width: 100%; }
    footer .left {
      float: left;
      width: calc(100% - 10%);
      height: auto;
      padding: 5%; }
    footer .right {
      float: right;
      width: calc(100% - 10%);
      height: auto;
      padding: 5%;
      background: #384e64; }
      footer .right span.line {
        float: left;
        width: 20%;
        height: 4px; }
      footer .right h5 {
        float: left;
        width: 100%;
        font-size: 24px;
        font-weight: 700;
        margin-top: 10px; }
      footer .right p {
        float: left;
        width: 100%;
        margin-top: 5px;
        font-size: 14px;
        line-height: 18px; }
      footer .right form {
        position: relative;
        float: left;
        width: 100%; }
        footer .right form input {
          float: left;
          width: calc(100% - 24px);
          padding: 10px;
          color: #fff;
          margin-top: 10px;
          background: none; }
        footer .right form button {
          position: absolute;
          top: 17px;
          right: 5px;
          color: #fff;
          background: none;
          border: none;
          font-size: 24px; }
    footer .copyright {
      float: left;
      Width: 100%;
      padding: 20px 0;
      font-size: 12px; }
      footer .copyright p {
        float: left; }
      footer .copyright a {
        float: right; }

  .projects li {
    position: relative;
    float: left;
    width: 100%;
    height: 200px;
    margin-right: 2.5%;
    margin-top: 2.5%;
    overflow: hidden;
    background: #000;
    color: #fff; }
    .projects li:hover {
      background: #34495e; }
    .projects li a {
      color: #fff; }
    .projects li img {
      width: 100%;
      opacity: 0.5; }
    .projects li div.text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: calc(100% - 40px);
      padding: 20px; }
      .projects li div.text h2 {
        position: relative;
        font-weight: 700;
        font-size: 18px; }
        .projects li div.text h2::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -10px;
          height: 4px;
          width: 40px;
          background: #303030; }
      .projects li div.text span.line {
        float: left;
        width: 20%;
        background: #fff;
        height: 4px; }
      .projects li div.text p {
        margin-top: 20px; }

  .subpage {
    min-height: auto; }

  .contactleft {
    width: 100%; }

  .contactright {
    width: 100%; }

  #bilgiformu form {
    width: 280px; }

  .projectHeadNav {
    position: relative !important;
    float: left;
    Width: 100%;
    z-index: 12; }
    .projectHeadNav div.center {
      width: 100%; }
    .projectHeadNav nav {
      float: left;
      width: 100%;
      background: #34495e; }
      .projectHeadNav nav ul {
        float: left;
        width: 100%; }
        .projectHeadNav nav ul li {
          float: left;
          width: 100%; }
          .projectHeadNav nav ul li a {
            position: relative;
            float: left;
            width: 100%;
            padding: 20px 0;
            color: #fff;
            font-weight: 700;
            text-align: center; }
            .projectHeadNav nav ul li a.active, .projectHeadNav nav ul li a:hover {
              background: #000; }
              .projectHeadNav nav ul li a.active:before, .projectHeadNav nav ul li a:hover:before {
                display: none; }
      .projectHeadNav nav a.catalog {
        width: 100%;
        float: left;
        background: #303030;
        color: #000;
        padding: 20px 0;
        font-size: 13px;
        font-weight: 700;
        text-align: center; }
        .projectHeadNav nav a.catalog i {
          float: none;
          margin: 15px 0 14.5px 0;
          font-size: 24px; }
        .projectHeadNav nav a.catalog span {
          float: none;
          margin-top: 20px;
          margin-left: 5px; }

  .projectData .generalInformation .left {
    width: 100%; }
  .projectData .generalInformation .right {
    width: 100%; }
    .projectData .generalInformation .right form {
      width: calc(100% - 40px); }
  .projectData .interiorStructure ul {
    width: 100%; }
    .projectData .interiorStructure ul li {
      width: 100%; }
  .projectData .technicalOptions .half .tab .tab-content img {
    width: 100%; }

  #homeNews ul > li {
    width: 100%; }

  #homeNews ul > li a .newsImage img {
    height: auto;
    width: 100%; }

  #homeNews ul > li a .newsContent {
    width: 100%;
    margin: 0;
    margin-bottom: 20px; }

  #homeNews ul > li a .newsImage {
    width: 100%;
    height: auto; }

  .homeAbout .right ul.companyInfo > li {
    width: 100%;
    border: none;
    border-bottom: 1px solid #d8d8d8; }
    .homeAbout .right ul.companyInfo > li:last-child {
      border: none; }

  .subNews > li {
    width: 100%; }

  .subNews > li a .newsImage img {
    height: auto;
    width: 100%; }

  .subNews > li a .newsContent {
    width: 100%;
    margin: 0;
    margin-bottom: 20px; }

  .subNews > li a .newsImage {
    width: 100%;
    height: auto; }

  #slides {
    min-height: 500px !important; }
    #slides img {
      height: 100% !important;
      top: 0 !important; }

  .slides-navigation {
    display: none; } }
@media only screen and (max-width: 480px) {
  .projectData .generalInformation .left ul li {
    width: 100%;
    margin: 0; }

  footer .left a.flogo {
    width: 100%;
    text-align: center; }

  footer .left ul.footerDetail {
    width: 100%;
    margin: 0; }

  .projectHead .img img {
    height: 100%;
    width: auto; }

  .projectHead .content {
    margin-top: 150px; }

  .projectHead .content h3 {
    font-size: 24px; }

  .slides-navigation {
    display: none; } }
/* Menu Appearance */
.pushy {
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: #191918;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */ }
  .pushy li:last-child > a {
    border: none; }

.pushy a {
  display: block;
  color: #b3b3b1;
  padding: 15px 30px;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  border-bottom: 1px solid #117bbb; }

.pushy a:hover {
  color: #FFF; }

.pushy ul:first-child {
  margin-top: 10px; }

.pushy.pushy-left {
  left: 0; }

.pushy.pushy-right {
  right: 0; }

.pushy-content {
  position: relative;
  visibility: hidden; }

/* Menu Movement */
.pushy-left {
  -webkit-transform: translate3d(-200px, 0, 0);
  -ms-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0); }

.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(200px, 0, 0);
  -ms-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0); }

.pushy-right {
  -webkit-transform: translate3d(200px, 0, 0);
  -ms-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0); }

.pushy-open-right #container,
.pushy-open-right .push {
  -webkit-transform: translate3d(-200px, 0, 0);
  -ms-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0); }

.pushy-open-left .pushy,
.pushy-open-right .pushy {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {
  visibility: visible; }

/* Menu Transitions */
#container,
.pushy,
.push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

.pushy-content {
  transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

/* Site Overlay */
.site-overlay {
  display: none; }

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms; }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*! Pushy - v1.1.0 - 2017-1-30
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
/* Menu Appearance */
.pushy {
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: #34495e;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */ }
  .pushy a {
    display: block;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none; }
  .pushy a:hover {
    color: #FFF; }
  .pushy ul:first-child {
    margin-top: 10px; }
  .pushy.pushy-left {
    left: 0; }
  .pushy.pushy-right {
    right: 0; }

.pushy-content {
  visibility: hidden; }

/* Menu Movement */
.pushy-left {
  -webkit-transform: translate3d(-200px, 0, 0);
  -ms-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0); }

.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(200px, 0, 0);
  -ms-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0); }

.pushy-right {
  -webkit-transform: translate3d(200px, 0, 0);
  -ms-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0); }

.pushy-open-right #container,
.pushy-open-right .push {
  -webkit-transform: translate3d(-200px, 0, 0);
  -ms-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0); }

.pushy-open-left .pushy,
.pushy-open-right .pushy {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {
  visibility: visible; }

/* Menu Transitions */
#container,
.pushy,
.push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

.pushy-content {
  transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

/* Site Overlay */
.site-overlay {
  display: none; }

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms; }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* Submenu Appearance */
.pushy-submenu {
  /* Submenu Buttons */
  /* Submenu Icon */ }
  .pushy-submenu ul {
    padding-left: 15px;
    transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out; }
    .pushy-submenu ul .pushy-link {
      transition: opacity 0.2s ease-in-out; }
  .pushy-submenu button {
    width: 100%;
    color: #b3b3b1;
    padding: 15px 30px;
    text-align: left;
    background: transparent;
    border: 0; }
    .pushy-submenu button:hover {
      color: #FFF; }
  .pushy-submenu > a,
  .pushy-submenu > button {
    position: relative; }
  .pushy-submenu > a::after,
  .pushy-submenu > button::after {
    content: '';
    display: block;
    height: 11px;
    width: 8px;
    position: absolute;
    top: 50%;
    right: 15px;
    background: url("../img/arrow.svg") no-repeat;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: transform 0.2s; }

/* Submenu Movement */
.pushy-submenu-closed ul {
  max-height: 0;
  overflow: hidden;
  visibility: hidden; }
.pushy-submenu-closed .pushy-link {
  opacity: 0; }

.pushy-submenu-open {
  /* Submenu Icon */ }
  .pushy-submenu-open ul {
    max-height: 1000px;
    visibility: visible; }
  .pushy-submenu-open .pushy-link {
    opacity: 1; }
  .pushy-submenu-open a::after,
  .pushy-submenu-open button::after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg); }

.pushy ul.socials {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0; }
  .pushy ul.socials li {
    float: left;
    width: 33%; }
    .pushy ul.socials li:nth-child(1) {
      background: #3b5998; }
    .pushy ul.socials li:nth-child(2) {
      background: #00aced; }
    .pushy ul.socials li:nth-child(3) {
      background: #517fa4; }
    .pushy ul.socials li a {
      padding: 15px 0 !important; }


@media only screen and (max-width: 840px) {
    header a#logo {
    	width: 200px;
    }
}