@charset "utf-8";

/*
 SITE: FLETCHERS AUTOGLASS
 SITE URL: https://www.fletchersautoglass.com/
 FILE: fletchers.css
 AUTHOR: Davenport Website Designs
 AUTHOR URI: https://www.davenportwebsitedesigns.com/
 ! Copyright (c) 2018 - 2020 Gerald Martin Davenport
 ! 20200712
*/

/*=========== TABLE OF CONTENTS ===========
  0    DESTYLE
  1    ROOT
  2    GLOBAL
  3    HEADER
   3.1   LOGO CONTAINER
   3.2   HEADER NAV
   3.3   MENU-TOGGLE
   3.4   SOCIAL ICONS
  4    SECTION
   4.1   White
   4.2   Orange
   4.3   Black
   4.4   Yellow
  5    CONTENT WRAPPER
  6    ONE THIRD & ONE HALF COLUMN
  7    BUTTON
  8    FOOTER
=============*/

/*-------------------------------------
  0    DESTYLE v1.g1.00 | MIT License
       https://github.com/nicolas-cusan/destyle.css
--------------------------------------*/
* { box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } html { line-height: 1.15;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;font-family: sans-serif; } * { margin: 0; padding:0; } main { display: block; } h1, h2, h3, h4, h5, h6 { font-size: inherit;line-height: inherit;font-weight: inherit;margin: 0; } ul, ol { list-style: none; } dt { font-weight: bold; } dd { margin-left: 0; } hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid; color: inherit; } pre { font-family: monospace, monospace; font-size: inherit; } address { font-style: inherit; } a { background-color: transparent;text-decoration: none; color: inherit;transition: color 1s ease, background-color 1s ease; } abbr[title] { border-bottom: none;text-decoration: underline;text-decoration: underline dotted; } b, strong { font-weight: 700; } code, kbd, samp { font-family: monospace, monospace;font-size: inherit; } small { font-size: 80%; } sub, sup { font-size: 75%;line-height: 0;position: relative;vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } embed, object, iframe { border: 0; vertical-align: bottom; } button, input, optgroup, select, textarea { -webkit-appearance: none;-moz-appearance: none;vertical-align: middle;color: inherit;font: inherit;border: 0;background: transparent;outline: 0;border-radius: 0;text-align: inherit; } [type='checkbox'] { -webkit-appearance: checkbox; -moz-appearance: checkbox; } [type='radio'] { -webkit-appearance: radio; -moz-appearance: radio; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; } button[disabled], [type='button'][disabled], [type='reset'][disabled], [type='submit'][disabled] { cursor: default; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type='checkbox'], [type='radio'] { padding: 0; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } label[for] { cursor: pointer; } details { display: block; } summary { display: list-item; } table { border-collapse: collapse; border-spacing: 0; } caption { text-align: left; } td, th { vertical-align: top; } th { text-align: left; font-weight: 700; } template { display: none; } [hidden] { display: none; }



/*-------------------------------------
  1    ROOT
--------------------------------------*/
:root {
 --w0                  : rgb(255,255,255);
 --w1                  : rgb(248,248,248);
 --w4                  : rgb(224,224,224);
 --b12                 : rgb(96,96,96);
 --b11                 : rgb(88,88,88);
 --b10                 : rgb(80,80,80);
 --b9                  : rgb(72,72,72);
 --b8                  : rgb(64,64,64);
 --b7                  : rgb(56,56,56);
 --b6                  : rgb(48,48,48);
 --b5                  : rgb(40,40,40);
 --b4                  : rgb(32,32,32);
 --b3                  : rgb(24,24,24);
 --b2                  : rgb(16,16,16);
 --b1                  : rgb(8,8,8);
 --b0                  : rgb(0,0,0);
 --fletchers-red       : rgb(200,57,24);  /* 1e874a */
 --fletchers-gold      : rgb(214,166,80); /* f7be16 */
 --fletchers-yellow    : rgb(248,220,52);
 --fletchers-orange    : rgb(240,96,40);  /* f06028 */
 --fletchers-dark-o    : rgb(210,83,34);  /* f06028 */
}




/*-------------------------------------
  2    GLOBAL
--------------------------------------*/
body {
  width: 100%;
  font-family: 'Muli';
  color: var(--b0);
}
main {
  margin-top: 0;
}
@media (min-width: 768px) {
 main {
   margin-top: 14vw;
 }
}
@media (min-width: 901px) {
 main {
   margin-top: 10.5vw;
 }
}

