body {
     background-image: url("../3.Background/1.white_background.jpeg");}


   body {
     font-family: "Fantasy", copperplate;
     background-attachment: fixed;
     margin: 0px;
     color: #520305;
     }

   .logo {width: 10%;}

   header {
     /*background: linear-gradient(to left , white, #031623);*/
     background: white;
     grid-row: 1/2;
     grid-column: 1/9;
     }

   header a {
     height: 100px;
     font-size: 35px;
     text-decoration: none;
     z-index: 100;
     }

   header h1 {
     line-height: 140%;
     padding: .5rem;
     margin-bottom: 0px;
     margin: 0px;
     z-index: 100;

     }

   .navbar {
      overflow: hidden;
      background-color: #333;
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      padding-left: 1500px;

      }

  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    }

  nav {
    font-weight: bold;
    grid-row: 2/3;
    grid-column: 1/-1;
    position: sticky;
    top: 0;
    background-color: #424242;
    border-bottom: 2px solid maroon;
    z-index: 100;
    }

    .body-title {
       position: absolute;
       top: 300px;
       color: white;
       border-width: 1px;
       padding-left: 100px;
       font-size: 30px;
       font-family: Fantasy, copperplate;
       z-index: 100;
       }

 /*                                ----   Wrapper Method   -----                   */
    #wrapper {
        box-shadow: 0px 3px 3px rgba(66, 66, 66, 0.3);
        display: grid;
        grid-auto-rows: minmax(0px, auto);
        z-index: 3;
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    }

    main {
        padding-left: 2rem;
        padding-right: 2rem;
        grid-row: 4 / 5;
        grid-column: 2 / 8;
        background-color: #ffffff;
        z-index: 3;
    }


    * {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 {background-color: #ba1c21;}

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



 .dropbtn {
    width: 100%;
    background-color: #424242;
    font-size: 16px;
    border: none;
    font-family: "Fantasy", copperplate;
    color: white;
    opacity: .5;
          }

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

 .dropdown-content {
   background: 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; }



/*------------------------------------------------------------------*/

    .picSize {
        height: 20%;
        width: 100%;
        }

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

/*----------------------------------------------------------------------
                         CSS for Services
----------------------------------------------------------------------*/

    .items_Services {
      height: 120%;
      background: transparent;
      color: black;
      box-shadow: 0px 8px 16px 0px black;;
      opacity: .9;
      padding-left: 10%;
      }

   .main-page_Services {
     padding-top:50px;
     display: grid;
     grid-template-columns: 1% 23% 2% 23% 2% 23% 2% 23%;
     font-size: 20px;
     font-weight: bold;
     }

/*----------------------------------------------------------------------
                         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.8s;
    }

  .Gallery_Image :hover {
    opacity: 0.8;
    }

    .items_Gallery {
      height: 100%;
      background: transparent;
      color: black;
      box-shadow: 0px 8px 16px 0px black;;
      opacity: .9;
      padding-left: 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 Contact Us
----------------------------------------------------------------------*/


    .emailBox {
        display: grid;
        grid-template-columns: 30% 60%;
        font-size: 45px;

        }

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

    .submitEmail {background: #de652c;
        font-size:30px;
        width: 630px;
        color: white;
        border-radius: 50px;
        box-shadow: 5px 8px 16px 0px black;
        }
/*----------------------------------------------------------------------
                         CSS for Family Room
----------------------------------------------------------------------*/
    #radio1f:checked ~ .first{margin-left: 0;}
    #radio2f:checked ~ .first{margin-left: -4.2%;}
    #radio3f:checked ~ .first{margin-left: -8.7%;}
    #radio4f:checked ~ .first{margin-left: -13.7%;}
    #radio5f:checked ~ .first{margin-left: -19.1%;}
    #radio6f:checked ~ .first{margin-left: -25.2%;}
    #radio7f:checked ~ .first{margin-left: -31.6%;}
    #radio8f:checked ~ .first{margin-left: -38.9%;}
    #radio9f:checked ~ .first{margin-left: -49%;}


/*----------------------------------------------------------------------
                         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: -4.2%;}
    #radioBase3:checked ~ .first{margin-left: -8.7%;}
    #radioBase4:checked ~ .first{margin-left: -13.7%;}
    #radioBase5:checked ~ .first{margin-left: -19.1%;}
    #radioBase6:checked ~ .first{margin-left: -25.2%;}

/*----------------------------------------------------------------------
                         CSS for Grids
----------------------------------------------------------------------*/



    .grid-1 {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 10% 80% 5%;
      grid-template-rows: 50% ;
      }


/*----------------------------------------------------------------------
                         CSS for Slider
----------------------------------------------------------------------*/

    .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;
       }


    .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;
      }

    .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 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;
     }