div.cover > h1 {
    color: #0055a2;
}

@media screen and (max-width:770px) {
    .cover h1 { font-size: 46px; }
}

@media screen and (max-width:580px) {
    .cover h1 { font-size: 40px; }
}

@media screen and (max-width:520px) {
    .cover h1 { font-size: 36px; }
}

/* ICON */

#wall .icon {
    background-image: url(img/icon.svg);
}


/* RESIDENCE TIME CALCULATORS*/

div.resCalc {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 60px auto;
    gap: 0;
    grid-auto-rows: minmax(20px, auto);
    width: 330px;
    font-size: 14px;
    align-items: center;
    background-color: #f0f0f0;
    border: 1px solid #c0c0c0;
    padding: 10px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
}

div.resCalc input {
    font-size: 14px;
    box-sizing: border-box;
    width: 54px;
    border-radius: 3px;
    border: 1px solid #808080;
    padding: 3px 4px;
    -webkit-appearance: none; 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
}

div.resCalc input::-webkit-outer-spin-button,
div.resCalc input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div.resCalc input:read-only {
    background-color: #e6eef3;
    border-color: #72787e;
}

div.resCalc > div {
    padding: 2px 0px;
}

div.resCalc > div.selector {
    grid-column: 1 / span 3;
    margin-bottom: 10px;
    cursor: pointer;
    color: #999999;
}

div.resCalc > div.selector > div.button {
    padding: 4px 8px;
    margin-right: 8px;
    float: left;
    background-color: #e9e9e9;
    border-radius: 3px;
    border: 1px solid #999999;
}

div.resCalc > div.selector > div.button.selected {
    color: #333333;
    background-color: #ffffff;
    border-color: #333333;
}

div.resCalc > div.col1::before,
div.resCalc > div.col1::after,
div.resCalc > div.col3::after

{
    content: "\00a0";
}

div.resCalc > div.col1::after {
    float: right;
    padding-right: 6px;
}

div.resCalc > div.col1.polystyrene::before { content: "Screw Capacity (Polystyrene)"; }
div.resCalc > div.col1.gravity::before     { content: "Specific Gravity"; }
div.resCalc > div.col1.capacity::before    { content: "Capacity*"; }
div.resCalc > div.col1.rate::before        { content: "Rate*"; }
div.resCalc > div.col1.residence::before   { content: "Residence Time"; }

div.resCalc > div.col1.rate::after         { content: "÷"; }
div.resCalc > div.col1.gravity::after,
div.resCalc > div.col1.sixty::after        { content: "×"; }

div.resCalc > div.col1.residence::after,
div.resCalc > div.col1.capacity::after,
div.resCalc > div.col1.hours::after        { content: "="; }

div.resCalc > div.col2.sixty::before  {
    display: inline-block;
    content: "60";
    padding: 4px;
}

div.resCalc.metric > div.col3.polystyrene::before,
div.resCalc.metric > div.col3.capacity::before {
    content: "kg";
}

div.resCalc.imperial > div.col3.polystyrene::before,
div.resCalc.imperial > div.col3.capacity::before {
    content: "lb";
}

div.resCalc.metric   > div.col3.rate::before { content: "kg/hr"; }
div.resCalc.imperial > div.col3.rate::before { content: "lb/hr"; }

div.resCalc > div.col3.hours::before         { content: "hours"; }
div.resCalc > div.col3.residence::before     { content: "time*"; }


/* Barrel Residence Time */

div.resCalc.brt > div.col1.polystyrene::before { content: "Screw Capacity (Polystyrene)"; }
div.resCalc.brt > div.col1.capacity::before    { content: "Screw Capacity"; }
div.resCalc.brt > div.col1.rate::before        { content: "Output Rate"; }
div.resCalc.brt > div.col3.residence::before   { content: "minutes"; }

/* Dryer Residence Time */

div.resCalc.drt > div.col1.polystyrene::before { content: "Dryer Capacity (Polystyrene)"; }
div.resCalc.drt > div.col1.capacity::before    { content: "Dryer Capacity"; }
div.resCalc.drt > div.col1.rate::before        { content: "Consumption Rate"; }
div.resCalc.drt > div.col3.residence::before   { content: "hours"; }