*--------------------------------------Fonts-------------------------------------------------*/
  .pt-sans-regular {
  font-family: "PT Sans", serif;
  font-weight: 400;
  font-style: normal;
}
.pt-sans-bold {
  font-family: "PT Sans", serif;
  font-weight: 700;
  font-style: normal;
}

/*---------------------------------------Typographic Scale------------------------------------------------*/
/* Scale implemented is golden section 1:1.618  16px is base 1em*/
/*https://www.modularscale.com/?16&px&1.618*/
body {
  font-size: 90%;
  font-family: "PT Sans", serif;
}
h1 {
  font-size: 3.437em; /*55 /16 */
  line-height: 1em; /* 55 / 55 */
  margin: 1em 0 0 0; /* 55 / 55 */
  margin-top: 0.25em; /* 4 / 16 */
  font-style: italic;
  text-align: center;
}
h2 {
  font-size: 1.5625em; /* 25 / 16 */
  font-style: italic;
  margin: 0.65em 0; /* 16 / 25 */
  text-align: center;
}
h3 {
  font-size: 1em; /* 16 / 16 */
  font-style: italic;
  margin: 1em 0; /* 16 / 16 */
  text-align: center;
}
p {
  font-size: 1em; /* 16 / 16 */
  margin: 1.562em 0; /* 25 / 16 */
  text-align: center;
}
.menufont {
  font-size: 1em; /* 16 / 16 */
  font-style: italic;
}
.fanfoot {
  /*-------------------------------Calc() Example-----------------------------------------*/
  font-size: calc(100% + 4px); /* 16 + 4 */
}
nav a:link {
  font-size: 1em; /* 16 / 16 */
}
footer a:link {
  font-size: 1em; /* 16 / 16 */
}
/*-----------------------------Jquery Dropdown Menu----------------------------------*/
.dropdown-menu {
  display: none;
  color: black;
  font-size: small;
  /*margin-top: 20px;*/
}
.mfont {
  font-size: small;
  color: #f8cc92;
}
#message {
  display: none;
}
/*------------------------------------------Website Grid Values----------------------------------------------*/
.grid_container {
  display: grid;
  flex-direction: row;
  grid-template-areas:
    "header header header header"
    "nav main main main"
    "nav footer footer footer";
}
.item1_header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}
.item2_nav {
  grid-area: nav;
}
.item3_main {
  grid-area: main;
  background-color: #000000;
  color: white;
}
.item4_footer {
  grid-area: footer;
}
/*--------------------------------------Header-------------------------------------------------*/
.header-container {
  position: relative;
  /*height: 225px; /* Set your desired height */
  height: 250px; /* Set your desired height */
  overflow: hidden; /* Clips any video overflow */
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  object-fit: cover; /* Keeps video aspect ratio while filling area */
  z-index: -1; /* Places video behind the text */
}

.header-content {
  position: relative; /* Ensures text stays above the video */
  color: white;
  text-align: center;
  margin-top: 15px;
}
/*header {
  background-image: url(../Images/vid.mp4);
  height: 225px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0;
}*/
.logo {
  /*width: 275px;
  height: 125px;*/
  width: 275px;
  height: 175px;
}

.tot {
  font-size: 1em; /* 20 / 16 */
  color: white;
  font-style: italic;
  font-weight: 400;
  background: #0c4447;
  text-align: center;
  /* margin-top: -30px;
  margin-left: 3.25em;*/
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
/*.headercontainer {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100px;
}*/

/*---------------------------------------Nav Bar-----------------------------------------------------*/
.newcolor {
  color: black;
}
.daycolor {
  padding-right: 200px;
}
.daycolorb {
  padding-left: 25px;
}
nav {
  background: #14772b;
  width: 90px;
}
nav a:link {
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-right: 10%;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 400;
  font-style: italic;
  font-family: "Elephant";
}
nav a:visited {
  color: white;
  border-color: #000000;
  text-decoration: underline;
}
.bottom {
  padding-bottom: 15px;
}
.bottompad {
  margin-bottom: 20px;
}

/*---------------------------------------------------Flexbox container for nav bar----------------------------------------*/
nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  list-style-type: none;
  justify-content: flex-start;
  align-items: center;
}

.fixed {
  position: fixed;
  top: 5;
  padding-bottom: 50px;
}
.lnav {
  margin-top: 50px;
}
.top {
  padding-top: 50%;
}
.photoDD {
  display: block;
  margin: auto;
  align-items: center;
  width: 35px;
  margin-left: 3px;
  margin-right: 3px;
}

