/* 
------------------
Template Name: OMYOGA - OMYOGA - Yoga Fitness HTML5 Template
Author: Ingenious_team
Author Email: ingeniousteam786@gmail.com
Version: 1
------------------
----------------
Table of Content
----------------
        1. Navbar Part 
        2. banner part
        3. Why Choose Us part
        4. Next Level part
        5. Our Gallery part
        6. Our Instructor part 
        7. Our Clients Say part
        8. Our Pricing Plan part
        9. Our Free Class part
        10. Contact part

Other pages:
        11. About Us page
        12. Our Gallery page
        13. Our Instructor page
        14. 404 page
      
    
*/
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,500,600,700,900|HK Grotesk:400,500,700");

/*============Common CSS Start===============*/

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
em,
ol,
ul,
li,
a {
    margin: 0;
}

a:hover {
    text-decoration: none;
}

button:focus {
    outline: 5px auto transparent;
}

img {
    vertical-align: middle;
}

ul,
ol {
    list-style: none;
}

body {
    overflow-x: hidden;
}

.heading-font {
    font-family: "HK Grotesk", sans-serif;
}

.common {
    padding-top: 98px;
}

.section-head h2 {
    padding-bottom: 50px;
    font-size: 32px;
    letter-spacing: 2px;
    word-spacing: 2px;
    font-weight: 900;
}

/*============Common CSS End===============*/

/*=============Preloader Part CSS Start===================*/

.loading {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 9999999999;
}

.preloader .animation-circle-inverse > span {
    background: rgba(94, 108, 91, 1);
    bottom: 0;
    position: absolute;
    top: 50%;
    left: 48%;
    height: 25px;
    width: 25px;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%), scale(1.3);
    transform: scale(1.3);
    opacity: 0.4;
    -webkit-animation: circleWater 3s linear infinite;
    animation: circleWater 3s linear infinite;
}

/*=============Preloader Part CSS End===================*/

/*===============Navbar Part CSS Start===============*/
.navcss {
    position: fixed;
    width: 100%;
    background: #162A2B;
    height: 100px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all ease 0.6s;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.logo_container {
    position: relative;
}

.logo_container img {
    position: absolute;
    content: "";
    z-index: 9;
    top: 30px;
}

header nav {
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 170px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

header nav ul li {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
}

header nav ul li a {
    display: block;
    font-size: 24px;
    text-decoration: none;
    padding: 10px 0;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-align: center;
    font-family: "HK Grotesk", sans-serif;
    color: #5E6C5B;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-transform: capitalize;
}

header nav ul li a:hover {
    color: #666;
}

.toggle-btn {
    display: block;
    position: fixed;
    z-index: 9999;
    right: 10%;
    top: 13px;
    cursor: pointer;
    height: 66px;
    width: 66px;
    background-color: #fff;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    padding: 22px;
    box-shadow: 0px 1px 30px 0px rgba(240, 84, 86, 0.3);
    -webkit-box-shadow: 0px 1px 30px 0px rgba(240, 84, 86, 0.3);
    -moz-box-shadow: 0px 1px 30px 0px rgba(240, 84, 86, 0.3);
    -o-box-shadow: 0px 1px 30px 0px rgba(240, 84, 86, 0.3);
}

.toggle-btn .bar {
    width: 18px;
    height: 3px;
    margin: 2px auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5E6C5B;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.toggle-btn .bar:nth-child(2) {
    top: 27px;
}

.toggle-btn .bar:nth-child(3) {
    top: 32px;
}

.toggle-btn .bar:nth-child(4) {
    top: 37px;
}

#toggle:checked ~ nav {
    opacity: 1;
    visibility: visible;
}

#toggle:checked ~ nav ul {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#toggle:checked ~ nav ul li {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#toggle:checked ~ nav ul li:nth-child(1) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.3s;
}

#toggle:checked ~ nav ul li:nth-child(2) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.37s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.37s;
}

#toggle:checked ~ nav ul li:nth-child(3) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.42s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.42s;
}

#toggle:checked ~ nav ul li:nth-child(4) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.53s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.53s;
}

#toggle:checked ~ nav ul li:nth-child(5) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.63s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.63s;
}

