/*
Theme Name: Foto
Theme URI: http://fotolanding.themesawesome.com/
Author: Themes Awesome
Author URI: http://www.themesawesome.com
Text Domain: foto
Description: Foto is Photography WordPress Theme
Tags: custom-colors, custom-menu, featured-images, theme-options
Version: 1.7
License:      GNU General Public License V2
License URI:      license.txt

/*-------------------------------------------------------------------------------------
    1. Base
    2. Page Loader
    3. Header
        3.1. Header Left Side
        3.2. Header Center
        3.3. Header Two
        3.4. Logo
        3.5. Main Menu
    4. Content
        4.1. Page Title
        4.2. Blog Post
        4.2.1. Blog - Fullwidth
        4.2.2. Blog - Fullwidth with Sidebar
        4.3. Single Post
        4.3.1. Comment Section
        4.4. Sidebar
        4.4.1. Sidebar - Archive List
        4.4.2. Sidebar - Author
        4.4.3. Sidebar - Latest Post
        4.4.4. Sidebar - Widget Categories
        4.4.5. Sidebar - Widget Pages
        4.4.6. Sidebar - Meta
        4.4.7. Sidebar - RSS
        4.4.8. Sidebar - Search
        4.4.9. Sidebar - Tag Cloud
        4.5. About Page
        4.6. Contact Page
    5. Album Concept
        5.1. Concept 1
        5.2. Concept 2
        5.3. Concept 3
        5.4. Concept 4
        5.5. Concept 5
        5.6. Concept 6
            5.6.1. Concept 6 - 1 Column
        5.7. Concept 7
        5.8. Concept 8
        5.9. Concept 9
        5.10. Concept 10
        5.11. Concept 11
        5.12. Concept 12
        5.13. Concept 13
        5.14. Concept 14
        5.15. Concept 15
        5.16. Concept 16
        5.17. Concept 17
        5.18. Concept 18
    6. Single Gallery
    7. Footer

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

/*-----------------------------------------------------------------------------------*/
/*  1. Base
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*  2. Page Loader
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*  4. Content
/*-----------------------------------------------------------------------------------*/

/* 4.1 Page Title */

/* 4.4 Sidebar */

#primary-sidebar {
  width: 25%;
  float: right;
  padding-left: 30px;
}

.sidebar .sidebar-widget {
  margin-bottom: 60px;
}

.sidebar-widget .heading-block {
  border: 1px solid #e4e4e4;
  padding: 10px;
  margin-bottom: 20px;
}

.sidebar-widget select,
.sidebar-widget option {
  width: 100%;
  max-width: 100%;
  height: 40px;
  padding: 0 10px;
}

.sidebar .sidebar-widget ul,
.sidebar .sidebar-widget ul.children,
.sidebar .sidebar-widget ul.sub-menu {
  padding: 0;
  list-style: none;
}
.sidebar .sidebar-widget ul.children li,
.sidebar .sidebar-widget ul.sub-menu li {
  padding-left: 8px;
  border: none;
  padding-bottom: 0;
}
.sidebar .sidebar-widget li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #e7e7e7;
}
.sidebar .sidebar-widget li a {
  color: #000000;
}
.sidebar .sidebar-widget li:hover,
.sidebar .sidebar-widget li:hover a {
  color: #48d8f9;
}

/* 4.4.1 Sidebar - Archive List */

.widget_archive ul,
.widget_meta ul,
.widget_categories ul,
.widget_pages ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_rss ul,
.widget_nav_menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.widget_archive ul li,
.widget_categories ul li {
  text-align: left;
  font-size: 16px;
  margin-bottom: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.widget_archive ul li a:hover,
.widget_categories ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_recent_comments ul li a:hover,
.widget_recent_entries ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
  opacity: 0.7;
}

/* 4.4.2 Sidebar - Author */

.foto_author .widget-author-img {
  margin-bottom: 15px;
}

.foto_author .author-wrap {
  text-align: center;
}

.foto_author .widget-author-detail {
  margin-bottom: 20px;
  font-size: 16px;
}

.widget-author-img img {
  width: 100%;
}

/* 4.4.3 Sidebar - Latest Post */

.sidebar-recent-post {
  display: inline-block;
}

.sidebar-recent-post .post-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;
}

.post-item .post-thumb {
  float: left;
  width: 100px;
  margin-right: 15px;
}

