* {
		box-sizing: border-box;
	}
	
		body{font-family: arial;}
		
		
		#id-hymn, #id-missal, #id-adoration, #id-cross, #id-prayers, #id-doctrine, #id-rosary {
			color: blue; font-weight: bold; background-color: white;
			border-radius: 5px; padding: 2px; margin-right: 7px; font-size: 70%; float: left; margin-left: 8%;
			}
			
		
	
	
	audio{
		height: 100% !important; 
		width: 48px !important;
		float: right !important;
		padding-bottom: 7px;

	}
	
	
	div .left-tile{ 
		float: left; width: 78%;
	}	
	
	
	div .audio-right{ background-color:  #237c6c;
		border-radius: 5px; 
		height: 5.5rem !important;  
		padding: .7%;
		border: 1px solid #ddd;  
		
		width: 22% !important;  float: right !important; 	
	}	
		
/* screen sizes using @media = 98% broswer support '320px', 480px, 600px, '768px', 900px, 1024px, '1200px' */

/*  320 px device as default */
/* ======================================================================*/

@media screen and (max-width: 480px ){
	.myheader {
			font-size: 18px !important; font-weight: 700 !important; text-align: center !important;
			margin: 6px 2px; color: white !important
		}
	
}


	@media screen and (min-width: 480px ){
		
		.myheader {
			font-size: 24px !important; text-align: center !important;
			margin: 6px 2px; color: white !important; font-weight: 700 !important;
		}

		audio{
		height: 40px; 
		width: 70px;
		}
		
		.tabs .tab>label {
		padding: 2.5px 6px !important; /*.7vw .7vw */
		 font-size: 19.2px !important; 
		margin: 4px 4px !important;
		}
		
		.tagtext {
		/*background-image: url(mary1.jpg);*/
			display: block !important; color: blackgray; font-size: 11.5px; 
			font-weight: bold; text-align: justify;
			padding-top: 15px !important; 
		}
		
		.tabs .content {
		font-size: 20px !important;
		z-index: 0;/* 0 or display: none; */
		width: 99.5%; /* 600px; */
		height: 600px;
		position: absolute;
		top: 33px !important; /* 27px;3.5vw */
		left: 0; /* makes all align from start */
		}
		
		
	}
/* ======================================================================*/
		
	@media screen and (min-width: 600px ){
		audio{
		height: 60px !important; 
		width: 130px !important;
		padding-bottom: 20px;
		}
		
		
	div .audio-right{ 	
		height: 7.5rem !important; 
		padding-bottom: 40px !important;
	}	
		
		.bgd-img {
		/*background-image: url(mary1.jpg);*/
		padding: 10px !important; 
		display: block !important; width: 99%;
		}
		h1 .myheader { font-size: 28px !important;}

	}
	
	
			
/* ======================================================================*/

@media screen and (max-width: 767px ){
		audio{
           height: 60px !important; 
		width: 130px !important;
		padding-bottom: 20px !important;
    }
}

	@media screen and (min-width: 768px ){
		/*audio{
			
		height: 100% !important; 
		width: 150px !important;
		object-position: relative;
		}*/
		
		#myUL li .entr{
		font-size: 14px !important; 
		
		}
		
		#myUL li a {
				font-size: 24px !important;
		}
		
		#myUL li .subtitle {
			font-size: 16px !important; 
			
		}
		
		#myUL li {
			height: 7rem !important; 
		}
		
		#myInput {
			font-size: 20px !important;
			
		}
		
	.tagtext {
		/*background-image: url(mary1.jpg);*/
		display: block !important; color: blackgray; font-size: 16.5px; font-weight: bold;
		
		}
	
	}
/* ======================================================================*/
		
	
	@media screen and (min-width: 992px){
	/*	audio{
		height: 100% !important; 
		
		width: 180px !important;
		padding-bottom: 50px;
		}
        */	

		div .audio-right{ 	
		margin-bottom: 100px !important;  	
		}	
		
	}

/* ======================================================================*/
		
		
	@media screen and (min-width: 1024px){
	/*	audio{
		height: 60px !important; 
		width: 195px !important;
		
		}
        */
		
		div .audio-right{ 	
		padding-bottom: 120px !important;  	
		}	
		
		.tabs .tab>label {
		padding: 3.5px 6px !important; /*.7vw .7vw */
		 font-size: 22.2px !important; 
		margin: 4px 4px !important;
		}
		
		.tabs .content {
		font-size: 24px !important;
		z-index: 0;/* 0 or display: none; */
		width: 99.5%; /* 600px; */
		height: 600px;
		position: absolute;
		top: 12px !important; /* 27px;3.5vw */
		left: 0; /* makes all align from start */
		}
		
		.myheader { font-size: 30px !important;}

		
		.tagtext {
		/*background-image: url(mary1.jpg);*/
		display: block !important; color: blackgray; font-size: 14.5px; font-weight: bold;
		
		}
		
		
	}	
		
		
