body {margin: 0; margin-top:0; background: linear-gradient(to left , #797a79, black);}}


    background: linear-gradient(to left , white, black);}

    * {box-sizing: border-box;}

    nav ul{list-style-type: none;}
    nav ul li{display: inline;}


    nav ul {
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-flow: row nowrap;
      list-style-type: none;
      z-index: 1;
      }

    nav ul li { width: 100%;}

    nav a:hover {color: white; background-color:;}

/*                   -----------    Buttons   --------------------*/

 .dropbtn {
    width: 100%;
    background-color: transparent;
    font-size: 20px;
    border: none;
    font-family: "Fantasy", copperplate;
    color: white;

    }

   .dropdown {
      position: relative;
      display: inline-block;
      font-size: 15px;
      text-decoration: none;
      z-index: 3;
      }

   .dropdown-content {
      background: white;
      color: white;
      text-align: left;
      display: none;
      font-family: "Fantasy", copperplate;
      position: absolute;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 3;
      }

   .dropdown-content a {
     text-align: left;
     color: black;
     width: 350px;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     z-index: 3;
     }

   .dropbtn:hover {background-color: red;cursor: pointer;}

   .dropdown:hover .dropdown-content {display: block; }
   /*
                  CSS FOR SERVICES
*/
  .services {
    padding-top: 45px;
    width: 100%;
    font-family: "Fantasy", copperplate;
    height: 00px;
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 400px 150px;
    margin-top: 2%;
    margin-left: 1%;
    z-index: 500;
    }

  .services1 {
    background:white;
    color: black;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 70px 40px 40px 40px 40px 40px 40px;
    font-size: 35px;
    border-top: 2px solid Red;
    border-bottom: 4px solid Red;
    border-left: 2px solid Red;
    border-right: 4px solid Red;
    box-shadow: 20px 8px 16px 0px black;
    padding-left: 30px;
    }

   .services2 {font-size: 25px;}

   /*
                  CSS FOR Completed Projects
*/

/*----------------------------------------------------------------------
                         CSS for Gallery
----------------------------------------------------------------------*/
   .Gallery_main-page {
     padding-top: 50px;
     display: grid;
     grid-template-columns: 1% 48% 1% 48%;
     grid-template-rows: 22% 2% 22% 2% 22% 2% 22% 2% 22%;
     font-size: 20px;
     font-weight: bold;
     }

   .Gallery_Image {
    width: 100%;
    height: 100%;
    box-shadow: 20px 8px 16px 0px black;
    transition: 0.9s;
    z-index: 500;
    }

  .Gallery_Image :hover {
    opacity: 0.8;
    }

    .items_Gallery {
      height: 100%;

      color: white;
      box-shadow: 0px 8px 16px 0px black;;
      opacity: .9;
      padding-left: 10%;
      }

/*                                    Slide Show                            */
    .grid-1 {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 10% 80% 5%;
      grid-template-rows: 50% ;
      z-index: 500;
      }

   .autoscroll {
     font-family: "Fantasy", copperplate;
     color: white;
     text-align: center;
     font-size: 30px;
     margin-top: -150px;
     font-weight: 900;
     z-index: 550;
     }

    .main-page {
       margin: 0;
       padding-top: 20px;
       padding-left: 0px;
       height: 550px;          /* Controls the buttons and images to top of page */
       width: 90%;
       display: flex;          /* Images Horizon not vertical for button vs images */
       justify-content: center;
       align-items: center;
       z-index: 500;
       }


    .slider {
      width: 100%;           /*  Controls the width of the box */
      height: 160%;
      border-radius: 0px;    /*  no visual difference */
      overflow: hidden;
      box-shadow: 20px 8px 56px 0px black;
      z-index: 500;
      }

    .slides {
      width: 2720%;            /* Distance between pics */
      height: 85%;
      display: flex;          /* Images Horzional not vertical */
      box-shadow: 20px 8px 56px 0px black;
      }

    .slides input {display: none;} /* hides the button on the left   */
    .slide {width: 20%; transition: 2s;} /* Distance between pics */
    .slide img {width: 100%; height: 600px; } Width/height of images

    .header {
      background: rgb(125, 89, 89);
      font-size: 10%;
      }

/*----------------------------------------------------------------------
                         CSS for About Us
----------------------------------------------------------------------*/
   .Abut_Us_main-page {
     padding-top: 2%;
     padding-bottom: 4%;
     box-shadow: 0px 8px 16px 0px black;
     border-radius: 50px;
     }

   .items_About_Us {
      margin-left: 10%;
      padding: .5%;
      width: 70%;
      background: #f2f1ed;
      color: black;
      font-size: 25px;
      border-radius: 80px;
      box-shadow: 0px 8px 16px 5px black;;
      opacity: .9;
      padding-left: 10%;
      }

/*----------------------------------------------------------------------
                         CSS for Family Room
----------------------------------------------------------------------*/
    #radio1f:checked ~ .first{margin-left: 0;}
    #radio2f:checked ~ .first{margin-left: -4.7%;}
    #radio3f:checked ~ .first{margin-left: -8.7%;}
    #radio4f:checked ~ .first{margin-left: -14.7%;}
    #radio5f:checked ~ .first{margin-left: -19.1%;}
    #radio6f:checked ~ .first{margin-left: -25.2%;}
    #radio7f:checked ~ .first{margin-left: -33.6%;}
    #radio8f:checked ~ .first{margin-left: -40.9%;}
    #radio9f:checked ~ .first{margin-left: -50%;}


/*----------------------------------------------------------------------
                         CSS for Bath Room
----------------------------------------------------------------------*/
    #radioBR1:checked ~ .first{margin-left: 0;}
    #radioBR2:checked ~ .first{margin-left: -4.2%;}
    #radioBR3:checked ~ .first{margin-left: -8.7%;}
    #radioBR4:checked ~ .first{margin-left: -13.7%;}
    #radioBR5:checked ~ .first{margin-left: -19.1%;}
    #radioBR6:checked ~ .first{margin-left: -25.2%;}
    #radioBR7:checked ~ .first{margin-left: -30.6%;}
    #radioBR8:checked ~ .first{margin-left: -37%;}
    #radioBR9:checked ~ .first{margin-left: -45%;}
    #radioBR10:checked ~ .first{margin-left: -53%;}

/*----------------------------------------------------------------------
                         CSS for Basement
----------------------------------------------------------------------*/
    #radioBase1:checked ~ .first{margin-left: 0;}
    #radioBase2:checked ~ .first{margin-left: -5.2%;}
    #radioBase3:checked ~ .first{margin-left: -10.7%;}
    #radioBase4:checked ~ .first{margin-left: -16.7%;}
    #radioBase5:checked ~ .first{margin-left: -23.1%;}
    #radioBase6:checked ~ .first{margin-left: -31.2%;}

/*----------------------------------------------------------------------
                         CSS for Contact Us
----------------------------------------------------------------------*/


    .emailBox {
        display: grid;
        grid-template-columns: 30% 60%;
        font-size: 45px;
        z-index: 500;
        color: white;
        }

    .emailBoxName {font-size:30px; width: 40%; z-index: 500;}
    .emailPhNumber {font-size:30px; width: 30%; z-index: 500;}
    .emailBoxAddr {font-size:30px; width: 50%; z-index: 500;}
    .emailBoxZip {font-size:30px; width: 20%; z-index: 500;}
    .emailBoxProject {font-size:30px;width: 72%; z-index: 500;}

    .submitEmail {background: #de652c;
        z-index: 500;
        font-size:30px;
        width: 630px;
        color: white;
        border-radius: 50px;
        box-shadow: 5px 8px 16px 0px black;
        }

/*----------------------------------------------------------------------
                  css for manual slide navigation
----------------------------------------------------------------------*/

    .navigation-manual {            /*     Controls the positions of buttons           */
      position: absolute;
      width: 80%;               /*      Controls the L/R position of buttons        */
      margin-top: 7%;         /*      Controls the T/B position of buttons        */
      display: flex;              /*      Makes the buttons Round                     */
      justify-content: center;    /*      Makes the buttons Round  */
      }

    .manual-btn {
      border: 2px solid black;
      background: white;
      padding: 5px;              /*      Controls the size of the buttons*/
      border-radius: 10px;
      cursor: pointer;
      transition: 1s;             /*      Time to fill background color of button */
      }

    .manual-btn:not(:last-child) {
      margin-right: 5%;           /*   Controls the distance of buttons */
      }

    .manual-btn:hover {
      background-color: red;  /* Background color of button */
      }

    #radio1:checked ~ .first{margin-left: 0;}
    #radio2:checked ~ .first{margin-left: -4%;}
    #radio3:checked ~ .first{margin-left: -8%;}
    #radio4:checked ~ .first{margin-left: -13%;}
    #radio5:checked ~ .first{margin-left: -18%;}
    #radio6:checked ~ .first{margin-left: -23%;}
    #radio7:checked ~ .first{margin-left: -30%;}
    #radio8:checked ~ .first{margin-left: -36.5%;}
    #radio9:checked ~ .first{margin-left: -44%;}
    #radio10:checked ~ .first{margin-left: -53%;}
    #radio11:checked ~ .first{margin-left: -55%;}

/*----------------------------------------------------------------------
               CSS for Automatic slide navigation
----------------------------------------------------------------------*/

   .navigation-auto {
     position: absolute;
     display: flex;
     width: 10%;
     justify-content: center;
     }

/*                                     Media Queries                             */


    @media only screen and (max-width: 1100px){
        .wrapper{grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);}}
        ::selection{ float: none; width: 100%; padding-right: 0px; }}

    @media screen and (max-width: 600px) {
        header h1{ background-image: none; text-align: center; z-index: 3; }
        nav{ grid-row: 2 / 3; grid-column: 1 / 9; }}

    .main-content::before {
      content:"";
      position: absolute;
      top: 9%;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: .3;
      background-image: url("1-1-1 Main_Page_Pic1.jpeg");
      background-size:cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      }

   .header {
      color: white;
      display: grid;
      grid-template-columns: 70% 25% ;
      height: 65px;
      padding-left: 2%;
      width:98%;
      font-family: "Fantasy", copperplate;
      font-size: 40px;
      border-bottom: 2px solid maroon;
      z-index: 3;
      }

   .phone {
     padding-top: 10px;
     color: white;
     font-size: 15px;
     }

  .footer {
    font-family: Fantasy, copperplate;
    padding-top: 20%;
    margin-left: 30%;
    font-size: 50px;
    color: White;
    z-index: 3;

  .color {
    background: black;
  }