html {
			overflow-x: hidden;
			overflow-y: hidden;
		}  

	body {
			margin: 0px;
			padding: 0px;
			background: #000;
		}

		#slider {
	/*		position: absolute;  */
			max-width: 100%;
			height: 200px;  /* dictates how high prayer text goes, bigger number, further down */
			overflow: hidden;
			/*	background: #000;   
			border: 20px solid #000; */
		}

		#slider .slide {
			position: absolute;
			top: 0px;
			bottom: 0px;
			width: 100%;
			background: #000;
			overflow: hidden;
			border-left: #000 solid 1px;
			cursor: default;
		}

		#slider .title   {
			color: #F80;
			font-weight: bold;
			font-size: 1.2em;
			margin-right: 1.5em;
			text-decoration: none;
		}

		#slider .backgroundText {
			/* this is important for the fly up effect of the text */
			/* I did transparent to give the toggle effect control over the text */
			position: absolute;
			width: 100%;
			height: 100%;
			top: 100%;
			background: transparent;
			filter: alpha(opacity=40);
			opacity: 0.6;
		}
		
	.day_title {padding-bottom: 10px; font-size: .8em;}

	#slider .text {
		position: absolute;
		color: #FFF;
		font-family: verdana, arial, Helvetica, sans-serif;
		font-size: 1em;
		text-align: justify;
		top: 52vh !important;
		left: 5vw;
		background: rgba(0, 0, 0, 0.6);
		padding: 10px 10px 10px 10px;
	}
	#slider .text p {width: 95%;}
		.start_scroll {width: 850px; height: 250px; overflow-y: auto; overflow-x: hidden;}
		.start_scroll:before {font-style: italic; content: "(scroll text)";}


	.button  {position: absolute; 
	bottom: 10px; 
	left: 90px; 
	width: 100px; 
	color: #808080; background-color: black;
	border: 1px solid #808080;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-moz-box-shadow:    3px 3px 5px 3px #000;
	-webkit-box-shadow: 3px 3px 5px 3px #000;
	box-shadow:         3px 3px 5px 3px #000;
	}	

	#slider .diapo {
		position: absolute;
		visibility: hidden;
	}
	
	/* the overlayed element */
		#text {
		color: #FFF;
		font-family: verdana, arial, Helvetica, sans-serif;
		font-size: 1em;
		text-align: justify;
		line-height: 1.4em;
	}

		#title   {
		color: #F80;
		font-weight: bold;
		font-size: 1.2em;
		margin-right: 1.5em;
		text-decoration: none;
	}

	.simple_overlay {
		z-index: 10000;
		background-color: #000;
		opacity: .85;
		margin-top: -20px;
		width: 60%;
		min-height: 600px;
		border: 2px solid #666;
       padding: 0 25px 25px 25px;
		overflow: visible;
		-moz-box-shadow: 5px 5px 15px  #000;
		-webkit-box-shadow: 5px 5px 15px  #000;
		box-shadow: 5px 5px 15px  #000;
		border-radius: 25px;
	}
	#the_overlay {
		display: none;
	}
	li {margin: 0 0 5px 0;}

	/* close button positioned on upper right corner */
	.simple_overlay .close {
		background-image:url(https://catholicmeditation.com/Pentecost/close.png);
		position:absolute;
		right:-15px;
		top:-15px;
		cursor:pointer;
		height:33px;
		width:33px;
	}


		#slider .text p {width: 95%;}
		.start_scroll {width: 850px; height: 250px; overflow-y: auto; overflow-x: hidden;}
		.start_scroll:before {font-style: italic; content: "(scroll text)";}

		::-webkit-scrollbar {
			width: 1.4vw;
			background: #000;
			border-radius: 7px; 
		}
		::-webkit-scrollbar-thumb {
			background: #F80;
			border-radius: 15px;
			border: #000 solid 1px;
		}
		::-webkit-scrollbar-track{
		box-shadow: 2px 2px 4px #000 inset;
		border-radius: 7px;
		}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
div#the_overlay {
    width: 80vw;
	margin-top: -30px;
}
span.overlay_scroll {
    display: block;
    height: 61vh;
    overflow-y: auto;
   overflow-x: hidden;
    font-size: 1.5em;
    line-height: 1.3em;
    padding: 0 3vw 3vh 1.5vw;
    background: rgba(0, 0, 0, 0.8);
}
#slider .text {
    top: 5vh !important;
	height: 90vh;
   background: rgba(0, 0, 0, 0);
 }
.text {
   width: 62vw;	
}
h3 {
    max-width: 58vw;
}
#toggle4 > div.day_title {
    color: black !important;
}
#toggle4 > h3 {
    background: rgba(0,0,0,.5);
    border-radius: 10px;
    padding: 5px;
}
.start_scroll {
    height: 43vh !important;
    top: 27vh;
    position: relative;
    width: 60vw;
    background: rgba(0, 0, 0, 0.6);
    left: -3vw;
   padding: 10px;
   border-radius: 15px;
   padding-bottom: 30px;
}
input#bt1 {
    display: none;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
div#the_overlay {
    width: 80vw;
	margin-top: -30px;
}
#slider .text {
    top: 5vh !important;
	height: 90vh;
   background: rgba(0, 0, 0, 0);
 }
.text {
   width: 62vw;	
}
h3 {
    max-width: 58vw;
  position: relative;
bottom: 3vh;
}

.start_scroll {
    height: 40vh !important;
    top: 20vh;
    position: relative;
    width: 60vw;
    background: rgba(0, 0, 0, 0.6);
    right: 3vw;
    padding: 20px;
    border-radius: 20px;
}
}
	.text {display: none;}


/* the overlayed element */
.simple_overlay {


	/* place overlay on top of other elements */
	z-index:10000;
		
	/* styling */

	background-color:#000;
	opacity: .8;
	margin-top: -30px;
	width:956px;
	min-height:335px;
	border:1px solid #666;
	padding-left: 25px;
	padding-right: 25px;
	overflow: visible;

}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:33px;
	width:33px;
}