body{
          padding:0px;
          margin:0px;
          font-family: Tahoma, Geneva,sans-serif;
          background-color:linen;
          background-image: url("../general-images/graph001.png");
          background-repeat: repeat;
          background-attachment: fixed;
          -webkit-font-smoothing: antialiased;
          -webkit-text-size-adjust: 100%;
          line-height:1.5;
          width:100%;
          padding:0px;
          margin:0px;
          color: #000000;
/*          color: #4d4d4d;*/

      }

       img {
                    max-width: 100%;
                    max-height: 100%;
        }


      a {
         color: #999999;
         text-decoration: none;
      }
      a:hover {

          color: #6666ff;
      }

        a.fill-div {                /* sets div area as link <a href="" class="fill-div"></a> */
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
        }


      p{
          line-height:1.5;
/*          color: #4d4d4d;*/
      }

      h1{
          width: 100%;
          font-size: 30px;
          font-weight: bold;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h2{
          width: 100%;
          font-size: 24px;
          font-weight: bold;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h3{
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h4{
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 0px;
          line-height:1.3;
      }

/* ################ Top Menu ############### */

#topmenu {
          height: 60px;
          width: 100%;
          background-color: white;
          position: fixed;
          box-shadow: 0px 20px 20px #e5e5e5;
          z-index: 12;
          margin-top: 0px;
      }


*{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html{-webkit-font-smoothing:antialiased;}

a{color: gray;}
a:hover{color:#6666ff;}

/*body{
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
line-height:1;
width:100%;
padding:0px;
margin:0px;
}*/


/*h1{font-size:36px;line-height:1.3em; }
h2{font-size:32px;line-height:1.3em;}
h3{font-size:24px;line-height:1.3em;}
h4{font-size:18px;line-height:1.3em;}
h5{font-size:16px;}
h6{font-size:14px;}*/
p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
.clear{overflow: hidden;}


.mainWrap{width:960px;margin:0 auto;}

.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}

nav{display:block;
margin-top: 0px;
background:#ffffff;


}

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

/* ###################  1st Top menue properties  ##########*/

.menu li a {font-weight:600;
text-decoration:none;
padding:10px;
display:block;
color:grey;
border-left:3px solid linen;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

/* ###################  1st Top menue a hover properties  ##########*/
.menu li a:hover, .menu li:hover > a{
    color:#6666ff;
    background:#ffffff;
    border-left:3px solid #6666ff;

}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 200px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
/* ###################  Sub menue properties  ##########*/
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:grey;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #6666ff;
color:#6666ff;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 199px;
	top: 0px;
}

.mobile-menu{display:none;
width:100%;
padding:11px;
background: whitesmoke;
border-left: 3px solid linen;
border-right: 3px solid linen;
color:grey;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:grey;
color: whitesmoke;
text-decoration:none;
border-left: 3px solid #6666ff;
}

/* ################ Banner ############### */

      #abovebanner {
                      height: 56px;
                      width: 100%;
                      min-width: 979px;
                      background-color: white;
                      margin: 0px auto;

                  }

      #banner {
          height: 490px;
          width: 100%;
          background-color: #ffffff;
          background-repeat: no-repeat;
          background-position: center;
      }
/*################ Banner Cross Fade ########################*/
.fadein img {
    position:absolute;
    left:0px;
    top:60px;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 48s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 48s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    15% {opacity: 1;}
    25% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    15% {opacity: 1;}
    25% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

/*@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
} */

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -36s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -24s;
    background-color: lightgreen;
}
#f4 {
    -webkit-animation-delay: -12s;
    background-color: lightgreen;
}



