@charset "utf-8";
/* CSS Document */

/*
	4. Homepage top blocks
*/
@keyframes zoomin {
  from {
    /*    	.opacity(0);*/
    transform: scale(0, 0) translateX(0px);
  }
  to {
    /*    	.opacity(1);*/
    transform: scale(1, 1) translateX(50%);
  }
}
@keyframes splash {
  0% {
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  1.5% {
    zoom: 1;
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  3% {
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  4.5% {
    zoom: 1;
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  6% {
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
}
#homepage-block-1 {
 
  background: transparent; padding:30px;
  background-repeat: no-repeat;
  background-position: 50% 90%;
  height:480px;
  /*height: 710px;*/
  position: relative;
}
#homepage-block-1:after {
  background: url(../../banner/taxi-car-sevice-provider-rajkot.jpg) center top no-repeat;);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  #homepage-block-1 .content {
    padding-top: 180px; padding-bottom:50px;
  }
}
@media (max-width: 991px) {
  #homepage-block-1 {
    height: auto;
  }
  #homepage-block-1 .content {
    /*padding: 100px 0 0 0;*/
    padding: 50px 0 0 0;
  }
}
#homepage-block-1 h4 {
  margin: 0;
  color: #F5F5F5;
}
#homepage-block-1 .phone {
  /*    font-family: 'Fjalla One', sans-serif;*/
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 50px;
  margin: 10px 0 20px 0;
  color: var(--theme-color-1);
  line-height: 1em;
}
#homepage-block-1 .phone a {color: var(--theme-color-1)}
#homepage-block-1 .phone a:hover {color: var(--theme-color-1)}
#homepage-block-1 #large-image {
  position: relative;
}
@media (max-width: 991px) {
  #homepage-block-1 #large-image {
    /*display: none;*/
  }
    #homepage-block-1 #large-image .car {
        width: 300px;
    }
    #homepage-block-1 #large-image .splash {
    top: 130px !important;
    right: 120px !important;
    width: 180px !important;
}
}
#homepage-block-1 #large-image .car {
  position: relative;
  transform: scale(0, 0) translateX(0px);
  margin-left: -100px;
  animation: zoomin 1s normal forwards linear;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  #homepage-block-1 #large-image .car {
    margin-left: -235px;
  }
}

#homepage-block-1 #large-image .splash {
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 100px;
  right: 50px;
  animation: splash 10s normal 1.5s forwards infinite linear;
}
@media (min-width: 1200px) {
  #homepage-block-1 #large-image .splash {
    /*right: 190px;*/
    right: 530px;
  }
}
#homepage-block-1 .get-icon {
  display: block;
  position: relative;
  text-align: center;
  z-index: -1; padding:20px;
}
#homepage-block-1 .get-icon .fa {
    display: none;
  color: #CCCCCC;
  font-size: 180px;
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  z-index: -1;
  zoom: 1;
  filter: alpha(opacity=5);
  -webkit-opacity: 0.05;
  -moz-opacity: 0.05;
  opacity: 0.05;
}
#homepage-block-1 .container {
  z-index: 2;
  position: relative;
}

}

#large-image2 {
  position: relative;
}
 #large-image2 .car2 {
  position: relative;
  transform: scale(0, 0) translateX(0px);
  margin-left: -180px;
  animation: zoomin 1s normal forwards linear;
  z-index: 1;
}

.large-image3 { display:block; margin:0px auto;
 
}
 #large-image3 .car3 {
  position: relative;
  transform: scale(0, 0) translateX(0px);
  margin-left: -50px;
  animation: zoomin 1s normal forwards linear;
  z-index: 100;
}



.large-image4 { display:block; margin:0px auto;
 
}
 #large-image4 .car4 {
  position: relative;
  transform: scale(0, 0) translateX(0px);

  animation: zoomin 1s normal forwards linear;
  z-index: 100;
}



.large-image5 { display:block; margin:0px auto;
 
}
 #large-image5 .car5 { width:65%; float:left;
  position: relative;
  transform: scale(0, 0) translateX(0px); left:0px;

  animation: zoomin 1s normal forwards linear;
  z-index: 100;
}