/*------------------------------------------------------main------------------------------------------*/
.homeWD {
  border-radius: 10px;
}
.sage {
  display: none;
}

.h1space {
  margin-top: 3px;
}
.birth {
  text-align: center;
  /*font: size 15px;*/
}
.linkcolor {
  color: orange;
  text-decoration-color: orange;
}
a {
  text-decoration: underline;
  text-decoration-color: orange; /* Sets the underline color */
  color: white; /* Sets the text color */
}
.htwo {
  background: #14772b;
  border: solid black;
  color: white;
  border-radius: 0px;
  margin-left: 35%;
  margin-right: 35%;
}
.align {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
}
.gapZ {
  margin-top: 44px;
  margin-bottom: 45px;
}
.alignA {
  margin-top: 2px;
  font-size: x-large;
}
h2 {
  text-align: center;
}
h3 {
  text-align: center;
}
main {
  background: #faf2e6;
  margin-bottom: -2px;
}
.fanfoot {
  font-style: normal;
  background: #14772b;
  color: white;
}
.fanfootb {
  margin-bottom: 1.5em;
}
article img {
  margin-left: 43%;
  padding-top: 2%;
  border-radius: 10px;
}
.pageHeader {
  margin-top: 40px;
  margin-bottom: 30px;
  font-size: 2.75em;
}
.colorA {
  color: #0c4447;
  font-weight: bolder;
}
/*----------------Database link to MikeFelix example----------------*/
.colorAA {
  width: 100px;
  height: 100px;
}
/*---------------------------- Banner and video ----------------------------------*/
.tibbs {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 80%;
  height: 200px;
}
.video-container {
  align-items: center;
  display: block;
  text-align: center;
}
/*-------------------------------------Works Pages IMG---------------------------------------*/
.visible {
  visibility: hidden;
}
/*---------------Controls Image links on Portfolio page links---------------------*/
.photoLink {
  display: block;
  margin: auto;
  align-items: center;
  width: 100px;
  height: 45px;
}
.photoLinkB {
  display: block;
  margin: auto;
  align-items: center;
  width: 85px;
  height: 55px;
}
.photoLinkE {
  display: block;
  margin: auto;
  align-items: center;
  width: 85px;
  height: 85px;
}
/*-----------------------------*/
.photoC {
  border-radius: 6px;
  width: 200px;
  height: 140px;
  text-align: center;
}
.photoA {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 325px;
  height: 325px;
}
.photoAZZ {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 225px;
  height: 225px;
}
/*.photoZAY {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 275px;
  height: 275px;
}*/
.photoAA {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 500px;
  height: 230px;
}
.photoAB {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 425px;
  height: 175px;
}
.photoZAZ {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 235px;
  height: 235px;
}
.photoDAD {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 400px;
  height: 225px;
}
.photoD {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 150px;
  height: 100px;
}
.photoWW {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 425px;
  height: 425px;
}

/*----------------------------Database.php ---------------------------------*/
/*.photoLinkB {
  display: block;
  margin: auto;
  align-items: center;
  width: 175px;
  height: 150px;
}*/
.moveA {
  margin-top: -5px;
}
/*--------Img restore------------*/
.photoLinkA {
  display: block;
  margin: auto;
  align-items: center;
  width: 60px;
  height: 50px;
}
.photoLinkZ {
  display: block;
  margin: auto;
  align-items: center;
  width: 175px;
  height: 150px;
}

