/*

	CSS for override slider

	see http://stackoverflow.com/questions/13550541/media-min-width-max-width for diff max sizes
*/


/********* Home Page Button Stylings ****************************/


 .slider-btn-section
 {
	position: absolute;
	right: 20px;
	width: 200px;	
 }
  
 .slider-btn-wrapper
 {
	display: inline-block;
	margin-top: 15px;
	min-width: 180px;
	max-width: 180px;
 }

 .slider-home-page-btn  /* normal state */
 {
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, .5);   
	font-family: sans-serif;
	font-size: 20px;
	padding: 12px;
	color: #ffffff;
 }


 a.slider-home-page-btn
 {	 
	display: inline-block; 
    white-space: nowrap;
	width: 100%;
 }
 
 .slider-home-page-btn:hover
 {
    background: rgb(0,0,0);  /* not transparent */
}

  
.slider-home-btn-text
{
    color: #ffffff;	
}

span.slider-home-btn-text
{
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	white-space:normal;
	margin: 3px;
	font-weight: bold;
} 

/*************  change the caption text  **************************/

.flex-caption
{
	font-style: italic;
	font-family: sans-serif;
	font-size: 18px;
}

/* for large displays */
@media only screen and (min-width:769px) 
{
	.slider-btn-section
	{	
		top: 150px; 
		width: 280px; 
	}
		
	.slider-btn-wrapper
	{
		min-width: 270px;
		max-width: 270px;
	}
	
	.slider-home-page-btn
	{
		font-size: 30px;
	}	
}
@media only screen and (max-width: 768px) 
{
	 .slider-btn-section
	 {
		top: 220px; 
	 }
 }  
 @media only screen and (max-width: 630px) 
 {
	 .slider-btn-section
	 {
		display: none;
	 }
 }