/* NAVBAR TOP COLOR */
.navbar-top {
  width: 100%;
  background-color: #230000;
  color: #ce0202;
}

/* END NAVBAR css */

/* FOOTER COLOR */
.footer {
  width: 100%;
  background-color: #b20101;
  color: #660101;
}

.footer ul {
  list-style: none;
  padding: 20px 0 20px 0;
  margin: 0 auto;
  text-align: center;
}

.footer ul li {
  display: inline;
  padding: 0 10px 0 10px;
}

.footer a:link {
  text-decoration: none;
  color: #ffcccc;
}

.footer a:visited {
  text-decoration: none;
  color: #ff7c7c;
}

.footer a:hover {
  text-decoration: underline;
  color: #ffeaea;
}

.footer a:active {
  text-decoration: underline;
  color: #ffcccc;
}

/* END FOOTER */

/* unvisited link */
a:link {
  color: #910101;
}

/* visited link */
a:visited {
  color: #6d0000;
}

/* mouse over link */
a:hover {
  color: #d80000;
}

/* selected link */
a:active {
  color: #d80000;
}

/* BODY */

* {
  box-sizing: border-box;
}

body {
  padding-top: 51px;
  font-size: 16px;
  background-color: #f4eded; /*#c2d1f0;*/
  /*background-color: #ddcaac;*/
}

#retro_body {
  color: #2e210a;
  padding-top: 51px;
  font-size: 16px;
  background-color: #f7eede;
  }

.retro {
	/*background-color: #f2e6cf;*/
	background-color: #ebd3a8;
}

.background {
  background-color: #fff;
}

.background-index-slides {
  background-color: #262626;
}

.background-retro-slides {
  background-color: #4d3319;
}

.row {
  margin-bottom: 10px;
}

.leftcol {
  margin-left: 10px;
}

.rightcol {
  margin-right: 10px;
}

.no_margin {
  margin: 0;
}

.no_margin_300 {
  margin: 0;
  max-height: 50px;
}

.fill_it {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 0px;
  width: 100%;
  /*background-color: #ebf0fa;
  border: 1px solid darkgray;*/
}

.password-button {
  padding-top: 11px;
}

.no_padding {
  padding: 0;
}
.header_div {
padding-left: 0px;
padding-right: 0px;
}

.slideshow_header_div {
padding-left: 0px;
padding-right: 0px;
max-width: 100%
max-height: 450px;
}

#header {
  position: relative;
  height: 460px;
  /*background: URL('../images/HeaderSpring 2.png') center center;*/
  background-size: cover;
}

#schedule-header {
  position: relative;
  height: 170px;
  color: white;
  font-size: 1em;
  background: URL('../images/Headers/ScheduleHeader.PNG') no-repeat center center;
  background-size: cover;
}

.bott-ctr {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-fit {
   max-width: 100%;
   /*max-height: 100vh;*/
   margin: auto;
  }

/*
.schedule-header {
  position: relative;
  max-height: 250px;
  background: URL('../images/Parkville Carney Business Association 2017-Crop.png') no-repeat center center;
  background-size: cover;
}
*/
.fixed-ratio-resize { /* basic responsive img */
	max-width: 100%;
	height: auto;
	width: auto\9; /* IE8 */
}

#retroheader {
  position: relative;
  width: 100%;
  height: 450px;
  background: URL('../images/headers/Logo-Retro-350.png') center center;
  background-size: cover;
}

#about_info {
  border-top: 1px solid #f2f2f2;
  font-family: 'Slabo 27px', serif;
  color: #333333;
  font-size: 1em;
}

#about_info p {
  margin: 0;
  padding-bottom: 10px;
}

#about_info ul {
  margin: 0;
  padding-bottom: 10px;
  list-style: none;
}

h1 {
  font-family: 'Passion One', cursive;
  margin: 0;
  padding: 0;
  color: #333333;
}

#facebook_feed_embed {
  width: 100%;
  height: 800px;
}

#facebook_feed_embed-small {
  width: 100%;
  height: 600px;
}

.video-index-page {
width:100%;
}

