title {
  font-weight: bold;
  font-size: 2rem;
}

/*#dialpadpic
{
  max-height: 250px;
  max-width: 300px;
background-repeat:no-repeat;
float: left;
background-position: left;
}*/

#callicon {
max-height: 50%;
  max-width: 30%;
  display: block;
}

#heading{
  display: none;
}

.hidden {
  display: none;
}


@media screen and (max-width: 480px){
#callicon{width:400px;}}




/*
@keyframes
headcolor {0%{
background: #B419B0;
  margin: 0;
  padding: 0;
  animation: headcolor infinite 22s;

background-position: top left;
background-repeat: no-repeat;}
 20% {
background: #C62863;
   margin: 0;
   padding: 0;
   animation: headcolor infinite 22s;

 background-position: top left;
 background-repeat: no-repeat;}
 40% {
background: #C85F64;
   margin: 0;
   padding: 0;
   animation: headcolor infinite 22s;

 background-position: top left;
 background-repeat: no-repeat;}
 60%{
background: #da7663;
   margin: 0;
   padding: 0;
   animation: headcolor infinite 22s;

 background-position: top left;
 background-repeat: no-repeat;}
 80%{
background: #ea96a5;
   margin: 0;
   padding: 0;
   animation: headcolor infinite 22s;

 background-position: top left;
 background-repeat: no-repeat;}
 100%{
background: #EEA3F8;
   margin: 0;
   padding: 0;
   animation: headcolor infinite 22s;}}
*/




h1 {
font-family: impact;
color: #FFFFFF;
font-size: 40px;
margin: 0px auto;
line-height: 79%;
z-index: -999;
text-shadow:
black 1px -1px 1px,
black -1px -1px 1px,
black -1px 1px 1px,
black 1px 1px 1px;

}
/*FA0CF7*/

/*
@keyframes
headshadow {0%{
  text-shadow:
  #f2cbbc 5px -5px 5px,
  #f2cbbc -5px -5px 5px,
  black -5px -5px 5px,
  black -5px 5px 5px;
  animation: headshadow infinite 22s;
}
 20% {
   text-shadow:
   #face8b 5px -5px 5px,
    #face8b -5px -5px 5px,
   black -5px -5px 5px,
    black -5px 5px 5px;
   animation: headshadow infinite 22s;
}
 40% {
   text-shadow: #D79770 5px -5px 5px,
   black -5px -5px 5px;
   animation: headshadow infinite 22s;}
 60%{
   text-shadow: #FEC9A1 5px -5px 5px,
   black -5px -5px 5px;
   animation: headshadow infinite 22s;}
 80%{rgb to sueusorcashiersix
   text-shadow: #E7BC9A 1px -2px 5px,
   black -1px -2px 5px;
   animation: headshadow infinite 22s;}
 100%{
   text-shadow: #f2cbbc 1px -2px 5px,
   black -1px -2px 5px;
   animation: headshadow infinite 22s;}}

*/




/*background of dialpad*/

@keyframes
dialpadbackground {0%{
  background: #ffffff;
  animation: dialpadbackground infinite 22s;
}
 20% {
   background: #f5fefd ;
   animation: dialpadbackground infinite 22s;
}
 40% {
  background: #fbfefe ;
   animation: dialpadbackground infinite 22s;}
 60%{
   background: #fefbfe ;
   animation: dialpadbackground infinite 22s;}
 80%{
  background: #fefefb ;
   animation: dialpadbackground infinite 22s;}
 100%{
  background: #ffffff;
   animation: dialpadbackground infinite 22s;}}

   /*DA7663
   #C85F64*/











#heading
{
  z-index: -999;
}


.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}



.table {
  display: block;
  justify-content: center;
  align-items: center;
  margin: 0px auto;

animation: dialpadbackground infinite 22s;
    position: static;
height: 100px;
  width: 400px;}

/*@media screen and (max-width: 480px){
.table{height:150px;width:600px;}}*/



.div
{
position: absolute;
  animation: dialpadbackground infinite 22s;

}

  .row {

  grid-template-columns: 1fr 1fr 1fr;
animation: dialpadbackground infinite 22s;
  margin: 0 auto;


  }

  /*.row::after {
    display: block;
    content:"";
    clear: both;
  }*/
  /*.row .col-3 {
  width: 30.00%
  float: left;

  }*/
  .col-3:active{
    animation: dialpadbackground infinite 22s;
  }


button{
animation: dialpadbackground infinite 22s;
border: none;
padding: 0px;
margin: 0;
width: 32.2%;
height: 23%;
display: table-cell;
    vertical-align:text-top;
}

