*{
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body{
  width:80%;
  margin: 0 auto;
    }

    @media screen and (max-width: 768px){nav ul li a,label{font-size: 1em;}
                                         input[type=submit],input[type=reset] {
                                                    width: 100%;
                                                    margin-top: 1%;}
                                                  }
    @media screen and (max-width: 480px){nav ul li a,label{font-size: 0.78em;}
                                       }
    @media screen and (max-width: 320px){nav ul li a,label{font-size: 0.5em;}
                                      }

 #logo{text-align:center;
      margin-top: 2%;
      padding:0.1%;
      height: auto;
      width: 100%;}

    nav{text-align:center;
        font-size: 1em;
        font-family:'Emilys Candy', cursive;
        margin-bottom: 1%;
            }
    nav ul li{
          display: inline;
          text-decoration: none;
          list-style-type: none;
          padding-left: 1.46%;
          padding-right: 1.46%;
          }
    nav a:hover {
         background-color:white;
         color: #e51168;
            }
    nav a{float:center;
          color: #3a763b;
          text-align: center;
          padding: 0.2% 1%;
          text-decoration: none;
                  }


                  /* Slideshow container */
                  .slideshow-container {
                    max-width: 1000px;
                    position: relative;
                    margin: auto;
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                  }

                  /* Hide the images by default */
                  .mySlides {
                    display: none;
                  }

                  /* Next & previous buttons */
                  .prev, .next {
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    width: auto;
                    margin-top: -22px;
                    padding: 16px;
                    color: white;
                    font-weight: bold;
                    font-size: 18px;
                    transition: 0.6s ease;
                    border-radius: 0 3px 3px 0;
                    user-select: none;
                  }

                  /* Position the "next button" to the right */
                  .next {
                    right: 0;
                    border-radius: 3px 0 0 3px;
                  }

                  /* On hover, add a black background color with a little bit see-through*/
                  .prev:hover, .next:hover {
                    background-color: rgba(0,0,0,0.8);
                  }

                  /* Caption text */
                  .text {
                    color: #898a8b;
                    font-size: 1em;
                    padding: 30px 12px;
                    position: static;
                    bottom: 5%;
                    width: 100%;
                    text-align: center;
                  }

                  /* Number text (1/4 etc) */
                  .numbertext {
                    color: #f2f2f2;
                    font-size: 12px;
                    padding: 8px 12px;
                    position: absolute;
                    top: 0;
                  }

                  /* The dots/bullets/indicators */
                  .dot {
                    cursor: pointer;
                    height: 15px;
                    width: 15px;
                    margin: 0 2px;
                    background-color:#e9c0c0;


                    border-radius: 50%;
                    display: inline-block;
                    transition: background-color 0.6s ease;
                  }

                  .active, .dot:hover {
                    background-color: #717171;
                  }

                  /* Fading animation */
                  .fade {
                    -webkit-animation-name: fade;
                    -webkit-animation-duration: 1.5s;
                    animation-name: fade;
                    animation-duration: 1.5s;
                  }

                  @-webkit-keyframes fade {
                    from {opacity: .4}
                    to {opacity: 1}
                  }

                  @keyframes fade {
                    from {opacity: .4}
                    to {opacity: 1}
                  }


#maindescription{
       padding-top:1%;
       padding-bottom:1%;
       margin-top:0.5%;
       color:#898a8b;
       font-family:'Raleway', sans-serif;
       font-size:.95em;
       text-align: center;
             }

#mainheading{
      margin: 0 auto;
      padding-top: 1%;
      padding-bottom:1%;
      color:#3a763b;
      font-family:'Emilys Candy', cursive;
      font-size:2em;
      text-align:center;
          }
#maindescription2{font-family:'Raleway',sans-serif;font-size:1em;text-align: center;color: #898a8b;
                   margin-top: 1%;
                   padding-bottom: 0.5%;
                   padding-top:0.5%;
                   }


footer{position: relative;
       left: 0px;
       margin-top:1%;
       margin-bottom: 0.5%;
       text-align:center;
       font-size: .75em;
       font-family:'Raleway',sans-serif;}

footer a{color: #898a8b;text-decoration: none;}


footer ul li{display:inline;
          list-style-type: none;
          padding-left: 0.5%;
          padding-right: 0.5%;
            }

 footer a:hover{background-color:white;color: #e51168;}
/*garden page styling*/


div.gardencategory{background-color: white;
                font-family:'Raleway',sans-serif;font-size:0.6em;text-align: center;color: #898a8b;
                margin-top: 1%;
                padding-bottom:1.5%;
                padding-top:0.5%;
                margin-bottom: 25px;
                width:88%;}

div.gardencategory img{width:60%;
                        padding-bottom:2%;}

div.gallery {


  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  border: 1px solid #ccc;
}

div.gallery img {
  width: 100%;
  height: auto;

}
div.heading{color:#3a763b;
font-family:'Emilys Candy', cursive;
font-size:1em;
text-align:center;
padding:2px;
 }
div.desc {

  font-family:'Raleway',sans-serif;font-size:0.7em;text-align: center;color: #898a8b;
    padding: 2px;
  text-align: center;}

.gardenpics {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

          @media screen and (max-width: 768px){
            .gardenpics{width: 49.99999%;
                                               margin: 6px 0;}
                                              }
          @media screen and (max-width: 480px){
            .gardenpics{width: 100%;}
                                              }
          @media screen and (max-width: 320px){
            .gardenpics{width:100%;}
                                              }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*virtual tour styling*/
 .utubecontainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.utubeframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/*contact form styling*/

input[type=text],[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-family:'Raleway',sans-serif;

}

input[type=submit] {
  background-color: #3a763b;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  float: auto;
}
input[type=reset] {
  background-color: #3a763b;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  float: auto;
}
input[type=submit]:hover {background-color:#e51168;}
input[type=reset]:hover {background-color: #e51168;}


/*styling of form container*/
.container {
  border-radius: 6px;
  background-color:lightgrey;
  padding: 20px;
}


.row{ float: left;
      width: 100%;
       margin-top: 6px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}