/*MiraculuxWeb
All rights reserved.*/

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}
header{
/*	background: #00795f;*/
z-index: -1;
	width: 100%;
	/*padding: 40px 0; 
	equals 40px top and right, 0px bottom and left*/
	color: white;
	text-align: left;
	cursor: default;
}
header1{
/*	background: #00795f;*/
z-index: -1;
	width: 100%;
	/*padding: 40px 0; 
	equals 40px top and right, 0px bottom and left*/
	color: white;
	text-align: left;
	cursor: default;
	display: none;
}
header2{
/*	background: #00795f;*/
z-index: -1;
	width: 100%;
	padding-top: 100px;
	/*padding: 40px 0; 
	equals 40px top and right, 0px bottom and left*/
	color: white;
	text-align: left;
	cursor: default;
	display: inline-block;
}
header ul{
	padding-top: 20px;
	text-align: left;
	overflow: hidden;
}
header ul li{
	display: inline-block;
	/*apparently what allows list items to be next to each
	other in a single row. without it, items are always stacked
	on top of each other, regardless of width.*/
	padding: 0 0 0 10px;
}
.dir {
	z-index: 2;
margin: 0;
padding: 0;
float:left;
position: absolute;
width: auto;
height: 100%;
display: inline-block;
cursor: pointer;
}

.dir ul {
margin: 0;
padding: 0;
color: white;
font-family: News Cycle;
font-size: 1em;
list-style: none;
}
.dir ul li{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #2a1218;
    margin-bottom: 5px;
    margin-right: 5px;
}
.dir ul li:hover{
	color: #ffa500;
	background-color: #110508;
}
h1{
	color: #ffa500;
	font-family: 'News Cycle', sans-serif;
	font-size: 2em;
}
h2{
/*	color: #bbe4d0;*/
	color: #ffa500;
	font-family: 'News Cycle', sans-serif;
	font-size: 1em;
	text-align: center;
}
h3{
	color: white;
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	text-align: center;
}
h4{
	color: #ffa500;
	font-family: 'News Cycle', sans-serif;
	font-size: 2.5em;
	line-height: 0.9em;
}
h5{
/*	color: #bbe4d0;*/
	color: #ffa500;
	font-family: 'News Cycle', sans-serif;
	font-size: 1em;
	text-align: left;
}
h6{
	color: #ffa500;
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	text-align: center;
}
a{
	text-decoration: none;
	color: inherit;
	/*this means it takes the colour settings from everything around it*/
}
nav{
	z-index: 11;
}
nav ul{
	/*background-color: #43a286;*/
	background-color: #2a1218;
	overflow: hidden;
	/*very important so that the overflow doesn't mess with item size*/
	color: #E9D1D7;
	padding: 0;
	font-family: 'News Cycle', sans-serif;
	font-size: 1em;
	line-height: 1.95em;
	text-align: center;
	margin: 0;
	transition: max-height 0.4s;
/*	this is a standard css addition which all
	browsers respond to. however, each browser
	has their own "phone number", which is
	expressed in different prefixes.*/
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
}
nav ul2{
	/*background-color: #43a286;*/
	background-color: #2a1218;
	overflow: hidden;
	/*very important so that the overflow doesn't mess with item size*/
	color: #E9D1D7;
	padding: 0;
	font-family: 'News Cycle', sans-serif;
	font-size: 1.2em;
	text-align: center;
	margin: 0;
	transition: max-height 0.4s;
/*	this is a standard css addition which all
	browsers respond to. however, each browser
	has their own "phone number", which is
	expressed in different prefixes.*/
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
}
nav ul li{
	display: inline-block;
	padding: 20px;
}
nav ul li:hover{
	color: #ffa500;
	background-color: #110508;
}
nav2{
	z-index: 11;
}
nav2 ul{
	/*background-color: #43a286;*/
	background-color: #7f7374;
	overflow: hidden;
	/*very important so that the overflow doesn't mess with item size*/
	color: #d4d0d0;
	padding: 0;
	font-family: 'News Cycle', sans-serif;
	font-size: 1em;
	line-height: 0.1em;
	text-align: center;
	margin: 0;
	transition: max-height 0.4s;
/*	this is a standard css addition which all
	browsers respond to. however, each browser
	has their own "phone number", which is
	expressed in different prefixes.*/
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
}
nav2 ul2{
	/*background-color: #43a286;*/
	background-color: #7f7374;
	overflow: hidden;
	/*very important so that the overflow doesn't mess with item size*/
	color: #d4d0d0;
	padding: 0;
	font-family: 'News Cycle', sans-serif;
	font-size: 1em;
	text-align: center;
	margin: 0;
	transition: max-height 0.4s;
/*	this is a standard css addition which all
	browsers respond to. however, each browser
	has their own "phone number", which is
	expressed in different prefixes.*/
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
}
nav2 ul li{
	display: inline-block;
	padding: 20px;
}
nav2 ul li:hover{
	color: #a9a1a2;
	background-color:#695b5d;
}
.divider{
	clear: both;
	width: 100%;
}
.container{
	display: inline-block;
	overflow: hidden;
}
section{
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 40%;
	margin: 0 auto;
	text-align: left;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
}
section4{
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 40%;
	margin: 0 auto;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
}
section3{
	float: left;
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 40%;
	margin: 0 auto;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
}
section2{
	float: left;
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 40%;
	margin: 0 auto;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
}
section5{
	float: left;
	margin-left:10%;
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 20%;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
}
section6{
	float: left;
	margin-left:1%;
	display: inline-block;
	line-height: 1.5em;
	/*makes for very readable text*/
	font-family: 'News Cycle', sans-serif;
	font-size: 0.9em;
	padding: 5%;
	width: 20%;
	margin: 0 auto;
	/*this centers the content in this instance.
	the padding makes sure it's not uncomfortably
	touching the edges. wow i english well today.*/
	}
