/*------------------------------------------------------------------ 
    IMPORT FONTS 
-------------------------------------------------------------------*/
    
    @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
    @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');
    @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
    @import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
    @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
    /*------------------------------------------------------------------ 
    IMPORT FILES 
-------------------------------------------------------------------*/
    
    @import url(animate.css);
    @import url(font-awesome.min.css);
    @import url(magnific-popup.css);
    @import url(responsiveslides.css);
    @import url(timeline.css);
    @import url(flaticon.css);
    /*------------------------------------------------------------------ 
    SKELETON
-------------------------------------------------------------------*/
    
    body {
        color: #666666;
        font-size: 15px;
        font-family: 'Roboto', sans-serif;
        line-height: 1.80857;
        overflow-x: hidden !important;
    }
    
    * {
        font-family: 'Roboto', sans-serif;
    }
    
    a {
        color: #1f1f1f;
        text-decoration: none !important;
        outline: none !important;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: 0;
        font-weight: normal;
        position: relative;
        padding: 0 0 10px 0;
        font-weight: normal;
        line-height: 120% !important;
        color: #1f1f1f;
        margin: 0
    }
    
    h1 {
        font-size: 24px
    }
    
    h2 {
        font-size: 22px
    }
    
    h3 {
        font-size: 18px
    }
    
    h4 {
        font-size: 21px;
        color: #07528d;
        margin-top: 25px;
    }
    
    h5 {
        font-size: 14px
    }
    
    h6 {
        font-size: 13px
    }
    
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: #212121;
        text-decoration: none!important;
        opacity: 1
    }
    
    h1 a:hover,
    h2 a:hover,
    h3 a:hover,
    h4 a:hover,
    h5 a:hover,
    h6 a:hover {
        opacity: .8
    }
    
    a {
        color: #1f1f1f;
        text-decoration: none;
        outline: none;
    }
    
    .dark_bg {
        background: #000;
    }
    
    .padding_left_right {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    a,
    .btn {
        text-decoration: none !important;
        outline: none !important;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    
    .btn-custom {
        margin-top: 20px;
        background-color: transparent !important;
        border: 2px solid #ddd;
        padding: 12px 40px;
        font-size: 16px;
    }
    
    .lead {
        font-size: 18px;
        line-height: 30px;
        color: #767676;
        margin: 0;
        padding: 0;
    }
    
    blockquote {
        margin: 20px 0 20px;
        padding: 30px;
    }
    
    ul,
    li,
    ol {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    
    button:focus {
        outline: none;
    }
    
    .form-control::-moz-placeholder {
        color: #ffffff;
        opacity: 1;
    }
    
    .HallTextColor {
        color: #ffc800;
    }
    /*------------------------------------------------------------------ 
   LOADER 
-------------------------------------------------------------------*/
    
    #preloader {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 11000;
        position: fixed;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
    }
    
    .loader {
        display: block;
        flex-wrap: wrap;
        width: 250px;
        height: auto;
        -webkit-transform-style: preserve-3d;
    }
    
    .loader img {
        width: 100%;
        height: auto;
    }
    
    .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 75px;
        height: 75px;
        background-image: none;
        background-size: auto auto;
        background-image: none;
        -webkit-animation: move 2s ease-in-out infinite both;
        animation: move 2s ease-in-out infinite both;
        animation-delay: 0s;
        animation-delay: 0s;
        animation-delay: 0s;
        background-image: url('../images/gb.png');
        background-size: 100% 100%;
    }
    
    .box:nth-child(1) {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    
    .box:nth-child(2) {
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
    }
    
    .box:nth-child(3) {
        -webkit-animation-delay: -3s;
        animation-delay: -3s;
    }
    
    @-webkit-keyframes move {
        0%,
        100% {
            -webkit-transform: none;
            transform: none;
        }
        12.5% {
            -webkit-transform: translate(40px, 0);
            transform: translate(40px, 0);
        }
        25% {
            -webkit-transform: translate(80px, 0);
            transform: translate(80px, 0);
        }
        37.5% {
            -webkit-transform: translate(80px, 40px);
            transform: translate(80px, 40px);
        }
        50% {
            -webkit-transform: translate(80px, 40px);
            transform: translate(80px, 40px);
        }
        62.5% {
            -webkit-transform: translate(30px, 60px);
            transform: translate(30px, 60px);
        }
        75% {
            -webkit-transform: translate(0, 80px);
            transform: translate(0, 40px);
        }
        87.5% {
            -webkit-transform: translate(0, 40px);
            transform: translate(0, 40px);
        }
    }
    
    @keyframes move {
        0%,
        100% {
            -webkit-transform: none;
            transform: none;
        }
        12.5% {
            -webkit-transform: translate(40px, 0);
            transform: translate(40px, 0);
        }
        25% {
            -webkit-transform: translate(80px, 0);
            transform: translate(80px, 0);
        }
        37.5% {
            -webkit-transform: translate(80px, 40px);
            transform: translate(80px, 40px);
        }
        50% {
            -webkit-transform: translate(80px, 80px);
            transform: translate(80px, 80px);
        }
        62.5% {
            -webkit-transform: translate(40px, 80px);
            transform: translate(40px, 80px);
        }
        75% {
            -webkit-transform: translate(0, 80px);
            transform: translate(0, 80px);
        }
        87.5% {
            -webkit-transform: translate(0, 40px);
            transform: translate(0, 40px);
        }
    }
    
    #scroll-to-top {
        width: 40px;
        height: 40px;
        position: fixed;
        bottom: 10px;
        right: 20px;
        display: none;
        font-size: 25px;
        border-radius: 0;
        transition: .2s;
        letter-spacing: 1px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-weight: 900;
        border-radius: 100%;
    }
    
    a:hover,
    a:focus {
        color: #a90c11;
        text-decoration: underline;
    }
    
    .heading_main.text_align_left {
        justify-content: flex-start;
    }
    
    .padding_top_0 {
        padding-top: 0 !important;
    }
    
    .padding_bottom_0 {
        padding-bottom: 0 !important;
    }
    
    .half_bg_theme {
        position: relative;
    }
    
    .half_bg_theme::after {
        width: 50%;
        height: 80%;
        background: #a90c11;
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        z-index: 1;
    }
    
    #column-left .pogoSlider,
    #column-right .pogoSlider,
    #content .pogoSlider {
        margin-bottom: 0;
    }
    
    .text_align_right_img img {
        position: relative;
        right: 15px;
        box-shadow: 0px 0 5px 0 rgba(0, 0, 0, .2);
    }
    
    .pogoSlider-nav-btn {
        border-radius: 10px;
        width: 0px;
        height: 12px;
    }
    /*------------------------------------------------------------------ 
HEADER 
-------------------------------------------------------------------*/
    
    .header_top {
        min-height: 98px;
        padding: 8px 0;
        background: #fff;
    }
    
    .site_information ul {
        float: right;
        width: 95%;
        padding: 21px 0;
    }
    
    a.join_bt {
        background: #a90c11;
        width: 180px;
        text-align: center;
        height: 38px;
        line-height: 38px;
        border-radius: 75px;
        color: #fff;
        font-weight: 300;
    }
    
    a.join_bt:hover,
    a.join_bt:focus {
        background: #222;
        color: #fff !important;
    }
    
    .site_information {
        float: left;
        width: 66.66%;
    }
    
    .site_information ul {
        list-style: none;
    }
    
    .site_information ul li {
        float: left;
        width: 33.33%;
        display: flex;
        justify-content: center;
        font-size: 17px;
        font-weight: 300;
    }
    
    .site_information ul li img {
        margin-right: 10px;
    }
    
    .logo_section {
        width: 33.33%;
    }
    
    .logo_main {
        padding: 10px 0 0;
        width: 50%;
    }
    
    .logo_main .cust {
        width: 95%;
    }
    
    .top-header .navbar {
        padding: 0;
        min-height: 60px;
        float: left;
    }
    
    .cnter {
        margin-top: 80px;
    }
    
    .top-header {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        margin: 0;
        z-index: 20;
        background-position: left;
        background-repeat: no-repeat;
        background-color: transparent;
        background-size: auto 100%;
        width: 100%;
    }
    
    .top-header.Scrolled {
        background-color: #ffc800;
        position: fixed;
    }
    
    .section {
        float: left;
        width: 100%;
    }
    
    .ulockd-home-slider {
        float: left;
        width: 100%;
    }
    
    .top-header .navbar .navbar-collapse ul li a {
        text-transform: none;
        font-size: 17px;
        padding: 10px 25px;
        font-weight: 400;
        overflow: hidden;
        color: #000;
        position: relative;
        z-index: 2;
    }
    
    a.navbar-brand {
        left: 35px;
        position: relative;
    }
    
    .top-header .navbar .navbar-collapse ul li a.active {
        background: transparent;
        color: #fff;
    }
    
    .top-header .navbar .navbar-collapse ul li a:hover,
    .top-header .navbar .navbar-collapse ul li a:focus {
        background: transparent;
        color: #fff;
    }
    
    .search_icon.nav-link img {
        width: 25px;
    }
    
    .top-header .navbar .navbar-collapse ul li {
        margin: 0 2px;
    }
    
    .top-header.fixed-menu {
        width: 100%;
        position: fixed;
        box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        background: #fff;
        z-index: 20;
    }
    
    .header_bottom {
        float: left;
        width: 100%;
        position: absolute;
        bottom: -60px;
    }
    
    .header_bottom::after {
        width: 50%;
        display: block;
        right: 0;
        content: "";
        background: #ff880e;
        height: 60px;
        position: absolute;
        top: 0;
    }
    
    .navbar-toggler {
        border: 2px solid #fff;
        border-radius: 0;
        margin: 15px 0;
        padding: 8px 8px;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
        z-index: 9;
        position: relative;
    }
    
    .navbar-toggler span {
        background: #fff;
        display: block;
        width: 22px;
        height: 2px;
        margin: 0 auto;
        margin-top: 0px;
        margin-top: 0px;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    
    .navbar-toggler span+span {
        margin-top: 5px;
    }
    
    .navbar-toggler:hover {
        border: 2px solid #222;
    }
    
    .navbar-toggler:hover span {
        background: #222;
    }
    /* search bar */
    
    .search-box {
        position: absolute;
        float: right;
        right: 10px;
        top: 9px;
        z-index: 11;
    }
    
    .search-box:hover .search-txt {
        width: 240px;
        padding: 0 10px;
    }
    
    .top-header #navbar-wd {
        padding-right: 0;
    }
    
    .search-btn {
        float: right;
        width: 41px;
        height: 41px;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #111;
    }
    
    .search-txt {
        border: none;
        outline: none;
        float: left;
        padding: 0;
        color: #000;
        font-size: 14px;
        line-height: 41px;
        width: 0;
        transition: width 400ms;
        background: #fff;
        padding: 0;
        font-weight: 400;
    }
    
    .search-btn img {
        padding: 2px;
    }
    
    .theme_color {
        color: #a90c11;
    }
    
    .menu_orange_section {
        float: right;
        position: relative;
        width: 70%;
    }
    
    .menu_orange_section::after {
        width: 70px;
        height: 60px;
        position: relative;
        content: "";
        display: block;
        background: #a90c11;
        left: -35px;
        transform: skew(30deg);
    }
    
    .main_bt {
        width: 195px;
        height: 55px;
        float: left;
        text-align: center;
        line-height: 55px;
        border: solid #a90c11 1px;
        font-size: 18px;
        margin-top: 10px;
        background: #fff;
        font-weight: 500;
    }
    
    .paddding_left_15 {
        padding-left: 15px;
    }
    
    button#sidebarCollapse {
        background: transparent;
        float: right;
        margin: 50px 0 0;
        padding: 0;
    }
    
    .btn-info.focus,
    .btn-info:focus {
        box-shadow: none;
    }
    /*------------------------------------------------------------------ Banner -------------------------------------------------------------------*/
    
    .home-slider {
        position: relative;
        height: 540px;
    }
    
    .lbox-caption {
        display: table;
        height: 100% !important;
        width: 100% !important;
        left: 0 !important;
    }
    
    .lbox-caption {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        z-index: 10;
    }
    
    .lbox-details {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        height: 100%;
        padding: 22% 0%;
    }
    
    .lbox-details::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .lbox-details h1 {
        font-size: 54px;
        font-family: 'Montserrat', sans-serif;
        color: #ffffff;
        font-weight: 600;
        position: relative;
        z-index: 3;
    }
    
    .lbox-details h2 {
        font-size: 48px;
        color: #ffffff;
        font-weight: 300;
        position: relative;
        z-index: 3;
    }
    
    .lbox-details p {
        color: #ffffff;
        position: relative;
        z-index: 3;
    }
    
    .lbox-details p strong {
        color: #70c6eb;
        font-size: 40px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .lbox-details a.btn {
        background: #ffffff;
        padding: 10px 20px;
        font-size: 20px;
        text-transform: capitalize;
        color: #3a4149;
        border-radius: 0px;
        position: relative;
        z-index: 3;
    }
    
    .lbox-details a.btn:hover {
        background: #a90c11;
    }
    
    .pogoSlider-nav-btn {
        background: #fff;
    }
    
    .pogoSlider-nav-btn--selected {
        background: #a90c11 !important;
    }
    
    .pogoSlider--navBottom .pogoSlider-nav {
        bottom: 35px;
    }
    
    .img-responsive {
        max-width: 100%;
    }
    
    .slide_text h3 {
        font-size: 100px;
        font-weight: 300;
        padding: 0;
        text-transform: uppercase;
    }
    
    .slide_text h3 strong {
        font-weight: 900;
    }
    
    .slide_text h4 {
        font-size: 30px;
        font-weight: 700;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    
    .slide_text p {
        color: #f2184f;
        font-size: 20px;
        font-weight: 300;
        padding-top: 0;
        line-height: normal;
        margin-bottom: 0;
    }
    
    .start_exchange_bt {
        color: #fff;
        padding: 0;
        float: left;
        width: auto;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
    }
    
    .start_exchange_bt i {
        color: #a90c11;
    }
    
    .contact_bt {
        width: 180px;
        height: 50px;
        background: #f2184f;
        color: #fff;
        float: left;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        margin-top: 50px;
        border-radius: 5px;
    }
    
    .contact_bt:hover,
    .contact_bt:focus {
        color: #fff;
    }
    
    .dark_bg .contact_bt {
        margin-top: 30px;
    }
    
    .slide_text {
        margin-top: 280px;
        padding-left: 0;
    }
    /*------------------------------------------------------------------ About -------------------------------------------------------------------*/
    
    .tooltip-1 {
        display: inline-block;
        position: relative;
        color: #70c6eb;
        opacity: 1;
    }
    
    .tooltip__wave {
        width: 30%;
        height: 20px;
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0px;
        margin: 0 auto;
        overflow: hidden;
    }
    
    .tooltip__wave span {
        position: absolute;
        left: -100%;
        width: 200%;
        height: 100%;
        background: url(../images/wave.svg) repeat-x center center;
        background-size: 50% auto;
    }
    
    .inner_page_banner h3 {
        font-size: 42px;
        color: #fff;
        padding: 40px 15px;
    }
    
    .inner_page_banner {
        float: left;
        width: 100%;
        padding-top: 60px;
        min-height: 240px;
        background: #111;
    }
    
    .section.about_section.half_bg_theme .container {
        position: relative;
        z-index: 11;
    }
    
    .about-box {
        padding: 70px 0px;
    }
    
    .title-box {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .title-box h2 {
        font-size: 75px;
        font-family: 'Great Vibes', cursive;
        color: #e91327;
        font-weight: 400;
        padding: 0;
    }
    
    .title-box h2 span {
        color: #70c6eb;
        text-decoration: underline;
    }
    
    .about-main-info h2 span {
        color: #70c6eb;
        text-decoration: underline;
    }
    
    .about-main-info {
        margin-bottom: 30px;
    }
    
    .about_bg {
        background-image: url('../images/about_bg.png');
        background-repeat: no-repeat;
        background-position: left center;
    }
    
    .about-img {
        padding: 30px 0px;
    }
    
    .about-img img {
        border-radius: 10px;
    }
    
    .about-m ul {
        display: block;
        text-align: center;
        padding-bottom: 30px;
    }
    
    .about-m ul li {
        display: inline-block;
        text-align: center;
    }
    
    .about-m ul li a {
        background: #528780;
        color: #ffffff;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        display: block;
        border-radius: 50px;
        margin: 0px 5px;
    }
    
    .about-m ul li a:hover {
        background: #333333;
        color: #ffffff;
    }
    
    .about-main-info h2 {
        font-size: 45px;
        color: #e91327;
        font-weight: 600;
    }
    
    .about-main-info a {
        border-radius: 2px;
        transition: .2s;
        padding: 10px 25px;
        background: #e91327;
        color: #ffffff;
        font-weight: 300;
        font-size: 15px;
        border-radius: 0 15px;
        margin-top: 10px;
    }
    
    .about-main-info a:hover {
        color: #ffffff;
    }
    
    .about-main-info div.full>img {
        height: 500px;
    }
    
    .hvr-radial-out {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
        overflow: hidden;
        background: #070500;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        color: #fff;
        float: left;
        width: 165px;
        height: 45px;
        text-align: center;
        line-height: 45px;
    }
    
    .hvr-radial-out::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #a90c11;
        border-radius: 100%;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    
    .hvr-radial-out:hover::before,
    .hvr-radial-out:focus::before,
    .hvr-radial-out:active::before {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    
    a.hvr-radial-out:hover,
    a.hvr-radial-out:focus {
        color: #fff;
    }
    /*------------------------------------------------------------------ Services -------------------------------------------------------------------*/
    
    .service_blog {
        float: left;
        width: 100%;
        border: solid #555 1px;
        padding: 30px;
        margin-top: 30px;
        transition: ease all 0.2s;
    }
    
    .services_blog {
        margin-bottom: 30px;
    }
    
    .service_blog:hover,
    .service_blog:focus {
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, .2);
        transform: scale(1.02);
    }
    
    .service_blog h4 {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 18px;
        border-bottom: solid #222 2px;
        color: #222;
        margin-bottom: 15px;
    }
    
    .effect-service {
        position: relative;
        height: auto;
        text-align: center;
        cursor: pointer;
        border: 8px solid #eee;
        margin-bottom: 30px;
    }
    
    figure.effect-service {
        background: -webkit-linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%);
        background: linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%);
    }
    
    figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        opacity: 0.8;
    }
    
    figure.effect-service img {
        opacity: 0.85;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }
    
    figure figcaption,
    .grid figure figcaption>a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    figure figcaption {
        padding: 10px;
        color: #fff;
        text-transform: capitalize;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    figure.effect-service h2 {
        padding: 20px;
        width: 50%;
        height: 50%;
        text-align: left;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(10px, 10px, 0);
        transform: translate3d(10px, 10px, 0);
    }
    
    figure.effect-service h2 {
        background: #e91327;
        padding: 13px;
        width: 94%;
        height: 58px;
        border: 0;
        margin: 0;
        font-weight: 200;
        font-size: 34px;
        color: #ffffff;
        text-align: center;
        font-family: 'Great Vibes', cursive;
    }
    
    figure.effect-service p {
        padding: 15px;
        width: 100%;
        height: 80%;
        font-size: 14px;
        border: 2px solid #fff;
        margin: 0;
        font-weight: 300;
        display: none;
    }
    
    figure.effect-service p {
        float: right;
        padding: 20px;
        text-align: left;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }
    
    figure figcaption>a {
        z-index: 1000;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
    }
    
    figure.effect-service:hover img {
        opacity: 0.6;
    }
    
    figure.effect-service:hover p {
        opacity: 1;
    }
    
    figure.effect-service:hover {
        border: 8px solid #e91327;
    }
    
    .services_blog h4 {
        color: #000;
        font-size: 32px;
        text-align: center;
        font-weight: 500;
        box-shadow: 0 0 15px -8px #000;
        margin: 0;
        padding: 0;
        min-height: 110px;
        line-height: 110px !important;
    }
    
    .services_blog img {
        max-height: 370px;
        width: 100%;
    }
    
    .service_pro_section {
        background: #a90c11;
        border-left: solid #fff 15px;
        border-right: solid #fff 15px;
        padding: 80px;
    }
    
    .services_list {
        margin-top: 65px;
    }
    
    .services_list ul {
        list-style: none;
    }
    
    .services_list ul li {
        font-size: 25px;
        text-transform: none;
        color: #fff;
    }
    
    .services_list ul li img {
        position: relative;
        top: -2px;
        width: 12px;
        margin-right: 10px;
    }
    
    .team_section {
        background-image: url(../images/bg_1.png);
        background-position: center center;
        /* filter: blur(4px);
    -webkit-filter: blur(4px); */
        background-size: cover;
    }
    
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-size: cover;
    /*------------------------------------------------------------------ Gallery -------------------------------------------------------------------*/
    
    .gallery-box {
        padding: 70px 0px 120px;
    }
    
    .gallery-box ul {}
    
    .gallery-box ul li {
        position: relative;
        width: 31.33%;
        margin: 0 1% 20px !important;
        padding: 0px;
        float: left;
        border: none;
        overflow: hidden;
        margin-bottom: 0px;
    }
    
    .gallery-box ul li a {
        position: relative;
        display: inline-block;
        border: 4px solid #ffffff;
    }
    
    .gallery-box ul li a::before {
        content: "";
        position: absolute;
        background: rgba(233, 19, 39, 0.9);
        width: 100%;
        height: 100%;
        left: 0px;
        top: 100%;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
    }
    
    .gallery-box ul li a .overlay {
        background: #70c6eb;
        color: #3a4149;
        font-size: 22px;
        text-align: center;
        width: 38px;
        height: 38px;
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
    }
    
    .gallery-box ul li a:hover::before {
        top: 0;
        opacity: 1;
    }
    
    .gallery-box ul li a:hover .overlay {
        opacity: 1;
    }
    
    .gallery-box ul li a:hover {
        border: 4px solid #e91327;
    }
    
    .gallery-box ul li a .overlay {
        background: #fff;
        color: #e91327;
    }
    /*------------------------------------------------------------------ Properties -------------------------------------------------------------------*/
    
    .properties-box {
        padding: 70px 0px;
        background-color: #f2f3f5;
    }
    
    .single-team-member {
        position: relative;
        margin-top: 30px;
        border: 10px solid #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    }
    
    .filter-button-group {
        margin-bottom: 30px;
    }
    
    .filter-button-group button {
        border-radius: 2px;
        transition: .2s;
        letter-spacing: 1px;
        padding: 10px 18px;
        background: #57cef8;
        color: #ffffff;
        cursor: pointer;
        border: none;
    }
    
    .filter-button-group button:hover {
        color: #ffffff;
    }
    
    .properties-single {
        margin-bottom: 30px;
        background: #ffffff;
        transition: all 0.5s ease 0s;
    }
    
    .fuit {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
    }
    
    .fuit a {
        background: #57cef8;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #ffffff;
    }
    
    .for-sal {
        background: #3a4149;
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ffffff;
        border-radius: 2px;
        padding: 5px 10px;
        font-size: 13px;
        z-index: 10;
    }
    
    .pro-price {
        background: #57cef8;
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: #ffffff;
        border-radius: 2px;
        padding: 5px 10px;
        font-size: 13px;
        z-index: 10;
    }
    
    .properties-img {
        position: relative;
        overflow: hidden;
    }
    
    .properties-img img {
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -o-transition: all 1.5s;
        -ms-transition: all 1.5s;
        transition: all 1.5s;
        transition-delay: 0s;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -o-transition-delay: .5s;
        -ms-transition-delay: .5s;
        transition-delay: .5s;
    }
    
    .properties-single:hover .properties-img img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    .hover-box {
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        filter: alpha(opacity=0);
        opacity: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        -webkit-transition: all .9s ease;
        -moz-transition: all .9s ease;
        -o-transition: all .9s ease;
        -ms-transition: all .9s ease;
        transition: all .9s ease;
        transition-delay: 0s;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -o-transition-delay: .5s;
        -ms-transition-delay: .5s;
        transition-delay: .5s;
    }
    
    .properties-single:hover .hover-box {
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        filter: alpha(opacity=100);
        opacity: 1;
        top: 0;
    }
    
    .properties-dit {
        padding: 15px;
    }
    
    .properties-dit h3 {
        font-size: 20px;
    }
    
    .properties-dit ul {
        padding: 10px 0px;
    }
    
    .properties-dit ul li {
        float: left;
        width: 33.33%;
        font-size: 12px;
        line-height: 30px;
    }
    
    .properties-dit ul li i {
        float: right;
        padding: 7px 10px;
        font-size: 15px;
        color: #57cef8;
    }
    
    .properties-dit p {
        margin: 0px;
    }
    
    .properties-dit p i {
        padding-right: 10px;
    }
    /*------------------------------------------------------------------ counter ----------------------------------------------------------------*/
    
    h2.timer.count-title.count-number {
        color: #f43866;
        font-size: 60px;
        font-weight: 600;
        margin: 0;
        padding: 0;
        line-height: 60px;
    }
    
    p.count-text {
        color: #f43866;
        font-size: 22px;
        font-weight: 600;
        line-height: 20px;
        border-bottom: solid #fff 5px;
        padding-bottom: 10px;
        width: 50%;
    }
    /*------------------------------------------------------------------ Team -------------------------------------------------------------------*/
    
    .team-box {
        padding: 70px 0px;
    }
    
    .team_member_img img {
        border: solid #ece9e2 20px;
        border-radius: 100%;
        width: 300px;
        height: 300px;
    }
    
    #team_slider h3 {
        margin-bottom: 10px;
        color: #000;
        font-size: 22px;
        font-weight: 600;
        padding: 0;
        margin-top: 25px;
    }
    
    #team_slider p {
        padding: 0 43px;
    }
    
    .team_member_img {
        position: relative;
    }
    
    .team_member_img .social_icon_team {
        position: absolute;
        top: 19px;
        left: 42px;
        width: 76%;
        height: 87%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        background: rgba(244, 56, 102, 0.7);
        opacity: 0;
        transition: ease all 0.2s;
    }
    
    .team_member_img:hover .social_icon_team,
    .team_member_img:focus .social_icon_team {
        opacity: 1;
    }
    
    .our-team {
        text-align: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    
    .our-team:before,
    .our-team:after {
        content: "";
        width: 130px;
        height: 150px;
        background: #57cef8;
        position: absolute;
        z-index: -1;
    }
    
    .our-team:before {
        bottom: -20px;
        left: 0;
    }
    
    .our-team:after {
        top: -20px;
        right: 0;
    }
    
    .our-team .pic {
        margin: 8px;
        position: relative;
        border: 3px solid #57cef8;
        transition: all 0.5s ease 0s;
    }
    
    .our-team:hover .pic {
        border-color: #3a4149;
    }
    
    .our-team .pic:after {
        content: "";
        width: 100%;
        height: 0;
        background: #57cef8;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform-origin: 0 0 0;
        transition: all 0.5s ease 0s;
    }
    
    .our-team:hover .pic:after {
        height: 100%;
        opacity: 0.85;
    }
    
    .our-team img {
        width: 100%;
        height: auto;
    }
    
    .our-team .team-content {
        width: 100%;
        position: absolute;
        top: -50%;
        left: 0;
        transition: all 0.5s ease 0.2s;
    }
    
    .our-team:hover .team-content {
        top: 38%;
    }
    
    .our-team .title {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        text-transform: capitalize;
        margin: 0px;
    }
    
    .our-team .post {
        font-size: 14px;
        color: #fff;
        line-height: 26px;
        text-transform: capitalize;
    }
    
    .our-team .social {
        padding: 0;
        margin: 40px 0 0 0;
        list-style: none;
    }
    
    .our-team .social li {
        display: inline-block;
    }
    
    .our-team .social li a {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        border-radius: 50%;
        border: 1px solid #fff;
        font-size: 18px;
        color: #fff;
        margin: 0 7px;
        transition: all 0.5s ease 0s;
    }
    
    .our-team .social li a:hover {
        background: #fff;
        color: #00bed3;
    }
    
    @media only screen and (max-width: 990px) {
        .our-team {
            margin-bottom: 30px;
        }
    }
    /*------------------------------------------------------------------ Blog -------------------------------------------------------------------*/
    
    .blog-box {
        padding: 70px 0px;
        background-color: #f2f3f5;
    }
    
    .blog-inner {
        background: #ffffff;
        text-align: center;
        margin-bottom: 30px;
        border: 10px solid #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    }
    
    .blog-img {
        margin-bottom: 15px;
        overflow: hidden;
    }
    
    .blog-img img {
        transition: all 0.9s ease 0s;
    }
    
    .blog-inner:hover .blog-img img {
        -moz-transform: scale(1.5) rotate(-10deg);
        -webkit-transform: scale(1.5) rotate(-10deg);
        -ms-transform: scale(1.5) rotate(-10deg);
        -o-transform: scale(1.5) rotate(-10deg);
        transform: scale(1.5) rotate(-10deg);
    }
    
    .blog-inner a {
        border-radius: 2px;
        transition: .2s;
        letter-spacing: 1px;
        padding: 10px 18px;
        background: #57cef8;
        color: #ffffff;
    }
    
    .blog-inner a:hover {
        color: #ffffff;
    }
    /*------------------------------------------------------------------ Contact -------------------------------------------------------------------*/
    
    .contact-box {
        padding: 70px 0px;
    }
    
    .left-contact h2 {
        font-size: 22px;
        font-weight: 500;
        padding-bottom: 30px;
    }
    
    .cont-line {
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    .icon-b {
        width: 55px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        font-size: 25px;
        margin-right: 15px;
        color: #fff;
        border-radius: 100%;
        background: #f2184f;
    }
    
    .dit-right h4 {
        font-size: 16px;
        color: #3a4149;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }
    
    .dit-right p {
        font-size: 14px;
        margin-top: 0;
    }
    
    .dit-right a {
        font-size: 14px;
        color: #3a4149;
        font-weight: 300;
        line-height: normal;
    }
    
    .dit-right a:hover {
        color: #57cef8;
    }
    
    .contact-block {}
    
    .contact-block .form-group .form-control {
        background: #333;
        height: 48px;
        font-size: 14px;
        border: 0;
        padding: 5px 20px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        font-weight: 200;
        letter-spacing: 0px;
    }
    
    .submit-button .btn-common {
        background-color: #f2184f;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        padding: 0 20px;
        border: 0;
        outline: 0;
        text-transform: uppercase;
        border-radius: 0px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
        border-radius: 0;
        opacity: 1;
    }
    
    .contact-block .form-group textarea.form-control {
        height: 150px;
        padding-top: 15px;
    }
    
    .submit-button .btn-common:hover {
        background-color: #111;
        opacity: 1;
    }
    
    .custom-select {
        height: 45px;
        font-size: 16px;
    }
    
    select.form-control:not([size]):not([multiple]) {
        height: calc(45px + 2px);
    }
    
    .help-block ul li {
        color: red;
    }
    
    .menu_footer li a {
        font-family: 'poppins', sans-serif;
        font-size: 15px;
        font-weight: 300;
    }
    
    .menu_footer li a:hover,
    .menu_footer li a:focus {
        color: #d66c0b !important;
    }
    
    .menu_footer li {
        margin: 3px 0;
    }
    
    .footer-box {
        background: #ffc800;
        padding: 70px 0;
    }
    
    .footer-box .footer-company-name {
        text-align: center;
        margin: 0px;
        color: #333;
        font-size: 13px;
        font-weight: 400;
        padding-top: 2px;
    }
    
    footer.footer-box h3 {
        font-size: 25px;
        margin-bottom: 35px;
        font-weight: 300;
        margin-top: 35px;
    }
    
    .footer-box .footer-company-name a:hover {
        color: #e91327;
    }
    /*------------------------------------------------------------------ Subscribe -------------------------------------------------------------------*/
    
    .subscribe-box {
        padding: 70px 0px;
        background: #e91327;
    }
    
    .subscribe-inner {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }
    
    .subscribe-inner h2 {
        font-size: 80px;
        font-weight: 600;
        color: #000000;
        font-family: 'Great Vibes', cursive;
        padding: 0;
    }
    
    .subscribe-inner p {
        color: #cccccc;
    }
    
    .subscribe-inner .form-group .form-control-1 {
        width: 100%;
        padding: 12px 15px;
        border-radius: 0px;
        border: none;
    }
    
    .subscribe-inner .form-group button {
        border-radius: 0;
        transition: .2s;
        padding: 10px 18px;
        background: #222;
        color: #ffffff;
        border: none;
        cursor: pointer;
        font-weight: 300;
        letter-spacing: 0.1px;
        border-radius: 0 15px 0 15px;
    }
    
    .about-main-info h2 img {
        margin-top: -10px;
    }
    
    p {
        margin-top: 5px;
        margin-bottom: 1rem;
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
        color: #4a4a49;
    }
    
    .text_align_left {
        text-align: left;
    }
    
    .text_align_center {
        text-align: center;
    }
    
    .text_align_right {
        text-align: right;
    }
    
    .text_align_left_img img {
        float: left;
    }
    
    .text_align_right_img img {
        float: right;
    }
    
    .red_bg {
        background: #e91327;
    }
    
    .white_fonts p,
    .white_fonts h1,
    .white_fonts h2,
    .white_fonts h3,
    .white_fonts h4,
    .white_fonts h5,
    .white_fonts h6,
    .white_fonts ul,
    .white_fonts ul li,
    .white_fonts ul li a,
    .white_fonts ul i,
    .white_fonts .post_info i,
    .white_fonts div,
    .white_fonts a.read_more {
        color: #000 !important;
    }
    
    .whiteTextColor {
        color: #fff !important;
    }
    
    .red_bg .about-main-info a {
        background: #fff;
        color: #e91327;
    }
    
    .testimonial_img {
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .mfp-figure figure .mfp-bottom-bar {
        display: none;
    }
    
    #client_slider .carousel-indicators {
        bottom: -45px;
    }
    
    #client_slider .carousel-indicators li {
        height: 15px;
        width: 15px;
        border-radius: 100%;
        background: #999;
    }
    
    #client_slider .carousel-indicators li.active {
        background: #e91327;
    }
    
    .layout_padding {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    
    .heading_main h2 {
        font-size: 45px;
        letter-spacing: -0.5px;
        font-weight: 400;
        padding: 0;
        margin: 0;
        font-family: 'Raleway', sans-serif;
        position: relative;
        text-transform: uppercase;
        line-height: 52px !important;
    }
    
    .heading_main h2 span {
        text-transform: uppercase;
        font-weight: 700;
    }
    
    .heading_main h2::after {
        width: 250px;
        height: 8px;
        background: #ff880e;
        content: "";
        display: block;
        transform: skew(-30deg);
        margin-top: 3px;
        display: none;
    }
    
    .heading_main p.large {
        font-size: 20px;
        color: #605f5f;
        position: relative;
        padding: 0;
        font-weight: 500;
        margin: 0;
    }
    
    .heading_main p {
        font-family: 'Raleway', sans-serif;
    }
    
    .heading_main p.small_tag {
        color: #000;
        font-size: 18px;
        text-transform: uppercase;
        line-height: normal;
        font-weight: 600;
        margin: 0;
    }
    
    .center {
        display: flex;
        justify-content: center;
    }
    
    p.section_count {
        font-size: 155px;
        margin: 0 45px 0 0;
        color: #cccac5;
        font-weight: 400;
        line-height: 70px;
    }
    
    .padding_0 {
        padding: 0 !important;
    }
    
    .full {
        float: left;
        width: 100%;
    }
    
    .heading_main {
        float: left;
        display: flex;
        margin-bottom: 45px;
        width: 100%;
        justify-content: center;
    }
    
    .theme_bg {
        background: #07528d;
    }
    
    h3.small_heading {
        font-size: 35px;
        font-weight: 600;
        line-height: normal;
    }
    
    .margin-top_20 {
        margin-top: 20px;
    }
    
    .margin-top_30 {
        margin-top: 30px;
    }
    
    .margin-bottom_30 {
        margin-bottom: 30px;
    }
    
    .carousel a.carousel-control-prev {
        background: #a90c11;
        opacity: 1;
        width: 85px;
        height: 85px;
        border-radius: 0;
        top: 40%;
        font-size: 35px;
        left: -120px;
    }
    
    .carousel a.carousel-control-next {
        background: #a90c11;
        opacity: 1;
        width: 85px;
        height: 85px;
        border-radius: 0;
        top: 40%;
        font-size: 35px;
        right: -120px;
    }
    
    #demo {
        margin-bottom: 20px;
    }
    
    ul.social_icon li a {
        width: auto;
        height: auto;
        color: #fff !important;
        float: left;
        border-radius: 100%;
        text-align: center;
        font-size: 22px;
        margin-right: 15px;
    }
    
    ul.social_icon li i {
        color: #fff;
    }
    
    ul.social_icon li {
        float: left;
        margin: 0 5px;
    }
    
    .white_bg {
        background: #fff;
    }
    
    .story_section .white_bg {
        background: #fff;
        width: 90%;
        margin: 0 5%;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, .1);
        padding: 40px 30px;
    }
    
    #map {
        height: 100%;
        min-height: 830px;
    }
    
    .blog_img_popular {
        position: relative;
    }
    
    .inner_page .top-header {
        position: relative;
    }
    
    .inner_page .inner_page_header {
        background: #1f1f1f;
        padding: 40px 0;
    }
    
    .inner_page .inner_page_header h3 {
        color: #fff;
        margin: 0;
        padding: 0;
        font-size: 25px;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    #inner_page_banner {
        min-height: 550px;
    }
    
    #inner_page_banner h3 {
        color: #fff;
        font-size: 40px;
        padding-top: 180px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
    }
    
    .readmore_bt {
        color: #fff;
        font-size: 20px;
        font-weight: 300;
    }
    
    .readmore_bt i {
        color: #a90c11;
        font-size: 25px;
        position: relative;
        top: 4px;
        left: 2px;
    }
    
    .footer_bottom {
        background: #ffc800;
        padding: 0 0;
        width: 100%;
        min-height: 60px;
        float: left;
        text-align: center;
    }
    
    .footer_bottom p.crp {
        float: left;
        margin: 0;
        color: #000;
        font-size: 17px;
        text-align: center;
        width: 100%;
        line-height: 60px;
        padding-top: 2px;
    }
    
    .footer_menu ul {
        list-style: none;
        width: 100%;
        float: left;
    }
    
    .footer_blog li a {
        font-size: 14px;
        font-weight: 300 !important;
        color: #acaba9 !important;
    }
    
    .recent_post_footer p {
        color: #acaba9 !important;
        font-size: 13px;
    }
    
    .footer_blog h3 {
        margin-bottom: 10px;
    }
    
    .newsletter_form input {
        padding: 5px 10px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    
    .newsletter_form button {
        background: #d66c0b;
        color: #fff;
        border: none;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 25px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .news_blog {
        position: relative;
        background: #eee;
        min-height: 280px;
        text-align: center;
        margin: 15px 0;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(21, 12, 3, .65);
        opacity: 0;
        transition: ease all 0.25s;
    }
    
    .news_blog:hover .overlay,
    .news_blog:focus .overlay {
        opacity: 1;
    }
    
    .main_bt.transparent {
        background: transparent;
        border-color: #fff;
        color: #fff;
        cursor: pointer;
    }
    
    .blog_details {
        position: absolute;
        left: 0;
        bottom: 0;
        background: #ff880e;
        padding: 15px 0 5px;
        text-align: center;
        transition: ease all 0.25s;
    }
    
    .news_blog:hover .blog_details,
    .news_blog:focus .blog_details {
        opacity: 0;
    }
    
    .blog_details h3 {
        color: #fff;
        font-size: 25px;
        margin: 0;
        padding: 0;
    }
    
    .blog_details p {
        color: #fff;
        font-size: 15px;
        line-height: normal;
    }
    
    .footer_blog ul li {
        margin-bottom: 15px;
        display: flex;
        line-height: normal;
    }
    
    .footer_blog ul li img {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        position: relative;
        top: 1px;
    }
    
    footer {
        width: 100%;
        float: left;
    }
    
    footer.footer-box p {
        font-size: 15px;
        margin-top: 20px;
        line-height: 28px;
        font-weight: 300;
        /* color: #ddd !important; */
    }
    
    .time_table {
        float: left;
        width: 45%;
    }
    
    footer ul.time_table li {
        /* color: #ddd !important; */
        font-size: 15px;
        font-weight: 300;
        line-height: 28px;
    }
    
    .footer_blog {
        float: left;
        width: 100%;
    }
    
    ul.bottom_menu li a {
        color: #8d8d8c;
    }
    
    ul.bottom_menu li {
        float: left;
        font-size: 14px;
        font-weight: 300;
        margin-left: 20px;
    }
    
    .bottom_menu {
        float: right;
    }
    
    .innerpage_banner {
        background-color: #f9f9f9;
        min-height: 150px;
        text-align: center;
        background-image: url("../images/slider-01.jpg");
        background-size: cover;
        background-position: center center;
    }
    
    .innerpage_banner h2 {
        margin: 55px 0 0;
        padding: 0;
        font-size: 30px;
        text-align: left;
        font-weight: 500;
        position: relative;
    }
    
    #demo .img-responsive {
        width: 100%;
    }
    
    .top-header.fixed-menu .search-btn {
        background: #111;
    }
    
    .top-header.fixed-menu .search-btn img {
        width: 25px;
    }
    
    .top-header.fixed-menu .search-box:hover .search-txt {
        width: 240px;
        padding: 0 10px;
        border: solid #000 1px;
        height: 41px;
    }
    
    .contact_section {
        /* background-image: url("../images/contact_bg.png"); */
        /* background-size: 50% auto; */
        /* background-repeat: no-repeat;
    background-position: right center; */
    }
    
    .contact_form {
        background: #fff;
        background-size: cover;
        background-position: center center;
        min-height: auto;
        padding: 45px 65px 65px;
        max-width: 770px;
        /* margin: 142px -470px 0; */
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
    }
    
    .field input {
        width: 100%;
        background: #fff;
        min-height: 60px;
        border: none;
        margin: 10px 0 0 0;
        color: #000;
        padding: 0;
        font-size: 20px;
        font-weight: 300;
        border-bottom: solid #a90c11 2px;
    }
    
    .field textarea {
        width: 100%;
        background: #fff;
        min-height: 120px;
        border: none;
        margin: 10px 0 0 0;
        color: #000;
        padding: 0;
        font-size: 20px;
        font-weight: 300;
        border-bottom: solid #a90c11 2px;
    }
    
    .contact_form_inner button {
        width: 210px;
        height: 60px;
        border: none;
        font-size: 20px;
        color: #000;
        line-height: 62px;
        cursor: pointer;
        transition: ease all 0.5s;
        background: #a90c11;
        text-transform: none;
    }
    
    .contact_form_inner button:hover,
    .contact_form_inner button:focus {
        color: #fff;
        background: #050000;
    }
    /** sidebar **/
    
    .navbar {
        padding: 15px 10px;
        background: #fff;
        border: none;
        border-radius: 0;
        margin-bottom: 40px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-btn {
        box-shadow: none;
        outline: none !important;
        border: none;
    }
    
    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    #sidebar {
        width: 300px;
        position: fixed;
        top: 0;
        left: -301px;
        height: 100vh;
        z-index: 999;
        background: #fff;
        color: #fff !important;
        transition: all 0.3s;
    }
    
    #sidebar.active {
        left: 0;
    }
    
    #sidebar .sidebar-header {
        padding: 20px;
        background: #6d7fcc;
    }
    
    #sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #47748b;
    }
    
    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }
    
    #sidebar ul li a {
        padding: 10px 0;
        font-size: 20px;
        display: block;
        color: #222;
        font-weight: 300;
        letter-spacing: 1px;
    }
    
    #sidebar ul li a:hover {
        color: #a90c11;
        background: #fff;
    }
    
    .menu_section {
        float: left;
        width: 100%;
        padding: 0 30px;
    }
    
    .menu_section ul {
        float: left;
        width: 100%;
    }
    
    .menu_section ul li {
        float: left;
        width: 100%;
        border-bottom: solid #eee 1px;
    }
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] {
        color: #fff;
        background: #6d7fcc;
    }
    
    a[data-toggle="collapse"] {
        position: relative;
    }
    
    a[aria-expanded="false"]::before,
    a[aria-expanded="true"]::before {
        content: '\e259';
        display: block;
        position: absolute;
        right: 20px;
        font-family: 'Glyphicons Halflings';
        font-size: 0.6em;
    }
    
    a[aria-expanded="true"]::before {
        content: '\e260';
    }
    
    ul ul a {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: #6d7fcc;
    }
    
    ul.CTAs {
        padding: 20px;
    }
    
    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    
    a.download {
        background: #fff;
        color: #7386D5;
    }
    
    a.article,
    a.article:hover {
        background: #6d7fcc !important;
        color: #fff !important;
    }
    
    .fnt_cust {
        font-size: 50px;
        font-weight: bolder;
    }
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content {
        padding: 0;
        min-height: 100vh;
        transition: all 0.3s;
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
    }
    
    #content.active {
        width: 100%;
    }
    
    .card p,
    h2 {
        color: rgb(171 21 21);
    }
    /* flip card  */
    
    @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
     :root {
        --d: 700ms;
        --e: cubic-bezier(0.19, 1, 0.22, 1);
        --font-sans: 'Rubik', sans-serif;
        --font-serif: 'Cardo', serif;
    }
    
    .page-content {
        display: grid;
        grid-gap: 1rem;
        padding: 1rem;
        max-width: 1500px;
        margin: 0 auto;
        font-family: var(--font-sans);
    }
    
    @media (min-width: 600px) {
        .page-content {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    @media (min-width: 800px) {
        .page-content {
            grid-template-columns: repeat(4, 2fr);
        }
    }
    
    .card {
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: end;
        align-items: flex-end;
        overflow: hidden;
        padding: 1rem;
        width: 100%;
        text-align: center;
        color: whitesmoke !important;
        background-color: whitesmoke !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
    }
    
    @media (min-width: 600px) {
        .card {
            height: 230px;
        }
    }
    
    .card:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        background-size: cover;
        background-position: 0 0;
        /* -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
    transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
    transition: transform calc(var(--d) * 1.5) var(--e);
    transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e); */
        pointer-events: none;
    }
    
    .card:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200%;
        pointer-events: none;
        /* background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79))); */
        /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%); */
        /* -webkit-transform: translateY(-50%); */
        /* transform: translateY(-50%);
    -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
    transition: -webkit-transform calc(var(--d) * 2) var(--e);
    transition: transform calc(var(--d) * 2) var(--e);
    transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e); */
    }
    
    .card:nth-child(1):before {
        background-image: url('../images/one.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(2):before {
        background-image: url('../images/two.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(3):before {
        background-image: url('../images/three.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(4):before {
        background-image: url('../images/four.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(5):before {
        background-image: url('../images/five.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(6):before {
        background-image: url('../images/six.jpg');
        opacity: 0.3;
    }
    
    .card:nth-child(7):before {
        background-image: url('../images/seven.JPG');
        opacity: 0.3;
    }
    
    .card:nth-child(8):before {
        background-image: url('../images/eight.jpg');
        opacity: 0.3;
    }
    
    .content {
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        padding: 1rem;
        margin: auto;
        /* -webkit-transition: -webkit-transform var(--d) var(--e);
    transition: -webkit-transform var(--d) var(--e);
    transition: transform var(--d) var(--e);
    transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e); */
        z-index: 1;
    }
    
    .content>*+* {
        margin-top: 1rem;
    }
    
    .title {
        font-size: 1.3rem;
        font-weight: bold;
        line-height: 1.2;
    }
    
    .cntr {
        text-align: center;
    }
    
    .copy {
        font-family: var(--font-serif);
        font-size: 1.125rem;
        font-style: italic;
        line-height: 1.35;
    }
    
    .btn {
        cursor: pointer;
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.65rem;
        font-weight: bold;
        letter-spacing: 0.025rem;
        text-transform: uppercase;
        color: white;
        background-color: black;
        border: none;
    }
    
    .btn:hover {
        background-color: #a90c11;
    }
    
    .btn:focus {
        outline: 1px dashed yellow;
        outline-offset: 3px;
    }
    /* @media (hover: hover) and (min-width: 600px) {
    .card:after {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .content {
        -webkit-transform: translateY(calc(100% - 1.5rem));
        transform: translateY(calc(100% - 1.5rem));
        -moz-transform: translateY(calc(100% - 1.5rem));
        -ms-transform: translateY(calc(100% - 1.5rem));
        -o-transform: translateY(calc(100% - 1.5rem));
    }
    .content>*:not(.title) {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
        transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    } */
    /* .card:hover:before {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.card:hover:after {
    opacity: 0.6;
} */
    
    .overlay_bt {
        position: absolute;
        top: 0;
        left: 0;
        background: #a90c11;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: ease all 0.2s;
        opacity: 0;
    }
    
    .blog_img_popular:hover .overlay_bt,
    .blog_img_popular:focus .overlay_bt {
        opacity: 1;
    }
    /* .card:hover:before,
    .card:focus-within:before {
        -webkit-transform: translateY(-4%);
        transform: translateY(-4%);
    }
    .card:hover:after,
    .card:focus-within:after {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .card:hover .content,
    .card:focus-within .content {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .card:hover .content>*:not(.title),
    .card:focus-within .content>*:not(.title) {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition-delay: calc(var(--d) / 8);
        transition-delay: calc(var(--d) / 8);
    }
    .card:focus-within:before,
    .card:focus-within:after,
    .card:focus-within .content,
    .card:focus-within .content>*:not(.title) {
        -webkit-transition-duration: 0s;
        transition-duration: 0s;
    } */
    /* } */
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 425px) {
        .page-content .card {
            height: 16rem;
        }
    }
    
    @media (min-width: 425px) {
        .page-content .card {
            height: 13rem;
        }
    }
    
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    /* basic structure for the rays setup */
    
    #raysDemoHolder {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 11000;
        position: fixed;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
    }
    
    #raysLogo {
        width: 300px;
        height: 233px;
        text-indent: -3000px;
        background: url(http://sooryahall.in/images/favicon.png) 0 0 no-repeat;
        display: block;
        position: absolute;
        top: 45%;
        left: 47%;
        display: block;
        z-index: 2;
        margin-left: auto;
        margin-right: auto;
    }
    
    #rays {
        /* with animation properties */
        background: url(https://davidwalsh.name/wp-content/themes/2k11/images/rays-main.png) 0 0 no-repeat;
        position: absolute;
        width: 490px;
        height: 490px;
        animation-name: spin;
        animation-duration: 40000ms;
        /* 40 seconds */
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    #rays:hover {
        /* animation-duration: 10000ms; 10 seconds - speed it up on hover! */
        /* resets the position though!  sucks */
    }
    
    .homepageSlider {
        min-height: 100% !important;
        background-size: cover !important;
        background-position: bottom !important;
    }
    
    .homepageSlider.First {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/IMG_8932.jpg);
    }
    
    .homepageSlider.Second {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/slider_2.jpg);
    }
    
    .homepageSlider.Third {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/DSC_4874.jpg);
    }
    
    .homepageSlider.Four {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/DSC_4885.jpg);
    }
    
    #view-code {
        color: #48cfad;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        position: relative;
        top: 640px;
        left: 50%;
        margin-left: -35px;
    }
    
    #view-code:hover {
        color: #34c29e;
    }
    /* --- Product Card ---- */
    
    #make-3D-space {
        position: relative;
        perspective: 800px;
        width: 340px;
        height: 500px;
        transform-style: preserve-3d;
        transition: transform 5s;
        position: absolute;
        top: 80px;
        left: 50%;
        margin-left: -167px;
    }
    
    #product-front,
    #product-back {
        width: 335px;
        height: 500px;
        background: #fff;
        position: absolute;
        left: -5px;
        top: -5px;
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #product-back {
        display: none;
        transform: rotateY( 180deg);
    }
    
    #product-card.animate #product-back,
    #product-card.animate #product-front {
        top: 0px;
        left: 0px;
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #product-card {
        width: 325px;
        height: 490px;
        position: absolute;
        top: 10px;
        left: 10px;
        overflow: hidden;
        transform-style: preserve-3d;
        -webkit-transition: 100ms ease-out;
        -moz-transition: 100ms ease-out;
        -o-transition: 100ms ease-out;
        transition: 100ms ease-out;
    }
    
    div#product-card.flip-10 {
        -webkit-transform: rotateY( -10deg);
        -moz-transform: rotateY( -10deg);
        -o-transform: rotateY( -10deg);
        transform: rotateY( -10deg);
        transition: 50ms ease-out;
    }
    
    div#product-card.flip90 {
        -webkit-transform: rotateY( 90deg);
        -moz-transform: rotateY( 90deg);
        -o-transform: rotateY( 90deg);
        transform: rotateY( 90deg);
        transition: 100ms ease-in;
    }
    
    div#product-card.flip190 {
        -webkit-transform: rotateY( 190deg);
        -moz-transform: rotateY( 190deg);
        -o-transform: rotateY( 190deg);
        transform: rotateY( 190deg);
        transition: 100ms ease-out;
    }
    
    div#product-card.flip180 {
        -webkit-transform: rotateY( 180deg);
        -moz-transform: rotateY( 180deg);
        -o-transform: rotateY( 180deg);
        transform: rotateY( 180deg);
        transition: 150ms ease-out;
    }
    
    #product-card.animate {
        top: 5px;
        left: 5px;
        width: 335px;
        height: 500px;
        box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
        -webkit-transition: 100ms ease-out;
        -moz-transition: 100ms ease-out;
        -o-transition: 100ms ease-out;
        transition: 100ms ease-out;
    }
    
    .stats-container {
        background: #fff;
        position: absolute;
        top: 386px;
        left: 0;
        width: 265px;
        height: 300px;
        padding: 27px 35px 35px;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }
    
    #product-card.animate .stats-container {
        top: 272px;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }
    
    .stats-container .product_name {
        font-size: 22px;
        color: #393c45;
    }
    
    .stats-container p {
        font-size: 16px;
        color: #b1b1b3;
        padding: 2px 0 20px 0;
    }
    
    .stats-container .product_price {
        float: right;
        color: #48cfad;
        font-size: 22px;
        font-weight: 600;
    }
    
    .image_overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #48daa1;
        opacity: 0;
    }
    
    #product-card.animate .image_overlay {
        opacity: 0.7;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }
    
    .product-options {
        padding: 2px 0 0;
    }
    
    .product-options strong {
        font-weight: 700;
        color: #393c45;
        font-size: 14px;
    }
    
    .product-options span {
        color: #969699;
        font-size: 14px;
        display: block;
        margin-bottom: 8px;
    }
    
    #view_details {
        position: absolute;
        top: 112px;
        left: 50%;
        margin-left: -85px;
        border: 2px solid #fff;
        color: #fff;
        font-size: 19px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 0;
        width: 172px;
        opacity: 0;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }
    
    #view_details:hover {
        background: #fff;
        color: #48cfad;
        cursor: pointer;
    }
    
    #product-card.animate #view_details {
        opacity: 1;
        width: 152px;
        font-size: 15px;
        margin-left: -75px;
        top: 115px;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }
    
    div.colors div {
        margin-top: 3px;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        float: left;
    }
    
    div.colors div span {
        width: 15px;
        height: 15px;
        display: block;
        border-radius: 50%;
    }
    
    div.colors div span:hover {
        width: 17px;
        height: 17px;
        margin: -1px 0 0 -1px;
    }
    
    div.c-blue span {
        background: #6e8cd5;
    }
    
    div.c-red span {
        background: #f56060;
    }
    
    div.c-green span {
        background: #44c28d;
    }
    
    div.c-white span {
        background: #fff;
        width: 14px;
        height: 14px;
        border: 1px solid #e8e9eb;
    }
    
    div.shadow {
        width: 335px;
        height: 520px;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
        background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
        background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
        background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    }
    
    #product-back div.shadow {
        z-index: 10;
        opacity: 1;
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
        background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
        background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
        background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    }
    
    #flip-back {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    
    #cx,
    #cy {
        background: #d2d5dc;
        position: absolute;
        width: 0px;
        top: 15px;
        right: 15px;
        height: 3px;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }
    
    #flip-back:hover #cx,
    #flip-back:hover #cy {
        background: #979ca7;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }
    
    #cx.s1,
    #cy.s1 {
        right: 0;
        width: 30px;
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #cy.s2 {
        -ms-transform: rotate(50deg);
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #cy.s3 {
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #cx.s1 {
        right: 0;
        width: 30px;
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #cx.s2 {
        -ms-transform: rotate(140deg);
        -webkit-transform: rotate(140deg);
        transform: rotate(140deg);
        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #cx.s3 {
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        -webkit-transition: all 100ease-out;
        -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
    }
    
    #carousel {
        width: 335px;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
    
    #carousel ul {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #carousel li {
        width: 335px;
        height: 500px;
        float: left;
        overflow: hidden;
    }
    
    .arrows-perspective {
        width: 335px;
        height: 55px;
        position: absolute;
        top: 218px;
        transform-style: preserve-3d;
        transition: transform 5s;
        perspective: 335px;
    }
    
    .carouselPrev,
    .carouselNext {
        width: 50px;
        height: 55px;
        background: #ccc;
        position: absolute;
        top: 0;
        transition: all 200ms ease-out;
        opacity: 0.9;
        cursor: pointer;
    }
    
    .carouselNext {
        top: 0;
        right: -26px;
        -webkit-transform: rotateY( -117deg);
        -moz-transform: rotateY( -117deg);
        -o-transform: rotateY( -117deg);
        transform: rotateY( -117deg);
        transition: all 200ms ease-out;
    }
    
    .carouselNext.visible {
        right: 0;
        opacity: 0.8;
        background: #efefef;
        -webkit-transform: rotateY( 0deg);
        -moz-transform: rotateY( 0deg);
        -o-transform: rotateY( 0deg);
        transform: rotateY( 0deg);
        transition: all 200ms ease-out;
    }
    
    .carouselPrev {
        left: -26px;
        top: 0;
        -webkit-transform: rotateY( 117deg);
        -moz-transform: rotateY( 117deg);
        -o-transform: rotateY( 117deg);
        transform: rotateY( 117deg);
        transition: all 200ms ease-out;
    }
    
    .carouselPrev.visible {
        left: 0;
        opacity: 0.8;
        background: #eee;
        -webkit-transform: rotateY( 0deg);
        -moz-transform: rotateY( 0deg);
        -o-transform: rotateY( 0deg);
        transform: rotateY( 0deg);
        transition: all 200ms ease-out;
    }
    
    #carousel .x,
    #carousel .y {
        height: 2px;
        width: 15px;
        background: #48cfad;
        position: absolute;
        top: 31px;
        left: 17px;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    #carousel .x {
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        top: 21px;
    }
    
    #carousel .carouselNext .x {
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    #carousel .carouselNext .y {
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }