/* ------------------------------------------------------------
1. Fonts
2. General Styles
3. Page loadig animation
4. Header
5. Page Content
5.1 Custom
6. Elements
7. Single Page (Blog Posts, 404 etc.)
8. Media Queries
9. Pricing
10. Updates
------------------------------------------------------------ */

/* ------------------------------------------------------------
1. Fonts
------------------------------------------------------------ */
/* Google fonts */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');

/* Linear Icons Font */
@import url('./fonts/linear-icons-font/style.css');

/* FontAwesome Free Icons Font */
@import url('./fonts/fontawesome-free-5.12.1-web/css/all.min.css');


/* ------------------------------------------------------------
2. General Styles
------------------------------------------------------------ */
html {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  background-color: #0ba376;
  background: linear-gradient(#0b7080, #0ba376);
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-size: 15px;
  font-family: 'Poppins', Helvetica, sans-serif;
  line-height: 1.65em;
  overflow: hidden;
  color: #d5d5d5;
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
  background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
  color: #eee;
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
}

h1 {
    font-size: 32px;
}
h2 {
    font-size: 27px;
}
h3 {
    font-size: 21px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 14px;
}

a {
  color: #0099cc;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

p {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.page {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 100px;
  overflow: hidden;
}

.page-content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  min-height: 80vh;
  margin: 10vh auto;
  padding: 0;
  background-color: #444;
  box-shadow: 0 0 100px -5px rgba(0,0,0,.25);
  border-radius: 32px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* buttons */
.btn-primary,
.btn-secondary,
button,
input[type="button"],
input[type="submit"],
.wp-block-button .wp-block-button__link {
  display: inline-block;
  position: relative;
  padding: .8em 2.1em;
  margin-bottom: .75em;
  margin-right: .25em;
  font-size: 1em;
  line-height: 1.2;
  border: 0;
  outline: 0;
  border: 2px solid #0ba376;
  color: #f5f5f5;
  text-shadow: none;
  background-color: transparent;
  border-radius: 30px;
  font-family: 'Poppins', Helvetica, sans-serif;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,.3);
}

.btn-primary:last-child,
.btn-secondary:last-child,
button:last-child,
input[type="button"]:last-child,
input[type="submit"]:last-child,
.wp-block-button .wp-block-button__link:last-child {
  margin-right: 0;
}

.btn-primary:hover,
.btn-primary:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: #0ba376;
  color: #fff;
  border: 2px solid #0ba376;
}

.btn-secondary {
  border-color: #d5d5d5;
  background-color: transparent;
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,.3);
  color: #f5f5f5;
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  border-color: #d5d5d5;
  background-color: #d5d5d5;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



/* =============================================================================
3. Page loadig animation
============================================================================= */
.no-js .preloader,
.no-js .preloader-portfolio {
  display: none;
}
.preloader,
.preloader-portfolio {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #222;
}

.preloader-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  background-color: inherit;
  color: inherit;
  opacity: 1;
  transition: opacity 0.3s;
  transform: translate3d(-50%,-50%,0);
}

.preloader-spinner {
  width: 52px;
  height: 52px;
  margin: 100px auto;
  background-color: #0ba376;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.1);
    opacity: 0;
  }
}



/* ------------------------------------------------------------
4. Header
------------------------------------------------------------ */
@media only screen and (min-width: 1025px) {
  .header {
    display: inline-block;
    float: left;
    width: 100%;
    max-width: 380px;
    height: 100%;
    max-height: 80vh;
    min-height: inherit;
    text-align: center;
    padding: 70px 30px 45px;
    overflow: auto;
  }

  .header-titles {

  }

  /* --- Navigation --- */
  ul.main-menu {
    position: absolute;
    padding: 15px 0;
    width: 70px;
    right: -90px;
    background-color: #444;
    border-radius: 35px;
    z-index: 999;
    list-style: none;
    top: 0;
    box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
  }

  ul.main-menu a {
    display: block;
    position: relative;
    color: #b5b6b7;
    padding: 10px;
    transition: all 0.3s ease-in-out;
  }

  ul.main-menu a.active,
  ul.main-menu a:focus,
  ul.main-menu a:hover {
    color: #0ba376;
  }

  ul.main-menu .menu-icon {
    display: block;
    font-size: 30px;
  }

  ul.main-menu .link-text {
    position: absolute;
    width: auto;
    visibility: hidden;
    opacity: 0;
    color: #fff;
    padding: 2px 10px;
    background-color: #0ba376;
    white-space: nowrap;
    right: 0;
    top: -50%;
    margin-top: 50%;
    transition: all 0.3s ease-in-out;
    z-index: 0;
    box-shadow: 0px 10px 10px -8px rgba(0,0,0,.22);
  }

  ul.main-menu a:hover .link-text {
    right: 100%;
    visibility: visible;
    opacity: 1;
  }
  /* --- End Navigation --- */
}

/* --- LMPixels Arrow Nav --- */
.lmpixels-arrows-nav {
  position: absolute;
  padding: 10px 0;
  width: 60px;
  right: -80px;
  background-color: #444;
  border-radius: 35px;
  z-index: 98;
  list-style: none;
  bottom: 0;
  box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
}

.lmpixels-arrows-nav div {
  display: block;
  position: relative;
  text-align: center;
  color: #b5b6b7;
  padding: 10px;
  font-size: 24px;
  transition: all 0.3s ease-in-out;
}

.lmpixels-arrows-nav div:hover {
  color: #0ba376;
}
/* --- End LMPixels Arrow Nav --- */

.header-photo {
  position: relative;
  width: 180px;
  margin: 0 auto 30px;
  z-index: 1;
}

.header-photo img {
  max-width: 100%;
  background-color: #fff;
  border: 3px solid #fff;
  border-radius: 300px;
}

.header-photo:after {
  position: absolute;
  opacity: 0.3;
  top: 7%;
  left: 7%;
  border-radius: 300px;
  content: '';
  height: calc(100% + 0px);
  width: calc(100% + 0px);
  background-image: -webkit-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
  background-size: 6px 6px;
  z-index: -1;
}

.header-titles h2 {
  font-size: 36px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 5px 0 7px;
  line-height: 1.2em;
}

.header-titles h4 {
  font-size: 18px;
  font-weight: 300;
  color: #bbb;
  margin: 5px 0;
  line-height: 1.2em;
}

/* --- Social Links --- */
.social-links {
  margin: 20px 0;
}

.social-links ul {
  list-style: none;
  padding: 0;
}

.social-links ul li {
  display: inline-block;
}

.social-links ul li a {
  color: #fff;
  border-radius: 20px;
  font-size: 18px;
  padding: 0;
  height: 30px;
  width: 30px;
  display: block;
  line-height: 30px;
  text-align: center;
  opacity: .9;
}

.social-links ul li a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,.2);
}
/* --- End Social Links --- */

.header-buttons {
  margin-top: 50px;
}

.header-buttons .btn-primary {
  background-color: transparent;
  color: #f5f5f5;
  border-color: #f5f5f5;
}

.header-buttons .btn-primary:hover {
  background-color: #fff;
  color: #0ba376;
  border-color: #fff;
}

.header .copyrights {
  color: #bbb;
  width: 380px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 10px 15px;
  line-height: 14px;
  font-size: 12px;
  text-align: center;
}

/* ------------------------------------------------------------
5. Page Content
------------------------------------------------------------ */
.content-area {
  position: absolute;
  right: 0;
  background-color: transparent;
  height: 100%;
  width: 100%;
  max-width: calc(100% - 380px);
}

.animated-sections {
  position: relative;
  height: 100%;
  perspective: 1500px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animated-section {
  position: absolute;
  background-color: #222;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  padding: 60px;
  opacity: 0;
  overflow: auto;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
  background-size: cover;
}

.single-page-content {
  position: absolute;
  background-color: #222;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  padding: 60px;
  overflow: auto;
}

.section-active,
.no-js .animated-section {
  opacity: 1;
  overflow: auto;
  visibility: visible;
  z-index: 99;
}

/* --- Custom ScrollBar Customization --- */
.ps>.ps__scrollbar-y-rail {
  margin-right: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
}

.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #b5b6b7;
}

.ps:hover>.ps__scrollbar-y-rail:hover {
  background-color: #444;
}

.ps:hover>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y {
    background-color: #0ba376;
}

.ps>.ps__scrollbar-y-rail {
  width: 12px;
}

.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y, .ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y,
.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y,
.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
    width: 8px;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail {
  background-color: #555;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #0ba376;
}
/* --- End Custom ScrollBar Customization --- */