/*################ Banner Cross Fade End ########################*/



      #banner002 {
          height: 200px;
          width: 100%;
          min-width: 979px;
          background-color: #5583d8;
          background-image: url("../general-images/bannerthin.jpg");
          background-repeat: no-repeat;
          background-position: center;
      }

       #banner003 {
          height: 200px;
          width: 100%;
          min-width: 979px;
          background-color: #5583d8;
          background-image: url("../general-images/banner-book.png");
          background-repeat: no-repeat;
          background-position: center;
      }

      #banner004 {
         height: 200px;
         width: 100%;
         min-width: 979px;
         background-color: #5583d8;
         background-image: url("../general-images/banner-sptfire.jpg");
         background-repeat: no-repeat;
         background-position: center;
     }

     #banner005 {
        height: 200px;
        width: 100%;
        min-width: 979px;
        background-color: #5583d8;
        background-image: url("../general-images/banner-heating-design.jpg");
        background-repeat: no-repeat;
        background-position: center;
    }

    #banner006 {
       height: 200px;
       width: 100%;
       min-width: 979px;
       background-color: #5583d8;
       background-image: url("../general-images/banner-flue-design.jpg");
       background-repeat: no-repeat;
       background-position: center;
   }



      #banner > #bannertextbox{
          position: relative;
          left: 10px;
          top: 10px;
          height: Auto;
          width: 500px;
          padding: 20px;
          border: #000000 3px dashed;
          background-color: orange;
          opacity: 0.75;
          z-index: 10;
      }

      #belowbanner {
          height: 50px;
          width: 100%;
          background-color: white;
          box-shadow: 0px 5px 5px #e5e5e5;

      }
       #belowbanner > #belowbannercontainer{
          height: 50px;
          max-width: 1280PX;
          min-width: 320px;
      /*    border: #000000 1px dashed; */
          background-color: white;
          z-index: 1;
          margin: 0px auto;
      }

/* ############ White notice area Home Page - ################ */

      #noticearea {
          height: 180px;
          width: 100%;
          min-width: 979px;
          background-color: white;
          box-shadow: 0px 5px 5px #e5e5e5;
      }
       #noticearea > #noticecontainer{
          height: 180px;
          width: 100%;
          min-width: 979px;
          max-width: 1280px;
          background-color: white;
          z-index: 1;
          margin: 0px auto;
      }
      #noticearea > #noticecontainer > #noticeimage{
          height: 141px;
          width: 120PX;
          min-width: 120px;
          margin-top: 15px;
          margin-left: 10px;
          background-color: white;
          z-index: 12;
          float: left;
          box-shadow: 5px 5px 5px #888888;

      }
      #noticearea > #noticecontainer > #noticetext{
          height: 141px;
          width: 35%;
          min-width: 250px;
          margin-top: 10px;
          margin-left: 20px;
          background-color: white;
          z-index: 1;
          float: left;
      }


      #noticearea > #noticecontainer > #noticetext1{
          height: 141px;
          width: 35%;
          min-width: 250px;
          margin-top: 10px;
          margin-left: 40px;
          background-color: white;
          z-index: 1;
          float: left;
      }

      #noticearea > #noticecontainer > #noticetext > a {
          font-size: 20px;
          font-weight: bold;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
      }
      #noticearea > #noticecontainer > #noticetext > a:hover {
          color: #6666ff;
      }

      #noticearea > #noticecontainer > #noticetext1 > a {
          font-size: 20px;
          font-weight: bold;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
      }
      #noticearea > #noticecontainer > #noticetext1 > a:hover {
          color: #6666ff;
      }

      /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 1280px;
          overflow: hidden;
          margin: 0px auto;
          /*background-image: url("../general_images/background_white_transparent50.png");*/

      }

       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;
          /*border: #000000 1px dashed;*/

      }


      #content > .contenttextboxleft{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 30%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px;
          /*border: #000000 1px dashed;*/

      }

      #content > .contenttextboxleft60{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 60%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 30px;
          padding-right: 10px;
          padding-right: 10px;

      }

      #content > .contenttextboxright40{
          position: relative;
          float: right;
          margin-top: 50px;
          height: auto;
          width: 40%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px
      }

      #content > .contenttextboxright50{
          position: relative;
          float: right;
          margin-top: 50px;
          height: auto;
          width: 50%;
          max-width: 50%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px

      }

      .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
            }
            #center {
                      text-align: center;
                      }

     /*################ BallValve Cross Fade ########################*/
   #ballvalve {
          height: 517px;
          width: 100%;
          /*min-width: 979px;*/
          /*background-color: #ffffff;*/
