:root {
--red:    #FE0000; /*  var(--red); */
--red-d:  #C41508; /*  var(--red-d); */

--pink-l: #FFC7CE; /*  var(--pink-l); */
--pink2:  #F7A1A1; /*  var(--pink2); */
--pink:   #E27F98; /*  var(--pink); */
--pinkD:  #AA1F42; /*  var(--pinkD); */

--yellow-l: #FFFCBB;/*  var(--yellow-l); */
--yellow:   #FFEB9B;/*  var(--yellow); */
--yellow-d: #D5AB04;/*  var(--yellow-d); */

--green-l-2: #BED0C2; /*  var(--green-l-2); */
--green-l:   #DBEEAF; /*  var(--green-l); */
--green2:    #BDB76C; /*  var(--green2); */
--green:     #ADCE5E; /*  var(--green); */
--green-d:   #8AA250; /*  var(--green-d); */
--green-d2: #007D63; /*  var(--green-d2); */

--orange-l: #FFC266;/*  var(--orange-l); */
--orange:   #DD8D01;/*  var(--orange); */
--orange2:  #d17636;/*  var(--orange2); */
--orange-d: #DD6E39;/*  var(--orange-d); */

--brown-l: #F1D7A8; /*  var(--brown-l); */
--brown:   #AE8D54;  /* var(--brown); */
--brown-d: #493723;/*   var(--brown-d); */

--purple-l: #D8DDF4;/*  var(--purple-l); */
--purple:   #BCCCFF;/*  var(--purple); */
--purple-d: #7E8ED2;/*  var(--purple-d); */

--blue-l: #D1ECFE;/*  var(--blue-l); */
--blue2:  #b3ccff;/*  var(--blue2); */
--blue:   #A3C4E1;/*  var(--blue); */
--blue4:  #85A9C2;/*  var(--blue4); */
--blue-d: #337AB7;/*  var(--blue-d); */

--grey-l2: #ffffff; /*  var(--grey-l2); */
--grey-l:  #E7E7E7; /*  var(--grey-l); */
--grey2:   #C0C8D2; /*  var(--grey2); */
--grey:    #B1B0B0; /*  var(--grey); */
--grey-d:  #494949; /*  var(--grey-d); */
  /* --fullwidth: 100%; */

--col-fr-l: var(--blue); /*  var(--col-fr-l); */
--col-fr:   #4A90E2; /*  var(--col-fr); */
--col-fr-d: #0E509E; /*  var(--col-fr-d); */

--col-sp-l: var(--orange-l); /*  var(--col-sp-l); */
--col-sp:   var(--orange);   /*  var(--col-sp);  */

--col-ge:   var(--orange-d);/*   var(--col-ge); */

--col-l4b-red: #b63222;/*  var(--col-l4b-red); */


--gold:   var(--orange);/* var(--gold); */
--silver: #747373;/* var(--silver); */
--bronze: #493723;/* var(--bronze); */

--distinctionBkg:#B9D4F4;   /* var(--distinctionBkg); */
--meritBkg:#C6EFCE;/* var(--meritBkg); */
--passBkg:#FFEB9B;/* var(--passBkg); */
--failBkg:#FFC7CE;/* var(--failBkg); */


--yr7Color: #E27F98;  /* var(--yr7Color); */
--yr8Color: #DF9B6D;  /* var(--yr8Color); */
--yr9Color: #8F9EDA;  /* var(--yr9Color); */
--yr10Color: #BDB76C;  /* var(--yr10Color); */
--yr11Color: #85A9C2;  /* var(--yr11Color); */


--yr12Color: #DF9B6D;  /* var(--yr12Color); */
--yr13Color: #8F9EDA;  /* var(--yr13Color); */
--yr14Color: #8F9EDA;  /* var(--yr14Color); */

--subjBtnF: #8F9EDA;  /* var(--subjBtnF);*/
--subjBtnS: #DF9B6D;  /* var(--subjBtnS);*/
--subjBtn: var(--grey2);  /* var(--subjBtn);*/



--fadeInSecs: 3s;/* var(--fadeInSecs);*/
--fadeOutSecs: 3s;/* var(--fadeOutSecs);*/

}


/*
=========================
use with:

css:     var(--red);

js:
// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
=========================
*/