/* CSS Document */
@media only screen AND (orientation: landscape) AND (min-width: 1025px) 
{
  body {font-family: 'Arsenal'; margin: 0; padding: 0; width: 100%; overflow-y: scroll; text-align: center}
  h1 {font-family: 'Arsenal'; margin: 0; padding: 0; font-size: 3rem; font-weight: bold; color: white; }
  h2 {font-family: 'Arsenal'; margin:0; padding: 0; font-size: 1rem; color: white}
  h3 {font-family: 'Arsenal'; margin:0; padding: 0; font-size: 1.2rem; font-weight: bold}
  h4 {font-family: 'Arsenal'; margin:0; padding: 0; font-size: 1rem}
  input[type='text'] {font-size: 1.2rem; padding: 0.5rem; border: 1px solid black; font-family: 'Arsenal';}
  input[type='text']:focus {color: black; border: 1px solid black}
  input[type='range'] {zoom: 1.5; padding: 0; margin: 0; cursor: pointer}
  select {font-size: 1.2rem; padding: 0.5rem; border: 1px solid black; font-family: 'Arsenal'; cursor: pointer}
  input[type='checkbox'] {zoom: 2; padding: 0; margin: 0; cursor: pointer}
  button {font-family: 'Arsenal'; font-size: 1.1rem; padding: 0.2rem 0.7rem 0.4rem 0.7rem; cursor: pointer}
  .noscroll { position: fixed; overflow-y:scroll }

  #_body {width: 100vw; display: grid; grid-template-columns: 1fr 5rem;}
  
  #_body {background-color: #330000;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
          background-attachment: fixed;
          background-size: cover;}

  #_contentHeader {display: grid; grid-template-columns: 9rem 1fr; grid-gap: 1rem; padding: 1rem 2rem}
  #_contentHeader img {height: 6rem}

  #_galleryDiv {margin-top: 1rem; min-height: 100vh}
  
  #_galleryDiv img {outline: 2px solid #fff; outline-offset: -2px;}
  
  #_menuDiv {background-color: white; border-left: 1px solid black; z-index: 1}
  #_menuIcon {position: fixed; right: 0.5rem; top: 1rem; width: 3rem}
  #_formIcon {position: fixed; right: 0.5rem; bottom: 2rem; width: 3rem}
  #_phoneIcon  {position: fixed; right: 0.5rem; bottom: 6rem; width: 3rem}
  
  #_menuBox {position: fixed; top: 1rem; right: -7rem; opacity: 0; border: 1px solid black; font-size: 1.1rem; background-color: white; padding-top: 3rem; width: 10rem}
  #_menuHeader {display: flex; justify-content: space-between; padding: 0 1rem; align-items: center; position: absolute; top: 0; left: 0; width: calc(100% - 2rem); height: 3rem; background-color: #EEE; border-bottom: 1px solid black}
  #_menuHeader span:nth-child(1) {font-weight: bold}
  .closeMenu {color: red; cursor: pointer}
  #_menuBox ul {list-style: none; text-align: right; margin-right: 1rem; padding: 0}
  #_menuBox ul li {margin-bottom: 1rem; cursor: pointer} 
  
  .background {display: none; position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 100vh; background-color:rgba(0, 0, 0, 0.75); justify-content: center; align-items: center}
  .window {display: grid; grid-template-rows: 2.5rem 1fr; width: 70vw; height: 70vh; background-color: white}
  .winHeader {background-color: #EEE; border-bottom: 1px solid gray; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; width: calc(100% - 2rem); font-weight: bold}
  .winFooter {background-color: #EEE; border-top: 1px solid gray; display: flex; justify-content: space-between; align-items: center; padding: 1rem; width: calc(100% - 2rem); margin-top: 2rem}
  .winBody {height: calc(70vh - 2.5rem); overflow-y: auto}
  .winCloseX {color: red; cursor: pointer}
  
  #_winForm {width: 40rem; height: 70vh; max-height: 32.5rem; border: 1px solid black}
  #_formBody {display: grid; grid-gap: 1.2rem 1rem; grid-template-columns: 1fr 2fr; margin-top: 1rem}                                    
  #_formBody div {display: flex; align-items: center}
  #_formBody div:nth-child(odd) {text-align: right; justify-content: flex-end}
  #_formBody div:nth-child(even) {justify-content: flex-start}
  #_formBody div:last-child {margin-bottom: 2rem}
  .reqName {font-weight: bold}
  #_formName {width: calc(100% - 2rem)}
  #_formPhone {width: 10rem}
  #_formDate {width: 6rem}
  #_formAddress {width: calc(100% - 2rem)}
  #_formHoursText {margin-left: 0.5rem; font-size: 1.2rem}
  #_formPrintText {margin-left: 0.5rem; font-size: 1.2rem}
  
  #_winContacts {max-height: 20rem}
  #_contactsDiv {display: grid; grid-template-columns: 1fr 2fr; grid-gap: 1rem}
  #_contactsDiv div p {text-align: right}
  #_contactsDiv div p:nth-child(2) {color: red; font-weight: bold}
  #_map {width: calc(100% - 2rem); height: 15rem; margin: 1rem auto; border: 1px solid gray}
  
  #_customersList {width: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap}
  .customerLogo {max-height: 128px; max-width: 128px; margin: 0.5rem}
  
  #_basePrice {padding: 1rem 2rem; font-size: 1.2rem; background-color: #EFE; width: fit-content; margin: 1rem auto; border: 1px solid gray}
  #_basePrice p {margin: 0; padding: 0; font-size: 0.8rem}
  #_priceVars {width: 40%; list-style: square outside; margin: 1rem auto; margin-bottom: 2rem}
  #_priceVars li {text-align: left;}  
  #_priceExamples {display: flex; justify-content: space-around; align-items: flex-start; margin-bottom: 2rem}
  #_priceExamples ul {list-style: none; margin: 1rem; padding: 0; width: 30%}
  #_priceExamples ul li {margin: 0; padding: 0.5rem; border-top: 1px solid #EEE; display: flex; align-items: center; justify-content: center}
  #_priceExamples ul li:first-child {height: 3rem; background-color: #EEE}
  #_priceExamples ul li:last-child {font-size: 1.2rem}
  #_priceReqForm {margin: 0; padding: 0}
  #_priceSub {margin: 0; padding: 0; margin-bottom: 2rem}  
  
  #_documents .winBody {display: grid; grid-template-columns: 1fr 3fr; grid-gap: 1rem}
  #_documents .winBody div:nth-child(odd) {text-align: right}
  #_documents .winBody div:nth-child(even) {text-align: left}
  #_documents .winBody div:last-child {padding-bottom: 1rem}
  
  #_aboutMeDiv {display: flex; height: calc(70vh - 2.5rem); justify-content: space-around; align-items: flex-start; flex-wrap: wrap}
  #_aboutMeDiv img {width: 25vw; max-width: 512px; margin-top: 2rem; margin-bottom: 1rem; border: 1px solid gray}
  #_aboutMeDiv ul {list-style: none; width: 35vw; padding: 0; margin-top: 1rem}
  #_aboutMeDiv ul li {padding: 0; margin: 0.5rem; text-align: left}
  
  
  #_types {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; font-size: 0.8rem; padding-bottom: 2rem}
  #_types div {margin: 1rem 0.5rem} 
  #_types div img {width: 25vw; border: 1px solid gray}
  
  
}