/*----------------------

  Ben - CSS 1.0
  By Themanoid

  Table of Contents

  00.  Header
  01.  About
  02.  Contact
  03.  Navigation
  04.  Work
  05.  Footer
  06.  Blog
  07.  Modules

-----------------------*/
/* 00. Header */
header {
  padding: 50px 0;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  header {
    padding: 30px 0 10px;
  }
  header .container {
    padding: 0;
    margin: 0;
    width: 100%;
  }
}

header a.brand img {
  max-height: 70px;
}

header a.brand img.white {
  display: none;
}

/* 01. About */
table.table tr td {
  border: 0;
  padding: 3px 0;
  line-height: 1.7;
  font-size: 1.1em;
  font-weight: 300;
  padding-right: 20px;
}

table.table tr td a {
  display: block;
}

/* 02. Contact */
form {
  margin: 15px;
}

form label {
  font-family: "Poppins", Verdana, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8em;
  margin-bottom: 10px;
}

form .form-control {
  padding: 15px;
  height: auto;
  background: #f5f5f5;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-bottom: 25px;
  font-size: 1.2em;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

@media screen and (max-width: 768px) {
  form .form-control {
    padding: 10px;
  }
}

form .form-control:focus {
  outline: none !important;
  box-shadow: inherit !important;
  background: #000;
  color: #fff;
}

form span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1em;
}

@media screen and (max-width: 768px) {
  form span.p-md {
    display: block;
    padding: 20px 0 !important;
  }
}

form textarea.form-control {
  height: 150px;
}

/* 03. Navigation */
ul.main-nav {
  list-style: none;
  margin: 25px -15px 0;
  padding: 0;
  text-align: center;
}

ul.main-nav li {
  display: inline-block;
  margin: 0 9px;
}

ul.main-nav li a {
  display: block;
  -webkit-transition: all .7s;
  transition: all .7s;
  color: #000;
  font-size: 1.15em;
  border-bottom: 1px solid transparent;
}

ul.main-nav li a:hover, ul.main-nav li a.active, ul.main-nav li a:active, ul.main-nav li a:focus {
  border-bottom: 1px solid #000;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  ul.main-nav {
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 30px 20px 0;
    margin-top: 0;
  }
  ul.main-nav:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    height: 60px;
    width: 20px;
    z-index: 3;
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
  }
  ul.main-nav:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 65px;
    height: 70px;
    width: 50px;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  }
  ul.main-nav li {
    margin: 0 15px;
  }
  ul.main-nav li:first-child {
    margin-left: 0;
  }
  ul.main-nav li:last-child {
    margin-right: 0;
  }
  ul.main-nav li a {
    font-size: 1.3em;
  }
}

/* 04. Work */
.grid-images {
  padding: 0;
  list-style: none;
}

.grid-images .item-sizer {
  width: 33.34%;
}

@media screen and (max-width: 992px) {
  .grid-images .item-sizer {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .grid-images .item-sizer {
    width: 100%;
  }
}

.grid-images a.item {
  width: 33.34%;
  background-size: cover;
  background-position: center center;
  margin: 0;
  padding: 0;
  display: block;
  color: #000;
  position: relative;
}

.grid-images a.item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
}

.grid-images a.item .caption h4 {
  font-size: 1.0em;
  margin: 20px 25px;
}

.grid-images a.item:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.grid-images a.item.wide {
  width: 66.67%;
}

.grid-images a.item.wide:before {
  content: '';
  display: block;
  padding-bottom: 50%;
}

.grid-images a.item.tall:before {
  content: '';
  display: block;
  padding-bottom: 200%;
}

@media screen and (max-width: 992px) {
  .grid-images a.item {
    width: 50% !important;
  }
}

@media screen and (max-width: 768px) {
  .grid-images a.item {
    width: 100% !important;
  }
}

.grid-images.space {
  margin: 0 5%;
}