@media (min-width: 1250px) {
 main {
   margin-top: 122px;
 }
}
.text-center { text-align: center; }
.right { float: right; }
.left { float: left; }
h1,h2,h3 { font-weight: 700; margin: 10px 0; }
h1 {
  font-size: 3em;
  line-height: 1.2em;
}
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
.no-list-style { list-style-type: none; }


/*-------------------------------------
  3    HEADER
--------------------------------------*/
header {
  position: fixed;
  top: 0px;
  min-height: 100px;
  z-index: 999;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
  background-color: var(--w0);
  border-bottom: 3px var(--fletchers-gold) solid;
  padding: 10px 4px;
}
@media only screen and (max-width: 766px) {
 header {
   max-height: 70px;
   top: -100px;
   opacity: 0;
   padding: 25px 0 6px 0;
  }
}
header .row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
header nav {
  transition-duration:.3s;
  transition-property:all;
  transition-timing-function:cubic-bezier(.7,1,.7,1);
  position: relative;
}

/*---
   3.1   LOGO CONTAINER
  ---   ---   ---   ---   ---   ---*/
.logo-container {
  width:16%;
  display: inline-block;
  vertical-align: middle;
}
.logo-container img {
  width:100%;
}

/*---
   3.2   HEADER NAV
  ---   ---   ---   ---   ---   ---*/
header nav {
  width: 80%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (max-width: 766px) {
 header nav {
 }
}

@media only screen and (max-width: 766px) {
 header nav ul {
   padding-top: 10px;
   text-align: center;
   width: 100%;
 }
}
header nav ul li {
  display: inline-block;
  line-height: 1.5;
  padding-left: 3px;
  padding-right: 3px;
}
@media only screen and (max-width: 766px) {
 header nav ul li {
 }
}
header nav ul li a {
  font-size:1em;
  color:var(--b0);
  line-height:1.6em;
  transition-duration:.3s;
  transition-property:all;
  transition-timing-function:cubic-bezier(.7,1,.7,1);
  padding: 4px;
  border-radius: 10px;
}

header nav ul li a:hover, header nav ul li a:active, header nav ul li a:focus, header nav ul li a.active {
  margin-bottom: 10px;
  background-color: var(--b0);
  padding: 4px;
  color: var(--w0);
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.sticky {
  background-color: rgba(255,255,255,0.93);
  opacity: 1;
  top: 0px;
}

header.sticky nav {
  display: none;
}

header.open-nav nav {
  display: inline-block;
}


/*---
   3.3   MENU-TOGGLE
  ---   ---   ---   ---   ---   ---*/
.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  z-index: 100;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
@media only screen and (max-width: 766px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}


.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #e8f380;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


/*---
   3.4   SOCIAL ICONS
  ---   ---   ---   ---   ---   ---*/
nav ul li.yelp a { color: rgba(213,4,5,0.5); }
nav ul li.yelp svg, nav ul li.facebook svg { width: 20px; }
nav ul li.yelp a:hover, nav ul li.yelp a:active, nav ul li.yelp a:focus { color: var(--w0); background-color: rgb(213,4,5);}

nav ul li.facebook a { color: rgba(59,89,152,0.7); }
nav ul li.facebook a:hover, nav ul li.facebook a:active, nav ul li.facebook a:focus, nav ul li:hover, nav ul li:active, nav ul li.yelp a:focus {
  border-radius: 0;
  background-color: transparent;
}
nav ul li.facebook a:hover, nav ul li.facebook a:active, nav ul li.facebook a:focus { color: rgb(59,89,152);}


.logo-container a span, header nav ul li a span {
  position: absolute;
  top: -1965px;
}



/*-------------------------------------
  4    SECTION
--------------------------------------*/
section { height: auto; padding: 40px 0; }
section:before { content: ""; display: block; margin-top: 20px; }
section:after { content: ""; display: block; margin-bottom: 20px; }
section ul {
  padding-left: 20px;
  -webkit-padding-start: 20px;
}
section p, section ul li { font-size: 1.2em; line-height:  1.5em; margin-bottom: 20px; }
section p img { width: 100%; }

/*---
   4.1   White
  ---   ---   ---   ---   ---   ---*/
.white { background-color: var(--w1); }
.white h1 { color: var(--fletchers-orange); }
.white .one_third_columns h2 { border-bottom: 1px solid var(--fletchers-yellow); }

/*---
   4.2   Orange
  ---   ---   ---   ---   ---   ---*/
.orange { background-color: var(--fletchers-orange); color: var(--b0); }
.orange p a { color: var(--b0); padding: 4px; border-radius: 4px; text-decoration: underline; }
.orange p a:hover, .orange p a:active, .orange p a:focus { background-color: var(--b0); color: var(--w0); }

/*---
   4.3   Black
  ---   ---   ---   ---   ---   ---*/
.black { background-color: var(--b0); color: var(--w0); }
.black p a { color: var(--fletchers-yellow); }
.black p a:hover, .orange p a:active, .orange p a:focus { color: var(--fletchers-orange); }

/*---
   4.4   Yellow
  ---   ---   ---   ---   ---   ---*/
.yellow { background-color: var(--fletchers-yellow); color: var(--b0); }
.yellow .one_third_columns h2 { border-bottom: 1px solid var(--w0); }

.orange h2, .yellow h2, .black h2, .white h2 { font-size: 2em; font-family: 'Voltaire', sans-serif; margin-bottom: 30px; }

.orange ul, .yellow ul, .black ul, .white ul { list-style: disc;}



/*-------------------------------------
  5    CONTENT WRAPPER
--------------------------------------*/
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 96%;
}


/*-------------------------------------
  6    ONE THIRD & ONE HALF COLUMN
--------------------------------------*/
.one-third-column, .two-third-column, .one-half-column { display: inline-block; vertical-align: top; }
.one-third-column { width: 32%; }
.two-third-column { width: 64%; }
.one-half-column { width: 49%; }
@media all and (max-width: 600px) {
 .one-third-column, .two-third-column, .one-half-column  { display: block; width: 100%; }
}
.padding { padding-right: 2%; }


/*-------------------------------------
  7    BUTTON
--------------------------------------*/
.button { background: rgba(255,255,255,0.5); border-radius: 10px; display: inline-block; vertical-align: middle; padding: 16px; min-width: 80px; max-width: 192px; border: 1px solid var(--w0);font-size: 1rem; text-align: center; outline: 0; line-height: 1; cursor: pointer; -webkit-transition: background 0.3s, color 0.3s, border 0.3s; transition: background 0.3s, color 0.3s, border 0.3s; margin-top: 20px; }
.button { color: var(--b0); }
.button:hover, .button:active, .button:focus { background: var(--w0); border-color: var(--b0); }



/*-------------------------------------
  8    FOOTER
--------------------------------------*/
footer { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: var(--w0); }
.footer-top {
  background-color: var(--b12);
  padding: 20px 0 0 0;
}
footer .column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; }
@media all and (max-width: 800px) {
   footer .column { display: block; vertical-align: initial; }
}
@media all and (max-width: 480px) {
   footer .column { display: block; vertical-align: initial; }
}

