body{
          padding:0px;
          margin:0px;
          font-family: Tahoma, Geneva,sans-serif;
          background-color:#F0FFFF;
          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%;
          min-width: 340px;
          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;
          
      }
 #topmenuhome {
          height: 80px;
          width: 100%;
          /*background-image: url('general-images/tab_logo_250x80.png');*/
          background-color: white;
          /*border: #000000 3px dashed;*/
          position: fixed;
          box-shadow: 0px 20px 20px #e5e5e5;
          z-index: 12;
          margin-top: 0px;
          overflow: hidden;
          
      }  
     #topmenuhome > #topmenuhomeimage {
           height: 100px;
           width: 260px;
           float: left;
           margin-right: 100px;
           background-color: white;
           /*border: #000000 3px dashed;*/
           z-index: 12;
           
      }
      
      #topmenuhome > #topmenuhomeimageborder {
           height: 100px;
           width: 100px;
           float: left;
           background-color: white;
        /*   border: #000000 3px dashed;  */
           z-index: 12;
           
      }
      
        



*{
	-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;}
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: 200px;
          width: 100%;
          min-width: 1920px;
          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;}
}



#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 ############################# */

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

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

/*  #######################  Page Top Styles   ##############################  */

/*  #######################  Page Top Styles   #############################  */

/* ####################### main content area ################################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 1280px;
          overflow: hidden;
          margin: 0px auto;
        /*  border: #000000 1px dashed;
          /*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;  */

      }

/* #################################### login form ##########################  */ 
        .login {
                width: 400px;
                background-color: #ffffff;
                box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
                margin: 10px auto;
                
                
        }
        .login h1 {
                text-align: center;
                color: #5b6574;
                font-size: 24px;
                padding: 20px 0 20px 0;
                border-bottom: 1px solid #ffffff;
                
        }
        .login form {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding-top: 20px;
                border: #ffffff 1px solid;
        }
        .login form label {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;
                height: 50px;
                background-color: #3274d6;
                color: #ffffff;
        }
        .login form input[type="password"], .login form input[type="text"] {
                width: 310px;
                height: 50px;
                border: 1px solid #dee0e4;
                margin-bottom: 20px;
                padding: 0 15px;
        }
        .login form input[type="submit"] {
                width: 100%;
                padding: 15px;
                margin-top: 20px;
                background-color: #3274d6;
                border: 0;
                cursor: pointer;
                font-weight: bold;
                color: #ffffff;
                transition: background-color 0.2s;
        }
        .login form input[type="submit"]:hover {
                background-color: #2868c7;
                transition: background-color 0.2s;
        }

      
/* #################################### login form End ###################### */ 

/* #################################### Temp Home  ########################## */

.content {
	width: 100%;
	margin: 0 auto;
     /*   border: #000000 1px dashed;    */
        padding-top: 75px;
        overflow: hidden;
        
}

/*.content h2 {
	margin: 0;
	padding: 25px ;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}

.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}

.content > p table td, .content > div table td {
	padding: 5px;
}

.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}

.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}*/
/* ################################# Content Left  ########################## */
.contentLeft {
	width: 15%;
	margin-top: 50px;
     /*   border: #000000 1px dashed;   */
        float: left;
        overflow: hidden;
        padding-left: 20px;
        
}


/*.contentLeft h2 {
	margin: 0;
	padding: 25px ;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}

.contentLeft > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}

.contentLeft > p table td, .content > div table td {
	padding: 5px;
}

.contentLeft > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}

.contentLeft > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}*/

/* ################################# Content Centre  ########################## */
 .contentCenter {
	width: 70%;
	margin-top: 50px;
        padding-left: 20px;
    /*    border: #000000 1px dashed;   */
        float: left;
        overflow: hidden;
}


/*.contentCenter h2 {
	margin: 0;
	padding: 25px ;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}

.contentCenter > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}

.contentCenter > p table td, .content > div table td {
	padding: 5px;
}

.contentCenter > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}

.contentCenter > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}*/

/* ################################# Content right  ########################## */
 .contentRight {
	width: 15%;
	margin-top: 50px;
        padding-left: 20px;
    /*    border: #000000 1px dashed;   */
        float: left;
        overflow: hidden;
}

/* ########################### Temp Home End ################################ */

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

   
      #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: 50px;
          width: 100%;
          background-color: white;
          z-index: 2;
          margin: 0px auto;
          box-shadow: 0px 5px 5px #fafafa;
      }
          #footer > #footercontainermiddle {
          height: 100px;
          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: 0px;
          color: gray;
      }

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