/*          background-image: url("../general_images/banner001.jpg"); */
          background-repeat: no-repeat;
          background-position: center;
      }



.fadein1 img {
    position:absolute;
    left:0%;
    top:0%;

    /*border: #000000 1px dashed;*/

    -webkit-animation-name: fade1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 36s;
    animation-name: fade1;
    animation-iteration-count: infinite;
    animation-duration: 36s;
}

@-webkit-keyframes fade1 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade1 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f11 {
    /*background-color: lightblue;*/

}
#f12 {
    -webkit-animation-delay: -24s;
    /*background-color: yellow;*/

}
#f13 {
    -webkit-animation-delay: -12s;
    /*background-color: lightgreen;*/

}



/*################ BallValve Cross Fade End ########################*/

 /*################ House Cross Fade ########################*/
   #house {
          height: 765px;
          width: 100%;
          /*min-width: 979px;*/
          /*background-color: #ffffff;*/
/*          background-image: url("../general_images/banner001.jpg"); */
          background-repeat: no-repeat;
          background-position: center;
      }



.fadein2 img {
    position:absolute;
    left:0%;
    top:0%;

    /*border: #000000 1px dashed;*/

    -webkit-animation-name: fade2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
    animation-name: fade2;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

@-webkit-keyframes fade2 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade2 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#fh11 {
    /*background-color: lightblue;*/

}
#fh12 {
    -webkit-animation-delay: -12s;
    /*background-color: yellow;*/

}
#fh13 {
    -webkit-animation-delay: -6s;
    /*background-color: lightgreen;*/

}



/*################ house Cross Fade End ########################*/




      #content > .contenttextboxleft50{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 50%;
          max-width: 50%;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;
          /*border: #000000 1px dashed;*/


      }
       #content > .contenttextboxcentre60{
          position: relative;
          margin: 0 auto;
          height: auto;
          width: 60%;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;


      }


      #content > .contentimageboxright_technical{
          position: relative;
          margin-top: 50px;
          margin-left: 5%;
          float: left;
          height: 400px;
          width: 640px;
          background-image: url("../general-images/merlin.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }
      #content > .contentimageboxright_visualisation{
          position: relative;
          float: left;
          margin-top: 50px;
          margin-left: 5%;
          height: 400px;
          width: 640px;
          background-image: url("../general-images/watch.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          }
      #content > .contentimageboxright_nature{
          position: relative;
          float: left;
          margin-top: 50px;
          margin-left: 5%;
          height: 480px;
          width: 640px;
          background-image: url("../general-images/lion640x480.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }

      #content > .contentaboutimagelarge{
          position: relative;
          margin-top: 50px;
          margin-left: 10px;
          float: left;
          height: 400px;
          width: 300px;
          /*background-image: url("../general_images/german_shepherd_640x480.jpg");*/
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }

        /* ############## footer area ############### */
        #footer {
          height: auto;
          width: 100%;
          background-color: #dedede;
      }
        #footer > #footercontainertop {
          height: 100px;
          width: 100%;
          background-color: white;
          z-index: 2;
          margin: 0px auto;
          box-shadow: 0px 5px 5px #fafafa;
      }
          #footer > #footercontainermiddle {
          height: 200px;
          width: 100%;
          max-width: 1280px;
          min-width: 767px;
          z-index: 2;
          margin: 0px auto;
      }
          #footer > #footercontainermiddle > .footercontent {
          height: auto;
          width: 30%;
          z-index: 2;
          float: left;
          padding: 20px;
          color: gray;
      }

      #footer > #footercontainermiddle > .footercontent > a {
         color: grey;
         text-decoration: none;
      }

      #footer > #footercontainermiddle > .footercontent > a:hover {
         color: #6666ff;

      }
        #footer > #footercontainermiddle > .footermedia {
          height: auto;
          width: 20%;
          z-index: 2;
          float: right;
          padding: 20px;
          color: gray;
      }

       #footer > #footercontainerbottom {
          height: auto;
          width:100%;
          max-width: 1240px;
          min-width: 320px;
          z-index: 2;
          margin: 0px auto;
          padding: 20px;
          color: gray;
      }


  /*##################    Price table ##################*/


  table.pricetable {
    border-collapse: collapse;
    width: 60%;

 }

  table.pricetable thead{
    background-color: #999999;
    color: #ffffff;
    border-color: #dedede;


 }

   table.pricetable tbody{
    background-color: #ffffff;



 }

 table.pricetable thead td{
    border-color: #888888
        ;


 }


 table.pricetable td {
    border: 1px solid #999999;

 }


