#liveplayer, #livearchive, #latestplayer {
	padding: 30px;
	width:100%;
	min-width: 100%;
}

#liveplayer h2 {
	margin-top:0px;
}

#smgliveplayer img, #latestplayer img {
	min-width: 100%;
} 

#livearchive .item {
	padding: 15px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    border-radius: 5px;
}

#livearchive .item img {
	padding-bottom: 10px;
}

#livearchive .items {
	display: grid;
	grid-auto-rows: minmax(125px, auto);
	grid-gap: 30px;
}	

#livearchive .pagination {
	width: 100%;
	float: left;
	padding: 30px 30px 0;
}

#livearchive .pagination ul {
	text-align: center;
}

#livearchive .pagination li {
	display: inline-block;
}

#livearchive .pagination li.active {
	border: 2px solid #ffffff;
	background-color: #ffffff;
	padding: 0 5px;
}

#livearchive h2 {
	margin-top: 0;
}

#livearchive .image img {
	width: 100%;
	min-width: 100%;
}

#livearchive .title {
	font-weight: bold;
	padding-bottom: 5px;
}

#livearchive a {
	text-decoration: none;
}

#livearchive .livestreamButton {
	text-align: center;
	margin: 50px 30px 30px;
}

#livearchive .viewButton {
	background-color: #ffffff;
	color: #000;
	padding: 20px 30px;
}

#livearchive .livestreamButton button, #livearchive .livestreamButton button:hover {
	text-decoration: none;
}

#livestream_wrapper.wrapperSideActive {
	width: 65%;
	float: left;
}

#livestream-sidebar-wrapper {
	width: 33%;
	margin-left:2%;
	float: left;
}

#livestream-sidebar-wrapper #livestream-sidebar {
	padding: 30px;
}

#latestplayer .latesttitle {
	float:left; //sets the title to left
}

#latestplayer .latestdate {
	float:right; //sets the date to right
}

#latestplayer h4 {
	margin:0 0 5px; //adds margin to bottom of title and date
}

@media screen and (max-width: 950px) {
	#livestream_wrapper.wrapperSideActive, #livestream-sidebar-wrapper {
		width: 100%;
		margin-left: unset;
	}
}

@media screen and (min-width:240px) {
	#livearchive .items {
		grid-template-columns: repeat(1, 1fr);
	    grid-gap: 30px;
	}
}

@media screen and (min-width:480px) {
	#livearchive .items {
		grid-template-columns: repeat(2, 1fr);
	    grid-gap: 30px;
	}
}

@media screen and (min-width:768px) {
	#livearchive .items {
		grid-template-columns: repeat(3, 1fr);
	    grid-gap: 30px;
	}
}

@media screen and (min-width:1200px) {
	#livearchive .items {
		grid-template-columns: repeat(4, 1fr);
	    grid-gap: 30px;
	}
}

@media screen and (min-width:1600px) {
	#livearchive .items {
		grid-template-columns: repeat(5, 1fr);
	    grid-gap: 30px;
	}
}

@media screen and (min-width:2000px) {
	#livearchive .items {
		grid-template-columns: repeat(6, 1fr);
	    grid-gap: 30px;
	}
}