/*#region*/ /**********Global**********/


/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {                                       /* SET ALL ANCHOR TAGS TO NO DECORATION WHEN CLICKED */
  text-decoration: none;
  color: white;
}
:root {                                   /* VARIABLES */
  --primary-bg1-color:  rgba(245, 245, 240, 0.7);
  --primary-bg2-color: #ffffff;
  --primary-text-color: black;
  --primary-font-family: roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --programming-button-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.globalbody {
  background-color: var(--primary-bg1-color);
  /*background-color: var(--primary-bg2-color);*/
  /*background-color: rgba(245, 245, 240, 0.7);*/
}
H1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}
H2 {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
}
H3 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
H4 {
  font-size: clamp(1.5rem, 5vw, 2.0rem);
}
H5 {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
}
H6 {
  font-size: clamp(1.2rem, 5vw, 1.6rem);
}
/*#endregion*/ /**********Global**********/
/*#region*/ /**********Header**********/
.company-logo {
  display: inline-flex;
  margin: 10px 0px 10px 5px;   /*Margin Top, Right, Bottom, Left*/
}
.company-name {
  display:inline-flex;
  /*justify-content:space-between;*/
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font: bold;
  margin: 0px 0px 20px 10px;   /*Margin Top, Right, Bottom, Left*/
  color:black;  /*background-color: aqua;*/
}

.logoindex {
  line-height: 0;
  font-size: 0;
  color: transparent;
}
/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  color: white; /* Color of Hamburger Icon */
  padding: 15px 20px;  
}

/* MENU */
.nav-menu {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  display: flex;
  list-style: none;
  gap: 20px;
  margin-top: 50px; /* Hamburger space between nav banner and nav drop down menu */
}

.nav-menu a {
  /*color: white;*/
  text-decoration: none;
}

.callUs-text {
  color: yellow;
}

/* HAMBURGER */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}
/*#endregion*/ /**********Header**********/
/*#region*/ /**********Hero**********/
/* MAIN Index.html */
.hero {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
  height: auto;
  max-height: 920px;
}
/*#endregion*/ /**********Hero**********/
/*#region*/ /**********Text**********/
.iss-title-text {
  font-family: var(--primary-font-family);
  color: var(--primary-text-color);
  text-align: center;
  margin: 50px auto 0px auto;               /*Margin Top, Right, Bottom, Left*/
}
.iss-box-text {                           /*Also lookout for mobile verision of text*/
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.4rem);
  color: var(--primary-text-color);  
  text-indent: 0px;
  text-align: left;
  letter-spacing: 0px;
  padding: 10px;
  margin: 20px 450px 50px 450px;               /*Margin Top, Right, Bottom, Left*/
}
.iss-aux-text {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: var(--primary-text-color);
  text-indent: 0px;
  text-align: center;
  letter-spacing: 0px;
  margin: 10px 50px 50px 50px;               /*Margin Top, Right, Bottom, Left*/
}
/*#endregion*/ /**********Text**********/
/*#region*/ /*****Flexbox Venue Container****/
.flex-venue-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}
.flex-venue-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  flex: 0 0 300px;
  object-fit: contain;
}
.Venue-Image {
  max-width: 100%;
  height: 200px;
}
.Venue-Name {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
}
/*#endregion*/ /**********Flexbox Venue Container**********/
/*#region*/ /*****Flexbox Skills Container***/
.flex-skills-core-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:20px 20px 20px 20px;             /*Margin Top, Right, Bottom, Left*/
}
.flex-skills-programming-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;
  flex: 0 0 300px;
  border: 2px solid black;
  padding: 10px;
  border-radius: 25px;
  margin:20px 20px 20px 20px;             /*Margin Top, Right, Bottom, Left*/
}
.flex-skills-crestron-item {
  background-color: rgb(0, 74, 128);
}
.flex-skills-extron-item {
  background-color: rgb(0, 74, 128);
}
.flex-skills-qsys-item {
  background-color: rgb(0, 74, 128);
}
.Skills-Programming-Name {
  font-family: var(--programming-button-font-family);
  font-size: clamp(2.0rem, 5vw, 2.8rem);
  color: white;
}
/*#endregion*/ /*****Flexbox Skills Container***/
/*#region*/ /**Flexbox Skills Other Container***/
.flex-skills-other-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:30px 20px 100px 20px;             /*Margin Top, Right, Bottom, Left*/
}
.flex-skills-other-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  font-size: 30px;
  flex: 0 0 300px;
  object-fit: contain;
  margin:20px 20px 20px 20px;             /*Margin Top, Right, Bottom, Left*/
}
.Skills-Other-Name {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: black;
}
.Skills-Other-Image {
  max-width: 100%;
  height: 80px;
}
/*#endregion*/ /**Flexbox Skills Other Container***/
/*#region*/ /**Flexbox Programming Container***/
.flex-programming-container {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}
.flex-programming-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);  
  padding: 10px;
  text-align: center;  
  flex: 1 0 80px;
  object-fit: contain;
  margin:0px auto 100px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