.page-title {
  display: inline-block;
  position: relative;
  padding-right: 25px;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.page-title h2 {
  position: relative;
  font-size: 32px;
  z-index: 1;
}

.page-title h2 span {
  color: #0ba376;
}

.page-title:after {
  position: absolute;
  opacity: 0.45;
  top: 10px;
  right: 0;
  content: '';
  height: 30px;
  width: 50px;
  background-image: -webkit-repeating-radial-gradient(center center, #0ba376, #0ba376 1px, transparent 0px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #0ba376, #0ba376 1px, transparent 0px, transparent 100%);
  background-size: 6px 6px;
  z-index: 0;
}


/* Form controls */
.form-group {
  position: relative;
  margin: 0 0 21.5px;
}
.form-control,
.form-control:focus {
  height: 42px;
}

.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus,
input[type="search"],
input[type="password"],
input[type="text"] {
  position: relative;
  border: 2px solid #999;
  border-radius: 5px;
  display: block;
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 10px 25px 10px 12px;
  width: 100%;
  background: 0 0;
  background-color: transparent;
  text-align: left;
  color: inherit;
  box-shadow: none;
  outline: none;
  font-family: 'Poppins', Helvetica, sans-serif;
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,.1);
}

textarea.form-control, textarea.form-control:focus {
  height: auto;
}

.form-control ~ .form-control-border {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  border-radius: 5px;
  top: 0;
  opacity: 0;
  background: transparent;
  border: 2px solid #0ba376;
  border-right-width: 0;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.form-control:focus ~ .form-control-border {
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1;
  opacity: 1;
  border-right-width: 2px;
}

.has-error .form-control ~ .form-control-border {
  border-color: #ff4c4c;
}

/* Placeholders */
.form-control::-moz-placeholder {
  color: #adadac;
}

.form-control:-ms-input-placeholder {
  color: #adadac;
}

.form-control::-webkit-input-placeholder {
  color: #adadac;
}
/* /Placeholders */

.form-group .help-block {
  position: absolute;
  display: inline-block;
  padding: 0px 5px;
  font-size: 0.93em;
  line-height: 1.75em;
  margin: -2px 0 0 10px;
  color: #fff;
  background: #ff4e4e;
}

.form-group .help-block:after {
  content: " ";
  position: absolute;
  left: 5px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #ff4e4e;
  border-right: 10px solid transparent;
}
.form-group .help-block:empty {
  display: none;
}

.form-group-with-icon i {
  position: absolute;
  font-size: 16px;
  top: 13px;
  right: 13px;
  color: #d3d3d3;
}

.form-group-with-icon.form-group-focus i {
  color: #0ba376;
}

.form-group.form-group-w-checkbox {
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 17px;
}

.form-group-with-icon.form-group-w-checkbox {
  padding-top: 8px;
  padding-left: 52px;
  margin-bottom: 25px;
}

.form-group .form-control-checkbox + label,
.form-group.form-group-focus .form-control-checkbox + label {
  position: relative;
  display: inline;
  left: 0;
  top: 0;
  font-size: 1em;
  opacity: 1;
}

.form-group .form-control-checkbox,
.form-group.form-group-focus .form-control-checkbox {
  display: inline-block;
  width: auto;
  height: auto;
  top: 2px;
}

.form-group.form-group-w-checkbox .help-block {
  top: 100%;
  left: 0;
  margin-left: 0;
}

.form-group.form-group-with-icon.form-group-w-checkbox .help-block {
  left: 52px;
}

.form-group label {
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: -1;
  color: #a5a6a7;
  transition: 0.3s;
}

.form-group .form-control:focus ~ label,
.form-group.form-group-focus .form-control ~ label {
  color: #0ba376;
  top: -20px;
  left: 0;
  z-index: 1;
  font-size: 13px;
}

.form-control, .form-control:focus, .has-error .form-control, .has-error .form-control:focus, input[type="search"], input[type="password"], input[type="text"], .header-search input.form-control {
    transform: translateZ(0);
}
/* /Form controls */


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

5.1 Custom

 */



.owl-carousel .owl-item img {
    height: 800px;
    object-fit: scale-down;
}

.lang:hover,
.lang:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.pl-10{
    padding-left: 10px;
}

/* Style the Image Used to Trigger the Modal */
.zoom {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
/*
#myImg:hover {opacity: 0.7;}*/

.zoom:hover,
.zoom:focus {
    color: #bbb;
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {

    margin: auto;
    display: block;
    width: 85%;
    max-width: 1080px;
    height: 70%;
    max-height: 720px;
}



/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
            animation-name: zoom;
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* ---------------------------------------------------
End Custom
 */

/* ------------------------------------------------------------
6. Elements
------------------------------------------------------------ */
.block-title {
  display: inline-block;
  position: relative;
  padding-right: 12px;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.block-title h3 {
  position: relative;
  font-size: 21px;
  z-index: 1;
}

.block-title h3 span {
  color: #0ba376;
}

.block-title:after {
  position: absolute;
  opacity: 0.45;
  top: 10px;
  right: 0;
  content: '';
  height: 20px;
  width: 30px;
  background-image: -webkit-repeating-radial-gradient(center center, #0ba376, #0ba376 1px, transparent 0px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #0ba376, #0ba376 1px, transparent 0px, transparent 100%);
  background-size: 6px 6px;
  z-index: 0;
}

/* --- White Spaces --- */
.white-space-10 {
  padding-bottom: 10px;
}

.white-space-20 {
  padding-bottom: 20px;
}

.white-space-30 {
  padding-bottom: 30px;
}

.white-space-40 {
  padding-bottom: 40px;
}

.white-space-50 {
  padding-bottom: 50px;
}

.white-space-60 {
  padding-bottom: 60px;
}

.white-space-70 {
  padding-bottom: 70px;
}
/* --- End White Spaces --- */

/* --- Simple Info List --- */
.info-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list ul li {
  margin-bottom: 10px;
}

.info-list .title {
  color: #0ba376;
  margin-right: 5px;
  font-weight: 600;
}
/* --- End Simple Info List --- */

/* --- Info block with Icon --- */
.info-block-w-icon {
  margin-bottom: 25px;
}

.info-block-w-icon .ci-text h4 {
  margin: 5px 0;
}

.info-block-w-icon .ci-text p {
    font-size: .95em;
}

.info-block-w-icon .ci-icon {
  display: table-cell;
  width: 54px;
  padding-right: 25px;
}

.info-block-w-icon i {
  position: relative;
  font-size: 42px;
  color: #0ba376;
  opacity: .7;
}
/* --- End Info block with Icon --- */

/* --- Info Block with Borders --- */
.lm-info-block {
  position: relative;
  text-align: center;
  width: 100%;
  display: block;
  margin: 0 0 15px 0;
  background-color: #333;
  padding: 20px 10px;
  border: 1px solid #444;
  box-shadow: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.lm-info-block i {
  position: relative;
  font-size: 33px;
  color: #0ba376;
  z-index: 1;
}

.lm-info-block h4 {
  font-size: 15px;
  margin-top: 8px;
}

.lm-info-block .lm-info-block-value {
  font-size: 30px;
  line-height: 30px;
  font-weight: 400;
  display: block;
  margin: 10px 0;
  color: #0ba376;
}


.lm-info-block .lm-info-block-value:empty {
  margin: 0;
}
/* --- End of Info Block with Borders --- */


/* --- Testimonials --- */
.testimonial {
  text-align: center;
  border: 2px solid #444;
  border-radius: 20px;
  margin: 45px 2px 10px;
  padding: 0 25px 15px 25px;
}

.testimonial img {
  max-width: 90px;
  max-height: 90px;
  margin: -45px auto 20px;
  border-radius: 90px;
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,.22);
}

.testimonial .text {
  text-align: left;
  font-style: italic;
}

.testimonial .author-info {
  position: relative;
  text-align: left;
  margin-top: 20px;
}

.testimonial .author-info .icon {
  content: '';
  position: absolute;
  font-size: 30px;
  right: 0;
  top: 7px;
  color: #0ba376;
  opacity: .5;
}

.testimonial .author-info .author {
  margin: 0;
  font-size: 15px;
}

.testimonial .author-info .company {
  color: #a5a6a7;
  font-size: 13px;
  font-weight: 300;
  margin: 0;
}
/* --- End of Testimonials --- */

/* --- Clients --- */
.clients.owl-carousel .client-block {
  padding: 15px;
  margin-bottom: 15px;
}

.client-block {
  text-align: center;
  padding: 5px 0;
  margin-bottom: 30px;
  opacity: .7;
  transition: all 0.2s ease-in-out;
}
/* --- End of Clients --- */

/* --- Sliders Nav --- */
.testimonials.owl-carousel .owl-nav,
.clients.owl-carousel .owl-nav {
  position: absolute;
  text-align: right;
  right: 0;
  top: -52px;
}

.testimonials.owl-carousel .owl-nav .owl-prev,
.testimonials.owl-carousel .owl-nav .owl-next,
.clients.owl-carousel .owl-nav .owl-prev,
.clients.owl-carousel .owl-nav .owl-next {
  position: relative;
  display: inline-block;
  background-color: #444;
  border: 1px solid #444;
  border-radius: 5px;
  transition-duration: 0.2s;
  font-family: "Font Awesome 5 Free";
  font-size: 11px;
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  color: #d5d5d5;
}

.testimonials.owl-carousel .owl-nav .owl-prev,
.clients.owl-carousel .owl-nav .owl-prev {
    margin-right: 3px;
}

.testimonials.owl-carousel .owl-nav .owl-prev:before,
.testimonials.owl-carousel .owl-nav .owl-next:before,
.clients.owl-carousel .owl-nav .owl-prev:before,
.clients.owl-carousel .owl-nav .owl-next:before {
  position: relative;
  margin: 2px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  display: block;
  cursor: pointer;
  color: inherit;
  z-index: 1;
}

.testimonials.owl-carousel .owl-nav .owl-prev:before,
.clients.owl-carousel .owl-nav .owl-prev:before {
    content: "\F053";
}

.testimonials.owl-carousel .owl-nav .owl-next:before,
.clients.owl-carousel .owl-nav .owl-next:before {
    content: "\F054";
}

.testimonials.owl-carousel .owl-nav .owl-prev:hover,
.testimonials.owl-carousel .owl-nav .owl-next:hover,
.clients.owl-carousel .owl-nav .owl-prev:hover,
.clients.owl-carousel .owl-nav .owl-next:hover {
    background-color: #0ba376;
    border-color: #0ba376;
    color: #fff;
}
/* --- End of Sliders Nav --- */


/* --- Timeline (Education & Experience) --- */
.timeline-second-style .timeline-item {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-bottom: 15px;
}

.timeline-second-style .timeline-item:last-child {
  padding-bottom: 0;
}


.timeline-second-style .left-part {
  width: 30%;
  display: table-cell;
  padding-right: 25px;
  min-height: 100%;
  text-align: right;
  vertical-align: top;
}

.timeline-second-style .right-part {
  width: 70%;
  display: table-cell;
  padding-left: 25px;
  padding-right: 15px;
  vertical-align: top;
}

.timeline-second-style .right-part p,
.timeline-second-style .right-part p > * {
  font-size: 0.92em;
}

.timeline-second-style .divider {
  position: absolute;
  top: 0;
  left: 30%;
  bottom: 0;
  width: 1px;
  background-color: #444;
}

.timeline-second-style .divider:before {
  content: '';
  display: block;
  position: absolute;
  margin-top: 4px;
  width: 17px;
  height: 17px;
  position: absolute;
  margin-left: -8px;
  border-radius: 10px;
  background-color: #0ba376;
  opacity: .25;
  z-index: 0;
}

.timeline-second-style .divider:after {
  content: '';
  display: block;
  position: absolute;
  margin-top: 8px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  background-color: #222;
  border-radius: 5px;
  border: 2px solid #0ba376;
  z-index: 1;
}

.timeline-second-style .item-title {
  font-size: 16px;
  margin-bottom: 3px;
}

.timeline-second-style .item-period {
  color: #aaa;
  margin: 3px 0;
  font-size: 14px;
  line-height: 1.4em;
}

.timeline-second-style .item-company {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45em;
  color: #a5a6a7;
}

.timeline-second-style .timeline-item:last-child .right-part {
  padding-bottom: 0;
}

.timeline-second-style .item-logo {
  display: block;
  margin-bottom: 10px;
}

.timeline-second-style .item-logo img {
  max-height: 40px;
}
/* --- End Timeline (Education & Experience) --- */

/* --- Skills --- */
/* Skills Second Style */
.skills-info.skills-second-style {
  margin-bottom: 30px;
}

.skills-info.skills-second-style h4 {
  font-size: 13px;
  line-height: 1.1em;
  position: relative;
  float: left;
  margin: 0 0 4px;
}

.skills-second-style .skill-container {
  position: relative;
  display: inline-block;
  background-color: #222;
  border: 1px solid #0ba376;
  border-radius: 8px;
  box-sizing: border-box;
  height: 10px;
  margin-bottom: 8px;
  width: 100%;
}

.skills-second-style .skill-container:before {
  content: '';
  position: absolute;
  background-color: #0ba376;
}

.skills-second-style .skill-value {
  font-size: 11px;
  line-height: 1.1em;
  position: relative;
  float: right;
  margin: 0 0 4px;
  color: #aaa;
}

.skills-second-style .skill-percentage {
  background-color: #0ba376;
  border: 2px solid #222;
  border-radius: 9px;
  height: 8px;
  padding: 0;
}

/* --- Skills Values --- */
.skills-second-style .skill-container.skill-1 .skill-percentage {
  width: 80%;
}

.skills-second-style .skill-container.skill-2 .skill-percentage {
  width: 80%;
}

.skills-second-style .skill-container.skill-3 .skill-percentage {
  width: 70%;
}

.skills-second-style .skill-container.skill-4 .skill-percentage {
  width: 70%;
}

.skills-second-style .skill-container.skill-5 .skill-percentage {
  width: 85%;
}

.skills-second-style .skill-container.skill-6 .skill-percentage {
  width: 75%;
}

.skills-second-style .skill-container.skill-7 .skill-percentage {
  width: 75%;
}

.skills-second-style .skill-container.skill-8 .skill-percentage {
  width: 40%;
}

.skills-second-style .skill-container.skill-9 .skill-percentage {
  width: 78%;
}
.skills-second-style .skill-container.skill-10 .skill-percentage {
    width: 85%;
}
.skills-second-style .skill-container.skill-11 .skill-percentage {
    width: 83%;
}
.skills-second-style .skill-container.skill-12 .skill-percentage {
    width: 65%;
}
.skills-second-style .skill-container.skill-13 .skill-percentage {
    width: 80%;
}

.skills-second-style .skill-container.skill-14 .skill-percentage {
    width: 50%;
}
/* --- End of Skills Values --- */

/* Animate skills on subpage load */
.pt-page .skills-second-style .skill-percentage,
.pt-page .skills-second-style .skill-value {
  transition: all 2s ease-in-out;
}
.js .subpages:not(.one-page-layout) .pt-page:not(.pt-page-current) .skills-second-style .skill-percentage {
  width: 0 !important;
}

.js .subpages:not(.one-page-layout) .pt-page:not(.pt-page-current) .skills-second-style .skill-value {
  left: 26px !important;
}
/* /Skills Second Style */

/* --- End of Skills --- */

/* --- Knowledges --- */
.knowledges {
  list-style: none;
}

.knowledges li {;
  display: inline-block;
  background-color: #0ba376;
  border-radius: 3px;
  color: #fff;
  padding: 1px 10px;
  margin: 3px 2px;
  font-size: 13px;
}
/* --- End of Knowledges --- */

/* --- Certificates --- */
.certificate-item {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 2px solid #444;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all .2s ease-in-out;
}

.certi-logo {
  display: table-cell;
  width: 120px;
  height: 100%;
  background-color: #444;
  padding: 25px;
  vertical-align: middle;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.certi-logo img {
  display: block;
  max-width: 100%;
}

.certi-content {
  display: table-cell;
  width: 100%;
  padding: 20px 25px;
  vertical-align: middle;
}

.certi-title h4 {
  font-size: 16px;
  margin: 0 0 5px;
}

.certi-id {
  font-size: .9em;
  color: #777;
}

.certi-date {
  font-size: .7em;
  color: #777;
  opacity: .7;
}
/* --- End of Certificates --- */

/* --- Contact Form --- */
.controls.two-columns .left-column {
  width: 47%;
  float: left;
  margin-right: 3%;
}

.controls.two-columns .right-column {
  width: 50%;
  float: right;
}

.g-recaptcha {
  margin-bottom: 20px;
}
/* --- End of Contact Form --- */

.map {
  width: 100%;
  height: 140px;
  margin: 0 0 35px;
}


/* --- Portfolio --- */
.portfolio-filters {
  margin-bottom: 30px;
}

.portfolio-filters li {
  display: inline-block;
  margin-right: 15px;
  font-size: 13px;
  opacity: 0.7;
}

.portfolio-filters li.active {
  opacity: 1;
}

.portfolio-filters li a {
  color: #aaa;
  cursor: pointer;
}

.portfolio-grid {
  margin-left: -7px;
  margin-right: -7px;
}

.portfolio-grid figure {
  width: 33.33333%;
  float: left;
  padding: 7px;
  position: relative;
  overflow: hidden;
}

.portfolio-grid.one-column figure {
  width: 100%;
}

.portfolio-grid.two-columns figure {
  width: 50%;
}

.portfolio-grid.three-columns figure {
  width: 33.33333%;
}

.portfolio-grid.four-columns figure {
  width: 25%;
}

.portfolio-grid.five-columns figure {
  width: 20%;
}

.portfolio-grid img {
  position: relative;
  display: block;
  width: 100%;
}

.portfolio-grid figure a,
.portfolio-rid figure img {
  display: block;
  position: relative;
}

.portfolio-grid figure img {
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover img {
  transform: scale(1.1);
}

.portfolio-grid figure a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 3;
}

.portfolio-item-img {
  position: relative;
  overflow: hidden;
}

.portfolio-grid figure .portfolio-item-img:after {
  content: '';
  position: absolute;
  background-color: rgba(0,0,0,.05);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover .portfolio-item-img:after {
  opacity: 1;
}

.portfolio-item-desc {
  margin-top: 12px;
}

.portfolio-item-desc h4 {
  margin-bottom: 0;
}

.portfolio-item-desc small {
  color: #888;
}

.portfolio-grid figure i {
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 16px;
  opacity: 0;
  width: 30px;
  height: 30px;
  background-color: #222;
  color: #0ba376;
  text-align: center;
  line-height: 30px;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure .name {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  position: relative;
}

.portfolio-grid figure .category {
  display: inline-block;
  padding: 2px 7px;
  background-color: #222;
  color: #f5f5f5;
  font-size: 11px;
  line-height: 1.2em;
  top: 15px;
  left: 15px;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover i,
.portfolio-grid figure:hover .name,
.portfolio-grid figure:hover .category {
  opacity: 1;
}
/* --- End of Portfolio --- */

/* --- Blog --- */
.blog-masonry {
  margin: 0 -1em 1.8em;
}

.blog-masonry.one-column .item {
  width: 100%;
  padding: 0 1em 2em;
}

.blog-masonry.two-columns .item {
  width: 50%;
  float: left;
  padding: 0 1em 2em;
}

.blog-masonry.three-columns .item {
  width: 33.333333%;
  float: left;
  padding: 0 1em 2em;
}

.blog-card {
  display: block;
  position: relative;
  padding: 0;
  background: #444;
}

.blog-card .post-image {
  width: 100%;
  margin: 0;
}

.blog-card .media-block {
  overflow: hidden;
}

.blog-card .media-block img {
  transition: all .3s ease-in-out;
}

.blog-card .media-block:hover img {
  transform: scale(1.1);
}

.blog-card .post-without-f-image {
  padding-bottom: 46.875%;
  width: 100%;
  background-color: #f5f5f5;
}

.blog-card .post-info {
  padding: 1em 1.4em 1.4em;
  border: 1px solid #444;
  border-top: 0;
}

.blog-card .blog-item-title {
  margin: 5px 0 0 0;
}

.blog-card .post-meta {
  padding: 1em;
  margin: 0;
}

.blog-card .category a {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  padding: 2px 7px;
  line-height: 1.2em;
  font-size: 11px;
  color: #222;
  z-index: 3;
}

.blog-card .post-date {
  display: inline-block;
  color: #aaa;
  font-size: 11px;
  line-height: 1.1em;
  font-weight: 300;
}

.blog-card .media-block {
  position: relative;
}

.sticky-badge {
  position: absolute;
  background-color: #fff;
  right: 10px;
  top: 10px;
  font-size: 12px;
  padding: 0;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  color: #888;
  z-index: 3;
}

.blog-card .media-block a .mask {
  position: absolute;
  background: #4f565e;
  background: rgba(0,0,0,.12);
  display: inline-block;
  font-family: 'Linearicons-Free';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

.blog-card .media-block a .mask:after {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22px 0 0 -22px;
  width: 44px;
  line-height: 44px;
  font-size: 44px;
  text-align: center;
  content: "\E828";
  color: #fff;
}

.blog-card .media-block:hover a .mask {
  visibility: visible;
  opacity: 1;
}

.blog-card ul.category li a {
  color: #888;
  font-size: 12px;
  font-weight: 300;
}

.blog-card .post-meta .item, .post-meta .item a {
  color: #a6a6a6;
}
/* --- End of Blog --- */



/* --- Detailed Portfolio Page --- */
.page-ajax-loaded {
  position: fixed;
  background-color: #fff;
  padding: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

.page-ajax-loaded:empty {
  display: none !important;
}

.ajax-page-content {
  height: 100%;
  overflow: auto;
  background-color: #222;
}

.ajax-page-wrapper {
  max-width: 1170px;
  margin: 0 auto;
  padding: 20px 60px 50px;
}

.ajax-page-nav {
  text-align: right;
}

.ajax-page-nav > div.nav-item {
  position: relative;
  display: inline-block;
  margin: 0 3px;
}

.ajax-page-nav > div.nav-item a {
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  color: #b5b5b5;
  background-color: #444;
}

.ajax-page-nav > div.nav-item a:hover {
  background-color: #0ba376;
  color: #fff;
}

.ajax-page-nav > div.nav-item a i {
  line-height: 40px;
  font-size: 22px;
}

.ajax-page-title {
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: left;
}

.ajax-page-title h1 {
  display: inline-block;
  margin: 0;
}

.portfolio-block {
  padding-top: 30px;
}

.ajax-page-page-content img {
  max-width: 100%;
}

.portfolio-page-video,
.portfolio-page-carousel,
.portfolio-page-image {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.project-description {
  display: block;
  position: relative;
  padding: 20px 25px 25px;
  background-color: #333;
}

.ajax-page-wrapper .block-title h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.project-general-info {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}

.project-general-info li {
  margin : 0 0 10px;
}

.project-general-info .fa {
  color: #0ba376;
  margin-right: 5px;
}

.project-general-info p {
  margin: 0;
}

.share-buttons {
  display: block;
  margin: 25px 0 0;
}

.share-buttons a {
  display: inline-block;
  margin: 0 3px 0 0;
  padding: 0;
  width: 28px;
  height: 28px;
  color: #b5b5b5;
  background-color: #222;
  border: 1px solid #222;
  text-align: center;
  border-radius: 0;
}

.portfolio-page-content .share-buttons a {
  margin: 0 7px 0 0;
}

.share-buttons a:hover {
  color: #fff;
  background-color: #0ba376;
  border-color: #0ba376;
}

.share-buttons a:last-child {
  margin-right: 0;
  border-radius: 0;
}

.share-buttons a i {
  font-size: 14px;
  line-height: 26px;
}

/* Tags Block */
.tags-block {
  margin: 25px 0 0;
}

.tags-block .block-title {
  margin-bottom: 0;
}

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

.tags > li {
  display: inline-block;
}

.tags a {
  display: inline-block;
  font-size: 12px;
  line-height: 1.5em;
  color: #e5e5e5;
  padding: 2px 7px;
  background-color: #444;
  border-radius: 3px;
  border: 1px solid #444;
  margin: 3px 2px 2px;
}

.tags a:first-child {
  margin-left: 0;
}
/* /Tags Block */

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive-16by9:before {
  padding-top: 56.25%;
}

.embed-responsive-21by9:before{
  padding-top: 42.857143%;
}

.embed-responsive-4by3:before{
  padding-top: 75%;
}

.embed-responsive-1by1:before{
  padding-top:100%;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Portfolio Carousel */
.portfolio-page-carousel {
  overflow: hidden;
}

.portfolio-page-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -20px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.portfolio-page-carousel .owl-nav [class*='owl-'] {
  color: #9e9e9e;
  margin: 0;
  padding: 4px 7px;
  background: #fff;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  line-height: 30px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.portfolio-page-carousel .owl-nav [class*='owl-']:before {
  display: block;
}

.portfolio-page-carousel .owl-nav .owl-prev {
  position: absolute;
  margin-left: -50px;
  left: 0;
}

.portfolio-page-carousel:hover .owl-nav .owl-prev {
  margin-left: 0;
}

.portfolio-page-carousel .owl-nav .owl-next {
  position: absolute;
  margin-right: -50px;
  right: 0;
}

.portfolio-page-carousel:hover .owl-nav .owl-next {
  margin-right: 0;
}

.portfolio-page-carousel .owl-nav .owl-prev:before {
  content: "\F053";
}

.portfolio-page-carousel .owl-nav .owl-next:before {
  content: "\F054";
}

.portfolio-page-carousel .owl-dots {
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 10px 5px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.portfolio-page-carousel .owl-dots .owl-dot {
  display: inline-block;
}

.portfolio-page-carousel .owl-dots .owl-dot.active span, .portfolio-page-carousel .owl-dots .owl-dot:hover span {
  background: #9e9e9e;
}

.portfolio-page-carousel .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 5px;
  background: #f5f5f5;
  border: 1px solid #9e9e9e;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 30px;
}
/* Portfolio Carousel */


/* ------------------------------------------------------------
7. Single Page (Blog Posts, 404 etc.)
------------------------------------------------------------ */
.post-thumbnail {
  background: #b2b2b2;
  display: block;
  position: relative;
  width: 100%;
  z-index: 0;
}

.single-page-content .post-content {
  position: relative;
  margin-top: -70px;
  margin-left: 40px;
  margin-right: 40px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #222;
  z-index: 1;
}

.entry-header {
  position: relative;
  z-index: 1;
  padding: 5px 0 0;
}

.entry-header .entry-meta {
  color: #9e9e9e;
  margin: 15px 0;
  font-size: 13px;
}

.entry-meta a {
  color: #b5b5b5;
}

.entry-title {
  font-size: 32px;
  line-height: 1.3;
  margin: 15px 0 15px 0;
}

.entry-meta.entry-meta-bottom {
  display: inline-block;
  width: 100%;
  background-color: #333;
  border: 1px solid #444;
  padding: 0 10px;
  margin: 30px 0 0;
}

.entry-meta.entry-meta-bottom .date-author {
  display: inline-block;
  line-height: 28px;
  margin: 5px 0;
}

.entry-meta.entry-meta-bottom .share-buttons {
  display: inline-block;
  margin: 5px 0;
}

.entry-meta.entry-meta-bottom .share-buttons {
  display: inline-block;
  margin: 5px 0;
}

.entry-meta-bottom .entry-share {
  float: right;
}

.entry-meta.entry-meta-bottom .date-author > span:after {
  content: '';
  height: 14px;
  line-height: 1em;
  display: inline-block;
  margin: 0 6px 0 9px;
  background-color: #e5e5e5;
  width: 1px;
  top: 2px;
  position: relative;
}

.entry-meta.entry-meta-bottom .date-author > span:last-child:after,
.entry-meta.entry-meta-bottom .date-author > span:first-child:last-child:after {
  display: none;
}

.post-tags {
  margin: 30px 0;
  text-align: left;
}

blockquote {
  padding: 15px 20px;
  margin: 20px 0;
  font-size: 1em;
  border-left: 2px solid #d8d8d8;
  font-style: italic;
}


/* ------------------------------------------------------------
8. Media Queries
------------------------------------------------------------ */
@media only screen and (max-width: 1280px) {
 .page {
    padding-left: 30px;
 }

 .header {
    max-width: 330px;
  }

  .content-area {
    max-width: calc(100% - 330px);
  }
}

@media only screen and (min-width: 1025px) {
  .menu-toggle {
    display: none;
  }

    #titleFixedOWL {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
  .header {
    position: absolute;
    width: 100%;
    max-width: 330px;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    z-index: 99;
    padding: 30px 30px 10px 30px;
    text-align: center;
    opacity: 1;
    visibility: visible;
    overflow: auto;
    transition: all .25s ease-in-out;
  }

  .header .copyrights {
    right: 0;
    width: 100%;
    position: relative;
    margin-top: 30px;
  }

  .page {
    padding: 0;
  }

  .page-content {
    padding: 0;
    margin: 0;
    border-radius: 0;
      min-height: 100vh !important;
  /*  min-height: 100%;*/
  }

    #semOWL {
        display: none;
    }



  .content-area {
    max-width: 100%;
  }

  .animated-section,
  .single-page-content {
    border-radius: 0;
    overflow: auto !important;
  }

  .header-titles h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .header-titles h4 {
    font-size: 17px;
  }

  .header-photo {
    max-width: 130px;
    margin-bottom: 25px;
  }

  .mobile-menu-hide {
    width: 0;
    right: 0;
    margin-right: -100%;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: none;
  }

  ul.main-menu {
    margin: 30px 0;
  }

  ul.main-menu a {
    display: block;
    color: #fff;
    padding: 12px 0;
    line-height: 21px;
    opacity: .7;
  }

  ul.main-menu a.active {
    opacity: 1;
  }

  ul.main-menu .menu-icon {
    display: none;
  }

  ul.main-menu .link-text {
    font-size: 16px;
    line-height: 21px;
  }

  .menu-toggle {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    line-height: 46px;
    text-align: center;
    background-color: #0ba376;
    right: 10px;
    font-size: 19px;
    top: 10px;
    border-radius: 30px;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 900;
  }

  .menu-toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 50%;
    background: #fff;
    border-radius: 5px;
    opacity: 1;
    left: 25%;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }

  .menu-toggle span:nth-child(1) {
    top: 16px;
    transform-origin: left center;
  }

  .menu-toggle span:nth-child(2) {
    top: 22px;
    transform-origin: left center;
  }

  .menu-toggle span:nth-child(3) {
    top: 28px;
    transform-origin: left center;
  }

  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 13px;
    left: 15px;
  }

  .menu-toggle.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 30px;
    left: 15px;
  }

  .lmpixels-arrows-nav {
    background-color: rgba(0,0,0,.6);
    width: 48px;
    right: 10px;
    bottom: 10px;
    padding: 5px 0;
    border: 2px solid #0ba376;
      display: none;
  }

  .lmpixels-arrows-nav div {
    font-size: 24px;
  }

  .single-page-content .post-content {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
  }
}



@media only screen and (max-width: 768px) {
  .portfolio-grid figure {
    width: 50%;
  }

  .info-list {
    margin-top: 20px;
  }

  .blog-post-content {
    padding: 0;
    margin: 30px 0 0;
  }

  .blog-masonry.two-columns .item,
  .blog-masonry.three-columns .item {
    width: 100%;
  }

  .portfolio-grid figure,
  .portfolio-grid.three-columns figure {
    width: 50%;
  }

  .portfolio-grid.four-columns figure,
  .portfolio-grid.five-columns figure {
    width: 33.3333333%;
  }

  .page-portfolio-loaded .portfolio-page-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }

  .portfolio-page-carousel .owl-nav .owl-prev {
    margin-left: 0;
  }

  .portfolio-page-carousel .owl-nav .owl-next {
    margin-right: 0;
  }

  .portfolio-page-carousel .owl-nav .owl-prev,
  .portfolio-page-carousel .owl-nav .owl-next {
    background-color: rgba(255,255,255,.55);
  }

  .single-page-content .portfolio-page-content {
    padding-left: 30px;
    padding-right: 30px;
  }
}


@media only screen and (max-width: 480px) {
  .section-title-block.first-style .section-description {
    margin: 7px 0 0;
    width: 100%;
  }

  .portfolio-grid figure {
    width: 100%;
  }

  .portfolio-grid.three-columns figure,
  .portfolio-grid.two-columns figure {
    width: 100%;
  }

  .portfolio-grid figure,
  .portfolio-grid.two-columns figure,
  .portfolio-grid.three-columns figure,
  .portfolio-grid.four-columns figure,
  .portfolio-grid.five-columns figure {
    width: 100%;
  }

  .timeline-second-style .timeline-item {
    position: relative;
    display: block;
  }

  .timeline-second-style .left-part {
    width: 100%;
    display: block;
    padding-left: 25px;
    min-height: 100%;
    text-align: left;
  }

  .timeline-second-style .divider {
    left: 0;
  }

  .timeline-second-style .right-part {
    width: 100%;
    display: block;
    padding-left: 25px;
    padding-right: 0;
  }

  .single-page-content .post-content {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .controls.two-columns .right-column,
  .controls.two-columns .left-column {
    float: none;
    margin: 0;
    width: 100%;
  }
}



/* =============================================================================
9. Pricing
============================================================================= */
/* Pricing */
.fw-pricing .fw-package {
  background-color: #333;
  border: 2px solid #444;
  border-radius: 15px;
  padding: 30px 30px;
  margin-bottom: 10px;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.fw-pricing .fw-package-wrap.highlight-col .fw-package {
  transform: translateY(-5px);
  -o-box-shadow: 0 7px 12px rgba(0, 0, 0, .12);
  box-shadow: 0 7px 12px rgba(0, 0, 0, .12);
}

.fw-pricing .fw-package:hover,
.fw-pricing .fw-package-wrap.highlight-col .fw-package:hover {
  transform: translateY(-9px);
  -o-box-shadow: 0 18px 24px rgba(0, 0, 0, .15);
  box-shadow: 0 18px 24px rgba(0, 0, 0, .15);
}

.fw-pricing .fw-package-wrap.highlight-col .fw-heading-row span {
  position: relative;
  display: inline-block;
}

.fw-pricing .fw-package-wrap.highlight-col .fw-heading-row span:after {
  content: '';
  height: 2px;
  margin-top: 0;
  background-color: #0ba376;
  position: absolute;
  left: 0;
  bottom: -3px;
  right: 0;
}

.fw-pricing .fw-pricing-row {
  padding: 30px 0 10px;
}

.fw-pricing .fw-pricing-row span {
  display: block;
  line-height: 1;
  color: #f5f5f5;
  font-size: 42px;
}

.fw-pricing .fw-pricing-row small {
  color: #aaa;
  display: block;
}

.fw-pricing .fw-default-row {
  padding: 5px 0;
  font-size: 14px;
}

.fw-pricing .fw-button-row {
  padding: 10px 0 20px;
}

.fw-pricing .fw-price-icon-no:before {
    content: "\F068";
    color: #e87878;
}

.fw-pricing .fw-price-icon-yes:before {
    content: "\F058";
    color: #ade878;
}

/* table */
.fw-table table {
  width: 100%;
  border: 1px solid #eee;
  font-size: .875em;
}

.fw-table table tr,
.fw-table table tr.heading-row {
  border-bottom: 1px solid #eee;
}

.fw-table table tr:not(.heading-row):last-child {
  border-bottom: 0;
}

.fw-table table th {
  padding: 7px 12px;
  border-right: 1px solid #eee;
}

.fw-table table td {
  padding: 7px 12px;
  border-right: 1px solid #eee;
}

.fw-table table td:last-child {
  border-right: 0;
}



/* =============================================================================
10. Updates
============================================================================= */

/* v1.1 */
.lm-animated-bg {
  position: absolute;
  width: auto;
  height: auto;
  top: -28px;
  left: -28px;
  right: -28px;
  bottom: -28px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

.vcentered {
  vertical-align: middle;
  width: 100%;
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  text-align: center;
}

.vcentered .row {
  width: 100%;
}

.title-block {
  position: relative;
  text-align: center;
}

.title-block h2 {
  color: #f5f5f5;
  font-size: 60px;
  line-height: 74px;
  margin: 0;
  text-align: center;
}

.title-block .sp-subtitle {
  color: #aaa;
  font-size: 21px;
  font-weight: 300;
  margin: 5px 0;
  text-align: center;
}

.text-rotation {
  display: block;
  width: 100%;
  position: relative;
}

.start-page .mask {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(10,10,10,0.45);
}

.fun-fact {
  position: relative;
  text-align: center;
  width: 100%;
  display: block;
  margin: 0 0 15px;
  background: #333;
  padding: 25px 10px 15px;
  border: 2px solid #444;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.fun-fact:hover {
  transform: translateY(-5px);
  -o-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12);
}

.fun-fact.gray-bg {
  background-color: #fcfcfc;
}

.fun-fact h4 {
  font-size: 16px;
  margin: 15px;
}

.fun-fact i {
  position: relative;
  font-size: 33px;
  color: #0ba376;
  margin-bottom: 6px;
  width: 33px;
  height: 33px;
}

.fun-fact .lm-info-block {
  font-size: 24px;
  font-weight: 400;
  display: block;
  margin: 10px 0;
  color: #0ba376;
}

.fun-fact-block-value {
  color: #aaa;
  font-size: 36px;
  line-height: 50px;
  display: block;
  margin: 15px 0 10px;
}

.fun-fact-block-text {
  display: block;
}

@media only screen and (max-width: 1024px) {
 .lm-animated-bg {
    display: none;
 }

 .title-block h2 {
    font-size: 48px;
    line-height: 56px;
    margin: 0 0 10px;
    text-align: center;
  }

  .title-block .sp-subtitle {
    font-size: 18px;
  }
}

/**
 * Owl Carousel v2.2.0
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y; }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    -webkit-transform-style: preserve-3d; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut; }

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

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

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom {
  cursor: pointer;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }

button.mfp-close:hover,
button.mfp-close:visited,
button.mfp-close:focus,
button.mfp-arrow:hover,
button.mfp-arrow:visited,
button.mfp-arrow:focus {
  background: transparent;
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  margin-top: 3px;
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-bottom-iframe-title {
  position: absolute;
  margin-top: 10px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }


/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.25s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.25s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    transform: scale(0.75); }
  .mfp-arrow-left {
    transform-origin: 0; }
  .mfp-arrow-right {
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }
/* perfect-scrollbar v0.8.1 */
.ps{touch-action:auto;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps{overflow:auto !important}}.ps.ps--active-x>.ps__scrollbar-x-rail,.ps.ps--active-y>.ps__scrollbar-y-rail{display:block;background-color:transparent}.ps.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail{background-color:#eee;opacity:.9}.ps.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail>.ps__scrollbar-x{background-color:#999;height:11px}.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail{background-color:#eee;opacity:.9}.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y{background-color:#999;width:11px}.ps>.ps__scrollbar-x-rail{display:none;position:absolute;opacity:0;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:15px}.ps>.ps__scrollbar-x-rail>.ps__scrollbar-x{position:absolute;background-color:#aaa;border-radius:6px;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;bottom:2px;height:6px}.ps>.ps__scrollbar-x-rail:hover>.ps__scrollbar-x,.ps>.ps__scrollbar-x-rail:active>.ps__scrollbar-x{height:11px}.ps>.ps__scrollbar-y-rail{display:none;position:absolute;opacity:0;transition:background-color .2s linear, opacity .2s linear;right:0;width:15px}.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y{position:absolute;background-color:#aaa;border-radius:6px;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;right:2px;width:6px}.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y,.ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y{width:11px}.ps:hover.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail{background-color:#eee;opacity:.9}.ps:hover.ps--in-scrolling.ps--x>.ps__scrollbar-x-rail>.ps__scrollbar-x{background-color:#999;height:11px}.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail{background-color:#eee;opacity:.9}.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y{background-color:#999;width:11px}.ps:hover>.ps__scrollbar-x-rail,.ps:hover>.ps__scrollbar-y-rail{opacity:.6}.ps:hover>.ps__scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps:hover>.ps__scrollbar-x-rail:hover>.ps__scrollbar-x{background-color:#999}.ps:hover>.ps__scrollbar-y-rail:hover{background-color:#eee;opacity:.9}.ps:hover>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y{background-color:#999}/* animation sets */

/* move from / to  */

.animated-section-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

.animated-section-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.animated-section-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

.animated-section-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}

.animated-section-moveToTop {
	-webkit-animation: moveToTop .6s ease both;
	animation: moveToTop .6s ease both;
}

.animated-section-moveFromTop {
	-webkit-animation: moveFromTop .6s ease both;
	animation: moveFromTop .6s ease both;
}

.animated-section-moveToBottom {
	-webkit-animation: moveToBottom .6s ease both;
	animation: moveToBottom .6s ease both;
}

.animated-section-moveFromBottom {
	-webkit-animation: moveFromBottom .6s ease both;
	animation: moveFromBottom .6s ease both;
}

/* fade */

.animated-section-fade {
	-webkit-animation: fade .7s ease both;
	animation: fade .7s ease both;
}

/* move from / to and fade */

.animated-section-moveToLeftFade {
	-webkit-animation: moveToLeftFade .7s ease both;
	animation: moveToLeftFade .7s ease both;
}

.animated-section-moveFromLeftFade {
	-webkit-animation: moveFromLeftFade .7s ease both;
	animation: moveFromLeftFade .7s ease both;
}

.animated-section-moveToRightFade {
	-webkit-animation: moveToRightFade .7s ease both;
	animation: moveToRightFade .7s ease both;
}

.animated-section-moveFromRightFade {
	-webkit-animation: moveFromRightFade .7s ease both;
	animation: moveFromRightFade .7s ease both;
}

.animated-section-moveToTopFade {
	-webkit-animation: moveToTopFade .7s ease both;
	animation: moveToTopFade .7s ease both;
}

.animated-section-moveFromTopFade {
	-webkit-animation: moveFromTopFade .7s ease both;
	animation: moveFromTopFade .7s ease both;
}

.animated-section-moveToBottomFade {
	-webkit-animation: moveToBottomFade .7s ease both;
	animation: moveToBottomFade .7s ease both;
}

.animated-section-moveFromBottomFade {
	-webkit-animation: moveFromBottomFade .7s ease both;
	animation: moveFromBottomFade .7s ease both;
}

/* move to with different easing */

.animated-section-moveToLeftEasing {
	-webkit-animation: moveToLeft .7s ease-in-out both;
	animation: moveToLeft .7s ease-in-out both;
}
.animated-section-moveToRightEasing {
	-webkit-animation: moveToRight .7s ease-in-out both;
	animation: moveToRight .7s ease-in-out both;
}
.animated-section-moveToTopEasing {
	-webkit-animation: moveToTop .7s ease-in-out both;
	animation: moveToTop .7s ease-in-out both;
}
.animated-section-moveToBottomEasing {
	-webkit-animation: moveToBottom .7s ease-in-out both;
	animation: moveToBottom .7s ease-in-out both;
}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	from { }
	to { transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight {
	from { }
	to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight {
	from { }
	to { transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
	from { }
	to { transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
	from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
	from { transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
	from { }
	to { transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
	from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
	from { transform: translateY(100%); }
}

/* fade */

@-webkit-keyframes fade {
	from { }
	to { opacity: 0.3; }
}
@keyframes fade {
	from { }
	to { opacity: 0.3; }
}

/* move from / to and fade */

@-webkit-keyframes moveToLeftFade {
	from { }
	to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
	from { }
	to { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFade {
	from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
	from { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveToRightFade {
	from { }
	to { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveToRightFade {
	from { }
	to { opacity: 0.3; transform: translateX(100%); }
}

@-webkit-keyframes moveFromRightFade {
	from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
	from { opacity: 0.3; transform: translateX(100%); }
}

@-webkit-keyframes moveToTopFade {
	from { }
	to { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
	from { }
	to { opacity: 0.3; transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTopFade {
	from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
	from { opacity: 0.3; transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottomFade {
	from { }
	to { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveToBottomFade {
	from { }
	to { opacity: 0.3; transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottomFade {
	from { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottomFade {
	from { opacity: 0.3; transform: translateY(100%); }
}

/* scale and fade */

.animated-section-scaleDown {
	-webkit-animation: scaleDown .7s ease both;
	animation: scaleDown .7s ease both;
}

.animated-section-scaleUp {
	-webkit-animation: scaleUp .7s ease both;
	animation: scaleUp .7s ease both;
}

.animated-section-scaleUpDown {
	-webkit-animation: scaleUpDown .5s ease both;
	animation: scaleUpDown .5s ease both;
}

.animated-section-scaleDownUp {
	-webkit-animation: scaleDownUp .5s ease both;
	animation: scaleDownUp .5s ease both;
}

.animated-section-scaleDownCenter {
	-webkit-animation: scaleDownCenter .4s ease-in both;
	animation: scaleDownCenter .4s ease-in both;
}

.animated-section-scaleUpCenter {
	-webkit-animation: scaleUpCenter .4s ease-out both;
	animation: scaleUpCenter .4s ease-out both;
}

/********************************* keyframes **************************************/

/* scale and fade */

@-webkit-keyframes scaleDown {
	from { }
	to { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleDown {
	from { }
	to { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes scaleUpDown {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleUpDown {
	from { opacity: 0; transform: scale(1.2); }
}

@-webkit-keyframes scaleDownUp {
	from { }
	to { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleDownUp {
	from { }
	to { opacity: 0; transform: scale(1.2); }
}

@-webkit-keyframes scaleDownCenter {
	from { }
	to { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleDownCenter {
	from { }
	to { opacity: 0; transform: scale(.7); }
}

@-webkit-keyframes scaleUpCenter {
	from { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleUpCenter {
	from { opacity: 0; transform: scale(.7); }
}

/* rotate sides first and scale */

.animated-section-rotateRightSideFirst {
	transform-origin: 0% 50%;
	-webkit-animation: rotateRightSideFirst .8s both ease-in;
	animation: rotateRightSideFirst .8s both ease-in;
}
.animated-section-rotateLeftSideFirst {
	transform-origin: 100% 50%;
	-webkit-animation: rotateLeftSideFirst .8s both ease-in;
	animation: rotateLeftSideFirst .8s both ease-in;
}
.animated-section-rotateTopSideFirst {
	transform-origin: 50% 100%;
	-webkit-animation: rotateTopSideFirst .8s both ease-in;
	animation: rotateTopSideFirst .8s both ease-in;
}
.animated-section-rotateBottomSideFirst {
	transform-origin: 50% 0%;
	-webkit-animation: rotateBottomSideFirst .8s both ease-in;
	animation: rotateBottomSideFirst .8s both ease-in;
}

/* flip */

.animated-section-flipOutRight {
	transform-origin: 50% 50%;
	-webkit-animation: flipOutRight .5s both ease-in;
	animation: flipOutRight .5s both ease-in;
}
.animated-section-flipInLeft {
	transform-origin: 50% 50%;
	-webkit-animation: flipInLeft .5s both ease-out;
	animation: flipInLeft .5s both ease-out;
}
.animated-section-flipOutLeft {
	transform-origin: 50% 50%;
	-webkit-animation: flipOutLeft .5s both ease-in;
	animation: flipOutLeft .5s both ease-in;
}
.animated-section-flipInRight {
	transform-origin: 50% 50%;
	-webkit-animation: flipInRight .5s both ease-out;
	animation: flipInRight .5s both ease-out;
}
.animated-section-flipOutTop {
	transform-origin: 50% 50%;
	-webkit-animation: flipOutTop .5s both ease-in;
	animation: flipOutTop .5s both ease-in;
}
.animated-section-flipInBottom {
	transform-origin: 50% 50%;
	-webkit-animation: flipInBottom .5s both ease-out;
	animation: flipInBottom .5s both ease-out;
}
.animated-section-flipOutBottom {
	transform-origin: 50% 50%;
	-webkit-animation: flipOutBottom .5s both ease-in;
	animation: flipOutBottom .5s both ease-in;
}
.animated-section-flipInTop {
	transform-origin: 50% 50%;
	-webkit-animation: flipInTop .5s both ease-out;
	animation: flipInTop .5s both ease-out;
}

/* rotate fall */

.animated-section-rotateFall {
	transform-origin: 0% 0%;
	-webkit-animation: rotateFall 1s both ease-in;
	animation: rotateFall 1s both ease-in;
}

/* rotate newspaper */
.animated-section-rotateOutNewspaper {
	transform-origin: 50% 50%;
	-webkit-animation: rotateOutNewspaper .5s both ease-in;
	animation: rotateOutNewspaper .5s both ease-in;
}
.animated-section-rotateInNewspaper {
	transform-origin: 50% 50%;
	-webkit-animation: rotateInNewspaper .5s both ease-out;
	animation: rotateInNewspaper .5s both ease-out;
}

/* push */
.animated-section-rotatePushLeft {
	transform-origin: 0% 50%;
	-webkit-animation: rotatePushLeft .8s both ease;
	animation: rotatePushLeft .8s both ease;
}
.animated-section-rotatePushRight {
	transform-origin: 100% 50%;
	-webkit-animation: rotatePushRight .8s both ease;
	animation: rotatePushRight .8s both ease;
}
.animated-section-rotatePushTop {
	transform-origin: 50% 0%;
	-webkit-animation: rotatePushTop .8s both ease;
	animation: rotatePushTop .8s both ease;
}
.animated-section-rotatePushBottom {
	transform-origin: 50% 100%;
	-webkit-animation: rotatePushBottom .8s both ease;
	animation: rotatePushBottom .8s both ease;
}

/* pull */
.animated-section-rotatePullRight {
	transform-origin: 100% 50%;
	-webkit-animation: rotatePullRight .5s both ease;
	animation: rotatePullRight .5s both ease;
}
.animated-section-rotatePullLeft {
	transform-origin: 0% 50%;
	-webkit-animation: rotatePullLeft .5s both ease;
	animation: rotatePullLeft .5s both ease;
}
.animated-section-rotatePullTop {
	transform-origin: 50% 0%;
	-webkit-animation: rotatePullTop .5s both ease;
	animation: rotatePullTop .5s both ease;
}
.animated-section-rotatePullBottom {
	transform-origin: 50% 100%;
	-webkit-animation: rotatePullBottom .5s both ease;
	animation: rotatePullBottom .5s both ease;
}

/* fold */
.animated-section-rotateFoldRight {
	transform-origin: 0% 50%;
	-webkit-animation: rotateFoldRight .7s both ease;
	animation: rotateFoldRight .7s both ease;
}
.animated-section-rotateFoldLeft {
	transform-origin: 100% 50%;
	-webkit-animation: rotateFoldLeft .7s both ease;
	animation: rotateFoldLeft .7s both ease;
}
.animated-section-rotateFoldTop {
	transform-origin: 50% 100%;
	-webkit-animation: rotateFoldTop .7s both ease;
	animation: rotateFoldTop .7s both ease;
}
.animated-section-rotateFoldBottom {
	transform-origin: 50% 0%;
	-webkit-animation: rotateFoldBottom .7s both ease;
	animation: rotateFoldBottom .7s both ease;
}

/* unfold */
.animated-section-rotateUnfoldLeft {
	transform-origin: 100% 50%;
	-webkit-animation: rotateUnfoldLeft .7s both ease;
	animation: rotateUnfoldLeft .7s both ease;
}
.animated-section-rotateUnfoldRight {
	transform-origin: 0% 50%;
	-webkit-animation: rotateUnfoldRight .7s both ease;
	animation: rotateUnfoldRight .7s both ease;
}
.animated-section-rotateUnfoldTop {
	transform-origin: 50% 100%;
	-webkit-animation: rotateUnfoldTop .7s both ease;
	animation: rotateUnfoldTop .7s both ease;
}
.animated-section-rotateUnfoldBottom {
	transform-origin: 50% 0%;
	-webkit-animation: rotateUnfoldBottom .7s both ease;
	animation: rotateUnfoldBottom .7s both ease;
}

/* room walls */
.animated-section-rotateRoomLeftOut {
	transform-origin: 100% 50%;
	-webkit-animation: rotateRoomLeftOut .8s both ease;
	animation: rotateRoomLeftOut .8s both ease;
}
.animated-section-rotateRoomLeftIn {
	transform-origin: 0% 50%;
	-webkit-animation: rotateRoomLeftIn .8s both ease;
	animation: rotateRoomLeftIn .8s both ease;
}
.animated-section-rotateRoomRightOut {
	transform-origin: 0% 50%;
	-webkit-animation: rotateRoomRightOut .8s both ease;
	animation: rotateRoomRightOut .8s both ease;
}
.animated-section-rotateRoomRightIn {
	transform-origin: 100% 50%;
	-webkit-animation: rotateRoomRightIn .8s both ease;
	animation: rotateRoomRightIn .8s both ease;
}
.animated-section-rotateRoomTopOut {
	transform-origin: 50% 100%;
	-webkit-animation: rotateRoomTopOut .8s both ease;
	animation: rotateRoomTopOut .8s both ease;
}
.animated-section-rotateRoomTopIn {
	transform-origin: 50% 0%;
	-webkit-animation: rotateRoomTopIn .8s both ease;
	animation: rotateRoomTopIn .8s both ease;
}
.animated-section-rotateRoomBottomOut {
	transform-origin: 50% 0%;
	-webkit-animation: rotateRoomBottomOut .8s both ease;
	animation: rotateRoomBottomOut .8s both ease;
}
.animated-section-rotateRoomBottomIn {
	transform-origin: 50% 100%;
	-webkit-animation: rotateRoomBottomIn .8s both ease;
	animation: rotateRoomBottomIn .8s both ease;
}

/* cube */
.animated-section-rotateCubeLeftOut {
	transform-origin: 100% 50%;
	-webkit-animation: rotateCubeLeftOut .6s both ease-in;
	animation: rotateCubeLeftOut .6s both ease-in;
}
.animated-section-rotateCubeLeftIn {
	transform-origin: 0% 50%;
	-webkit-animation: rotateCubeLeftIn .6s both ease-in;
	animation: rotateCubeLeftIn .6s both ease-in;
}
.animated-section-rotateCubeRightOut {
	transform-origin: 0% 50%;
	-webkit-animation: rotateCubeRightOut .6s both ease-in;
	animation: rotateCubeRightOut .6s both ease-in;
}
.animated-section-rotateCubeRightIn {
	transform-origin: 100% 50%;
	-webkit-animation: rotateCubeRightIn .6s both ease-in;
	animation: rotateCubeRightIn .6s both ease-in;
}
.animated-section-rotateCubeTopOut {
	transform-origin: 50% 100%;
	-webkit-animation: rotateCubeTopOut .6s both ease-in;
	animation: rotateCubeTopOut .6s both ease-in;
}
.animated-section-rotateCubeTopIn {
	transform-origin: 50% 0%;
	-webkit-animation: rotateCubeTopIn .6s both ease-in;
	animation: rotateCubeTopIn .6s both ease-in;
}
.animated-section-rotateCubeBottomOut {
	transform-origin: 50% 0%;
	-webkit-animation: rotateCubeBottomOut .6s both ease-in;
	animation: rotateCubeBottomOut .6s both ease-in;
}
.animated-section-rotateCubeBottomIn {
	transform-origin: 50% 100%;
	-webkit-animation: rotateCubeBottomIn .6s both ease-in;
	animation: rotateCubeBottomIn .6s both ease-in;
}

/* carousel */
.animated-section-rotateCarouselLeftOut {
	transform-origin: 100% 50%;
	-webkit-animation: rotateCarouselLeftOut .8s both ease;
	animation: rotateCarouselLeftOut .8s both ease;
}
.animated-section-rotateCarouselLeftIn {
	transform-origin: 0% 50%;
	-webkit-animation: rotateCarouselLeftIn .8s both ease;
	animation: rotateCarouselLeftIn .8s both ease;
}
.animated-section-rotateCarouselRightOut {
	transform-origin: 0% 50%;
	-webkit-animation: rotateCarouselRightOut .8s both ease;
	animation: rotateCarouselRightOut .8s both ease;
}
.animated-section-rotateCarouselRightIn {
	transform-origin: 100% 50%;
	-webkit-animation: rotateCarouselRightIn .8s both ease;
	animation: rotateCarouselRightIn .8s both ease;
}
.animated-section-rotateCarouselTopOut {
	transform-origin: 50% 100%;
	-webkit-animation: rotateCarouselTopOut .8s both ease;
	animation: rotateCarouselTopOut .8s both ease;
}
.animated-section-rotateCarouselTopIn {
	transform-origin: 50% 0%;
	-webkit-animation: rotateCarouselTopIn .8s both ease;
	animation: rotateCarouselTopIn .8s both ease;
}
.animated-section-rotateCarouselBottomOut {
	transform-origin: 50% 0%;
	-webkit-animation: rotateCarouselBottomOut .8s both ease;
	animation: rotateCarouselBottomOut .8s both ease;
}
.animated-section-rotateCarouselBottomIn {
	transform-origin: 50% 100%;
	-webkit-animation: rotateCarouselBottomIn .8s both ease;
	animation: rotateCarouselBottomIn .8s both ease;
}

/* sides */
.animated-section-rotateSidesOut {
	transform-origin: -50% 50%;
	-webkit-animation: rotateSidesOut .5s both ease-in;
	animation: rotateSidesOut .5s both ease-in;
}
.animated-section-rotateSidesIn {
	transform-origin: 150% 50%;
	-webkit-animation: rotateSidesIn .5s both ease-out;
	animation: rotateSidesIn .5s both ease-out;
}

/* slide */
.animated-section-rotateSlideOut {
	-webkit-animation: rotateSlideOut 1s both ease;
	animation: rotateSlideOut 1s both ease;
}
.animated-section-rotateSlideIn {
	-webkit-animation: rotateSlideIn 1s both ease;
	animation: rotateSlideIn 1s both ease;
}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotateRightSideFirst {
	0% { }
	40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateRightSideFirst {
	0% { }
	40% { transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateLeftSideFirst {
	0% { }
	40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateLeftSideFirst {
	0% { }
	40% { transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateTopSideFirst {
	0% { }
	40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateTopSideFirst {
	0% { }
	40% { transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateBottomSideFirst {
	0% { }
	40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateBottomSideFirst {
	0% { }
	40% { transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

/* flip */

@-webkit-keyframes flipOutRight {
	from { }
	to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipOutRight {
	from { }
	to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInLeft {
	from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipInLeft {
	from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutLeft {
	from { }
	to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipOutLeft {
	from { }
	to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInRight {
	from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipInRight {
	from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutTop {
	from { }
	to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipOutTop {
	from { }
	to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInBottom {
	from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipInBottom {
	from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutBottom {
	from { }
	to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipOutBottom {
	from { }
	to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInTop {
	from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipInTop {
	from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

/* fall */

@-webkit-keyframes rotateFall {
	0% { -webkit-transform: rotateZ(0deg); }
	20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
	40% { -webkit-transform: rotateZ(17deg); }
	60% { -webkit-transform: rotateZ(16deg); }
	100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
	0% { transform: rotateZ(0deg); }
	20% { transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	40% { transform: rotateZ(17deg); }
	60% { transform: rotateZ(16deg); }
	100% { transform: translateY(100%) rotateZ(17deg); }
}

/* newspaper */

@-webkit-keyframes rotateOutNewspaper {
	from { }
	to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
	from { }
	to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

@-webkit-keyframes rotateInNewspaper {
	from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}
@keyframes rotateInNewspaper {
	from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}

/* push */

@-webkit-keyframes rotatePushLeft {
	from { }
	to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
	from { }
	to { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePushRight {
	from { }
	to { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePushRight {
	from { }
	to { opacity: 0; transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePushTop {
	from { }
	to { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePushTop {
	from { }
	to { opacity: 0; transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePushBottom {
	from { }
	to { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePushBottom {
	from { }
	to { opacity: 0; transform: rotateX(90deg); }
}

/* pull */

@-webkit-keyframes rotatePullRight {
	from { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePullRight {
	from { opacity: 0; transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePullLeft {
	from { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePullLeft {
	from { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePullTop {
	from { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePullTop {
	from { opacity: 0; transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePullBottom {
	from { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePullBottom {
	from { opacity: 0; transform: rotateX(90deg); }
}

/* fold */

@-webkit-keyframes rotateFoldRight {
	from { }
	to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateFoldRight {
	from { }
	to { opacity: 0; transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateFoldLeft {
	from { }
	to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateFoldLeft {
	from { }
	to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateFoldTop {
	from { }
	to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateFoldTop {
	from { }
	to { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateFoldBottom {
	from { }
	to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateFoldBottom {
	from { }
	to { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
}

/* unfold */

@-webkit-keyframes rotateUnfoldLeft {
	from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateUnfoldLeft {
	from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateUnfoldRight {
	from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateUnfoldRight {
	from { opacity: 0; transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateUnfoldTop {
	from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateUnfoldTop {
	from { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateUnfoldBottom {
	from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateUnfoldBottom {
	from { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
}

/* room walls */

@-webkit-keyframes rotateRoomLeftOut {
	from { }
	to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
	from { }
	to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomLeftIn {
	from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
	from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightOut {
	from { }
	to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomRightOut {
	from { }
	to { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightIn {
	from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomRightIn {
	from { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomTopOut {
	from { }
	to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomTopOut {
	from { }
	to { opacity: .3; transform: translateY(-100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateRoomTopIn {
	from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomTopIn {
	from { opacity: .3; transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomOut {
	from { }
	to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomBottomOut {
	from { }
	to { opacity: .3; transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomIn {
	from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomBottomIn {
	from { opacity: .3; transform: translateY(-100%) rotateX(-90deg); }
}

/* cube */

@-webkit-keyframes rotateCubeLeftOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
	100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateCubeLeftOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
	100% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateCubeLeftIn {
	0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}
@keyframes rotateCubeLeftIn {
	0% { opacity: .3; transform: translateX(100%) rotateY(90deg); }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}

@-webkit-keyframes rotateCubeRightOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
	100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateCubeRightOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
	100% { opacity: .3; transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateCubeRightIn {
	0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}
@keyframes rotateCubeRightIn {
	0% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}

@-webkit-keyframes rotateCubeTopOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
	100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateCubeTopOut {
	0% {}
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
	100% { opacity: .3; transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateCubeTopIn {
	0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}
@keyframes rotateCubeTopIn {
	0% { opacity: .3; transform: translateY(100%) rotateX(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}

@-webkit-keyframes rotateCubeBottomOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
	100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeBottomOut {
	0% { }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
	100% { opacity: .3; transform: translateY(100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateCubeBottomIn {
	0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}
@keyframes rotateCubeBottomIn {
	0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); }
	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}

/* carousel */

@-webkit-keyframes rotateCarouselLeftOut {
	from { }
	to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselLeftOut {
	from { }
	to { opacity: .3; transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselLeftIn {
	from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselLeftIn {
	from { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightOut {
	from { }
	to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselRightOut {
	from { }
	to { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightIn {
	from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselRightIn {
	from { opacity: .3; transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselTopOut {
	from { }
	to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselTopOut {
	from { }
	to { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

@-webkit-keyframes rotateCarouselTopIn {
	from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselTopIn {
	from { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomOut {
	from { }
	to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselBottomOut {
	from { }
	to { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomIn {
	from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselBottomIn {
	from { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

/* sides */

@-webkit-keyframes rotateSidesOut {
	from { }
	to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); }
}
@keyframes rotateSidesOut {
	from { }
	to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
}

@-webkit-keyframes rotateSidesIn {
	from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); }
}
@keyframes rotateSidesIn {
	from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
}

/* slide */

@-webkit-keyframes rotateSlideOut {
	0% { }
	25% { opacity: .5; -webkit-transform: translateZ(-500px); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
	100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideOut {
	0% { }
	25% { opacity: .5; transform: translateZ(-500px); }
	75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
	100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}

@-webkit-keyframes rotateSlideIn {
	0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px); }
	100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@keyframes rotateSlideIn {
	0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
	75% { opacity: .5; transform: translateZ(-500px); }
	100% { opacity: 1; transform: translateZ(0) translateX(0); }
}

/* animation delay classes */

.animated-section-delay100 {
	-webkit-animation-delay: .1s;
	animation-delay: .1s;
}
.animated-section-delay180 {
	-webkit-animation-delay: .180s;
	animation-delay: .180s;
}
.animated-section-delay200 {
	-webkit-animation-delay: .2s;
	animation-delay: .2s;
}
.animated-section-delay300 {
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
.animated-section-delay400 {
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
}
.animated-section-delay500 {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
.animated-section-delay700 {
	-webkit-animation-delay: .7s;
	animation-delay: .7s;
}
.animated-section-delay1000 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*
  nav.scroll {
    background-color: #212529 !important;
    font-size: 90% !important;
    font-weight: 400 !important;
    padding: 0.75em 0 !important;
    letter-spacing: 1px !important;
    color: white !important;
    transition:all 1s !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
  }




@media (min-width: 992px) {
    #mainNav .scroll {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    transition: padding-top 0.3s, padding-bottom 0.3s !important;
    border: none !important;
    background-color: transparent !important;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em !important;
    transition: all 0.3s !important;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 1.1em 1em !important;
  }
  #mainNav.navbar-shrink {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #212529 !important;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em !important;
    padding: 12px 0 !important;
  }
}
*/