footer .column h2 { color: var(--fletchers-yellow); }
footer .column h2 a { color: var(--fletchers-yellow); background-color: transparent; padding: 4px; border-radius: 4px; }
footer .column h2 a:hover, footer .column h2 a:active, footer .column h2 a:focus { color: var(--w0); background-color: var(--b0); }
footer ul li { margin: 10px 0; }
footer .column ul li a { color: var(--fletchers-yellow); background-color: transparent; padding: 4px; border-radius: 4px; }
footer .column ul li a:hover, footer .column ul li a:active, footer .column ul li a:focus { color: var(--w0); background-color: var(--fletchers-orange); }
footer img {width: 100%;}
.footer-bottom {
  font-size: 1em;
  border-top: 2px solid var(--fletchers-orange);
  background-color: var(--b0);
  min-height: 60px;
  padding: 1em 0;
}
footer .bottom:after { display: table; content: " "; margin-bottom: 20px; }
@media all and (max-width: 631px) {
 .footer-bottom { line-height: initial; }
 .footer-bottom .left, .footer-bottom .right  { float: none; text-align: center; }
}

.footer-bottom a { color: var(--fletchers-yellow); text-decoration: none; font-weight: 700; }
.footer-bottom a:hover, .footer-bottom a:active, .footer-bottom a:focus { color: var(--w0); }
.column-1 { width: 44%;margin-right: 1%; }
.column-2 { width: 30%;margin-right: 1%; }
.column-3 { width: 22%; text-align: center; padding: 10px 0 20px 0; }
@media all and (max-width: 800px) {
   .column-1, .column-2, .column-3 { width: 50%; margin: 0 auto; }
}
@media all and (max-width: 480px) {
   .column-1, .column-2 { width: 100%; margin: 0 auto; }
}

.column-1 img.bbb { width: 20%; margin: 20px 0; }
.line { display: none; }
@media all and (max-width: 800px) {
   .line { display: block; margin: 20px 0; border-bottom: 1px solid var(--b0); }
}
.image-box img, .image-box svg {
  width: 100%;
}