.grid-images.space a.item {
  width: 23.34%;
  margin: 5%;
}

.grid-images.space a.item.wide {
  width: 56.67%;
}

.grid-images.space a.item.wide:before {
  padding-bottom: 41.167%;
}

.grid-images.space a.item.tall:before {
  padding-bottom: 243%;
}

@media screen and (max-width: 992px) {
  .grid-images.space a.item {
    width: 40% !important;
  }
  .grid-images.space a.item.wide {
    width: 90% !important;
  }
}

@media screen and (max-width: 768px) {
  .grid-images.space a.item {
    width: 90% !important;
  }
}

.fs-portfolio {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 200px 20px 60px;
}

@media screen and (max-width: 768px) {
  .fs-portfolio {
    margin: 160px 20px 60px;
  }
}

.fs-portfolio ul.fs-images {
  list-style: none;
}

.fs-portfolio ul.fs-images li {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center center;
  text-align: center;
  display: none;
}

.fs-portfolio ul.fs-images li h1 {
  font-size: 10em;
  margin-top: -30px;
  line-height: 1;
  width: 100%;
  mix-blend-mode: overlay;
}

@media screen and (max-width: 1200px) {
  .fs-portfolio ul.fs-images li h1 {
    font-size: 6em;
  }
}

@media screen and (max-width: 992px) {
  .fs-portfolio ul.fs-images li h1 {
    font-size: 5.5em;
  }
}

@media screen and (max-width: 768px) {
  .fs-portfolio ul.fs-images li h1 {
    font-size: 4.5em;
  }
}

@media screen and (max-width: 415px) {
  .fs-portfolio ul.fs-images li h1 {
    font-size: 3em;
  }
}

.fs-portfolio ul.fs-images li:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.fs-portfolio ul.fs-navigation {
  height: 60px;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
}

.fs-portfolio ul.fs-navigation li {
  display: inline-block;
  margin: 0 15px;
}

.fs-portfolio ul.fs-navigation li a {
  height: 60px;
  line-height: 60px;
  color: #aaa;
  font-size: 1.1em;
  font-weight: 600;
  -webkit-transition: all .7s;
  transition: all .7s;
}

.fs-portfolio ul.fs-navigation li a:hover {
  color: #000;
}

.fs-portfolio ul.fs-navigation li.active a {
  color: #000;
}

@media screen and (max-width: 768px) {
  .fs-portfolio ul.fs-navigation {
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    left: -20px;
    right: -20px;
    padding: 0 15px;
  }
  .fs-portfolio ul.fs-navigation li {
    margin: 0 5px;
  }
  .fs-portfolio ul.fs-navigation:after {
    content: '';
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 30px;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  }
}

/* 05. Footer */
footer {
  color: #999;
  display: inline-block;
  width: 100%;
}

@media screen and (max-width: 768px) {
  footer {
    padding: 30px 0;
    margin-top: 30px;
  }
}

footer a {
  color: #000;
  text-decoration: underline;
}

/* 06. Blog */
a.blog-item {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 100%;
}

a.blog-item img {
  position: relative;
  z-index: 1;
}

a.blog-item h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 300;
  font-size: 3em;
  background: #fff;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  bottom: -52px;
  padding: 10px 25px;
}

@media screen and (max-width: 992px) {
  a.blog-item h2 {
    bottom: -20px;
  }
}

@media screen and (max-width: 768px) {
  a.blog-item h2 {
    font-size: 1.7em;
    padding: 10px 12px;
  }
}

a.blog-item .info {
  position: relative;
  top: -47px;
  display: inline-block;
  background: #fff;
  padding: 17px 25px;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  a.blog-item .info {
    padding: 10px 12px;
    top: -36px;
  }
}

a.blog-item .info .author {
  font-size: 1.15em;
}

@media screen and (max-width: 768px) {
  a.blog-item .info .author {
    font-size: .80em;
  }
}