#toggle:checked ~ nav ul li:nth-child(6) {
    -webkit-transition: all 0.7s cubic-bezier(0.6, 0, 0.8, 1.5) 0.73s;
    transition: all 0.7s cubic-bezier(0.2, 0, 0, 1.5) 0.73s;
}

#toggle:checked + label.toggle-btn .bar {
    background-color: #5E6C5B;
}

#toggle:checked + label.toggle-btn .bar:nth-child(2),
#toggle:checked + label.toggle-btn .bar:nth-child(4) {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
}

#toggle:checked + label.toggle-btn .bar:nth-child(1) {
    -webkit-transform: translate(-47%, 9px) rotate(42deg);
    transform: translate(-47%, 9px) rotate(42deg);
}

#toggle:checked + label.toggle-btn .bar:nth-child(3) {
    -webkit-transform: translate(-47%, -1px) rotate(-42deg);
    transform: translate(-47%, -1px) rotate(-42deg);
}

/* =============Navbar Part CSS End============= */

/* ===============Banner Part CSS Start=========== */

.banner {
    background: url(../images/banner-img.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 93vh;
    position: relative;
    z-index: 0;
}

.banner-l {
    position: absolute;
    content: "";
    width: 600px;
    top: 60%;
    transform: translateY(-50%);
}

.banner-text {
    text-align: left;
}

.banner-text h3 {
    font-family: "HK Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 24px;
    color: #5E6C5B;
    z-index: 99;
    text-transform: capitalize;
}

.banner-text p {
    font-family: "HK Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #444444;
    z-index: 99;
}

.banner-text h1 {
    font-size: 60px;
    word-spacing: 5px;
    color: #222;
    font-weight: 900;
    padding: 10px 0 16px;
    z-index: 99;
    text-transform: capitalize;
}

.banner-btn {
    margin-top: 45px;
}

.banner-btn a {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 2px;
    vertical-align: top;
    text-align: center;
    line-height: 22px;
    color: #ffffff;
    font-weight: 400;
    font-family: "HK Grotesk", sans-serif;
    padding: 13px 32px;
    border-radius: 35px;
    -webkit-transition: all ease 0.7s;
    -moz-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
    background: #5E6C5B;
}

.banner-btn a:hover {
    box-shadow: 0px 13px 20px 0px rgba(94, 108, 91, 0.5);
    -webkit-box-shadow: 0px 13px 20px 0px rgba(94, 108, 91, 0.5);
    -moz-box-shadow: 0px 13px 20px 0px rgba(94, 108, 91, 0.5);
    -o-box-shadow: 0px 13px 20px 0px rgba(94, 108, 91, 0.5);
}

.banner-yoga {
    position: absolute;
    content: "";
    width: 33%;
    right: 16%;
    top: 49%;
    transform: translateY(-50%);
}

.banner-block img {
    z-index: 999;
    padding-top: 34%;
    width: 90%;
}

.banner-block .animation-circle-inverse.left {
    top: 400px;
    left: 36%;
}

.banner-block .animation-circle-inverse {
    position: absolute;
    z-index: -1;
}

.banner-block .animation-circle-inverse > span {
    width: 80px;
    height: 80px;
}

.animation-circle-inverse > span {
    background: rgba(255, 255, 255, 0.8);
    bottom: 0;
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0.3;
    -webkit-animation: circleWater 3s linear infinite;
    animation: circleWater 3s linear infinite;
}

/*==============================
     Banner Part CSS End
================================*/

/*================= 
  Why choose us Part CSS Start
================*/

#about {
    padding-top: 65px;
    padding-bottom: 30px;
    position: relative;
}

.about-inner {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    padding: 40px 25px 30px;
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.07);
    -o-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
}

.about-inner:after {
    position: absolute;
    content: "";
    border: 13px solid #5E6C5B;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    top: -50px;
    left: -43px;
    -webkit-animation: circlesrink 4s linear infinite;
    animation: circlesrink 4s linear infinite;
}

@-webkit-keyframes circlesrink {
    0% {
        -webkit-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
        opacity: 1;
    }

    50% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
        opacity: 0.4;
    }

    100% {
        -webkit-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
        opacity: 1;
    }
}

@keyframes circlesrink {
    0% {
        -webkit-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
        opacity: 1;
    }

    50% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
        opacity: 0.4;
    }

    100% {
        -webkit-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
        opacity: 1;
    }
}

