@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	 overflow-x: hidden;
}


.class1{
	padding: 70px 60px;
}
.class1 h6{
	word-spacing: 2px;
	letter-spacing: 5px;
	font-weight: 700;
	font-size: 20px;
}
.class1 h1{
	color: #8b0b0b;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
}
.class1 hr{  
    border-top: 5px dashed;
}
.class1 p {
    font-family: rubik;
    word-spacing: 3px;
    font-size: 15px;
}
.class1 button{
	background: red;
	padding:10px 50px;
	border-radius: 25px;
}
.class1 button:hover{
	background: #ffdd20;
	padding:10px 50px;
	border-radius: 25px;
}
.class1 button a{
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}
.class1 button a:hover{
	color: #000;
	font-size: 20px;
}
.class2{
	padding: 50px 0;
}
.class3{
	padding: 10px 0 5px 0;
	background: #de2a1b;
	margin-top: -10px;
	z-index: 100;
}
.class3 h1{
	color: #fff;
	font-weight: 700;
	font-size: 30px;
	z-index: 100!important;
}
.class3 h1 span{
	color: #f6ca1f;
}

.class5{
    border: 3px solid;
    height: 200px;
    margin-top: -25px;
   z-index: 0;
   background: transparent;
   z-index: -1;

}
.class6{
	   padding: 0 80px 80px 80px;
}
.class7{
	position: relative;
	margin-top: -50px;
	margin-left: -50px;
	float: left;
	
}
.class4 img{
	animation: mymovelimbu 12s infinite;
position: relative;
}
@keyframes mymovelimbu {
  0% {left: 0;}
  25% {left:80%;}
  50% {left: 0%;}
  75% {left:80%;}
  100% {left:  0;}
}
.class7 img{
	animation: mymove 8s infinite;
position: relative;}
@keyframes mymove {
  0% {width: 100px}
  25% {width: 150px}
  50% {width: 100px}
  75% {width: 150px}
  100% {width: 100px}
}
.class8 img{
	animation: mymove 8s infinite;
	 animation-delay: 2s;
position: relative;}
@keyframes mymove {
  0% {width: 100px}
  25% {width: 150px}
  50% {width: 100px}
  75% {width: 150px}
  100% {width: 100px}
}
.class8{
	margin-top:-70px;
	margin-right: -50px;
	float: right;
}
.class9{
	margin-top: -200px;
}
.class10{
	height: 500px;
}
.class10 h5{
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	padding: 0;
}
.class11{
	height:178px;text-align: center;
	margin:0 auto;
	width:178px;
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid #de2b1c;
}
.class11 img{
	transition:all 1.5s ease;
}
.class11:hover{
	border: 5px solid #62a72b;

}
.class11 img:hover{
	transform:scale(1.5);
	height: 300;
}
.class13{
	padding: 100px 0;
}
.class14{
	padding: 50px;
}
.class14 h1{
	font-size: 30px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;	
}
.class14 h1 span{
	color: #ad2b09;
	font-weight: 700;	
}
.class15{
	padding: 40px;
}
.class15 button{
	background: red;
	padding: 20px 20px;
}

.class15 button img{
	padding: 10px;
}

.class15 button a{
	color: #000 !important;
	font-weight: 700;
	font-size: 25px;
}

.class16 {
	background: #ffdd20;
	height: auto;
}
.class17 h1 {
    font-size: 22px;
    padding: 20px;
    font-weight: 600;
    text-align: center;
    font-family: rubik;
}
.class17 h1 span{
	color: #ad2b09;
}



.class18 {
	padding: 50px 20px ;
}
.class19 p {
    margin-left: 75px;
    /* margin-top: 0; */
    padding-top: 5px;color: #bb181e;
}
.class19 h5 {
    margin-left: 75px;
    margin-top: -11px;
    font-size: 23px;
    font-weight: 600;
}
.class20 i {
    width: 60px;
    height: 60px;
    padding: 12px 10px 9px 14px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    font-size: 40px;
    background: #bb181e;
}