.video-music-page {
	padding-left:5%;
	width:95%;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*********************** MUSIC PAGE ***********************/
/*************** PICS *******************/

/* Direct Copy from Example
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.polariodcontainer {
  text-align: center;
  padding: 10px 20px;
}
*/

/* Custom Revisions */
div.biopic-container {
	/*background-color: #d1c4c4;*/
	width: 100%;
	/*height: 500px;*/
}

div.biopic-container-chuck {
	/*margin-left: 2px;*/
	background-color: #d1c4c4;	
	width: 100%;
	/*min-height: 340px;*/
}

div.biopic-container-mike {
	background-color: #d1c4c4;
	width: 100%;
	/*min-height: 400px;*/
}

div.biopic-container-franco {
	background-color: #d1c4c4;
	width: 100%;
	/*min-height: 550px;*/
}

div.biopic-container-rudy {
	background-color: #d1c4c4;
	width: 100%;
	/*min-height: 530px;*/
}

div.biopic-container-joel {
	background-color: #d1c4c4;
	width: 100%;
	/*min-height: 560px;*/
}

div.biopic-container-george {
	background-color: #d1c4c4;
	width: 100%;
	/*min-height: 280px;*/
}

div.biopic-container-gordon {
	/*background-color: #d5d7d9;*/
	width: 100%;
	/*min-height: 280px;*/
}

div.biopic-container-retro {
	/*background-color: #d5d7d9;*/
	width: 100%;
	/*min-height: 500px;*/
}

div.indslides {
  width: auto;
  background-color: #5b5151;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2px
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 10px;
}

div.picslides {
  width: auto;
  background-color: #caccce;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2px
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 10px;
}

div.polaroid {
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2px
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 25px;
}

div.polaroid-joel {
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2px
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 25px;
  min-height: 635px;
}

div.polariodcontainer {
  text-align: center;
  padding: 10px 20px;
}

div.retropolaroid {
  text-align: center;
  padding: 10px 20px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.tribpolariodcontainer {
  text-align: center;
  width: 100%;
  min-height: 400px;
}

.trib-slideshow-container {
  background-image: url('../images/Wood-Frame.png');
  background-size: 100% 100%;
  /*position: static;*/
  margin: auto;
}

div.tribpolaroid {
  width: 100%;
  background-size: 887px 400px;
  /*background-repeat: repeat;*/
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*margin-bottom: 25px;*/
}

div.tribslides {
  width: 90%;
  min-height: 90%;
}

.tribbgimg {
    background-image: url('../images/Wood-Frame.png');
    background-size: 100% 100%;
}

.retrobgimg {
    background-image: url('../images/Retro-Paper.png');
    background-size: 100% 100%;
}

.retslidebgimg {
    background-image: url('../images/Retro/Retro-Slidwshow-Background.PNG');
    background-size: 100% 100%;
}

div.biopolaroid {
  width: 100%;
  background: URL ('../images/BrandBackground1.PNG');
  background-size: 80px 50px;
  background-repeat: repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.retropolaroid {
  width: 100%;
  background: URL ('../images/BrandBackground1.PNG');
  background-size: 100px 50px;
  background-repeat: repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  max-height: 350px;
}

.biobgimg {
    background-image: url('../images/BrandBackground1.PNG');
    background-size: 80px 40px;
}

.strip-gradient {
background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );
}

.retro-strip-gradient {
background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #958881,
    #999
  );
}

.w3-animate-fading{animation:fading 7s infinite}@keyframes fading{0%{opacity:.1}50%{opacity:1}100%{opacity:.1}}

.Bio-fade-In {animation:fading 6.5s infinite}@keyframes fading{0%{opacity:.01}50%{opacity:1}100%{opacity:.01}}

.slideshow-fade-In {animation:fading 7.5s infinite}@keyframes fading{0%{opacity:.01}50%{opacity:1}100%{opacity:.01}}

/******* MOBILE size xs *******/

.pad-1 {
	padding: 1px;
	background-color: black;
	align="center"
}

.pad-2 {
	padding: 1px;
	max-width: "49%"
	background-color: black;
	align="center"
}

/***** LEFT SIDE *****/
.top_page_header {
margin-top:50px;
}

#audio_samples_list {
list-style: none;
padding:0;
margin:0;
}

