@charset "UTF-8";
/*!
 * Sado Hero Header Effects 
 * Version: 3.0
 * Created: 24 May 2019
 * Last Update: 3 Oct 2019
 * Author: Web_Trendy
 * Copyright 2019 © Web_Trendy (https://codecanyon.net/user/web_trendy)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "We are born of LOVE, lover is our mother." -Rumi
 *
 */
/*------------------------------------------------------------------
[Table of contents]

1.0 Variables
2.0 General Styles / .sado-header
3.0 Template Styles
4.0 Animations
5.0 Media Queries
-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
::root {
  --header-height: 100vh; }

/*Yellow*/
/*Dark Gray*/
/*Orange*/
/*--------------------------------------------------------------
2.0 General Styles
--------------------------------------------------------------*/
.sado-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow-x: hidden;
  transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
  .sado-header .sado-header-img-1, .sado-header .sado-header-img-2 {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.6);
    transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    transition-duration: 500ms; }
  .sado-header .sado-header-img-2 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%); }
  .sado-header .sado-header-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    perspective: 1000px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4em;
    box-sizing: border-box;
    color: white;
    will-change: transform;
    transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 999; }
    .sado-header .sado-header-content .header-title {
      font-size: 4em;
      margin: 10px 0px;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
    .sado-header .sado-header-content .header-subtitle-1 {
      font-size: 2em;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1);
      transform-origin: bottom; }
    .sado-header .sado-header-content .header-subtitle-2 {
      font-size: 2em;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1);
      transform: rotateX(-90deg);
      opacity: 0;
      transform-origin: top;
      position: relative;
      top: -15px; }
    .sado-header .sado-header-content .header-scroll {
      display: inline-block;
      position: absolute;
      bottom: 30px;
      cursor: pointer;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
      .sado-header .sado-header-content .header-scroll img {
        max-height: 100%;
        animation: 5s ease 0s infinite normal both running sado-jello-horizontal; }
  .sado-header.active + .sado-body {
    opacity: 1;
    transition-delay: 300ms; }
  .sado-header + .sado-body {
    transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    opacity: 0; }

/*--------------------------------------------------------------
3.0 Template Styles
--------------------------------------------------------------*/
/*Template 3*/
.sado-header.sado-header-3 .sado-header-content .header-title {
  position: relative;
  display: inline-block;
  padding: 0px 10px; }
  .sado-header.sado-header-3 .sado-header-content .header-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ff9800;
    z-index: -1;
    transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
.sado-header.sado-header-3 .sado-header-content .profile {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px; }
.sado-header.sado-header-3 .sado-header-content .blog-icon {
  width: 20px;
  opacity: 0.8;
  filter: invert(1); }
.sado-header.sado-header-3 .sado-header-content .blog-author {
  padding-top: 10px; }
.sado-header.sado-header-3 .sado-header-content .blog-author-wrapper {
  display: flex; }
.sado-header.sado-header-3 .sado-header-content .header-blog {
  display: flex;
  font-size: 75%;
  margin-top: 50px; }
  .sado-header.sado-header-3 .sado-header-content .header-blog > div {
    margin-right: 50px; }
    .sado-header.sado-header-3 .sado-header-content .header-blog > div:first-of-type {
      opacity: 0;
      transform: translateY(-50px);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
    .sado-header.sado-header-3 .sado-header-content .header-blog > div:nth-of-type(2) {
      opacity: 0;
      transform: translateY(-50px);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
    .sado-header.sado-header-3 .sado-header-content .header-blog > div:last-child {
      opacity: 0;
      transform: translateY(-50px);
      transition: all 1000ms cubic-bezier(0.7, 0, 0.3, 1); }
.sado-header.sado-header-3 .sado-header-content .header-scroll {
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 80%; }
  .sado-header.sado-header-3 .sado-header-content .header-scroll img {
    margin-right: 5px;
    filter: invert(1); }
.sado-header.sado-header-3.active .sado-header-img-1 {
  transform: translateX(-100%); }
.sado-header.sado-header-3.active .sado-header-img-2 {
  transform: translateX(0); }
.sado-header.sado-header-3.active .sado-header-content .header-title {
  text-shadow: none;
  padding-left: 0; }
  .sado-header.sado-header-3.active .sado-header-content .header-title:before {
    width: 0; }
.sado-header.sado-header-3.active .sado-header-content .header-subtitle-1 {
  opacity: 0;
  transform: rotateX(90deg);
  transition-delay: 400ms; }
.sado-header.sado-header-3.active .sado-header-content .header-subtitle-2 {
  opacity: 1;
  transform: rotateX(0deg) translateY(-20px);
  transition-delay: 400ms; }
.sado-header.sado-header-3.active .sado-header-content .header-blog > div:first-of-type {
  transition-delay: 300ms;
  transform: translateY(0);
  opacity: 1; }
.sado-header.sado-header-3.active .sado-header-content .header-blog > div:nth-of-type(2) {
  transition-delay: 600ms;
  transform: translateY(0);
  opacity: 1; }
.sado-header.sado-header-3.active .sado-header-content .header-blog > div:last-child {
  transition-delay: 900ms;
  transform: translateY(0);
  opacity: 1; }
.sado-header.sado-header-3.active .header-scroll {
  opacity: 0; }
.sado-header.sado-header-3.active + .sado-body {
  transform: translateY(calc(100vh)); }
.sado-header.sado-header-3 + .sado-body {
  transform: translateY(var(--header-height)); }

/*--------------------------------------------------------------
4.0 Animations
--------------------------------------------------------------*/
@keyframes sado-jello-horizontal {
  0% {
    transform: scale(0.8) translateY(-150%);
    opacity: 0; }
  20%, 80% {
    transform: scale(1) translateY(0px);
    opacity: 1; }
  100% {
    transform: scale(0.8) translateY(150%);
    opacity: 0; } }
/*--------------------------------------------------------------
5.0 Media Queries
--------------------------------------------------------------*/
/*Phone*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .sado-header.sado-header-3 .sado-header-content {
    padding: 2em; }
    .sado-header.sado-header-3 .sado-header-content .header-title {
      font-size: 1.8em; }
    .sado-header.sado-header-3 .sado-header-content .header-subtitle-1, .sado-header.sado-header-3 .sado-header-content .header-subtitle-2 {
      font-size: 1em; }
    .sado-header.sado-header-3 .sado-header-content .header-blog {
      display: block; }
      .sado-header.sado-header-3 .sado-header-content .header-blog > div {
        margin: auto; }
        .sado-header.sado-header-3 .sado-header-content .header-blog > div:first-of-type {
          margin-bottom: 10px; }
        .sado-header.sado-header-3 .sado-header-content .header-blog > div:nth-of-type(2) {
          width: 50%;
          display: inline-block;
          float: left; }
          .sado-header.sado-header-3 .sado-header-content .header-blog > div:nth-of-type(2) > div {
            display: inline-block; }
        .sado-header.sado-header-3 .sado-header-content .header-blog > div:last-child {
          width: 50%;
          display: inline-block;
          float: left; }
          .sado-header.sado-header-3 .sado-header-content .header-blog > div:last-child > div {
            display: inline-block; }
  .sado-header.sado-header-3 .sado-header-img-1, .sado-header.sado-header-3 .sado-header-img-2 {
    height: 100vh;
    object-fit: cover; }
  .sado-header.sado-header-3.active .sado-header-content .header-subtitle-2 {
    transform: rotateX(0deg) translateY(-5px); } }
/* Landscape */
@media screen and (max-width: 823px) and (orientation: landscape) {
  .sado-header.sado-header-3 .sado-header-content {
    padding: 2em; }
    .sado-header.sado-header-3 .sado-header-content .header-title {
      font-size: 2em; }
    .sado-header.sado-header-3 .sado-header-content .header-blog {
      margin-top: 0px; }
    .sado-header.sado-header-3 .sado-header-content .header-subtitle-1, .sado-header.sado-header-3 .sado-header-content .header-subtitle-2 {
      font-size: 1.3em; } }
@media (min-width: 576px) {
  .sado-header .sado-header-content {
    max-width: 540px; } }
@media (min-width: 768px) {
  .sado-header .sado-header-content {
    max-width: 720px; } }
@media (min-width: 992px) {
  .sado-header .sado-header-content {
    max-width: 960px; } }
@media (min-width: 1200px) {
  .sado-header .sado-header-content {
    max-width: 1140px; } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

/*# sourceMappingURL=template3.css.map */