body {
	font-family:"Prompt", sans-serif;
	background-image: url("back.jpg");
	background-attachment: fixed;
	background-repeat:repeat-x;
}



.nav-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 20px;
	margin-top: 30px;
	display: grid;
	grid-template-columns: 30% auto;
	
}

.nav-wrapper ul li {
		display: inline;
		list-style-type: none;
}

.nav-wrapper a{
	background-color: transparent;
	padding: 5px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	border: 2px transparent;
}

.nav-wrapper a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #eee;
	background-color: #323237;
	padding: 5px;
	border: 2px #eee;
	border-radius: 2px;
}

.list-item {
	margin-left: 10px;
	text-transform: uppercase;
	padding: 10px;
}

.logo {
	font-weight: bold;
	font-size: 24px;
}

.main-wrapper {
		max-width: 1200px;
		margin: auto;
}

.burger-icon {
		display: none;
}

.wrapper  {
	max-width: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap:10px;
	color:#000;
	grid-template-areas: 
		"featuredMain featuredMain featuredSub"
		"contentMain contentMain contentSub"
		
}

.wrapper > .featured,
.wrapper > .sub-featured > div,
.wrapper > .main-content,
.wrapper > .main-sidebar {
		padding: 20px;
}

.featured {
	grid-area: featuredMain;
	min-height: 500px;
	color: #eee;
	background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.1)) border-box, url (https://source.unsplash.com/1600x900/?woman) no-repeat center center;
	background-color: #323237;
	border: 2px solid #fff;
	border-radius: 3px;
	line-height: 1.5em;
}

.main-content, 
.featured,
.sub-featured > div,
.main-sidebar {
	box-shadow:0 0 4px rgba(0,0,0,.25);
}



.featured h1 {
	font-size: 30px;
	max-width: 650px;
	line-height: 1.5em;
}

.sub-featured {
	grid-area: featuredSub;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
	background-color: transparent;
}

.sub-featured h3 {
	margin-top: 0;
}

.sub1 {
	background-color: #c1c1c1;
	color: #323237;
	border: 2px solid #323237;
	border-radius: 3px;
}

.news {
	
	padding: 8px;
	background-color: #323237;
	border: 2px solid #c1c1c1;
	border-radius: 5px;
	margin: 0 auto;
	text-align: center;
}

.sub2 {
	background-color: #c1c1c1;
	color: #323237;
	border: 2px solid #323237;
	border-radius: 3px;
}

.Versionheadline {
  font-family: 'Lato', sans-serif;
  font-size:17px; 
  color: #259ce7;
}

.sub2 a{
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	font-size:13px; 
	color: #259ce7;
	background-color: transparent;
	
}

.sub2 a:hover{
	text-decoration: none;
	color: #c1c1c1;
	font-weight: bold;
	background-color: rgba(255,255,255,.25);
}

.versionbox {
	padding: 8px;
	background-color: #323237;
	border: 2px solid #c1c1c1;
	border-radius: 5px;
	margin: 0 auto;
	text-align: center;
}

a.change:link{
	text-decoration: none;
	color: #c1c1c1;
}

a.change:hover{
	text-decoration: none;
	background-color: rgba(255,255,255,.15);
	color: #323237;
}

.smalltext{
	font-size: 12px;
	color: #c1c1c1;
}

.newshead {
	font-size: 18px;
	font-weight: normal;
	font-family: 'Lato', sans-serif;
	text-align: center;
	color: #eee;
}

.newstext {
	font-size: 15px;
	font-weight: normal;
	font-family: 'Lato', sans-serif;
	color: #eee;
}

.sub3 {
	background-color: #c1c1c1;
	color: #323237;
	border: 2px solid #323237;
	border-radius: 3px;
	line-height: 1.3em;
}

.ytfavs {
	padding: 10px;
	background-color: #323237;
	border: 2px solid #c1c1c1;
	border-radius: 5px;
	margin: 0 auto;
	text-align: left;
}

.sub3 a{
	text-decoration: none;
	color: #c1c1c1;
	background-color: transparent;
	
}

.sub3 a:hover{
	text-decoration: none;
	color: #323237;
	background-color: #c1c1c1;
}

.TextHead {
  font-family: 'Lato', sans-serif;
  text-align: left;
  font-size:20px; 
  color: #c1c1c1;
}

.TextHead1 {
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-size:20px; 
  color: #c1c1c1;
}
	
.TextHead2 {
  font-family: 'Lato', sans-serif;
  font-size:17px; 
  color: #259ce7;
}

.TextHead3 {
  font-family: 'Lato', sans-serif;
  font-size:20px; 
  color: #323237;
}

