html,body{
margin:0;
padding:0;
}

body{
background-colour: white;
}

a:link, a:visited, a:hover, a:active{text-decoration: none;}


.titlea{
font-family: calibril;
font-size: 200%;
line-height: 160%;
color: dimgray;
text-align: center;
font-weight: 200;
text-transform: uppercase;
}



#wrapper{
width: 100%;
display: block;
height: 1000px;
float: left;
} 

#head{
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
margin-top:0%;
padding: 5%;
height:1000px;
font-family: arial;
font-size: 10pt;
text-align: center;

}


#headc{
background: white;
padding:0%;
width: 84%;
margin-left: 8%;
margin-right: 8%;
float: left;
font-family: arial;
margin-top: 0%;
}





.basenav:link{text-decoration: none; color: #9A9A9A;}
.basenav:visited{text-decoration: none; color: #9A9A9A;}
.basenav:hover{text-decoration: none; color: darkcyan;}
.basenav:active{text-decoration: none; color: darkcyan;}

#contentbox{
display: block;
background: white;
width: 100%;
float: left;
margin-left: 0%;
margin-right: 0%;
}

#contenthold{

width: 40%;
margin-left: 9%;
float: left;
margin-top: 2%;
margin-bottom: 1%;
text-align: center;
}
 
 #contenthold3{

width: 40%;
margin-left: 0%;
float: left;
margin-top: 2%;
margin-bottom: 1%;
text-align: center;
}

#contenthold2{
width: 35%;
float: left;
margin-top: 2%;
margin-bottom: 1%;
margin-left: 2%;
margin-right: 6%;
text-align: center;
}

#contenthold4{
width: 33%;
float: left;
margin-top: 2%;
margin-bottom: 1%;
margin-left: 11%;
margin-right: 2%;
text-align: center;
}





#border{
display: block;
width: 100%;
background: linear-gradient(180deg, goldenrod, firebrick, yellowgreen);
background: -webkit-linear-gradient(180deg, goldenrod, firebrick, yellowgreen);
background: -o-linear-gradient(180deg, goldenrod, firebrick, yellowgreen); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, goldenrod, firebrick, yellowgreen); /* For Firefox 3.6 to 15 */
height: 12px;
}

.left{
margin-left: 7%;
float:left;
}

.title{
font-family: arial;
font-size: 12pt;
color: rgba(266, 187, 45, 0.8);
text-shadow: 1px 1px 1px #000;
text-align: center;

}

.title2{
font-family: arial;
font-size: 25px;
color: rgba(226, 187, 45, 0.8);
text-shadow: 2px 2px 2px #000;
float: left;

}




#blocks{
background: white;
margin-left: 6px;
margin-right: 6px;
margin-top: 5%;
width: 250px;
height: 370px;
float: left;
font-family: arial;
font-size: 100%;
text-align: center;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
border: 1px solid lightgray;
}


.center{
display: block;
margin-left: -5%;
}


.bar{
width: 100%;
margin-left: 0%;
height: 2px;
float:left;
background: rgba(0, 0, 0, 0.8);
display: block;
}

.fill{
width: 100%;
margin-left: 0%;
float: left;
display: block;
font-family:arial;
}

.info{
width: 8%;
float: left;
margin-left: 2%;
display: block;
font-family: candara;
}

.info2{
width: 18%;
float: left;
margin-left: 2%;
display: block;
font-family: candara;
text-align: center;
}

.address{
text-align: left;
}

.info3{
width: 18%;
float: left;
margin-left: 2%;
display: block;
}

.info4{
margin-top: 0.5%;
width: 47%;
float: left;
margin-left: 3%;
display: block;
}


.fin{
width: 100%;
margin-left: 0%;
height: 90px;
float: left;
background: black;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
display: block;
text-align: center;
color:khaki;
font-size:8pt;
font-family:arial;
}
			
			


.baselinks{
 font-family: arial;
 font-weight: bold;
 font-size: 10pt;

}
.baselinks:link  {text-decoration: none; color: crimson;}
.baselinks:visited {text-decoration: none; color: crimson;}
.baselinks:hover {text-decoration: none; color: goldenrod;}
.baselinks:active {text-decoration: none; color: goldenrod;}


 .rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.margin{
margin-left: 60%;
float:left;
}

.justify{
text-align: justify;
margin-left: 5%;
margin-right: 5%;
}


.smallblocks{
width: 25%;
margin-left: -65%;
float: left;
}

.smallblocks2{
margin-left: 10%;
width: 80%;
float: left;
}

#imagebox1{
width: 40%;
padding: 8px;
background: white;
text-align: center;
border: 1px solid silver;
float:left;
margin-right: 2%;
margin-bottom: 1%;
}

 #imagebox2{
width: 40%;
padding: 8px;
background: white;
text-align: center;
border: 1px solid silver;
float:right;
margin-right: 0%;
margin-left: 2%;
margin-bottom: 1%;
}



.fliphold{
width: 95%;
float: left;
text-align: left;	
margin-left: 5%;	
	
}

#flip
{
margin-top: 2%;
width: 100px;
padding: 5px;
margin-left: 2%;
font-family: calibril;
background: rgb(21,21,21);
color: white;
text-align: center;
font-size: 11pt;
font-weight: bold;
border-radius: 2px;
box-shadow: 0px 1px 3px 1px gainsboro;
cursor: pointer;
display: inline-block;
vertical-align: top;
}

#panelhold{
width: 98%; 
margin-left: 1%; 
margin-right: 1%;
float: left; 
text-align: left;	
	
	
}

#panel
{

width: 50%;
display: inline-block;
vertical-align: top;
height: auto;
margin-left: 0%;
font-family: arial;
padding: 1%;
color: gainsboro;
font-size: 9pt;
font-weight: bold;
border-radius: 2px;
box-shadow: 0px 1px 3px 1px gainsboro;
display: none;
}

#flip:hover{
cursor: pointer;
background:firebrick;
}


#panelbox{
width: 165px;
display: inline-block;
vertical-align: top;
text-align: left; 
text-decoration: none;
list-style-type: none;
}

#panelbox li, #panelbox2 li{
width: 100%; 
padding: 0;
padding-top: 1px; 
padding-bottom: 1px;
float: left;	
	
}

#panelbox2{
width: 165px;
display: inline-block;
vertical-align: top;
text-align: left;
text-decoration: none;
list-style-type: none;
}



.panelbox{text-decoration: none; font-family:calibri; font-size:8pt;}
.panelbox:link{text-decoration:none; color:darkslategray;}
.panelbox:visited{text-decoration:none; color:darkslategray;}
.panelbox:hover{text-decoration:none; color:firebrick;}
.panelbox:active{text-decoration:none; color:firebrick;}

.panelhead{
font-family: calibril;
font-weight: bold;
font-size: 11pt;
color: black;
}

.panelborder{
margin-top: 0%;
border: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
}

#panelblock{
display: block;
margin-left: 0%;
width: 100%;
}

.icon{
display: block;
width: 50%;
margin-left: 41.5%;
float: left;
}


.basic{
width: 100%;
margin-left: 0%;
float: left;
background: white;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1);
display: block;
text-align: center;
color:darkslategray;
font-size:8pt;
font-family:arial;
}	

.marquee2{
color: silver;
font-weight: normal;
width: 100%;
padding:0%;
font-size:100%;
font-family:arial;
text-align: center;
border-radius: 2px;
margin-top: 0%;
}

.marq2{
 font-family: arial;
 font-weight: normal;
 font-size: 0.938em;

}

.marq2:link  {text-decoration: none; color: silver;}
.marq2:visited {text-decoration: none; color: silver;}
.marq2:hover {text-decoration: none; color: darkseagreen;}
.marq2:active {text-decoration: none; color: darkseagreen;}




.marquee{
color: goldenrod;
font-weight: bold;
width: 100%;
padding:0.5%;
font-size:110%;
font-family:arial;
text-align: center;
border-radius: 2px;
margin-top: 0%;
}
.marq{
 font-family: arial;
 font-weight: bold;
 font-size: 0.938em;

}
.marq:link  {text-decoration: none; color: goldenrod;}
.marq:visited {text-decoration: none; color: goldenrod;}
.marq:hover {text-decoration: none; color: crimson;}
.marq:active {text-decoration: none; color: crimson;}

.products{
text-align:center;
font-size: 100%;
font-family: calibril;
font-weight: 400;
}

.products:link{text-decoration:none; color:dodgerblue;}
.products:visited{text-decoration:none; color:dodgerblue;}
.products:hover{text-decoration:none; color:olive;}
.products:active{text-decoration:none; color:olive;}

.endblock{
display:block;
width:100%;
height:10px;
margin-left: -4%;
padding:4%;
text-align: center;
float:left;
font-family: arial;
font-weight: bold;
font-size: 10pt;
}

.endblock:link{text-decoration:none; color:goldenrod;}
.endblock:visited{text-decoration:none; color:goldenrod;}
.endblock:hover{text-decoration:none; color:olive;}
.endblock:active{text-decoration:none;color:olive;}



#sidenav{
float: right;
margin-right: 1%;
background: rgba(150, 220, 125, 0.4);
padding:2px;
width: 60px;
border-radius: 2px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
text-align:center;
font-family: arial;
font-size:8pt;
}

#sidenav2{
display: block;
background:rgba(0,0,0,0.3);
border-radius:2px;
float: right;
width:100px;
padding:14px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.sidenav2{
font-family: arial;
color: white;
font-weight: bold;
font-size: 9pt;
text-align: center;

}

.sidenav2:link{text-decoration:none; color:white;}
.sidenav2:visited{text-decoration:none; color:white;}
.sidenav2:hover{text-decoration:none; color:white;}
.sidenav2:active{text-decoration:none; color:white;}

