/*
 * Contents copyright Phase One Website Design & Hosting
 * https://www.phaseonewebsitedesign.com/
 */
/* #003399 000,051,153, Dark Blue, somewhat subdued */
/* #000066 000,000,102, Dark Blue */
/* #000099 000,000,153, Dark Blue, but brighter */
/* #164e82 022,078,130, Steel Blue */
/* #428bca 066,139,202, Steel Blue, but lighter */
/* #3399cc 051,153,204, Steel Blue, but even lighter */
/* #006699 000,102,153, Mid-Blue, muted */
/* #336699 051,102,153, Mid-Blue, muted */
/* #0061bb 051,102,153, A bit Bluer then the 2 above */
/* #3399cc 051,153,204, Light Blue */
/* #0066cc 000,102,204, Light Blue, but slightly darker */
/* #d8e9f9 216,233,249, Very Light Blue */
/* #ccffff 204,255,255, Very Pale Blue */
/* #66cccc 102,204,204, Teal, Lighter */
/* #009999 000,153,153, Teal, Darker */
/* #006666 000,102,102, Teal, even Darker */
/* #009900 000,153,000, Mid-, almost Forest Green */
/* #449d44 068,157,068, Lighter Green */
/* #1ec279 030,194,121, A not-too-pleasing green used in a button */
/* #ffcc00 255,204,000, A muted yellow used in a button */
/* #ff0000 255,000,000, A bright red used in a button */
/* #cc3333 204,051,051, Brick Red */
/* #cc6666 204,102,102, Brick Red, but washed out a bit */
/* #333333 051,051,051, Flat Black */
/* #999999 153,153,153, Darkest Grey */
/* #aaaaaa 170,170,170, Darker Grey */
/* #cccccc 204,204,204, Slightly Lighter Grey */
/* #dddddd 221,221,221, Lighter Grey */
/* #eeeeee 240,240,240, Off-White */

