/*....................................................................................................................................  */


@import url("fonts/droidsans.css");
@import url("fonts/texgyre.css");
* {padding:0; margin:0;}

.clear {
 clear:both;
}
.clear:after {
 display:block; 
 visibility:hidden; 
 clear:both; 
 height:0; 
 content: "."; 
}

html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:100%; height:100%;}
body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
a, a:link, a:visited, a:active {color:#1c5f75;}
#wrap {width:75%; margin:0 auto; padding-top:20px;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
nav, section, header, footer, article {display:block;}
#mainnav {width:100%; height:200px;  overflow: hidden;}

#tour { padding-top: 3%;padding-left: 72%;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */
} 

.tour-container {
  width: 200px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }

/* #homeheader {background:url(images/mainheader.png) no-repeat; height:320px;} */
/* #homeheader {background:url(images/mainheader001.jpg) no-repeat; height:240px;} */
/* #homeheader {background:url(images/mainheader001.jpg) no-repeat; width: 100%; height:458px;} */
#homeheader {width: 100%; height:458px; margin-bottom: 50px;}

#homeheader img {background:url(images/mainheader001.jpg) no-repeat; width: 100%; height:458px; }

#page {width:962px; margin:auto; padding:0 20px;}
.normalpage {background:url(images/normalpagebg.png) center top no-repeat; padding-top:13px;}
.normalpage.mainheading {background: url(images/graybgtop.gif) center bottom no-repeat; height:60px; line-height:60px; text-align:center; margin:0 0 1px 0!important; color:#251f1b!important;}
.introhead {font-size:1.8em;}
/* padding:10px 25px; background:url(images/graybgtop.gif) center bottom no-repeat; margin-bottom:15px; */
/* #introcol { width:100%; padding:10px 25px; background:url(images/introcolsbg.jpg) center bottom no-repeat; margin-bottom:15px;}  */

 /* #introcol {background:url(images/introcolsbg.jpg) no-repeat;  height:211px;} 
#introcol .leftcol { width:100%; }
#introcol .rightcol { width:100%;}
#introcol .midcol {width:100%;} */


#introcol {background:url(images/introcolsbg.jpg) no-repeat; height:211px;}
/* #introcol .leftcol { width:260px; padding:15px; float:left;}
#introcol .rightcol { width:260px;margin: 0 30px  0; padding:15px; float:right;}
#introcol .midcol {width:260px; margin: 0 320px  0; padding: 15px 10px;}
 */

#mindex p {font-size:1.3em; line-height:1.5em;}
#introcol h3 {font-size:2.0em;  color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase; margin-bottom:15px;}
.fourcols .col {width:45%; float:left; padding:20px 2px;  margin-bottom:15px;}

.fourcols h3 { font-size:1.8em; color:#09b6fa;  margin-bottom:15px;}
#mindex a {text-decoration:none;}
a:hover, #mindex a:hover {color:#09b6fa; text-decoration:underline!important;}


#services p {font-size:1.6em; line-height:1.9em;}
#services a {text-decoration:none;}
a:hover, #services a:hover {color:#09b6fa; text-decoration:underline!important;}

#site p {font-size:1.6em; line-height:1.9em;}
#site a {text-decoration:none;}
a:hover, #site a:hover {color:#09b6fa; text-decoration:underline!important;}


#about p {font-size:1.6em; line-height:1.9em;}
#about a {text-decoration:none;}
a:hover, #about a:hover {color:hsl(197, 96%, 51%); text-decoration:underline!important;}


footer {background:#504842 url(images/bottombg.jpg) repeat-x; color:#666;}

#tour ul {float:none;  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px;}
#tour ul li {display:grid; text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; float:left; margin:0 15px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:65%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px;}
#mainnav ul li {display:inline; text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block; float:left; margin:0 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}
#homeheader h2 {display:block; width:450px; float:left; padding:85px 0 0 40px; color:#fff; font:normal 1.4em 'DroidSansRegular', Verdana, Geneva, sans-serif; line-height:2.4em;}
#homeheader h2 span {display:block; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif!important; color:#89260f; text-shadow:#f98465 1px 1px 1px; line-height:1em!important; margin-bottom:20px;}
#homeheader .headerimg {float:right; padding:55px 80px 0 0;}
#bottom {width:100%; margin:auto; padding:30px 0; font-size: 1.2rem; text-align:center;}
#credits {background:#2d2724; padding:10px; text-align:center; color:#ccc;} 
footer a, #bottom a, #credits a {color:#fff; text-decoration:none!important;}
.normalpage {background:url(images/normalpagebg.png) center top no-repeat; padding-top:13px;}
.normalpage .subhead {background: url(images/graybgtop.gif) center bottom no-repeat; height:60px; line-height:60px; text-align:center; margin:0 0 1px 0!important; color:#251f1b!important;}
.subhead h2 {font-size:1.8em!important;}

.postmain .entry{margin-left: 40px; width:100%; height:auto;}
.postmain p {width:90%; margin-bottom:15px; font:larger 2.0em 'TeXGyreAdventor', Arial, sans-serif;}
.postmain { padding:10px 25px; background:url(images/graybgtop.gif) center bottom no-repeat; margin-bottom:15px;  display:flex; }
.postmain h3 {font:bold 1.8em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; margin-bottom:15px;}


.post { padding:10px 25px; background:url(images/graybgtop.gif) center bottom no-repeat; margin-bottom:15px;  display:flex; }
.post h3 {font:bold 1.8em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; margin-bottom:15px;}
.post p {width:240px; margin-bottom:15px; font:larger 2.0em 'TeXGyreAdventor', Arial, sans-serif;}
/* .post img{margin-left:30%; width:70%; height:auto;}  */
 .post img{margin-left:15%;  width:80%; height:auto;} 

.post .entry{margin-left: 40px; width:100%; height:auto;}

.postabout {padding:10px 25px; background:url(images/graybgtop.gif) center bottom no-repeat; margin-bottom:15px;}
.postabout h3 {font:bold 1.8em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; margin-bottom:15px;}
.postabout p {margin-bottom:15px; font:larger 2.0em 'TeXGyreAdventor', Arial, sans-serif; }
.postabout img{margin-left:32%;  width:35%; height:auto;}
.postabout .entry{margin: 40px; width:90%; height:auto;  display:flex; }
/* .toleft{float: left;} */

/* ="100%" height="448" */
/* .imageholder {float: right; display: inline;} */

.imageholder img {display:block; background:#fff; padding:5px; border:solid 1px #ccc; }

.postcontact {padding:10px 25px; background:url(images/graybgtop.gif) center bottom no-repeat; margin-bottom:15px;}
.postcontact h3 {font:bold 1.8em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; margin-bottom:15px;}
#footter{
  width: 100%;
}
.contact-info {width:100%; color:#f7f7f7; font-size: 1rem;  }
.contact-info a{color:#f7f7f7; font-size: 2.5rem;}
.normalpage .fourcols h3 {color:#34464d!important;}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	
	line-height: 1.6;
}

/* Header styles */
header {
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background-color: #030303;
	color: white;
	height: 4rem;
	font-size: 1.2rem;

}

nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* banner section styles */
.banner {
	text-align: center;
	background-color: #ffffff;
	margin: 0 auto;
}

.banner img {
	max-width: 100%;
	height: auto;
}

/* Contact info styles */
.contact-info {
	text-align: center;
	padding: 50px 0;
	/* background-color: #f7f7f7; */
}

.contact-info h2 {
	margin-bottom: 20px;
}

/* Footer styles */
footer {
	padding: 20px;
	text-align: center;
	background-color: #333;
	color: white;
}
/* Hamburger styles */
.hamburger {
	display: none;
	color: rgb(0, 0, 0);
	font-size: 1.5rem;
	cursor: pointer;
}

/* Media queries for responsiveness */
@media only screen and (max-width: 768px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:768px; height:100%;}
	
	
	.logo {
		display: none;
	}

#footter{
  width: 1000px;
}
#wrap {
    width: 632px;
height: auto;
}
/* #page {width:762px; margin:auto; padding:0 20px;} */
 /* #mainnav {width:100%; height:100px; overflow: hidden;}
#mainnav ul {float:right; width:65%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px;} */

#mainnav {
  height: 300px;
}
#mainnav ul {
  height: 300px;
  display: flex;
}

nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav { 
    width: auto;
	}
	
	#mainnav h1 { padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li { text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left:15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}


#tour { padding-top: 3%;padding-left: 75%;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */
} 

.tour-container {
  width: 200px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }

#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#tour ul li {display:inline; text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block;  margin-left:15px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



 .post img{ margin-left: 2%; width:90%; height:auto;} 
 .post p {width:200px; margin-bottom:15px; font:larger 2.0em 'TeXGyreAdventor', Arial, sans-serif;}


	
#footter{
  width: 1000px;
}
	
}