.main-content {
	grid-area: contentMain;
	background-color: #c1c1c1;
	color: #323237;
	border: 2px solid #323237;
	border-radius: 3px;
	line-height: 1.5em;
	
}

.main-sidebar {
	grid-area:contentSub;
	background-color: #c1c1c1;
	color: #323237;
	border: 2px solid #323237;
	border-radius: 3px;
	line-height: 1.5em;
}

.enter {
	text-align: center;
}

.footer {
		display: grid;
		margin: auto;
		grid-template-columns: minmax(20px,300px) minmax(20px,300px) minmax(20px,300px) minmax(20px,300px);
		justify-content: center;
		grid-template-rows: 1fr 1 fr;
		background-color: #333;
		color:#fff;
}

.footer > div {
	padding: 20px;
}

.footer ul li {
	padding: 2px;
}

.footer a {
	text-decoration: none;
	cursor: pointer;
	color: #eee;
	background-color: transparent;
}

.footer a:hover {
	text-decoration: none;
	color: #323237;
	background-color: #eee;
}

.copyright{
	max-width: 1200px;
	margin: auto;
	padding: 20px;
	grid-column: 1/-1;
}

.footerstuff{
	line-height:1.5em;
}

/* TABLET MEDIA QUERY */

@media screen and (max-width: 950px) {
		.wrapper {
			grid-template-areas:
				"featuredMain featuredMain featuredMain"
				"featuredSub featuredSub featuredSub"
				"contentMain contentMain contentSub"
		}
		
		.sub-featured {
				grid-template-columns: repeat(3,1fr);
		}
		
		.nav-items {
			grid-column: 1/5;
			text-align: center;
		}
		
		.logo {
			grid-column: 1/5;
			text-align: center;			
		}
		
		.nav-wrapper {
			margin-top: 0;
			
		}
	
}

/* MOBILE MEDIA QUERY */

@media screen and (max-width: 690px) {
	
	.logo{
		grid-column: 1/3;
	}
	
	.nav-items{
		grid-column: 1/5;
		text-align: center;
	}
	
	.nav-wrapper ul {
		padding: 0;
		margin: 0;
		
	}
	
	
	.nav-wrapper ul li {
		display: block;
		
	}	
	
	.burger-icon {
		display: inline-block;
		justify-self: end;
		grid-column: 4/5;
		border: 2px #eee;
		color:#eee;
		padding: 10px;
		font-weight: bold;
		border-radius: 3px;
	}
	
	.burger-icon:hover {
			cursor: pointer;
	}
	
	.wrapper{
		grid-template-areas:
		"featuredMain featuredMain featuredMain"
		"contentMain contentMain contentMain"
		"featuredSub featuredSub featuredSub"
		"contentSub contentSub contentSub"
	}
	
	.sub-featured{
		grid-template-columns: 1fr;
	}
	
	.footer > div{
		grid-column: 1/-1;
		
	}
	
	.featured h1 {
	font-size: 30px;
}

.mobile-show {
	display: block;
}

.mobile-hide {
	display: none;
}
	
}


a.info:link {
	color: #0080FF;
	text-decoration:none;
	background-color: transparent;
	padding: 3px;
	font-weight: bold;
}

a.info:visited {
	color: #0080FF;
	text-decoration:none;
}

a.info:hover {
	color: #fff; 
	text-decoration:none;
	background-color: #323237;
	padding: 3px;
	font-weight: bold;
}

a.info1:link {
	color: #46a2fe;
	text-decoration:none;
	background-color: transparent;
	padding: 3px;
	font-weight: bold;
}

a.info1:visited {
	color: #46a2fe;
	text-decoration:none;
}

a.info1:hover {
	color: #c1c1c1; 
	text-decoration:none;
	background-color: #323237;
	padding: 3px;
	font-weight: bold;
}

a.link:link {
	color: #000;
	text-decoration:none;
}

a.link:visited {
	color: #000;
	text-decoration:none;
}

a.link:hover {
	color: #fff; 
	text-decoration:none;
	background-color: #323237;
	padding: 3px;
	font-weight: bold;
}

a.nav:link {
	color: #fff;
	text-decoration:none;
	border: 2px solid transparent;
}

a.nav:visited {
	color: #fff;
	text-decoration:none;
	border: 2px solid transparent;
}

a.nav:hover {
	color: #000;
	background-color: #c1c1c1;
	padding:0px;
	text-decoration:none;
}

a.back:link {
	color: #000; 
	text-decoration:none;
	background-color: #c1c1c1;
	padding:2px;
	border: 1px solid #000;
}

a.back:visited {
	color: #000; 
	text-decoration:none;
}

a.back:hover {
	color: #fff; 
	background-color: #c1c1c1;
	padding: 2px;
	text-decoration:none;
	border: 1px so;
}