@keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 100% 0; }
        }
        @-webkit-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 100% 0; }
        }
        @-ms-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 100% 0; }
        }
        @-moz-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 100% 0; }
        }

        .animate-area	{

            background-image: url(img/smoke.png);
            background-position: 50% 0px;
            background-repeat: repeat-x;

            animation: animatedBackground 40s linear infinite;
            -ms-animation: animatedBackground 40s linear infinite;
            -moz-animation: animatedBackground 40s linear infinite;
            -webkit-animation: animatedBackground 40s linear infinite;
        }

  /*      div .andro_header-logo svg {
            -webkit-transition: all 0.5s ease 0s;
            -moz-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            -ms-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
            cursor:pointer;
            transition-duration: 5s;
        }

        div .andro_header-logo svg:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            transition-duration: 5s;
        } */
		div .andro_header-logo img {
                width: 65px;
                left: 50%;
				margin-top: 15px;
            }
        @media only screen and (max-width: 912px) {
            div .andro_header-logo img {
                width: 65px;
                left: 50%;
				margin-top: 0px;
            }
        }

        .mo-fire {
            width: 150px;
            height: auto;
            position: absolute;
            left:50%;
            margin-left: -100px;
            top:1px;
        }
        .mo-fire img {
            width: 100%;
            height: auto;
            position: relative
        }
        .flame {
            animation-name: flamefly;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            opacity: 0;
            transform-origin: 50% 50% 0;
        }
        .flame.one {
            animation-delay: 1s;
            animation-duration: 3s;
        }
        .flame3.two{
            animation-duration: 5s;
            animation-delay: 1s;
        }

        .flame-main {
            animation-name: flameWobble;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .flame-main.one {
            animation-duration: 6s;
            animation-delay: 1s;
        }
        .flame-main.two {
            animation-duration: 2s;
            animation-delay: 2s;
        }
        .flame-main.three {
            animation-duration: 2.1s;
            animation-delay: 3s;
        }
        .flame-main.four {
            animation-duration: 3.2s;
            animation-delay: 4s;
        }
        .flame-main.five {
            animation-duration: 2.5s;
            animation-delay: 5s;
        }
        @keyframes flameWobble {
            50% {
                transform: scale(1,1.2) translate(0, -20px) rotate(-2deg);
            }
        }
        @keyframes flamefly {
            0% {
                transform: translate(0) rotate(180deg);
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translate(-20px, -100px) rotate(180deg);
                opacity: 0;
            }
        }




        @keyframes movement {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: 560px 0px;
            }
        }


        .overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 500ms;
            visibility: hidden;
            opacity: 0;
        }
        .overlay-open {
            visibility: visible !important;
            opacity: 1 !important;;
            z-index: 999;

        }

        .popup {
            margin: 100px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 60%;
            position: relative;
            transition: all 5s ease-in-out;
        }

        .popup h2 {
            margin-top: 0;
            color: #333;
            font-family: var(--family-display) !important;
        }
        .popup .close {
            position: absolute;
            top: 20px;
            right: 30px;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }
        .popup .close:hover {
            color: #06D85F;
        }
        .popup .content {
            max-height: 30%;
            overflow: auto;
            word-wrap: break-word;
        }

        @media screen and (max-width: 700px){
            .box{
                width: 90%;
            }
            .popup{
                width: 90%;
            }
        }








        figure {
            position: absolute;
            margin: auto;
            top: 100px; bottom: 0; left: 0; right: 0;
            width: 6.250em; height: 6.250em;
            animation: rotate 2.4s linear infinite;
            z-index: 9999;
        }
        .white {
            top: 0; bottom: 0; left: 0; right: 0;
            background: white;
            animation: flash 2.4s linear infinite;
            opacity: 0;
        }
        .dot {
            position: absolute;
            margin: auto;
            width: 2.4em; height: 2.4em;
            border-radius: 100%;
            transition: all 1s ease;
        }
        .dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
        .dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
        .dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
        .dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

        @keyframes rotate {
            0% { transform: rotate( 0 ); }
            10% { width: 6.250em; height: 6.250em; }
            66% { width: 2.4em; height: 2.4em; }
            100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
        }

        @keyframes dotsY {
            66% { opacity: .1; width: 2.4em; }
            77%{ opacity: 1; width: 0; }
        }
        @keyframes dotsX {
            66% { opacity: .1; height: 2.4em;}
            77%{ opacity: 1; height: 0; }
        }

        @keyframes flash {
            33% { opacity: 0; border-radius: 0%; }
            55%{ opacity: .6; border-radius: 100%; }
            66%{ opacity: 0; }
        }












        .floating-form {
            width:320px;
        }

        /****  floating-Lable style start ****/
        .floating-label {
            position:relative;
            margin-bottom:20px;
        }
        .floating-input , .floating-select {
            font-size:14px;
            padding:4px 4px;
            display:block;
            width:100%;
            height:30px;
            background-color: transparent;
            border:none;
            border: 1px solid rgba(33, 33, 33, 0.12);
            height: 42px;
        }
        .has-error .floating-input , .floating-select {
            border-bottom: 1px solid rgba(220, 0, 48, 0.5) !important;
        }
        .has-error label{
            color:red !important;
        }
        .floating-input:focus , .floating-select:focus {
            outline:none;
            border-bottom:2px solid #1f91f3;
        }

        .has-error .floating-input:focus , .floating-select:focus{
            outline:none;
            border-bottom:2px solid rgba(220, 0, 48, 0.5) !important;
        }

        .floating-label label {
            color:#999;
            font-size:14px;
            font-weight:normal;
            position:absolute;
            pointer-events:none;
            left:5px;
            top:10px;
            transition:0.2s ease all;
            -moz-transition:0.2s ease all;
            -webkit-transition:0.2s ease all;
        }

        .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
            top:-30px;
            font-size:14px;
            color:#1f91f3;
        }

        .floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
            top:-30px;
            font-size:14px;
            color:#1f91f3;
        }

        /* active state */
        .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
            width:50%;
        }

        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

        }

        .floating-textarea {
            min-height: 30px;
            max-height: 260px;
            overflow:hidden;
            overflow-x: hidden;
        }

        /* highlighter */
        .floating-label .highlight {
            position:absolute;
            height:50%;
            width:100%;
            top:30%;
            left:0;
            pointer-events:none;
            opacity:0.5;
        }

        /* active state */
        .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
            -webkit-animation:inputHighlighter 0.3s ease;
            -moz-animation:inputHighlighter 0.3s ease;
            animation:inputHighlighter 0.3s ease;
        }

        /* animation */
        @-webkit-keyframes inputHighlighter {
            from { background:#5264AE; }
            to 	{ width:0; background:transparent; }
        }
        @-moz-keyframes inputHighlighter {
            from { background:#5264AE; }
            to 	{ width:0; background:transparent; }
        }
        @keyframes inputHighlighter {
            from { background:#5264AE; }
            to 	{ width:0; background:transparent; }
        }



        .navbar-fixed-bottom, .navbar-fixed-top {
            position: fixed;
            right: auto !important;
            left: auto !important;
        }



		textarea{

			position: relative;
    display: block;
    height: 60px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding: 14px 30px;
    background-color: var(--color-bg-light) !important;
    border: 0;
    border-radius: 50px;
    transition: all .3s ease;

		|}


        /* Create a sticky/fixed navbar */
        #navbar {
            overflow: hidden;
            padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */
            transition: 0.4s; /* Adds a transition effect when the padding is decreased */
            position: fixed; /* Sticky/fixed navbar */
            width: 100%;
            top: 0; /* At the top */
            z-index: 99;
        }


        /* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
        @media screen and (max-width: 580px) {
            #navbar {
                padding: 30px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
            }
            #navbar a {

            }
            #navbar-right {
                float: none;
            }
        }
        .home-video {
            height: 90%;
            object-fit: cover;
            -o-object-fit: cover;
            object-position: center center;
            opacity: .42;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 300;
        }



        .scrolled.fade-in-bottom {
            -webkit-animation: fade-in-bottom 1s ease-in-out both;
            animation: fade-in-bottom 1s ease-in-out both;
        }
        .js-scroll.scrolled {
            opacity: 1;
        }
        .js-scroll {
            opacity: 0;
            transition: opacity .3s;
        }
        .music-scplayer {
            background-color: #FFFFFF;
            border-radius: 20px;
            padding: 20px 20px 8px;
        }

        .music-scplayer-button-row {
            align-items: center;
            display: flex;
            height: auto;
            justify-content: flex-start;
            max-width: 800px;
            width: 100%;
        }
        .music-scplayer-button-row span {
            align-items: center;
            display: flex;
            flex-direction: row;
            font-family: Courier New,Courier,monospace;
            font-size: 14px;
            font-weight: 600;
            justify-content: flex-start;
            line-height: 1;
            margin-right: 4px;
            margin-top: 2px;
            padding-left: 10px;
        }
        .music-arrow {
            height: 22px;
            margin-left: 10px;
            width: 22px;
        }
        .music-scplayer-button {
            fill: var(--color-text-1);
            border-radius: 50%;
            box-sizing: border-box;
            cursor: pointer;
            height: auto;
            margin: 10px;
            opacity: 1;
            transition: var(--transition-main);
            width: 28px;
        }



        .tabcontent {
            display: none;
            padding: 6px 12px;
        }

        .tab-icon{
            color: #0b0b0b;
        }
        .tab-icon:hover{
            color: #01a252;
        }
        .tab a {
            cursor: pointer;
        }
        .tab a i {
            font-size: 30px;
            margin-top: 10px;
        }


        .rowPic {
            display: flex;
            flex-wrap: wrap;
            padding: 0 4px;
        }

        /* Create four equal columns that sits next to each other */
        .column {
            flex: 25%;
            max-width: 25%;
            padding: 0 4px;
        }

        .column img {
            margin-top: 8px;
            vertical-align: middle;
            width: 100%;
        }

        /* Responsive layout - makes a two column-layout instead of four columns */
        @media screen and (max-width: 800px) {
            .column {
                flex: 50%;
                max-width: 50%;
            }
        }

        /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 600px) {
            .column {
                flex: 100%;
                max-width: 100%;
            }
        }






        #myVideo {

            min-width: 100%;
            min-height: 100%;
        }



        .andro_hero-item-inner p{
            margin-top: 35% !important;
        }
        @media only screen and (max-width: 912px) {
            .andro_hero-item-inner p{
                margin-top: 100% !important;
            }

        }




        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1001;
        }
        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #000;
            z-index: 1000;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        #loader-wrapper .loader-section.section-left {
            left: 0;
        }
        #loader-wrapper .loader-section.section-right {
            right: 0;
        }
        #load {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -350px;
            z-index: 99999;
        }
        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            margin: -250px 0 0 -350px;
            z-index: 99999;
        }
        #loader img {
  margin-left: 5%;
  margin-top:5%;
}

        @media only screen and (max-width: 912px) {
            #loader {
            left: unset;
            margin: unset;
        }
        #loader img {
  margin-left: 1%;
  margin-top:unset;
}
        }
        
        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;

        }
        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;

        }
        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }
        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }


        .loaded #loader-wrapper {
            visibility: hidden;
            transform: translateY(-100%);
        }
        .loaded #loader {
            opacity: 0;
        }

        .mb-20 {
            margin-bottom:20px;
        }

        #button {
            display: inline-block;
            background-color: #333;
            width: 35px;
            height: 35px;
            text-align: center;
            border-radius: 4px;
            position: fixed;
            bottom: 30px;
            right: 30px;
            transition: background-color .3s,
            opacity .5s, visibility .5s;
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
        }
        #button::after {
            content: "\f077";
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            font-size: 1em;
            line-height: 35px;
            color: #fff;
        }
        #button:hover {
            cursor: pointer;
            background-color: #c6c6c6;
        }
        #button:active {
            background-color: #555;
        }
        #button.show {
            opacity: 1;
            visibility: visible;
        }