/* ======================================================================*/
		
		
		
	@media screen and (min-width: 1200px ){
	
    /*	audio{
		height: 150px !important; 
		width: 250px !important;
		}
		
        */
		h1 .myheader {font-size: 36px !important;}

		
		
		
		
	}	
		
/* ======================================================================*/
	
		
/* Ends screen sizes using @media = 98% broswer support */		




	
	#myUL li .entr{
		font-size: 12px; color: #606;
		
	}
	
	#myUL li .subtitle {
		font-size: 11px !important; color: white;
		
	}
	
	
		
	#myUL li {
		  
		  width: 100%;  height: 5rem;  
		 overflow-y: hidden;
		 border-radius: 0.5rem; padding-bottom: 1rem; 
		 margin-right: 5px !important; margin-bottom: 3px !important;
		}
		
	

	#myInput {
		background-image: url("searchicon.png");
		background-position-y: 50%; background-position-x: 5px ;
		background-repeat: no-repeat;
		width: 100%; 
		
		padding: 2px 30px;
		background-size: 2rem; margin: 16px 0.5%;
		border: 1px solid #ddd;
		font-style: italic; font-weight: 800;
		font-size: 80%;
		
		}
		
		
		
	

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

	#myUL li a:hover:not(.header) {
		background-color: #0099cc; color: white; font-weight: 800;
	}
	
	#myUL li a {
	box-shadow: 0.5px 1.8px 0px rgba(3, 3, 7, 0.5);

	border-bottom:  solid 1px #627299;
	/* <!-- Prevent double borders -->*/
	
	
	
	
	padding-top: -1rem;
	padding-bottom: -1rem;
	text-decoration: none;
	font-size: 16px;
	
	color: hsl(80, 70%, 100%);/* <!-- hue sat, ligtness
	
	text-shadow: 0 0 2px #fff,
			-1px -1px 0 hsl(80, 70%, 35%),
			-3px -3px 0 7px hsl(60, 10%, 65%),
			-4px -4px 0 7px hsl(60, 10%, 65%);
			-->*/
			
	display: block;
	font-weight: bold;
	background-color: #237c6c;
	overflow-y: hidden;
	
}


	


	/* open with  firefox dev edition > open menu icon > web developer > console ... u will see error etc */



	* {
		margin: 0;
		padding: 0;
	}

	h1, h2, h3, h4{
	  text-transform: uppercase;
	  font-weight: 600;
	}

	.tabs{
		width: 100%; /* 600px; */
		display: block;
		position: relative;
		
	}

	.tabs .tab{
		float: left; /* left */
		display: block;
		padding-right: 3.15px;
	}

	.tabs .tab>input[type="radio"] {
		position: absolute; /* absolute */
		top: -9999px;
		left: -9999px;
		/*display: hidden; */
	}

	.tabs .tab>label {
		display: block;
		padding: 0.05px 5px; /*.7vw .7vw */
		 font-size: 19.2px; 
		text-transform: uppercase;
		cursor: pointer;
		position: relative;
		color: #FFF;
		background: #4A83FD; 
		font-weight: 700;
		border-radius: 2px;
		border-bottom-color: white;
		margin: 4px 1.4px ;
		
	}
	
	

	.tabs .content {
		text-align: center;	
		font-style: normal;
		/*font-size: 14px;
		z-index: 0; 0 or display: none; */
		width: 99.5%; /* 600px; */
		height: 600px;
		position: absolute;
		top: 58px; /* 27px;3.5vw */
		left: 0; /* makes all align from start */
		margin-top: 52px;
		background: #545252;  /* 393838 303030*/
		color: #DFDFDF;
		
		
		margin-left: 0; 
		margin-right: 7px;
		
		
		opacity: 50;
		transition: opacity 350ms ease-out;
	}

	.tabs>.tab>[id^="tab"]:checked + label {
		top: 0;
		background: #545252;
		color: #F5F5F5;
		
	}

	.tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
		z-index: 1;/* or display: block; */
		padding: 0; 
		opacity: 100;
		transition: opacity 350ms ease-out;
		
	}
		
	.ifr {
		background-color: white;
		border: 1px; 
	}
	
	.ifr-color{background-color: white;}
	
	.bgd-img {
		/*background-image: url(mary1.jpg);*/
		padding-top: 3px; 
		display: none;
		margin-bottom: -4px; width:"320px"
	}
	
	.upsettop {
		
		padding-top: 2px;
		font-weight: 400;
		height: 100px;
	}
	
	
	.tagtext {
		margin-top: -13px;
		display: none;
		color: blackgray; 
		
	}
	
	.myheader1 {
		display: block; 
		text-align: center; font-size: 18px !important; margin: 3px; width: 100%;}
	
	
	
	
	
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */

		
	
	/*use this music bar one
	img{
		alt: | !important;
		width: .35rem !important;
		height: 2rem !important; 
		background: red !important;
		color: red;
		margin: 1rem .5rem 0 .5rem !important; 
		vertical-align: sub !important;
		font-weight: bold;
	}
	
	*/
	
	
	.solfa{color: purple; font-weight: 600;}
	
	.lyrics{color: black;  font-weight: 600;}
	.ch {color: red; font-weight: 600;}
	.key {color: green; font-weight: 600;}
	.h-title {color: blue; font-weight: 700;}
	
		
	.c {
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   height:100%;
	   width:100%;
	}
	
	.dd {
	   z-index:1;
	   position:relative;
	   display: inline-block;
	}
	.dd-a {
	   padding:10px;
	   background:white;
	   position:relative;
	   -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	   transition-duration: 0.2s;
	   -webkit-transition-duration: 0.2s;
	}
	.dd input:after {
	   content:"";
	   width:100%;
	   height:2px;
	   position:absolute;
	   display:block;
	   background:#C63D0F;
	   bottom:0;
	   left:0;
	   transform: scaleX(0);
	   transform-origin: bottom left;
	   transition-duration: 0.2s;
	   -webkit-transform: scaleX(0);
	   -webkit-transform-origin: bottom left;
	   -webkit-transition-duration: 0.2s;
	}
	.dd input {
	   top:0;
	   opacity:0;
	   display:block;
	   padding:0;
	   margin:0;
	   border:none;
	   position:absolute;
	   height:100%;
	   width:100%;
	}
	.dd input:hover {
	   cursor:pointer;
	}
	.dd input:hover ~ .dd-a {
	   -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	   box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	}
	.dd input:checked:after {
	   transform: scaleX(1);
	   -webkit-transform: scaleX(1);
	}
	.dd input:checked ~ .dd-c {
	   transform: scaleY(1);
	   -webkit-transform: scaleY(1);
	}
	.dd-a span {
	   color:#C63D0F;
	}
	.dd-c{
	   display:block;
	   position: absolute;
	   background:white;
	   height:auto;
	   transform: scaleY(0);
	   transform-origin: top left;
	   transition-duration: 0.2s;
	   -webkit-transform: scaleY(0);
	   -webkit-transform-origin: top left;
	   -webkit-transition-duration: 0.2s;
	}
	.dd-c ul {
	   margin:0;
	   padding:0;
	   list-style-type: none;
	}
	.dd-c li {
	   margin-bottom:5px;
	   word-break: keep-all;
	   white-space:nowrap;
	   display:block;
	   position:relative;
	}
	a {
	   display:block;
	   position:relative;
	   text-decoration: none;
	   padding:5px;
	   background:white;
	   color: #C63D0F;
	   /*color: rgba(24, 246, 208, 0.65); #C63D0F*/
	}
	a:before {
	   z-index:0;
	   content:"";
	   position:absolute;
	   display:block;
	   height:100%;
	   width:100%;
	   -webkit-transition-duration: 0.3s;
	   transition-duration: 0.3s;
	   transform-origin:top left;
  	  -webkit-transform-origin:top left;
	   background: #C63D0F;
  	   background: rgba(24, 246, 208, 0.65);
	   top:0;
	   left:0;
	   transform: scaleX(0);
	   -webkit-transform: scaleX(0);
	}

	a:span {
	   display: block;
	   position: relative;
	   -webkit-transition-duration: 0.3s;
	   transition-duration: 0.3s;
	}
	a:hover:before {
	   transform:scaleX(1);
	   -webkit-transform:scaleX(1);
	}
	a:hover span {
	   color:white;
	}