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

body {
	background-color:#000000;
	color:#FFFFFF;
	margin:0px;
	font-family:lato, sans-serif;
}
main {
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.bio wrap {
		max-width:1200px;
		margin-left:auto;
		margin-right:auto;
}
#container2 h1, h2, h3, h4, h5, h6 {
	color:#FFFFFF;
	font-family:lato, sans-serif;
	font-weight:900;
	text-transform:uppercase;
}
#container2 span, p {
	font-family:lato, sans-serif;
	color:#FFFFFF;
}
#about {
	width:100%;
	background-image:url(images/about_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
}
#contact {
	width:100%;
	background-image:url(images/contact_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
}
#staff {
	width:100%;
	background-image:url(images/staff_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
}
#main {
	width:100%;
	background-image:url(images/index_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
}
#podcast {
	width:100%;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/podcast_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
}
#schedule {
	width:100%;
	background-image:url(images/schedule_header.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100% auto;
	max-width:1600px;
	margin-left:auto;
	margin-right:auto;
}
#mtrockbase {
	background-color: #606060;
}
#mtrockfooter {
	margin-left:auto;
	margin-right:auto;
	max-width:1200px;
	min-width:400px;
	display:flex;
	line-height:150%;
	padding:50px 0px;
}
#mtrockfooter a {
	color:#FFFFFF;
}
#mtrockfooter a:hover {
	color:#d9d9d9;
}
#mtrockdisc {
	width:60%;
	flex-grow:3;
}
#mtrockdisc h6 {
color:#ffffff !important;
}
#mtrocksocial {
	width:30%;
	flex-grow:1;
	padding-left:10%;
}
#mtrocksocial h6 {
color:#ffffff !important;
}
#mtrocknav {
	padding-top:50px;
	padding-bottom:5%;
	padding-left:2%;
	padding-right:2%;
	max-width: 1200px;
	min-width: 600px;
	margin-left: auto;
	margin-right: auto;
	display:flex;
	align-items: center;
}
#mtrocklogo {
	width:30%;
	color:#FFFFFF;
}
#mtrocklogo a {
	display:block;
	width:200px;height:97px;
	background-image: url('images/logo.png');
	opacity:.85;
}
#mtrocklogo a:hover {
	opacity:.65;
}
#mtrockmenu {
	color:#FFFFFF;
	text-align:right;
	width:70%;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.25em;
}
#mtrockmenu a {
	font-family:lato;
	border-radius:5px;
	font-weight:900;
	color:#ffffff;
	padding:10px 30px;
	text-decoration:none;
}
#mtrockmenu a:hover {
	background-color: rgba(255, 255, 255, 0.85);
	color:#000000;
}
#contentbar {
	display: flex;
	max-width: 1200px;
	min-width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-left:2%;
	padding-right:2%;
	padding-bottom:100px;
}
#contentbar a {
	margin-top:40px;
	display:inline-block;
	font-family:lato;
	font-weight:900;
	color:#000000;
	padding:10px 30px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius:5px;
	text-transform:uppercase;
	text-decoration:none;
}
#contentbar a:hover {
	background-color: rgba(255, 255, 255, 0.0);
	color:#ffffff;
}
#contentbar h1, h3, h6 {
	color:#ffffff !important;
}
#contentbar h1, h3, h6 {
	color:#ffffff !important;
}
#sched {
	flex-grow: 1;
	font-family:lato;
	padding-right:50px;
	line-height:150%;
	color:#FFFFFF;
	min-width:40%;
}
#sched h3 {
	color:#ffffff !important;
}
#events {
	flex-grow: 2;
	font-family:lato;
	padding-left:50px;
	line-height:150%;
	color:#FFFFFF;
}
#events h3 {
	color:#FFFFFF !important;
}
#events span {
	color:#FFFFFF;
	font-family:lato;
}
/*contact page*/
#contactinfo {
	width:40%;
	margin:5%;
	flex-grow:1;
	line-height:150%;
}
#contactinfo h3, #contactinfo h6 {
	color:#FFFFFF !important;
}
#contactform {
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 5px;
	width:40%;
	margin:5%;
	padding-left:5%;
	padding-right:5%;
	padding-top:2%;
	padding-bottom:2%;
	flex-grow:1;
	color:#000000;
}
#contactform label {
	font-weight:900;
	text-transform:uppercase;
}
.bioimg {
	width:100%;
	border:10px solid #FFFFFF;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:3%;
}
.social {
	width:50px;
	height:50px;
	margin-left:2%;
	margin-right:2%;
}
#stream {
	display: flex;
	background-color: rgba(255, 255, 255, 0.85);
	padding: 20px;
	border-radius: 5px;
	max-width: 1200px;
	min-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
#stream a {
	margin-top:40px;
	display:inline-block;
	font-family:lato;
	font-weight:900;
	color:#FFFFFF;
	padding:10px 30px;
	background-color:#000000;
	border-radius:5px;
	text-transform:uppercase;
	text-decoration:none;
	border: 1px solid transparent;
}
#stream a:hover {
	background-color:transparent;
	border: 1px solid #000000;
	color:#000000;
}
#stream h1, h3, h6 {
	color:#000000 !important;
}
#listen {
	font-family: Monoton;
	text-transform: uppercase;
	display:flex;
	align-items: center;
	justify-content: center;
	font-size: 300%;
	font-weight: normal;
	flex-grow: 1;
	color:#000000;
	}

#streamframe {
	width: 100%;
	height: 100px;
	}
.schedentry {
	display:block;
	padding:5px 0px;
	}
.schedcal_entry strong {
	padding-right:20px;
}

.schedcal_entry .tooltiptext {
    visibility: hidden;
    width: 100%;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left:27%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.schedcal_entry .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.schedcal_entry:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.schedcal {
	display:flex;
}
.schedcal_entry {
	width:20%;
	display:block;
	padding:20px;
	margin:10px;
	background-color: rgba(255, 255, 255, 0.85);
	color:#000000;
	border-radius:5px;
	font-weight:900;
	text-decoration:none;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.schedcal_entry:hover {
	background-color: rgba(255, 255, 255, 0.65);
}
.schedcal_hours {
	display:block;
	width:100%;
	text-align:center;
	color:#000000 !important;
}
.schedcal_name {
	display:block;
	width:100%;
	text-align:center;
	color:#000000 !important;
}
.schedcal_show {
	display:block;
	padding-top:40px;
	width:100%;
	text-align:center;
	color:#000000 !important;
	text-transform: uppercase;
	font-size:120%;
}
	/*podcasts*/
#featuredtext {
	padding:5%;
	width:50%;
	line-height:150%;
	color:#000000;
	}
#featuredimg {
	padding:5%;
	width:50%;
	}
.podcastentry {
	padding-top:25px;
	padding-bottom:25px;
	border-bottom:1px solid #FFFFFF;
	color:#FFFFFF;
	}
.podcastentry h3 {
	color:#FFFFFF;
	}
.whitebox {
		color: #FFFFFF !important;
	}
@media screen and (orientation:portrait) and (max-width:800px){
	.dj {
		width:90%;
		}
	.mtrockdisc {
		width:90%;
		}
	.mtrocksocial {
		width:90%;
		}
	#stream {
		display:block ;
		width:90%;
		border-radius:0px;
		padding-left:5%;
		padding-right:5%;
		}
}