css-js

css/style.css

@@ -0,0 +1,1171 @@
+@import url("https://use.typekit.net/eqx0vrw.css");
+
+
+.trajan {
+	font-family: trajan-pro-3, serif;
+	font-style: normal;
+	font-weight: 400;
+}
+.trajan.small {
+	font-variant: small-caps;
+}
+.trajan-semibold {
+	font-family: trajan-pro-3, serif;
+	font-style: normal;
+	font-weight: 600;
+}
+img.drop {
+	padding:10px;
+	margin: 0 0 10px;
+	background:#eee;
+}
+img.wrap-left {
+	padding:10px;
+	margin: 0 10px 10px 0;
+	background:#eee;
+}
+.section {
+	margin: 0 0 50px;
+}
+/* =========== 1. Reset CSS  =========== */
+img,
+legend {
+  border: 0;
+}
+legend,
+td,
+th {
+  padding: 0;
+}
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  color: #ababab;
+  background-color: transparent;
+}
+a:hover,
+a:active {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+optgroup,
+strong {
+  font-weight: 700;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: .67em 0;
+}
+mark {
+  background: #ffffff;
+  color: #333333;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+pre,
+textarea {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type=button],
+input[type=reset],
+input[type=submit] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  border-radius: 0;
+  line-height: normal;
+}
+input[type=checkbox],
+input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type=search] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+fieldset {
+  border: 1px solid #333333;
+  margin: 0 2px;
+  padding: .35em .625em .75em;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a,
+input,
+textarea,
+button,
+select {
+  outline: none;
+}
+a:hover,
+a:focus,
+input:focus,
+textarea:focus,
+button:focus,
+select:focus {
+  outline: none !important;
+  text-decoration: none;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+:after,
+:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #ababab;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #ababab;
+}
+/* =========== 2. Typography  =========== */
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: Helvetica, Sans-Serif;
+  color: #777;
+  font-weight: 400;
+  line-height: 1.2em;
+  margin-bottom: 20px;
+  margin-top: 0;
+}
+h1 > a,
+.h1 > a,
+h2 > a,
+.h2 > a,
+h3 > a,
+.h3 > a,
+h4 > a,
+.h4 > a,
+h5 > a,
+.h5 > a,
+h6 > a,
+.h6 > a {
+  color: inherit;
+}
+h1,
+.h1 {
+  font-size: 36px;
+}
+h2,
+.h2 {
+  font-size: 30px;
+}
+h3,
+.h3 {
+  font-size: 26px;
+}
+h4,
+.h4 {
+  font-size: 22px;
+}
+h5,
+.h5 {
+  font-size: 18px;
+}
+h6,
+.h6 {
+  font-size: 14px;
+}
+a {
+  color: #ababab;
+  text-decoration: none;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+a:hover {
+  color: #000000 !important;
+}
+.quicklinks a:hover,
+.quicklinks a:active,
+.quicklinks a:focus {
+  color: #00b9eb !important;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: 'Lato', serif;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+}
+code {
+  background-color: #eee;
+  letter-spacing: 0.015em;
+}
+abbr {
+  background-color: #A1D71A;
+  color: #111;
+  border-width: 2px;
+}
+mark,
+.mark {
+  color: #ffffff;
+  background-color: #a4b4c4;
+}
+dfn {
+  border-bottom: 1px dashed;
+}
+cite {
+  font-style: normal;
+}
+blockquote {
+  position: relative;
+  border: 0;
+  padding: 0 0 0 40px;
+  margin: 20px 0;
+  font-style: italic;
+  overflow: hidden;
+  font-size: 13px;
+}
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+blockquote:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: '\f10d';
+  font-family: 'FontAwesome';
+  display: inline-block;
+  color: #ababab;
+  font-size: 24px;
+}
+blockquote footer,
+blockquote cite {
+  font-size: 12px;
+  color: #333333;
+  font-weight: 700;
+}
+blockquote footer:before,
+blockquote cite:before {
+  content: '- ';
+  color: #333333;
+}
+blockquote footer:after,
+blockquote cite:after {
+  content: ' ';
+  color: #333333;
+}
+pre {
+  line-height: 1.8em;
+  padding: 15px;
+  border: 1px solid #E4E4E4;
+  font-style: italic;
+  overflow: auto;
+  white-space: pre-wrap;
+  background-color: #f7f7f7;
+  word-wrap: break-word;
+  max-width: 100%;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border: 0;
+}
+input[type="search"],
+input[type="text"],
+input[type="url"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="file"],
+select,
+textarea {
+  height: 36px;
+  width: 100%;
+  border: 1px solid #ababab;
+  padding: 0 10px;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+}
+::-moz-selection {
+  color: #f7f7f7;
+  background-color: #222222;
+}
+::selection {
+  color: #f7f7f7;
+  background-color: #222222;
+}
+iframe {
+  border: 0;
+  max-width: 100%;
+}
+/* ===========  3. General  =========== */
+body {
+  margin: 0;
+  padding: 100px 0 0;
+  font-family: Helvetica, Sans-Serif;
+  font-size: 14px;
+  background: #fff;
+  color: #777;
+  overflow-x: hidden;
+  line-height: 24px;
+  word-spacing: 1px;
+}
+.container {
+  max-width: 1000px;
+}
+.mobile {
+  display: none;
+  margin-bottom: 60px;
+}
+.mobile .menu-mobile {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  position: fixed;
+  z-index: 999;
+}
+.mobile .menu-mobile .item {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background-color: #000000;
+  position: relative;
+}
+.mobile .menu-mobile .item-1 {
+  top: 23px;
+}
+.mobile .menu-mobile .item-2 {
+  top: 29px;
+}
+.mobile .menu-mobile .item-3 {
+  top: 35px;
+}
+.mobile .logo {
+  padding-bottom: 0;
+  padding-top: 10px;
+  text-align: center;
+}
+.hide-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 998;
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
+  -moz-transition: visibility 0.3s ease, opacity 0.3s ease;
+  -ms-transition: visibility 0.3s ease, opacity 0.3s ease;
+  -o-transition: visibility 0.3s ease, opacity 0.3s ease;
+  transition: visibility 0.3s ease, opacity 0.3s ease;
+}
+/* ===========  4. Header  =========== */
+.header {
+  width: 220px;
+  bottom: 0;
+  top: 100px;
+  text-align: right;
+  z-index: 9;
+  position:sticky;
+}
+.header-text {
+  margin-bottom: 50px;
+}
+.header-text blockquote {
+  font-size: 16px;
+  padding-left: 50px;
+}
+.header-text blockquote:before {
+  font-size: 30px;
+}
+.menu-left .header {
+  text-align: left;
+}
+.menu-left .main-menu .sub-menu {
+  padding-left: 0;
+  padding-right: 20px;
+  right: 100%;
+  left: auto;
+  text-align: right;
+}
+
+.table-cell {
+  display: table-cell;
+  vertical-align: middle;
+}
+.main-menu {
+  font-family: Helvetica, Sans-Serif;
+  letter-spacing: 1px;
+  font-size: 18px;
+  line-height: 24px;
+}
+.main-menu ul,
+.main-menu li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.main-menu .menu-list > li > a {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  display: block;
+}
+.main-menu .active a {
+  color: #000000;
+}
+.main-menu li {
+  position: relative;
+}
+.main-menu li:hover > .sub-menu {
+  opacity: 1;
+  visibility: visible;
+}
+.main-menu .sub-menu {
+  position: absolute;
+  width: 200px;
+  top: 0;
+  left: 100%;
+  font-size: 14px;
+  text-align: left;
+  visibility: hidden;
+  padding-left: 20px;
+  opacity: 0;
+}
+.main-menu .sub-menu li {
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: #ababab;
+}
+.main-menu .sub-menu li:first-child {
+  padding-top: 10px;
+}
+.main-menu .sub-menu li:last-child {
+  padding-bottom: 10px;
+}
+.main-menu .sub-menu a {
+  color: #000000 !important;
+}
+.logo {
+  font-size: 40px;
+  color: #000000;
+  text-transform: uppercase;
+  padding-bottom: 10px;
+  letter-spacing: 2px;
+  line-height: 40px;
+}
+.logo a {
+  color: inherit;
+}
+.socials {
+  padding-top: 50px;
+}
+.socials a {
+  margin-right: 8px;
+  font-size: 14px;
+}
+.socials .fa-search {
+  color: #000000;
+}
+.box-search {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-color: #ffffff;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
+  -moz-transition: opacity 0.3s ease, visibility 0.3s ease;
+  -ms-transition: opacity 0.3s ease, visibility 0.3s ease;
+  -o-transition: opacity 0.3s ease, visibility 0.3s ease;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.box-search input[type="search"] {
+  height: 50px;
+  font-size: 24px;
+  padding-top: 0;
+  border: none;
+  border-bottom: 1px solid #000000;
+}
+.box-search.active {
+  opacity: 1;
+  visibility: visible;
+}
+.search-form {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+  position: relative;
+  padding-bottom: 200px;
+  padding-top: 100px;
+}
+.kd-close {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  font-size: 24px;
+  color: #000000;
+  background-color: #ffffff;
+  line-height: 48px;
+  text-align: center;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+.kd-close:before {
+  content: '';
+  width: 30px;
+  height: 2px;
+  background-color: #000000;
+  display: block;
+  -webkit-transform: rotate(44deg) translate(26px, 10px);
+  -moz-transform: rotate(44deg) translate(26px, 10px);
+  transform: rotate(44deg) translate(26px, 10px);
+}
+.kd-close:after {
+  content: '';
+  width: 30px;
+  height: 2px;
+  background-color: #000000;
+  display: block;
+  -webkit-transform: rotate(-46deg) translate(-10px, 24px);
+  -moz-transform: rotate(-46deg) translate(-10px, 24px);
+  transform: rotate(-46deg) translate(-10px, 24px);
+}
+.copyright {
+  font-size: 12px;
+  color: #ababab;
+}
+/* ===========  5. Projects  =========== */
+.projects {
+  padding-left: 80px;
+  padding-right: 50px;
+}
+.project-item {
+  position: relative;
+  margin-bottom: 40px;
+}
+.project-item:last-child {
+  margin-bottom: 0;
+}
+.project-item .title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  opacity: 0;
+  visibility: hidden;
+}
+.project-item .title a {
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 14px;
+  display: inline-block;
+  line-height: 24px;
+  padding-left: 10px;
+  padding-right: 10px;
+  opacity: 1;
+  letter-spacing: 1px;
+}
+.project-item .title a:hover {
+  color: #ffffff !important;
+  opacity: 0.7;
+}
+.project-item:hover .title {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  -moz-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  -ms-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  -o-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+}
+.pagination-wrap {
+  margin-top: 60px;
+  font-family: 'Roboto', serif;
+}
+.pagination-wrap ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+.pagination-wrap ul:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.pagination-wrap ul span {
+  display: block;
+}
+.pagination-wrap ul li {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 18px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.pagination-wrap ul li .current {
+  color: #000000;
+}
+.navigation-wrap {
+  margin-top: 50px;
+  text-align: center;
+}
+.navigation-wrap:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+.navigation-wrap a {
+  display: inline-block;
+  width: 50px;
+  height: 40px;
+  line-height: 40px;
+  margin-right: 10px;
+  background-color: #cccccc;
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease;
+  -moz-transition: opacity 0.3s ease;
+  -ms-transition: opacity 0.3s ease;
+  -o-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
+.navigation-wrap a:last-child {
+  margin-right: 0;
+}
+.navigation-wrap a:hover {
+  opacity: 0.8;
+}
+.project .detail-content {
+  padding: 50px;
+  background-color: #eeeeee;
+}
+.project .title {
+  color: #000000;
+  margin-bottom: 30px;
+}
+.project a {
+  color: #000000 !important;
+  font-weight: 700;
+}
+.project .project-attributes {
+  margin-top: 20px;
+  font-size: 12px;
+}
+.project .project-attributes .socials {
+  padding-top: 0;
+}
+.project table {
+  width: 100%;
+}
+.project .name {
+  font-weight: 700;
+  width: 30%;
+  text-align: left;
+  padding-bottom: 10px;
+}
+.project .value {
+  font-style: italic;
+  width: 70%;
+  padding-bottom: 10px;
+}
+.project .images-project {
+  margin-top: 50px;
+}
+.project .popup img {
+  margin-bottom: 30px;
+}
+.project .popup:last-child img {
+  margin-bottom: 0;
+}
+/* ===========  6. Posts  =========== */
+.post {
+  margin-bottom: 40px;
+}
+.post:last-child {
+  margin-bottom: 0;
+}
+.post .post-content {
+  background-color: #eeeeee;
+  padding: 50px 50px 40px;
+}
+.title {
+  margin-top: 0;
+  margin-bottom: 5px;
+  line-height: 24px;
+  color: #000000;
+  font-size: 24px;
+  letter-spacing: 1px;
+}
+.post-details {
+  font-style: italic;
+  font-size: 12px;
+}
+.post-details a {
+  display: inline-block;
+}
+.post-details a:after {
+  content: '//';
+  margin-left: 5px;
+  margin-right: 5px;
+}
+.post-details a:last-child:after {
+  content: normal;
+}
+.the-content {
+  margin-top: 20px;
+}
+.the-content p:last-child {
+  margin-bottom: 0;
+}
+.the-content ul,
+.the-content ol {
+  font-size: 13px;
+  font-style: italic;
+  padding-left: 20px;
+}
+.the-content ul li,
+.the-content ol li {
+  margin-bottom: 5px;
+}
+.the-content ul > li:last-child,
+.the-content ol > li:last-child {
+  margin-bottom: 0;
+}
+.post-footer {
+  margin-top: 30px;
+}
+.cat strong {
+  margin-right: 5px;
+}
+.cat a {
+  color: #000000;
+}
+.cat a:after {
+  content: ',';
+  margin-right: 5px;
+}
+.cat a:last-child:after {
+  content: normal;
+}
+.post-tags a {
+  opacity: 1;
+  display: inline-block;
+  color: #000000;
+}
+.post-tags a:before {
+  margin-left: 5px;
+  content: '#';
+}
+.post-tags a:first-child:before {
+  margin-left: 0;
+}
+.post-tags a:hover {
+  opacity: 0.8;
+}
+.post-share {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 30px;
+}
+.post-share a {
+  color: #000000;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+.the-excerpt {
+  margin-top: 20px;
+}
+.contact-item {
+  margin-bottom: 20px;
+}
+.contact-item:last-child {
+  margin-bottom: 0;
+}
+.contact-item textarea {
+  padding-top: 5px;
+  height: 100px;
+  resize: vertical;
+}
+.contact-item .submit {
+  display: inline-block;
+  min-width: 100px;
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: #000000;
+  color: #ffffff;
+  border: none;
+  height: 36px;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.post_404_not_found {
+  margin-top: 20px;
+}
+.go-to-home {
+  min-width: 100px;
+  padding: 5px 15px;
+  display: inline-block;
+  background-color: #000000;
+  color: #ffffff;
+  margin-top: 10px;
+}
+.go-to-home a {
+  color: inherit;
+  opacity: 1;
+}
+.go-to-home a:hover {
+  color: inherit !important;
+  opacity: 0.8;
+}
+/* ===========  7. Footer  =========== */
+.footer-inner {
+  margin-top: 80px;
+  border-top: 1px solid #ababab;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  margin-left: 80px;
+  margin-right: 50px;
+  font-size: 12px;
+}
+.footer-inner .title {
+  font-size: 14px;
+  font-weight: 700;
+}
+.footer-inner ul {
+  list-style: none;
+  font-size: 12px;
+  margin: 0;
+  padding: 0;
+}
+/* ===========  8. Preload  =========== */
+#preload {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  z-index: 9999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+#preload .kd-bounce {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 40px auto;
+}
+#preload .kd-bounce:before,
+#preload .kd-bounce:after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #242424;
+  opacity: 0.4;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: kd-bounce 2.4s infinite ease-in-out;
+}
+#preload .kd-bounce:after {
+  animation-delay: -1.2s;
+}
+@keyframes kd-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
+/* ===========  9. Responsive  =========== */
+@media screen and (max-width: 991px) {
+  .preload {
+    display: none;
+  }
+  .mobile {
+    display: block;
+  }
+  .header,
+  .menu-left .header {
+    left: 0;
+    width: 250px;
+    z-index: 9999;
+    background-color: #000000;
+    text-align: center;
+    -webkit-transform: translateX(-101%);
+    -moz-transform: translateX(-101%);
+    transform: translateX(-101%);
+    -webkit-transition: transform 0.3s ease;
+    -moz-transition: transform 0.3s ease;
+    -ms-transition: transform 0.3s ease;
+    -o-transition: transform 0.3s ease;
+    transition: transform 0.3s ease;
+  }
+  .header .logo,
+  .menu-left .header .logo {
+    color: #ffffff;
+  }
+  .header.active,
+  .menu-left .header.active {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    transform: translateX(0);
+  }
+  .main-menu,
+  .menu-left .main-menu {
+    max-height: 45%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .main-menu a:hover,
+  .menu-left .main-menu a:hover {
+    color: #ffffff !important;
+  }
+  .main-menu .active a,
+  .menu-left .main-menu .active a {
+    color: #ffffff;
+  }
+  .main-menu .sub-menu,
+  .menu-left .main-menu .sub-menu {
+    display: none;
+    position: relative;
+    width: 100%;
+    left: 0;
+    visibility: visible;
+    opacity: 1;
+    padding-left: 0;
+    text-align: center;
+  }
+  .main-menu .sub-menu li,
+  .menu-left .main-menu .sub-menu li,
+  .main-menu .sub-menu li:first-child,
+  .menu-left .main-menu .sub-menu li:first-child,
+  .main-menu .sub-menu li:last-child,
+  .menu-left .main-menu .sub-menu li:last-child {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+  .projects {
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  .footer-inner {
+    margin-left: 50px;
+    margin-right: 50px;
+  }
+  .socials a {
+    margin-right: 10px;
+  }
+  .socials .fa-search {
+    color: #ffffff;
+  }
+  .hide-menu.active {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+@media screen and (max-width: 768px) {
+  body {
+    padding-top: 30px;
+  }
+  .project-item {
+    margin-bottom: 30px;
+  }
+}
+@media screen and (max-width: 600px) {
+  .post .post-content {
+    padding: 20px;
+  }
+  .project .detail-content {
+    padding: 20px;
+  }
+  .project .images-project {
+    margin-top: 30px;
+  }
+  #comments .children {
+    padding-left: 0;
+  }
+}
+@media screen and (max-width: 480px) {
+  .projects {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .footer-inner {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .mobile {
+    margin-bottom: 50px;
+  }
+  .mobile .logo {
+    font-size: 30px;
+    padding-left: 20px;
+  }
+  .project-item {
+    margin-bottom: 20px;
+  }
+  .navigation-wrap {
+    margin-top: 30px;
+  }
+  .footer-inner {
+    margin-top: 50px;
+  }
+}

js/scripts.js

@@ -0,0 +1,77 @@
+'use strict';
+
+(function ($) {
+
+	$(document).ready(function () {
+
+		var $header = $('.header'),
+			$search = $('.fa-search', $header);
+
+		// 1. Search Popup
+		if ($search.length) {
+			var $boxSearch = $('.box-search', $header);
+
+			$search.on('click', function (event) {
+				event.preventDefault();
+				$boxSearch.addClass('active');
+				$('.search-field', $boxSearch).focus();
+			});
+
+			$('.kd-close', $boxSearch).on('click', function (event) {
+				event.preventDefault();
+				$boxSearch.removeClass('active');
+			});
+
+			$(document).on('keydown', function (event) {
+
+				if (event.keyCode === 27) {
+
+					$boxSearch.removeClass('active');
+				}
+			});
+
+		}
+
+
+		// 3. Menu Mobile
+		var $btnMenu = $('.menu-mobile'),
+			$hideMenu = $('.hide-menu');
+
+		$btnMenu.on('click', function () {
+			$header.toggleClass('active');
+
+			if ($header.hasClass('active')) {
+				$hideMenu.addClass('active');
+			}
+			else {
+				$hideMenu.removeClass('active');
+			}
+		});
+		$hideMenu.on('click', function () {
+			$header.removeClass('active');
+			$hideMenu.removeClass('active');
+		});
+
+		$('.menu-item-has-children', '.main-menu').on('click', ' > a', function (e) {
+			var ww = $(window).width();
+
+			if (ww <=991) {
+				var $parent = $(e.target).closest('.menu-item-has-children');
+				e.preventDefault();
+				$('>.sub-menu', $parent).slideToggle(400);
+			}
+		});
+
+
+		// 5. Preload
+
+		var $preload = $('#preload');
+
+		if ($preload.length) {
+			$(window).on('load', function () {
+				$preload.fadeOut(400);
+			});
+		}
+	});
+
+})(jQuery);