/*#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;
  font-size: clamp(1.2rem, 5vw, 2.2rem);
  justify-content: center;
  align-items: center;
  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;
  position: relative;                     /*Recommended*/
}

/* MENU */
.nav-menu {
  font-family: var(--primary-font-family);
  font-size: clamp(1.0rem, 5vw, 1.4rem);
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;                              /*Recommended 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: clamp(1.2rem, 5vw, 1.8rem);
  cursor: pointer;
}

/* SERVICES */
.services {
  display: none;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  cursor: pointer;
}
                                          /*nav-dropdown-menu*/
.nav-dropdown-menu {
    /*display: none;*/
    position:absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    top: 100%;
    left: auto;
    min-width: 220px;
    line-height: 1.8;
    background: #222;
    list-style: none;
    z-index: 999;
}

.nav-dropdown-menu li a {
    padding: 12px 15px;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0s, visibility 0s;
}
/*#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;
  width: min(90%, 1100px);
  margin: 20px auto 50px;
  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*/ /**Zoom Hover Images***/
.zoom {
  transition: transform 0.2s; /* Animation */
}
.zoom:hover {
  transform: scale(1.2); /* Zoom effect */
}
/*#endregion*/ /**Zoom Hover Images***/
/*#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: clamp(1.2rem, 5vw, 1.8rem);
}
.hamburger {
  display: block;
}

.services {
  display: block;
}

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;                              /*Recommended Hamburger space between nav banner and nav drop down menu*/
  left: 0;
  width: 100%;
  flex-direction: column;
  background: #222;
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  padding: 20px;
  margin: 0;
  z-index: 1000;
}

.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*/
}
.nav-dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s, visibility 0s;
  position: relative;
  margin-top: 10px;
  /*background-color:gray;*/
}
.nav-dropdown-menu.active {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
  position: relative;
  margin-top: 10px;
  /*background-color:red;*/
}
}
/*#endregion*/ /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */  /* MOBILE MODE */