@font-face {
  font-family: 'DubaiLight';
  src: url('../fonts/webfonts-DubaiW23-Light.eot');
  src: url('../fonts/webfonts-DubaiW23-Light.eot?#iefix') format('embedded-opentype'),
  url('../fonts/webfonts-DubaiW23-Light.woff') format('woff'),
  url('../fonts/webfonts-DubaiW23-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'DubaiRegular';
  src: url('../fonts/webfonts-DubaiW23-Regular.eot');
  src: url('../fonts/webfonts-DubaiW23-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/webfonts-DubaiW23-Regular.woff') format('woff'),
  url('../fonts/webfonts-DubaiW23-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DubaiMedium';
  src: url('../fonts/webfonts-DubaiW23-Medium.eot');
  src: url('../fonts/webfonts-DubaiW23-Medium.eot?#iefix') format('embedded-opentype'),
  url('../fonts/webfonts-DubaiW23-Medium.woff') format('woff'),
  url('../fonts/webfonts-DubaiW23-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'DubaiBold';
  src: url('../fonts/webfonts-DubaiW23-Bold.eot');
  src: url('../fonts/webfonts-DubaiW23-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/webfonts-DubaiW23-Bold.woff') format('woff'),
  url('../fonts/webfonts-DubaiW23-Bold.ttf') format('truetype');
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: 'DubaiRegular' !important;
  padding: 0px;
  margin: 0px;
}

.container-fluid {
  width: 100%;
  min-height: 100%;
  border-spacing: 0px;
}

.row {
  margin: 0;
  min-height: 638px;
}

.main {
  margin: 0;
  max-height: 1100px;
  min-height: 100%;
  background-image: url(../images/images-bk-ground.png);
  background-size: 100%;
  /*  background-color:#eee808; /* ----- yellow background ----------*/
  background-color: rgb(101, 44, 144)/* ----- purple background ----------*/
}

.app h1,
.app h2 {
  padding-bottom: 10px;
  width: 100%;
  display: block;
  text-align: center;
  font-weight: 100;
  color: #fff;
}
.app h2 {
  font-size: 20px;
}


.loading {
  background-color: transparent;
  background-image: linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53), linear-gradient(#f1eb21, #eeea53);
  background-position: calc(50% - 30px) 50%, calc(50% - 20px) 50%, calc(50% - 10px) 50%, 50% 50%, calc(50% + 10px) 50%, calc(50% + 20px) 50%, calc(50% + 30px) 50%;
  background-size: 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px;
  background-repeat: no-repeat;
  animation: l-bars 1s linear infinite alternate;
}

@keyframes l-bars {
  0% {
    background-size: 5px 30px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px;
  }
  16.6% {
    background-size: 5px 10px, 5px 40px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px;
  }
  33.2% {
    background-size: 5px 10px, 5px 10px, 5px 40px, 5px 10px, 5px 10px, 5px 10px, 5px 10px;
  }
  49.8% {
    background-size: 5px 10px, 5px 10px, 5px 10px, 5px 40px, 5px 10px, 5px 10px, 5px 10px;
  }
  66.4% {
    background-size: 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 40px, 5px 10px, 5px 10px;
  }
  83% {
    background-size: 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 40px, 5px 10px;
  }
  100% {
    background-size: 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 10px, 5px 40px;
  }
}

.logo {
  text-align: center;
}

.app {
  min-height: 666px;
  max-height: 1100px;
  margin: 0;
  position: relative;
  background-image: url('../images/images-bg.jpg');
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.7);
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.app .content {
  z-index: 10000;
  position: absolute;
  width: 100%
}

.backgroundimg {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  /*background-position:-516px;*/
}


#back1 {
  background: url('../images/images-1.png') no-repeat;
  animation: bg1 ease 10s infinite ;
  width: 150%;
}
@keyframes bg1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#back2 {
  background: url('../images/images-2.png') no-repeat;
  animation: bg2 ease 10s infinite ;
  width: 150%;
}
@keyframes bg2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#back3 {
  background: url('../images/images-3.png') no-repeat;
  animation: bg3 ease 10s infinite ;
  width: 150%;
}
@keyframes bg3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#back4 {
  background: url('../images/images-4.png') no-repeat;
  animation: bg4 ease 10s infinite ;
  width: 150%;
}
@keyframes bg4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* #backgroundchange div {
  animation-name: backgroundchangeFadeInOut;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-duration: 20s;
  width: 150%;
  -webkit-animation-name: backgroundchangeFadeInOut;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 20s;
} */

