/* BEGIN USERS DIVISIONS CSS:
*/

/* RAW SECTIONS IN REGULAR PAGES */
.main[data-section_style=justDiv] .rawSectionContainer
{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #000000;
}

.main[data-section_style=justDiv] .rawSectionContainer .rectangle_list3
{
	color: #C0392B;
	background-color: #FFFFFF;
}	

.main[data-section_style=justDiv] .rawSectionContainer .square_list1 .inner_square
{
	background-color: #FFFFFF;
}

/* 21-JAN-2021: COMMENTED THIS OUT BECAUSE THE DEFAULT SHOULD BE THE LINKS ON THE BOTTOM
#frs_7_linkDiv
{
	position: absolute;
	min-height: 0;
	bottom: 30px;
	width: 5em; /* was using 10%, but small screens made them overflow the (transparent) division. now using 4.5em since links are 3.5 em in width. might want to switch to 90% width links instead, so I only have to change the width here to make them bigger/smaller. it'll also help me test the percentage based links
	left: 1em;
	z-index: 15;
}
*/

#frs_7_linkDiv
{
	position: absolute;
	min-height: 0;
	width: 100%;
	height: 6em;
	bottom: 0px;
	left: 0px;
	z-index: auto;
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 980px) 
{
	#frs_8_linkDiv .goToTop
	{
		background-color: transparent !important;
	}
}
/* 11-JAN-2020: INCORPORATED INTO THE REGULAR CSS NOW: 
.playerWrapper audio, .playerWrapper video
{
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
}

.playerWrapper video
{
	width: auto;
	position: fixed;
	bottom: 0px;
	right: 0px;
}
*/

/* THESE ARE TO OVERIDE THE AUTO-FORMATTING OF BLOG LINKS. (THAT CSS IS LOCATED IN THE _at_bottom.css FILE) */
.blogLinkInner
{
	margin: .2em;
	line-height: normal;
}
.blogLinkInner img
{
	width: 60%;
	height: auto;
	float: right;
}

.info .blogLinkInner .linkTitle
{
	font-size: 1.2em;
	line-height: inherit;
	margin-bottom: 0.3em;
	text-align: center;
}
.blogLinkInner p
{
	line-height: inherit;
	font-size: 0.95em;
}

#frs_4 .mainContainer
{
	/* THIS IS THE BLUE AND WHITE DIAGONAL LINES:
	background: linear-gradient(45deg, white 25%, #184055 25%, #184055 50%, white 50%, white 75%, #184055 75%, #184055);
	background-size:100px 100px
	*/
	
	/* THIS IS THE SAME BLUE COLOR, BUT TRANSLUCENT:
	background-color: rgba(24, 64, 85, .75);
	*/
	
	background-size: 20px 20px;
	background-color: transparent;
	background-image: -webkit-linear-gradient(90deg, #43B140 50%, transparent 50%, transparent);
	background-image: -moz-linear-gradient(90deg, #43B140 50%, transparent 50%, transparent);
	background-image: linear-gradient(90deg, #43B140 50%, transparent 50%, transparent);
}

/* THIS ONE DIDN'T WORK:
#frs_4 .page_background
{
	background-color: transparent;
	background-image: -webkit-linear-gradient(90deg, #43B140 50%, transparent 50%, transparent), url('user_data/pictures/frs_4/lost-places-2669014.jpg');
	background-image: -moz-linear-gradient(90deg, #43B140 50%, transparent 50%, transparent), url('user_data/pictures/frs_4/lost-places-2669014.jpg');
	background-image: linear-gradient(90deg, #43B140 50%, transparent 50%, transparent), url('user_data/pictures/frs_4/lost-places-2669014.jpg');
	background-size: 20px 20px, cover;
	background-repeat: repeat, no-repeat;
}
*/

#frs_9 .mainContainer
{
	background-size: 60px 60px;
	background-image: linear-gradient(90deg, #FFFFFF 50%, transparent 50%, transparent);
}

#frs_8 .page_background
{
	background-size: auto !important;
	background-repeat: repeat-y !important;
	background-position: 75% top !important;	
}

.get_music
{
	text-align: center;
}

.get_music .square_list1
{
	display: inline-block;
	position: relative;
	width: 220px;
	height: 120px;
	margin: 1em;
	border: 1px solid #000;
	overflow: hidden;
	padding: 0;
	background-color: #FFF;
	border-radius: 3px;	
	background-position: center bottom;
	background-size: auto 75px;
	background-repeat: no-repeat;
	transform: none;
	-webkit-transform: none;
	position: static;
}
	
.get_music .square_list1
{
	background-image: url("pictures/frs_global/demonstration-1295673_640_crop2.png");
}

#frs_8 .get_music .square_list1
{
	background-image: url("pictures/frs_global/crowd-1295674_640_crop.png");
}

.get_music .square_list1 .inner_square
{
	background-color: rgba(255,255,255, 1.0);
	margin-left: auto;
	margin-right: auto;
	transform: none;
	-webkit-transform: none;
	position: relative;
	left: auto;
	top: auto;
	bottom: auto;
	right: auto;
	height: 90px;
	width: 100%;
	padding-bottom: 0px;
}	

.get_music .square_list1 .inner_square p
{
	color: #AB4756;
	text-align: right;
	font-family: Barrio;
	font-size: 26px; 
}

.get_music .square_list1 .inner_square p:first-of-type
{
	text-align: left;
}

.get_music .square_list1 .inner_square p:nth-of-type(2)
{
	float: none;
	bottom: 0px;
	position: absolute;
	right: 15px;
	margin-bottom: 0px;
}

.get_music .square_list1 img
{
	position: static;
}

.get_music .square_list1 .inner_square img
{
	display: inline-block;
	float: none; 
	margin:5px; 
	width:70%;
}

.get_music .square_list1.googlePlay img
{
	margin-top: -5px;
}



/* THIS IS THE ICON OF THE MONTH BLOG PAGE */
#frs_10  .blog .piece 
{
    padding-bottom: 8em;
}

#frs_10 .frsContent p
{
	text-align: center;
}

#frs_10 .frsContent span.fas
{
	font-size: 25em;
}

@media only screen and (max-width: 540px)
{
	#frs_10 .frsContent span.fas
	{
		font-size: 10em;
	}
}

/* THIS IS SPECFIED WIDTH / HEIGHT */
/*@media (max-aspect-ratio: 2/1) and (max-height: 400px) */
/* 21-JAN-2021: @media (min-aspect-ratio: 2/1) */
@media (min-aspect-ratio: 5/3) and (min-height: 475px) 
{
	/* 21-JAN-2021: 
	#frs_7_linkDiv
	{
		width: 100%;
		height: 6em;
		bottom: 0px;
		left: 0px;
		z-index: auto;
	}
	*/
	#frs_7_linkDiv
	{
		bottom: 30px;
		height: auto;
		width: 5em;
		left: 1em;
		z-index: 22; /* 03-OCT-2021: CHANGED FROM 15 BECAUSE NEW ANIMATION AT BOTTOM WAS INTERFERRING WITH ABILITY TO CLICK LINKS */
	}
}

/* 21-JAN-2021: @media (min-height: 400px)
{
	#frs_7_linkDiv
	{
		bottom: 30px;
		height: auto;
		width: 5em;
		left: 1em;
		z-index: 15;
	}
}
*/

/* END USERS DIVISIONS CSS */