* {
  box-sizing: border-box;
   margin: 0;
  padding 0;
}


/* this is for the img drop downs fro links */
body {
	background-color: #FFFFFF;
  	font-family: Arial;
  	}

/* top links */
.buttons {
	width: 100%;
	background-image: url('../../doug/pict/details/back.top.jpg');
  	background-size: 100% 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: row;
	}
.centercontain {
	background-color: #FFFFFF;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
}
.center {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.unbutleft {
	width: 21.66%;
  	height: 20px;
  	background-image: url('../../doug/pict/details/out.top.jpg');
  	background-size: 100% 100%;
	}
.unbutright {
	width: 46.66%;
  	height: 20px;
  	background-image: url('../../doug/pict/details/out.top.jpg');
  	background-size: 100% 100%;
	
	}
	/* Top Links END */
.contain {
	background-color: #EEEEEE;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;}
	
/* END */


/* top links */

	/* Top Links END */

.songfull {
	
	
	max-width: 100%;

	}

.right {
	max-width: 100%;
	background-color: #EEEEEE;
	padding: 5px;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	}
.songtitle {
    max-width: 100%;
    border-radius: 10px;
	text-align: center;
	align-content: space-around;
	padding: 5px;
	background-color: #DDDDDD;
	margin: 0px 0px 0px 5px;
	}
.audioplayer {
	width: 100%;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.audioplayer1 {
	width: 100%;
	text-align: center;
	padding: 10px 0px 10px 0px;
}

.button {
	background-color: #BFBFBF;
	border-radius: 6px;
	margin: 5px 0px 0px 0px;
	padding: 5px 5px 5px 5px;}

  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 499px) {
.body {font-size: 14px;}
.button {font-size: 14px;}
.home {display:  none;}
.audrey { width: 25%;}
.charlie { width: 25%;}
.chris { width:  25%;}
.doug { width: 25%;}
.unbutleft {width: 21.66%;}
.unbutright {width: 46.66%;}
.centercontain {
	max-width: 499px;}
.contain {
	height: 260px;
	max-width: 499px;
	display: flex;
	flex-direction: column;}
.audioplayer1 {
	display: none;}
.audioplayer {
	width: 100%;
	text-align: center;
	padding: 5px 0px 5px 0px;
}
.songfull img{
	padding: 0px;
	border-radius: 10px;
	max-width: 200px;
	}
.songtitle {
	height: 200px;
	width: 100%;}	
.header {
	display: none;}
.buttons { display: none;}
	}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 500px) {
.body {font-size: 15px;}
.button {font-size: 15px;}
.home {display:  none;}
.audrey { width: 25%;}
.charlie { width: 25%;}
.chris { width:  25%;}
.doug { width: 25%;}
.unbutleft {
	width: 21.66%;}
.unbutright {
	width: 46.66%;}
.centercontain {
	max-width: 600px;}
.contain {
	max-width: 600px;}
.right {
	max-width: 600px;
	background-color: #EEEEEE;
	padding: 5px;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	}
.header { display: none; }
.buttons { display: none;}
.songfull img{
	padding: 0px;
	border-radius: 10px;
	max-width: 250px;
	}
.songtitle {
	height: 250px;
	width: 100%;}
.audioplayer1 {
	display: block;}	
.audioplayer {
	display: none;}	}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 701px) {
.body {font-size: 17px;
background-color: #FFFFFF;}
.button {font-size: 17px;}
.home {
	display:  block;}
.centercontain {
	max-width: 800px;}
.contain {
	max-width: 800px;
	background-color: #FFFFFF;}
.home { width: 12.5%;}
.audrey { width: 21.875%;}
.charlie { width: 21.875%;}
.chris { width:  21.875%;}
.doug { width: 21.875%;}
.unbutleft {
	width: 31.875%;}
.unbutright {
	width: 41.25%;}
.right {
	max-width: 800px;
	padding: 5px;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	}
.songfull img{
	padding: 0px;
	border-radius: 10px;
	max-width: 300px;
	}
.songtitle {
	height: 300px;
	width: 100%;}	
	.header { display: block; }
.buttons { display: block;}	
	}