@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i');

/*
Colors
1. Red Violet: #cc33cc
2. Violet: #9900ff
3. Blue Violet: #6404fb
4. Dark Blue Violet: #340086;
*/
.contentslide .hps-title1 {
	background-color:rgba(153,0,255,0.8);
	font-weight:600;
	letter-spacing:1px;
	padding:25px 100px 25px 40px;
	right:0px;
	left:auto;
	bottom:40px;
	font-size:200% !important;
}
#main label {
	color:#9900ff;
	font-weight:900 !important;
	font-size:100% !important;
	text-transform:uppercase !important;
	padding-bottom:20px;
}
#main textarea {
	height:250px;
}
body {
	background-color:#000;
	color:#FFF;
	font-size:1.000em;
	margin:0px;
}
p {
	padding:0px;
	margin:0px;
}
#main a {
	color:#6404fb;
	text-decoration:none;
	font-weight:bold;
}
#main a:visited {
	color:#6404fb;
	text-decoration:none;
	font-weight:bold;
}
#main a:active {
	color:#6404fb;
	text-decoration:none;
	font-weight:bold;
}
#main a:hover {
	color:#9900ff;
}
#footer a {
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	line-height:160%;
}
#footer a:hover {
	color:#d9d9d9;
}
#footer a:visited {
	color:#ffffff;
}
#footer a:active {
	color:#ffffff;
}