@media only screen and (max-width: 900px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:270; height:auto}
	
	.logo {
		display: none;
	}

#footter{
  width: 1000px;
}
#wrap {
    width: 732px;

}

nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav {
		height:300px;
	}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:100%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li { text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left: 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



#tour { padding-top: 3%;padding-left: 75%;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */
} 

.tour-container {
  width: 120px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
display:inline; /* Use flexbox layout */

  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  width: 100px;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }


#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; ; flex-wrap: wrap;}
#tour ul li { text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; flex-wrap: wrap;  margin-left: 1px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}

 .post img{ margin-left: 2%; width:90%; height:auto;} 
 .post p {width:200px; margin-bottom:15px; font:larger 2.0em 'TeXGyreAdventor', Arial, sans-serif;}

#footter{
  width: 1000px;
}


}
@media only screen and (max-width: 600px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:300; height:auto}
	
	.logo {
		display: none;
	}
#footter{
  width: 1000px;
}
#wrap {
    width: 532px;

}

nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav {
		height:200px;

	}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:100%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li {text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left: 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



#tour { 
	 padding-top: 3%;padding-left: 85%;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */

} 

.tour-container {
  width: 200px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
display:inline; /* Use flexbox layout */

  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  width: 100px;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }


#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; ; flex-wrap: wrap;}
#tour ul li { text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; flex-wrap: wrap;  margin-left: 1px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}


}

