*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	font-family: 'Lato', sans-serif;
	color: #333;
	text-decoration: none;	
}
html, body {
				height: 100vh;
				margin: 0;
				padding: 0;
	position: relative;
			}
a{display: block;outline: none;}

/******************Header Nav*******************/
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #4c5567;
color: white;
padding: 0 1.8em;
height:3.5em;
	z-index: 10;
}
header>div{
	display:flex;
	justify-content: space-between;
	align-items: center;height: 100%;
	max-width: 87.5em;
	margin: 0 auto;
}
/******************Navigation****************/
@media screen and (min-width:701px) {
	nav { display:block !important; } 
}
#nav ul{
	display:flex;
	justify-content: space-between;
	align-items: center;
}
#nav li:nth-of-type(6),
#nav li:nth-of-type(7),
#nav li:nth-of-type(8){display:none;}
#nav a{padding-left:0.8em; color: #cfd1c5;}
#nav a:hover{color: #fff;}
 a h1,a span {color: #fff;}
#nav a.active{color: #fff;}

/***************nav button*************************************************/
.menu {position: absolute;right: 1.8em;}
.menu-toggle {
  display: none;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top: 4px solid;
  border-bottom: 4px solid;
  color: #efefef;
  font-size: 0;
  transition: all 0.25s ease-in-out;
}
.menu-toggle:before, .menu-toggle:after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease-in-out;
}
button:hover {
  color: #fff;
}
button.is-active {
  border-color: transparent;
}
button.is-active:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
button.is-active:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
button {
  border: none;
  cursor: pointer;
  outline: none;
}

/***************nav button*************************************************/


@media screen and (max-width:700px) {
	header{border-bottom: 1px solid #efefef;}
	#nav{position: absolute;top:3.5em;left:0;
		background: #4c5567;;width: 100%;
		text-align:center;
	}
	#nav li{border-bottom: 1px solid #efefef;padding: 0.5em 0;}
	#nav a{padding: 0 0 0 0;font-size: 1.5em;width: 100%;}
	#nav li:nth-of-type(6),
	#nav li:nth-of-type(7),
	#nav li:nth-of-type(8){display:block;}
	#nav{display:none;}
	.menu-toggle{display: block;}
	#nav ul{display:block;}
}
/******************Navigation Ende****************/
h1 {
	font: normal 1.4625em Lato, sans-serif;
	text-transform: uppercase;letter-spacing: 0.09em;
	color: #fff;font-weight:300;
}
h1 span {
	font-weight:700;
}
@media screen and (max-width:410px) {
	h1 {
	font: normal 1.2em Lato, sans-serif;
	letter-spacing: 0.09em;
	
	}
}
main{position: relative;height: 100vh;}
main>div{max-width: 87.5em;margin: 0 auto;_background-color: greenyellow;height: 100vh;}

/*.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  Yep! 
  width: 48%;
  height: 59%;
}*/

/* Modal Content */
.modal-content {
  _background-color: blue;
  margin: auto;
  width: 100%;
  _max-width: 1200px;
	position: relative;
	height: 100vh;
}
 .mySlides {
  display: none;
	margin: auto;
	 position: absolute;
    top: 30vh;
	 width: 50%;
	 left:25%;
	 height: 100vh;
	 padding-bottom: 6em;
}
 .mySlides p{font-size: 1.3em;line-height: 1.4;}
/* Fade in*/
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

.mySlides
{
  opacity: 0;
	animation-name: fadeIn;
	animation: fadeIn 3s forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */
}
/* Next & previous buttons */
.dot-container{_background-color: chartreuse;
margin: 0 auto;
    height: 20px;
    position: fixed;
    top: 74vh;
	 width: 50%;
	 left:25%;
    _background:green;
	text-align: center
}
@media screen and (max-width:1000px) {
.mySlides {
  display: none;
	left:15%;
	 width: 70%;
}	
.dot-container{_background-color: chartreuse;
    position: fixed;
    top: 70vh;
	 width: 70%;
	 left:15%;
}		
}

.dot {
	cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
	transition: 0.6s ease;
	
}
.dot:hover,.dot.active{background-color: #717171;}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50vh;
  width: auto;
  _padding: 16px;
  _margin-top: -5vh;
  color: #bbb;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0.5em;
  border-radius: 3px 0 0 3px;
}
.prev {
  left: 0.5em;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color: #717171;
}
@media screen and (max-width:1000px) {
.mySlides {
	left:15%;
	 width: 70%;
}	
.dot-container{
    top: 70vh;
	 width: 70%;
	 left:15%;
}		
}
@media screen and (max-width:780px) {
.mySlides {
	left:10%;
	 width: 80%;
}	
.dot-container{
    top: 70vh;
	 width: 80%;
	 left:10%;
}		
}
@media screen and (max-width:670px) {
	main{padding-top: 3em;}
	.mySlides {
		padding-top: 1em;
		padding-bottom: 1em;
  display: none;
	margin: auto;
	 position: absolute;
    top: 5vh;
	 width: 90%;
	 left:5%;
	 height: 100vh;
	 padding-bottom: 8em;
		_background-color: red
}

.dot-container{
	position: absolute;
    top: 100vh;
	 width: 88%;
	 left:6%;
}	
	.next {
  right: 1%;
  border-radius: 3px 0 0 3px;
}
.prev {
  left: 1%;
  border-radius: 3px 0 0 3px;
}
}
/*######### footer###########*/
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
 background-color: #4c5567;
color: white;
padding: 1.2em 1.8em;	
height:1.5em;	
}
footer>div{
	max-width: 87.5em;
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer a{color: #cfd1c5;}
footer a:hover{color: #fff;}
@media screen and (max-width:700px) {
	footer a:nth-of-type(2),footer a:nth-of-type(3),
	footer a:nth-of-type(4){display:none;}
	footer>div{justify-content: center;}
	
	
}