*{
	margin:	0;
	padding: 0;
	font-family: sans-serif;	
}

.container {
	width: 					calc(100vw - 20px);
	height: 				100vh;
	background-image: 		url(background.jpg);
	background-position: 	center;
	background-size: 		cover;
	position:				relative;
	box-sizing:				border-box;
}

header a {
  text-decoration: none;
}

header {
	z-index:				10;
	width:					calc(100vw - 20px);
	height: 				60px;
	display: 				flex;
	padding: 				0 60px;
	background:				rgba(29,33,61,0.5);
	align-items:			center;
 	box-sizing:				border-box;
	justify-content: 		space-between;
}

.logo {
	width:			155px;
}
.logo img {
	width:			30px;
	position:		relative;
	z-index:		10;
	cursor:			pointer;
}

.controller {
	width:	2px;
	height:	calc(100vh - 160px);
	display:	block;
	background:	#c0c0c0;
	position:	absolute;
	top:	80px;
	right:	2vw;
}

nav {
	flex:				1;
	
}

nav ul li {
	list-style:			none;
	display:			inline-block;
	margin-right:		60px;
}

nav ul li a {
	text-decoration:	none;
	color:				#fff;
	font-size:			16px;
	font-weight: 		bold;
}

#slider {
	height: 		100vh;
	display:		inline-flex;
	transition:		0.5s;	
}

.msg-container {
	z-index:		1;
	position:		absolute;
	top:			60px;
	left:			10vw;
	width:			80vw;
	height:			calc(100vh - 80px);
	overflow:		hidden;
}

.msg-col {
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #ffffff #e0e0e0;
	width:		80vw;
}

.msg-col h1 {
	color:			#fff;
	font-size:		50px;
	font-weight:	bold;
	margin:			10px 0;
}
.msg-col h2 {
	color:			#fff;
	font-size:		40px;
	font-weight:	100;
	margin:			10px 0;
}

.msg-col p {
	color:			#000;
	font-size:		15px;
	line-height:	25px;
	font-weight:	bold;

}

.msg-col p iframe {
	position:relative;
	width:77vw; 
	height:350px;
	border: 1px solid black;
}
.msg-col a {
	display: inline-block;
	text-decoration:	none;
	color:	#555;
	font-size:	15px;

	border-radius:	20px;

	background:	#fff;
	padding:	0px 10px;

}

#line1,#line2,#line3,#line4,#line5,#line6,#line7 {
	height:	calc( ( 100vh - 160px ) / 7 );
	width:	10px;
	cursor:	pointer;
}

#active{
	width:			5px;
	height:			calc( ( 100vh - 160px ) / 5 );
	border-radius:	10px;
	background:		#fff;
	position:		absolute;
	top:			0;
	transition:		0.5s;	
}

#mobile-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#mobile-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
	z-index:			9;
	list-style:			none;
	font-size:			16px;
	font-weight: 		bold;
	display: 			none;
	position: 			absolute;
	top: 				60px;
	left:				0;
	height: 			calc(100vh - 60px);
	width: 				100%;
	background-color: 	rgba(29,33,61,1);

}

.mobile-menu li {
  margin-bottom: 10px;
}
.mobile-menu a {
	color:	#fff;
}

@media only screen and (max-width: 915px) {
  header nav {
    display: none;
  }

  #mobile-icon {
    display: block;
  }
}