@charset "utf-8";
/* CSS Document */

/******* Fonts ******/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/Montserrat-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Montserrat-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/RobotoMono-Regular.ttf') format('truetype');
}

/******* Reset  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none; }
.main-nav, .hide, .hidden {display: none; visibility: hidden;}
.show  {display:block;visibility: visible;}
html {scrollbar-gutter: both-edges ;}



/******* CORE  ******/
header .container, main .container, footer .container  {width:100%;}
body {min-height: 100vh;display: grid; grid-template-rows: auto 1fr auto; color:#2C3232;	margin:0; position: relative;
   letter-spacing: 0.1em; font-weight: 500;  line-height: 1.5; overflow-x: hidden; font-size: 0.8em;}
body, h2, h3, h4, .tel {font-family:"Montserrat", sans-serif; color: #2C3232;}
h1 {color: #2C3232; font-weight: 600;}
h1 {font-weight: 600; font-size: 1.6em; letter-spacing: -0.01em; margin-bottom: 10px;}
h2 {font-weight: 500; font-size: 1.6em;}
h3 {font-weight: 400; font-size: 1.2em;}
.tel {font-size: 2.3em; font-weight: 700; min-width: max-content;}
.center {text-align: center;}
.flex {display: grid;}
.contactflex {display: grid; }
.iconflex {display: flex; grid-gap:5px;}
#Directions, #Contact {align-content: start;}
.noscroll { overflow: hidden; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }




/********************* HEADER ************************/
header {border-bottom: 2px solid #aabcca;}
header .container {padding:5px 10px;margin-left: auto;  margin-right: auto; display: flex;  align-items: end; justify-content: space-between; align-items: center;}
header {display: grid; height:fit-content; min-height: 60px;}
.headleft {max-width: max-content; display:flex; align-items: center; line-height: normal;}
.headleft .headlogo {max-width: 100px;}
nav .headlogo {max-width: 200px;}
/******* NAV  ******/
nav {display:grid;}
.iconwhite:hover {background:  #C88855;}
.iconwhite {background: #FFFFFF; background: linear-gradient(0deg,rgba(235, 236, 236) 87%, rgb(148, 148, 150) 100%); }
.iconwhite{display: flex; align-items: center; justify-content: center;  border: 1px solid #32332f; border-radius: 50%; overflow: hidden;
    padding: 0px;  object-fit: contain; height: 40px; width:40px;  position: absolute; top: 10px; right: 10px; cursor: pointer;}
nav img, a.button img { -webkit-filter: drop-shadow(1px 1px 4px #222);
  filter: drop-shadow(1px 1px 4px #222);}
.main-nav a, .burger-nav .mainlinks a,.burger-nav .otherlinks a, a.button { padding: 11px 15px; border: 2px solid #aabcca;   border-radius: 20%;
  color: #FFFFFF; text-align: center;  text-transform: uppercase;  font-weight: 600;   font-size: 0.8em; text-decoration:none;
  max-width: 150px;display: flex;  align-items: center;  justify-content: center;   transition: all 0.5s ease;}
.close-menu-btn:hover,  button.burger-menu:hover { background-color:  #C88855;}
button.burger-menu:hover .burger-line {background:  azure;}
.close-menu-btn:hover svg path {fill: rgb(240, 255, 255);}
.close-menu-btn{width: 40px;  height: 40px;}
a.button:hover,  .burger-nav .mainlinks a:hover,.burger-nav .otherlinks a:hover, .OrangeButton:hover{ transition: all 0.5s ease;
    border-radius: 50%; color:  azure;  background-color: #003399; border: 2px solid #fff; cursor: pointer; }
.burger-nav .mainlinks a img,.burger-nav .otherlinks a img {max-height: 2em;}
.burger-nav .mainlinks { padding: 0 0 20px 0; margin: 60px 0 20px 0;border-bottom: 2px solid azure;  margin-bottom: 30px;}
nav a, a.button, .OrangeButton{text-shadow: 1px 1px 4px #000;}
 .burger-nav .mainlinks a,.burger-nav .otherlinks a, .main-nav a, a.button{box-shadow: inset 0px 0px 3px #000;}
.burger-nav.active {right: 0; opacity: 1; visibility: visible; }
 .burger-nav .mainlinks a,.burger-nav .otherlinks a  {font-size: 1.2em; background:  #C88855; align-items: center;display: flex; grid-gap:5px;box-shadow: 5px 5px 6px #000; }
 .burger-nav .mainlinks a,.burger-nav .otherlinks a  {margin: 0 0 20px 0;padding: 15px 20px 15px 10px; max-width: none; }
.burger-nav a.withicon, a.button.withicon{padding:11px 20px 11px 10px;}
.burger-menu {display: flex !important;flex-direction: column;
  cursor: pointer;  padding: 8px;  margin: 0; width: 40px;  height: 40px;
  justify-content: space-between;  align-self: flex-end; order: 2;
  border: 2px solid #32332f; border-radius: 50%;}
.burger-line {width: 100%;  height: 4px;background: #32332f;  border-radius: 2px;transition: all 0.6s ease;}
.burger-menu.active .burger-line:nth-child(1) {transform: rotate(360deg);}
.burger-menu.active .burger-line:nth-child(2) {transform: rotate(-360deg);}
.burger-menu.active .burger-line:nth-child(3) {transform: rotate(360deg);}
.burger-nav {width: 100vw; right: -100%;padding: 18px 20px;
      position: fixed !important; top: 0;  height: 100vh;
      box-shadow: -5px 0 15px rgba(50, 51, 47, 0.2); border-left: 2px solid #aabcca;
      flex-direction: column; justify-content: flex-start;
      grid-template-columns: none !important; grid-column-gap: 0;
      transition: right 0.6s ease 0.5s, opacity 0.6s ease 0.5s, visibility 0.6s ease 0.5s; z-index: 50; opacity: 0;
      background-color: #2C3232;}
.navlogo {width: 60%; margin:0 0 20px 0; display: block;}
/********************* HEADER END ************************/



/********************* MAIN ************************/
main .container, footer .container  {margin-left: auto;  margin-right: auto;  padding:20px 10px 30px 10px; align-content: start; }
main {display: flex; flex-direction: column; justify-content: space-between;}
main.enginebg {background-image: url(/static/images/oilytarmac-sm.avif); background-size:cover !important; background-position: center; background-repeat:  no-repeat;}
.light {background:  #aabcca; background: linear-gradient(90deg, rgba(235,235,236,0.9) 20%, rgba(235,235,236,0.9) 100%);}
.dark {background:  #2C3232; background: linear-gradient(90deg, rgba(44,50,50,0.7) 20%, rgba(44,50,50,0.7) 100%);}
.twocolumns {display:grid;  grid-gap:25px;} 
footer .twocolumns {grid-gap:5px; }
section {margin: 0 0 25px 0; display: grid; }
article {padding:0 0 10px 0;}
article p {margin:0 0 10px 0;;}
article:last-child{border-bottom: none;}
article a {text-decoration: underline; font-weight: 600;}
section.framedarts article {border: 1px solid #2C3232; padding:15px 15px 30px 15px; background-color: #e7e5de;box-shadow:0 7px 9px -7px #2C3232; display: grid; border-radius: 10px; }
section.framedarts article h2 {margin-bottom: 10px;}
.top {border-top-left-radius: 20px; border-top-right-radius: 20px;}
.curvebottom {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.middle {padding: 10px; background-color: #e7e5de;}
.enginetop p, .enginetop h2 {padding: 0 10px;margin: 10px 0px;}
.enginetop h2 {font-size: 1.3em; font-weight: 600;}
.ranger {background-color: #32332f; background-image: url(/static/images/ranger.avif); background-size:cover !important; background-position: center; background-repeat:  no-repeat; min-width: 100%; min-height: 100px;
margin:0 0;border-left: 1px solid  #aabcca;border-right: 1px solid  #aabcca; cursor: pointer; }
.map {background-color: #32332f; background-image: url(/static/images/transitmap.avif); background-size:cover !important; background-position: center; background-repeat:  no-repeat; min-height: 200px;
margin:0 0;border-left: 1px solid  #aabcca;border-right: 1px solid  #aabcca; cursor: pointer; }
.ImageGroup {grid-template-columns: repeat( auto-fit, minmax(100%, 1fr) ); display: flex; grid-gap:0px; align-items: end; }
.directions {grid-area: 2 / 1;}
.smallshow {display: block;}
img.rounded {border-radius: 6px; overflow: hidden; }
.DescribedImage {border-radius: 6px; border: 2px solid  azure; font-size: small; color: azure; padding:2px;margin-top: 20px; background-color: #2C3232;}
.Image {border-radius: 6px; border: 2px solid #2C3232; overflow: hidden; margin-bottom: 10px;width: 100%;}
.Image img {height: 100%;}
.ImgDesc{ font-weight: 400; padding:0 10px 0 10px; min-height: 3em;}
.titlebox {background-color: #32332f; color: #fff; padding:5px 0 5px 10px; border-radius: 5px;}
/********************* MAIN END ************************/





/********************* OVERLAYS ************************/
.overlay-container {z-index: 15; left:0; width: 100%; height:100vh; padding:20px; display: flex;
position: fixed; background: rgba(44,50,50,0.9);overflow-y: auto; text-align: center; justify-content: center;align-items:flex-start; inset: 0; }
.overlay-container .flex {flex-direction: column;}
.DescribedImage {cursor: pointer;}
.overlay-container img {border:2px solid #fff;border-radius: 20px; overflow: hidden;margin: auto; cursor: pointer;}
.overlay-container .ImgDesc{color: #fff; text-align: center; }
.overlay-container img.logo {border: none; max-width: 150px;}

/********************* CONTACT ************************/
.coin {width: 45px; height:45px;  border: 2px solid #fff;}
.fbblue {background-color: #0866ff;}
.whappgreen {background-color: darkgreen;}
.mapred {background-color:darkred;}
.contact .flex {grid-gap:5px; }


.coin {display: flex;border-radius: 25%;padding:2px; align-items: center; justify-content: center; transition: all 0.5s ease-out !important; }
.coin:hover { border-radius: 100% !important; box-shadow: 3px 3px 5px #555450; transition: all 0.5s ease-out !important; }



/********************* FORMS ************************/
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select,button
{display: block; width: 100%;border:1px solid #2C3232; border-radius: 6px; margin:0px 8px 0px 0;padding:8px 8px 8px 10px;
  box-sizing: border-box;border-radius: 5px 5px 5px 5px;margin-left :0; color:#192733; -webkit-appearance: none;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{background-color: #ffffff;}

input:-webkit-autofill{background-color: #ffffff;}
input:autofill {background-color: #ffffff;}


input[type="radio"], input[type="checkbox"]  {accent-color: #003399;}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"]:focus,textarea:focus,select:focus,button:focus{outline:none; border: 2px solid #003399;}
input[type="text"]:disabled, input[type="email"]:disabled  {background-color: #B3C5CD;}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="password"]:hover,select:hover,textarea:hover,button:hover{box-shadow:0 7px 9px -7px #2C3232;}
input[type="button"],input[type="submit"]{ text-transform: uppercase; }
fieldset { margin:0 0 20px 0; display: grid; grid-template-rows: auto; border: none; grid-gap:8px;}
legend {font-weight: 600; font-size: 1em; padding: 0 20px;}
label {width: 100%; padding: 3px 0px;}
label, label strong, label b {display: block;}
.formleftlabel {display: grid; grid-template-columns: 1fr; grid-gap: 8px; }
.formleftlabel label {padding: 3px 10px 3px 0; }
.formerror, .formleftlabel label { text-align: left; padding: 0 0 0 10px; }
.formleftlabel p.formerror{margin: 0;}
.formerror {color: darkred; font-weight: 600; display: flex; align-content: center; align-items: center; grid-gap:10px; padding:10px 5px;}
.formerror img {max-height: 15px;}
#g-recaptcha-response{   margin: -78px 0 0 0 !important; height: 76px !important;z-index: -999999; opacity: 0;display: block !important;  position: absolute;  }
.g_recaptcha, #id_captcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; width:200px;}
#rc-imageselect {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; }
a.button  {background:  #C88855; align-items: center;display: flex; font-size: 1.2em; min-width: max-content; max-width: none; box-shadow: 5px 5px 6px #000; grid-gap:5px;}
a.button  {padding: 14px 10px 14px 10px; }
.twobuttons { display:grid;  grid-gap:12px; }
.OrangeButton {background:#C88855; border:2px solid#2C3232; border-radius: 20%;  color:  azure; padding:10px 30px; font-size: 1em; min-width: max-content;
    letter-spacing: 0.06em;}





/********************* FOOTER ************************/
header, footer {background-color: #32332f; background-image: url(/static/images/oilytarmac-mob-header.avif); background-size:cover !important; background-position: center; background-repeat:  no-repeat;  color: azure;}
footer {text-shadow: 3px 3px 10px #000; font-weight: 500;}
footer .container {padding: 10px 10px;}
footer {color: azure; overflow: hidden; }
footer a{color: azure;}
footer .socials img {width:30px;}
.actionblock {background-color: #2C3232; padding: 15px 20px; color: #fff; text-align: center; display: flex; grid-gap:11px; flex-direction: column; border-top: 1px solid #aabcca;border-bottom: 1px solid #aabcca;}
.actionblock p, .actionblock h1, .actionblock .tel, .actionblock h2, .actionblock h3 {color: #fff; }
.smokeup {box-shadow: 5px -30px 160px #1b1f1f;/*#aabcca;*/}






/********************* ANIMATIONS ************************/
a.button.withicon:hover img.shakeH, .formerror .shakeH, .coinring.shakeH {-webkit-animation: shakeH 0.35s; animation: shakeH 0.35s;}
.scale-up-top {-webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.scale-down-top {-webkit-animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.animate-up, .animate-left, .animate-right {opacity: 0;}
.animate-up.animate-in {-webkit-animation: fade-in-up 0.8s ease-out forwards; animation: fade-in-up 0.8s ease-out forwards;}
.animate-left.animate-in {-webkit-animation: fade-in-left 0.8s ease-out forwards; animation: fade-in-left 0.8s ease-out forwards;}
.animate-right.animate-in {-webkit-animation: fade-in-right 0.8s ease-out forwards; animation: fade-in-right 0.8s ease-out forwards;}
/* Stagger delays for sequential animations */
.stagger-1.animate-in, .delay01 { -webkit-animation-delay: 0.1s;animation-delay: 0.1s !important; }
.stagger-2.animate-in, .delay02 { -webkit-animation-delay: 0.2s;animation-delay: 0.2s !important; }
.stagger-3.animate-in, .delay03 { -webkit-animation-delay: 0.3s;animation-delay: 0.3s !important; }
.stagger-4.animate-in, .delay04 { -webkit-animation-delay: 0.4s;animation-delay: 0.4s !important; }
.stagger-5.animate-in, .delay05 { -webkit-animation-delay: 0.5s;animation-delay: 0.5s !important; }
.stagger-6.animate-in, .delay06 { -webkit-animation-delay: 0.6s;animation-delay: 0.6s !important; }
.coin.roll-in-right{-webkit-animation: roll-in-right 1.5s ease-out both;animation: roll-in-right 1.5s ease-out both;}
/**Necessary delays on the INDEX page animations **/
.move{animation:fade-in-up .6s ease-out forwards; opacity: 0;}
.delay7 {animation-delay: 7s !important; }
.delay74 {animation-delay: 7.4s !important; }
.delay75 {animation-delay: 7.5s !important; }
@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in-left{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes fade-in-right{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@-webkit-keyframes shakeH {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  25% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  75% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  100% { -webkit-transform: translateX(0);  transform: translateX(0); }}
@keyframes shakeH {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  25% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  75% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  100% { -webkit-transform: translateX(0);  transform: translateX(0); }}
@-webkit-keyframes roll-in-right {
  0% {-webkit-transform: translateX(800px) rotate(540deg); transform: translateX(800px) rotate(540deg);opacity: 0; border-radius: 100%;}
  90% {border-radius: 100%;}
  100% {-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);opacity: 1;border-radius: 25%;}}
@keyframes roll-in-right {
  0% {-webkit-transform: translateX(800px) rotate(540deg);transform: translateX(800px) rotate(540deg);opacity: 0;border-radius: 100%;}
  90% {border-radius: 100%;}
  100% {-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);opacity: 1;border-radius: 25%;}}
@-webkit-keyframes scale-up-top {
  0%    {-webkit-transform: scale(0.5);transform: scale(0.5);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 0;}
  100%  {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 1;}}
@keyframes scale-up-top {
  0%    {-webkit-transform: scale(0.5); transform: scale(0.5);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0;}
  100%  {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 1;}}
@-webkit-keyframes scale-down-top {
  0%    {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 1;}
  100%  {-webkit-transform: scale(0.1); transform: scale(0.1);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 0;}}
@keyframes scale-down-top {
  0%    {-webkit-transform: scale(1); transform: scale(1);
        -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;opacity: 1;}
  100% {-webkit-transform: scale(0.1); transform: scale(0.1);
        -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0;}}
/********************* ANIMATIONS END ************************/






/*** GOXHILL IT BRANDING ****/
  .BrApps {display:grid; justify-content: start; align-items: start; min-width: max-content; text-align: left; position: relative; padding-right: 60px; max-height: 20px;}
  .spark {position:relative; animation: sparkLoop 40s ease-in-out infinite; z-index: 12; }
  .spark {width: 55px; top:-33px; left:100%;}
@keyframes sparkLoop {
  0% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
  9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
  11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
  50% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  100% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}}
@-webkit-keyframes sparkLoop {
  0% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
  9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
  11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
  50% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
  100% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}}
/*** GOXHILL IT BRANDING END ****/






/************** MEDIA QUERYS  ********************/
@media (min-width: 480px)
{
  .flip-horizontal-bck {width:80vw;}
  .webuildengines p, h1 {font-size: 2.8em !important; }
  .webuildengines {padding:1em 2em !important; }
  .burger-nav {right: -300px; width: 280px; padding: 20px 20px 20px 20px; }
  .burger-nav a {font-size: 1em;}

 
  .middle {padding: 20px;}
  article {padding:0px 0;}
  article p {margin:0 0 5px 0;}
  .contactflex {display: flex; justify-content: space-between; grid-gap:5px;}
}

@media (min-width: 541px) /* Escape Surface Duo */
{
 a.button  {padding: 15px 50px 15px 50px; font-size: 1em;}  
   .twobuttons { display:flex; justify-content: center; align-content: center;grid-gap:20px; } 
}

@media (min-width: 767px) /* Include ipad mini */
{
  main .container{padding:30px 30px 30px 30px;}
  header, footer {background-color: #32332f; background-image: url(/static/images/oilytarmac-sm.avif); background-size:cover !important; background-position: center; background-repeat:  no-repeat;  color: azure;}
  main.homepagebg {background: url(/static/images/van-wrap-edit.avif) no-repeat;background-size:cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between;}
}

@media (min-width: 900px)
{
  
  .flip-horizontal-bck {width:60vw !important;}
  .webuildengines {padding:1.5em 3em !important;}
  .webuildengines p, .webuildengines h1 {font-size: 4em !important;}
  .burger-nav {display: none!important; visibility: hidden; }
  .burger-menu {display: none!important;}
  .main-nav { display: grid; visibility:visible; grid-template-columns: 1fr 1fr 1fr ; grid-column-gap: 10px;  justify-self: right; width:max-content; }
  nav { justify-content: right; display: grid;}
  .main-nav a:hover, a.button:hover, .main-nav a.active, a.button.active{border-radius: 50%; color:  azure;  background-color: #003399; border: 2px solid #fff; }
  .main-nav a, a.button { background:   #C88855;min-width: max-content;max-width: 200px;display: flex;  align-items: center;  justify-content: center;   transition: all 0.5s ease; grid-gap:5px; box-shadow: 5px 5px 6px #000;}
  .main-nav a.withicon, a.button.withicon{padding:5px 25px 5px 15px;}
  header .container {display: grid; grid-template-columns: auto auto; align-items: center;}
  .flex {display: flex;}
  .headleft img {max-width: 180px;}
  a.button  {padding: 22px 50px 22px 50px !important;font-size: 1.2em;}
  .twocolumns {display:grid; grid-template-columns: 1fr 1fr;}
  .BrApps {display:grid; justify-content: flex-end; align-items: end; min-width: max-content; text-align: right; }
  .directions {grid-area: 1 / 1;}
  .smallshow {display: none;}
  .twocolumns {grid-gap:30px; }
  section {margin: 0 0 30px 0; }
  section.framedarts article {padding:20px 20px 40px 20px;}
  .ranger {min-width: 300px; min-height: 300px;}
  .imgleft {display: grid; grid-template-columns: 1fr 2fr;}
  .actionblock {padding: 30px 20px;}
  .homepagebg .container {padding:50px 10px 30px 10px;} /** height 100% on desktop (centers)**/
  .headleft .headlogo {max-width: 200px;}
}

@media (min-width: 1281px) /*1025 Escapes Nest Hub, 1281 escapes nest hub max*/
{
   main .container{margin-top: 20px;  margin-bottom : 0px;}
  section.framedarts {grid-gap:50px;}
  section {margin: 0 0 50px 0; }
  .flip-horizontal-bck {width:50vw !important;}
  header .container, main .container, footer .container  {width:80%;}
  header, footer {background: url(/static/images/oilytarmac-sm.avif)} /** bigger image ***/
  section.framedarts article {padding:20px 30px 30px 30px;}
}
/************** MEDIA QUERYS END  ********************/