.text-transparent{

  	color: transparent;
}



sub {
  font-weight: normal;
  margin: 0 auto;
  font-size: 1rem;

  line-height: 0.7;
}

p
{
font-weight: bold;

  font-size: 2rem;
  line-height: -6px;
  vertical-align:text-top;
}
/*display: inline block;
float: inherit;
position: relative;
margin-right: auto;
text-align: center;
}*/

/*background colors
@keyframes
bgcolor {0%{background: ;}
 20% {background: #face8b;}
 40% {}
 60%{}
 80%{}
 100%{}}*/

 @keyframes
 bgcolor {0%{
background: #6e267b;
   margin: 0;
   padding: 0;
   animation: bgcolor infinite 22s;
/*background-image: url(../img/greenscreenscreens.gif);
filter: chroma(color=#AAFF49);*/
 background-position: top left;
 background-repeat: no-repeat;}
  20% {
background: #f1929a ;
    margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;
  /*  background-image: url(../img/greenscreenscreens.gif);
    filter: chroma(color=#AAFF49);*/
  background-position: top left;
  background-repeat: no-repeat;}
  40% {
background: #e32636 ;
    margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;
  /*  background-image: url(../img/greenscreenscreens.gif);
    filter: chroma(color=#AAFF49);*/
  background-position: top left;
  background-repeat: no-repeat;}
  60%{
background: #FFD1DC;
    margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;
/*background-image: url(../img/keypadNumpad.png);*/
  background-position: top left;
  background-repeat: no-repeat;}
  80%{
background: #E40BFD;
    margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;
/*background-image: url(../img/keypadNumpad.png);*/
  background-position: top left;
  background-repeat: no-repeat;}
  100%{
background: #6e267b;
    margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;}}





body {
  margin: 0;
    padding: 0;
    animation: bgcolor infinite 22s;
/*background-image: url(../img/keypadNumpad.png);
  background-position: top left;
  background-repeat: no-repeat;

  filter: chroma(color=#AAFF49);*/


}


ul {
  list-style-type: none;
  display: inline-block;


}

li {
float:right;


}


.footer {


  list-style-type: none;
     display: inline-block;
     align-items: center;
     margin: auto;

}

#patreon {
  max-height: 60px;

  display: inline-block;
  list-style-type: none;
margin: auto;
padding-right: 35px;
}

#facebook {
  max-height: 60px;
  display: inline-block;
    list-style-type: none;
    margin: auto;
padding-right: 5px;
}

#twitter {
  max-height: 60px;

  display: inline-block;
    list-style-type: none;
    margin: auto;
padding-right: 5px;
}

#tiktok {
  max-height: 60px;

  display: inline-block;
    list-style-type: none;
    margin: auto;

}
#instagram {
  max-height: 60px;
  display: inline-block;
    list-style-type: none;
    margin: auto;
    padding-right: 5px;


}

/*{
    background-image:url('img/keypadNumpad.png');

}*/



/*#floatmenunow {
font-family: Verdana;
font-size: 12px;
position: absolute;
top: 630px;
left: 50%;
right: 50%;
width: 207px;
height: 435px;
padding:5px;
margin:5px 0 -461px 277px;
background:url(https://images-na.ssl-images-amazon.com/images/I/81wRXdAOmkL._SL1500_.jpg);
}
*/




audio {
visibility: hidden;

}

button:hover {
  animation: buttonhover infinite 22s;
}


#call:hover {
  background-color: #81c784;
}

#one:hover {
  background-color: #81c784;
}

#two:hover {
  background-color: #81c784;
}

#three:hover {
  background-color: #81c784;
}

#four:hover {
  background-color: #81c784;
}

#five:hover {
  background-color: #81c784;
}

#six:hover {
  background-color: #81c784;
}

#seven:hover {
  background-color: #81c784;
}

#one:hover {
  background-color: #81c784;
}

#eight:hover {
  background-color: #81c784;
}

#nine:hover {
    background-color: #81c784;

}

#zero:hover {
  background-color: #81c784;
}

#star:hover {
  background-color: #81c784;
}

#poundit:hover {
  background-color: #81c784;
}



@keyframes
buttonhover {0%{
  background: red;
  animation: buttonhover infinite 22s;
}
 20% {
   background: red;
   animation: buttonhover infinite 22s;
}
 40% {
  background: red;
   animation: buttonhover infinite 22s;}
 60%{
   background: red;
   animation: buttonhover infinite 22s;}
 80%{
  background: red;
   animation: buttonhover infinite 22s;}
 100%{
  background: red;
   animation: buttonhover infinite 22s;}}