/* ################## Cross Fade Ball Valve ######################*/

       #cf {
  position:relative;
  height:517px;
  width:640px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/*#cf img.top:hover {
  opacity:0;
}*/


@keyframes cfFadeInOut {
  0% {
  opacity:1;
}
35% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}




/* ################## Cross Fade Ball Valve End ######################*/

/*
#######################################################
                Media 1280
#######################################################
*/


@media screen and (min-width: 979px) and (max-width: 1280px) {

  #banner {
          height: 350px;
          width: 100%;
          min-width: 768px;
          /*background-image: url("../general_images/banner_979x200.jpg");*/
          /*background-position: left;*/
      }



}







/*
#######################################################
                Media 979
#######################################################
*/


@media screen and (min-width: 768px) and (max-width: 979px) {

    /* ################ changes to menu ############### */
#topmenu {
    height: 60px;

    -webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.mainWrap{width:768px;}
.menu ul {top:37px;}
.menu li a{font-size:12px;
padding:8px;}

/* ################ changes to banner ############### */

      #abovebanner {
          height: 56px;
          width: 100%;
          min-width: 768px;
      }

      #banner {
          height: 280px;
          width: 100%;
          min-width: 768px;
          /*background-image: url("../general_images/banner_979x200.jpg");*/
          /*background-position: left;*/
      }

       #banner002 {
          height: 200px;
          width: 100%;
          min-width: 768px;
          background-image: url("../general-images/banner979x200.jpg");
          background-position: left;
      }

       #banner003 {
          height: 200px;
          width: 100%;
          min-width: 768px;
          background-image: url("../general-images/banner-book979x200.jpg");
          background-position: left;
      }

      #banner > #bannertextbox{
          left: 10px;
          top: 3900px;
          width: 300px;
      }

 /* ############ White notice area ################ */

                  #noticearea {
                     height: 300px;
                     min-width: 320px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }
                   #noticearea > #noticecontainer{
                      height: 400px;
                      min-width: 320px;
                      display: flex;
                      flex-direction: column;
                      float: left;
                  }
                  #noticearea > #noticecontainer > #noticeimage{
                      height: 0px;
                      width: 12px;
                      min-width: 12px;
                      margin-top: 15px;
                      margin-left: 0px;
                      box-shadow: 0px 0px 0px #ffffff;

                  }
                  #noticearea > #noticecontainer > #noticetext{
                      height: auto;
                      width: 80%;
                      min-width: 320px;
                      margin-top: 0px;
                      margin-left: 5%;
                      margin-bottom: 0px;
                      padding: 0px;
                  }
                  #noticearea > #noticecontainer > #noticetext1{
                      height: auto;
                      width: 80%;
                     min-width: 320px;
                      margin-top: 0px;
                      margin-left: 5%;
                  }

 /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 979px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          clear: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;

      }


      #content > .contenttextboxleft{
          position: relative;
          clear: left;
          margin-top: 50px;
          height: auto;
          width: 100%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px;

      }

      #content > .contenttextboxright40{
          width: 100%;
      }

      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }
      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }

      #content > .contenttextboxleft60{
          width: 100%;
      }

       #content > .contenttextboxcentre60{
          width: 100%;
      }

      #content > .contentimageboxright_pet{
          position: relative;
          float: left;
          margin-top: 50px;
          margin-left: 5%;
