.rangiA{background-color: transparent;}

.rangi1{background-color:#009900; color:#000;}
.rangi2{background-color:#007b5e}
.rangi3{background-color:#eee}
.rangi4{background-color:#f3f3f3}
.rangi5{background-color:#ff0000}
.rangi6{background-color:#000000}
.rangi7{background-color:#ffffff}
.rangi8{background-color:#dee2e6}
.rangi9{background-color:#fffaaa; color:#000;}
.rangi10{background-color:#ff00ff; color:#000;}



.bg-redUofA{background-color:#ab0520!important}
.bg-blueUofA{background-color:#0c234b!important}

.background-wrapper1{color:#fff;}




.gradient {
  
  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

.conic-gradient {
  /* Original example */
  background-image: conic-gradient(#fff, #000);
  /* Explicitly state the location center point */
  background: conic-gradient(at 50% 50%, #fff, #000);
  /* Explicitly state the angle of the start color */
  background: conic-gradient(from 0deg, #fff, #000);
  /* Explicitly state the angle of the start color and center point location */
  background: conic-gradient(from 0deg at center, #fff, #000);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background: conic-gradient(#fff 0%, #000 100%);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background: conic-gradient(#fff 0deg, #000 1turn);
}


  /*   ****     You can also declare where you want any particular color to start. These starting points are called color-stops. Say you want yellow to take up the majority of the space, but red only a little bit in the beginning. You could make the yellow color-stop pretty early. In the following example, red runs until 10% and then yellow takes from there:  ***   */
.gradient3 {
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}


  /*    also see  https://cssgradient.io/   
https://stripe.com/

 */



h1gradient {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.tumia1{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(6,251,79,1) 100%);
}


.tumia2{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,153,0,1) 100%);
}

/*   #0073e6: rgb(0, 115, 230)
#0080ff: rgb(0, 128, 255)


    background-color: red;
*/


.tumia3{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,128,255,1) 100%);
}

.tumia4{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,115,230,1) 100%);
}

.tumia5{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,102,153,1) 100%);
}


.tumia6{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,153,0,1) 100%);
}




/*  ****   bootstrap colors  ******************   */
.bg-primary{background-color:#007bff!important}
a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}