/*-------------------------------------Brand.php IMG---------------------------------------*/
.photoZ {
  display: block;
  margin: auto;
  align-items: center;
  width: 425px;
  height: 1800px;
  /*width: 700px;
  height: 2700px;*/
  text-align: center;
}
/*.photoY {
  display: block;
  margin: auto;
  align-items: center;
  width: 700px;
  height: 4000px;
}
.photoX {
  display: block;
  margin: auto;
  align-items: center;
  width: 700px;
  height: 4000px;
}
.photoW {
  display: block;
  margin: auto;
  align-items: center;
  width: 700px;
  height: 1900px;
}*/
.photoV {
  width: 425px;
  height: 900px;
  /*width: 925px;
  height: 2600px;*/
}
.photoVA {
  width: 825px;
  height: 2300px;
}
.photoVV {
  width: 325px;
  height: 1700px;
}
.photoZZ {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 225px;
  height: 225px;
}
/*----------------------Index.php photo of Rick-----------------------------*/
.photoZZYY {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 190px;
  height: 190px;
}
.photoXX {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
  width: 400px;
  height: 450px;
}
/*--------------------------------------Form Styles-------------------------------------------------*/
.border {
  background: #14772b;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 50px;
}
.border2 {
  background: #f8cc92;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}
.warning {
  color: red;
}
.warningb {
  color: red;
  font-size: x-large;
}
legend {
  border: solid black;
  background: white;
}

/*------------------------------------------Menu Grid Values----------------------------------------------*/
.container {
  background: #f8cc92;
  display: grid;
  /*grid-template-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 230px 230px 230px 230px;
  row-gap: 2px;
  column-gap: 2px;
  /*gap: 2px;*/
  justify-items: stretch;
  align-items: stretch;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  width: 97%;
}
.side {
  grid-template-rows: 225px 235px 225px;
}
.item {
  text-align: center;
  font-family: sans-serif;
  border: 1px solid black;
  padding-bottom: 10px;
}
.inside {
  background: #14772b;
  margin-left: 50px;
  margin-right: 50px;
  border: solid black;
  border-radius: 0px;
  border-width: 2px;
}
.action {
  color: black;
  background: #ebc000;
  border: solid black;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 50px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-family: cursive;
  font-weight: bolder;
}
.decor {
  text-decoration: none;
}
.menu {
  background: #14772b;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 50px;
}
.menu2 {
  background: #f8cc92;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 10px;
}
.bundles {
  grid-template-rows: 240px 240px;
}
.photo {
  border-radius: 6px;
  padding-top: 33px;
  width: 215px;
  height: 165px;
  /*place-content: center;*/
}
.menufont {
  color: #000000;
  font-size: small;
}
.mock1 {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
}

/*----------------------------------------------------Footer-------------------------------------------*/
footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  justify-content: center;
  align-items: center;
  background: black;
  color: white;
  text-align: center;
}
/*-------------------------------------Flexbox container for footer -----------------------------------*/
section {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  justify-content: space-evenly;
  align-items: center;
  margin: 6px 35vw -2px 35vw;
}

/*--------------------------------------------@Media Queries------------------------------------------------------*/

