@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900');

.source-sans{font-family: 'Source Sans Pro', sans-serif !important;}
.cinzel{font-family: 'Cinzel', serif !important;}

body{
	font-family: 'Source Sans Pro', sans-serif !important;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: #707070;
	margin: 0px;
	padding: 0px;
	/*<JBOAdded>*/
	/* background-color: #FFC0C0; */
	/*</JBOAdded>*/
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Cinzel', serif !important;
	color: #1a4f8f /*!important*/;
	font-weight: 400 !important;
}

/*<JBOsAdditions>*/

#textToPlayerDiv, #noJsTextToPlayerDiv, #workingButtons, #neuteredButtons
{
	display: none;
}

p a, .regLink
{
	color: #3ab54a /*!important*/;
	/*<JBOAdded>*/
	font-weight: bold;
	/*</JBOAdded>*/
}
p a:hover, .regLink:hover
{
	color: #1a4f8f /*!important*/;
	text-decoration: none /*!important*/
}

/*
.fightsToJoin a
{
	color: orange / *!important* /;
}
*/

.fightsToJoinOrange
{
	color: orange /*!important*/;
}

.fightsToJoinGray, .fightsToJoinGray:hover
{
	color: #808080 /*!important*/; /* #808080 is (light) gray */
}

/*
.fightsToJoin a:hover
{
	color: red / *!important* /;
}
*/

#descripArticle h3
{
	margin-top: 35px;
	margin-bottom: 0px; /* margin-bottom: -12px; */
}

#descripArticle p
{
	margin-bottom: 12px; /* margin-top: 15px; */
}

.proof
{
	width: 100%;
}

th.proofCol1
{
	width: 5%;
	overflow: hidden;
}

th.proofCol2
{
	/* width: 70%; */
	overflow: hidden;
}

th.proofCol3
{
	width: 25%;
	overflow: hidden;
}

.proof table
{
	border-collapse: collapse;
}

.proof td, .proof th
{
	padding: 5px;
	border: 2px solid #707070; /* was #777777->gray #9003fc->echodClaimPurple #262463->echodClaimSPBlue */
	vertical-align: top;
}

.proof td a
{
	color: #3ab54a; /* #58_181_74 (SP_Green) !important; */
	font-weight: bold;
	
	/*<JBO mobile table link fix> z-index: 2000; position: relative;*/
		z-index: 2000;
		position: relative;
	/*</JBO mobile table link fix>*/
}

/*<JBO mobile table link fix>*/
	.belowProofText
	{
		z-index: 2000 !important;
		position: relative !important;
	}
/*</JBO mobile table link fix>*/

.proofClaim:hover
{
	color: #9003fc !important; /* #144_3_252 (Purple) */
	text-decoration: none; /* !important */
}

.proofSeeWhereUsedAsPremise:hover
{
	color: #1a4f8f !important; /* #26_79_143 (SPBlue) */
	text-decoration: none; /*!important*/
}

.proofSeeProof:hover
{
	color: #1a4f8f !important; /* #26_79_143 (SPBlue) */
	text-decoration: none; /*!important*/
}

/*
.proof td a:hover
{
	color: #9003fc !important; / * #144_3_252 (Purple) * /
	text-decoration: none / * !important * /
}
*/

/*
p a:hover, .regLink:hover / * .proof table a:hover * /
{
	color: #1a4f8f / *!important* /;
	text-decoration: none / *!important* /
}
*/

.beefHistUL
{
	list-style-type: none;
}