.about-inner:hover {
    transform: translate(0px, -10px);
    transition: all ease 0.6s;
    -webkit-transition: all ease 0.6s;
    -moz-transition: all ease 0.6s;
    -ms-transition: all ease 0.6s;
    -o-transition: all ease 0.6s;
}

.about-inner i {
    color: #5E6C5B;
    border-radius: 4px;
    background: #F4EFE6;
    padding: 30px 20px 20px;
}

.about-inner [class^="flaticon-"]:before,
.about-inner [class*=" flaticon-"]:before,
.about-inner [class^="flaticon-"]:after,
.about-inner [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 30px;
    font-style: 400;
    margin-left: 0px;
}

.about-inner h4 {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 40px 0 16px;
}

.about-inner p {
    font-weight: 400;
    font-size: 16px;
    color: #444;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
}

/*=====================================
 About Us css
======================================*/
.next-level {
    background: #fafafa;
    margin-top: 35px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.next-block {
    position: relative;
    z-index: 99;
}

.next-block img {
    z-index: 99;
}

.next-block .animation-circle-inverse.left {
    top: 210px;
    right: 58%;
}

.next-block .animation-circle-inverse {
    position: absolute;
    z-index: -1;
}

.next-block .animation-circle-inverse > span {
    background: rgba(94, 108, 91, 1);
    bottom: 0;
    position: absolute;
    height: 65px;
    width: 65px;
    border-radius: 100%;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0.4;
    -webkit-animation: circleWater 3s linear infinite;
    animation: circleWater 3s linear infinite;
}

.level-detail h3 {
    font-family: "HK Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 24px;
    padding-top: 30px;
    color: #222;
    z-index: 99;
    text-transform: capitalize;
}

.level-detail h1 {
    padding: 30px 0 20px;
    line-height: 44px;
    font-size: 32px;
    letter-spacing: 2px;
    word-spacing: 2px;
    font-weight: 900;
}

.level-detail p {
    padding-top: 30px;
    font-weight: 400;
    font-size: 16px;
    color: #444;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
}

/* =====================================
 About Us end 
======================================= */
/*============About Part CSS End==============*/

/*================= 
  Our Gallery Part CSS Start
================*/
.gellary-over {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 30px;
}

.gellary-over img {
    transform: scale(1);
    -webkit-transform: scale(1);
}

.gellary-over:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.gellary-over:hover .overlay {
    bottom: 0;
    height: 100%;
    transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all 0.6s ease-in-out 0s;
}

.gellary-over:hover i {
    opacity: 1;
    transition: all ease 0.9s;
    -webkit-transition: all ease 0.9s;
}

.overlay_shape i {
    position: absolute;
    font-size: 22px;
    color: #fff;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    background: #5E6C5B;
    opacity: 0;
}

.overlay {
    position: absolute;
    text-align: center;
    bottom: 100%;
    left: 0%;
    right: 0;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    width: 100%;
    height: 0%;
    transition: all 0.6s ease-in-out 0s;
}

.red-left {
    border-top-left-radius: 30px;
}

.red-right {
    border-top-right-radius: 30px;
}

.red-bot-left {
    border-bottom-left-radius: 30px;
}

.red-bot-right {
    border-bottom-right-radius: 30px;
}

/*======================= 
Our Gallery CSS End
=========================*/

/*===============
Our Instructor Part CSS Start
==============*/
.instructor {
    background: #fafafa;
    margin-top: 65px;
    padding-top: 60px;
    padding-bottom: 40px;
}

.instraction-inner {
    position: relative;
    overflow: hidden;
    display: block;
}

.instraction-inner img {
    transform: scale(1);
    -webkit-transform: scale(1);
}

.instraction-inner:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.instraction-inner:hover .overlay-ins {
    bottom: 0;
    height: 100%;
    transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all 0.6s ease-in-out 0s;
}

.instraction-inner:hover i {
    opacity: 1;
    transition: all ease 0.9s;
    -webkit-transition: all ease 0.9s;
}

.overlay_icons ul {
    float: left;
}

.overlay_icons {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 120px;
}

.overlay_icons i {
    color: #5E6C5B;
    background: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.overlay_icons li:hover i {
    color: #fff;
    background: #5E6C5B;
    -webkit-transition: all ease 0.6s;
    transition: all ease 0.6s;
}

.overlay_icons ul li {
    margin: 8px 4px;
}

.overlay-ins {
    position: absolute;
    text-align: center;
    bottom: 100%;
    left: 0%;
    right: 0;
    background: rgba(255, 69, 86, 0.6);
    overflow: hidden;
    width: 100%;
    height: 0%;
    transition: all 0.6s ease-in-out 0s;
}

.red-left1 {
    border-top-left-radius: 5px;
}

.red-right1 {
    border-top-right-radius: 5px;
}

.red-bot-left1 {
    border-bottom-left-radius: 5px;
}

.red-bot-right1 {
    border-bottom-right-radius: 5px;
}

.inistructor-name {
    padding-bottom: 30px;
}

.inistructor-name h3 {
    font-weight: 900;
    line-height: 24px;
    color: #222;
    letter-spacing: 2px;
    font-size: 22px;
    padding-top: 18px;
    padding-bottom: 3px;
    text-transform: capitalize;
}

.inistructor-name p {
    font-size: 14px;
    color: #444;
    line-height: 24px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
}

/*===============
Our Instructor Part CSS End
===============*/

/*===============
Testimonial Part CSS Start
===============*/
.testimonial-inner {
    position: relative;
    margin: 30px 10px;
    padding: 60px 40px 40px;
    box-shadow: 0px 1px 44px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 44px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 44px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 1px 44px 0px rgba(0, 0, 0, 0.1);
}

.testimonial-inner p {
    font-size: 18px;
    color: #444;
    line-height: 28px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
    padding: 24px 0 20px;
    word-spacing: 1px;
}

.testimonial-inner h3 {
    font-weight: 700;
    color: #222;
    text-transform: capitalize;
    line-height: 24px;
    font-size: 24px;
    padding-bottom: 4px;
    letter-spacing: 1px;
}

.testimonial-inner h6 {
    font-size: 14px;
    color: #222;
    line-height: 26px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
}

.slick-slide img {
    display: inline-block;
}

.slidNext {
    position: absolute;
    top: 50%;
    right: -8%;
    transform: translate(-50%, -50%);
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #5E6C5B;
    z-index: 9;
    color: #5E6C5B;
}

.slidprev {
    position: absolute;
    top: 50%;
    left: -3%;
    transform: translate(-50%, -50%);
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #5E6C5B;
    z-index: 9;
    color: #5E6C5B;
}

.slidNext:hover,
.slidprev:hover {
    background: #5E6C5B;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*===============
Testimonial Part CSS End
=============== */

/* =======================
    Join Class Part HTML Start
    ======================== */
.join-cls {
    background: #162A2B;
    padding: 60px 0;
    margin-top: 60px;
}

.join-text h3 {
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    line-height: 24px;
    font-size: 32px;
    padding-bottom: 4px;
    letter-spacing: 3px;
}

.join-text p {
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 2px;
    padding-top: 20px;
    padding-right: 40px;
}

.white-btn {
    text-align: right;
}

.white-btn a {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 1px;
    vertical-align: top;
    text-align: center;
    line-height: 22px;
    color: #5E6C5B;
    font-weight: 400;
    font-family: "HK Grotesk", sans-serif;
    padding: 12px 28px;
    border-radius: 35px;
    -webkit-transition: all ease 0.7s;
    -moz-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
    background: #fff;
    margin-top: 30px;
}

.white-btn a:hover {
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.16);
    -o-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.16);
}

/* =======================
    Join Class Part HTML End
    ======================== */

/* =======================
    Price Part HTML Start
    ======================== */
.price-plan {
    border-radius: 4px;
    padding: 30px 28px;
    margin: 25px 5px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
}

.price-plan:hover {
    background: #162A2B;
    -webkit-transition: all ease 0.7s;
    -moz-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
}

.price-plan:hover h5,
.price-plan:hover p,
.price-plan:hover h3 {
    color: #fff;
    -webkit-transition: all ease 0.7s;
    -moz-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
}

.price-plan h3 {
    font-weight: 900;
    color: #222;
    text-transform: capitalize;
    line-height: 24px;
    font-size: 24px;
    padding: 20px 0 18px;
    word-spacing: 2px;
}

.price-plan h5 {
    font-weight: 900;
    color: #444;
    text-transform: capitalize;
    line-height: 24px;
    font-size: 24px;
    letter-spacing: 2px;
}

.price-plan p {
    font-size: 16px;
    color: #444;
    line-height: 28px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
    padding-top: 20px;
}

.price-plan:hover a {
    background: #fff;
    color: #162A2B;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.19);
    -o-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.19);
}