.post-item .latest-post-content {
  overflow: hidden;
}

.latest-post-content h4 {
  font-size: 14px;
  line-height: 20px;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.latest-post-content h4:hover {
  opacity: 0.7;
}

.latest-post-content .meta {
  margin-bottom: 10px;
  font-style: italic;
  color: #737479;
}

/* 4.4.4 Sidebar - Widget Categories */

.widget_categories ul.children,
.widget_pages ul.children,
.widget_nav_menu ul.sub-menu {
  margin-top: 10px;
}

.widget_categories ul.children li:last-child,
.widget_pages ul.children li:last-child,
.widget_nav_menu ul.sub-menu li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 4.4.5 Sidebar - Widget Pages */

.widget_pages ul li,
.widget_meta ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.widget_rss ul li,
.widget_nav_menu ul li {
  font-size: 16px;
  margin-bottom: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

/* 4.4.6 Sidebar - Meta */

.widget_meta ul li a {
  font-weight: bold;
}

/* 4.4.7 Sidebar - RSS */

.widget_rss ul li a {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.widget_rss ul li span.rss-date {
  font-style: italic;
  color: #737479;
}

.widget_rss ul li .rssSummary {
  margin: 10px 0;
}

/* 4.4.8 Sidebar - Search */

/*-----------------------------------------------------------------------------------*/
/*  5. Album Concept
/*-----------------------------------------------------------------------------------*/

/* 5.1 Concept 1 */

.concept-2 {
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
}

.slit-demo-1 .sl-slider-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.slit-demo-1 .sl-slider-wrapper .overlay {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 50;
}

.demo-2 .sl-slider-wrapper {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}

.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
  padding: 100px 30px 10px 30px;
  width: 80%;
  max-width: 960px;
  color: #fff;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}

.demo-2 .sl-slider h2 {
  font-size: 100px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.demo-2 .sl-slider blockquote {
  font-size: 28px;
  padding-top: 10px;
  font-weight: 300;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.demo-2 .sl-slider blockquote cite {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 5px;
  padding-top: 30px;
  display: inline-block;
}

.demo-2 .bg-img {
  padding: 200px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  top: -200px;
  left: -200px;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
}

.nav-arrows span {
  position: absolute;
  z-index: 100;
  top: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid #ddd;
  border: 2px solid rgba(255, 255, 255, 1);
  text-indent: -90000px;
  margin-top: -40px;
  cursor: pointer;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-arrows span:hover {
  opacity: 0.7;
}

.nav-arrows span.nav-arrow-prev {
  left: 3%;
  border-right: none;
  border-top: none;
}

.nav-arrows span.nav-arrow-next {
  right: 3%;
  border-left: none;
  border-bottom: none;
}

.nav-arrow-next.background--light,
.nav-arrow-prev.background--light {
  border: 2px solid rgba(0, 0, 0, 1);
}

.nav-arrow-next.background--dark,
.nav-arrow-prev.background--dark {
  border: 2px solid rgba(255, 255, 255, 1);
}

.nav-dots {
  text-align: center;
  position: absolute;
  bottom: 2%;
  height: 30px;
  width: 100%;
  left: 0;
  z-index: 50;
}

.nav-dots span {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 3px;
  background: #ddd;
  background: rgba(150, 150, 150, 0.4);
  cursor: pointer;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.demo-2 .nav-dots span {
  background: rgba(150, 150, 150, 0.1);
  margin: 6px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 1px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(255, 255, 255, 0.5);
}

.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 1px rgba(0, 0, 0, 0.1),
    0 0 0 5px rgba(255, 255, 255, 0.5);
}

.nav-dots span.nav-dot-current:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.slit-demo-1 .deco {
  width: 260px;
  height: 260px;
  border: 2px dashed #ddd;
  border: 2px dashed rgba(150, 150, 150, 0.4);
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin: 0 0 0 -130px;
}

.slit-demo-1[data-icon]:after {
  content: attr(data-icon);
  color: #ffffff;
  text-shadow: 0 0 1px #999;
  position: absolute;
  z-index: 75;
  width: 220px;
  height: 220px;
  line-height: 220px;
  text-align: center;
  font-size: 100px;
  top: 50%;
  left: 50%;
  margin: -110px 0 0 -110px;
  box-shadow: inset 0 0 0 10px #f7f7f7;
  border-radius: 50%;
}

.slit-demo-1 .view-album {
  position: absolute;
  z-index: 75;
  width: 100%;
  text-align: center;
  bottom: 60%;
  margin: 0 0 -110px 0;
}

.slit-demo-1 .view-album a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.1em;
  background-color: transparent;
  padding: 10px 20px;
  display: inline-block;
  border: 2px solid #fff;
}

.slit-demo-1 .view-album a:hover {
  color: #000000;
  border: 2px solid #fff;
  background-color: #fff;
}

.slit-demo-1 .sl-slide h2 {
  color: #fff;
  background: #000;
  text-shadow: 0 0 1px #fff;
  position: absolute;
  z-index: 75;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: capitalize;
  width: 100%;
  left: 0;
  text-align: left;
  padding: 6px 25px;
  line-height: 50px;
  bottom: 0%;
  margin: 0 0 0px 0;
}

.slit-demo-1 .sl-slide blockquote {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  height: 70px;
  color: #ffffff;
  z-index: 75;
  bottom: 50%;
  margin: 0 0 -200px 0;
  padding: 0;
  border: none;
}

.slit-demo-1 .sl-slide blockquote p {
  color: #fff;
  margin: 0 auto;
  width: 30%;
  position: relative;
  line-height: 22px;
  font-size: 16px;
}

.slit-demo-1 .sl-slide blockquote cite {
  font-size: 12px;
  padding-top: 10px;
  display: inline-block;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.sl-trans-elems .deco {
  -webkit-animation:
    roll 1s ease-out both,
    fadeIn 1s ease-out both;
  -moz-animation:
    roll 1s ease-out both,
    fadeIn 1s ease-out both;
  -o-animation:
    roll 1s ease-out both,
    fadeIn 1s ease-out both;
  -ms-animation:
    roll 1s ease-out both,
    fadeIn 1s ease-out both;
  animation:
    roll 1s ease-out both,
    fadeIn 1s ease-out both;
}

.sl-trans-elems .view-album {
  -webkit-animation: fadeIn 2s ease-in-out both;
  -moz-animation: fadeIn 2s ease-in-out both;
  -o-animation: fadeIn 2s ease-in-out both;
  -ms-animation: fadeIn 2s ease-in-out both;
  animation: fadeIn 2s ease-in-out both;
}

.sl-trans-elems h2 {
  -webkit-animation: moveUp 1s ease-in-out both;
  -moz-animation: moveUp 1s ease-in-out both;
  -o-animation: moveUp 1s ease-in-out both;
  -ms-animation: moveUp 1s ease-in-out both;
  animation: moveUp 1s ease-in-out both;
}

.sl-trans-elems blockquote {
  -webkit-animation: fadeIn 0.5s linear 0.5s both;
  -moz-animation: fadeIn 0.5s linear 0.5s both;
  -o-animation: fadeIn 0.5s linear 0.5s both;
  -ms-animation: fadeIn 0.5s linear 0.5s both;
  animation: fadeIn 0.5s linear 0.5s both;
}

.sl-trans-back-elems .deco {
  -webkit-animation: scaleDown 1s ease-in-out both;
  -moz-animation: scaleDown 1s ease-in-out both;
  -o-animation: scaleDown 1s ease-in-out both;
  -ms-animation: scaleDown 1s ease-in-out both;
  animation: scaleDown 1s ease-in-out both;
}

.sl-trans-back-elems .view-album {
  -webkit-animation: fadeOut 2s ease-in-out both;
  -moz-animation: fadeOut 2s ease-in-out both;
  -o-animation: fadeOut 2s ease-in-out both;
  -ms-animation: fadeOut 2s ease-in-out both;
  animation: fadeOut 2s ease-in-out both;
}

.sl-trans-back-elems h2 {
  -webkit-animation: fadeOut 1s ease-in-out both;
  -moz-animation: fadeOut 1s ease-in-out both;
  -o-animation: fadeOut 1s ease-in-out both;
  -ms-animation: fadeOut 1s ease-in-out both;
  animation: fadeOut 1s ease-in-out both;
}

.sl-trans-back-elems blockquote {
  -webkit-animation: fadeOut 1s linear both;
  -moz-animation: fadeOut 1s linear both;
  -o-animation: fadeOut 1s linear both;
  -ms-animation: fadeOut 1s linear both;
  animation: fadeOut 1s linear both;
}

.album-2 .content {
  padding: 40px 0;
}

.album-2 .album-desc {
  margin-bottom: 40px;
}

.album-2 .album-desc h4 {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 4px;
}

.album-2 .album-desc h2 {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.album-2 .album-desc blockquote {
  text-align: center;
  width: 60%;
  max-width: 400px;
  margin: 0 auto;
  border: none;
  padding: 0;
}

.album-2 .album-desc blockquote cite {
  font-size: 10px;
  padding-top: 10px;
  display: inline-block;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.album-2 .grid {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.album-2 .grid a {
  float: none;
  width: 100%;
}

.grid__item {
  width: 25%;
  padding: 0.2%;
}

.grid__item--current {
  opacity: 0 !important;
}

.preview--open .animate {
  /* open */
  -webkit-transition:
    -webkit-transform 0.6s,
    opacity 0.2s;
  transition:
    transform 0.6s,
    opacity 0.2s;
}

.animate {
  /* close */
  -webkit-transition:
    -webkit-transform 0.3s,
    opacity 0.2s;
  transition:
    transform 0.3s,
    opacity 0.2s;
}

.description {
  color: #fff;
}

.js .description--grid {
  display: none;
}

.description--preview {
  font-size: 2em;
  position: absolute;
  z-index: 140;
  width: 100%;
  left: 100%;
  top: 0;
  height: 100%;
  padding: 0 1em;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  opacity: 0;
  -webkit-transition:
    opacity 1s,
    -webkit-transform 1s;
  transition:
    opacity 1s,
    transform 1s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0);
}

.preview--open .description--preview {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.description--preview h3 {
  font-weight: normal;
  margin: 0;
}

.description--preview p {
  font-size: 0.65em;
  max-width: 100%;
}

.description--preview p em {
  color: #5d5d5d;
  display: block;
  padding: 0.4em 0 0 0;
}

/* Details */

.details {
  max-width: 100%;
  /* IE 10-11 bug flexbox */
}

.details ul {
  line-height: 1;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.details ul li {
  font-size: 0.5em;
  position: relative;
  display: inline-block;
  margin: 0 1em 0 0;
  padding: 0.15em 0;
  white-space: nowrap;
  opacity: 0;
  color: #9d9d9d;
  -webkit-transition:
    -webkit-transform 1s,
    opacity 1s;
  transition:
    transform 1s,
    opacity 1s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
}

.preview--open .details ul li {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.preview--open .details ul li:nth-child(1) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.preview--open .details ul li:nth-child(2) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.preview--open .details ul li:nth-child(3) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.preview--open .details ul li:nth-child(4) {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.preview--open .details ul li:nth-child(5) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.details ul li:first-child {
  font-weight: bold;
  color: #909090;
}

.icon {
  font-family: "camera-icons";
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

.icon + span {
  margin-left: 5px;
  vertical-align: middle;
}

.icon-focal_length:before {
  content: "\e600";
}

.icon-exposure_time:before {
  content: "\e601";
}

.icon-iso:before {
  content: "\e602";
}

.icon-camera:before {
  content: "\e603";
}

.icon-aperture:before {
  content: "\e604";
}

.details .icon {
  margin-right: 5px;
  color: #fff;
}

/* Close button */

.action {
  font-size: 1.5em;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  border: none;
  background: none;
}

.action:hover,
.action:focus {
  color: #fff;
  outline: none;
}

.action--close {
  position: fixed;
  z-index: 150;
  top: 0;
  right: 0;
  padding: 1em;
  opacity: 0;
  -webkit-transition:
    opacity 0.3s,
    -webkit-transform 0.3s;
  transition:
    opacity 0.3s,
    transform 0.3s;
  -webkit-transform: scale3d(0.6, 0.6, 1);
  transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.text-hidden {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  color: transparent;
}

@media screen and (max-width: 40em) {
  .description--preview h3 {
    font-size: 0.5em;
  }
  .description--preview p,
  .details {
    display: none;
  }
}

@-webkit-keyframes roll {
  0% {
    -webkit-transform: translateX(500px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}

@-moz-keyframes roll {
  0% {
    -moz-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}

@-o-keyframes roll {
  0% {
    -o-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -o-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}

@-ms-keyframes roll {
  0% {
    -ms-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -ms-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll {
  0% {
    transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(40px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

@-moz-keyframes moveUp {
  0% {
    -moz-transform: translateY(40px);
  }
  100% {
    -moz-transform: translateY(0px);
  }
}

@-o-keyframes moveUp {
  0% {
    -o-transform: translateY(40px);
  }
  100% {
    -o-transform: translateY(0px);
  }
}

@-ms-keyframes moveUp {
  0% {
    -ms-transform: translateY(40px);
  }
  100% {
    -ms-transform: translateY(0px);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes scaleDown {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
  }
}

@-moz-keyframes scaleDown {
  0% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(0.5);
  }
}

@-o-keyframes scaleDown {
  0% {
    -o-transform: scale(1);
  }
  100% {
    -o-transform: scale(0.5);
  }
}

@-ms-keyframes scaleDown {
  0% {
    -ms-transform: scale(1);
  }
  100% {
    -ms-transform: scale(0.5);
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 660px) {
  .slit-demo-1 .deco {
    width: 130px;
    height: 130px;
    margin-left: -65px;
    margin-bottom: 50px;
  }
  .slit-demo-1[data-icon]:after {
    width: 110px;
    height: 110px;
    line-height: 110px;
    font-size: 40px;
    margin: -55px 0 0 -55px;
  }
  .slit-demo-1 .sl-slide blockquote {
    margin-bottom: -120px;
  }
  .slit-demo-1 .sl-slide h2 {
    line-height: 22px;
    font-size: 18px;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  .slit-demo-1 .sl-slide blockquote p:before {
    line-height: 10px;
    width: 40px;
    height: 40px;
    font-size: 120px;
    left: -45px;
  }
  .demo-2 .sl-slider-wrapper {
    height: 500px;
  }
  .demo-2 .sl-slider h2 {
    font-size: 36px;
  }
  .demo-2 .sl-slider blockquote {
    font-size: 16px;
  }
}

.sl-slider-wrapper {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.sl-slider {
  position: absolute;
  top: 0;
  left: 0;
}

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.sl-slide {
  z-index: 1;
}

.sl-content-slice {
  overflow: hidden;
  position: absolute;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
}

.sl-slide-horizontal .sl-content-slice {
  width: 100%;
  height: 50%;
  left: -200px;
  -webkit-transform: translateY(0%) scale(1);
  -moz-transform: translateY(0%) scale(1);
  -o-transform: translateY(0%) scale(1);
  -ms-transform: translateY(0%) scale(1);
  transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
  top: -200px;
  padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
  top: 50%;
  padding: 0px 200px 200px 200px;
}

.sl-slide-vertical .sl-content-slice {
  width: 50%;
  height: 100%;
  top: -200px;
  -webkit-transform: translateX(0%) scale(1);
  -moz-transform: translateX(0%) scale(1);
  -o-transform: translateX(0%) scale(1);
  -ms-transform: translateX(0%) scale(1);
  transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
  left: -200px;
  padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
  left: 50%;
  padding: 200px 200px 200px 0px;
}

.sl-content-wrapper {
  position: absolute;
}

.sl-content {
  width: 100%;
  height: 100%;
  background: #fff;
}

.sl-slide-horizontal .sl-slide-inner {
  background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
  background: #ccc;
}

.bg-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* 5.3. Concept 3 */

@media screen and (max-width: 58em) {
  .grid a {
    width: 33.333%;
  }
  .grid a:nth-child(odd) {
    margin: 0;
  }
  .grid a:nth-child(3n-1) {
    margin: 30px 0 -30px 0;
  }
}

@media screen and (max-width: 45em) {
  .grid {
    max-width: 500px;
  }
  .grid a {
    width: 50%;
  }
  .grid a:nth-child(3n-1) {
    margin: 0;
  }
  .grid a:nth-child(even) {
    margin: 30px 0 -30px 0;
  }
  .grid figcaption h2 {
    margin-bottom: 0px;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  .grid figcaption p {
    margin: 0;
    padding: 0 10px;
  }
}

@media screen and (max-width: 27em) {
  .grid {
    max-width: 250px;
  }
  .grid a {
    width: 100%;
  }
  .grid a:nth-child(even) {
    margin: 0;
  }
}

/* 5.4. Concept 4 */

/* 5.5. Concept 5 */