/*Reset Styling*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list], ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*Reset Styling*/


/*Navigation*/

nav {
  width: 100%;
  height: 60px;
  background-color:maroon;
  position: fixed;
  z-index: 1000;
}

ul {
margin:0 10px;
}

ul li {
  list-style: none;
  display: block;
  float: left;
  line-height: 50px;
  position: relative;
}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  font-family: arial;
  color:white;
  padding: 0 10px;
}

ul li a:hover {
  color:#CC0000;
}

ul li ul {
  display: none;
  width: 140px;
  margin: 0 auto;
  background-color: maroon;
  padding: 8px 12px;
  float: left;
  position: absolute;
  border-radius: 0 0 8px 8px;
}

ul li:hover ul {
  display: inline-block;
}
/*Navigation*/


.phone	{
	width:100%;
	margin:0 auto;
	padding:40px 10px;
	position:fixed;
	height:50px;
	background-color:gray;
	overflow:hidden;
}

.phone p	{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: white;
	font-weight: 500;
	font-style: italic;
	line-height: 120%;
	text-align: center;
	overflow:hidden;
}

.phone1	{
	width:100%;
	margin:0 auto;
	padding:40px 10px 15px;
	position:fixed;
	height:auto;
	background-color:gray;
	display:none;
	overflow:hidden;
}

.phone1 p	{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: white;
	font-weight: 500;
	font-style: italic;
	text-align: center;
}

.logo	{
	width:100%;
	margin:80px auto 0;
	display:block;
	overflow:hidden;
}


.wrapper	{
	width:100%;
	margin:0 auto;
	padding:20px 10px;
	overflow:hidden;
}

.top		{
	width:100%;
	margin:20px auto;
	display:inline-block;
	overflow:hidden;
}

.bottom		{
	width:100%;
	margin:20px auto;
	display:inline-block;
	overflow:hidden;
}

.pic1		{
	width:33%;
	margin:0 auto;
	height:auto;
	padding:10px 15px;
	float:left;
	overflow:hidden;
}

.pic2		{
	width:32%;
	margin:0 auto;
	height:auto;
	padding:10px 5px;
	float:left;
	overflow:hidden;
}

.pic3		{
	width:32%;
	margin:0 auto;
	height:auto;
	padding:10px 5px;
	float:left;
	overflow:hidden;
}

.intro		{
	width:100%;
	margin:0 auto;
	padding:10px 5px;
	overflow:hidden;
	
}

.intro p	{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:22px;color:maroon; line-height:150%}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
  font-size: 30px;
  text-align: center;
}

.flex-item{
	margin:10px auto;
	background-color:silver;
	padding: 10px;
	border:medium maroon groove;
}


.main	p	{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:24px;color:maroon; line-height:150%; }

.testimonials	{ 
	width:23%;
	margin:5px auto;
	float:left;
	height:auto;
	display:inline-block;
	vertical-align: middle;
  	border:medium maroon solid;
	overflow:hidden;
}

.testimonials p	{
	font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:24px;color:maroon; line-height:150%; 
}

.mysteries	{
	width:100%;
	margin:0 auto;
}

.host	{
	width:20%;
	margin:0 auto;
	padding:5px 10px;
	float:left;
	display:block;
}

.about	{
	width:75%;
	margin:0 auto;
	padding:5px 10px;
	float:left;
	display:block;
}

.about p	{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:22px;color:maroon; line-height:150%}

.contact1	{
	width:25%;
	margin:0 auto;
	padding:5px 10px;
	float:left;
	display:block;
	overflow:hidden;
}

.contact		{
	width:50%;
	margin:0 auto;
	padding:5px 10px;
	float:left;
	display:block;
	overflow:hidden;
}

.contact h1		{
	font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:30px;color:maroon; line-height:150%; 
}

.contact h2		{
	font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:24px;color:maroon; line-height:150%; 
}

a {
  text-decoration: none;
  color:maroon;
}


.footer 			{ width:100%;margin:0 auto; padding:10px 5px; background-color :maroon; height:50px;  overflow:hidden;  }
.footer p			{ color:white; font-size:24px; text-align:center; line-height:110%; text-decoration:none; }
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}a:hover {
  color: maroon;
  background-color: transparent;
}


.media		{
	width:100%;
	margin:0 auto;
	display:block;
	padding:50px 10px;
	text-align:center;
	overflow:hidden;
}

.media p {
	font-family:Arial, Helvetica, sans-serif; 
	text-align:center; 
	font-size:24px;
	text-align:center;
	color:maroon; 
	line-height:150%; 
}

.modified 	{
	margin:10px auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:maroon;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 850px) {


	.phone	{
	display:none;
	}
	
	.phone1	{
	display:inline;
		}
		
	.logo	{
		width:100%;
		margin:100px auto 0px;
		display:block;
		overflow:hidden;
	}
	.wrapper	{
	margin:0 auto;
	}

		
	.flex-container {
	  width:100%;
	  margin:0 auto;
	}

	.pic1	{
	width:100%;
	}


	.pic2	{
	display:none;
	}


	.pic3	{
	display:none;
	}
	.main	p	{
	font-size:18px;
	} 
	
	.testimonials	{ 
	width:100%;
	margin:10px auto;
	}
	
	.host	{
	width:100%;
	}
	
	.about	{
	width:100%;
	}
	
	.contact	{
	width:100%;
	}

	.contact1	{
	width:100%;
	}

}