@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(255,0,0,0.8);
}
#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:#000;
  font-size:16px;
  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;
}
/*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;
  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:#cc33cc;
  color:#FFFFFF !important;
}
.button:visited {
  color:#FFFFFF !important;
}
.button:active {
  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 div {
  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 div {
  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;
  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:2em;
  color:#FFFFFF;
  text-transform:uppercase;
  text-align:right;
  margin-bottom:30px;
  text-shadow: 0px 0px 10px rgba(0,0,0,1);
  line-height:120%;
}
.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;
  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;
}
/*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%;
}
.whitebox {
  color: #FFFFFF !important;
}




.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:2
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

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

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #9900ff;
}
.popup .close:hover {
  color: #cc33cc;
}
.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;
	}
	/*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:150px;
	height:auto;
  }
}