﻿body {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}
.info
{
    position: relative;
    text-align: center;
    
}
.salescenter
{
   text-align: justify; 
   color: black;
}

.mySlides {display: none;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
}

.active {
  background-color: #717171;
}

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

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

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


h2 {
    margin-top: 0px;
    font-family: Bookman;
    
}
h3{
    margin-top: 0px;
    font-family: Bookman;
    color:#7d0101;
}
a.readmore {
	font-family: Bookman;
	font-style: italic;
	color: #4b5028;
	font-size: 1.0vw;
	font-weight:bold;
}

.headercontainer {
	width: 100%;
	height: 8.0vw;
	text-align: justify;
}
.headerleft {
    width: 25%;
    float:left;
    text-align: justify;
  
}

.headerright {
    width: 55%;
    float:right;
    text-align: right;
    padding-right:5px;

}
.headleft {
    width: 30%;
float: left;
}

.headright {
    width: 70%;
float : left;

}
.contactbar {
    text-align: right;
    font-family: Bookman;
    font-size: 1.2vw;
    color: white;
    padding-right: 10px;
    text-shadow: 2px 2px 8px black;
}
.phone
{
    font-size:2.5vw;
}
.logo {
    display: block;
    text-align: center;
   }
.logos {
    float: right;
    text-align: right;
}

.parent {
    position: relative;
    top: 0;
    left: 0;
}
.mainimg {
    position: relative;
    top: 0;
    left: 0;
}
.imglogo {
    width: 380px;
    min-width: 38%;
    max-width: 90%;
}
.mainimage {
	position: relative;
	text-align: center;
}
.centeredtext {
    position: absolute;
    text-align: center;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5.0vw;
	font-family: Bookman;
    color: white;
	text-shadow: 2px 2px 2px #000000;
}
.centeredtextsml {
    position: absolute;
    text-align: center;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5vw;
	font-family: Bookman;
    color: white;
	text-shadow: 2px 2px 2px #000000;
} 
.imagecontainer {
  position: relative;
    text-align: justify;
    color: white;
    width:100%;
}
.newscontainer {
  position: relative;
    text-align: justify;
    color: black;
    width:100%;
}
.news-left {
   float: left;
    width:45%;
    padding:5px;
    font-size: 1.1vw;
    font-family: Bookman;
    height: inherit;

}
.topleft {
    position: absolute;
    top: 0px;
    left: 0px;
    padding:5px;
    font-size: 5vw;
    line-height: 80%;
    font-family: Bookman;
    text-shadow: 2px 2px 2px #000000;
}
.topleftsmall {
    position: absolute;
   top: 110px;
    left: 0px;
    padding:5px;
    font-size: 1.0vw;
    line-height: 80%;
    font-family: Bookman;
    text-shadow: 2px 2px 2px #000000;
}




.column1 {
    float: left;
    width: 10%;
    padding: 2px;   
   }
.column8{
    font-size: 1.1vw;
	font-family: Bookman;
    text-align: justify;
    vertical-align: center;
    width: 80%;
    float: left;
    color: black;
    box-sizing: border-box;
}
.column8a{
    font-size: 1.1vw;
	font-family: Bookman;
    text-align: justify;
    vertical-align: bottom;
    width: 80%;
    float: left;
    color: white;
    box-sizing: border-box;
}
.column9{
    font-size: 1.1vw;
	font-family: Bookman;
    box-sizing: border-box;
    text-align: justify;
    width: 60%;
    float: left;
    border-style: none;
  
}
.column2 {
	float: left;
	width: 40%;
	padding: 10px;
	font-size: 1.1vw;
	font-family: Bookman;
	text-align: justify;
	box-sizing: border-box;
}
.column2a {
	float: left;
	width: 20%;
   	font-size: 1.1vw;
	font-family: Bookman;
	box-sizing: border-box;
	color: black;
}

.column2aa {
	float: left;
	width: 20%;
   	font-size: 1.1vw;
	font-family: Bookman;
	 text-align: right;
	color: black;
	border-style: none;
	border: 0px;
}
.columnNav {
	float: left;
    width: 84%;
    font-family:Bookman;



}
.dash {
	border-bottom: 1px dotted grey;
	margin: auto;
	width: 50%;
	padding-top: 20px;
	width: 100%;
}

.column3 {
    float: left;
    width: 2%;

}
.column3a {
	float: left;
	width: 2%;
}

.column4 {
    float: left;
    width: 40%;
    padding: 10px;
    font-size: 1.1vw;
    font-family: Bookman;
    box-sizing: border-box;
    text-align: justify;
}
.column4b {
    float: left;
    width: 40%;
    padding: 0px;
    font-size: 1.1vw;
    font-family: Bookman;
    box-sizing: border-box;
    border-left: 1px dotted grey;
}
.column4a {
	float: left;
	width: 20%;
	padding: 10px;
	font-size: 1.1vw;
	font-family: Bookman;
	box-sizing: border-box;
	color:black;
}