/*containers*/
#main {
	background-image:url(images/mtrockheader.jpg);
	background-position: top center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-size: fill;
	width:1000px;
	padding-top:30px;
	margin-left:auto;
	margin-right:auto;
	font-family:lato !important;
}
/*selectors*/
#main p {
	margin:0px;
	padding:0px;
}
#main h1, h2, h3, h4, h5, h6 {
	font-weight:900;
	text-transform:uppercase;
	margin:0px;
	padding:0px;
	margin-bottom:0px;
	font-family:lato !important;
	color:#000000;
}
#main h1 {
	margin-bottom:10px;
	font-size:200%;
}
#main h3 {
	margin-bottom:10px;
	font-size:150%;
}
#main h4 {
	margin-bottom:10px;
	font-size:125%;
}
#main h6 {
	margin-bottom:10px;
	font-size:100%;
}
/* Navigation */
#mtrocknav {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	border-radius:5px;
	padding:0px 40px;
	text-align:center;
	background: rgba(204,51,204,1);
	background: -moz-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,51,204,1)), color-stop(100%, rgba(153,0,255,1)));
	background: -webkit-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -o-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: linear-gradient(to bottom, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33cc', endColorstr='#9900ff', GradientType=0 );
}
#mtrocknav ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0;
}
#mtrocknav ul a
{
	display:inline-block;
	color:#FFFFFF;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:900 !important;
	letter-spacing:2px;
	font-size:80%;
	line-height:32px;
	padding:15px 30px;
}
#mtrocknav ul a:hover
{
	color:#FFFFFF;
}
#mtrocknav ul a:visited
{
	color:#FFFFFF;
}
#mtrocknav ul a:active
{
	color:#FFFFFF;
}
#mtrocknav ul li
{
	position:relative;
	display:inline-block;
	margin:0;
	padding:0;
}
#mtrocknav ul li.current-menu-item
{
	background:#ddd;
}
#mtrocknav ul li:hover
{
	background:#6404fb;
}
#mtrocknav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	padding:0;
}
#mtrocknav ul ul li
{
	text-align:left;
	float:none;
	width:250px;
	z-index:1;
}
#mtrocknav ul ul a
{
	line-height:120%;
	padding:20px 30px;
	background-color:#6404fb;
	border-top:1px solid #340086;
	display:block;
}
#mtrocknav ul ul li:last-child
{
	border-radius: 0px 0px 5px 5px;
	overflow:hidden;
}
#mtrocknav ul ul a:hover
{
	color:#FFFFFF;
}
#mtrocknav ul ul a:visited
{
	color:#FFFFFF;
}
#mtrocknav ul ul a:active
{
	color:#FFFFFF;
}
#mtrocknav ul ul a:hover {
	background-color:#9900ff;
}
#mtrocknav ul ul ul
{
	top:0;
	left:100%;
}
#mtrocknav ul li:hover > ul
{
	display:block
}
#content {
	background-color:#FFFFFF;
	color: #000;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	margin-top:30px;
	padding:10px 0px 50px 0px;

}
.button {
	border-radius:5px;
	background:#9900ff;
	padding:10px 20px !important;;
	font-size:75%;
	font-weight:900;
	text-decoration:none;
	text-transform:uppercase;
	color:#FFFFFF !important;
}
.button:hover {
	background:#C432C5;
	color:#FFFFFF !important;
}
.button:visited {
	background:#9900ff;
	color:#FFFFFF !important;
}
.button:active {
	background:#464646;
	color:#FFFFFF !important;
}
/*index page*/
#listen {
	display:flex;
	flex-wrap:wrap;
}
#stream {
	width:65%;
}
#streamblock {
	margin:30px;
	padding:0px 20px 20px 20px ;
	border-radius:5px;
	background: rgba(204,51,204,1);
	background: -moz-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,51,204,1)), color-stop(100%, rgba(153,0,255,1)));
	background: -webkit-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -o-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	background: linear-gradient(to bottom, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33cc', endColorstr='#9900ff', GradientType=0 );
}
#today_schedule {
	width:35%;
	padding:30px 0px;
	position:relative;
}
#today_schedule h2 {
	color:#000000 !important;
	margin-bottom:10px;
	font-size:150%;
}
#today_schedule .button {
	position:absolute;
	bottom:30px;
	right:30px;
}
#streamblock p {
	margin:0px;
	padding:0px;
	display:block;
	text-align:center;
	font-weight:900;
	font-size:400%;
	text-transform:uppercase;
	letter-spacing:5px;
	color:#FFFFFF;
}
#news_social {
	display:flex;
	flex-wrap:wrap;
	margin:50px 50px 0px 50px;
}
#news {
	width:calc(60% - 30px);
	margin-right:30px;
}
#index_social {
	width:40%;
}
.newsblock {
	display:block;
	background-color:#eaeaea;
	padding:20px;
	border-radius:5px;
	margin-bottom:5px;
	text-decoration:none;
	color:#000000 !important;
	opacity:1;
	font-size:80%;
}
.newsblock:hover {
	opacity:.75;
	color:#000000 !important;
}
.newsblock:visited {
	color:#000000 !important;
}
.newsblock:active {
	color:#000000 !important;
}
#mainslider {
	background-color:#888888;
	height:400px;
	overflow:none;
}
#featured {
	display:flex;
	flex-wrap:wrap;
	background-color:#000000;
}
.feature {
	width:calc(50% - 1px);
	height:300px;
	display:block;
	background-color:#555;
	position:relative;
	border-top:2px solid #FFFFFF;
}
.feature_overlay {
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, .5);
}
.feature_overlay p {
	font-weight:900;
	font-size:250%;
	display:block;
	text-transform:uppercase;
	color:#FFFFFF;
	position:absolute;
	bottom:30px;
	right:50px;
	letter-spacing:1px;
}
.feature_overlay:hover {
	background:rgba(0, 0, 0, 0);
}
.border_right {
	border-right:2px solid #FFFFFF;
}
#sched_blocks {
	overflow-y:scroll;
	background-color:#eaeaea;
	height:150px;
	margin-right:20px;
	padding:10px;
	border-radius:5px;
}
#sched_blocks p {
	display:block;
	border-radius:5px;
	background-color:#ffffff;
	margin-bottom:3px;
	font-size:75%;
	padding:10px;
	font-weight:700;
}
#sched_blocks span {
	display:inline-block;
	width:100px;
	text-align:center;
	margin-right:10px;
	padding:10px;
	background-color:#9900ff;
	color:#FFFFFF;
	border-radius:3px;
}