.logo{
	margin-top: 0;
	margin-left: 0;
	float: left;
}
.menu{
	width: 100%;
	background-color: #2a1218;
	text-align: left;
	box-sizing: border-box;
	padding: 15px 10px;
	cursor: pointer;
	color: white;
	display: none;
	/*means that it won't be displayed unless the
	requirements of the media query are fulfilled.
	for that to be a thing a matching tag has to
	be added in the media query though, stating
	explicitly that the handle shall be displayed.*/
}
.slider{

}
footer{
	display: inline-block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #2a1218;
	cursor: default;
}
footer ul{
	overflow: hidden;
	text-align: center;
	padding: 0;
}
footer ul li{
	display: inline-block;
	padding: 0 10px 0 10px;
	/* top - right - bottom - left */
	text-align: left;
}
mobilefooter{
	display: none;
}
mobilefooter ul{
	display: none;
}
mobilefooter ul li{
	display: none;
}
@media screen and (max-width: 638px){
	.divider5{
	display: inline-block;
	}
	.divider1{
	display: none;
}
.divider2{
	display: none;
}
.divider3{
	display: inline-block;
	background: #2a1218; height: 5px; margin: none;
	clear: both;
	width: 100%;
}
.divider4{
	display: inline-block;
	background: #2a1218; height: 2px; margin: none; 
	clear: both;
	width: 100%;
}
	header ul{
	padding-top: 40px;
	}
	nav2{
	display: none;
}
	nav ul2 {
		display: none;
	}
	nav ul{
		background-image: none;
		max-height: 0px;
		/*this is what collapses the nav bar!
		no "hide" or "display" tag needed.
		we also want something that can be
		animated, something the browser can
		interpolate, like a numerical value.
		that is why we set a max height - here
		at 0px, in the .showing div at 20em.*/
	}
	header2{ display: none;
	}
	header1{display: inline-block;
	}
	.dir {
		display: none;
	}
	.showing{
		max-height: 20em;
	}
	nav ul li{
		box-sizing: border-box;
		/*if you had normal box sizing it would
		be adding the padding on the outside, 
		leading the width of 100% PLUS the padding,
		causing it to overflow*/
		width: 100%;
		padding: 15px;
		text-align: left;
	}
		nav3 ul li{
		box-sizing: border-box;
		/*if you had normal box sizing it would
		be adding the padding on the outside, 
		leading the width of 100% PLUS the padding,
		causing it to overflow*/
		width: 100%;
		padding: 15px;
		text-align: left;
	}
	.menu{
		display: block;
	}
	h1{
		font-size: 1.5em;
		line-height: 1em;
	}
	.titles {
    -webkit-columns: 50px 2; /* Chrome, Safari, Opera */
    -moz-columns: 50px 2; /* Firefox */
    columns: 50px 2;
    clear:left;
	position: center;
	padding: 20px;
	width: 100%;
}
	section{
		width: 80%;
		position: center;
	}
	section4{
		width: 80%;
		position: center;
	}
	section2{
	clear:left;
	position: center;
	width: 80%;

}
	section5{
	clear:left;
	position: center;
	padding: 20px;
	width: 100%;
	margin-left: 0;
}
	section6{
	clear:left;
	position: center;
	padding: 20px;
	width: 100%;
}
	section3{
		width: 80%;
		position: center;
		float: none;
	}
	footer{
		font-size: 0.8em;
		margin-top: 0;
	}
	footer ul{
		margin: 0;
		padding: 5px;
	}
	footer ul li{
	padding: 0 5px 0 5px;
	/* top - right - bottom - left */
	margin: 0;
	}
}