@charset "UTF-8";
/*!
 * Tourit Product Tour & Guide
 * Version: 1.0.0
 * Created: 12 Nov 2019
 * Last Update: 12 Nov 2019
 * Author: Web_Trendy
 * Copyright 2019 © Web_Trendy (https://codecanyon.net/user/web_trendy)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "We carry inside us the wonders we seek outside us." -Rumi
 *
 */
 /*------------------------------------------------------------------
[Table of contents]

1.0 Variables
2.0 General Styles / 
3.0 Media Queries
-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
/*SCSS Variables*/
/*JavaScript Variables*/
:root {
  --tourit-overlay-color: black;
  --tourit-overlay-opacity: 0.5;
  --tourit-dot-width: 20px;
  --tourit-dot-color: orange;
  --tourit-step-min-width: 300px;
  --tourit-step-background: #ffffff; }

/*--------------------------------------------------------------
2.0 General Styles
--------------------------------------------------------------*/
.tourit-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999; }
  .tourit-wrapper ul {
    list-style-type: none; }
    .tourit-wrapper ul li:first-child .step-prev {
      color: #ccc;
      cursor: not-allowed; }
    .tourit-wrapper ul li:last-child .step-next {
      color: #ccc;
      cursor: not-allowed; }
  .tourit-wrapper .single-step {
    background-color: var(--tourit-step-background);
    margin: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    min-width: var(--tourit-step-min-width);
    -webkit-box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease; }
    .tourit-wrapper .single-step:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0; }
    .tourit-wrapper .single-step.bottom-align {
      -webkit-transform: translate(-50%, calc(var(--tourit-dot-width)*1.3));
              transform: translate(-50%, calc(var(--tourit-dot-width)*1.3)); }
      .tourit-wrapper .single-step.bottom-align:before {
        border-right: 7px solid transparent;
        border-bottom: 7px solid var(--tourit-step-background);
        border-left: 7px solid transparent;
        top: -7px;
        left: calc(50% - 7px); }
    .tourit-wrapper .single-step.top-align {
      -webkit-transform: translate(-50%, calc(-100% - var(--tourit-dot-width)*1.3));
              transform: translate(-50%, calc(-100% - var(--tourit-dot-width)*1.3)); }
      .tourit-wrapper .single-step.top-align:before {
        border-right: 7px solid transparent;
        border-top: 7px solid var(--tourit-step-background);
        border-left: 7px solid transparent;
        bottom: -7px;
        left: calc(50% - 7px); }
    .tourit-wrapper .single-step.left-align {
      -webkit-transform: translate(calc(-100% - var(--tourit-dot-width)*1.3), -50%);
              transform: translate(calc(-100% - var(--tourit-dot-width)*1.3), -50%); }
      .tourit-wrapper .single-step.left-align:before {
        border-top: 7px solid transparent;
        border-left: 7px solid var(--tourit-step-background);
        border-bottom: 7px solid transparent;
        right: -7px;
        top: calc(50% - 7px); }
    .tourit-wrapper .single-step.right-align {
      -webkit-transform: translate(calc(var(--tourit-dot-width)*1.3), -50%);
              transform: translate(calc(var(--tourit-dot-width)*1.3), -50%); }
      .tourit-wrapper .single-step.right-align:before {
        border-top: 7px solid transparent;
        border-right: 7px solid var(--tourit-step-background);
        border-bottom: 7px solid transparent;
        left: -7px;
        top: calc(50% - 7px); }
    .tourit-wrapper .single-step.in {
      visibility: visible;
      opacity: 1; }
    .tourit-wrapper .single-step.out {
      visibility: hidden;
      opacity: 0; }
    .tourit-wrapper .single-step .step-header {
      margin: 5px 0;
      position: relative; }
    .tourit-wrapper .single-step .step-close {
      position: absolute;
      right: 0;
      top: 0;
      width: 15px;
      height: 15px;
      cursor: pointer; }
      .tourit-wrapper .single-step .step-close:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #ccc;
        top: calc(50% - 1px);
        left: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease; }
      .tourit-wrapper .single-step .step-close:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #ccc;
        top: calc(50% - 1px);
        left: 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease; }
      .tourit-wrapper .single-step .step-close:hover:before, .tourit-wrapper .single-step .step-close:hover:after {
        background-color: #b3b3b3; }
    .tourit-wrapper .single-step .step-body {
      font-size: 75%;
      color: #7f7f7d; }
    .tourit-wrapper .single-step .step-nav {
      margin: 15px 0 5px 0;
      font-size: 0.7em;
      font-weight: 400;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
    .tourit-wrapper .single-step .step-links span {
      cursor: pointer;
      display: inline-block; }
      .tourit-wrapper .single-step .step-links span:first-child {
        margin-right: 20px; }

.tourit-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--tourit-dot-color);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease; }
  .tourit-dot.in {
    visibility: visible;
    opacity: 1; }
  .tourit-dot.out {
    visibility: hidden;
    opacity: 0; }

.tourit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tourit-overlay-color);
  opacity: var(--tourit-overlay-opacity);
  z-index: 9999;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  visibility: hidden; }
  .tourit-overlay.in {
    visibility: visible; }
  .tourit-overlay.out {
    visibility: hidden; }

/*--------------------------------------------------------------
3.0 Media Queries
--------------------------------------------------------------*/
/*Phone*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .tourit-wrapper .single-step {
    min-width: 300px;
    left: 0 !important;
    top: 0 !important;
    -webkit-transform: none !important;
            transform: none !important; }
    .tourit-wrapper .single-step:before {
      display: none; }

  .tourit-dot {
    display: none !important; } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

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