/*-------------------------------------------------Tablet @media-------------------------------------------------*/
/*--------------------------------Menu Grid @media------------------------------------*/
/*@media (max-width: 1100px) {
  section {
    margin: 6px 40% -2px 40%;
  }
}*/
@media (max-width: 975px) {
  .menu {
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media (max-width: 911px) {
  .rform {
    margin-left: 1px;
    margin-right: 1px;
  }
}
@media (max-width: 895px) {
  section {
    margin: 6px 32vw -2px 32vw;
  }
  .photoW,
  .photoX,
  .photoY,
  .photoZ {
    width: 500px;
  }
}
@media (max-width: 835px) {
  .menu {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/*-------------------------------Menu Grid @media------------------------------------*/
@media (max-width: 796px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 230px 225px 225px 225px 225px 225px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
  }
  .side {
    grid-template-rows: 230px 225px 225px 225px 225px;
  }
  .bundles {
    grid-template-rows: 225px 225px 225px;
  }
  /*------------------------Typographic Scale @media---------------------------------------*/
  .fanfoot {
    /*-------------------------------Calc() Example-----------------------------------------*/
    font-size: calc(100% + 2px);
  }
}
/*------------------------------Menu @media----------------------------------------*/
@media (max-width: 741px) {
  article img {
    width: 20%;
    height: 20%;
    margin-left: 40%;
    margin-top: 2%;
  }
  .photoAA {
    width: 300px;
    height: 150px;
  }
}
@media (max-width: 695px) {
  /*------------------------Typographic Scale @media---------------------------------------*/
  .fanfoot {
    font-size: 100%;
    /* font-size: 0.938em;*/ /* 15 / 16 */
    margin-left: 25%;
    margin-right: 25%;
  }
  /*------------------------------Social Media @media----------------------------------------*/
  section {
    margin: 6px 27vw -2px 27vw;
  }
  /*------------------------------Header @media-------------------------------------*/
  .pageHeader {
    font-size: 2.812em; /* 45 / 16 */
  }
  .inside {
    margin-left: 60px;
    margin-right: 60px;
  }
  .photoW,
  .photoX,
  .photoY,
  .photoZ {
    width: 400px;
  }
  .photoAB {
    width: 250px;
    height: 125px;
  }
  photoA {
    width: 100px;
    height: 100px;
  }
  .photoDAD {
    width: 350px;
    height: 225px;
  }
}

/*---------------------------------------------Smartphone @media---------------------------------------------------------*/
/*----------------------------Menu Grid @media-----------------------------------*/
@media (max-width: 628px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 230px 225px 225px 225px 225px 225px 230px 225px 225px 225px 225px 225px;
  }
  .side {
    grid-template-rows: 230px 225px 225px 225px 225px 230px 225px 225px 225px;
  }
  .bundles {
    grid-template-rows: 225px 225px 225px 225px 225px 225px;
  }
}
/*------------------------Typographic Scale @media---------------------------------------*/
@media (max-width: 615px) {
  .htwo {
    font-size: 1.25em; /* 20 / 16 */
  }
  .fanfoot {
    /*-------------------------------Calc() Example-----------------------------------------*/
    font-size: calc(100% - 1px);
    margin-left: 25%;
    margin-right: 25%;
  }
  /*----------------------------------Works Pages----------------------------------------*/
  .photoWW {
    display: block;
    margin: auto;
    align-items: center;
    padding-right: 2%;
    width: 300px;
    height: 300px;
  }
  .photoV,
  .photoVV {
    width: 300px;
  }
  .photoXX {
    width: 300px;
    height: 350px;
  }
  .photoW,
  .photoX,
  .photoY,
  .photoZ {
    width: 300px;
  }
}

/*---------------------------------------------Flexbox Nav @media----------------------------------------*/
@media (max-width: 525px) {
  ul {
    flex-direction: column;
    align-items: center;
    padding-right: 20%;
  }
  li {
    padding: 10px;
    margin-left: 22%;
  }
  .grid_container {
    display: grid;
    flex-direction: row;
    grid-template-areas:
      "header header header header"
      "nav main main main"
      "nav footer footer footer";
  }
  .align {
    font-size: smaller;
    margin-left: 3%;
    margin-right: 3%;
  }
  .photoAA {
    width: 250px;
    height: 100px;
  }
  /*--------------------------------------------Works pages-------------------------------------------*/

  /*---------------------------------------------Flexbox Footer @media----------------------------------------*/
  section {
    margin: 6px 24vw -2px 36vw;
  }

  /*----------------------------------Menu @media--------------------------------*/
  .menu2 {
    margin-left: 0.5px;
    margin-right: 0.5px;
  }
  .menu {
    margin-left: 0.05px;
    margin-right: 0.5px;
  }
  .logo {
    margin-left: 4.75em;
    margin-top: 5%;
    margin-bottom: 10%;
    width: 200px;
    height: 100px;
  }
  .tot {
    font-size: 0.65em; /* 20 / 16 */
    color: white;
    font-style: italic;
    font-weight: 400;
    /*text-align: center;*/
    background: #0c4447;
    margin-top: -30px;
    margin-left: 3.25em;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/*----------------------------------Header @media-------------------------------*/
@media (max-width: 524px) {
  header {
    /* background-image: url(../Images/truckscSMR.png);*/
    padding-top: 5px;
    padding-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: -79px;
    background-repeat: no-repeat;
    height: 145px;
  }
  .pageHeader {
    font-size: 2.25em;
  }
  .photoZZ {
    width: 150px;
    height: 150px;
  }

  .htwo {
    margin-left: 25%;
    margin-right: 25%;
    font-size: 0.85em; /* 16 / 16 */
  }
  /*---------------------Site Grid values-----------------------------*/
  /*.item2_nav {
    grid-area: nav;
    width: 95%;
  }*/
  .item3_main {
    grid-area: main;
    margin-left: -3.7%;
    width: 103.7%;
  }
  .bottom {
    font-size: 0.85em;
    padding-left: 5px;
  }
  .lnav {
    font-size: 0.85em;
    padding-left: 3px;
    padding-right: 15px;
  }
  .inside {
    margin-left: 60px;
    margin-right: 60px;
    border-width: 2px;
  }
  photoAZZ {
    width: 125px;
    height: 125px;
  }
}

@media (max-width: 480px) {
  .photoWW {
    display: block;
    margin: auto;
    align-items: center;
    padding-right: 2%;
    width: 175px;
    height: 175px;
  }
  .photoV,
  .photoVV {
    width: 200px;
  }
  .photoXX {
    width: 200px;
    height: 250px;
  }
  .photoW,
  .photoX,
  .photoY,
  .photoZ {
    width: 250px;
  }
  .photoDAD {
    width: 280px;
    height: 160px;
  }
}