/*  CSS Document screen */
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');

body {
	font-family: 'Gotu', sans-serif; font-size: 16px; letter-spacing: 1px;
	margin: 0; padding: 0; color: #e6e6e6;
	background-attachment: fixed;
background-image: url(../images/background.jpg);
background-repeat: repeat;
background-position: center top;
}

#page { max-width: 1200px; margin: 0 auto; position: relative; border-right: 2px solid #555; border-left: 2px solid #555; background-color: #510806;  }

#wrap { border-right: 1px solid #510806; border-left: 1px solid #510806; max-width: 1204px;  margin: auto; }

/* Text   */

h1 {
	font-size: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 1px;
	padding-bottom: 1px;
	padding-left: 15px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CC3300;
	font-style: italic;
}
.h1_phone {
	font-size: .7em;
	padding-left: 15px;
}

.fullText { display: block; }
.smText { display: none; }
a.btn {
	font-size: .8em;
color: #fff;
background-image: linear-gradient(#777, #444);
border: 1px solid #000;
margin: 10px 0px 5px 0px;
padding: 8px 20px;
border-radius: 5px;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
}
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }
h5 { margin: 1.5em auto 1.5em auto; font-size: 1em; text-align: center; }
section .text h4 { margin: 25px 0 1em 0; font-size: 1em; font-weight: 700; }
p { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
/* ul  { margin-left: 5%; margin-top: -20px; padding-top: 0px; } */

a:visited { color: #FFFF00; }
a { color: #FFFF00; }
.accent { color: #cc0000;	font-weight: 600; }
.form_accent { color: #cc0000; }
/* Header  */

header { height: 244px; background: #222 url(../images/header_1200.jpg) no-repeat center top;
position: relative; border-bottom: 2px solid #ccc; }

header a.logo {
  z-index: 6;
  position: absolute;
	display: block; width: 300px; height: 180px;
  background: url(../images/logo_300px.png) no-repeat 0 0; background-size: contain;
  top: 10px; left: 20px;
}

header a.logo span { display: none; }

header div.name h1 { display: none; }
header div.tagline {
  position: absolute; top: 90px; right: 15%; color: #510806; font-size: 1.5em; font-weight: 700;	font-variant: small-caps; font-style: italic;
  text-shadow: 1px 1px 2px #fff;
}
header div.tagline .line2 { padding-left: 50px; line-height: .8em;}
header a.phone {
  position: absolute;
  top: 7px; right: 24px; color: #510806; font-size: 1.8em; font-weight: 700; text-shadow: 2px 2px 2px #fff; text-decoration: none;
	font-style: italic;
	z-index: 6;
}

/* Section - All   */
section { padding: 0 30px; }
section::after { content:''; display: block; clear: both; }

/* Section - Graphic   */

div.line { border-top: 2px solid #777; }

.indexImage img { width: 100%; max-height: 500px; height: auto; margin-bottom: 15px;   border-bottom: 2px solid #222;}
.large_img img { max-width: 1000px; width: 100%; }

section.index  .tagline { padding-top: 25px;  text-align: center; font-weight: 700; font-size: 1.1em; text-shadow: 2px 2px 2px #000; }

section.index  .top_half { width: 47%; margin-top: 5px;  margin-left: 1%; margin-right: 1%; text-shadow: 1px 1px 2px #000;
	float: left; }
section.index  .top_half ul { margin-bottom: 0px; padding-botton: 0px; }
section.gallery  .top_half { width: 47%; margin-top: 5px;  margin-left: 1%; margin-right: 1%; text-shadow: 1px 1px 2px #000;
	float: left; }
section.gallery  .top_half ul { margin-bottom: 0px; padding-botton: 0px; }

section.index  .half { width: 47%; margin-top: 0px;  margin-left: 1%; margin-right: 1%; text-shadow: 1px 1px 2px #000;
	float: left; }


/* Section -  main  */

section .text { margin-right: 5%; margin-left: 5%; margin-bottom: 2%; margin-top: 1%; }
.contact { width: 100%; margin:30px auto; }

div.slide-frame { border-top: 1px solid #2d0806; border-right: 1px solid #2d0806; border-left: 1px solid #2d0806; border-bottom: 4px solid #2d0806; background-color: #2d0806; max-width: 1000px; width: 100%; margin-right: auto; margin-left: auto;  }
section.gallery .tagline { padding-top: 25px;  text-align: center; font-weight: 500; font-size: 1.1em; text-shadow: 2px 2px 2px #000; }
.slide-frame { margin-top: 30px; margin-bottom: 100px; }
div.sp-slide { border: 1px solid #444;  }
/* Navigation */

nav {
  font-size: .9em;
  position: relative;
  padding: 197px 0 0 0;
  z-index: 5;
	  border-bottom: 2px solid #888;

}

nav::after { content:''; display: block; clear: both; }

nav a.mobile_menu {
	width: 32px;
	height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	position: absolute; top: 0px; left: 50%; margin-left: -16px;
	display: none;
}

nav ul { list-style: none; margin: 0; padding: 0px; border-bottom: 2px solid #bbb; }

/* Hover over sub menu */
nav ul li:hover { background-color: #333; }
nav ul li:hover > ul { display: block; }

nav ul li a {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  width: 165px;
  position: relative;
	border-right: 1px solid #444;

 }
nav ul li a:visited { color: #fff; }
/*  top menu hover */
nav ul li a:hover {  background-image: linear-gradient(#444, #777); }

nav ul ul { position: absolute; top: 100%; background-color: #444; display: none; }

nav ul ul li  { position: relative; }
nav ul ul li  a {  border-bottom: 1px solid #999; }
nav ul ul ul { left: 100%; top: 0px; }

/* top - level  */
nav > ul { padding-left: 0px;   }
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 13px 20px;  }

nav a[aria-haspopup="true"]::after {
  content:'';
  display: block; width: 0px; height: 0px;
  position: absolute;
  top: 16px; right: 15px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #fff;
}

nav > ul > li > a[aria-haspopup="true"]::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  left: 20px; right: auto;
  bottom: 6px; top: auto;
}




/* footer */

footer .column { float: left; width: 33%; text-align: center; margin-top: 25px; margin-bottom: auto; }


footer {
    color: #fff;
    font-size: .8em;
		margin: 40px auto 0px auto;
	background-color: #000;
	background-image: linear-gradient(#555, #2d0806, #2d0806, #2d0806, #2d0806);
	height: 110px;
	width: 100%;

}

/*  media querries  */


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

  header {
    height: 227px;  background: #222 url(../images/header_1100.jpg) no-repeat center top;
   }
	 header a.logo {
		 width: 259px; height: 155px;
		 background: url(../images/logo_250px.png) no-repeat 0 0; background-size: contain;
		 top: 18px; left: 10px;
   }
  header div.tagline {  top: 75px;  font-size: 1.3em;  }
  header a.phone {  top: 0px; right: 24px;  }
  nav {  padding: 180px 0 0 0;  }
  section .text { margin-right: 4%; margin-left: 4%; }



}

/*  media querries 950px   */

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

  body { font-size: .9em; }
  header {
    height: 199px;
    background: #222 url(../images/header_950.jpg) no-repeat center top;
   }
  header a.logo {
		width: 226px; height: 135px;
		background: url(../images/logo_225px.png) no-repeat 0 0; background-size: contain;
		top: 12px; left: 10px;
  }
  header div.tagline {  top: 70px;  font-size: 1.2em;  }
  header a.phone {  top: 0px; right: 24px;  font-size: 1.8em;   }
  nav {  padding: 154px 0 0 0;  }
  h1 {	width: 60%;	  }
  .accent { font-weight: normal; }
  section .text { margin-right: 3%; margin-left: 3%; }

}


/*  media querries 800px   */

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

  body { font-size: .9em; }
  header {
    height: 167px;
    background: #222 url(../images/header_800.jpg) no-repeat center top;
   }
	 header a.logo {
		 width: 190px; height: 113px;
 		background: url(../images/logo_190px.png) no-repeat 0 0; background-size: contain;
 		top: 10px; left: 10px;
 	}
  header div.tagline {  top: 65px;  font-size: 1.1em; right: 6%; }
  header a.phone {  top: 0px; right: 24px;  font-size: 1.8em;   }
	section.index  .top_half ul::after { content:''; display: block; clear: both; }
section.index  .top_half ul { margin-bottom: 25px; }
	section.index  .half { width: 98%; margin-top: 0px;  margin-left: 1%; margin-right: 1%;
		float: none; display: block; font-size: 1.3em; }

  nav {  padding: 129px 0 0 0; font-size: .8em; }
  nav > ul > li > a { width: auto; padding: 9px 14px 10px 14px;  }
  h1 {	width: 60%;	 }
  section { padding: 0 15px; }
  section .text { margin-right: 2%; margin-left: 2%; }

  nav > ul > li > a[aria-haspopup="true"]::after {  bottom: 4px; top: auto;  }

	footer .column img { width: 125px; height: auto;  }

}

/*  media querries 625px   */

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

 .fullText { display: none; }
 .smText { display: block; }
  body { font-size: 1em;  }
  header {
     height: auto; min-height: 156px;
    background: #333 url(../images/header_625.jpg) no-repeat center top;
   }
	 header a.logo {
		 width: 160px; height: 95px;
 		background: url(../images/logo_160px.png) no-repeat 0 0; background-size: contain;
 		top: 55px; left: 10px;
 	}

  header div.tagline {  display: none;   }
  header a.phone {
		 top: 69px; right: 24px;
		 text-shadow: 1px 1px 2px #000;
		 position: absolute;
		 display: block;
		 text-align: center;
		 font-size: 1.1em;
		 color: #fff;
		 background-image: linear-gradient(#ff0000, #4f0000);
		 border: 1px solid #000;
		 margin: 10px 0px 5px 0px;
		 padding: 10px 25px;
		 border-radius: 5px;
		 font-style: italic;
		 z-index: 6;

	 }
	 section.index  .top_half  { width: 96%; float: none; display: block; padding-bottom: 20px; font-size: 1.4em; }
	section.index  .top_half ul { padding-left: 15px; margin-bottom: -40px; }
	section.index  .top_half ul li { margin-left: 15px; padding-bottom: 3px; }
	section.gallery  .top_half  { width: 96%; float: none; display: block; padding-bottom: 20px; font-size: 1.4em; }
 section.gallery  .top_half ul { padding-left: 15px; margin-bottom: -40px; }
 section.gallery  .top_half ul li { margin-left: 15px; padding-bottom: 3px; }
	 section.index  .half { display: block; width: 96%; margin-left: 2%; margin-right: 2%;
	 	font-size: 1.2em;  padding-top: 20px; }
  h1 {	width: 60%;	 font-size: 1em; }
	h4 { margin-top: 10px; margin-left: auto; margin-right: auto; }
  section { padding: 0 5px; }
  section .text { margin-right: 2%; margin-left: 2%; }

	.contact { font-size: .9em; margin:20px auto; }
  nav {  height: 0px; overflow: hidden;  padding: 157px 0 0 0; font-size: 1em; }
  nav a.mobile_menu {	display: block; }
  nav > ul > li > a { width: 100%; padding: 9px 14px 10px 14px;  border-bottom: 1px solid #444; }
  nav > ul > li { float: none; }
  nav ul  li  a {  padding-top: 3px; }
  nav ul ul { position: relative;  }
  nav ul ul li  a {  width: 100%; }
	footer .column img { width: 85px; height: auto;  }
	footer { font-size: .6em; }

}


/*  media querries 525px   */

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

  body { font-size: .9em;   }
  header {
     height: auto; min-height: 143px;
    background: #002425 url(../images/header_525.jpg) no-repeat center top;
   }
	 header a.logo {
		 width: 160px; height: 95px;
		background: url(../images/logo_160px.png) no-repeat 0 0; background-size: contain;
		top: 44px; left: 10px;
 	}
	nav {  height: 0px; overflow: hidden;  padding: 143px 0 0 0; font-size: 1em; }
	 section .text { margin-right: 1%; margin-left: 1%; }
  header div.tagline { display: none;  }
  header a.phone {  top: 60px; right: 20px;  font-size: 1.1em;  padding: 10px 20px;  }
	section { padding: 0 2px; }
section.index  .top_half ul {  padding-left: 15px; margin-left: 0px;  }
	.contact { font-size: .8em; margin: 10px auto; }

	footer .column img { width: 70px; height: auto;  }
	footer { font-size: .5em; }

}
/*  media querries 525px   */

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

  body { font-size: .9em;  }
  header {
     height: auto; min-height: 143px;
    background: #002425 url(../images/header_525.jpg) no-repeat center top;
   }
	 header a.logo {
		 width: 160px; height: 95px;
		background: url(../images/logo_160px.png) no-repeat 0 0; background-size: contain;
		top: 44px; left: 10px;
 	}
	nav {  height: 0px; overflow: hidden;  padding: 143px 0 0 0; font-size: 1em; }
	 section .text { margin-right: 1%; margin-left: 1%; }
  header div.tagline { display: none;  }
  header a.phone {  top: 60px; right: 20px;  font-size: 1.1em;  padding: 10px 20px;  }
	section { padding: 0 2px; }
section.index  .top_half ul {  padding-left: 15px; margin-left: 0px;  }
	.contact { font-size: .8em; margin: 10px auto; }

	footer .column img { width: 70px; height: auto;  }
	footer { font-size: .5em; }

}