:root {
  --primary-bg-color: #FFF;
  --primary-color: #888;
  --footer-bg-color: #FAFAFA;
  
  --bg-darkgray: #888;
  --bg-gray: #AAA;
  --bg-mediumgray: #CACACA;
  --bg-lightgray: #DADADA;
  
  --bg-white-20: rgba(255,255,255,.2);
  --bg-white-75: rgba(255,255,255,.75);
  --bg-black-20: rgba(0,0,0,.2);

  --fg-light: #FFF;
  --fg-black: #000;
  --fg-gray: #444;
  --fg-lightgray: #DADADA;
  --fg-yellow: rgba(234,239,44,1);
  --fg-yellow-75: rgba(234,239,44,.75);
}

html,body   {width:100vW; overflow-x:hidden;}

/* common colors */
.bg-darkgray            {background-color:var(--bg-darkgray);} 
.bg-middlegray          {background-color:var(--bg-gray);}
.fg-light               {color:var(--fg-light);}    
.bg-darkgray-50         {background-color:color-mix(in srgb, var(--bg-darkgray),transparent 50%);}

/* header */
header                  {z-index:2;position:relative;width:100vW;}
header .navbar          {z-index:2;padding:10px 20px 20px;background-color:var(--bg-black-20);}
header .navbar-toggler                          {background-color:var(--bg-white-75);}
header .navbar a                                {color:var(--fg-light)!important;}
header .navbar a.disabled                       {color:var(--fg-lightgray)!important;}
header .navbar a:hover,
header .navbar a:focus                          {color:var(--fg-yellow)!important;}

header .navbar ul.dropdown-menu a               {color:var(--fg-black)!important; white-space:nowrap}
header .navbar ul.dropdown-menu a:hover,
header .navbar ul.dropdown-menu a:focus         {color:var(--fg-gray)!important;}

header .primary-menu    {width:70%;float:left;}
header .primary-sub     {padding-bottom:20px; }

footer                  {margin-top:30px;padding:20px; background-color:var(--footer-bg-color);}

h1,h2                   { margin-top:20px; }

/* stage */
.stage              {z-index:1;padding:0;height:90vH;}
.header-stage       {position:absolute;top:0;height:100vH;overflow:hidden;background-size:cover;}

/* helper */
a.social-icon           {text-decoration:none;border:solid 1px transparent;margin:0 2px;transition:border .5s}
a.social-icon:hover     {border:solid 1px #FFF;border-radius:3px; }
a.social-icon .fa       {width:25px;text-align:center;padding:2px 0 2px 2px;}

.img img                {width:100%!important; height:auto;}
.ellipsis               {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

.col-1of5               { flex:0 0 auto; width:20%; }
.col-1of8               { flex:0 0 auto; width:12.5%; }

/* special and animations */
.separate               {
	height:20px;
    background: linear-gradient(232deg, #ff005c, #006dff, #efff00);
    background-size: 600% 600%;
    -webkit-animation: ColorChange 10s ease infinite;
    -moz-animation: ColorChange 10s ease infinite;
    animation: ColorChange 10s ease infinite;
}
.separate hr            {display:none;}
@-webkit-keyframes ColorChange  { 0%{background-position:0% 52%} 50%{background-position:100% 49%} 100%{background-position:0% 52%} }
@-moz-keyframes ColorChange     { 0%{background-position:0% 52%} 50%{background-position:100% 49%} 100%{background-position:0% 52%} }
@keyframes ColorChange          { 0%{background-position:0% 52%} 50%{background-position:100% 49%} 100%{background-position:0% 52%} }