.flex-programming-list-items {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);                       
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  margin: 0px auto 0px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
.iss-programming-text {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 2.2rem);
  text-indent: 0px;
  text-align: center;
  color: var(--primary-text-color);
  letter-spacing: 1px;
  padding: 10px;
  margin: 20px 20px 20px 20px;               /*Margin Top, Right, Bottom, Left*/
}
.flex-crestron-divButton {                /*Crestron Div Button*/
  max-width: 290px;
  padding: 10px;
  text-align: center;
  flex: 0 0 300px;
  border: 2px solid black;
  background-color: rgb(0, 74, 128);
  padding: 10px;
  border-radius: 25px;
  margin:0px auto 20px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
.programming-crestron-badge {             /*Crestron Programming Badge Images*/
  max-width: 50%;
  height: 200px;
  margin:10px 10px 10px 10px;             /*Margin Top, Right, Bottom, Left*/ 
}
.flex-extron-divButton {                  /*Extron Div Button*/
  max-width: 290px;
  padding: 10px;
  text-align: center;
  flex: 0 0 300px;
  border: 2px solid black;
  background-color: rgb(0, 74, 128);
  padding: 10px;
  border-radius: 25px;
  margin:0px auto 20px auto;              /*Margin Top, Right, Bottom, Left*/ 
}

.programming-extron-badge {               /*Extron Programming Badge Images*/
  max-width: 50%;
  height: 120px;
  margin:10px 10px 10px 10px;             /*Margin Top, Right, Bottom, Left*/ 
}
.flex-qsys-divButton {                    /*Q-SYS Div Button*/
  max-width: 290px;
  padding: 10px;
  text-align: center;
  flex: 0 0 300px;
  border: 2px solid black;
  background-color: rgb(0, 74, 128);
  padding: 10px;
  border-radius: 25px;
  margin:0px auto 20px auto;              /*Margin Top, Right, Bottom, Left*/ 
}
.programming-qsys-badge {                 /*Q-SYS Programming Badge Images*/
  max-width: 50%;
  height: 120px;
  margin:10px 10px 10px 10px;             /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox Programming Container***/
/*#region*/ /**Flexbox Audio DSP Container***/
.flex-audiodsp-container {
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  margin: 0px 0px 50px 0px;   /*Margin Top, Right, Bottom, Left*/
}

.flex-audiodsp-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;
  flex: 1 0 80px;
  object-fit: contain;
  /*border: 2px solid blue;*/
}
.flex-audiodsp-software-image {
  max-width: 90%;
  height: 80px;
}
/*#endregion*/ /**Flexbox Audio DSP Container***/
/*#region*/ /**Flexbox Lighting Container***/
.flex-lighting-container {
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  margin: 0px 0px 50px 0px;   /*Margin Top, Right, Bottom, Left*/
}
.flex-lighting-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  flex: 1 0 80px;
  object-fit: contain;
  /*border: 2px solid blue;*/
}
.flex-lighting-image {
  max-width: 100%;
  height: 200px;
}
/*#endregion*/ /**Flexbox Lighting Container***/
/*#region*/ /**Flexbox Troubleshooting Container***/
.flex-troubleshooting-container {
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  margin: 0px 0px 50px 0px;               /*Margin Top, Right, Bottom, Left*/
}
.iss-troubleshooting-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;
  flex: 0 0 80px;
  margin: 0px auto 100px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
.flex-troubleshooting-list-items {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);                       
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  margin: 0px auto 0px auto;              /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox Troubleshooting Container***/
/*#region*/ /**Flexbox CSDC Container***/
.flex-csdc-container {
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  margin: 0px 0px 50px 0px;               /*Margin Top, Right, Bottom, Left*/
}
.iss-csdc-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;
  flex: 0 0 80px;
  margin: 0px auto 100px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox CSDC Container***/
/*#region*/ /**Flexbox Crestron Programming Container***/
.flex-crestron-programming-container {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}
.flex-crestron-programming-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  flex: 1 0 80px;
  object-fit: contain;
  margin:0px auto 0px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox Crestron Programming Container***/
/*#region*/ /**Flexbox Extron Programming Container***/
.flex-extron-programming-container {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}
.flex-extron-programming-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  flex: 1 0 80px;
  object-fit: contain;
  margin:0px auto 0px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox Extron Programming Container***/
/*#region*/ /**Flexbox Q-SYS Programming Container***/
.flex-qsys-programming-container {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}
.flex-qsys-programming-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  padding: 10px;
  text-align: center;  
  flex: 1 0 80px;
  object-fit: contain;
  margin:0px auto 0px auto;             /*Margin Top, Right, Bottom, Left*/ 
}
/*#endregion*/ /**Flexbox Q-SYS Programming Container***/
/*#region*/ /**********Footer**********/
.flex-footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #000;
  color: white;
  padding: 15px 20px;
}
.flex-footer-item {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  padding: 10px;
  text-align: center;
  object-fit: contain;
}
.designed-by-text {
  text-align: center;
  letter-spacing: 1px;
  font-size: 12px;
  padding-right: 10px;
  background-color: black;
  color: gainsboro;
}
/*#endregion*/ /**********Footer**********/
/*#region*/ /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */
@media (max-width: 600px) {
  .company-name {
  font-size: 22px;
 }
  .hamburger {
    display: block;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: #222;
    padding: 20px;
  }
  .nav-menu.active {
    display: flex;
  }
.flex-lighting-image {                    /*lighting images skillslighting.html*/
  max-width: 100%;
  height: 70px;
}
.hero {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  height: auto;
  max-height: 1000px;
}
.flex-troubleshooting-list-items {        /*Shrink the vw for We Troubleshoot List troubleshooting.html*/
  font-size: clamp(1.0rem, 1vw, 1.1rem);                       
}
.iss-box-text {
  font-family: var(--primary-font-family);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  text-indent: 0px;
  text-align: left;
  color: var(--primary-text-color);
  letter-spacing: 0px;
  padding: 5px;
  margin: 20px auto 50px auto;               /*Margin Top, Right, Bottom, Left*/
}
}
/*#endregion*/ /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */