/* CSS Document */

/* Headings */

h1, h2, h3, h4, h5, h6, h7 ,h8, h9 { font-weight: bold; }
h1 { font-size: 30px; color: red; line-height: 1.25; } 
h2 { font-size: 24px; color: red; font-style: italic; line-height: 30px; }
h3 { font-size: 24px; color: red; line-height: 30px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
h7 { font-size: 24px; color: #c0c0c0; line-height: 1; }
h8 { font-size: 18px; color: #c0c0c0; line-height: .5; }
h9 { font-size: 24px; color: Black; line-height: 1.25; }

.h1img { border-radius: 20px; width: 560px; }
.h2img { border-radius: 10px; width: 180px; height:auto; border: 2px solid black;}
.h3img { border-radius: 10px; width: 100%; height:auto; margin-bottom: 10px;}


p1 {font-size: 18px; 	color: #c0c0c0; line-height: .5; font-weight: bold;}
p2 {font-size: 18px; 	color: black;	line-height: .5; font-weight: bold;}
p3 {font-size: 16px; 	color: #c0c0c0; line-height: .5; font-weight: bold;}
p4 {font-size: 16px; 	color: black; 	line-height: .5; font-weight: bold;}
p5 {font-size: 16px; 	color: white; 	line-height: .5; font-weight: bold;}

.email  {font-size: 36px; padding: 10px;}
.email a:hover 		{ Color: white; background-color: blue; border-radius: 10px; }


body      {	background-color: red;	padding: 0px; 	margin: 0px; box-sizing: border-box;
			font-family: Times, Times New Roman, Cambria, Arial, Helvetica, sans-serif;	
			background-image:url("../Images/wood_background .jpeg")}

#header {	height: 190px;		 	max-width: 1080px;		
			border-radius: 20px 20px 20px 20px;		padding-top: 20px;	
			background-color: #645745;		text-align: center;
			margin-left: auto;		margin-right: auto;		margin-top: 20px;}

#logo     {	height: 120px;	width: 220px;	margin: 20px;	padding: 10px;
			background-color: white;	border-radius: 10px;					}
	



/* -------------------------CONTENT AREA------------------------------------------- */

#content  { height: 100%;	max-width: 1080px;	width: 100%;	clear:both;
			background-color: #222;			border-radius: 20px;
			padding: 20px;						margin: 20px; 
			box-sizing: border-box;				text-align: center;
			margin-left: auto;		margin-right: auto;		margin-top: 20px;}


.models { 	height: 100%;		max-width: 1080px; 		width: 75%;	clear:both;	
			background-color: #c0c0c0;		border-radius: 20px 20px 20px 20px;
			padding: 20px;		margin-left: auto;		margin-right: auto;		margin-top: 40px;
			font-size: 24px; 	text-align: center;
	
}


/* ----------------------------------FOOTER AREA---------------------------------------*/

#footer   {	height: 100px;		max-width: 1080px; 		width: 100%;	clear:both;	
			background-color: #645745;		border-radius: 20px 20px 20px 20px;
			padding: 20px 0px 20px 0px;		margin-left: auto;		margin-right: auto;		margin-top: 20px;	margin-bottom: 20px;
			font-size: 24px; 				Font: bold; 	text-align: center;
							}

#footbox1 { position: center; line-height:.5;}
#flag1    { margin: 0px 0px 0px 20px;	border-radius: 5px; float: left;  }
#flag2	  { margin: 0px 20px 0px 0px;	border-radius: 5px; float: right; }


/*--------------------------------MOBILE SIZE CHANGES---------------------------------*/

@media (max-width:799px){
	#newsbox  		{ height: 30px;	width:75%;	background-color: black;	color: red;	margin: -15px 12.5%;	text-align:center; }
	#topleft 		{ width: 100%;		height: 50px;	border-radius: 20px; }
	#topright 		{ max-width: 800px;	width: 100%; 	border-radius: 20px;	background-position:center; }
	#topnav 		{ height: 40px; }
	#topnav ul li   { margin-top: 2px;} 
	#topnav ul li a { font-size: 20px; padding: 4px 10px 4px 10px; }
	#storefront 	{ border-radius: 10px; width: 90%; height:auto; border: 2px solid black; }
}

@media (max-width:600px){
	h3 				{ font-size: 18px;}
	#topnav ul li a { font-size: 20px;  }	
	#sidebar 		{ height: 170px; 	 width: 100%;	border-radius: 0px 0px 20px 20px; }
	#bizbox1		{ width: 160px; line-height: 0; font-weight: bold;}	
	#bizbox2		{ float: left;}
	#bizbox3 		{ width: 160px; line-height: .5; font-weight: bold; float: right; position: relative; Top:-72px}
	#biz-info 		{ height: 150px; font: 14px bold; }
	#storefront 	{ margin: 0px 20px; width: 130px;}
	#nameplate		{ display: none;}
	#content		{ min-height: 180px; 	height: 100%;	width: 100%; border-radius: 20px;}
	
}

@media (max-width:575px){
	h2 				{ font-size: 18px;}
	p1 				{ font-size: 14px;}
	#topnav 		{ height: 60px; }
	#topnav ul		{ line-height: .75;}
	#flag1			{ width: 60px;	Height:auto;}
	#flag2			{ width: 60px;	Height:auto;}
}

/*MOBIL*/
@media (max-width:360px){
	h2 				{ font-size: 14px;}
	#topright 		{ height: 120px;}
	#logo 			{ height: 80px;	width: 175px;	margin: 10px;	padding: 10px;}
	#topnav ul li a { font: 18px bold;  padding: 4px 5px 3px 5px;}
	#storefront 	{ border-radius: 10px; width: 110px; height:auto; border: 2px solid black; }
	#bizbox3 		{ width: 145px; }
	#footbox1		{ line-height: 1;}
}


/*-------------------AREA FOR PHOTO IMAGE SLIDERS------------------------------------*/

img { vertical-align: middle; }
.img1 { border-radius: 20px;  }

/* Position the image container (needed to position the left and right arrows) */
.container { position: relative; }

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

/* Add a pointer when hovering over the thumbnail images */
.cursor { cursor: pointer;}

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

/* Position the "next button" to the right */
.next { right: 0;	border-radius: 10px 0 0 10px; background-color: rgba(01, 0, 0, 0.8); opacity: 0.4;}
.prev { left: 0; 	border-radius: 0 10px 10px 0; background-color: rgba(01, 0, 0, 0.8); opacity: 0.4;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover { background-color: rgba(01, 0, 0, 0.8); opacity: 0.8;}

/* Number text (1/3 etc) */
.numbertext { color: red;	font-size: 18px;	font-weight: bold;   	padding: 8px 12px;		position: absolute;	top: 0; background-color: #222; border-radius: 20px; margin: 2px; 
}

/* Container for image text */
.caption-container {		text-align: center; 
  background-color: #222; 	border-radius: 20px;
  padding: 1px 1px; 		margin-top: 7px;		margin-bottom: 5px; 
  color: white; 			font-size:  24px; 		font: bold;
}

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

/* Six columns side by side */
.column { float: left; width: 16.66%; }

/* Add a transparency effect for thumnbail images */
.demo { opacity: 0.7; margin: 2px; }
.active,
.demo:hover { opacity: 1; }