#this_guy {
font-family: 'Slabo 27px', serif;
color: #333333;
}

#Slideshow {
font-family: 'Slabo 27px', serif;
color: #ffffff;
}

.artist_name {
font-size: 1.2em;
color: #a50000;
font-family: 'Lobster', cursive;
}
.instrument {
font-size: 1.2;
color: #dc6547;
font-family: 'Lobster', cursive;
}


.song_name {
font-size: 1.2em;
font-family: 'Passion One', cursive;
color: #3C1811;
}.song_date {
font-size: .7em;
font-family: 'Slabo 27px', serif;
color: #3C1811;
}

/***** RIGHT SIDE *****/
#song_list_table {
font-family: 'Slabo 27px', serif;
font-size: .9em;
color: #333333;
margin:0;
padding:0;
border-collapse:collapse;
}


.TFtable{
font-family: 'Slabo 27px', serif;
font-size: .9em;
color: #333333;
margin:0;
padding:0;
border-collapse:collapse;
	}
/*.TFtable td{ 
		padding:7px; border:#4e95f4 1px solid;
}*/
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr{
background: #b8d1f3;
}
/*  Define the background color for all the ODD background rows  */
.TFtable tr:nth-child(odd){ 
/*background: #d5bfff;*/
background: #f4efff;
}
/*  Define the background color for all the EVEN background rows  */
.TFtable tr:nth-child(even){
/*background: #cbafff;*/
background: #e0d4fc;
}


#song_list_table td {
padding: 3px;
}

.header_row {
font-weight: bold;
font-size: 1.2em;
background: #f4efff;
}

/*********************** VIDEO PAGE ***********************/
.video_post {
width:700px;
margin: 0 auto;
padding: 20px 0 20px 0;
}

.video_title {
font-family: 'Slabo 27px', serif;
margin:0;
padding:0;
color: #333333;
}

.video {
width:100%;
height:394px;
}


.video_medium {
width:100%;
height:264px;
}

.video_small {
width:100%;
height:197px;
)

.video_post_retro {
width:100%;
margin: 0 10px;
padding: 20px 0 20px 0;
}

}/*********************** PRACTICE PAGE ***********************/
.Spreadsheet_post {
width:1500px;
margin: 5 auto;
padding: 20px 0 20px 0;
}

.video_title {
font-family: 'Slabo 27px', serif;
margin:7;
padding:5;
color: #333333;
}

.Spreadsheet {
width:1660px;
height:800px;
}

/*********************** SCHEDULE PAGE ***********************/
#schedule_content {
width: 100%;
margin:0;
padding:0;
}

#schedule_content p {
font-family: 'Slabo 27px', serif;
color: #333333;
font-size: 1em;
padding:20px 0 20px 20px;
margin:0;
}

#google_calendar {
width: 100%;
height: 600px;
}

@media screen and (max-width: 730px) {
	.video_post {
	width:500px;
	}
	
	.video {
	width:100%;
	height:300px;
	}
	
	.hide_me {
	display: none;
	}
}

@media screen and (max-width: 526px) {
	.video_post {
	width:300px;
	}
	
	.video {
	width:100%;
	height:210px;
	}
}

@media screen and (max-width: 420px) {
	#header {
	height: 300px;
	}

/* EVENT */
			
	.event_time {
	padding-top: 10px;
	}
	
	.calendar_date_box {
	width: 60px;
	height: 70px;
	}
	
	.calendar_date_red {
	height: 20px;
	}
	
	.calendar_date_red p {
	padding-top: 1px;
	font-size: 14px;
	}
	
	.calendar_date_white {
	height: 50px;
	}
	
	.calendar_date_white p {
	font-size: 35px;
	}

	.event_time {
	font-size: 1em;
	}
	
	.event_venue {
	font-size: 1.2em;
	}
	
	.event_location {
	font-size: .9em;
	}
}

/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
width: 98%;
height: 600px;
overflow: hidden;
background-color: #ffcccc;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Progress Bar */
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 3px;
  background-color: #1F68B1;