.class21 {
	padding: 50px 20px ;
}
.class22 p {
    margin-left: 75px;
    /* margin-top: 0; */
    padding-top: 5px;color: #bb181e;
}
.class22 h5 {
    margin-left: 75px;
    margin-top: -11px;
    font-size: 23px;
    font-weight: 600;
}
.class23 i {
    width: 60px;
    height: 60px;
    padding: 10px 8px 9px 11px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    font-size: 40px;
    background: #bb181e;
}





.class24 {
	padding: 50px 20px ;
}
.class25 p {
    margin-left: 75px;
    /* margin-top: 0; */
    padding-top: 5px;
    color: #bb181e;
}
.class25 h5 {
    margin-left: 75px;
    margin-top: -11px;
    font-size: 23px;
    font-weight: 600;
}
.class26 i {
    width: 60px;
    height: 60px;
    padding: 10px 8px 9px 13px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    font-size: 40px;
    background: #bb181e;
}


.class27{
	background: #ad2b09;
	height: 60px;
	text-align: center;
	padding: 15px;
	font-size: 18px;
}
.class27 p{
	color: #fff;
	font-weight: 600;
}
.class27 p span{
	color: #ffdd20;
}

.class27
p
a{
	color: #ffdd20;
}


/**************product css start***********/


.class31{
	padding: 100px 0 0 0;
}
.class31 p {
    word-spacing: 2px;
    letter-spacing: 5px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}
.class31 h1{
	font-size: 55px;
	font-weight: 700;
	color: #f35e05;
	margin-top: -30px;
}
.class31 hr{
	border-top: 5px dashed #fff;
	width: 40%;
	margin-top: -10px
}