.plusSign
{
	display: inline-block;
	width: 12px; /* 12px 37px */
	height: 12px; /* 12px 37px */
	background-image: url("../images/bulletPlus.jpg");
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

.minusSign
{
	display: inline-block;
	width: 12px; /* 12px 37px */
	height: 12px; /* 12px 37px */
	background-image: url("../images/bulletMinus.jpg");
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

p.howItWorks
{
	margin-left: 5%;
	margin-bottom: 1.25em;
	margin-right: 5%;
	text-align: justify;
	text-justify: inter-word;
}

p.legal
{
	text-align: justify;
	text-justify: inter-word;
	font-size: 14px;
}

ul.howItWorks
{
	margin-left: 5%;
	margin-bottom: 1.25em;
	margin-right: 5%;
	text-align: justify;
	text-justify: inter-word;
}

li a.echodClaimRed
{
	color: red !important;
	text-decoration: none !important;
}

li a.echodClaimRed:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimRed
{
	color: red !important;
	text-decoration: none !important;
}

li a.echodClaimOrange
{
	color: orange !important;
	text-decoration: none !important;
}

li a.echodClaimOrange:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimOrange
{
	color: orange !important;
	text-decoration: none !important;
}

li a.echodClaimSPGreen
{
	color: #3ab54a !important;
	text-decoration: none !important;
}

li a.echodClaimSPGreen:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimSPGreen
{
	color: #3ab54a !important;
	text-decoration: none !important;
}

.echodClaimAquaIsh
{
	color: #0077CC !important;
	text-decoration: non !important;
}

li a.echodClaimSPBlue
{
	color: #262463 !important;
	text-decoration: none !important;
}

/*
li a.echodClaimSPBlue
{
	color: #2667A4 !important; / * was #262463 * /
	text-decoration: none !important;
}
*/

li a.echodClaimSPBlue:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimSPBlue
{
	color: #262463 !important;
	text-decoration: none !important;
}

.bold
{
	font-weight: bold;
}

/*
.echodClaimSPBlue
{
	color: #2667A4 !important; / * was #262463 * /
	text-decoration: none !important;
}
*/

li a.echodClaimPurple
{
	color: #9003fc !important; /*#4a235a*/
	text-decoration: none !important;
}

li a.echodClaimPurple:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimPurple
{
	color: #9003fc !important; /*#4a235a*/
	text-decoration: none !important;
}

.echodClaimPurpleBOLD
{
	color: #9003fc !important; /*#4a235a*/
	font-weight: bold;
	text-decoration: none !important;
}

li a.echodClaimPink
{
	color: #ff00ff !important; /* #ff0066 */
	text-decoration: none !important;
}

li a.echodClaimPink:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimPink
{
	color: #ff00ff !important; /* #ff0066 !important; */
	text-decoration: none !important;
}

li a.echodClaimGray
{
	color: gray !important;
	text-decoration: none !important;
}

li a.echodClaimGray:hover
{
	color: #9003fc !important; /* #ff0066 #1a4f8f !important;*/
	text-decoration: none !important;
}

.echodClaimGray
{
	color: gray !important;
	text-decoration: none !important;
}

li a.echodClaimColorless
{
	text-decoration: none !important;
}

li a.echodClaimColorless:hover
{
	text-decoration: none !important;
}

li a.echodClaimError
{
	color: #4a235a !important;
	text-decoration: none !important;
}

.echodClaimError
{
	color: #4a235a !important; /* 4a235a is a plum color */
	text-decoration: none !important;
}

.ddlinksPopupSave > a:hover
{
	background: #3ab54a !important;
	color: #fff !important;
}

.ddlinksNoPopupSave > a:hover
{
	background: #3ab54a !important;
	color: #fff !important;
}

.beefHist /*textarea{*/
{
	width: 100% !important;
	border-radius: 4px;
	background: #fcfcfc !important;
	border: 1px solid #ddd;
	color: #777;
	margin-bottom: 15px;
	padding: 5px 12px;
}

.prompt-form input[type="submit"]{
	background: #3ab54a !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 4px solid #3ab54a !important;
	border-radius: 6px !important;
	color: white !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 24px 8px !important;
	transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	/* display: inline-block !important; */
	white-space: normal !important;
	font-size: 14px;
	/* margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px; */
	margin-bottom: 15px;
	/*width: 100% !important;*/
}
.prompt-form input[type="submit"]:hover {border-bottom: 4px solid #008c2e !important; text-decoration: none !important;}

.regButton {
	background: #3ab54a !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 4px solid #3ab54a !important;
	border-radius: 6px !important;
	color: white !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 24px 8px;
	transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	/* display: inline-block !important; */
	white-space: normal !important;
	font-size: 14px;
	/* margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px; */
	margin-bottom: 15px;
	/*width: 100% !important;*/
}
.regButton:hover {border-bottom: 4px solid #008c2e !important; text-decoration: none !important;}

.footerLink
{
	margin-top: -10px;
}

.footerLink a
{
	color: #FFFFFF !important;
}

.footerLink a:hover
{
	color: #FFFFFF !important;
	text-decoration: underline !important;
}


/*</JBOsAdditions>*/

.width75{max-width: 75%; margin-left: auto !important; margin-right: auto !important;}


#header{
	border-top: 5px solid #3ab54a !important;
	font-family: 'Source Sans Pro', sans-serif !important;
}


.site-logo{
	padding: 15px 0 !important;
}



.hero-area{
	background-image: url('../images/hero_v02.jpg');
	background-attachment: fixed;
	background-position: center center;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-area:after{background-color: rgba(102,110,112, 0.4);}
.bg-overlay:after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.hero-content{
	z-index: 999;
	position: relative;
}

.hero-area *{color: #fff !important;}

.phead{
	font-size: 20px; 
	font-style: italic;
	font-weight: 600 !important;
	margin: 20px 0;
	color: #1a4f8f !important;
}


.col3{background: #eee !important;}

.inner-white-box{
	background: #fff;
	padding: 25px 15px;
}

.inner-white-box img{margin: auto auto 15px !important;}
.inner-white-box h5{font-size: 18px !important; margin-bottom: 10px;}


.paypal-btn {
    background: #3ab54a !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 4px solid #3ab54a !important;
    border-radius: 6px !important;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px 8px !important;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    display: inline-block !important;
    white-space: normal !important;
	font-size: 14px;
	margin-bottom: 15px;

}

.paypal-btn:hover {border-bottom: 4px solid #008c2e !important; text-decoration: none !important;}

.fl-btn{min-width: 220px !important;}


#footer{
	font-size: 12px;
	background: #3e577a;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 15px;
}

.footer-nav{
	padding: 0;
}

.footer-nav li{
	list-style: none !important;
	display: block;
	text-align: center;
}

.footer-nav li a{
	color: #fff !important;
	padding: 0 10px;
}

.footer-right{text-align: center;}



/*** ABOUT PAGE ***/
	.hero-about{
		/* background-image: url('../images/AdobeStock_61733228.jpg'); */
		background-attachment: fixed;
		background-position: center center;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.hero-about:after{background-color: rgba(102,110,112, 0.65);}
	
	.hero-about h2{color: #fff !important; text-align: center;}
	
/*** ORDER PAGE ***/
	.hero-order{
		/* background-image: url('../images/AdobeStock_80040218.jpg'); */
		background-attachment: fixed;
		background-position: center center;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.hero-order:after{background-color: rgba(102,110,112, 0.65);}
	
	.hero-order h2{color: #fff !important; text-align: center;}
	
	.order-left{
		background: rgba(238,238,238, 1) !important;
		padding: 20px;
	}
	
	.order-col2 .paypal-btn{margin-bottom: 0 !important;}
	

/*** DONATE PAGE ***/
	.hero-donate{
		/* background-image: url('../images/donate.jpg'); */
		/* background-attachment: fixed; */
		/* background-position: center center; */
		/* position: relative; */
		/* background-repeat: no-repeat; */
		/* background-size: cover; */
	}

	.hero-donate:after{background-color: rgba(102,110,112, 0.4);}
	
	.hero-donate h2{color: #fff !important; text-align: center;}


/*** CONTACT PAGE ***/
	.hero-contact{
		/* background-image: url('../images/contact2.jpg'); */
		background-attachment: fixed;
		background-position: center center;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.hero-contact:after{background-color: rgba(102,110,112, 0.4);}
	
	.hero-contact h2{color: #fff !important; text-align: center;}
	
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form input[type="password"],
	.contact-form textarea{
		width: 100% !important;
		border-radius: 4px;
		background: #fcfcfc !important;
		border: 1px solid #ddd;
		color: #777;
		margin-bottom: 15px;
		padding: 5px 12px;
	}
	
	.contact-form input[type="submit"]{
		background: #3ab54a !important;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-bottom: 4px solid #3ab54a !important;
		border-radius: 6px !important;
		color: white !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 12px 24px 8px !important;
		transition-duration: 0.4s;
		-webkit-transition-duration: 0.4s;
		-moz-transition-duration: 0.4s;
		-ms-transition-duration: 0.4s;
		-o-transition-duration: 0.4s;
		display: inline-block !important;
		white-space: normal !important;
		font-size: 14px;
		margin-bottom: 15px;
		/ *width: 100% !important;* /
	}
	.contact-form input[type="submit"]:hover {border-bottom: 4px solid #008c2e !important; text-decoration: none !important;}
	
/*** BLOG PAGE ***/
	.hero-blog{
		/* background-image: url('../images/hero_v01.png'); */
		background-attachment: fixed;
		background-position: center center;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.hero-blog:after{background-color: rgba(102,110,112, 0.4);}
	
	.hero-blog h2{color: #fff !important; text-align: center;}	
	
	
	h2 a{color: #1a4f8f;}
	h2 a:hover{color: #3ab54a; text-decoration: none !important;}
	
	.blog-item{
		    border-bottom: 1px solid #e6e6e6;
			padding-bottom: 40px;
			margin-bottom: 40px;
	}
	
	form.search input[type="text"]{
		width: 100% !important;
		border-radius: 4px;
		background: #fcfcfc !important;
		border: 1px solid #ddd;
		color: #777;
		margin-bottom: 15px;
		padding: 5px 12px;
		font-style: italic;
	}
/***************************************************************************************************/
/***************************************************************************************************/
/* MediaStuff */
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (max-width: 574px) /* xxs (goes up to 574px) */
{
	#header .container{padding: 0 !important;}
	#header .col-cs-10{padding-left: 0 !important;}
	#header .col-cs-2{padding-right: 0 !important;}

	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 15px;
			padding: 3px 10px 3px 10px !important;
		}

		.splashTextTopP
		{
			margin: -10px 0px 20px 0px;
			font-size: 17px; /* 2.75vw; 17px; */
		}
		
		.splashTextSubseqP
		{
			margin: -15px 0px 20px 0px;
			font-size: 17px; /* 2.75vw; 17px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 12px; /* 2.75vw; 17px; */
		}
		
		.xsAppear1
		{
			display: block;
		}
		
		.appear1
		{
			display: none;
		}
		
		.xxs-appear
		{
			display: block;
		}
		
		.xxs-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 56px;
		}
		
		.agreementAppText
		{
			font-size: 22px;
		}
		
		.reachAgreementText
		{
			font-size: 20px; /* 15px; */
		}
		
		.reachAgreementText2
		{
			font-size: 20px; /* 15px; */
		}
		
		.splashP1
		{
			text-align: left; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 0px;
		}
		
		.splashImageDiv
		{
			/* height: 570px; */
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			position: relative; /* absolute; */
			/* top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); */
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#seeHowButtonDiv
		{
			padding-right: 5px;
		}
		
		#letsPlayButtonDiv
		{
			padding-left: 5px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 0px; /*padding: 0px 57px; */
		}
	/*</JBOsAdditions>*/

	.navbar-toggle
	{
		padding: 0 !important;
		margin-top: 10px !important; /*60px !important;*/
		margin-right: 0 !important;	
	}

	.fl-row
	{
		padding-top: 10px; /*25px;*/
		padding-bottom: 10px;
	}

	.hero-area h2,
	.hero-about h2{font-size: 24px;}
	

}

/***************************************************************************************************/
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (min-width: 575px) /* xs still (was small) */
{
	#header .container{padding: 0 !important;}
	#header .col-cs-10{padding-left: 0 !important;}
	#header .col-cs-2{padding-right: 0 !important;}

	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 15px;
			padding: 3px 10px 3px 10px !important;
		}

		.splashTextTopP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.55vw; /* 2.65vw; 2.75vw; 20px; */
		}
		
		.splashTextSubseqP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.55vw; /* 20px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 2.25vw; /* 17px; */
		}
		
		.xsAppear1
		{
			display: none;
		}
		
		.appear1
		{
			display: block;
		}
		
		.xs-appear
		{
			display: block;
		}
		
		.xs-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 9.75vw;
		}
		
		.agreementAppText
		{
			font-size: 3.75vw;
		}
		
		.reachAgreementText
		{
			font-size: 20px; /* 15px; */
		}
		
		.reachAgreementText2
		{
			font-size: 20px; /* 15px; */
		}
		
		.splashP1
		{
			text-align: left; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 0px;
		}
		
		.splashImageDiv
		{
			/* height: 570px; */
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			position: relative; /* absolute; */
			/* top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); */
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#seeHowButtonDiv
		{
			padding-right: 5px;
		}
		
		#letsPlayButtonDiv
		{
			padding-left: 5px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 0px; /*padding: 0px 57px; */
		}
	/*</JBOsAdditions>*/

	.navbar-toggle
	{
		padding: 0 !important;
		margin-top: 10px !important; /*60px !important;*/
		margin-right: 0 !important;	
	}

	.fl-row
	{
		padding-top: 10px; /*25px;*/
		padding-bottom: 10px;
	}

	.hero-area h2,
	.hero-about h2{font-size: 24px;}
}

/***************************************************************************************************/
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (min-width: 575px) /* xs still (was small) */
{
	#header .container{padding: 0 !important;}
	#header .col-cs-10{padding-left: 0 !important;}
	#header .col-cs-2{padding-right: 0 !important;}

	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 15px;
			padding: 3px 10px 3px 10px !important;
		}

		.splashTextTopP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.55vw; /* 2.65vw; 2.75vw; 20px; */
		}
		
		.splashTextSubseqP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.55vw; /* 20px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 2.25vw; /* 17px; */
		}
		
		.xsAppear1
		{
			display: none;
		}
		
		.appear1
		{
			display: block;
		}
		
		.xs-appear
		{
			display: block;
		}
		
		.xs-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 9.75vw;
		}
		
		.agreementAppText
		{
			font-size: 3.75vw;
		}
		
		.reachAgreementText
		{
			font-size: 20px; /* 15px; */
		}
		
		.reachAgreementText2
		{
			font-size: 20px; /* 15px; */
		}
		
		.splashP1
		{
			text-align: left; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 0px;
		}
		
		.splashImageDiv
		{
			/* height: 570px; */
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			position: relative; /* absolute; */
			/* top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); */
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#seeHowButtonDiv
		{
			padding-right: 5px;
		}
		
		#letsPlayButtonDiv
		{
			padding-left: 5px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 0px; /*padding: 0px 57px; */
		}
	/*</JBOsAdditions>*/

	.navbar-toggle
	{
		padding: 0 !important;
		margin-top: 10px !important; /*60px !important;*/
		margin-right: 0 !important;	
	}

	.fl-row
	{
		padding-top: 10px; /*25px;*/
		padding-bottom: 10px;
	}

	.hero-area h2,
	.hero-about h2{font-size: 24px;}
}

/***************************************************************************************************/
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (min-width: 768px) /* small (was medium) */
{
	.container
	{
		width: 100% !important;
		max-width: 1100px !important;
	}
	
	.navbar-nav{float: none !important; text-align:right !important;}
	.navbar-nav > li
	{
		float: none !important;
		display: inline-block !important;
	}
	
	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px; /*13px; 12px;*/
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 10px;
			padding: 3px 10px 3px 10px !important; /*10px 10px 10px 10px;*/
		}

		.splashTextTopP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.5vw; /* 22px; */
		}
		
		.splashTextSubseqP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2.5vw; /* 22px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 17px; /* 2.75vw; 17px; */
		}
		
		.xsAppear1
		{
			display: none;
		}
		
		.appear1
		{
			display: none;
		}
		
		.sm-appear
		{
			display: block;
		}
		
		.sm-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 9.75vw;
		}
		
		.agreementAppText
		{
			font-size: 3.75vw;
		}
		
		.reachAgreementText
		{
			font-size: 20px; /* 2.5vw */
		}
		
		.reachAgreementText2
		{
			font-size: 20px;
		}
		
		.splashP1
		{
			text-align: center; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 10px;
		}
		
		.splashImageDiv
		{
			/* height: 560px; */
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			position: relative; /* absolute; */
			/* top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); */
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#seeHowButtonDiv
		{
			padding-right: 5px;
		}
		
		#letsPlayButtonDiv
		{
			padding-left: 5px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 57px;
		}
	/*</JBOsAdditions>*/

	/*
		.disappear1
		{
			display: block;
		}
	*/
	
	.navbar-nav > li > a
	{
		transition: all 0.3s ease !important;
		letter-spacing: 0.03em;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		text-transform: uppercase;
		color: #545454 !important;
		
		padding: 10px 5px 10px; /*80px 14px 15px;*/
	}
	
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus,
	.navbar-nav > li > a:active/*, //jbo change*/
	/*navbar-nav > li.active > a*/
	{
		background: #3ab54a !important;
		color: #fff !important;
	}
	
	.fl-row{padding-top: 75px; padding-bottom: 75px;}
	
	.hero-area h2{font-size: 50px;}
		
	.hero-about h2{margin: 75px 0; font-size: 2.2em;}
	.hero-donate h2{font-size: 2.2em;}
	.hero-contact h2{font-size: 2.2em;}
	
	.fl-btn{min-width: 320px !important;}
	
	.footer-nav li{display: inline-block;}
	
	.footer-right{text-align: right;}
	
	.order-right{padding-left: 45px;}
	
	.col2-donate .order-left{margin-top: 80px;}
	.col2-donate .donate-right{padding-left: 45px;}
	
	.contact-right
	{
		/*border-left: 1px solid #ccc !important;*/
		padding-left: 45px;
	}
	
	.blog-left{border-right: 1px solid #ccc !important; padding-right: 40px;}
	.blog-right{padding-left: 45px;}
	
	.thanks-contact-right{padding-top: 160px; padding-bottom: 160px;}
}

/***************************************************************************************************/
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (min-width: 992px) /* med (was lg) */
{
	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px; /*13px;*/
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 10px;
			padding: 3px 10px 3px 10px !important; /*10px 10px 10px 10px;*/
		}

		.splashTextTopP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2vw; /* 24px; */
		}
		
		.splashTextSubseqP
		{
			margin: -20px 0px 20px 0px;
			font-size: 2vw; /* 24px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 17px; /* 2.75vw; 17px; */
		}
		
		/*
		.xsAppear1
		{
			display: none;
		}
		
		.appear1
		{
			display: none;
		}
		*/
		
		.md-appear
		{
			display: block;
		}
		
		.md-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 9.75vw;
		}
		
		.agreementAppText
		{
			font-size: 3.75vw;
		}
		
		.reachAgreementText
		{
			font-size: 2vw;
		}
		
		.reachAgreementText2
		{
			font-size: 2vw;
		}
		
		.splashP1
		{
			text-align: center; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 0px;
		}
		
		.splashImageDiv
		{
			height: 400px;
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 57px;
		}
	/*</JBOsAdditions>*/

	.navbar-nav > li > a
	{
		font-size: 16px !important;
		padding: 10px 10px 10px 10px; /*jbo 80px 20px 15px !important;*/
		margin-top: -1px;
	}
}

/***************************************************************************************************/
/*
	According to w3schools, my definitive source (and this seems to be the correct one)
	My cell phone is 375px
	XXS < 574px
	574px <= XS < 768px
	768px <= Small < 992px
	992px <= Med < 1200px
	1200px <= Lg

	According to the other random page I looked at:
	My cell phone is 375px
	XS < 575px (576px?)
	575px (576px?) <= Small < 768px
	768px <= Med < 992px
	992px <= Lg < 1200px
	1200px <= XL
*/

@media (min-width: 1200px) /* large (was xl) */
{
	/*<JBOsAdditions>*/
		.ddlinks2
		{
			transition: all 0.3s ease !important;
			letter-spacing: 0.03em;
			font-size: 14px; /*13px;*/
			font-weight: 400;
			line-height: 1.4;
			/*text-transform: uppercase;*/
			color: #545454 !important;
			margin-top: -1px;
			margin-left: 10px;
			padding: 3px 10px 3px 10px !important; /*10px 10px 10px 10px;*/
		}
		
		.splashTextTopP
		{
			margin: -20px 0px 20px 0px;
			font-size: 28px; /* 24px; */
		}
		
		.splashTextSubseqP
		{
			margin: -20px 0px 20px 0px;
			font-size: 28px; /* 24px; */
		}
		
		.splashTextBottomBottom
		{
			font-size: 17px; /* 2.75vw; 17px; */
		}
		
		/*
		.xsAppear1
		{
			display: none;
		}
		
		.appear1
		{
			display: none;
		}
		*/
		
		.lg-appear
		{
			display: block;
		}
		
		.lg-disappear
		{
			display: none;
		}
		
		.unifyText
		{
			font-size: 117px;
		}
		
		.agreementAppText
		{
			font-size: 45px;
		}
		
		.reachAgreementText
		{
			font-size: 24px;
		}
		
		.reachAgreementText2
		{
			font-size: 24px;
		}
		
		.splashP1
		{
			text-align: center; /* left center */
		}
		
		.splashLeftOfImageDiv
		{
			height: 0px;
		}
		
		.splashImageDiv
		{
			height: 375px;
			position: relative;
			margin: 0px;
			padding: 0px;
		}
		
		.splashImageDiv2
		{
			width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.splashImage
		{
			max-width: 100%;
			height: auto;
		}
		
		.splashBelowBulletsDiv
		{
			height: 10px;
		}
		
		#logoAndUNIFY_Text
		{
			padding: 0px 57px;
		}
	/*</JBOsAdditions>*/

	.navbar-nav > li > a
	{
		font-size: 16px !important;
		padding: 10px 10px 10px 10px; /*jbo 80px 20px 15px !important;*/
		margin-top: -1px;
	}
}