@keyframes glow {
  from {
    box-shadow: 0 0 10px -10px #aef4af;
    background-color: #aef4af;
  }
  to {
    box-shadow: 0 0 10px 10px #aef4af;
    background-color: none;
  }
}

#gcmbar {
  position: relative;
  width: 100vw;
  /* height: fit-content; */
}

.nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

.logoContainer {
    width: 11vw;
    height: 70px;
    background-color: black;
}

li > a {
  font-size: 1.25rem !important;
}

div > .nav_item {
  font-size: 1.25rem !important;
}

.nav_item {
    color: black !important;
    padding-right: 0.5rem;
}

nav {
  /* background-image: url("images/gcmbar.png"); */
  background-size: cover;
  background-repeat: no-repeat;
  /* height: fit-content; */
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
#navContainer {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  width: 100vw;
  height: fit-content;
  /* float: right; */
  margin:  0;
  padding: 0 !important;
  text-align: center;
}


body {
  overflow: scroll;
 

}
#mobileContainer {
  display: none;
}
#desktopContainer {
  position:absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background-image: url("images/frontimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:top;
  z-index: 0;
  overflow-y: hidden;
}

#imageSlider {
  position: absolute;
  width: 800px;
  height: 500px;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -400px;
  z-index: -1;

}


#imageSlider > #currentImage {
  max-width: 100%;
  max-height: 100%;
  border-radius: 15px;
  border-width: .6rem .6rem 0 .6rem;
  border-style: solid;
  border-color: black;
}

.right-arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  top: 50%;
  right: 10%;
  margin: -25px 0 0 0;
}

.left-arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  cursor: pointer;
  left: 3%;
  margin: -25px 0 0 0;
}

#contentContainer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  
}

#homeIntroduction {
  margin-top: 270px;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 14vh;
  padding: 2vw;

  /*padding-bottom: 1vw;
  background-color: #f36e21;
  border-radius: 5vw;*/
}
#aboutIntroductionContainer {
  margin-top: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 14vh;
  padding: 2vw;
  display: block !important;

  /*padding-bottom: 1vw;
  background-color: #f36e21;
  border-radius: 5vw;*/
}

#testimonialContainer {
  height: 60vh;
  width: 100vw;
  margin-top: 50vh;
  overflow: scroll;
  padding-bottom: 100px;
  
}

.testimonialTextContent {
  background-color: lightgray;
  font-size: 18px;
  width: 80vw;
  border-radius: 4vw;
  margin-left: 10vw;
  padding: 20px;
  text-align: center;
  border: 1px solid black;
}

#homeSplitParas {
  position: absolute;
  height: 30vh;
  width: 100vw;
  top: 60vh;
  left: 0;
}

#splitPara1 {
  float: left;
  width: 25vw;
  height: 30vh;
  margin-left: 5vw;
  border-top: 6px solid black;
  border-left: 6px solid black;
  border-right: 6px solid black;
  border-radius: 2vw;

}

#splitPara2 {
  float: right;
  width: 30vw;
  height: 30vh;
  margin-right: 5vw;
  border-top: 6px solid black;
  border-left: 6px solid black;
  border-right: 6px solid black;
  border-radius: 2vw;
}

.splitParaText {
  padding: 10px;
  font-size: 1.2em;
  font-weight: 900;
  text-align: center;
  color: white;
  text-shadow: 2px 2px black;
}

#contactInformationContainer {
  background-color: rgb(78, 182, 8);
  width: 70vw; 
  height: 70vh; 
  margin: 4vh auto auto auto;
  
  border-radius: 3vw;
}

#contactInformation {
  width: 35vw;
  height: 70vh;
  float: left;


}

#contactInformationList {
  position: absolute;
  top: 40%;

  line-height: 4;
}

.contactListItem {
  font-size: 24px;


}

#contactMap {
  width: 35vw;
  height: 70vh;
  float: right;
}
#googleMap {
  width: 30vw;
  height: 60vh;
  margin: 5vh auto auto auto;
  border-radius: 3vw;
}

.textContent {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  text-shadow: 2px 2px lightgray;
}

.dropbtn {
    color: white;
    padding: 16px;
    
    border: none;
    cursor: pointer;
  }
  
.circleButtonContainer {
  position: fixed;
  top: 17vh; 
  left: -10vw;
}