/*********1*apple**/
.class41{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class41 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class42{
	background: #fdb230;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 20px;
	margin-left: 20%;
margin-top: 85%;

}
.class42 h6{
	font-weight: 700;
}
.class43{
	border:2px solid  #fdb230;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class43 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class44{
	margin: 5% auto;
}





/********2 cloudy lemon********/

.class45{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class45 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class46{
	background: #f1e526;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class46 h6{
	font-weight: 700;

}
.class47{
	border:2px solid  #f1e526;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class47 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class48{
	margin: 5% auto;
}


/********** 3 cola*************/


.class49{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class49 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class50{
	background: #ebc2b2;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 85%;

}
.class50 h6{
	font-weight: 700;

}
.class51{
	border:2px solid  #ebc2b2;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class51 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class52{
	margin: 5% auto;
}


/***********4*****pink gauva*****************/


.class53{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class53 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class54{
	background: #ead44c;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class54 h6{
	font-weight: 700;
}
.class55{
	border:2px solid  #ead44c;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class55 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class56{
	margin: 5% auto;
}




/***********5****jeera*****************/


.class57{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class57 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class58{
	background: #1e0201;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class59{
	border:2px solid  #1e0201;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class59 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class60{
	margin: 5% auto;
}



/***********6 lemon*****************/


.class61{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class61 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class62{
	background: #64e960;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class62 h6{
	font-weight: 700;e6cd2e
}
.class63{
	border:2px solid  #64e960;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class63 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class64{
	margin: 5% auto;
}



/***********7 mango*****************/


.class65{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class65 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class66{
	background: #e6cd2e;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class66e6cd2e h6{
	font-weight: 700;e6cd2e
}
.class67{
	border:2px solid  #e6cd2e;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class67 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class68{
	margin: 5% auto;
}




/***********8 pineapple*****************/


.class69{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class69 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class70{
	background: #e6cd2e;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class70 h6{
	font-weight: 700;
}
.class71{
	border:2px solid  #e6cd2e;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class71 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class72{
	margin: 5% auto;
}




/***********9 orange****************/


.class73{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class73 p{
        font-size: 15px;
    line-height: 24px;
    color: #000;
}
.class74{
	background: #ec7006;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class74 h6{font-weight: 700;d7deee}
.class75{
	border:2px solid  #ec7006;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class75 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #000000;
	font-size: 20px;
	font-weight: 600;
}

.class76{
	margin: 5% auto;
}




/***********10 club soda*****************/


.class77{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class77 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class78{
	background: #d7deee;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;

}
.class79{
	border:2px solid  #d7deee;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class79 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.class80{
	margin: 5% auto;
}




/***********11 drinking water*****************/


.class81{
	background: transparent;
	opacity: 1;
	text-align: center;
	padding: 20px;
	font-weight: 600;
}
.class81 p{
        font-size: 15px;
    line-height: 24px;
    color: #fff;
}
.class82{
	background: #d7deee;
	width: 250px;
	text-align: center;
	padding: 10px;
	color: #000;
	font-size: 20px;
	margin-left: 20%;
margin-top: 105%;
}.class82 h6{
	font-weight: 700;
}
.class83{
	border:2px solid  #d7deee;
	margin-top: -20px;
	width: 300px;
	margin: -25px auto;
}
.class83 p{
	padding: 30px 10px 10px 10px;
	text-align: center;
	color: #d7deee;
	font-size: 20px;
	font-weight: 600;
}

.class84{
	margin: 5% auto;
}





.brandanimation1{
	text-align: center;
}
.brandanimation1 img{
	animation:khushal;
}

 
 #pingpong1{
	width: 100%;
	height: 300px;
}

#pingpong1 img{
	position: relative;
	left: 0;
	bottom: 10px;
	transition: all linear 1s;	
	animation: ball 1.5s linear infinite alternate;
}


@-webkit-keyframes ball{
	0% {bottom: 4px;}
	100% {bottom: -10px;}	
}

@keyframes ball{
	0% {bottom: 4px;}
	100% {bottom: -10px;}	
}
 


/***********btn hover*******/

/* Rectangle In */
.hvr-rectangle-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #fff220;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-rectangle-in:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff220;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active {
  color: white !important;
}
.hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}




.class201{
	padding: 50px;
}
.class202{
	border: 5px solid #f3f3f3;
	border-radius: 5px;
	overflow: hidden;
}
.class202:hover{
	border: 5px solid #606060;
	border-radius: 5px;
}

.class202 img{
	transition:all 1.5s ease;
}

.class202 img:hover{
	transform:scale(1.1);
	height: 300;
}
.class201 h1{
	font-weight:  700;
	color: #de2a1b;
}
.class201 p {
    font-weight: 400;
    color: #606060;
    line-height: 25px;
    /* text-decoration: dashed; */
    text-transform: capitalize;
}

.class204 h1{
	font-size: 70px;
	padding-top: 90px;
	color: #000;
	    font-family: 'Bebas Neue';
}
.class204 p{
	font-size: 20px;
	color: #000;
	margin-top: -20px;
	font-family: 'Raleway', sans-serif;
}
.class204 {
	color: #f3f3f3;
}
.class204{
    height: 300px;
    background: #f3f3f3;
  }
.class205{
	border-right: 1px solid;
	height: 300px;
}

.class301{
	padding: 150px 0 0 0;
}
.class301 p {
    word-spacing: 2px;
    letter-spacing: 5px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}
.class301 h1{
	font-size: 55px;
	font-weight: 700;
	color: #f35e05;
	margin-top: -30px;
}
.class301 hr{
	border-top: 5px dashed #fff;
	width: 40%;
	margin-top: -10px;
	    margin: 0 auto;
}


/********contact********/

.class400{
	background-color: #f3f3f3;
}
.class401{
	padding: 50px 0 50px 50px;
}
.class402{
	background: #fff220;text-align: center;
	height: 80px;
	width: 80px;
	margin: 0 auto;
	border-radius: 50px;
	border: 2px solid #606060;
	padding: 12px;
	margin-top: 50px;
}
.class402:hover{
	background-color: red;
	border: 2px solid #000000;
}
.class402 img{
	width: 50px;transition:all 1.5s ease;

}



.class402 img:hover{
	transform:scale(1.2);
	
}

.class403
h4
a{
	color: #606060;
}



.class403 h4{
	font-size: 18px;
	margin-top: 5px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: #606060;
}

.class404{
	background: #fff220;text-align: center;
	height: 80px;
	width: 80px;
	margin: 0 auto;
	border-radius: 50px;
	border: 2px solid #606060;
	padding: 12px;
	margin-top: 50px;
}
.class404 img{
	width: 50px;

}
.class404:hover{
	background-color: red;
	border: 2px solid #000000;
}
.class404 img{
	width: 50px;transition:all 1.5s ease;

}



.class404 img:hover{
	transform:scale(1.2);
	
}
.class405 h4{
	padding:0 100px ;
	font-size: 18px;
	margin-top: 5px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: #606060;
}
.class501{
	margin-top: 50px;
	margin-bottom: 50px;
}
.class502{
	margin-top: 50px;
}
.class502 p{
	color: #606060;
		font-family: 'Raleway', sans-serif;
}



/**********social icon****************/
/* fixed social*/
#fixed-social {
   position: fixed;
   top: 50%;z-index: 1000000;
}

#fixed-social a {
   color: #fff;
   display: block;
   height: 40px;
   position: relative;
   text-align: center;
    line-height: 40px;
   width: 40px;
   margin-bottom: 1px;
   z-index: 200000!important;
}
#fixed-social a:hover>span{
	visibility: visible;
  left: 41px;
  opacity: 1;
} 
#fixed-social a span {
	line-height: 40px;
    left: 60px;
    position: absolute;
    text-align: center;
    width: 120px;
    visibility: hidden;
    transition-duration: 0.5s;
    z-index: 10000;
    opacity: 0;
}
 .fixed-facebook{
 	background-color: #4267B2;
 }
 .fixed-facebook span{
	background-color: #4267B2;
 }
 .fixed-twitter{
	background-color: #1DA1F2;

 }
 .fixed-twitter span{
 	background-color: #1DA1F2;
 }
 
 .fixed-youtube{
	background-color: red;

 }

 .fixed-youtube span{
 	background-color: red;
 }
 .fixed-whatsapp {
	background-color: green;

 }
 .fixed-whatsapp span{
 	background-color: green;
 }
 
 .fixed-instagrem{
	background-color: #8a3ab9;

 }
 .fixed-instagrem span{
 	background-color: #8a3ab9;
 }
/*end fixed social*/






/**********distributor***********/


.distributorimg{
  margin-left: 50px;
  margin-top: 100px;
}



.class101 select{
  margin-top:20px;
  width: 100%;
  padding: 10px;
}


.class102 select{
  margin-top:20px;
  width: 100%;
  padding: 10px;
}



.class103 select{
  margin-top:20px;
  width:100%;
  padding: 10px;
}



.class104 input{
  width:100%;
}


.btn-mod1.btn-border1:hover, .btn-mod1.btn-border1:active, .btn-mod1.btn-border1:focus, .btn-mod1.btn-border1:active:focus {
    color: #000000;
    border-color: #000000!important;
    background: #fff600;
    outline: none; padding: 10px;
}


.btn-mod1.btn-border1 {
    color: #fff;
    border: 2px solid #000000;
    background: #051549; padding: 10px;
}

.btn-mod1, a.btn-mod1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #fff;
    background: rgba(34,34,34, .9);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}



.btn-mod2.btn-border2:hover, .btn-mod2.btn-border2:active, .btn-mod2.btn-border2:focus, .btn-mod2.btn-border2:active:focus {
    color: #fff;
    border-color: #000000!important;
    background: #051549;
    outline: none;
    padding: 10px;
}


.btn-mod2.btn-border2 {
    color: #000000;
    border: 2px solid #000000;
    background:#fff600; padding: 10px;
}

.btn-mod2, a.btn-mod2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #000000;
    background: rgba(34,34,34, .9);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}






.distributorbtn{
  width: 50px;
  height: 200px;
  background: red;
  z-index: 1000000;
   position: fixed;
  bottom: -4px;
  right: 0px;
  top: 40%;
}




.dbtn{
  width: 50px;
  height: 50px;
  background: #E84310;
  z-index: 1000000;
   position: fixed;
  bottom: -4px;
  right: 0px;
  top: 80%;
}
.dbtn i{
font-size: 35px;
padding-top: 5px;
color: #f3f3f3
}