/*--------------------------------------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: 100%;
  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 */
}

/*------------------------------------------Website Grid Values----------------------------------------------*/
.grid_container {
  display: grid;
  flex-direction: row;
  grid-template-areas:
    "header header header header"
    "nav main main main ";
  /* justify-items: stretch;*/
  /*align-items: stretch;*/
}
.item1_header {
  grid-area: header;
}
.item2_nav {
  grid-area: nav;
}
.item3_main {
  grid-area: main;
  background-color: #000000;
  color: white;
}
/*.item4_footer {
  grid-area: footer;
}*/

/*--------------------------------------Header-------------------------------------------------*/
header {
  background-image: url(../Images/techbr.jpg);
  height: 400px;
  background-repeat: no-repeat;
}
.logo {
  margin-left: 41%;
  margin-top: 7%;
  margin-bottom: 10px;
}

/*---------------------------------------Nav Bar-----------------------------------------------------*/
.newcolor {
  color: black;
}
.daycolor {
  padding-right: 200px;
}
.daycolorb {
  padding-left: 25px;
}
nav {
  background: green;
  width: 100px;
  /* border-width: 25px;*/
  /* border-bottom: solid black;*/
  /*padding-bottom: 10px;*/
  /*padding-top: 5px;*/
}
nav a:link {
  color: white;
  /* background-color: #f0d81a;*/
  border-style: solid;
  border-color: #000000;
  border-radius: 5px;
  border-width: medium;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  /*margin-left: 30px;*/
  margin-right: 10%;
  text-decoration: none;
  font-weight: 800;
}
a:visited {
  color: white;
  border-color: #000000;
  /* text-decoration: underline; */
}

/*---------------------------------------------------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;
}
.lnav {
  margin-top: 60px;
}

.lnavA {
  margin-top: 755px;
}
.lnavB {
  margin-top: 472px;
}
.lnavC {
  margin-top: 702px;
}
.top {
  padding-top: 50%;
}
/*-------------------------Menu Nav--------------------------*/
/*.navmenu {
  padding-top: 100px;
  list-style-type: none;
  margin-bottom: 275px;
  font-size: small;
}
.topB {
  padding-top: 50%;
}
.navmenu2 {
  padding-top: 100px;
  list-style-type: none;
  margin-bottom: 110px;
  font-size: small;
}*/

/*------------------------------------------------------main------------------------------------------*/
/*body {
  background-color: #000000;
}*/
.birth {
  text-align: center;
  font: size 15px;
}
.linkcolor {
  color: red;
}
.htwo {
  background: green;
  border: solid black;
  color: white;
  border-radius: 8px;
  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;
}
.bottom {
  padding-bottom: 15px;
}
h2 {
  text-align: center;
}
h3 {
  text-align: center;
}
main {
  background: #faf2e6;
  margin-bottom: -2px;
}
.fanfoot {
  font-style: normal;
  background: green;
  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;
}
/*-------------------------------------Index.php IMG---------------------------------------*/
.photoC {
  border-radius: 6px;
  width: 200px;
  height: 140px;
}
.photoA {
  display: block;
  margin: auto;
  align-items: center;
  padding-right: 2%;
}

/*--------------------------------------Form Styles-------------------------------------------------*/
.border {
  background: green;
  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;
}
/*.button {
  list-style-type: none;
}*/

/*------------------------------------------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: green;
  margin-left: 50px;
  margin-right: 50px;
  border: solid black;
  border-radius: 6px;
  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: green;
  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;
}

/*----------------------------------------------------Footer-------------------------------------------*/

/*---------------------------------------------Flexbox container for footer ---------------------------------------------*/

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

/*-------------------------------------------------Tablet @media-------------------------------------------------*/
/*--------------------------------Menu Grid @media------------------------------------*/
@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: 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);
  }
  /*---------------------------------Header @media-----------------------------------*/
  header {
    background-image: url(../Images/truckscTAB.png);
    padding-top: 5px;
    padding-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: -16px;
    background-repeat: no-repeat;
  }
  .logo {
    width: 12.5em; /* 200 / 16 */
    height: 9.37em; /* 150 / 16 */
    /*width: 200px;
    height: 150px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
/*------------------------------Menu @media----------------------------------------*/
@media (max-width: 695px) {
  /*------------------------Typographic Scale @media---------------------------------------*/
  .fanfoot {
    font-size: 100%;
    /* font-size: 0.938em;*/ /* 15 / 16 */
    margin-left: 25%;
    margin-right: 25%;
  }
  /*------------------------------Header @media-------------------------------------*/
  .pageHeader {
    font-size: 2.812em; /* 45 / 16 */
  }
}

/*---------------------------------------------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%;
  }
}

/*---------------------------------------------Flexbox Nav @media----------------------------------------*/
@media (max-width: 524px) {
  ul {
    flex-direction: column;
    align-items: center;
    padding-right: 20%;
  }
  li {
    padding: 10px;
    margin-left: 22%;
  }
  /*---------------------------------------------Flexbox Footer @media----------------------------------------*/
  section {
    flex-direction: column;
    align-items: center;
  }

  /*----------------------------------Menu @media--------------------------------*/
  .menu2 {
    margin-left: 0.5px;
    margin-right: 0.5px;
  }
  .menu {
    margin-left: 0.05px;
    margin-right: 0.5px;
  }
}
/*----------------------------------Header @media-------------------------------*/
@media (max-width: 465px) {
  header {
    background-image: url(../Images/truckscSMR.png);
    padding-top: 5px;
    padding-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: -16px;
    background-repeat: no-repeat;
  }
  .logo {
    width: 10.312em; /* 115 / 16 */
    height: 7.187em; /* 165 / 16 */
    /*width: 165px;
    height: 115px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
@media (max-width: 741px) {
  article img {
    width: 20%;
    height: 20%;
    margin-left: 40%;
    margin-top: 2%;
  }
}