.circleButton {
  opacity: 0.7;
  transform: scale(0.2);
  cursor: pointer;
  border-radius: 40%;
  animation: glow 1s infinite alternate;

}

  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  #percentageSlider {
    width: 100%;
    height: 20px;
    background-color: lightgray;
    /*margin: 0 auto;*/
    margin-left: .6rem;
    margin-top: 1px;
    border-radius: 10px;
    z-index: 10000000;
  }
  #completedPercentageSlider {
    width: 100%;
    height: 20px;
    background-color: rgb(53, 53, 199);
    border-radius: 10px;
    z-index: 100000000;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) { 
      
      body {
        background-color: #f9f9f9;
        margin: 0;
        padding: 0;
        
      }
      #desktopContainer {
        display: none;
      }
      #mobileContainer {
        display: block;

        background-color: lightgray;
        z-index: -1;

        /*background-image: url("images/kitchens/kitchens17.jpg");
        background-size:cover;
        background-repeat: repeat;
        background-position:center;*/
        
        
        
      }

      #box1 {
        display: inline-block;
        width: 100vw;
        height: 100vh;
        margin-top: 65px;
        background-color: gray;
      }

      #box2 {
        
        display: block;
        width: 100vw;
        height: 100vh;
      }
      #box3 {
        display: block;
        width: 100vw;
        height: 100vh;
        background-color: gray;
      }
      #box4 {
        display: inline-block;
        width: 100vw;
        height: 100vh;
        margin-top: 65px;
        
      }

      #box5 {
        
        display: inline-block;
        width: 100vw;
        height: 100vh;
        background-color: gray;
      }
      #box6 {
        display: inline-block;
        width: 100vw;
        height: 100vh;
        
      }

      #box7 {
        
        display: inline-block;
        width: 100vw;
        height: 100vh;

        background-color: #BEBDB8;
      }
      #box8 {
        padding: 0;
        margin: 0;
        display: inline-block;
        width: 100vw;
        height: 100vh;
        background-color: lightgray;
        
      }

      #box9 {
        
        display: inline-block;
        width: 100vw;
        height: 100vh;

        background-color: #BEBDB8;
      }
      #box10 {
        padding: 0;
        margin: 0;
        display: inline-block;
        width: 100vw;
        height: 100vh;
        background-color: lightgray;
        
      }

      #box11 {
        
        display: inline-block;
        width: 100vw;
        height: 100vh;

        background-color: #BEBDB8;
      }
      #box12 {
        padding: 0;
        margin: 0;
        display: inline-block;
        width: 100vw;
        height: 100vh;
        background-color: lightgray;
        
      }

      #box13 {
        
        display: inline-block;
        width: 100vw;
        height: 100vh;

        background-color: #BEBDB8;
      }

      .mobileHomeInfo {
        padding: 15px;
        margin-top: 5vh;
      }

      .homeInfoImage {
        width: 100vw;
        height: 40vh;
      }


      #mobileGallerySection {
        position: absolute;
        top: 85px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        display: block;
      }
      .gallerySegment {
        
        width: 100vw;
        height: 80vh;
        margin-bottom: 100vh;
      }

      .gallery-text {
        padding: 5vh; 
      }

      #imageSlider {
        position: relative;
        z-index: 1;
        left: 0;
        top: 5vh;
        margin: 0;
        width: 100vw;
        height: 30vh;
      }

      .imagess {
        position: absolute;
        left: 10vw;
        width: 80vw;
        height: 30vh;
        border-radius: 15px;
        border-width: .6rem .6rem 0 .6rem;
        border-style: solid;
        border-color: black;
      }
      
      
      #imageSlider > #currentImage {
        position: absolute;
        left: 10vw;
        width: 80vw;
        height: 50vh;
        border-radius: 15px;
        border-width: .6rem .6rem 0 .6rem;
        border-style: solid;
        border-color: black;
      }
      

      a {
        text-decoration: none;
        color: #1E1E23;
        opacity:1;
        font-family: 'work sans', sans serif;
        font-size: 1.5em;
        font-weight: 400;
        transition: 200ms;
      }
      a:hover {
        opacity:0.5;
      }
      ul {
        padding: 0;
        list-style-type: none;
      }
      
      
      
      .container {
        margin-top: 50px; 
        Display: flex;
        justify-content: center;
        align-items: center;
      }
      .phone {
        background-color: #36383F;
        border-radius: 40px;
        width: 300px;
        height: 600px;
        Display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 30px 50px 100px #85888C;
      }
      .content {
        border: 1px solid #36383F;
        border-radius: 20px;
        width: 94%;
        height: 91%;
        background-color: #F5F6FA;
        overflow: hidden;
      }
      nav {
        position: fixed;
        width: 100vw;
        background-color: #1E1E23;
        height: 65px;
        background-image: url("images/mobileBar.png");
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 3;
      }
      
      
      #menuToggle {
        display: flex;
        flex-direction: column;
        position: relative;
        top: 25px;
        left: 0px;
        padding-left: 10px;
        padding-top: 5px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
      }
      
      #menuToggle input
      {
        display: flex;
        width: 40px;
        height: 32px;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
      }
      
      #menuToggle span
      {
        display: flex;
        width: 29px;
        height: 2px;
        margin-bottom: 5px;
        position: relative;
        background: #ffffff;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 5px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
      }
      
      #menuToggle span:first-child
      {
        transform-origin: 0% 0%;
      }
      
      #menuToggle span:nth-last-child(2)
      {
        transform-origin: 0% 100%;
      }
      
      #menuToggle input:checked ~ span
      {
        opacity: 1;
        transform: rotate(45deg) translate(-3px, -1px);
        background: #36383F;
      }
      #menuToggle input:checked ~ span:nth-last-child(3)
      {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
      }
      
      #menuToggle input:checked ~ span:nth-last-child(2)
      {
        transform: rotate(-45deg) translate(0, -1px);
      }
      
      #menu
      {
        position: fixed;
        width: 180px;
        height: 105vh;
        box-shadow: 0 0 10px #85888C;
        margin: -50px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background-color: #F5F6FA;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      }
      
      #menu li
      {
        padding: 10px 0;
        transition-delay: 2s;
      }
      
      #menuToggle input:checked ~ ul
      {
        transform: none;
      }



    }