/*
Author URI: http://webthemez.com/
Note: 
Licence under Creative Commons Attribution 3.0 
Do not remove the back-link in this web template 
-------------------------------------------------------*/
    
    @import url('http://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:400,600,700');
    @import url('font-awesome.css');
    @import url('animate.css');
    body {
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 300;
        line-height: 1.6em;
        color: #656565;
    }
    
    a:active {
        outline: 0;
    }
    
    .clear {
        clear: both;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Open Sans', Arial, sans-serif;
        font-weight: 700;
        line-height: 1.1em;
        color: #333;
        margin-bottom: 20px;
    }
    
    .container {
        padding: 0 20px 0 20px;
        position: relative;
        color: #fff;
    }
    
    #wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .row,
    .row-fluid {
        margin-bottom: 30px;
    }
    
    .row .row,
    .row-fluid .row-fluid {
        margin-bottom: 30px;
    }
    
    .row.nomargin,
    .row-fluid.nomargin {
        margin-bottom: 0;
    }
    
    img.img-polaroid {
        margin: 0 0 20px 0;
    }
    
    .img-box {
        max-width: 100%;
    }
    
    p {
        color: #555;
    }
    
    h2 {
        font-size: 22px;
    }
    /*  Header
==================================== */
    
    header .navbar {
        margin-bottom: 0;
    }
    
    .navbar-default {
        border: none;
    }
    
    .navbar-brand {
        color: #222;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        line-height: 1em;
        letter-spacing: -1px;
        margin-top: 12px;
        padding: 0 0 0 15px;
    }
    
    .navbar-default .navbar-brand {
        color: #61B331;
    }
    
    header .navbar-collapse ul.navbar-nav {
        float: right;
        margin-right: 0;
    }
    
    header .navbar-default {
        background-color: black;
    }
    
    header .nav li a:hover,
    header .nav li a:focus,
    header .nav li.active a,
    header .nav li.active a:hover,
    header .nav li a.dropdown-toggle:hover,
    header .nav li a.dropdown-toggle:focus,
    header .nav li.active ul.dropdown-menu li a:hover,
    header .nav li.active ul.dropdown-menu li.active a {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    
    header .navbar-default .navbar-nav>.open>a,
    header .navbar-default .navbar-nav>.open>a:hover,
    header .navbar-default .navbar-nav>.open>a:focus {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    
    header .navbar {
        min-height: 70px;
        padding: 18px 0;
    }
    
    header .navbar-nav>li {
        padding-bottom: 12px;
        padding-top: 12px;
    }
    
    header .navbar-nav>li>a {
        padding-bottom: 6px;
        padding-top: 5px;
        margin-left: 2px;
        line-height: 30px;
        font-weight: 700;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    
    .dropdown-menu li a:hover {
        color: #fff !important;
    }
    
    header .nav .caret {
        border-bottom-color: #f5f5f5;
        border-top-color: #f5f5f5;
    }
    
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
        background-color: #fff;
    }
    
    .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:hover,
    .navbar-default .navbar-nav>.open>a:focus {
        background-color: #fff;
    }
    
    .about-logo {
        padding: 10px 25px 25px;
        background-color: #E6E6E6;
        margin-bottom: 30px;
    }
    
    .dropdown-menu {
        box-shadow: none;
        border-radius: 0;
        border: none;
    }
    
    h3,
    .h3 {
        font-size: 20px;
    }
    
    .dropdown-menu li:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0;
    }
    
    header .nav li .dropdown-menu {
        padding: 0;
    }
    
    header .nav li .dropdown-menu li a {
        line-height: 28px;
        padding: 3px 12px;
    }
    
    .quick-search {
        padding: 25px 40px;
        background: rgba(255, 255, 255, .7);
    }
    
    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
        color: #555;
    }
    
    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    /* --- menu --- */
    
    header .navigation {
        float: right;
    }
    
    header ul.nav li {
        border: none;
        margin: 0;
    }
    
    header ul.nav li a {
        font-size: 12px;
        border: none;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    header ul.nav li ul li a {
        font-size: 12px;
        border: none;
        font-weight: 300;
        text-transform: uppercase;
    }
    
    .navbar .nav>li>a {
        color: white;
        text-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0) !important;
    }
    
    .navbar .nav a:hover {
        background: none;
    }
    
    .navbar .nav>.active>a,
    .navbar .nav>.active>a:hover {
        background: none;
        font-weight: 700;
    }
    
    .navbar .nav>.active>a:active,
    .navbar .nav>.active>a:focus {
        background: none;
        outline: 0;
        font-weight: 700;
    }
    
    .navbar .nav li .dropdown-menu {
        z-index: 2000;
    }
    
    header ul.nav li ul {
        margin-top: 1px;
    }
    
    header ul.nav li ul li ul {
        margin: 1px 0 0 1px;
    }
    
    .dropdown-menu .dropdown i {
        position: absolute;
        right: 0;
        margin-top: 3px;
        padding-left: 20px;
    }
    
    .navbar .nav>li>.dropdown-menu:before {
        display: inline-block;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-bottom-color: none;
        content: none;
    }
    
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
        color: #FFF;
        background-color: #32bada;
    }
    
    ul.nav li.dropdown a {
        z-index: 1000;
        display: block;
    }
    
    select.selectmenu {
        display: none;
    }
    
    .pageTitle {
        color: #fff;
        margin: 30px 0 3px;
        display: inline-block;
    }
    
    #featured {
        width: 100%;
        background: #000;
        position: relative;
        margin: 0;
        padding: 0;
    }
    /*  Sliders
==================================== */
    /* --- flexslider --- */
    
    #featured .flexslider {
        padding: 0;
        background: #fff;
        position: relative;
        zoom: 1;
    }
    
    .flex-direction-nav .flex-prev {
        left: 0px;
    }
    
    .flex-direction-nav .flex-next {
        right: 0px;
    }
    
    .flex-caption {
        zoom: 1;
        bottom: 35px;
        background-color: transparent;
        color: #fff;
        margin: 0;
        padding: 25px 25px 25px 30px;
        position: absolute;
        left: 0;
        right: 0;
    }
    
    .flex-caption h3 {
        color: #fff;
        letter-spacing: 1px;
        margin-bottom: 8px;
        text-transform: uppercase;
    }
    
    .flex-caption p {
        margin: 0 0 15px;
    }
    
    .skill-home {
        margin-bottom: 30px;
    }
    
    .c1 {
        /* border: #ed5441 1px solid; */
        background: #FF9385;
    }
    
    .c2 {
        /* border: #24c4db 1px solid; */
        background: #72EDFF;
    }
    
    .c3 {
        /* border: #61B331 1px solid; */
        background: #29C39C;
    }
    
    .c4 {
        /* border: #609cec 1px solid; */
        background: #8EBFFF;
    }
    
    .skill-home .icons {
        padding: 34px;
        width: 100px;
        height: 100px;
        color: black;
        font-size: 32px;
        text-align: center;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: inline-table;
        background-color: #E6E6E6;
    }
    
    .skill-home h2 {
        padding-top: 20px;
        font-size: 36px;
        font-weight: 700;
    }
    
    .testimonial-solid {
        padding: 50px 0 60px 0;
        margin: 0 0 0 0;
        background: #E8E8E8;
        text-align: center;
    }
    
    .testi-icon-area {
        text-align: center;
        position: absolute;
        top: -84px;
        margin: 0 auto;
        width: 100%;
        display: none;
    }
    
    .testi-icon-area .quote {
        padding: 15px 0 0 0;
        margin: 0 0 0 0;
        background: #ffffff;
        text-align: center;
        color: #61B331;
        display: inline-table;
        width: 70px;
        height: 70px;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        font-size: 42px;
        border: 1px solid #61B331;
    }
    
    .testi-icon-area .carousel-inner {
        margin: 20px 0;
    }
    
    .carousel-indicators {
        bottom: -30px;
    }
    
    footer p {
        color: #fff;
    }
    /* Testimonial
----------------------------------*/
    
    .testimonial-area {
        padding: 0 0 0 0;
        margin: 0;
        background: url(../img/low-poly01.jpg) fixed center center;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
    }
    
    .testimonial-solid p {
        color: #000000;
        font-size: 16px;
        line-height: 30px;
        font-style: italic;
    }
    
    section.hero-text {
        background: black;
        padding: 30px 0 0 0;
    }
    
    section.hero-text h1 {
        color: #fff;
        margin: 0 0 10px;
        font-weight: 400;
    }
    
    section.hero-text p {
        color: darkgrey;
    }
    
    .carousel-indicators .active {
        background-color: #32bada;
    }
    
    .carousel-indicators li {
        border-color: #32bada;
    }
    /* Content
==================================== */
    
    #content {
        position: relative;
        background: #fff;
        padding: 50px 0 0px 0;
    }
    
    #content img {
        max-width: 100%;
        height: auto;
        border-bottom: 6px solid #32bada;
    }
    
    .cta-text {
        text-align: center;
        margin-top: 10px;
    }
    
    .big-cta .cta {
        margin-top: 10px;
    }
    
    .box {
        width: 100%;
    }
    
    .box-gray {
        background: #f8f8f8;
        padding: 20px 20px 30px;
    }
    
    .box-gray h4,
    .box-gray i {
        margin-bottom: 20px;
    }
    
    .box-bottom {
        padding: 20px 0;
        text-align: center;
    }
    
    .box-bottom a {
        color: #fff;
        font-weight: 700;
    }
    
    .box-bottom a:hover {
        color: #eee;
        text-decoration: none;
    }
    /* Bottom
==================================== */
    
    #bottom {
        background: #fcfcfc;
        padding: 50px 0 0;
    }
    /* twitter */
    
    #twitter-wrapper {
        text-align: center;
        width: 70%;
        margin: 0 auto;
    }
    
    #twitter em {
        font-style: normal;
        font-size: 13px;
    }
    
    #twitter em.twitterTime a {
        font-weight: 600;
    }
    
    #twitter ul {
        padding: 0;
        list-style: none;
    }
    
    #twitter ul li {
        font-size: 20px;
        line-height: 1.6em;
        font-weight: 300;
        margin-bottom: 20px;
        position: relative;
        word-break: break-word;
    }
    /* page headline
==================================== */
    
    #inner-headline {
        background: #32bada;
        position: relative;
        margin: 0;
        padding: 0;
        color: #fefefe;
        border-top: 4px solid #42CAA8;
    }
    
    #inner-headline .inner-heading h2 {
        color: #fff;
        margin: 20px 0 0 0;
    }
    /* --- breadcrumbs --- */
    
    #inner-headline ul.breadcrumb {
        margin: 30px 0 0;
        float: left;
    }
    
    #inner-headline ul.breadcrumb li {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    #inner-headline ul.breadcrumb li {
        font-size: 13px;
        color: #fff;
    }
    
    #inner-headline ul.breadcrumb li i {
        color: #dedede;
    }
    
    #inner-headline ul.breadcrumb li a {
        color: #fff;
    }
    
    ul.breadcrumb li a:hover {
        text-decoration: none;
    }
    /* Forms
============================= */
    /* --- contact form  ---- */
    
    form#contactform input[type="text"] {
        width: 100%;
        border: 1px solid #f5f5f5;
        min-height: 40px;
        padding-left: 20px;
        font-size: 13px;
        padding-right: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    form#contactform textarea {
        border: 1px solid #f5f5f5;
        width: 100%;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 13px;
        padding-right: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    form#contactform .validation {
        font-size: 11px;
    }
    
    #sendmessage {
        border: 1px solid #e6e6e6;
        background: #f6f6f6;
        display: none;
        text-align: center;
        padding: 15px 12px 15px 65px;
        margin: 10px 0;
        font-weight: 600;
        margin-bottom: 30px;
    }
    
    #sendmessage.show,
    .show {
        display: block;
    }
    
    form#commentform input[type="text"] {
        width: 100%;
        min-height: 40px;
        padding-left: 20px;
        font-size: 13px;
        padding-right: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        border-radius: 2px 2px 2px 2px;
    }
    
    form#commentform textarea {
        width: 100%;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 13px;
        padding-right: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        border-radius: 2px 2px 2px 2px;
    }
    /* --- search form --- */
    
    .search {
        float: right;
        margin: 35px 0 0;
        padding-bottom: 0;
    }
    
    #inner-headline form.input-append {
        margin: 0;
        padding: 0;
    }
    /*  Portfolio
================================ */
    
    .work-nav #filters {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .work-nav #filters li {
        margin: 0 10px 30px 0;
        padding: 0;
        float: left;
    }
    
    .work-nav #filters li a {
        color: #7F8289;
        font-size: 16px;
        display: block;
    }
    
    .work-nav #filters li a:hover {}
    
    .work-nav #filters li a.selected {
        color: #DE5E60;
    }
    
    #thumbs {
        margin: 0;
        padding: 0;
    }
    
    #thumbs li {
        list-style-type: none;
    }
    
    .item-thumbs {
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
        cursor: pointer;
    }
    
    .item-thumbs a+img {
        width: 100%;
    }
    
    .item-thumbs .hover-wrap {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all 450ms ease-out 0s;
        -moz-transition: all 450ms ease-out 0s;
        -o-transition: all 450ms ease-out 0s;
        transition: all 450ms ease-out 0s;
        -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
        -moz-transform: rotateY(180deg) scale(0.5, 0.5);
        -ms-transform: rotateY(180deg) scale(0.5, 0.5);
        -o-transform: rotateY(180deg) scale(0.5, 0.5);
        transform: rotateY(180deg) scale(0.5, 0.5);
    }
    
    .item-thumbs:hover .hover-wrap,
    .item-thumbs.active .hover-wrap {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateY(0deg) scale(1, 1);
        -moz-transform: rotateY(0deg) scale(1, 1);
        -ms-transform: rotateY(0deg) scale(1, 1);
        -o-transform: rotateY(0deg) scale(1, 1);
        transform: rotateY(0deg) scale(1, 1);
    }
    
    .item-thumbs .hover-wrap .overlay-img {
        position: absolute;
        width: 90%;
        height: 100%;
        opacity: 0.80;
        filter: alpha(opacity=80);
        background: #29C39C;
    }
    
    .item-thumbs .hover-wrap .overlay-img-thumb {
        position: absolute;
        border-radius: 60px;
        top: 50%;
        left: 45%;
        margin: -16px 0 0 -16px;
        color: #fff;
        font-size: 32px;
        line-height: 1em;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    ul.portfolio-categ {
        margin: 10px 0 30px 0;
        padding: 0;
        float: left;
        list-style: none;
    }
    
    ul.portfolio-categ li {
        margin: 0;
        float: left;
        list-style: none;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #D5D5D5;
        margin-right: 15px;
    }
    
    ul.portfolio-categ li a {
        display: block;
        padding: 8px 20px;
        color: #353535;
    }
    
    ul.portfolio-categ li.active {
        border: 1px solid #32bada;
    }
    
    ul.portfolio-categ li.active a:hover,
    ul.portfolio-categ li a:hover,
    ul.portfolio-categ li a:focus,
    ul.portfolio-categ li a:active {
        text-decoration: none;
        outline: 0;
    }
    
    #accordion-alt3 .panel-heading h4 {
        font-size: 13px;
        line-height: 28px;
        color: #555;
    }
    
    .panel .panel-heading h4 {
        font-weight: 400;
    }
    
    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
        color: inherit;
    }
    
    .panel-group .panel {
        margin-bottom: 0;
        border-radius: 2px;
    }
    
    .panel {
        margin-bottom: 18px;
        background-color: #F4F4F4;
        border: 1px solid transparent;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    
    #accordion-alt3 .panel-heading h4 a i {
        font-size: 13px;
        line-height: 18px;
        width: 18px;
        height: 18px;
        margin-right: 5px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        margin-left: 6px;
        background: #61B331;
    }
    
    .progress.pb-sm {
        height: 6px!important;
    }
    
    .progress {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
    }
    
    .progress {
        overflow: hidden;
        height: 18px;
        margin-bottom: 18px;
        background-color: #f5f5f5;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .progress .progress-bar.progress-bar-red {
        background: #ed5441;
    }
    
    .progress .progress-bar.progress-bar-green {
        background: #51d466;
    }
    
    .progress .progress-bar.progress-bar-lblue {
        background: #32c8de;
    }
    /* --- portfolio detail --- */
    
    .top-wrapper {
        margin-bottom: 20px;
    }
    
    .info-blocks {
        margin-bottom: 15px;
    }
    
    .info-blocks i.icon-info-blocks {
        float: left;
        color: #777;
        font-size: 30px;
        min-width: 50px;
        margin-top: 10px;
        text-align: center;
    }
    
    .info-blocks .info-blocks-in {
        padding: 0 10px;
        overflow: hidden;
    }
    
    .info-blocks .info-blocks-in h3 {
        color: #555;
        font-size: 20px;
        line-height: 28px;
        margin: 0px;
    }
    
    .info-blocks .info-blocks-in p {
        font-size: 13px;
    }
    
    blockquote {
        font-size: 16px;
        font-weight: 400;
        font-family: 'Noto Serif', serif;
        font-style: italic;
        padding-left: 0;
        color: #a2a2a2;
        line-height: 1.6em;
        border: none;
    }
    
    blockquote cite {
        display: block;
        font-size: 12px;
        color: #666;
        margin-top: 10px;
    }
    
    blockquote cite:before {
        content: "\2014 \0020";
    }
    
    blockquote cite a,
    blockquote cite a:visited,
    blockquote cite a:visited {
        color: #555;
    }
    /* --- pullquotes --- */
    
    .pullquote-left {
        display: block;
        color: #a2a2a2;
        font-family: 'Noto Serif', serif;
        font-size: 14px;
        line-height: 1.6em;
        padding-left: 20px;
    }
    
    .pullquote-right {
        display: block;
        color: #a2a2a2;
        font-family: 'Noto Serif', serif;
        font-size: 14px;
        line-height: 1.6em;
        padding-right: 20px;
    }
    /* --- button --- */
    
    .btn {
        text-align: center;
        background: #32bada;
        color: #fff;
        border-color: #32bada;
    }
    
    .btn-theme {
        color: #fff;
    }
    
    .btn-theme:hover {
        color: #eee;
    }
    /* --- list style --- */
    
    ul.general {
        list-style: none;
        margin-left: 0;
    }
    
    ul.link-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    ul.link-list li {
        margin: 0;
        padding: 2px 0 2px 0;
        list-style: none;
    }
    
    footer {
        background: #252525;
        border-top: 4px solid #32bada;
    }
    
    footer ul.link-list li a {
        color: #fff;
    }
    
    footer ul.link-list li a:hover {
        color: #eee;
    }
    /* --- Heading style --- */
    
    h4.heading {
        font-weight: 700;
    }
    
    .heading {
        margin-bottom: 30px;
    }
    
    .heading {
        position: relative;
    }
    
    .widgetheading {
        width: 100%;
        padding: 0;
    }
    
    #bottom .widgetheading {
        position: relative;
        border-bottom: #e6e6e6 1px solid;
        padding-bottom: 9px;
    }
    
    aside .widgetheading {
        position: relative;
        border-bottom: #e9e9e9 1px solid;
        padding-bottom: 9px;
    }
    
    footer .widgetheading {
        position: relative;
    }
    
    footer .widget .social-network {
        position: relative;
    }
    
    #bottom .widget .widgetheading span,
    aside .widget .widgetheading span,
    footer .widget .widgetheading span {
        position: absolute;
        width: 60px;
        height: 1px;
        bottom: -1px;
        right: 0;
    }
    
    .box-area {
        /* border: 1px solid #E7E7E7; */
        /* padding:0 15px; */
        /* padding-top: 41px; */
        /* margin-top: -42px; */
    }
    /* --- Map --- */
    
    .map {
        position: relative;
        margin-top: -50px;
        margin-bottom: 40px;
    }
    
    .map iframe {
        width: 100%;
        height: 450px;
        border: none;
    }
    
    .map-grid iframe {
        width: 100%;
        height: 350px;
        border: none;
        margin: 0 0 -5px 0;
        padding: 0;
    }
    
    ul.team-detail {
        margin: -10px 0 0 0;
        padding: 0;
        list-style: none;
    }
    
    ul.team-detail li {
        border-bottom: 1px dotted #e9e9e9;
        margin: 0 0 15px 0;
        padding: 0 0 15px 0;
        list-style: none;
    }
    
    ul.team-detail li label {
        font-size: 13px;
    }
    
    ul.team-detail li h4,
    ul.team-detail li label {
        margin-bottom: 0;
    }
    
    ul.team-detail li ul.social-network {
        border: none;
        margin: 0;
        padding: 0;
    }
    
    ul.team-detail li ul.social-network li {
        border: none;
        margin: 0;
    }
    
    ul.team-detail li ul.social-network li i {
        margin: 0;
    }
    
    .pricing-title {
        background: #fff;
        text-align: center;
        padding: 10px 0 10px 0;
    }
    
    .pricing-title h3 {
        font-weight: 600;
        margin-bottom: 0;
    }
    
    .pricing-offer {
        background: #fcfcfc;
        text-align: center;
        padding: 40px 0 40px 0;
        font-size: 18px;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    
    .pricing-box.activeItem .pricing-offer {
        color: #fff;
    }
    
    .pricing-offer strong {
        font-size: 78px;
        line-height: 89px;
    }
    
    .pricing-offer sup {
        font-size: 28px;
    }
    
    .pricing-container {
        background: #fff;
        text-align: center;
        font-size: 14px;
    }
    
    .pricing-container strong {
        color: #353535;
    }
    
    .pricing-container ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .pricing-container ul li {
        border-bottom: 1px solid #CFCFCF;
        list-style: none;
        padding: 15px 0 15px 0;
        margin: 0 0 0 0;
        color: #222;
    }
    
    .pricing-action {
        margin: 0;
        background: #fcfcfc;
        text-align: center;
        padding: 20px 0 30px 0;
    }
    
    .pricing-wrapp {
        margin: 0 auto;
        width: 100%;
        background: #fd0000;
    }
    
    .pricing-box-item {
        border: 1px solid #e6e6e6;
        background: #fcfcfc;
        position: relative;
        margin: 0 0 20px 0;
        padding: 0;
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
        -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .pricing-box-item .pricing-heading {
        background: #fcfcfc;
        text-align: center;
        padding: 0px 0 0px 0;
        display: block;
    }
    
    .pricing-box-item.activeItem .pricing-heading {
        background: #fcfcfc;
        text-align: center;
        padding: 0px 0 1px 0;
        border-bottom: none;
        display: block;
        color: #fff;
    }
    
    .pricing-box-item.activeItem .pricing-heading h3 {}
    
    .pricing-box-item .pricing-heading h3 strong {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -1px;
    }
    
    .pricing-box-item .pricing-heading h3 {
        font-size: 32px;
        font-weight: 300;
        letter-spacing: -1px;
    }
    
    .pricing-box-item .pricing-terms {
        text-align: center;
        background: #929292;
        display: block;
        overflow: hidden;
        padding: 11px 0 5px;
    }
    
    .pricing-box-item .pricing-terms h6 {
        font-style: italic;
        margin-top: 10px;
        color: #fff;
        font-size: 17px;
        font-family: 'Noto Serif', serif;
    }
    
    .pricing-box-item .icon .price-circled {
        margin: 10px 10px 10px 0;
        display: inline-block !important;
        text-align: center !important;
        color: #fff;
        width: 68px;
        height: 68px;
        padding: 12px;
        font-size: 16px;
        font-weight: 700;
        line-height: 68px;
        text-shadow: none;
        cursor: pointer;
        background-color: #888;
        border-radius: 64px;
        -moz-border-radius: 64px;
        -webkit-border-radius: 64px;
    }
    
    .pricing-box-item .pricing-action {
        margin: 0;
        text-align: center;
        padding: 30px 0 30px 0;
    }
    /* ===== Widgets ===== */
    /* --- flickr --- */
    
    .widget .flickr_badge {
        width: 100%;
    }
    
    .widget .flickr_badge img {
        margin: 0 9px 20px 0;
    }
    
    footer .widget .flickr_badge {
        width: 100%;
    }
    
    footer .widget .flickr_badge img {
        margin: 0 9px 20px 0;
    }
    
    .flickr_badge img {
        width: 50px;
        height: 50px;
        float: left;
        margin: 0 9px 20px 0;
    }
    /* --- Recent post widget --- */
    
    .recent-post {
        margin: 20px 0 0 0;
        padding: 0;
        line-height: 18px;
    }
    
    .recent-post h5 a:hover {
        text-decoration: none;
    }
    
    .recent-post .text h5 a {
        color: #353535;
    }
    
    footer {
        padding: 50px 0 0 0;
        color: #C7C7C7;
    }
    
    footer a {
        color: #fff;
    }
    
    footer a:hover {
        color: #eee;
    }
    
    footer h1,
    footer h2,
    footer h3,
    footer h4,
    footer h5,
    footer h6 {
        color: #fff;
    }
    
    footer address {
        line-height: 1.6em;
    }
    
    footer h5 a:hover,
    footer a:hover {
        text-decoration: none;
    }
    
    ul.social-network {
        list-style: none;
        margin: 0;
    }
    
    ul.social-network li {
        display: inline;
        margin: 0 5px;
    }
    
    #sub-footer {
        text-shadow: none;
        color: #f5f5f5;
        padding: 0;
        padding-top: 30px;
        margin: 20px 0 0 0;
        background: #212121;
    }
    
    #sub-footer p {
        margin: 0;
        padding: 0;
    }
    
    #sub-footer span {
        color: #f5f5f5;
    }
    
    .copyright {
        text-align: left;
        font-size: 12px;
    }
    
    #sub-footer ul.social-network {
        float: right;
    }
    /* scroll to top */
    
    .scrollup {
        position: fixed;
        width: 32px;
        height: 32px;
        bottom: 0px;
        right: 20px;
        background: #222;
    }
    
    a.scrollup {
        outline: 0;
        text-align: center;
    }
    
    a.scrollup:hover,
    a.scrollup:active,
    a.scrollup:focus {
        opacity: 1;
        text-decoration: none;
    }
    
    a.scrollup i {
        margin-top: 10px;
        color: #fff;
    }
    
    a.scrollup i:hover {
        text-decoration: none;
    }
    
    .absolute {
        position: absolute;
    }
    
    .relative {
        position: relative;
    }
    
    .aligncenter {
        text-align: center;
    }
    
    .aligncenter span {
        margin-left: 0;
    }
    
    .floatright {
        float: right;
    }
    
    .floatleft {
        float: left;
    }
    
    .floatnone {
        float: none;
    }
    
    .aligncenter {
        text-align: center;
    }
    
    img.pull-left,
    .align-left {
        float: left;
        margin: 0 15px 15px 0;
    }
    
    .widget img.pull-left {
        float: left;
        margin: 0 15px 15px 0;
    }
    
    img.pull-right,
    .align-right {
        float: right;
        margin: 0 0 15px 15px;
    }
    
    article img.pull-left,
    article .align-left {
        float: left;
        margin: 5px 15px 15px 0;
    }
    
    article img.pull-right,
    article .align-right {
        float: right;
        margin: 5px 0 15px 15px;
    }
    
    =============================*/ .clear-marginbot {
        margin-bottom: 0;
    }
    
    .marginbot10 {
        margin-bottom: 10px;
    }
    
    .marginbot20 {
        margin-bottom: 20px;
    }
    
    .marginbot30 {
        margin-bottom: 30px;
    }
    
    .marginbot40 {
        margin-bottom: 40px;
    }
    
    .clear-margintop {
        margin-top: 0;
    }
    
    .margintop10 {
        margin-top: 10px;
    }
    
    .margintop20 {
        margin-top: 20px;
    }
    
    .margintop30 {
        margin-top: 30px;
    }
    
    .margintop40 {
        margin-top: 40px;
    }
    /* LOGIN */
    
    @use postcss-preset-env {
        stage: 0;
    }
    /* config.css */
    
     :root {
        --baseColor: #606468;
    }
    /* helpers/align.css */
    
    .align {
        display: grid;
        place-items: center;
    }
    
    .grid {
        inline-size: 90%;
        margin-inline: auto;
        max-inline-size: 20rem;
        position: relative;
        top: 5em;
    }
    /* helpers/hidden.css */
    
    .hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    /* helpers/icon.css */
    
     :root {
        --iconFill: var(--baseColor);
    }
    
    .icons {
        display: none;
    }
    
    .icon1 {
        block-size: 1em;
        display: inline-block;
        fill: var(--iconFill);
        inline-size: 1em;
        vertical-align: middle;
    }
    /* layout/base.css */
    
     :root {
        --htmlFontSize: 100%;
        --bodyBackgroundColor: #2c3338;
        --bodyColor: var(--baseColor);
        --bodyFontFamily: "Open Sans";
        --bodyFontFamilyFallback: sans-serif;
        --bodyFontSize: 0.875rem;
        --bodyFontWeight: 400;
        --bodyLineHeight: 1.5;
    }
    
    * {
        box-sizing: inherit;
    }
    
    html {
        box-sizing: border-box;
        font-size: var(--htmlFontSize);
    }
    
    body {
        color: var(--bodyColor);
        font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
        font-size: var(--bodyFontSize);
        font-weight: var(--bodyFontWeight);
        line-height: var(--bodyLineHeight);
        margin: 0;
        min-block-size: 100vh;
    }
    /* modules/anchor.css */
    
     :root {
        --anchorColor: #eee;
    }
    
    a {
        color: var(--anchorColor);
        outline: 0;
        text-decoration: none;
    }
    
    a:focus,
    a:hover {
        text-decoration: underline;
    }
    /* modules/form.css */
    
     :root {
        --formGap: 0.875rem;
    }
    
    input {
        background-image: none;
        border: 0;
        color: inherit;
        font: inherit;
        margin: 0;
        outline: 0;
        padding: 0;
        transition: background-color 0.3s;
    }
    
    input[type="submit"] {
        cursor: pointer;
    }
    
    .form {
        display: grid;
        gap: var(--formGap);
    }
    
    .form input[type="password"],
    .form input[type="text"],
    .form input[type="submit"] {
        inline-size: 100%;
    }
    
    .form__field {
        display: flex;
    }
    
    .form__input {
        flex: 1;
    }
    /* modules/login.css */
    
     :root {
        --loginBorderRadus: 0.25rem;
        --loginColor: #eee;
        --loginInputBackgroundColor: #3b4148;
        --loginInputHoverBackgroundColor: #434a52;
        --loginLabelBackgroundColor: #363b41;
        --loginSubmitBackgroundColor: #ea4c88;
        --loginSubmitColor: #eee;
        --loginSubmitHoverBackgroundColor: #d44179;
    }
    
    .login {
        color: var(--loginColor);
    }
    
    .login label,
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="submit"] {
        border-radius: var(--loginBorderRadus);
        padding: 1rem;
    }
    
    .login label {
        background-color: var(--loginLabelBackgroundColor);
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        padding-inline: 1.25rem;
    }
    
    .login input[type="password"],
    .login input[type="text"] {
        background-color: var(--loginInputBackgroundColor);
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    
    .login input[type="password"]:focus,
    .login input[type="password"]:hover,
    .login input[type="text"]:focus,
    .login input[type="text"]:hover {
        background-color: var(--loginInputHoverBackgroundColor);
    }
    
    .login input[type="submit"] {
        background-color: #32bada;
        color: var(--loginSubmitColor);
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .login input[type="submit"]:focus,
    .login input[type="submit"]:hover {
        background-color: #1e7083;
    }
    /* modules/text.css */
    
    p {
        margin-block: 1.5rem;
    }
    
    .text--center {
        text-align: center;
    }
    /* dashboard */
    
    #content-dash {
        position: relative;
        background: #fff;
        padding: 15px 0 0px 0;
        box-sizing: border-box;
    }
    
    .dashname {
        padding-left: 1em;
    }
    
    .row-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-bottom: 5em;
        padding-left: 6em;
        padding-right: 6em;
    }
    
    .column1 {
        padding: 20px;
        width: 17em;
        border-radius: 30px;
        background: #e0e0e0;
        box-shadow: 17px 17px 34px #bebebe, -17px -17px 34px #ffffff;
    }
    
    .column2 {
        padding: 20px;
        width: 17em;
        border-radius: 30px;
        background: #e0e0e0;
        box-shadow: 17px 17px 34px #bebebe, -17px -17px 34px #ffffff;
    }
    
    .column3 {
        padding: 20px;
        width: 17em;
        border-radius: 30px;
        background: #e0e0e0;
        box-shadow: 17px 17px 34px #bebebe, -17px -17px 34px #ffffff;
    }
    
    .column4 {
        padding: 20px;
        width: 17em;
        border-radius: 30px;
        background: #e0e0e0;
        box-shadow: 17px 17px 34px #bebebe, -17px -17px 34px #ffffff;
    }
    
    .column5 {
        padding: 20px;
        width: 17em;
        border-radius: 30px;
        background: #e0e0e0;
        box-shadow: 17px 17px 34px #bebebe, -17px -17px 34px #ffffff;
    }
    
    @media screen and (max-width: 992px) {
        .column {
            flex: 50%;
        }
    }
    /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
    
    @media screen and (max-width: 600px) {
        .row {
            flex-direction: column;
        }
    }
    
    #buymore {
        background: white;
        text-align: center;
        position: relative;
    }
    
    .bn54 {
        position: relative;
        outline: none;
        text-decoration: none;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        text-transform: uppercase;
        height: 45px;
        width: 130px;
        opacity: 1;
        background-color: #32bada;
        border: 2px solid rgba(0, 0, 0, 0.6);
        margin: auto;
        position: relative;
        bottom: 10px;
    }
    
    .bn54 .bn54span {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: white;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.7px;
    }
    
    .bn54:hover {
        animation: bn54rotate 0.7s ease-in-out both;
    }
    
    .bn54:hover .bn54span {
        animation: bn54storm 0.7s ease-in-out both;
        animation-delay: 0.06s;
    }
    
    @keyframes bn54rotate {
        0% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }
        25% {
            transform: rotate(3deg) translate3d(0, 0, 0);
        }
        50% {
            transform: rotate(-3deg) translate3d(0, 0, 0);
        }
        75% {
            transform: rotate(1deg) translate3d(0, 0, 0);
        }
        100% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }
    }
    
    @keyframes bn54storm {
        0% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }
        25% {
            transform: translate3d(4px, 0, 0) translateZ(0);
        }
        50% {
            transform: translate3d(-3px, 0, 0) translateZ(0);
        }
        75% {
            transform: translate3d(2px, 0, 0) translateZ(0);
        }
        100% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }
    }
    /*  Table */
    
    section#table {
        padding-top: 4em;
        text-align: center;
        padding-bottom: 5em;
        background-color: white;
    }
    
    .collapsible {
        padding: 1.6em 4em;
        border: none;
        outline: none;
        color: rgb(255, 255, 255);
        background: #111;
        cursor: pointer;
        position: relative;
        z-index: 0;
        border-radius: 10px;
        text-align: center;
        margin: auto;
    }
    
    .collapsible:before {
        content: "";
        background: linear-gradient( 45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowingbn5 20s linear infinite;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        border-radius: 10px;
    }
    
    @keyframes glowingcollapsible {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 400% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
    
    div.content-table {
        padding-top: 5em;
    }
    
    .collapsible:active {
        color: #000;
    }
    
    .collapsible:active:after {
        background: transparent;
    }
    
    .collapsible:hover:before {
        opacity: 1;
    }
    
    .collapsible:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #191919;
        left: 0;
        top: 0;
        border-radius: 10px;
    }
    /* -- import Roboto Font ---------------------------- */
    
    @import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
    /* -- You can use this tables in Bootstrap (v3) projects. -- */
    
    // @import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css";
    /* -- Box model ------------------------------- */
    
    *,
    *:after,
    *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /* -- Demo style ------------------------------- */
    
    table#table {
        position: relative;
        min-height: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    
    table#table {
        font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 12px;
        line-height: 2rem;
        letter-spacing: 0.01rem;
        color: #212121;
        background-color: #f5f5f5;
        // Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    #demo {
        margin: 20px auto;
        max-width: 960px;
    }
    
    // Material Design typography
    // https://codepen.io/zavoloklom/pen/IkaFL
    #demo h1 {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: 0;
        font-weight: 300;
        color: #212121;
        text-transform: inherit;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    #demo h2 {
        font-size: 1.5rem;
        line-height: 2.8rem;
        letter-spacing: 0.01rem;
        font-weight: 400;
        color: #212121;
        text-align: center;
    }
    
    // Material Design shadows
    // 
    .shadow-z-1 {
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
        -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
    }
    /* -- Material Design Table style -------------- */
    
    // Variables
    // ---------------------
    @table-header-font-weight: 400;
    @table-header-font-color: #757575;
    @table-cell-padding: 1.6rem;
    @table-condensed-cell-padding: @table-cell-padding/2;
    @table-bg: #fff;
    @table-bg-accent: #f5f5f5;
    @table-bg-hover: rgba(0,
    0,
    0,
    .12);
    @table-bg-active: @table-bg-hover;
    @table-border-color: #e0e0e0;
    // Mixins
    // -----------------
    .transition(@transition) {
        -webkit-transition: @transition;
        -o-transition: @transition;
        transition: @transition;
    }
    
    // Tables
    //
    // -----------------
    // Baseline styles
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 2rem;
        background-color: @table-bg;
        >thead,
        >tbody,
        >tfoot {
            >tr {
                .transition(all .3s ease);
                >th,
                >td {
                    text-align: left;
                    padding: @table-cell-padding;
                    vertical-align: top;
                    border-top: 0;
                    .transition(all .3s ease);
                }
            }
        }
        >thead>tr>th {
            font-weight: @table-header-font-weight;
            color: @table-header-font-color;
            vertical-align: bottom;
            border-bottom: 1px solid rgba(0, 0, 0, .12);
        }
        >caption+thead,
        >colgroup+thead,
        >thead:first-child {
            >tr:first-child {
                >th,
                >td {
                    border-top: 0;
                }
            }
        }
        >tbody+tbody {
            border-top: 1px solid rgba(0, 0, 0, .12);
        }
        // Nesting
        .table {
            background-color: @table-bg;
        }
        // Remove border
        .no-border {
            border: 0;
        }
    }
    
    // Condensed table w/ half padding
    .table-condensed {
        >thead,
        >tbody,
        >tfoot {
            >tr {
                >th,
                >td {
                    padding: @table-condensed-cell-padding;
                }
            }
        }
    }
    
    // Bordered version
    //
    // Add horizontal borders between columns.
    .table-bordered {
        border: 0;
        >thead,
        >tbody,
        >tfoot {
            >tr {
                >th,
                >td {
                    border: 0;
                    border-bottom: 1px solid @table-border-color;
                }
            }
        }
        >thead>tr {
            >th,
            >td {
                border-bottom-width: 2px;
            }
        }
    }
    
    // Zebra-striping
    //
    // Default zebra-stripe styles (alternating gray and transparent backgrounds)
    .table-striped {
        >tbody>tr:nth-child(odd) {
            >td,
            >th {
                background-color: @table-bg-accent;
            }
        }
    }
    
    // Hover effect
    //
    .table-hover {
        >tbody>tr:hover {
            >td,
            >th {
                background-color: @table-bg-hover;
            }
        }
    }
    
    // Responsive tables (vertical)
    //
    // Wrap your tables in `.table-responsive-vertical` and we'll make them mobile friendly
    // by vertical table-cell display. Only applies <768px. Everything above that will display normally.
    // For correct display you must add 'data-title' to each 'td'
    .table-responsive-vertical {
        @media screen and (max-width: 768px) {
            // Tighten up spacing
            > .table {
                margin-bottom: 0;
                background-color: transparent;
                >thead,
                >tfoot {
                    display: none;
                }
                >tbody {
                    display: block;
                    >tr {
                        display: block;
                        border: 1px solid @table-border-color;
                        border-radius: 2px;
                        margin-bottom: @table-cell-padding;
                        >td {
                            background-color: @table-bg;
                            display: block;
                            vertical-align: middle;
                            text-align: right;
                        }
                        >td[data-title]:before {
                            content: attr(data-title);
                            float: left;
                            font-size: inherit;
                            font-weight: @table-header-font-weight;
                            color: @table-header-font-color;
                        }
                    }
                }
            }
            // Special overrides for shadows
            &.shadow-z-1 {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                >.table>tbody>tr {
                    border: none;
                    .shadow-z-1();
                }
            }
            // Special overrides for the bordered tables
            >.table-bordered {
                border: 0;
                // Nuke the appropriate borders so that the parent can handle them
                >tbody {
                    >tr {
                        >td {
                            border: 0;
                            border-bottom: 1px solid @table-border-color;
                        }
                        >td:last-child {
                            border-bottom: 0;
                        }
                    }
                }
            }
            // Special overrides for the striped tables
            >.table-striped {
                >tbody>tr>td,
                >tbody>tr:nth-child(odd) {
                    background-color: @table-bg;
                }
                >tbody>tr>td:nth-child(odd) {
                    background-color: @table-bg-accent;
                }
            }
            // Special overrides for hover tables
            >.table-hover {
                >tbody {
                    >tr:hover>td,
                    >tr:hover {
                        background-color: @table-bg;
                    }
                    >tr>td:hover {
                        background-color: @table-bg-hover;
                    }
                }
            }
        }
    }
    
    // CSS/LESS Color variations
    //
    // --------------------------------
    .table-striped.table-mc-red>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-red>tbody>tr:nth-child(odd)>th {
        background-color: #fde0dc;
    }
    
    .table-hover.table-mc-red>tbody>tr:hover>td,
    .table-hover.table-mc-red>tbody>tr:hover>th {
        background-color: #f9bdbb;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-red>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-red>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-red>tbody>tr>td:nth-child(odd) {
            background-color: #fde0dc;
        }
        .table-responsive-vertical .table-hover.table-mc-red>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-red>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-red>tbody>tr>td:hover {
            background-color: #f9bdbb;
        }
    }
    
    .table-striped.table-mc-pink>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-pink>tbody>tr:nth-child(odd)>th {
        background-color: #fce4ec;
    }
    
    .table-hover.table-mc-pink>tbody>tr:hover>td,
    .table-hover.table-mc-pink>tbody>tr:hover>th {
        background-color: #f8bbd0;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-pink>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-pink>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-pink>tbody>tr>td:nth-child(odd) {
            background-color: #fce4ec;
        }
        .table-responsive-vertical .table-hover.table-mc-pink>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-pink>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-pink>tbody>tr>td:hover {
            background-color: #f8bbd0;
        }
    }
    
    .table-striped.table-mc-purple>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-purple>tbody>tr:nth-child(odd)>th {
        background-color: #f3e5f5;
    }
    
    .table-hover.table-mc-purple>tbody>tr:hover>td,
    .table-hover.table-mc-purple>tbody>tr:hover>th {
        background-color: #e1bee7;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-purple>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-purple>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-purple>tbody>tr>td:nth-child(odd) {
            background-color: #f3e5f5;
        }
        .table-responsive-vertical .table-hover.table-mc-purple>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-purple>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-purple>tbody>tr>td:hover {
            background-color: #e1bee7;
        }
    }
    
    .table-striped.table-mc-deep-purple>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-deep-purple>tbody>tr:nth-child(odd)>th {
        background-color: #ede7f6;
    }
    
    .table-hover.table-mc-deep-purple>tbody>tr:hover>td,
    .table-hover.table-mc-deep-purple>tbody>tr:hover>th {
        background-color: #d1c4e9;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-deep-purple>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-deep-purple>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-deep-purple>tbody>tr>td:nth-child(odd) {
            background-color: #ede7f6;
        }
        .table-responsive-vertical .table-hover.table-mc-deep-purple>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-deep-purple>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-deep-purple>tbody>tr>td:hover {
            background-color: #d1c4e9;
        }
    }
    
    .table-striped.table-mc-indigo>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-indigo>tbody>tr:nth-child(odd)>th {
        background-color: #e8eaf6;
    }
    
    .table-hover.table-mc-indigo>tbody>tr:hover>td,
    .table-hover.table-mc-indigo>tbody>tr:hover>th {
        background-color: #c5cae9;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-indigo>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-indigo>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-indigo>tbody>tr>td:nth-child(odd) {
            background-color: #e8eaf6;
        }
        .table-responsive-vertical .table-hover.table-mc-indigo>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-indigo>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-indigo>tbody>tr>td:hover {
            background-color: #c5cae9;
        }
    }
    
    .table-striped.table-mc-blue>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-blue>tbody>tr:nth-child(odd)>th {
        background-color: #e7e9fd;
    }
    
    .table-hover.table-mc-blue>tbody>tr:hover>td,
    .table-hover.table-mc-blue>tbody>tr:hover>th {
        background-color: #d0d9ff;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-blue>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-blue>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-blue>tbody>tr>td:nth-child(odd) {
            background-color: #e7e9fd;
        }
        .table-responsive-vertical .table-hover.table-mc-blue>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-blue>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-blue>tbody>tr>td:hover {
            background-color: #d0d9ff;
        }
    }
    
    .table-striped.table-mc-light-blue>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-light-blue>tbody>tr:nth-child(odd)>th {
        background-color: #e1f5fe;
    }
    
    .table-hover.table-mc-light-blue>tbody>tr:hover>td,
    .table-hover.table-mc-light-blue>tbody>tr:hover>th {
        background-color: #b3e5fc;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-light-blue>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-light-blue>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-light-blue>tbody>tr>td:nth-child(odd) {
            background-color: #e1f5fe;
        }
        .table-responsive-vertical .table-hover.table-mc-light-blue>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-light-blue>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-light-blue>tbody>tr>td:hover {
            background-color: #b3e5fc;
        }
    }
    
    .table-striped.table-mc-cyan>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-cyan>tbody>tr:nth-child(odd)>th {
        background-color: #e0f7fa;
    }
    
    .table-hover.table-mc-cyan>tbody>tr:hover>td,
    .table-hover.table-mc-cyan>tbody>tr:hover>th {
        background-color: #b2ebf2;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-cyan>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-cyan>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-cyan>tbody>tr>td:nth-child(odd) {
            background-color: #e0f7fa;
        }
        .table-responsive-vertical .table-hover.table-mc-cyan>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-cyan>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-cyan>tbody>tr>td:hover {
            background-color: #b2ebf2;
        }
    }
    
    .table-striped.table-mc-teal>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-teal>tbody>tr:nth-child(odd)>th {
        background-color: #e0f2f1;
    }
    
    .table-hover.table-mc-teal>tbody>tr:hover>td,
    .table-hover.table-mc-teal>tbody>tr:hover>th {
        background-color: #b2dfdb;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-teal>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-teal>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-teal>tbody>tr>td:nth-child(odd) {
            background-color: #e0f2f1;
        }
        .table-responsive-vertical .table-hover.table-mc-teal>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-teal>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-teal>tbody>tr>td:hover {
            background-color: #b2dfdb;
        }
    }
    
    .table-striped.table-mc-green>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-green>tbody>tr:nth-child(odd)>th {
        background-color: #d0f8ce;
    }
    
    .table-hover.table-mc-green>tbody>tr:hover>td,
    .table-hover.table-mc-green>tbody>tr:hover>th {
        background-color: #a3e9a4;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-green>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-green>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-green>tbody>tr>td:nth-child(odd) {
            background-color: #d0f8ce;
        }
        .table-responsive-vertical .table-hover.table-mc-green>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-green>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-green>tbody>tr>td:hover {
            background-color: #a3e9a4;
        }
    }
    
    .table-striped.table-mc-light-green>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-light-green>tbody>tr:nth-child(odd)>th {
        background-color: #f1f8e9;
    }
    
    .table-hover.table-mc-light-green>tbody>tr:hover>td,
    .table-hover.table-mc-light-green>tbody>tr:hover>th {
        background-color: #dcedc8;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-light-green>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-light-green>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-light-green>tbody>tr>td:nth-child(odd) {
            background-color: #f1f8e9;
        }
        .table-responsive-vertical .table-hover.table-mc-light-green>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-light-green>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-light-green>tbody>tr>td:hover {
            background-color: #dcedc8;
        }
    }
    
    .table-striped.table-mc-lime>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-lime>tbody>tr:nth-child(odd)>th {
        background-color: #f9fbe7;
    }
    
    .table-hover.table-mc-lime>tbody>tr:hover>td,
    .table-hover.table-mc-lime>tbody>tr:hover>th {
        background-color: #f0f4c3;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-lime>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-lime>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-lime>tbody>tr>td:nth-child(odd) {
            background-color: #f9fbe7;
        }
        .table-responsive-vertical .table-hover.table-mc-lime>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-lime>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-lime>tbody>tr>td:hover {
            background-color: #f0f4c3;
        }
    }
    
    .table-striped.table-mc-yellow>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-yellow>tbody>tr:nth-child(odd)>th {
        background-color: #fffde7;
    }
    
    .table-hover.table-mc-yellow>tbody>tr:hover>td,
    .table-hover.table-mc-yellow>tbody>tr:hover>th {
        background-color: #fff9c4;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-yellow>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-yellow>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-yellow>tbody>tr>td:nth-child(odd) {
            background-color: #fffde7;
        }
        .table-responsive-vertical .table-hover.table-mc-yellow>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-yellow>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-yellow>tbody>tr>td:hover {
            background-color: #fff9c4;
        }
    }
    
    .table-striped.table-mc-amber>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-amber>tbody>tr:nth-child(odd)>th {
        background-color: #fff8e1;
    }
    
    .table-hover.table-mc-amber>tbody>tr:hover>td,
    .table-hover.table-mc-amber>tbody>tr:hover>th {
        background-color: #ffecb3;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-amber>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-amber>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-amber>tbody>tr>td:nth-child(odd) {
            background-color: #fff8e1;
        }
        .table-responsive-vertical .table-hover.table-mc-amber>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-amber>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-amber>tbody>tr>td:hover {
            background-color: #ffecb3;
        }
    }
    
    .table-striped.table-mc-orange>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-orange>tbody>tr:nth-child(odd)>th {
        background-color: #fff3e0;
    }
    
    .table-hover.table-mc-orange>tbody>tr:hover>td,
    .table-hover.table-mc-orange>tbody>tr:hover>th {
        background-color: #ffe0b2;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-orange>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-orange>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-orange>tbody>tr>td:nth-child(odd) {
            background-color: #fff3e0;
        }
        .table-responsive-vertical .table-hover.table-mc-orange>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-orange>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-orange>tbody>tr>td:hover {
            background-color: #ffe0b2;
        }
    }
    
    .table-striped.table-mc-deep-orange>tbody>tr:nth-child(odd)>td,
    .table-striped.table-mc-deep-orange>tbody>tr:nth-child(odd)>th {
        background-color: #fbe9e7;
    }
    
    .table-hover.table-mc-deep-orange>tbody>tr:hover>td,
    .table-hover.table-mc-deep-orange>tbody>tr:hover>th {
        background-color: #ffccbc;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive-vertical .table-striped.table-mc-deep-orange>tbody>tr>td,
        .table-responsive-vertical .table-striped.table-mc-deep-orange>tbody>tr:nth-child(odd) {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-striped.table-mc-deep-orange>tbody>tr>td:nth-child(odd) {
            background-color: #fbe9e7;
        }
        .table-responsive-vertical .table-hover.table-mc-deep-orange>tbody>tr:hover>td,
        .table-responsive-vertical .table-hover.table-mc-deep-orange>tbody>tr:hover {
            background-color: @table-bg;
        }
        .table-responsive-vertical .table-hover.table-mc-deep-orange>tbody>tr>td:hover {
            background-color: #ffccbc;
        }
    }
    /*  Payment Method*/
    
    h2#paymtd {
        text-align: center;
    }
    
    .bn54-pay {
        position: relative;
        outline: none;
        text-decoration: none;
        border-radius: 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        text-transform: uppercase;
        height: 45px;
        width: 210px;
        opacity: 1;
        background-color: #32bada;
        border: 1px solid rgba(0, 0, 0, 0.6);
        margin: auto;
    }
    
    .bn54-pay .bn54span-pay {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: white;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.7px;
    }
    
    .bn54-pay:hover {
        animation: bn54rotate 0.7s ease-in-out both;
    }
    
    .bn54-pay:hover .bn54span-pay {
        animation: bn54storm 0.7s ease-in-out both;
        animation-delay: 0.06s;
    }
    
    @keyframes bn54-payrotate {
        0% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }
        25% {
            transform: rotate(3deg) translate3d(0, 0, 0);
        }
        50% {
            transform: rotate(-3deg) translate3d(0, 0, 0);
        }
        75% {
            transform: rotate(1deg) translate3d(0, 0, 0);
        }
        100% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }
    }
    
    @keyframes bn54-paystorm {
        0% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }
        25% {
            transform: translate3d(4px, 0, 0) translateZ(0);
        }
        50% {
            transform: translate3d(-3px, 0, 0) translateZ(0);
        }
        75% {
            transform: translate3d(2px, 0, 0) translateZ(0);
        }
        100% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }
    }
    /*  Btcpay */
    
    section#btcpaysec {
        border: 2px solid black;
        width: 50%;
        margin: auto;
        margin-top: 7em;
        margin-bottom: 7em;
        border-radius: 12px;
    }
    
    input#btcpayinput {
        background-color: black;
        color: white;
        margin: auto;
    }
    /*  payment method */
    
    div.modal-content {
        /* From https://css.glass */
        background: rgba(0, 0, 0, 0.22);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(16.2px);
        -webkit-backdrop-filter: blur(16.2px);
        border: 1px solid rgba(0, 0, 0, 1);
    }
    
    div.modal-body {
        display: flex;
        flex-direction: column;
    }
    
    input#wallet {
        width: 25em;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
        border-radius: 10px;
        background: black;
        color: white;
        font-size: smaller;
        font-weight: 600;
    }
    
    form#walletpayform {
        display: flex;
        flex-direction: column;
        margin: auto;
        position: relative;
        top: 2em;
    }
    
    img#walletadd {
        width: 10em;
        margin-left: auto;
        margin-right: auto;
    }
    
    input.inputamount {
        width: 25em;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
        border-radius: 10px;
        background: black;
        color: white;
        font-size: smaller;
        font-weight: 600;
    }
    
    input.btchash {
        width: 25em;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
        border-radius: 10px;
        background: black;
        color: white;
        font-size: smaller;
        font-weight: 600;
    }
    /* ----------------------------------------------
 * Generated by Animista on 2024-7-20 19:39:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
    /**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
    
    @-webkit-keyframes shake-horizontal {
        0%,
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        10%,
        30%,
        50%,
        70% {
            -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
        }
        20%,
        40%,
        60% {
            -webkit-transform: translateX(10px);
            transform: translateX(10px);
        }
        80% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }
        90% {
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
        }
    }
    
    @keyframes shake-horizontal {
        0%,
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        10%,
        30%,
        50%,
        70% {
            -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
        }
        20%,
        40%,
        60% {
            -webkit-transform: translateX(10px);
            transform: translateX(10px);
        }
        80% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }
        90% {
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
        }
    }
    
    .shake-horizontal {
        -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    }
    /*  registration */
    
    input#id_old_password,
    input#id_new_password1,
    input#id_new_password2,
    input#id_first_name,
    input#id_last_name,
    input#id_email,
    select#id_gender,
    input#id_birth_date,
    input#id_password1,
    input#id_password2,
    input#id_street_address,
    input#id_city,
    input#id_postal_code,
    input#id_country {
        width: 20em;
        height: 2.5em;
        border-radius: 50px;
        background: #000;
        color: white;
        text-align: center;
    }
    /*  Media queries 
============================= */
    
    @media (min-width: 768px) and (max-width: 979px) {
        a.detail {
            background: none;
            width: 100%;
        }
        footer .widget form input#appendedInputButton {
            display: block;
            width: 91%;
            -webkit-border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
        }
        footer .widget form .input-append .btn {
            display: block;
            width: 100%;
            padding-right: 0;
            padding-left: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin-top: 10px;
        }
        ul.related-folio li {
            width: 156px;
            margin: 0 20px 0 0;
        }
        .row-flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding-bottom: 5em;
            padding-left: 10em;
            padding-right: 10em;
        }
    }
    
    @media (max-width: 767px) {
        body {
            padding-right: 0;
            padding-left: 0;
        }
        .navbar-brand {
            margin-top: 10px;
            border-bottom: none;
        }
        .navbar-header {
            margin-top: 0;
            border-bottom: none;
        }
        .navbar-nav {
            border-top: none;
            float: none;
            width: 100%;
        }
        .navbar .nav>.active>a,
        .navbar .nav>.active>a:hover {
            background: none;
            font-weight: 700;
            color: #1B1B1B;
        }
        header .navbar-nav>li {
            padding-bottom: 0;
            padding-top: 0;
        }
        header .nav li .dropdown-menu {
            margin-top: 0;
        }
        .dropdown-menu {
            position: absolute;
            top: 0;
            left: 40px;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 13px;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #f5f5f5;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: 0;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        }
        .navbar-collapse.collapse {
            border: none;
            overflow: hidden;
        }
        .box {
            border-bottom: 1px solid #e9e9e9;
            padding-bottom: 20px;
        }
        #featured .flexslider .slide-caption {
            width: 90%;
            padding: 2%;
            position: absolute;
            left: 0;
            bottom: -40px;
        }
        #inner-headline .breadcrumb {
            float: left;
            clear: both;
            width: 100%;
        }
        .breadcrumb>li {
            font-size: 13px;
        }
        ul.portfolio li article a i.icon-48 {
            width: 20px;
            height: 20px;
            font-size: 16px;
            line-height: 20px;
        }
        .left-sidebar {
            border-right: none;
            padding: 0 0 0 0;
            border-bottom: 1px dotted #e6e6e6;
            padding-bottom: 10px;
            margin-bottom: 40px;
        }
        .right-sidebar {
            margin-top: 30px;
            border-left: none;
            padding: 0 0 0 0;
        }
        footer .col-lg-1,
        footer .col-lg-2,
        footer .col-lg-3,
        footer .col-lg-4,
        footer .col-lg-5,
        footer .col-lg-6,
        footer .col-lg-7,
        footer .col-lg-8,
        footer .col-lg-9,
        footer .col-lg-10,
        footer .col-lg-11,
        footer .col-lg-12 {
            margin-bottom: 20px;
        }
        #sub-footer ul.social-network {
            float: left;
        }
        [class*="span"] {
            margin-bottom: 0px;
        }
    }
    
    @media (max-width: 480px) {
        .bottom-article a.pull-right {
            float: left;
            margin-top: 20px;
        }
        .search {
            float: left;
        }
        .flexslider .flex-caption {
            display: none;
        }
        .cta-text {
            margin: 0 auto;
            text-align: center;
        }
        ul.portfolio li article a i {
            width: 20px;
            height: 20px;
            font-size: 14px;
        }
        .row-flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding-bottom: 5em;
            padding-left: 0em;
            padding-right: 0em;
        }
    }




    /* From Uiverse.io by gharsh11032000 */ 
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #32bada;
  box-shadow: 0 0 0 2px #32bada;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin: auto;
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #32bada;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #32bada;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #32bada;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}