/* =======================
    Price Part HTML End
    ======================== */

/*==============
  Contact Part CSS Start
=========================== */
.contact-shad {
    z-index: 9;
    background: #fff;
    position: relative;
    border-radius: 10px;
    padding: 40px 50px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.1);
}

.cont-head h3 {
    color: #5E6C5B;
    font-weight: 900;
    width: 250px;
    line-height: 40px;
    font-size: 32px;
    word-spacing: 1px;
    letter-spacing: 2px;
}

.cont-head p {
    font-size: 16px;
    color: #444;
    line-height: 24px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cont-icon-pad {
    padding-top: 28px;
    padding-left: 40px;
}

.location-icon i {
    font-size: 16px;
    color: #ffffff;
    background: #5E6C5B;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    text-align: center;
    transition: all linear 0.6s;
    -webkit-transition: all linear 0.6s;
    -moz-transition: all linear 0.6s;
    -ms-transition: all linear 0.6s;
    -o-transition: all linear 0.6s;
}

.location-icon i:hover {
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}

.location-txt li {
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 20px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 1px;
}

.contact-form {
    margin-top: 20px;
}

.contact-form input {
    height: 50px;
}

.contact-form .form-group textarea {
    height: 150px;
    padding-top: 10px;
    resize: none;
}

.contact-form textarea::placeholder,
.contact-form input::placeholder {
    color: #aaa;
    opacity: 1;
}

.contact-form .form-group textarea,
.contact-form input {
    width: 100%;
    display: inline-block;
    border: 1px solid #aaa;
    font-size: 16px;
    color: #aaa !important;
    border-radius: 0;
    background: transparent;
    padding-left: 20px;
    font-family: "HK Grotesk", sans-serif;
    letter-spacing: 2px;
}

.contact-form .casino-btn a {
    filter: drop-shadow(0 0px 20px rgba(255, 214, 121, 0.3));
}

.contact-form .casino-btn a:hover {
    filter: drop-shadow(0 0px 20px rgba(152, 51, 134, 0.6));
}

.contact-form form .btn {
    display: block;
    width: 100%;
    -webkit-transform: unset;
    transform: unset;
    margin-top: 25px;
}

.contact-form .btn {
    font-weight: 400;
    font-size: 20px;
    font-family: "HK Grotesk", sans-serif;
    padding: 8px 40px;
    text-transform: capitalize;
    background: #f05456;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 25px;
}

.contact-form .btn:hover {
    background: #ffffff;
    color: #5E6C5B;
    box-shadow: 0px 8px 30px 0px rgba(240, 84, 86, 0.3);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(240, 84, 86, 0.3);
    -moz-box-shadow: 0px 83px 30px 0px rgba(240, 84, 86, 0.3);
    -o-box-shadow: 0px 8px 30px 0px rgba(240, 84, 86, 0.3);
    transition: all linear 0.6s;
    -webkit-transition: all linear 0.6s;
    -moz-transition: all linear 0.6s;
    -ms-transition: all linear 0.6s;
    -o-transition: all linear 0.6s;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #5E6C5B;
    outline: 0;
    transition: all linear 0.6s;
    -webkit-transition: all linear 0.6s;
    -moz-transition: all linear 0.6s;
    -ms-transition: all linear 0.6s;
    -o-transition: all linear 0.6s;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
}

/*==============Contact Part CSS End=============*/

/*==============Footer Part CSS Start=============*/

.footer {
    background: #f5f5f5;
    position: relative;
    padding-top: 100px;
    margin-top: -70px;
    padding-bottom: 16px;
}

.footer-menu ul {
    float: right;
}

.footer-menu ul li {
    float: left;
    margin-right: 10px;
}

.footer-menu ul li i {
    font-size: 16px;
    color: #ffffff;
    background: #5E6C5B;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    text-align: center;
    transition: all linear 0.6s;
    -webkit-transition: all linear 0.6s;
    -moz-transition: all linear 0.6s;
    -ms-transition: all linear 0.6s;
    -o-transition: all linear 0.6s;
}

.footer-menu li:hover i {
    color: #5E6C5B;
    background: #fff;
    box-shadow: 0px 13px 30px 0px rgba(240, 84, 86, 0.5);
    -webkit-box-shadow: 0px 13px 30px 0px rgba(240, 84, 86, 0.5);
    -moz-box-shadow: 0px 13px 30px 0px rgba(240, 84, 86, 0.5);
    -o-box-shadow: 0px 13px 30px 0px rgba(240, 84, 86, 0.5);
    transition: all linear 0.6s;
    -webkit-transition: all linear 0.6s;
    -moz-transition: all linear 0.6s;
    -ms-transition: all linear 0.6s;
    -o-transition: all linear 0.6s;
}

.footer-text p {
    padding-top: 6px;
}

/*==============Footer Part CSS End==============*/

/*==============================================
                Other's Page CSS Start
        ===============================================*/

/*==============Breadcramb Part CSS Start==============*/

.breadcrun-banner {
    background: url(../images/breadcrumb.png) no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}

.breadcrun-banner:after {
    position: absolute;
    content: "";
    text-align: center;
    top: 0%;
    left: 0%;
    right: 0;
    background: rgba(94, 108, 91, 0.8);
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bread-inner {
    padding: 180px 0 80px;
}

.bread-inner h1 {
    font-weight: 900;
    color: #fff;
    font-size: 40px;
    letter-spacing: 2px;
    word-spacing: 1px;
    line-height: 24px;
    text-transform: uppercase;
}

.breadcrun-banner ul.breadcrumb {
    padding: 10px 0 3px;
    display: inline-flex;
    list-style: none;
    background-color: transparent;
    text-align: center;
    font-weight: 500;
    z-index: 999;
    color: #fff;
}

.bread-inner p {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 24px;
    margin-bottom: 0;
    z-index: 999;
    font-family: "HK Grotesk", sans-serif;
}

.breadcrun-banner ul.breadcrumb li a p {
    color: #fff;
    padding-right: 10px;
}

.breadcrun-banner ul.breadcrumb li i {
    padding-right: 8px;
}

.breadcrun-banner ul.breadcrumb li p {
    display: inline;
    font-size: 18px;
    width: 650px;
    font-weight: 400;
    font-family: "HK Grotesk", sans-serif;
    line-height: 24px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

/*==============Breadcramb Part CSS End==============*/

/* ============== About Page ====================== */
.next-level-page {
    padding-top: 100px;
    padding-bottom: 60px;
}

.about-page {
    background: rgba(94, 108, 91, 0.8);
}

.about-page h2 {
    color: #fff;
}

.next-level-page .level-detail h3 {
    padding-top: 0px;
}

.level-about-txt p {
    font-size: 20px;
}

/*=====================================
 Yoga part css Start
======================================*/
.yoga-sec {
    padding-top: 40px;
    overflow: hidden;
    height: 700px;
}

.yoga-sec .level-detail {
    padding-top: 120px;
}

.yoga-block img {
    -webkit-animation: up-down 3s linear infinite;
    animation: up-down 3s linear infinite;
}

@keyframes up-down {
    0% {
        padding-top: 40px;
    }

    50% {
        padding-top: 0px;
    }

    100% {
        padding-top: 40px;
    }
}

/*=====================================
 Yoga part css End
======================================*/
/* ====================================
   404 Part HTML Start
===================================== */
.header-color {
    background: #162A2B;
    height: 100px;
    width: 100%;
    position: fixed;
    padding-top: 8px;
    z-index: 999;
}

.error-page {
    position: relative;
    padding-bottom: 80px;
    /*    height: 100vh;*/
}

.error-text h2 {
    font-size: 400px;
    font-weight: 900;
    line-height: 24px;
    color: #5E6C5B;
    padding-top: 230px;
}

.right-txt {
    margin-left: -80px;
}

.error-page img {
    padding-top: 190px;
    animation: scal 3s linear infinite;
}

.error-btm-txt h3 {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2px;
    word-spacing: 1px;
    line-height: 24px;
    text-transform: capitalize;
    padding: 40px 0 35px;
}

.error-btm-txt p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: capitalize;
    line-height: 24px;
    padding: 0 80px;
    font-family: "HK Grotesk", sans-serif;
}

.error-footer {
    padding-top: 20px;
    margin-top: 0px;
    padding-bottom: 20px;
}

@-webkit-keyframes scal {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scal {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* ====================================
   404 Part HTML End
===================================== */
/* === BACK TO TOP CSS == */

#back-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #5E6C5B;
    color: #fff;
    width: 55px;
    line-height: 55px;
    height: 55px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    box-shadow: 0px 8px 40px 0px rgba(240, 84, 86, 0.4);
    -webkit-box-shadow: 0px 8px 40px 0px rgba(240, 84, 86, 0.4);
    -moz-box-shadow: 0px 8px 40px 0px rgba(240, 84, 86, 0.4);
    -o-box-shadow: 0px 8px 40px 0px rgba(240, 84, 86, 0.4);
    display: none;
    z-index: 999;
    animation: jump 3s linear infinite;
}

#back-top-btn i {
    margin: 0;
    position: relative;
    left: 13px;
    top: 5px;
    font-size: 30px;
    -webkit-transition: all ease 0.6s;
    -moz-transition: all ease 0.6s;
    -o-transition: all ease 0.6s;
    transition: all ease 0.6s;
}

#back-top-btn:hover i {
    color: #5E6C5B;
}

#back-top-btn:hover {
    background: #fff;
    -webkit-transition: ease all 0.4s;
    -moz-transition: ease all 0.4s;
    -o-transition: ease all 0.4s;
    transition: ease all 0.4s;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
}

