@charset "UTF-8";
/* CSS Document */

<!--google fonts - start - also place this in the head of each page -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 
<!--google fonts - end-->


/* Images */


img {
	width: 100%;
	height: auto;
}



picture{
	width: 100%;
	height: auto;
}


body {
	margin: 0;
	background-position: center top;
	background-color: #fff;
}


#social1:hover, #social2:hover, #social3:hover, #social4:hover {
	cursor: pointer;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
	opacity: .2;
}

#podcast-box1:hover, #podcast-box2:hover, #podcast-box3:hover, #podcast-box4:hover {
	cursor: pointer;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
	opacity: .2;
}


.box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
}
.box .podcast-text{
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;        
        text-align: center;
        top: 10%; /* Adjust this value to move the positioned div up and down */
        width: 100%; /* Set the width of the positioned div */
}

h1 {
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	color: #ec1c24;
	text-align: left;
	line-height: normal;
	text-transform: uppercase;
	margin: 0px;
}
h2 {
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	color: #000000;
	text-align: left;
	text-transform: uppercase;
	margin: 0px;
}
h3 {
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	color: #ec1c24;
	line-height: normal;
	text-transform: uppercase;
	margin: 0px;
}
h4 {
	font-family: "Roboto Slab", Georgia, Times New Roman, Times, serif;
	color: #ec1c24;
	text-align: center;
	line-height: normal;
	margin: 0px;
	font-weight: 300;
}

p {
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 16px;
	color: #000;
	text-align: left;
	font-weight: normal;
	line-height: 24px;
}

figcaption {
    margin: 5px 0 0 0;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 10px;
    color: #5f5d5d;
    text-align: center;
    font-style: italic;
}

figure {
	display: block;
    margin-block-start: 0;
    margin-block-end: 9px;
    margin-inline-start: 9px;
    margin-inline-end: 0;
}

 li {
	font-family: "Helvitica", arial, sans-serif;
	font-size: 16px;
	color: #000;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	line-height: 24px;
}


ul {
	font-family: "Helvitica", arial, sans-serif;
	font-size: 16px;
	color: #000;
	margin: 0px;
	font-weight: normal;
	line-height: 24px;
}

#podcast-container a:-webkit-any-link, #podcast1 a:-webkit-any-link, #podcast2 a:-webkit-any-link, #podcast3 a:-webkit-any-link, #podcast4 a:-webkit-any-link {
    color: #14303a;
	cursor: pointer;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: none;
    text-decoration-color: none;
}

a:link {
	
	font-family: "Helvitica", arial, sans-serif;
    font-size: 16px;
    color: #ec1c24;
	font-weight: normal;
	line-height: 22px;
    text-decoration: none;
	
}
a:visited {
	
	font-family: "Helvitica", arial, sans-serif;
    font-size: 16px;
    color: #ec1c24;
	font-weight: normal;
	line-height: 22px;
    text-decoration: none;
}
a:hover {	

	
	font-family: "Helvitica", arial, sans-serif;
    font-size: 16px;
    color: #000000;
	font-weight: normal;
	line-height: 22px;
    text-decoration: underline;
}
#footer p {
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	text-align: center;
	font-weight: normal;
	line-height: 22px;
}
#footer p a:link {
	
	font-family: "Helvitica", arial, sans-serif;
    font-size: 14px;
    color: #fff;
	font-weight: normal;
	line-height: normal;
    text-decoration: none;
	
}
#footer p a:visited {
	
	font-family: "Helvitica", arial, sans-serif;
    font-size: 14px;
    color: #fff;
	font-weight: normal;
	line-height: normal;
    text-decoration: none;
}
#footer p a:hover {	

	font-family: "Helvitica", arial, sans-serif;
    font-size: 14px;
    color: #490000;
	font-weight: normal;
	line-height: normal;
    text-decoration: underline;
}



/*======= MEDIA QUERIES =======*/

@media="only screen and (min-width: 1px) and (max-width: 480px) {
	
h1 {
	font-size: 26px;
}

h2, {
	font-size: 18px;
	padding-bottom: 10px;
}

h3 {
	font-size: 26px;
	text-align: center;
}

h4 {
	font-size: 16px;
}


	
	}
	
	@media="only screen and (min-width: 481px) and (max-width: 768px) {
		
h1 {
	font-size: 26px;
}

h2 {
	font-size: 22px;
	padding-bottom: 10px;
}

h3 {
	font-size: 26px;
	text-align: center;
}

h4 {
	font-size: 16px;
}

		
}
	
	@media only screen and (min-width: 769px) {
		
h1 {
	font-size: 40px;
}
		
h2 {
	font-size: 30px;
	padding-bottom: 10px;
}

h3 {
	font-size: 35px;
	text-align: center;
}

h4 {
	font-size: 16px;
}



		
}