@font-face {
    font-family: "RingsideExtraWide-Book.ttf";
    src: url("../fonts/ringside-extrawide/RingsideExtraWide-Book.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "RingsideExtraWide-Bold.ttf";
    src: url("../fonts/ringside-extrawide/RingsideExtraWide-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-Light.ttf";
    src: url("../fonts/ringside/Ringside-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-BoldItalic.ttf";
    src: url("../fonts/ringside/Ringside-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "RingsideCompressed-Bold.ttf";
    src: url("../fonts/ringside-compressed/RingsideCompressed-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-Bold.ttf";
    src: url("../fonts/ringside/Ringside-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-Book.ttf";
    src: url("../fonts/ringside/Ringside-Book.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-LightItalic.ttf";
    src: url("../fonts/ringside/Ringside-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Ringside-Thin.ttf";
    src: url("../fonts/ringside/Ringside-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Ringside-Medium.ttf";
    src: url("../fonts/ringside/Ringside-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

body {
    background-color: rgba(0,0,0,1);
    color: rgba(255,255,255,1);
}

header {text-align: center;}

nav {
    font-family: "RingsideExtraWide-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;
    letter-spacing: .5em;
    text-align: center;
    overflow: hidden;
}

nav li {
    display: inline;
    overflow: hidden;
    margin-left: 5%;
    margin-right: 5%;
}

nav li a {
    text-decoration: none;
    color: rgba(255,255,255,1);
}

nav li a:hover {
    font-family: "RingsideExtraWide-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
}

input, label {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 0;
    color: rgba(255,255,255,1);
}

input {background-color: rgba(50,50,50,1);}

label {
    margin-left: 0.8em;
    margin-right: 0.8em;
}

footer {
    display: block;
    margin-top: 3em;
    width: 85%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* IDs */

#logo {
    width: 20%;
}

#name-field {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;
}

/* classes */

.extrawide-bold {
    font-family: "RingsideExtraWide-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 125%;
    letter-spacing: 0;
}

.bold-blue {
    font-family: "Ringside-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: rgba(0,161,255,1);
}

.logo-citation {
    font-family: "Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 50%;
    letter-spacing: 1em;
    color: rgba(255,255,255,0.5);
}

/* index */

.active a {
    /* background-color: rgba(255,255,0,1); */
    color: rgba(255,255,0,1);
    /* font-size: 150%; */
}

.hidden {
    display: none;
}

.index-hero-container {
    margin: auto;
    margin-top: 4em;
    margin-bottom: 4em;
    padding-bottom: 4em;
    text-align: center;
    display: block;
    width: 100%;
    /* background-color: rgba(0,0,255,1); */
}

.index-hero-left {
    /* float: left; */
    display: inline-block;
    width: 48%;
    vertical-align: middle;
}

.index-hero-right {
    /* float: right; */
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    width: 48%;
}

.hero-img-index {width: 100%;}

.hero-img-citation {
    font-family: "Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 75%;
    color: rgba(255,255,255,0.5);
}

.hero-text-index {
    font-family: "Ringside-Thin.ttf", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 200%;
}

.hero-text-index-firstline {
    font-size: 175%;
    margin-top: .5em;
    margin-bottom: .5em;
}

.bold-italic {
    font-family: "Ringside-BoldItalic.ttf", sans-serif;
    font-weight: 700;
    font-style: italic;
}

/* services */

.large-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* padding-top: 1%; */
    padding-bottom: 1%;
    margin-bottom: 3%;
    background-color: rgba(40,40,40,1);
}

.large-box-label-strip {
    width: 100%;
    background-color: rgba(66,66,66,1);
    display: inline-block;
}

.large-box-label-text {
    margin-left: 1.5em;
}

.large-box-label-title {
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 450%;
    display: block;
}

.large-box-label-description {
    font-family:"Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 150%;
    margin-bottom: 1em;
}

.medium-box {
    margin: 1em;
    display: inline;
}

.medium-box-label {
    font-family: "Ringside-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 250%;
    letter-spacing: 0.2em;
    color: rgba(255,255,0,1);
    margin-top: 1em;
    margin-left: 0.5em;
}

.small-box {
    width: 28%;
    /* background-color: rgba(100,100,100,1); */
    margin: 1em;
    display: inline-block;
    vertical-align: top;
}

.small-box-pic img {width: 100%;}

.small-box-caption {
    font-family: "Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 1em;
    font-size: 75%;
    color: rgba(255,255,255,0.5);
}

.small-box-description {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 125%;
}

/* gallery */

.gallery-items {text-align: center;}

.gallery-item-container {
    width: 40%;
    display: inline-block;
    margin: 2em;
    vertical-align: top;
}

.gallery-item-container-model {
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 300%;
    text-align: left;
}

.gallery-item-container-date {
    font-family: "Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 150%;
    margin-bottom: 1em;
    text-align: left;
}

.gallery-item-container-overview {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 1em;
    text-align: left;
    font-size: 125%;
}

.gallery-item-container-before-after {text-align: center;}

.gallery-item-container-before-after img {width: 40%;}

.gallery-item-before-image-credit, .gallery-item-after-image-credit {
    font-family: "Ringside-LightItalic.ttf", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 75%;
    color: rgba(255,255,255,0.5);
}

.gallery-item-before-image-credit {margin-right: 6em;}
.gallery-item-after-image-credit {margin-left: 6em;}

.gallery-item-container-view-more {
    text-align: center;
    margin-top: 1em;
}

.gallery-item-container-view-more a {
    text-decoration: none;
    color: rgba(255,225,0,1);
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 125%;
}

/* schedule */

.schedule-header {
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 300%;
}

.notfirst {
    margin-top: 0.5em;
}

.current-customers {
    margin-top: 1em;
}

.current-customers a {
    font-family: "RingsideExtraWide-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 125%;
    letter-spacing: .25em;
    color: rgba(0,161,255,1);
    text-decoration: none;
}

.current-customers a:hover {
    font-family: "RingsideExtraWide-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.results-title {
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 300%;
}

.results-paragraph {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;
}

.name {margin-top: 1.5em;}

.protective-film {margin-top: 1.5em;}

.vehicle-paint-type, .sealant-or-ceramic {margin-top: 1em;}

.radio {
    margin-left: 0.3em;
    margin-right: 0.3em;
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 125%;
}

.form-error {
    font-family: "Ringside-Medium.ttf", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 115%;
    color: rgba(255,25,71,1);
}

.submit {
    margin: 1em;
    background-color: rgba(255,225,0,1);
    color: rgba(0,0,0,1);
    font-size: 250%;
    width: 25%;
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    /* letter-spacing: 0.05em; */
}

/* footer */

.foot-left {
    float: left;
    text-align: left;
    vertical-align: middle;
}

.foot-left-cta {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;

}

.foot-right {
    float: right;
    text-align: right;
    vertical-align: middle;
}

.foot-right-phone {
    font-family: "RingsideCompressed-Bold.ttf", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 250%;
}

.foot-right-email {
    font-family: "Ringside-Book.ttf", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 150%;
}