Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/customer/www/apeirce.trichrome.net/public_html/textpattern/lib/constants.php on line 136
/* CSS for A. PEIRCE LTD, MOBILE MECHANIC of ABINGDON /*
/* TRICHROME MEDIA 2018 */
/* info@trichrome.media */
a[href^=tel] {
color: inherit;
text-decoration: none;
}
body {
font-family: 'Rajdhani', sans-serif;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
background: #222;
}
/* TYPOGRAPHY */
h1 {
font-size: 1.6em;
line-height: 125%;
margin: 0;
font-weight: 700;
padding-bottom: 20px;
margin-bottom: 0;
}
h1 a {
color: #4b464c;
}
h1 a:hover {
color: #355ec6;
text-decoration: none;
}
h2 {
font-size: 1.1em;
line-height: 125%;
margin: 0 0 10px 0;
font-weight: 700;
}
h2 a {
color: #222;
}
h2 a:hover {
color: #355ec6;
text-decoration: none;
}
h3.menu {
display: none;
}
h4 {
font-size: 1.3em;
font-weight: 400;
margin: 0;
padding: 0 0 20px 0;
}
h4.share {
font-size: 1.3em;
font-weight: 400;
margin: 0;
padding: 0 0 20px 0;
color: #683665;
}
h6 {
font-size: 1.2em;
font-weight: 400;
margin: 20px 0 20px 0;
padding-left: 0;
color: #1f837d;
}
h6.date {
font-size: 1em;
font-weight: 400;
margin: 0 0 20px 0;
padding-left: 0;
color: #1f837d;
}
h6 a {
color: #355ec6;
}
h6 a:hover {
color: #355ec6;
text-decoration: none;
}
.sectlink {
display: inline;
}
p {
padding: 0;
margin: 0 0 10px 0;
font-size: 1.2em;
}
p.trich {
float: none;
margin-top: 35px;
font-size: 0.7em;
float: right;
}
p.hc {
float: left;
font-size: 1.4em;
font-weight: 600;
color: #FFF;
}
a {
color: #fb0b4a;
text-decoration: none;
}
a:hover {
color: #f33a59;
text-decoration: none;
cursor: pointer;
}
li {
font-size: 1.2em;
}
/* ================= */
/* HEADER */
.header {
width: 100%;
background: #0d0d0d;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0;
}
.header-inner {
display: block;
width: 100%;
max-width: 1100px;
padding: 0;
height: auto;
overflow: hidden;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header-inner img {
margin: 20px 0;
height: auto;
width: 500px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ============= */
/* NAV */
.navbar {
width: 100%;
background: #fb0b4a;
overflow: hidden;
border-top: 0px solid #3e0e43;
border-bottom: 0px solid #3e0e43;
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav {
max-width: 1040px;
float: left;
margin: 0 auto;
font-size: 1.2em;
font-weight: 600;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
color: #FFF;
text-align: center;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.nav li a:hover {
background-color: #d7043b;
color: #FFF;
overflow: hidden;
}
.nav1div {
max-width: 1000px;
margin: 0 auto;
background-size: 100% 100%;
}
.nav1div a {
color: #FFF;
border-right: 0px solid #ae727c;
border-left: 0px solid #602629;
}
.nav1div ul {
display: inline;
list-style: none;
}
.nav1div ul li {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
}
.nav1div li a {
list-style: none;
}
/* =============== */
/* BODY */
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 100%;
max-width: 1100px;
padding: 0px 20px;
background: #1c1c1c;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.main {
width: 100%;
overflow: hidden;
margin-top: 0;
padding: 20px;
float: left;
color: #FFf;
text-align: left;
width: 100%;
overflow: hidden;
margin-top: 0;
padding: 20px 0;
}
.article {
float: left;
text-align: left;
width: 100%;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img.banner {
width: 100%;
height: auto;
padding: 0px;
margin: 20px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* FORMS */
form {
font-size: 1em;
margin:0 auto;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
overflow: hidden;
}
label {
font-size: 1.0em;
}
input {
font-size: 1em;
width: 100%;
margin-top: 15px;
padding: 5px;
max-width: 400px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #555;
}
textarea {
font-size: 1.25em;
width: 100%;
max-width: 400px;
margin: 15px 0;
border: 1px solid #555;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input.zemSubmit {
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
border-radius: 0;
background: #a81836;
color: #FFF;
border: 0;
cursor: pointer;
padding: 10px 15px;
width: 100px;
}
input.zemSubmit:hover {
background: #d91841;
color: #FFF;
}
.contact-form {
padding-top: 20px;
width: 50%;
overflow: hidden;
float: left;
}
.contactpic {
float: right;
width: 40%;
overflow: hidden;
}
.contactpic img {
margin-top: 50px;
width: 100%;
display: none;
height: auto;
border: 15px solid #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* =============== */
/* FOOTER */
.foot-contact {
width: 250px;
padding: 0;
text-align: left;
float: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.foot-card {
width: 90px;
padding: 0;
text-align: right;
float: right;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.socbar {
width: 100%;
height: auto;
background: #fb0b4a;
margin-top: 0;
text-align: left;
overflow: hidden;
}
.socbar-inner {
max-width: 1100px;
height: auto;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
p.socmed {
color: #FFF;
font-size: 1.6em;
width: 100%;
display: inline;
}
p.socmed2 {
display: none;
}
p.visit {
color: #EEE;
width: 50px;
float: right;
margin-right: 30px;
}
img.cc {
float: right;
width: 60px;
margin-bottom: 20px;
margin-top: 5px;
height: auto;
border: 1px solid #FFF;
}
img.soc-share {
width: 60px;
height: 60px;
float: left;
margin: 0 10px 0 0 ;
border: 0px solid #FFF;
filter: brightness(1);
transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
img.soc:hover {
filter: brightness(1.5);
cursor: pointer;
transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
img.soc-share:hover {
filter: brightness(1.5);
cursor: pointer;
transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
.footer {
width: 100%;
overflow: hidden;
background: #000;
}
.footer-inner {
max-width: 1100px;
overflow: hidden;
margin: 0 auto;
padding: 80px 20px 20px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer p {
color: #FFF;
}
.footer a {
color: #fb0b4a;
text-decoration: none;
}
.footer a:hover {
color: #f93f70;
text-decoration: none;
}
/* ========================================== */
/* COOKIE BAR */
.cookie-bar {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
background: rgba(0,0,0,0.5);
height: auto;
overflow: hidden;
word-wrap: normal;
line-height: 175%;
color: #FFF;
text-align: center;
padding: 10px 0;
}
.cookie-bar.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.cookie-bar p {
font-size: 1em;
margin: 0;
padding: 0;
line-height: 200%;
}
.cookie-bar a {
color: #FFF;
display: inline-block;
text-decoration: none;
padding: 0 8px;
margin-left: 8px;
}
.cookie-bar .cb-enable {
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background: #398dff;
color: #FFF;
}
.cookie-bar .cb-enable:hover {
background: #00dd1a;
color: #000;
}
/* ============== */
@media screen and (max-width: 789px) {
.wrapper {
padding: 0px 10px;
}
p.left {
float: left;
font-size: 1em;
}
p.right {
float: right;
font-size: 1em;
}
.header-inner img {
margin: 0;
height: auto;
width: 100%;
max-width: 500px;
float: none;
padding: 20px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav {
width: 100%;
max-width: 790px;
padding-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
padding: 0;
font-size: 1.0em;
}
.navbar {
width: 100%;
height: auto;
overflow: hidden;
}
.nav1div ul li {
float: left;
text-align: center;
margin: 0;
width: 100%;
padding-left: 0;
padding-right: 0;
font-weight: 500;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav1div ul li:last-child {
padding-bottom: 0;
}
.nav1div ul li a {
display: block;
list-style: none;
padding: 10px 0 7px 10px;
margin-bottom: 0;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav1div {
display: none;
}
.nav1div a {
color: #FFF;
border-right: 0px;
border-left: 0px;
}
.arrow {
width: 30px;
height: 30px;
float: right;
margin: 0;
-webkit-transition: -webkit-transform .5s;
-o-transition: -o-transform .5s;
-moz-transition: -o-transform .5s;
transition: transform .5s;
background: url(../images/6.png) no-repeat center;
}
.rotate {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.footer-inner {
padding: 80px 10px 20px 10px;
}
.borderr {
display: none;
}
.borderl {
display: none;
}
.main {
width: 100%;
overflow: hidden;
margin-top: 0;
width: 100%;
overflow: hidden;
margin-top: 0;
padding: 20px 0;
float: left;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* TYPOGRAPHY */
h1 {
font-size: 1.4em;
line-height: 125%;
margin: 0;
font-weight: 700;
padding-bottom: 20px;
}
h3.menu {
display: block;
color: #FFF;
padding: 13px 10px 10px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
cursor: pointer;
text-align: left;
font-weight: 500;
}
p.visit {
font-size: 0.85em;
color: #EEE;
width: 50px;
float: right;
margin-right: 20px;
}
.header-contact {
display: none;
}
.socbar {
width: 100%;
height: auto;
overflow: hidden;
margin-top: 0;
text-align: center;
}
.socbar-inner {
max-width: 1100px;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 20px 10px 6px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p.socmed {
color: #FFF;
font-size: 1.3em;
width: 70%;
display: block;
padding-top: 3px;
float: left;
text-align: left;
}
img.soc {
width: 45px;
height: 45px;
}
img.works {
width: calc(33.33% - 25px);
}
/* FORMS */
textarea {
font-size: 1.25em;
width: 100%;
max-width: none;
margin: 15px 0;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.contact-form {
padding-top: 20px;
width: 100%;
max-width: none;
overflow: hidden;
float: left;
}
input {
font-size: 1.25em;
width: 100%;
margin-top: 15px;
padding: 5px;
max-width: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #000;
}
/* ====================== */
}
@media screen and (max-width: 480px) {
p {
font-size: 0.9em;
}
li {
font-size: 0.9em;
}
User Agent Stylesheet
.top-contact-inner {
text-align: left;
}
p.left {
width: 100%;
float: left;
font-size: 0.9em;
}
p.right {
float: left;
font-size: 0.9em;
}
p.socmed {
color: #FFF;
font-size: 1.2em;
width: 70%;
display: block;
padding: 10px 0 10px 0;
float: left;
}
p.socmed2 {
color: #FFF;
font-size: 1.2em;
width: 50%;
display: block;
padding-top: 3px;
float: left;
text-align: left;
}
p.socmed {
display: none;
}
p.visit {
display: none;
}
.footer p {
font-size: 0.8em;
}
.footer a {
text-decoration: none;
}
.footer a:hover {
text-decoration: none;
}
p.trich {
float: right;
margin-top: 35px;
font-size: 0.6em;
}
img.works {
width: calc(100% - 25px);
}
.cookie-bar p {
font-size: 0.7em;
}
.foot-contact {
width: 200px;
}
p.hc {
float: left;
font-size: 1em;
font-weight: 600;
color: #FFF;
clear: both;
margin-bottom: 15px;
}
img.cc {
float: right;
width: 60px;
margin-bottom: 20px;
margin-top: 0px;
}
.socbar-inner {
padding: 20px 10px 0px 10px;
}
}