html {}
body {background-color:#000; font-family:Arial,Helvetica,Geneva,Tahoma,sans-serif; font-size:1.7em}
.container {background-color:#000; padding:0; width:90%; /*border:2px solid #c30; padding:2px 20px;*/ max-width:1200px;}
.container-4slider  {padding:0 1px;}
.content-container {background-color:#fff; padding:10px 20px;}
/* For links, list them in this order: "link-visited-hover-active", or "LVHA", or LoVeHAte */
.content-container a:link	{color:#00f; text-decoration:underline;}
.content-container a:visited {color:#909; text-decoration:underline;}
.content-container a:hover   {color:#c00; text-decoration:none;}
.content-container a:active  {color:#f00; text-decoration:underline;}

h1, h2, h3, h4, h5, h6 {color:#990000; font-style:italic; font-weight:bold; line-height:1.4; margin:0 0 10px 0;} /* Could also be #003399 */
h1 {font-size:30px; /*color:#00c; (lighter blue)*/ color:#039; /* Darker Blue */ margin:20px 0; text-align:center; font-family:Georgia, "Times New Roman", Times, serif;}
h2 {font-size:26px;}
h3 {font-size:22px;}
h4 {font-size:18px;}
h5 {font-size:14px;}
h6 {font-size:10px;}
h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline {display:inline;}

p {font-size:1.0em; padding:0; margin:0 0 15px 0; line-height:1.5;}
em {color:#C03; font-style:italic; font-weight:bold;}

.tiny		 {font-size:10px;}
.tinyBold	 {font-size:10px; font-weight:bold;}
.tinyBoldRed  {font-size:10px; font-weight:bold; color:#c00;}
.sml		  {font-size:12px;}
.smlBold	  {font-size:12px; font-weight:bold;}
.smlBoldRed   {font-size:12px; font-weight:bold; color:#c00;}
.med		  {font-size:14px;}
.medBold	  {font-size:14px; font-weight:bold;}
.medBoldRed   {font-size:14px; font-weight:bold; color:#c00;}
.body		 {font-size:16px;}
.bodyBold	 {font-size:16px; font-weight:bold;}
.bodyBoldRed  {font-size:16px; font-weight:bold; color:#c00;}
.lrg		  {font-size:18px;}
.lrgBold	  {font-size:18px; font-weight:bold;}
.lrgBoldRed   {font-size:18px; font-weight:bold; color:#c00;}
.xlrg		 {font-size:24px;}
.xlrgBold	 {font-size:24px; font-weight:bold;}
.xlrgBoldRed  {font-size:24px; font-weight:bold; color:#c00;}
.xxlrg		{font-size:32px;}
.xxlrgBold	{font-size:32px; font-weight:bold;}
.xxlrgBoldRed {font-size:32px; font-weight:bold; color:#c00;}
.italic  {font-style:italic;}
.red	 {color:#c00;}
.bold	{font-weight:bold;}
.boldRed {font-weight:bold; color:#c00;}


/* ***********************************************************/
/* ******* Header ********************************************/
#header {}
#do-not-display {display:none;}

/* ***********************************************************/
/* ******* Footer ********************************************/
#footer {
	background-color:#000;
	color:#ffffff;
	font-size:12px;
	padding:15px 0 0 0;
	text-align:center;
}
#footer p  {font-size:12px; text-align:center;}

#footer a:link	{color:#ffffff; text-decoration:underline;}
#footer a:visited {color:#ff0000; text-decoration:underline;}
#footer a:hover   {color:#ff0000; text-decoration:none;}
#footer a:active  {color:#ffffff; text-decoration:underline;}

/* ***********************************************************/
/* ******* Image Related *************************************/
.img-full-width {box-sizing:border-box; width:100%;}
.img-max-full-width {box-sizing:border-box; max-width:100%;}
.img-responsive	 {box-sizing:border-box; max-width:100%;}
.img-border-blue {border:2px solid #00f;} /* blue, for images that are linked to something */
.img-border-red  {border:2px solid #c00;} /* red,  for images that aren't linked to anything */
.align-center {text-align:center;}
.align-left   {text-align:left;}
.align-right  {text-align:right;}
.justify	  {text-align:justify;}
.floatLeft   {float:left;  margin-right:15px; margin-bottom:0px;}
.floatRight  {float:right; margin-left:15px;  margin-bottom:0px;}
.float-none-then-left  {}
.float-none-then-right {}
.img-w-caption-bb	  {text-align:center;}
.img-w-caption-bb img {border:2px solid #00f;}
.img-w-caption-bb p   {background-color:#ffc; /*border:1px solid #00f; border-top:0;*/ font-size:12px; font-style:italic; line-height:1.2; margin-bottom:0; padding:3px 5px; text-align:center;}
.img-w-caption-rb	  {text-align:center;}
.img-w-caption-rb img {border:2px solid #c00;}
.img-w-caption-rb p   {background-color:#ffc; /*border:1px solid #c00; border-top:0;*/ font-size:12px; font-style:italic; line-height:1.2; margin-bottom:0; padding:3px 5px; text-align:center;}
.max-width-150 {}


/* ****************************************** */
/* ******* Hyperlinks *********************** */
/* For links, list them in this order: "link-visited-hover-active", or "LVHA", or LoVeHAte */
a.black-bg:link	{color:#ffffff;}
a.black-bg:visited {color:#ffffff;}
a.black-bg:hover   {color:#ff0000; text-decoration:none;}
a.black-bg:active  {color:#ffffff;}

a.clickable-div {display:block; height:100%; text-decoration:none; width:100%;}


/* ****************************************** */
/* ******* Buttons ************************** */
input[type="submit"] {background-color:#090; border:2px solid #06C; color:#fff; line-height:2;}
input[type="submit"]:hover, input[type="submit"]:focus {background-color:transparent; border:2px solid #C03; color:#c03; line-height:2;}


/* ******************************************* */
/* ******* List Styles *********************** */
ol {list-style:decimal; margin-top:-10px;}
ul {list-style:disc;	margin-top:-10px;}
li {margin-left:25px;   margin-bottom:10px; line-height:1.4;}

/* More HTML valid symbols can be found here: https://www.htmlsymbols.xyz */
ul.in-content {list-style:none; /* Removes the default bullets */ }
ul.in-content li::before {
	color:#003399; /* Changes the color */
	/*content:"\2022";  /* Adds content: This is the CSS Code/unicode for a bullet */
	/*content:"\25cf";  /* Adds content: This is the CSS Code/unicode for a black circle */
	/*content:"\26ca";  /* Adds content: This is the CSS Code/unicode for an inverted black shogi piece */
	content:"\058d";  /* Adds content: This is the CSS Code/unicode for the clocwise Armenian infinity symbol */
	display:inline-block; /* Needed in order to add space between the bullet and the text (if you're not happy with the default amount of space) */
	font-size:20px; /* Changes the size of the bullet */
	font-weight:bold; /* If you want it to be bold */
	line-height:0.7;
	margin:0 -10px 0 0; /* Changes the spacing (tweak as needed) */
	width:38px; /* Changes the spacing between the bullet and the text (tweak if needed) */
}

/* ********************************************** */
/* ******* Miscellaneous Styles ***************** */
.centering-container {text-align:center; width:100%;}
.centering-div {display:inline-block; text-align:center; /* These next to are for IE6 & IE7: */ *display:inline; zoom:1;}
.full-width {}
hr {/*background-color:#00f; (lighter blue)*/ background-color:#039; /* Darker Blue */ box-shadow:2px 3px 10px black; max-width:98%; height:2px; margin:30px 0;}
.text-only {max-width:90%; margin:auto;}
/*
hr {
	border-color:#c00;
	border-radius:20px;
	border-style:solid;
	border-width:1px 0 0 0;
	height:30px;
	margin-bottom:0;
	}
hr:before { /* Not really supposed to work, but does *
	border-color:#c00;
	border-radius:20px;
	border-style:solid;
	border-width:0 0 1px 0;
	content:"";
	display:block;
	height:30px;
	margin-top:-31px;
	}
*/

sup, sub {
	height:0;
	font-size:70%;
	line-height:1;
	vertical-align:baseline;
	_vertical-align:bottom;
	position:relative;
	}
sup {bottom:1ex;}
sub {top:.5ex;}

.box-blue-border  {border:1px solid #03f; padding:7px;}
.box-green-border {border:1px solid #090; padding:7px;}
.box-red-border   {border:1px solid #f00; padding:7px;}

table.black {border-collapse:collapse; border:2px solid black;}
table.black td {line-height:1.2; margin:0; padding:5px; text-align:center;}
table.black-innerlines {border-collapse:collapse; border:2px solid black;}
table.black-innerlines td {border:1px solid black; padding-right:5px;}
.td-bdr-black-rh-btm {border-right:2px solid black; border-bottom:2px solid black;}

.margin10pxBottomThen0, .margin20pxBottomThen0, .margin30pxBottomThen0, .margin40pxBottomThen0, .margin50pxBottomThen0 {margin-bottom:0;}
.margin0Then10pxBottom {margin-bottom:10px;}
.margin0Then20pxBottom {margin-bottom:20px;}
.margin0Then30pxBottom {margin-bottom:30px;}
.margin0Then40pxBottom {margin-bottom:40px;}
.margin0Then50pxBottom {margin-bottom:50px;}

.margin10pxTopThen0, .margin20pxTopThen0, .margin30pxTopThen0, .margin40pxTopThen0, .margin50pxTopThen0 {margin-top:0;}
.margin0Then10pxTop {margin-top:10px;}
.margin0Then20pxTop {margin-top:20px;}
.margin0Then30pxTop {margin-top:30px;}
.margin0Then40pxTop {margin-top:40px;}
.margin0Then50pxTop {margin-top:50px;}

.padding10pxTopThen0, .padding20pxTopThen0, .padding30pxTopThen0, .padding40pxTopThen0, .padding50pxTopThen0 {padding-top:0;}
.padding0Then10pxTop {padding-top:10px;}
.padding0Then20pxTop {padding-top:20px;}
.padding0Then30pxTop {padding-top:30px;}
.padding0Then40pxTop {padding-top:40px;}
.padding0Then50pxTop {padding-top:50px;}

.lessThan550px {color:#c00; font-weight:bold;}
p.wrap-indent {padding-left:18px; text-indent:-18px;}
p.no-spacing {margin-bottom:0; padding-bottom:0;}

.link-container {display:inline-block; padding-bottom:20px;}
.link-container p {line-height:1.2;}

.button {height:24px; line-height:24px; padding:0 15px;}

a.button:link, a.button:visited, a.button:active {background-color:#c00; border:1px solid #03c; color:#fff; text-decoration:none;}
a.button:hover {background-color:#03c; border:1px solid #c00; color:#fff; text-decoration:none;}

#footer a.button:link, #footer a.button:visited, #footer a.button:hover, #footer a.button:active {border:1px solid #fff; color:#fff; text-decoration:none;}

.from33pcTo100pcTo33pc {float:left; padding:0 2px; text-align:center; width:32%;}

/* *** Responsive video embed *** */
.video-container {height:0; overflow:hidden; padding-bottom:56.25%; padding-top:30px; position:relative;}
.video-container iframe, .video-container object, .video-container embed {left:0; position:absolute; top:0; width:100%; height:100%;}
/***************** Responsive Videos **********************/
video::-internal-media-controls-download-button {display:none;}
video::-webkit-media-controls-enclosure {overflow:hidden;}
video::-webkit-media-controls-panel {width:calc(100%); /* Adjust as needed */}
.video-container {
	/*border:2px solid #393;*/
	/*overflow:hidden;*/
	padding-bottom:56.25%; /* fine tunes the video's vertical positioning */
	/*padding-bottom:52.70%; /* fine tunes the video's vertical positioning */
	position:relative; /* keeps the aspect ratio */
}
.video-container iframe, 
.video-container video, 
.video-container object, 
.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;}
@media (min-width:100px) {
	.video-enclosure {width:100%; margin:auto; padding-top:0;}
}
@media (min-width:800px) {
	.video-enclosure {width:95%;}
}
@media (min-width:1100px) {
	.video-enclosure {width:90%;}
}
@media (min-width:1200px) {
	.video-enclosure {width:85%;}
}
@media (min-width:1300px) {
	.video-enclosure {width:80%;}
}
@media (min-width:1400px) {
	.video-enclosure {width:75%;}
}


/* ********************************************** */
/* ******* BEGIN Styling the Pop-up ************* */
#popupWrapper {background:rgba(066,139,202,.75); height:100%; left:0; position:fixed; top:0; width:100%; z-index:1001;}
#popupContainer {
	-webkit-transition:opacity 400ms ease-in;
	-moz-transition:opacity 400ms ease-in;
	transition:opacity 400ms ease-in;
	pointer-events:none;
}
#popup {
	background:#fff;
	border:5px solid #009900;
	border-radius:25px;
		-moz-border-radius:25px;
		-webkit-border-radius:25px;
	box-shadow:#64686e 0px 0px 3px 3px;
		-moz-box-shadow:#64686e 0px 0px 3px 3px;
		-webkit-box-shadow:#64686e 0px 0px 3px 3px;
	left:25%;
	padding:20px;
	position:relative;
	top:20%;
	width:50%;
}
#popup h2 {text-align:center;}
#popup h4 {text-align:center; margin-top:-15px;}
#popup p  {text-align:center;}
@media (min-width:100px)  { #popup {left:2%;  top:2%;  width:96%;} }
@media (min-width:500px)  { #popup {left:10%; top:5%; width:80%;} }
@media (min-width:1000px) { #popup {left:25%; top:20%; width:50%;} }
/* ******* END Styling the Pop-up *************** */
/* ********************************************** */


/* ***************************************** */
/* ***************************************** */
/* ***************************************** */

/* For device screens 100px wide & greater */
@media (min-width:100px) {
	/*h1 {font-size:18px;}*/
	.align-left, .align-right {text-align:center;}
	/*
	.floatLeft {display:block; float:none; margin:0 15px 15px 0; margin:auto;}
	.floatRight {display:block; float:none; margin:0 0 15px 15px; margin:auto;}
	*/
	.bb-inherits {
		background-image:url(../images/the-black-belt-inherits-med.jpg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	.container {padding:0; width:92%;}
	.container-4slider  {border-bottom:1px solid #c30; border-left:1px solid #c30; border-right:1px solid #c30;}
	.content-container {border-bottom:1px solid #c30; border-left:1px solid #c30; border-right:1px solid #c30;}
	.float-none-then-left-150  {text-align:center; margin-bottom:0;}
	.float-none-then-left, .float-none-then-right {display:block; margin-left:auto; margin-right:auto; margin-bottom:15px;}
	.float-none-then-right-200 {margin:auto; margin-bottom:15px; text-align:center;}
	.float-none-then-right-400 {margin:auto; margin-bottom:-20px; text-align:center;}
	.from33pcTo100pcTo33pc {text-align:center; width:100%;}
	.full-width {width:100%; margin:auto;}
	.hide-arrows {display:inline-block;}
	.form-width {width:90%; margin:auto;}
	.max-width-150 {max-width:150px;}
}
/* For device screens 365px wide & greater */
@media (min-width:365px) {
	.float-none-then-left-150 {float:left; margin-right:10px; clear:both;}
}
/* For device screens 400px wide & greater */
@media (min-width:400px) {
	/*h1 {font-size:20px;}*/
	.container-4slider  {border-bottom:2px solid #c30; border-left:2px solid #c30; border-right:2px solid #c30;}
	.content-container {border-bottom:2px solid #c30; border-left:2px solid #c30; border-right:2px solid #c30;}
	.from33pcTo100pcTo33pc {float:left; padding:0 2px; text-align:center; width:32%;}
	.form-width {width:85%; margin:auto;}
}
@media (min-width:500px) {
	.form-width {width:80%; margin:auto;}
}
@media (min-width:550px) {
	.align-left   {text-align:left;}
	.align-right  {text-align:right;}
	.from33pcTo100pcTo33pc {text-align:center; width:100%;}
	.lessThan550px {display:none;}
	.hide-arrows {display:none;}
	.form-width {width:75%; margin:auto;}
}
@media (min-width:570px) {
	.float-none-then-right-400 {float:right; margin-left:20px;}
}
@media (min-width:600px) {
	.float-none-then-left  {float:left; margin-bottom:15px; margin-right:20px;}
	.float-none-then-right {float:right; margin-bottom:15px; margin-left:20px;}
	.form-width {width:60%; margin:auto;}
	.max-width-150 {max-width:100%;}
}
@media (min-width:635px) {
	.float-none-then-right-200 {float:right; margin-left:15px;}
}
@media (min-width:700px) {
	/*h1 {font-size:30px;}*/
	.bb-inherits {
		background-image:url(../images/the-black-belt-inherits.jpg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	.container {padding:0; width:94%;}
	.form-width {width:55%; margin:auto;}
}
@media (min-width:702px) {
	.hide-arrows {display:inline-block;}
}
@media (min-width:750px) {
	.from33pcTo100pcTo33pc {float:left; padding:0 2px; text-align:center; width:32%;}
}
@media (min-width:800px) {
	.container-4slider  {border-bottom:3px solid #c30; border-left:3px solid #c30; border-right:3px solid #c30;}
	.content-container {border-bottom:3px solid #c30; border-left:3px solid #c30; border-right:3px solid #c30;}
	.full-width {width:90%; margin:auto;} /* This is used ONLY when single columns (.twelve .columns) are used for text - otherwise lines would be too long and difficult to read */
	.form-width {width:50%; margin:auto;}
}
@media (min-width:900px) {
	.full-width {width:80%; margin:auto;}
	.form-width {width:45%; margin:auto;}
}
@media (min-width:1000px) {
	.form-width {width:40%; margin:auto;}
}
@media (min-width:1100px) {
	.form-width {width:35%; margin:auto;}
}

/* ***************************************** */
/* ***************************************** */
/* ***************************************** */
/* For devices NO larger than 500px */
@media (max-width:549px) {
	.margin10pxBottomThen0 {margin-bottom:10px;}
	.margin20pxBottomThen0 {margin-bottom:20px;}
	.margin30pxBottomThen0 {margin-bottom:30px;}
	.margin40pxBottomThen0 {margin-bottom:40px;}
	.margin50pxBottomThen0 {margin-bottom:50px;}
	.margin0Then10pxBottom, .margin0Then20pxBottom, .margin0Then30pxBottom, .margin0Then40pxBottom, .margin0Then50pxBottom {margin-bottom:0;}

	.margin10pxTopThen0 {margin-top:10px;}
	.margin20pxTopThen0 {margin-top:20px;}
	.margin30pxTopThen0 {margin-top:30px;}
	.margin40pxTopThen0 {margin-top:40px;}
	.margin50pxTopThen0 {margin-top:50px;}
	.margin0Then10pxTop, .margin0Then20pxTop, .margin0Then30pxTop, .margin0Then40pxTop, .margin0Then50pxTop {margin-top:0;}

	.padding10pxTopThen0 {padding-top:10px;}
	.padding20pxTopThen0 {padding-top:20px;}
	.padding30pxTopThen0 {padding-top:30px;}
	.padding40pxTopThen0 {padding-top:40px;}
	.padding50pxTopThen0 {padding-top:50px;}
	.padding0Then10pxTop, .padding0Then20pxTop, .padding0Then30pxTop, .padding0Then40pxTop, .padding0Then50pxTop {padding-top:0;}
}
@media (max-width:580px) {
	.greaterThan580px {display:none;}
}
@media (max-width:769px) {
	.nav-styling {background-color:#c00; background-image:none; height:33px;}
}