
@font-face {
    font-family: 'rubikglitch';
    src:          url('../fonts/RubikGlitch-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style:italic;
}

@font-face {
    font-family: 'fredoka';
    src:          url('../fonts/Fredoka.ttf') format('truetype');
    font-weight: 100;
    font-style:normal;
}

.font-rubikglitch{font-family: 'rubikglitch' , Fallback, sans-serif;}
.font-fredoka{font-family: 'fredoka' , Fallback, sans-serif;}


.background-logos{ background-image: url(../images/bg-hp.jpg);
    background-repeat: no-repeat;
    position:absolute;
    background-position: bottom;}

    .background-video{ background-image: url(../images/bg-video.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        
        background-position: center;}

.background{ background-image: url(../images/bg-black.jpg);background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}

.black-bg{background-color: rgba(0, 0, 0, 0.3); }

.desktop-padding{
    max-width: 55%;

}

.center-object{
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.center-object{  display: block;
    margin-left: auto;
    margin-right: auto;
}


.video-border{border:8px solid #f2771a;}

.blue-bg{   
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.125),
        rgba(255, 255, 255, 0)
    );
}

#hero {
    
	position: relative;
}

.mobileonly {
	display: none;
}

.desktoponly {
	display: block;
}

.blue-text{color: #60beff;}
.center{align-items: center;}

.green-text{color: #00eac5;}

.orange-text{color: #f2771a}
.orange-bg{background-color: #f2771a;}

.brown-bg{background-color: #5e442c;}

.circle{
    width: 100%;
    height: 300px;
    /* border-radius: 50%; */
    /* -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    -webkit-transform: rotate(0.000001deg);  */
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%;

     position: relative;
   }
   
   .video-circle {
    border-radius: 24px;
    border-style: solid;
    border-width: 0.1em;
    border-color: #f2771a;


   /* border-radius: 50%; */
   object-fit: cover;
   }



   .video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.rotate-left{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
.rotate-right{-webkit-transform:rotate(2deg);transform:rotate(2deg)}

.video-description{text-align:center;width:280px;background-color:#f2771a;color:#fff;bottom:-100px;left:0;right:0;margin:0 auto;font-size:36px;font-weight:500;}

.vehicle-description{text-align:center;width:280px;background-color:#f2771a;color:#fff;bottom:-100px;left:0;right:0;margin:0 auto;font-size:22px;font-weight:500;}




.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:999;
}

.my-float{
	margin-top:16px;

}

.feedback {
    background-color : #31B0D5;
      font-size: 25px;
    color: white;
    padding: 12px 18px;
    border-radius: 50px;
    border-color: #46b8da;
    
  }
  
  
  
  #mybutton {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index:999;
  }




  @media(max-width: 890px){
    .features{text-align: center;}
    .video-description{bottom:-40px; font-size:24px;width:120px;}
    .vehicle-description{bottom:-40px; font-size:16px;width:120px;}

    .desktoponly {
		display: none;
	}
    
    .mobileonly {
        display: block;
    }	

    .desktop-padding{
        max-width: 100%;
    }

    .logo{
        max-width: 80px;
    }
    }




  .stripBottomWhite,.stripBottomBlack,.stripBottomGray{position:relative}.stripBottomWhite::after,.stripBottomBlack::after,.stripBottomGray::after{content:"";position:absolute;bottom:0;left:0;right:0;width:100%;height:3.91vw;background-size:cover;background-position:bottom center;background-repeat:no-repeat;z-index:1}@media (max-width: 767px) and (orientation: portrait) {.stripBottomWhite::after,.stripBottomBlack::after,.stripBottomGray::after{height:10.01vw}}.stripBottomWhite::after{background-image:url("../images/bottom/white.png")}@media (max-width: 767px) and (orientation: portrait) {.stripBottomWhite::after{background-image:url("../images/bottom/white-mob.png")}}
  .stripTopWhite,.stripTopBlack,.stripTopGray{position:relative}.stripTopWhite::before,.stripTopBlack::before,.stripTopGray::before{content:"";position:absolute;top:0;left:0;right:0;width:100%;height:3.91vw;background-size:cover;background-position:top center;background-repeat:no-repeat;z-index:1}@media (max-width: 767px) and (orientation: portrait) {.stripTopWhite::before,.stripTopBlack::before,.stripTopGray::before{height:10.01vw}}.stripTopWhite::before{background-image:url("../images/bottom/strip_top_white.png")}@media (max-width: 767px) and (orientation: portrait) {.stripTopWhite::before{background-image:url("../images/bottom/strip_top_white_mob.png")}}.stripTopBlack::before{background-image:url("../images/bottom/strip_top_black.png")}@media (max-width: 767px) and (orientation: portrait) {.stripTopBlack::before{background-image:url("../images/bottom/strip_top_black_mob.png")}}.stripTopGray::before{background-image:url("../img/strips/strip_top_gray.png")}@media (max-width: 767px) and (orientation: portrait) {.stripTopGray::before{background-image:url("../images/bottom/strip_top_gray_mob.png")}}