/*          height: 480px;
          width: 640px;*/
          margin: 0px auto;
          background-image: url("general-images/german_shepherd_640x480.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }

      #content > .contentimageboxright_portrait{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 5%;*/
          margin: 0px auto;
          width: 640px;
          background-image: url("general_images/boy_640x480.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
      }#content > .contentimageboxright_nature{
          /*position: relative;*/
          clear: left;
/*          margin-top: 50px;*/
          /* margin-left: 5%;*/
          margin: 0px auto;
          width: 640px;
          background-image: url("../general_images/lion_640x480.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }

      table.pricetable {
        width: 100%;

     }











}

/*
#######################################################
                Media 767
#######################################################
*/

@media screen and (max-width: 767px) {

/* ################ changes to top menu ############### */

#topmenu {
    position: relative;
    height: 47px;
    box-shadow: 0px 0px 0px;
}

.mainWrap{width:auto;padding:0px 20px;}

.menu{display:none;}

.mobile-menu{display:block;
margin-top:0px;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#6666ff;
border-left:3px solid #6666ff;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}


/* ################ changes to banner ############### */

      #abovebanner {
          height: 1px;
          /*width: 0px;*/
          min-width: 0px;
      }

      #banner {
          height: 220px;
          width: 100%;
          min-width: 480px;
/*          background-image: url("../general_images/banner_767x200.jpg");
          background-position: left;*/
      }

      #banner002 {
          height: 200px;
          width: 100%;
          min-width: 480px;
          background-image: url("../general-images/banner767x200.jpg");
          background-position: left;
      }

       #banner003 {
          height: 200px;
          width: 100%;
          min-width: 480px;
          background-image: url("../general-images/banner-book767x200.jpg");
          background-position: left;
      }

      #banner > #bannertextbox{
          left: 10px;
          top: 4150px;
          width: 300px;
      }

/* ############ White notice area ################ */

                  #noticearea {
                     height: 350px;
                     min-width: 320px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }
                   #noticearea > #noticecontainer{
                      height: 400px;
                      min-width: 320px;
                      display: flex;
                      flex-direction: column;
                      float: left;
                  }
                  #noticearea > #noticecontainer > #noticeimage{
                      height: 0px;
                      width: 12px;
                      min-width: 12px;
                      margin-top: 15px;
                      margin-left: 0px;
                      box-shadow: 0px 0px 0px #ffffff;

                  }
                  #noticearea > #noticecontainer > #noticetext{
                      height: auto;
                      width: 100%;
                      min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      margin-bottom: 0px;
                      padding-left: 10px;
                      padding-right: 10px;
                  }
                  #noticearea > #noticecontainer > #noticetext1{
                      height: auto;
                      width: 100%;
                     min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      padding-left: 10px;
                      padding-right: 10px;
                  }

 /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 767px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;

      }


      #content > .contenttextboxleft{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 100%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px;

      }

      #content > .contenttextboxright40{
          width: 100%;
      }

      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }

      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }

      #content > .contenttextboxleft60{
          width: 100%;
      }

      #content > .contenttextboxcentre60{
          width: 100%;
      }

      #content > .contentimageboxright_pet{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 5%;*/
          margin: 0px auto;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/german_shepherd_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }

      #content > .contentimageboxright_portrait{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 5%;*/
          margin: 0px auto;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/boy_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }#content > .contentimageboxright_nature{
          position: relative;
          float: left;
          /*margin-top: 50px;*/
          /*margin-left: 0px;*/
          margin: 50px auto 0px;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/lion_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }

        /* ############## footer area ############### */

          #footer > #footercontainermiddle {
          min-width: 320px;
      }

          #footer > #footercontainermiddle > .footercontent {
          width: 100%;
      }

        #footer > #footercontainermiddle > .footermedia {
          height: auto;
          width: 100%;
      }

      table.pricetable {
        width: 100%;

     }

















}

/*
#######################################################
                Media 480
#######################################################
*/

@media (max-width: 480px) {

    h1{
          font-size: 20px;
      }

      h2{
          font-size: 18px;
      }

      h3{
          font-size: 16px;
      }

      h4{
          font-size: 16px;
      }


     #abovebanner {
          height: 0px;
          width: 0px;
          min-width: 0px;
      }

      #banner {
          height: 140px;
          width: 100%;
          min-width: 320px;
/*          background-image: url("../general_images/banner_480x200.jpg");
          background-position: left;*/
      }

      #banner002 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/banner480x200.jpg");
          background-position: left;
      }

      #banner003 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/banner-book480x200.jpg");
          background-position: left;
      }

     #banner > #bannertextbox{
          left: 10px;
          top: 4750px;
          width: 300px;
      }