.column5 {
    float: right;
    width: 10%;
}

.column6 {
    float: left;
    width: 10%;
    padding: 2px;
}
.column1Top {
    float: left;
    width: 100%;
    margin: 0px;
}


.navbar {
    width: 100%;
    height: 18px;

  
}
.center {
    margin: auto;
    text-align:center;
} 
.row:after {
    content: "";
    display: table;
    clear: both;
}


.topnav{
    overflow: hidden;
    text-align: center;
    font-family:Bookman;
   width:100%;
    

}

.topnav a {
        float:left;
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 0.9em;
        margin-left:auto;  

    }
    

    .topnav a:hover {
            background-color: red;
            color: white;
         
        }
/* START Coloured Nav Section */
a.topnav13:hover, a.topnav13:active {
	background-color: #156336;
}
a.topnav1:hover, a.topnav1:active {
    background-color: orange;
}
a.topnav2:hover, .a.topnav2:active {
    background-color: #8dc63f;
}
a.topnav3:hover, a.topnav3:active {
    background-color: #00a99d;
}
 a.topnav4:hover, a.topnav4:active {
    background-color: #0072bc;
}
a.topnav5:hover, a.topnav5:active {
    background-color: #662d91;
}
a.topnav6:hover, a.topnav6:active {
    background-color: #92278f;
}
a.topnav7:hover,a.topnav7:active {
    background-color: #ec008c;
}
a.topnav8:hover, a.topnav8:active {
    background-color: #f7941d;
}
a.topnav9:hover,a.topnav9:active {
    background-color: #c69c6d;
}
a.topnav10:hover, a.topnav10:active {
    background-color: #790000;
}
a.topnav11:hover,a.topnav11:active {
    background-color: #003471;
}
a.topnav12:hover,a.topnav12:active {
	background-color: #a30101;
	text-align: right;
}
/* END Coloured Nav Section */
.active {
    background-color: red;
    color: grey;
}

.topnav .icon {
    display: none;

}

/*grow section */
.topnavgrow {
    overflow: hidden;
    text-align: center;
    font-family: Bookman;
   width:100%;
    

}

    .topnavgrow a {
        float:left;
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 1.2em;
        margin-left:auto;  

    }
    

        .topnavgrow a:hover {
            background-color: red;
            color: white;
         
        }




/*Footer Sections*/
.footerwrap {
height:250px;
}
.column1base {
    float:left;
    padding:2px;
    background-color: #406618;
    width:10%;


}

.footerleft,.footercentre,.footerright {
    float: left;
    box-sizing: border-box;
    padding-left: 5px;
    width: 25%;
    text-align: left;
    font-family: Bookman;
    font-size: 1.1vw;
    color:black;

}

a.footerleft {
    font-family: Bookman;
    text-decoration: none;
    color: black;
    padding-left: 0px;
    font-size: 1.1vw;
    float: left;
}
a.footerleft:hover 
{
text-decoration:underline;
color: orange;
}
a.return {
    font-family: Bookman;
    text-decoration: red;
    color: #406618;
    padding-left: 0px;
    font-size: 1.1vw;
}
a.return:hover 
{
text-decoration:underline;
}
.base {
    width: 100%;
    height: 42px;
    background-color: black;
    text-align: center;
    vertical-align: middle;
    font-family: Bookman;
    color:white;
    padding-top: 10px;
    font-size: 1.1vw;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: red;
}
.basetext {
    background-color: orange;
    height: 10px;
    text-align: center;

    }
.button {
  background-color: red;
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: justify;
  text-decoration: none;
  display: inline-block;
  font-size: 1vw;
} 
.button:hover {
  background-color: black
  color: white;
}
.impacttext{

    text-align: left;
    vertical-align: middle;
    font-family: Bookman;
    color:#7d0101;
    padding-top: 10px;
    font-size: 4.0vw;
    box-sizing: border-box;
}