a.blog-item .info .tag {
  text-transform: uppercase;
  color: #999;
  letter-spacing: 1px;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  a.blog-item .info .tag {
    font-size: .9em;
  }
}

.comments {
  margin: 20px 0;
  padding: 0;
}

@media screen and (max-width: 992px) {
  .comments {
    margin-top: 50px;
  }
}

.comments .comment {
  margin: 15px 0;
  position: relative;
}

.comments .comment p {
  font-size: 1.1em;
}

.comments .comment .thumb {
  margin-top: -15px;
  width: 65px;
}

.comments .comment .thumb img {
  margin-bottom: 0;
  margin-top: 0;
}

@media screen and (max-width: 992px) {
  .comments .comment .thumb {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 768px) {
  .comments .comment .thumb {
    margin: 0 auto;
  }
}

.comments .comment a {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: 2;
  color: #000;
  opacity: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.comments .comment a .fa-reply {
  margin-left: 5px;
}

.comments .comment a:hover {
  text-decoration: none;
}

.comments .comment:hover a {
  opacity: 1;
}

.comments .comment .message {
  margin-bottom: 40px;
}

.comments .comment .details {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .comments .comment .details h4 {
    margin-top: 20px;
  }
}

.comments .comment .details .date {
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .comments .comment .details {
    text-align: center;
  }
}

.comments .comment .comment .thumb {
  margin-top: -5px;
  width: 50px;
}

@media screen and (max-width: 768px) {
  .comments .comment .comment {
    padding: 0 20px;
    border-left: 1px solid #f5f5f5;
  }
  .comments .comment .comment p:last-child {
    margin-bottom: 0;
  }
}

.comments .comment .comment .details {
  margin-bottom: 10px;
}

ul.label-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.label-list li {
  margin: 10px 0;
  font-size: 16px;
  color: #555;
  font-weight: 300;
}

@media screen and (max-width: 768px) {
  ul.label-list {
    margin-bottom: 50px;
  }
}

ul.item-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

ul.item-list li {
  margin: 12px 0;
}

ul.item-list li a, ul.item-list li span {
  color: #000;
  font-size: 1.2em;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-left: 35px;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
}

@media screen and (max-width: 1200px) {
  ul.item-list li a, ul.item-list li span {
    width: 100%;
  }
}

ul.item-list li a:before, ul.item-list li span:before {
  content: '';
  border-top: 1px solid #000;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 10px;
  height: 1px;
  margin-top: -1px;
  left: 0;
  display: block;
  position: absolute;
  top: 50%;
}

ul.item-list li a:hover, ul.item-list li span:hover {
  padding-left: 45px;
  opacity: .5;
}

ul.item-list li a:hover:before, ul.item-list li span:hover:before {
  opacity: .5;
  width: 30px;
}

ul.item-list li a {
  font-weight: 600;
}

ul.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  clear: both;
  float: none;
}

ul.tag-list li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.label {
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 8px 11px 7px;
  color: #000;
  display: inline-block;
  border-radius: 0;
  float: left;
  font-weight: 400;
  font-size: 1em;
  margin: 0 2px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 14px;
}

.label:hover {
  opacity: .5;
  color: #000 !important;
}

/* 07. Modules */
/*

Tera Lightbox CSS
Version 3.2
Made by Themanoid

*/
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9999;
  display: none;
}

#lightbox img, #lightbox iframe, #lightbox video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  opacity: 0;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-transition: opacity .8s, -webkit-transform 1s;
  transition: opacity .8s, -webkit-transform 1s;
  transition: transform 1s, opacity .8s;
  transition: transform 1s, opacity .8s, -webkit-transform 1s;
}

#lightbox iframe, #lightbox video {
  width: 1280px;
  height: 720px;
  max-width: 80%;
  max-height: 90%;
}

#lightbox .controls {
  background: #222;
  width: 40px;
  height: 120px;
  position: absolute;
  z-index: 10000;
  bottom: 5%;
  left: 0;
}

