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; } }