.GeneratedMarquee {
font-family:Bookman;
font-size:2vw;
line-height:1.3em;
color:white;
background-color: red;
text-shadow: 2px 2px 2px #000000;

}

     /* Responsive layout - when the screen is less than 768px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {
    body, .column2, center, .column2Top, .column3, .column2a,.column4a,.column4,.column3a,.column8, .column8a,.footerwrap,.contactbar, .headerright, .headerleft, .footercentre,
    .logos, .footerright, .base, .headright,.headleft,.basetext, .news-left,.footer, .column1base, .row:after, a.return, .a.return:hover {
        width: 100%;
        padding: 0px;
        font-size: 3.6vw;
    }

    @media (max-width: 768px) {

        .column1,.column2aa,{
            display: none;
        }

        .toplogo {
            width: 80%
        }
        
            
        }
    }

    @media (max-width: 768px) {


        .Logo2 {
            
          display:none;
        }
        .phone 
        {
            font-size:30px;
        }
        .contactbar {
            text-align: center;
            font-family: Bookman;
            font-size: 12px;
            padding-bottom: 5px;
            color: white;
            text-shadow: 2px 2px 8px black;
            display: none;
        }
        .headercontainer {
            width: 100%;
            height: 52vw;
            text-align: center;
         
        }
       .GeneratedMarquee {
font-family:Bookman;
font-size:20px;
line-height:25px;
color:white;
background-color: red;
text-shadow: 2px 2px 2px #000000;
        }
        
     .mySlides{
     display:none;
     }
        
        
        .column8, .column9,.column2a,{
            
            text-align: justify;
            font-size: 3.6vw;
            font-family: Bookman;
            width: 100%;
            padding:5px;
            color:black;
           
        
        
        }
    }
     @media (max-width: 768px) {

        .column3, .column3a, .column4b{
            display: none;
        }
    }
       @media (max-width: 768px) {

 .imagecontainer {
    width: 100%;
    height: 600px;
    overflow: hidden;
        }
    }
    
    
    
@media (max-width: 768px) {

	a.readmore {
		font-family: Bookman;
		font-style: italic;
		color: red;
		font-size: 3.6vw;
		font-weight: bold;
	}
}

     
        @media (max-width: 768px) {

            .headerleft {
                width: 100%;
                text-align: center;
              
            }
            
        }

 
 
@media (max-width: 768px) {

        .column5 {
            display: none;
        }
    }
    @media (max-width: 768px) {

        .column1base {
            display: none;
        }
    }

    @media (max-width: 768px) {

        .column4Top {
            display: none;
        }
    }

    @media (max-width: 768px) {

        .topnav {
            overflow: hidden;
            text-align: justify;
            margin-left: auto;
            height: auto;
            background: linear-gradient(#252525, #0b0a0a);
            margin: 0;
            color: white;
         
        }
    }
   
    @media (max-width: 768px) {

        .columnNav {
            width: 100%;
            color: white;
         
        }
        .salescenter
{
   text-align: justify; 
}
    }
 
        @media (max-width: 768px) {

            .column2, .column2a {
               box-sizing: border-box;
            }
        }
    @media (max-width: 768px) {

      
    }

           @media (max-width: 768px) {

            .impacttext {
	text-align: justify;
    vertical-align: middle;
    font-family: Bookman;
    color:#7d0101;
    padding-top: 10px;
    font-size: 9vw;

            }
        }
        
        
        
        @media (max-width: 768px) {

            a.footerleft, .footerleft, .footerwrap{
                padding: 0px;
                font-size: 3.6vw;
                font-family: Bookman;
                color:black;
                width:100%; 
            }
        }
           @media (max-width: 768px) {

           .topleft{
                padding: 10px;
                font-size: 70px;
                font-family: Bookman;
                color:white;
                height:24px;
                text-shadow: 2px 2px 2px #000000;
            }
        }
             @media (max-width: 768px) {

           .topleftsmall{
                padding: 10px;
                font-size: 16px;
                font-family: Bookman;
                color:white;
                width:100%;
                text-shadow: 2px 2px 2px #000000;
            }
        }
        
        
    @media (max-width: 768px) {

        a:hover,.topnav a:hover ,.topnavgrow a:hover{
            color: white;
        }
    }
    @media (max-width: 768px) {

     .topnav a ,.topnavgrow a{
            color: white;
        }
    }
    @media (max-width: 768px) {

        .topnavgrow a:hover{
            color: white;
        }
    }
    @media (max-width: 768px) {

       .topnavgrow a{
            color: white;
        }
    }


    @media (max-width: 768px) {

        .column1Top {
            display: none;
        }
    }

    @media (max-width: 768px) {

        .base {
            width: 100%;
            background-color: black;
            text-align: center;
            font-family: Bookman;
            color: white;
            padding-top:10px;
            font-size: 3.6vw;
            box-sizing: border-box;
        }
    }

    
    
    
    
    
    
    
      @media (max-width: 768px) {

 .button {
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: justify;
  text-decoration: none;
  display: inline-block;
  font-size: 3vw;
} 
    }
    
    
      @media (max-width: 768px) {

.button:hover {
  background-color: black;
  color: white;
}
    }
    
    
    
    


    @media (max-width: 768px) {

        .Nav1 {
            width: 100%;
        }
    }
    @media screen and (max-width: 768px) {
        .topnavgrow a:not(:first-child) {
            display: none;
        }
    }
    @media screen and (max-width: 768px) {
         .topnav a:not(:first-child) {
            display: none;
        }

        .topnav a.icon{
            float: right;
            display: block;

        }
    }
    @media screen and (max-width: 768px) {
        .topnavgrow a.icon{
            float: right;
            display: block;
        }
    }

    @media screen and (max-width:768px) {
         .topnav.responsive {
            position: relative;
        }

       .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive a {
                float: none;
                display: block;
                text-align: justify;
            }
    }
    @media screen and (max-width:768px) {
        .topnavgrow.responsive{
            position: relative;
        }

            .topnavgrow.responsive .icon{
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnavgrow.responsive a {
                float: none;
                display: block;
                text-align: justify;
            }
    }


	