/* 
#backgroundchange div#back2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#backgroundchange div#back3 {
  animation-delay: 1s;
  -webkit-animation-delay: 4s;
}

#backgroundchange div#back4 {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
} */




.col-md-12,
.container-fluid,
.row {
  min-height: 100vh !important;
  overflow: hidden !important;
  max-height: 1000vh;
}

.app label {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 38px;
  font-weight: bold;
  color: #FFF;
  padding-top: 40%;
}

.appstore {
  background-image: url('../images/images-app-store.png');
  text-decoration: none;
  width: 217px;
  height: 98px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-position: center;
}

.playstore {
  background-image: url('../images/images-google-play.png');
  text-decoration: none;
  width: 217px;
  height: 98px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-position: center;
}

.footer {
  background-color: transparent;
  width: 100%;
  text-align: center;
}

.footer div {
  padding-top: 14.5%;
}

.footer label {
  color: #f1eb21;
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  letter-spacing: 2px;
  margin-top: -16px;
  display: inline-block;
}

.footer a {
  display: inline-block;
  width: 42px;
  height: 44px;
  opacity: 0.7;
  cursor: pointer;
}

.footer a:hover {
  opacity: 1;
}

.sc ,.twit ,.inst {
 margin: 10px;
}

@media only screen and (min-width: 320px) {
  .col-md-12,
  .container-fluid,
  .row {
    min-height: 100vh !important;
    overflow: hidden !important;
    max-height: 1000vh;
    padding: 0px !important;
  }
  .logo {
    margin-top: 30px;
    padding-top: 10%;
    padding-bottom: 13%;
  }
  .logo img {
    width: 80%;
  }
  .main label {
    font-size: 40px;
  }
  .appstore,
  .playstore {
    display: block;
    zoom: 100%;
    background-size: 72%;
    height: 55px;
  }
  .loading {
    height: 100px;
  }
  .footer {
    height: auto;
  }
  .footer div {
    padding-top: 6.5%;
  }
  .footer label {
    font-size: 30px;
  }
  .footer a {
    zoom: 100%;

  }
  .app {
    background-position: -300px;
    background-size: cover;
  }
  .app .content {
    width: 100%;
  }
 
  .app label {
    padding-top: 22%;
  }
  .apps-btn {
    margin: 5% 0% 0% 23%;
  }
  #backgroundchange div {
    background-position: -300px;
    background-size: cover;
  }
  .app-btn-div {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    margin-left: 21%;
  }
  .social-btn {
    margin-left: 3%;
    padding-top: 0px !important;
  }
}

@media only screen and (min-width:720px) {
  .col-md-12,
  .container-fluid,
  .row {
    min-height: 100vh;
    min-width: 100vh;
    overflow: hidden !important;
    max-height: 1000vh;
  }
  .footer div {
    padding-top: 5.5%;
    margin-bottom: 15px;
  }
  .app label {
    padding-top: 7%;
  }
  .app {
    background-position: -500px;
    background-size: 170%;
  }
  .loading {
    height: 93px;
  }
  .app-btn-div {
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  .appstore,
  .playstore {
    display: inline-block;
    zoom: 100%;
    background-size: 91%;
    margin-left: 0%;
    height: 55px;
  }
  .logo {
    padding-top: 30px;
    padding-bottom: 4%;
  }
  .app h1 {
    font-size: 30px;
  }
  .social-btn {
    margin-left: 5px;
    padding-top: 0px !important;
  }
  .footer a {
    margin-right: 0%;
  }
}

@media only screen and (min-width: 1200px) {
  .col-md-12,
  .container-fluid,
  .row {
    min-height: 100vh !important;
    overflow: hidden !important;
    max-height: 1000vh;
  }
  .logo {
    margin-top: 30px;
    padding-top: 7%;
    padding-bottom: 5%;
  }
  .logo img {
    width: 30%;
  }
  .main label {
    font-size: 40px;
  }
  .appstore,
  .playstore {
    display: inline-block;
    zoom: 100%;
    background-size: 95%;
    height: 72px;
  }
  .loading {
    height: 84px;
  }
  .footer {
    height: 50px;
  }
  .footer label {
    font-size: 18px;
  }
  .footer a {
    zoom: 88%;
    margin-right: 0%;
  }
  .app .content {
    width: 100%;
  }
  .app {
    background-position: left center;
    background-size: 100%;
  }
  .app label {
    padding-top: 40%;
  }
  .apps-btn {
    margin: 0%;
  }
  #backgroundchange div {
    background-position: -391px;
    background-size: 88%;
  }
  .app-btn-div {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .social-btn {
    margin-left: 5px;
    padding-top: 0px !important;
  }
}