#logo {
	width:50%;
}
#logo img {
	width:auto;
	height:130px;
	margin-bottom:20px;
}
#header {
	display:flex;
}
#header_social {
	width:50%;
}
#header_social p {
	font-weight:900;
	font-size:1.5em;
	color:#FFFFFF;
	text-transform:uppercase;
	text-align:right;
	margin-top:15px;
	margin-bottom:30px;
	text-shadow: 0px 0px 10px rgba(0,0,0,1);
	line-height:140%;
}
.header_social_icon {
	width:auto;
	height:25px;
	margin-right:10px;
}
#header_social_icon_wrapper {
	text-align:right;padding-bottom:10px;
}
#footer {
	padding:30px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	background: rgba(153,0,255,1);
	background: -moz-linear-gradient(top, rgba(153,0,255,1) 0%, rgba(100,4,251,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(153,0,255,1)), color-stop(100%, rgba(100,4,251,1)));
	background: -webkit-linear-gradient(top, rgba(153,0,255,1) 0%, rgba(100,4,251,1) 100%);
	background: -o-linear-gradient(top, rgba(153,0,255,1) 0%, rgba(100,4,251,1) 100%);
	background: -ms-linear-gradient(top, rgba(153,0,255,1) 0%, rgba(100,4,251,1) 100%);
	background: linear-gradient(to bottom, rgba(153,0,255,1) 0%, rgba(100,4,251,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9900ff', endColorstr='#6404fb', GradientType=0 );
	margin-bottom:50px;
	display:flex;
}
.footer_block {
	width:50%;
	color:#FFFFFF;
}
.footer_block h3 {
	color:#FFFFFF;
}
.footer_right {
	text-align:right;
}

/*schedule*/
.schedcal {
	padding:0px 50px 100px 50px;
	font-weight:900;
	text-transform:uppercase;
}
.schedcal h3 {
	margin-top:30px !important;
}
.schedcal_entry {
	display:block;
	background-color:#eaeaea;
	padding:20px;
	border-radius:5px;
	margin-bottom:5px;
	text-decoration:none;
	color:#000000;
	opacity:1;
	font-size:80%;
}
.schedcal_entry:hover {
	opacity:.75;
	color:#000000;
}
.schedcal_entry:visited {
	color:#000000;
}
.schedcal_entry:active {
	color:#000000;
}
.schedcal_hours {
	display:inline-block;
	margin-right:10px;
	padding:20px 10px;
	width:150px;
	text-align:center;
	background-color:#9900ff;
	color:#FFFFFF;
	border-radius:3px;
}
.schedcal_show {
	display:inline-block;
	margin-right:10px;
	padding:20px 10px;
}
.schedcal_name {
	display:inline-block;
	margin-right:10px;
	padding:20px 10px;
	float:right;
}
/*event calendar*/
.eventcal {
	padding:0px 50px 100px 50px;
	font-weight:900;
	text-transform:uppercase;
}
.eventcal h3 {
	margin-top:30px !important;
}
.eventcal_entry {
	background-color:#eaeaea;
	padding:20px;
	border-radius:5px;
	margin-bottom:5px;
	text-decoration:none;
	color:#000000;
	opacity:1;
	font-size:80%;
	display:flex;
	align-items:center;
}
.eventcal_entry:hover {
	opacity:.75;
	color:#000000;
}
.eventcal_entry:visited {
	color:#000000;
}
.eventcal_entry:active {
	color:#000000;
}
.eventcal_date {
	width:calc(20% - 30px);
	text-align:center;
	font-size:125%;
	margin-right:30px;
	padding:20px 0px;
	background-color:#9900ff;
	color:#FFFFFF;
	border-radius:3px;
}
.eventcal_name {
	width:calc(60% - 30px);
	margin-right:30px;
}
.eventcal_hours {
	width:calc(20% - 10px);
	margin-right:10px;
	text-align:right;
	color:#9900ff;
}

.weekday {
	display: block;
}
/*past events*/
.flex {
	display:flex;
}
.halfblock {
	width:calc(50% - 10px);
	padding:0px 50px;
}


/*podcasts*/
#podcasts {
	display:flex;
	flex-wrap:wrap;
	padding:30px 50px 50px 50px;
}
#featuredtext {
	width:calc(50% - 25px);
	padding-right:50px;
	line-height:150%;
	color:#000000;
}
#featuredtext strong {
	font-size:110%;
}
#featuredtext h3 {
	color:#9900ff;
}

#featuredtext h1 {
	margin-left:0px;
	margin-top:0px;
}
#content h2, h4, h6 {
	margin-left:0px;
	margin-top:0px;
	color:#9900ff;
}
#featuredimg {
	width:50%;
	padding-bottom:50px;
}
#podcasts_all {
	display:flex;
	flex-wrap:wrap;
}
.podcastentry {
	display:block;
	background-color:#eaeaea;
	padding:30px 20px;
	width:calc(50% - 30px);
	border-radius:5px;
	margin:0px 10px;
	margin-bottom:50px;
	text-decoration:none;
	color:#000000;
	opacity:1;
	font-size:80%;
}
.podcastentry strong {
	font-size:110%;
	color:#000000;
}
.whitebox {
	color: #FFFFFF !important;
	background-color: inherit;
	display:inherit;
	
}




.basic {
	margin:30px 50px 0px 50px;
}

.basic h1, h3, h5 {
	margin-left:0px;
	margin-bottom:10px;
}
.basic h2, h4, h6 {
	margin-left:0px;
	margin-bottom:10px;
	color:#9900ff;
}