@media only screen and (max-width: 480px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:300; height:auto}

	.logo {
		display: none;
	}

#wrap {
    width: 360px;

}
p{
  flex-wrap: wrap;
}
nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav {
		height:200px;

	}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:100%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li { text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left: 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



#tour { 
	 padding-top: 3%;padding-left: 75%;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */

} 

.tour-container {
  width: 200px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
display:inline; /* Use flexbox layout */

  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  width: 100px;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }


#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; ; flex-wrap: wrap;}
#tour ul li { text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; flex-wrap: wrap;  margin-left: 1px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}

#footter{
  width: 1000px;
  margin-left: 200px;
}

}



@media only screen and (max-width: 415px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:300; height:auto}

	.logo {
		display: none;
	}

#wrap {
    width: 600px;

}
p{
  flex-wrap: wrap;
}
nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav {
		height:200px;
  margin-bottom: 20px;
width: 545px;
	}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:100%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li { text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left: 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



#tour { 
	 padding-top: 3%;padding-left: 550px;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */

} 

.tour-container {
  width: 120px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
display:inline; /* Use flexbox layout */

  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  width: 100px;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }


#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; ; flex-wrap: wrap;}
#tour ul li { text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; flex-wrap: wrap;  margin-left: 1px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}

#footter{
  margin-left: 200px;
  width: 1000px;
}

}





@media only screen and (max-width: 375px) {
	html {background: #f0f0f0 url(images/htmlbg.jpg) repeat; width:300; height:auto}

	.logo {
		display: none;
	}

#wrap {
    width: 600px;

}
p{
  flex-wrap: wrap;
}
nav ul {
	list-style: none;
	justify-content: space-between;
}

nav ul li a {
	font-size: 1.2rem;
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	background-color: #030303;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


body {background:url(images/topbg.jpg) repeat-x;  font-family :'DroidSansRegular', Verdana, Geneva, sans-serif; font-size:62.5%; color:#130000;}
h1, h2, h3 {font-family: 'TeXGyreAdventor', Arial, sans-serif;}
h4, h5 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

	#mainnav {
		height:200px;
  margin-bottom: 20px;
width: 545px;
	}

#mainnav h1 {float:left; padding:20px 0 0 25px; font: bold 3.2em 'TeXGyreAdventor', Arial, sans-serif; color:#09b6fa; text-shadow:#fff 1px 1px 1px; text-transform:uppercase;}
#mainnav h1 span {font-weight:normal!important; color:#191512!important;}
#mainnav ul { width:100%; font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; padding-top:25px; display: flex;}
#mainnav ul li { text-shadow:#fff 1px 1px 1px;}
#mainnav ul li a {text-decoration:none; display:block;  margin-left: 15px; padding-bottom:5px;}
#mainnav ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#mainnav ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}



#tour { 
	 padding-top: 3%;padding-left: 550px;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center the items horizontally */

} 

.tour-container {
  width: 120px;
  height: 600px;
  overflow: hidden;
  border: 2px solid #09b6fa;
}

.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
display:inline; /* Use flexbox layout */

  animation: scroll-vertical 10s linear infinite;
}
.tour-list li {
  text-align: center;
  width: 100px;
  border-bottom: 1px solid #ddd;
}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-55%);

  }
}
#tour li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 10px 0;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.shadow {
  filter: blur(4px);
}
.edge {
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.pushable {
  transition: filter 600ms;
}
.pushable {
  -webkit-tap-highlight-color: transparent;
}
.pushable {
  user-select: none;
}
.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}
.pushable {
    /* background: hsl(340deg 100% 32%); */
	width: auto;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
	
  }

  .front {
    display: block;
    /* padding: 12px 42px; */
    border-radius: 12px;
    font-size: 1.25rem;
    /* background: hsl(345deg 100% 47%); */
    background: #09b6fa;

    color: white;
    transform: translateY(-6px);
  }

  .pushable:active .front {
    transform: translateY(-2px);

  }
.pushable:focus:not(:focus-visible) {
    outline: none;}
 .front {
    will-change: transform;
    transition: transform 250ms;
  }

  .pushable:hover .front {
    transform: translateY(-6px);
  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
.front {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }


#tour ul {  font:bold 1.6em 'TeXGyreAdventor', Arial, sans-serif; ; flex-wrap: wrap;}
#tour ul li { text-shadow:#fff 1px 1px 1px;}
#tour ul li a {text-decoration:none; display:block; flex-wrap: wrap;  margin-left: 1px; padding-bottom:5px;}
#tour ul li a:hover {color:#09b6fa; text-decoration:none!important;}
#tour ul li.active a {color:#09b6fa; border-bottom:solid 3px #191512; text-decoration:none;}

#footter{
  margin-left: 200px;
  width: 1000px;
}

}