/* Conklin Auto site template - (C) 2026 WebGuy Communications */
@font-face {
    font-family: "FontAwesome";
    src: url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 90px 0 0;
    background: #ababab;
    color: #161616;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.56;
    -webkit-font-smoothing: antialiased;
}

a { color: #131a2d; }
a:hover { color: #283861; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 10px; }
h1, h2, h3, h4, h5, h6 { margin: .25em 0; font-weight: 400; line-height: 100%; }
h3 { font-size: 32px; }
.basecolor_1 { color: #131a2d; }

/* ---- header ---- */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 5px 11px 0 rgba(50, 50, 50, .41);
}
#header .inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 72px;
}
#logo { display: block; float: left; margin: 12px 18px; line-height: 0; }
#logo img { display: block; }
#menu { float: right; margin-top: 10px; padding-right: 40px; }
#menu ul { display: flex; list-style: none; margin: 0; padding: 0; }
#menu li { margin: 0 0 0 32px; padding: 0; }
#menu a {
    display: block;
    padding: 12px 0;
    color: #333;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
#menu a:hover, #menu .active > a, #menu .current > a { color: #131a2d; }
#menubtn { display: none; }

/* ---- page frame ---- */
#page { max-width: 1280px; margin: 0 auto; background: #fff; }

/* hero on the home page */
#hero {
    background: url("../images/r1-s4-6.jpg") top center / cover no-repeat;
}
#hero .hero-inner {
    padding: 108px 300px 133px;
    text-align: center;
    background: url("../images/hex1.png") center no-repeat;
}
.inset_txt img { display: inline-block; max-width: 100%; animation: conklin-reveal .8s .3s ease-out both; }
@keyframes conklin-reveal {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .inset_txt img { animation: none; } }

/* inner-page banner */
#banner {
    background: url("../images/r1-s4-6.jpg") top center / cover no-repeat;
}
#banner h1 {
    margin: 0;
    padding: 60px 20px;
    background: url("../images/hex1.png") center no-repeat;
    color: #fff;
    font-size: 72px;
    font-weight: 900;
    letter-spacing: -3px;
    line-height: 100px;
    text-align: center;
}

/* quote + map on the home page */
#region5 { padding: 60px 160px; background: #fff; }
#region5 h3 { text-align: center; font-weight: 400; font-size: 31.4px; }
#region5 iframe { display: block; width: 100%; margin-top: 40px; border: 0; }

/* inner content area */
#content { padding: 30px; background: #fff; }
#content h1, #content h2, #content h3 { color: #161616; }
#content h1 { font-size: 36px; }
#content h2 { font-size: 32px; font-weight: 400; margin: .8em 0 .4em; }
#content h1.basecolor_1, #content .basecolor_1 { font-size: 50px; font-weight: 900; letter-spacing: -2px; color: #131a2d; }
#content p { margin: 0 0 24px; }
#content h1.basecolor_1 { margin-bottom: 16px !important; }
#content img { display: block; margin: 0 auto 20px; }
#content figure { margin: 0; }
#content .item-image img { width: 100%; }
#content iframe { width: 100%; border: 0; }
#content dl { margin: 0 0 20px; }
#content dt { display: none; }
#content dd { margin: 0; color: #161616; line-height: 20px; }