/* ############ White notice area ################ */

                  #noticearea {
                     height: 400px;
                     min-width: 320px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }
                   #noticearea > #noticecontainer{
                      height: 400px;
                      min-width: 320px;
                      display: flex;
                      flex-direction: column;
                      float: left;
                  }
                  #noticearea > #noticecontainer > #noticeimage{
                      height: 0px;
                      width: 12px;
                      min-width: 12px;
                      margin-top: 15px;
                      margin-left: 0px;
                      box-shadow: 0px 0px 0px #ffffff;

                  }
                  #noticearea > #noticecontainer > #noticetext{
                      height: auto;
                      width: 100%;
                      min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      margin-bottom: 0px;
                      padding-left: 10px;
                      padding-right: 10px;
                  }
                  #noticearea > #noticecontainer > #noticetext1{
                      height: auto;
                      width: 100%;
                     min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      padding-left: 10px;
                      padding-right: 10px;
                  }

      #content {
          width: 100%;
          height: auto;
          max-width: 767px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;

      }


      #content > .contenttextboxleft{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 100%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px;

      }

      #content > .contenttextboxright40{
          width: 100%;
      }

      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }
      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }

      #content > .contenttextboxleft60{
          width: 100%;
      }

      #content > .contenttextboxcentre60{
          width: 100%;
      }


      #content > .contentimageboxright_pet{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 1%;*/
          margin: 0px auto;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/german_shepherd_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }

      #content > .contentimageboxright_portrait{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 1%;*/
          margin: 0px auto;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/boy_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }#content > .contentimageboxright_nature{
          position: relative;
          float: left;
/*          margin-top: 50px;
          margin-left: 0px;*/
          margin: 50px auto 0px;
          height: 320px;
          width: 320px;
          background-image: url("../general_images/lion_320x320.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }

        table.pricetable {
        width: 100%;
        font-size: 12px;
     }


}

/*
#######################################################
                Media 320
#######################################################
*/

@media (max-width: 320px) {

     h1{
          font-size: 20px;
      }

      h2{
          font-size: 18px;
      }

      h3{
          font-size: 16px;
      }

      h4{
          font-size: 16px;
      }


     #abovebanner {
          height: 0px;
          width: 0px;
          min-width: 0px;
      }

      #banner {
          height: 100px;
          width: 100%;
          min-width: 320px;
/*          background-image: url("../general_images/banner_320x200.jpg");
          background-position: left;*/
      }

       #banner002 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/banner320x200.jpg");
          background-position: left;
      }

      #banner003 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/banner-book320x200.jpg");
          background-position: left;
      }

     #banner > #bannertextbox{
          left: 10px;
          top: 4750px;
          width: 300px;
      }

/* ############ White notice area ################ */

                  #noticearea {
                     height: 430px;
                     min-width: 320px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }
                   #noticearea > #noticecontainer{
                      height: 430px;
                      min-width: 320px;
                      display: flex;
                      flex-direction: column;
                      float: left;
                  }
                  #noticearea > #noticecontainer > #noticeimage{
                      height: 0px;
                      width: 12px;
                      min-width: 12px;
                      margin-top: 15px;
                      margin-left: 0px;
                      box-shadow: 0px 0px 0px #ffffff;

                  }
                  #noticearea > #noticecontainer > #noticetext{
                      height: auto;
                      width: 100%;
                      min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      margin-bottom: 0px;
                  }
                  #noticearea > #noticecontainer > #noticetext1{
                      height: auto;
                      width: 100%;
                     min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                  }







                  #content > .contenttextboxcentre60{
                      width: 100%;
                  }

                  table.pricetable {
                    width: 100%;
                    font-size: 12px;

                 }

                  #content > .contenttextboxfull{
                  margin-top: 20px;
                  min-width: 320px;


              }

              #content > .contenttextboxleft50{

              margin-top: 20px;

              }

              #content > .contenttextboxright50{

              margin-top: 20px;

              }

              #ballvalve {
              height: 250px;

              }

}