#lightbox .controls .galleryNext, #lightbox .controls .galleryClose, #lightbox .controls .galleryPrev {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ccc;
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
}

#lightbox .controls .galleryNext:hover, #lightbox .controls .galleryClose:hover, #lightbox .controls .galleryPrev:hover {
  background: #444;
  color: #fff;
}

@media screen and (max-width: 768px) {
  #lightbox .controls {
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    bottom: auto;
  }
  #lightbox .controls .galleryNext, #lightbox .controls .galleryClose, #lightbox .controls .galleryPrev {
    width: 33.3333%;
    float: left;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
  }
  #lightbox .controls .galleryClose {
    background: black !important;
    font-size: 30px;
  }
}

#lightbox .caption {
  display: none;
  color: rgba(245, 245, 245, 0.5);
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding: 20px;
}

/*

Titan Slider CSS
Version 1.1
Made by Themanoid

*/
.slider {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.slider.fs {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 0;
}

.slider.fs .slides {
  height: 100vh;
}

.slider.fs .slides .slide {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.slider .slides {
  font-size: 0;
  white-space: nowrap;
  position: relative;
  top: 0;
  left: -100%;
  margin: 0;
  padding: 0;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.slider .slides .slide {
  background: #fff;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: normal;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  overflow: hidden;
  position: relative;
  z-index: 1;
  font-size: 2rem;
}

.slider .slides .slide h1, .slider .slides .slide h2, .slider .slides .slide h3, .slider .slides .slide h4, .slider .slides .slide h5, .slider .slides .slide h6, .slider .slides .slide p, .slider .slides .slide a, .slider .slides .slide span {
  -webkit-transition: opacity .6s;
  transition: opacity .6s;
  opacity: 0;
}

.slider .slides .slide.active {
  z-index: 2;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.slider .slides .slide.active h1, .slider .slides .slide.active h2, .slider .slides .slide.active h3, .slider .slides .slide.active h4, .slider .slides .slide.active h5, .slider .slides .slide.active h6, .slider .slides .slide.active p, .slider .slides .slide.active a, .slider .slides .slide.active span {
  -webkit-transition: opacity .6s .7s;
  transition: opacity .6s .7s;
  opacity: 1;
}

.boxed .slider {
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(100vh - 60px);
}

.dark .slider {
  background: #000;
}

.toggleContainer {
  position: fixed;
  right: -100px;
  width: 200px;
  bottom: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  z-index: 99999;
  padding-left: 100px;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .toggleContainer {
    display: none;
  }
}

.toggleContainer .container-caption {
  position: absolute;
  right: 170px;
  bottom: 0;
  margin-bottom: -15px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.toggleContainer .toggle-container-btn {
  font-size: 42px;
  left: -60px;
  width: 80px;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.toggleContainer .option, .toggleContainer a.option {
  position: relative;
  font-size: 32px;
  width: 40px;
  text-align: center;
  cursor: pointer;
  display: block;
  -webkit-transition: all .3s;
  transition: all .3s;
  color: #000;
}

.toggleContainer .option span, .toggleContainer a.option span {
  position: absolute;
  right: -100%;
  padding-right: 10px;
  text-align: right;
  font-size: 11px;
  width: 100px;
  opacity: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  line-height: 42px;
}

.toggleContainer:hover .container-caption {
  margin-bottom: 65px;
}

.toggleContainer.active {
  right: -60px;
}

.toggleContainer.active .container-caption {
  margin-bottom: 65px;
  right: 130px;
}

.toggleContainer.active .toggle-container-btn {
  left: -20px;
}

.toggleContainer.active .option {
  left: -25px;
}

.toggleContainer.active .option span {
  opacity: 1;
  right: 100%;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.toggleContainer.active .option:hover, .toggleContainer.active .option.active {
  -webkit-transition: all .3s;
  transition: all .3s;
  opacity: .5;
}