:root
{
  --background: hsl(0,0%,100%);
  --nav: hsl(210,14%,30%);
  --nav-label: hsla(210,40%,85%, .85);
  --nav-label-active: hsl(210,10%,90%);
  --nav-accent: hsl(200,100%,60%);
  --nav-dark: hsl(220, 20%, 20%);
  --nav-dim: hsl(200,15%,50%);
  --hue2: hsl(210,14%,40%);
  --control-background: hsl(210,25%, 95%);
  --control-color: hsl(220,30%,20%);
  --control-border: hsl(210, 20%, 85%);
  --control-border-active: hsl(210, 20%, 60%);
  --control-label: hsl(210,15%,50%);
  --control-label-active: hsl(200,100%,45%);
  --table-row-hover: hsla(200,100%,90%,1);
  --table-head: hsl(210,14%,55%);

  --v-gap: 3rem;
  --h-gap: 3rem;

  --accent: hsl(200,100%,60%);
  --accent-light: hsl(200,100%,70%);
  --accent-dark: hsl(198,90%,50%);
  --red: hsl(340,80%,65%);
  --green: hsla(165, 90%, 45%, 1);


  --www-green: hsla(170, 75%, 46%, 1);
  --www-blue: hsl(208, 65%, 67%);
  --www-blue-heading: hsl(205,70%,30%);
  --www-yellow: hsl(340,100%,70%);
  --www-black: hsl(213, 10%, 22%);
  --www-grey:hsl(210,25%, 95%);
  --www-blue-txt: hsl(208, 80%, 60%);

  --www-worker: hsl(165, 90%, 45%) ;
  --www-supplier: #F5C867;
  --www-trainer: #C29976;;
  --www-employer: #F78765;
}

*
{
  transition: opacity .5s ease, background .15s ease, color .15s ease, fill .15s ease, text-shadow .15s ease;
  outline: none;
}

html,body
{
  height: 100%;
}

body#www
{
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
  padding: 0;
  margin: 0;
  color: var(--www-black);
  display: flex;
  flex-direction: column;
}

body#www > div:not([ng-view]),
body#www > div[ng-view] > div
{
  display: grid;
  grid-template-columns: auto minmax(min-content,1024px) auto;
  padding: 4rem 3rem;
}

body#www > div:not([ng-view]):before,
body#www > div:not([ng-view]):after,
body#www > div[ng-view] > div:before,
body#www > div[ng-view] > div:after
{
  content: " ";
}



#www .header
{
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 2rem;
  grid-auto-flow: column;
  align-items: center;
}


#www .header a,
#www .header a:visited
{
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12pt;
  color: var(--www-green);
}


#www .hero
{
  grid-column: 1 / span 3;
  align-items: center;
  background: url('/www/signup/res/wood_figures.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-content: center;
  text-align: center;
  justify-content: center;
  background-position: center;
  max-height: 100vw;
  min-height: 28vh;
  padding: 3rem;
}

#www .content
{
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  justify-content: space-around;
}


#www .section
{
  grid-column: 1 / span 3;
  z-index: -1;
}

#www .option
{
  display: grid;
  grid-template-rows: repeat(2,min-content) auto min-content min-content;
  grid-row-gap: 1rem;
  padding: 3rem;
  grid-column-gap: 1rem;
}


#www .option a
{
  font-weight: bold;
  align-self: center;
  color: var(--www-blue-heading);
  margin-right: 1rem; white-space: nowrap;
  grid-column: 1 / span 2;
  justify-self: center;
}


#www .option button,
#www .option .btn
{
  grid-column: 1 / span 2;
  margin: 0;
  text-align: center;
  width: -webkit-fill-available;
}

#www a,
#www a:visited
{
  text-decoration: none;
  color: var(--www-blue-txt);
}

#www .option > h3,
#www .option > p,
#www .option > div
{
grid-column: 1 / span 2;
}

#www .content > div:not(:first-of-type):not(:last-of-type)
{
padding: 0 2rem;
}

#www .option h2
{
  align-self: center;
  grid-column: 1;
  grid-row: 1;
}

#www .option svg
{
  grid-row: 1;
  align-self: center;
  grid-column: 2;
  height: 2rem;
  width: 2rem;
  fill: white;
}

#www h1,
#www h2,
#www h3
{
margin: 0;
}



#www button,
#www .btn
{
background: var(--accent);
border: none;
padding: .5rem 1rem;
border-radius: .25rem;
color: white;
font-weight: bold;
/*text-transform: uppercase;*/
}


#www .fill-view
{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

#www button[disabled],
#www .btn[disabled]
{
  background: var(--control-background) !important;
  opacity: .75;
}


#www p
{
width: min-content;
min-width: 100%;
}


#www h1
{
font-size: 48pt;
}

#www h2
{
font-size: 22pt;
}

#www ul
{
  padding-left: 1rem;
}

#www li
{
  margin-bottom: 1rem;
}

#infographic-container
{
  display: none;
}

#infographic
{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  height: 35vh; width: 35vh;
  margin: auto;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

#infographic a
{
  position: relative;
}

#infographic svg.active,
#infographic svg.inactive
{
  transition: opacity .25s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
}

#infographic svg.inactive:hover
{
  opacity: 0;
}

#infographic svg.active
{
  opacity: 0;
}

#infographic svg.selected,
#infographic svg.active:hover
{
  opacity: 1;
}

#infographic svg
{
  cursor: pointer;
}

.std-icon
{
  width: 1.75rem;
  height: 1.75rem;
}

.compare-table
{
  border-collapse: collapse;
}

.compare-table svg
{
  fill: var(--www-green);
}

.compare-table th:first-child
{
  font-weight: bold;
  color: var(--www-blue);
  font-size: 1.25rem;
  text-align: left;
}

.compare-table td,
.compare-table th
{
  padding: .25rem .5rem;
}

.compare-table td:not(:first-child),
.compare-table th:not(:first-child)
{
  text-align: center;
}

.compare-table tr:nth-child(2) td
{
  border-bottom: 1px solid var(--control-border);
  font-weight: bold; padding-bottom: 1rem; color: var(--control-label)
}

.compare-table tr:nth-child(3) td
{
  padding-top: 1rem;
}

.fade {
  transition: all linear 1s;
  opacity: 1;
}

.fade.ng-hide {
  opacity: 0;
}

.ng-hide {
  opacity: 0;
  transition: none;
}

  @media (orientation: portrait)
  {
    #www .header
    {
    grid-auto-flow: row;
    grid-row-gap: 1rem;
    justify-items: center;
    margin-bottom: 3rem;
    }


  }