/* ---- contact form (horizontal form look) ---- */
#content .well { margin: 10px 0 20px; padding: 19px; border: 1px solid #e3e3e3; border-radius: 4px; background: #f5f5f5; }
#content fieldset { margin: 0; padding: 0; border: 0; }
#content fieldset legend, #content .contact-form legend {
    float: none; width: auto; margin: 0 0 20px; padding: 0;
    color: #999; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 2; text-transform: uppercase;
}
.control-group { display: flex; align-items: flex-start; margin-bottom: 20px; }
.control-label { width: 180px; padding: 5px 20px 0 0; text-align: right; flex: none; }
.control-label label { font-weight: 400; font-size: 14px; color: #161616; }
.control-label .optional, .control-label .form-text { color: #557a95; }
.controls { flex: 1; }
.control-group > .controls:only-child { margin-left: 180px; }
.controls input[type="text"], .controls input[type="email"], .controls input[type="password"], .controls textarea, .controls select {
    width: 220px; max-width: 100%; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
    color: #555; font: inherit; font-size: 14px; font-weight: 400; line-height: 20px;
}
.controls textarea { height: 260px; }
.btn, button.validate, .btn-primary {
    display: inline-block; padding: 4px 12px; border: 1px solid #04c; border-radius: 4px;
    background: linear-gradient(#08c, #04c); color: #fff; font: inherit; font-size: 14px; font-weight: 400; line-height: 20px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: #04c; color: #fff; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.star, .required { color: #161616; }
#system-message-container { padding: 0 30px; }
#system-message-container .alert, joomla-alert { display: block; margin: 10px 0; padding: 10px 14px; border: 1px solid #bce8f1; border-radius: 4px; background: #d9edf7; color: #31708f; }

/* ---- dark regions ---- */
#region12 { display: flex; justify-content: space-between; padding: 60px; background: #1f1f1f; color: #fff; }
#region12 .col { width: 48.7%; }
#region12 h3 { margin: 0 0 22px; color: #fff; font-size: 24px; font-weight: 400; letter-spacing: -1px; line-height: 100%; }
#region12 p { color: #fff; line-height: 25px; margin: 0 0 10px; }
#region12 a { color: #fff; text-decoration: none; }
#region12 a:hover { text-decoration: underline; }
#region12 .row-fluid { display: flex; justify-content: space-between; }
#region12 .span6 { width: 48.7%; }
#region12 .fa { margin-right: 5px; }
#footer { padding: 0 60px 60px; background: #1f1f1f; color: #222; text-align: center; }
#footer .footertxt { margin: 0; color: #999; }
#footer img { display: inline-block; margin-top: 6px; }
#footer a { color: #222; text-decoration: none; }

/* FontAwesome 4 glyphs used on this site */
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.fa-phone-square:before { content: "\f098"; }
.fa-envelope-square:before { content: "\f199"; }
.fa-rss-square:before { content: "\f143"; }
.fa-twitter-square:before { content: "\f081"; }
.fa-facebook-square:before { content: "\f082"; }

/* back to top */
#elevator {
    position: fixed; right: 20px; bottom: 20px; z-index: 90; display: none;
    color: #ddd; font: normal 64px/1 FontAwesome; text-decoration: none;
}
#elevator:before { content: "\f01b"; }
#elevator.show { display: block; }
#elevator:hover { color: #bbb; }

/* ---- small screens ---- */
@media (max-width: 980px) {
    #hero, #banner { background-position: center; }
    body { margin-top: 70px; }
    #header .inner { min-height: 50px; }
    #logo { margin: 5px 10px; }
    #logo img { width: 200px; height: auto; }
    #menubtn { display: block; float: right; width: 40px; height: 40px; margin: 5px 10px 0 0; padding: 8px; border: 0; background: none; cursor: pointer; }
    #menubtn span { display: block; height: 3px; margin: 5px 0; background: #333; }
    #menu { display: none; float: none; clear: both; margin: 0; padding: 0; border-top: 1px solid #eee; background: #fff; }
    #menu.open { display: block; }
    #menu ul { flex-direction: column; }
    #menu a { padding: 12px 20px; }
    #hero .hero-inner { padding: 40px 20px; }
    #region5 { padding: 30px 20px; }
    #region5 h3 { font-size: 24px; }
    #banner h1 { padding: 30px 10px; font-size: 44px; line-height: 60px; letter-spacing: -2px; }
    #content { padding: 20px; }
    #content h1.basecolor_1 { font-size: 36px; }
    #region12 { display: block; padding: 40px 30px; }
    #region12 .col { width: auto; margin-bottom: 30px; }
    .control-group { display: block; }
    .control-label { width: auto; padding: 0 0 4px; text-align: left; }
}
@media (max-width: 480px) {
    #region12 .row-fluid { display: block; }
    #region12 .span6 { width: auto; }
}