#nav{
width: 100%;
	float: left;
	padding: 0;
	margin: 0 0 1% 0;
	list-style: none;
background: -webkit-linear-gradient(#66B9B9, steelblue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#66B9B9, steelblue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#66B9B9, steelblue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#66B9B9, steelblue); /* Standard syntax */
box-shadow: 2px 3px 4px rgba(0,0,0,0.4);
}

#nav li {
	float: left; 
	list-style: none;
	}

#nav li a {
		display: block;
		padding: 16px 30px;
		text-decoration: none;
		font-family: candara;
		font-weight: bold;
		color: gold;
		font-size: 100%;
		text-shadow: 1px 1px grey;
	 }
	 
#nav li a:hover {
	color: white;
	background-color: rgba(202, 148, 41, 0.5);
	
	}
		

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }
	  
@media (max-width: 1279px) and (min-width: 701px) {


	  
  }
@media (max-width: 700px) and (min-width: 500px) {



}

@media (max-width: 499px) and (min-width: 260px){

}

@media (max-width: 259px){


}

	





@media (max-width: 650px) and (min-width: 361px){



.left{
float: left;
margin-top: 0%;
margin-left: 0%;
}



}


@media (max-width: 600px) and (min-width: 316px) {

.titlea{
font-size: 140%;
}

#headc{
background: white;
padding:0%;
width: 88%;
margin-left: 6%;
margin-right: 6%;
float: left;
font-family: arial;
margin-top: 0%;
}


}


@media (max-width: 600px) {

#imagebox1{
width: 88%;
float:left;
margin-left: 3.5%;
margin-right: 5%;
margin-bottom: 2%;

}

#imagebox2{
width: 88%;
float:left;
margin-left: 3.5%;
margin-right: 5%;
margin-bottom: 2%;

}

}


@media (max-width: 950px) {
#contenthold{
width: 98%;
float: left;
margin-left: 1%;
margin-right: 1%;
text-align: center;
}

#contenthold2{
width: 92%;
float: left;
margin-left: 4%;
margin-right: 4%;
text-align: center;
}

#contenthold3{
width: 98%;
float: left;
margin-left: 1%;
margin-right: 1%;
text-align: center;
}

#contenthold4{
width: 92%;
float: left;
margin-left: 4%;
margin-right: 4%;
text-align: center;
}

#contentholda{
width: 100%;
float: left;
}

#contentholdb{
width: 100%;
float: left;
}
}





@media (max-width: 760px) and (min-width: 400px) {

.info{
width: 18%;
float: left;
margin-left: 2%;
display: block;
font-family: candara;
}

.info2{
width: 38%;
float: left;
margin-left: 2%;
display: block;
font-family: candara;
text-align: center;
}


.info3{
width: 38%;
float: left;
margin-left: 2%;
display: block;
}

.info4{
margin-top: 1%;
width: 90%;
float: left;
margin-left: 5%;
display: block;
}

}



@media (max-width: 399px) {

.info{
width: 90%;
float: left;
margin-left: 5%;
display: block;
font-family: candara;
text-align: center;
}

.info2{
width: 96%;
float: left;
margin-left: 2%;
display: block;
font-family: candara;
text-align: center;
}

.address{
text-align: center;
}
.info3{
width: 96%;
float: left;
margin-left: 2%;
display: block;
text-align: center;
}

.info4{
margin-top: 1%;
width: 98%;
float: left;
margin-left: 1%;
display: block;
}

}






	








@media (max-width: 360px)and (min-width: 316px) {





.left{
float: left;
margin-top: 0%;
margin-left: 0%;
}



}





@media (max-width: 315px) { 

.left{
float: left;
margin-left: 0%;
}

.titlea{
font-size: 135%;
}

#headc{
background: white;
padding:0%;
width: 92%;
margin-left: 4%;
margin-right: 4%;
float: left;
font-family: arial;
colour: rgba(0,0,0, 0.5);
}







}
@media (max-width: 359px) and (orientation: Landscape) {


#nav li a {
		display: block;
		padding: 4px 80px;
		text-decoration: none;
		font-family: candara;
		font-weight: bold;
		color: khaki;
		font-size: 13pt;
	 }

	 
#blocks{

background: white;
margin-left: 0%;
margin-right: 0%;
margin-top: 5%;
width: 100%;
height: 360px;
float: left;
font-family: arial;
font-size: 100%;
text-align: center;	
}
	
	
	

	}

	
@media (max-width: 800px) and (min-width: 500px) {

.fliphold {
width: 80%;
margin-left: 10%;
}

}


@media (max-width: 750px){
	
#panelbox li, #panelbox2 li{

padding-top: 3px; 
padding-bottom: 3px;
	
	
}

	
	
}


@media (max-width: 400px){
	
#panelbox li, #panelbox2 li{

padding-top: 5px; 
padding-bottom: 5px;
	
	
}
	
	
}