/* Pop Up CSS */
.box {
	width: 40%;
	margin: 0 auto;
	background: rgba(255,255,255,0.2);
	padding: 35px;
	border: 2px solid #fff;
	border-radius: 20px/50px;
	background-clip: padding-box;
	text-align: center;
}

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index:1000;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 30%;
	position: relative;
	transition: all 5s ease-in-out;
}

.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 1.875em;
	font-weight: bold;
	text-decoration: none;
	color: #9900ff;
}
.popup .close:hover {
	color: #C432C5;
		background-color: inherit;
	display:inherit;
}
.popup .content {
	max-height: 30%;
	overflow: auto;
	text-align:left;
}

@media screen and (max-width: 700px){

	#main {
		background-image:url(images/mtrockheader.jpg);
		background-position: top center;
		background-repeat:no-repeat;
		background-attachment: fixed;
		background-size: fill;
		width:100%;
		padding-top:20px;
		margin-left:auto;
		margin-right:auto;
		font-family:lato !important;
	}

	#content {
		background-color:#FFFFFF;
		border-radius:0px;
		margin-top:30px;
		padding:0px 0px 50px 0px;

	}
	#footer {
		border-radius:0px;
	}
	.footer_right {
		display:none;
	}
	.footer_block {
		width:100%;
	}
	#stream {
		width:100%;
	}
	#today_schedule {
		display:none;
	}
	#streamblock {
		margin:0px;
		padding:0px 20px 20px 20px ;
		border-radius:0px;
		background: rgba(204,51,204,1);
		background: -moz-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,51,204,1)), color-stop(100%, rgba(153,0,255,1)));
		background: -webkit-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
		background: -o-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
		background: -ms-linear-gradient(top, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
		background: linear-gradient(to bottom, rgba(204,51,204,1) 0%, rgba(153,0,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33cc', endColorstr='#9900ff', GradientType=0 );
	}
	#streamblock p {
		padding:20px 0px;
		font-size:250%;
	}
	.feature {
		width:100%;
		height:200px;
		display:block;
		background-color:#555;
		position:relative;
		border-top:2px solid #FFFFFF;
	}
	.feature_overlay p {
		font-size:150%;
	}
	.border_right {
		border-right:0px;
	}
	#news {
		width:100%;
		margin-right:0px;
		padding-bottom:30px;
	}
	#index_social {
		width:100%;
	}

	/*Schedule */

	.schedcal_hours {
	}
	.schedcal_show {
		width:100%;
		display:inline-block;
		margin-right:0px;
		padding:20px 10px;
		padding-bottom:0px;
		font-size:150%;
	}
	.schedcal_name {
		width:100%;
		display:inline-block;
		margin-right:0px;
		padding:20px 10px;
		padding-top:10px;
		float:none;
		color:#9900ff;
	}

	/*Podcasts*/
	#podcasts {
		display:flex;
		flex-wrap:wrap;
		padding:30px 50px 50px 50px;
	}
	#featuredtext {
		width:100%;
		padding-right:0px;
		line-height:150%;
		color:#000000;
	}
	#featuredtext strong {
		font-size:110%;
	}
	#featuredtext h3 {
		color:#9900ff;
	}

	#featuredtext h1 {
		margin-left:0px;
		margin-top:0px;
	}
	#content h2, h4, h6 {
		margin-left:0px;
		margin-top:0px;
		color:#9900ff;
	}
	#featuredimg {
		display:none;
	}
	#podcasts_all {
		margin-top:50px;
	}
	.podcastentry {
		display:block;
		background-color:#eaeaea;
		padding:30px 20px;
		width:100%;
		border-radius:5px;
		margin:0px;
		margin-bottom:30px;
		text-decoration:none;
		color:#000000;
		opacity:1;
		font-size:80%;
	}
	.podcastentry strong {
		font-size:110%;
	}
	.whitebox {
		color: #FFFFFF !important;
			background-color: inherit;
	display:inherit;
	}
	/*past events*/
	.halfblock {
		width:100%;
		padding:0px 50px;
	}
	.halfblock img {
		display:none;
	}
	.flex {
		flex-wrap:wrap;
	}
	.box{
		width: 70%;
	}
	.popup{
		width: 70%;
	}
	.basic {
		padding-top:30px;	  
	}
	#footer {
		margin-bottom:0px;
	}
	#header p {
		display:none;
	}
	#logo img {
		width:auto;
		height:100px;
	}

	.eventcal_date {
		width:calc(30% - 30px);
		font-size:80%;
	}
}