/* ==========  Animation ================*/

.animation-circle-inverse > span:nth-child(2) {
    -webkit-animation: circleWater2 3s linear infinite;
    animation: circleWater2 3s linear infinite;
}

.animation-circle-inverse > span:nth-child(3) {
    -webkit-animation: circleWater3 3s linear infinite;
    animation: circleWater3 3s linear infinite;
}

.animation-circle-inverse > span:nth-child(4) {
    -webkit-animation: circleWater1 3s linear infinite;
    animation: circleWater1 3s linear infinite;
}

@-webkit-keyframes circleWater {
    0% {
        -webkit-transform: scale(5.5);
        transform: scale(5.5);
        opacity: 0.3;
    }

    100% {
        -webkit-transform: scale(8.5);
        transform: scale(8.5);
        opacity: 0;
    }
}

@keyframes circleWater {
    0% {
        -webkit-transform: scale(5.5);
        transform: scale(5.5);
        opacity: 0.3;
    }

    100% {
        -webkit-transform: scale(8.5);
        transform: scale(8.5);
        opacity: 0;
    }
}

@-webkit-keyframes circleWater2 {
    0% {
        -webkit-transform: scale(3.5);
        transform: scale(3.5);
    }

    100% {
        -webkit-transform: scale(5.5);
        transform: scale(5.5);
    }
}

@keyframes circleWater2 {
    0% {
        -webkit-transform: scale(3.5);
        transform: scale(3.5);
    }

    100% {
        -webkit-transform: scale(5.5);
        transform: scale(5.5);
    }
}

@-webkit-keyframes circleWater3 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(3.5);
        transform: scale(3.5);
    }
}

@keyframes circleWater3 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(3.5);
        transform: scale(3.5);
    }
}

/* =========== Jump ========== */
@keyframes jump {
    20% {
        margin-top: 10px;
    }

    30% {
        margin-bottom: 30px;
    }

    60% {
        margin-bottom: 0px;
    }

    100% {
        margin-top: 0px;
    }
}

.btn-ingresar {
    position: absolute;z-index: 9;top: 18px;right:100px;
    font-size: 18px;
    letter-spacing: 1px;
    vertical-align: top;
    text-align: center;
    line-height: 22px;
    font-weight: 400;
    font-family: "HK Grotesk", sans-serif;
    padding: 10px 28px;
    color: #162A2B !important;
    background:#fff !important;
    border-radius: 35px;cursor:pointer;
    border-color:#fff;
}