/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0; border: 0; font-family: inherit; /* font-size: 1em; */ }
body, html { height: 100% }
html { overflow-y: scroll; scroll-behavior: smooth }
/* html { font-size: 62.5% } */
body { 
	max-width: 1600px; margin: 0 auto; font-weight: normal !important;
	/* font-family: -apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; */
	font-family: sans-serif;
}

img { display: block; border-style: none; width: 100%; height: auto  }

/* ==== UTILITY CLASSES  ==== */
.img-fluid { width: 100%; height: auto }


a.img-link { text-decoration: none; border-width:0 }


/* ============ WRAPPER =========== */

.wrapper-narrow { margin: 0 auto}

/* Desktops */
@media all and (min-width: 1200px) {
	.wrapper-narrow { padding: 2% 20% 1% 20% }
}

/* Mobiles */
@media all and (max-width: 767px) { 
	.wrapper-narrow { padding: 2% 6% 2% 7% }
}


/* =================== JUMBOTRON =================== */

.jumbotron { 
	background: linear-gradient(#0460CD, #021b79); 
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px 0;
}

.jumbotron h1, .jumbotron h2, .jumbotron h3 { font-weight:bold; color: #fff; letter-spacing: 1px; line-height: 1.2 }

.jumbotron h2 { font-weight: normal }

.jumbotron h1 { 
	font-family: Georgia, 'Times New Roman', Times, serif; 
	font-size: calc(30px + (58 - 30) * ((100vw - 320px)/(1600 - 320)));
}

.jumbotron h2 { 
	font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320)));
}

.jumbotron h3 { 
	text-transform:uppercase;
	font-size: calc(15px + (20 - 15) * ((100vw - 320px)/(1600 - 320)));
} 

.jumbotron h3 a { 
	text-decoration: none; color: #fff;
	border-bottom-width:2px;
	border-bottom-style: solid;
	padding-bottom: 3px
}

.jumbotron h3 a:link,
.jumbotron h3 a:visited { border-bottom-color: #fff  }
.jumbotron h3 a:hover,
.jumbotron h3 a:active { border-bottom-color: transparent }

/* Desktop */
@media all and (min-width:768px) {
	.jumbotron { 
		text-align: left;
		padding: 4% 20% 4% 20%
	}
	.jumbotron h2 { margin-bottom: 3% }
	.jumbotron h3 { margin-bottom: 4% }
}


/* Mobiles */
@media all and (max-width:767px) {
	.jumbotron { 
		text-align: center; 
		padding: 6% 8% 8% 8%;
		margin-bottom: 5%;
	}
	.jumbotron h2 { margin-bottom: 6% }
	.jumbotron h3 { margin-bottom: 9% }
}

/* ==================== SECTIONS ======================*/

@media all and (max-width:320px) {
	section { padding-top:0; padding-bottom: 10px }
}

@media all and (min-width:321px) and (max-width:767px) {
	section { padding-top:10px; padding-bottom: 10px }
}

@media all and (min-width:768px) and (max-width: 1336px) {
	section { padding-top:20px; padding-bottom: 20px }
}

@media all and (min-width: 1337px) {
	section { padding-top:20px; padding-bottom: 20px }
}


.block-content h2 { 
	font-family: Georgia, 'Times New Roman', Times, serif; 
	font-weight:normal; color: #230cea;
	font-size: calc(24px + (38 - 24) * ((100vw - 320px)/(1600 - 320)));
}

.block-content h3 { 
	font-family: sans-serif; 
	font-weight: normal; color: #023753;
	font-size: calc(20px + (28 - 20) * ((100vw - 320px)/(1600 - 320)));
}

.block-content p, .block-content ul li { 
	color: #023753;
	font-weight: normal !important;
	font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
}

.block-content p a, 
.block-content li a { 
	text-decoration: none; padding-bottom:2px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	font-weight: normal !important;
}

.block-content p  a:link, 
.block-content p  a:visited,
.block-content li a:link, 
.block-content li a:visited { color: #230cea; border-bottom-color: #230cea; font-weight: normal !important; }

.block-content p  a:hover,
.block-content p  a:active,
.block-content li a:hover,
.block-content li a:active { color: #cc0000; border-bottom-color: #cc0000; font-weight: normal !important; }

/* Desktops */
@media all and (min-width: 768px) { 
	.block-content { padding: 2% 20% 1% 20% }
	.block-content h2 { line-height: 1.2; margin: 12px 0 4px 0 }
	.block-content h3 { line-height: 1.2; margin: 50px 0 4px 0 }
	.block-content p, .block-content ul li { line-height: 1.6; margin-bottom: 16px; font-weight: normal !important; }
	.block-content ul li { padding-left: 9px; font-weight: normal !important; }
	.block-content > ul { margin: -4px 0 20px 17px }
	.block-content ul > li:last-child { margin-bottom: 0 }
	.block-content > img, 
	.block-content p > img, 
	.block-content ul > li img { margin: 20px 0 30px 0 }
}

/* Mobiles */
@media all and (max-width: 767px) { 
	.block-content { padding: 2% 6% 2% 7%; word-break: break-word }
	.block-content h2 { line-height: 1.2; margin: 8px 0 2px 0; font-weight: normal !important; }
	.block-content h3 { margin-top: 38px }

	.block-content p, .block-content ul li { line-height: 1.4; margin-bottom: 12px; font-weight: normal !important }
	.block-content > ul { margin: 0 0 14px 17px }
	.block-content ul > li { padding-left: 6px }
	.block-content > img, 
	.block-content p > img, 
	.block-content ul > li img { margin: 16px 0 24px 0 }
}

/* ========================= NUMBERED LISTS =========================== */

.block-content       ol { list-style-type: none; counter-reset: li-counter }
.block-content  ol > li { 
	position: relative; color: #023753; 
	font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
}

.block-content ol >  li:before {
	position: absolute; top: 0; left: -32px; line-height: 1.5; text-align: center; 
	border-radius: 50%; padding: 1px 4px 4px 4px; font-weight: bold; color: #fff; background-color: #230cea; 
	content: counter(li-counter); counter-increment: li-counter;
}

/* Desktops */
@media screen and (min-width: 768px) {
	.block-content ol { margin: 28px 0 20px 32px }
	.block-content ol > li:before { width: 24px; height: 24px; padding-top: 3px }
	.block-content ol > li { margin-bottom: 32px; padding-left: 20px; line-height: 1.7; font-weight: normal !important; }
	.block-content ol > li img { margin: 20px 0 30px 0 }
	.block-content ol > li span.inside-ol,
	.block-content ul > li span.inside-ol { display: block; line-height: 0.6 }
	.block-content ol > li > ul { margin: 12px 0 0 16px; list-style-type: disc }
	.block-content ol > li > ul > li { padding-left: 9px; margin: 0 0 12px 0 }
	/* .block-content img:last-child { margin-bottom: 0 } */
}

/* Mobiles */
@media screen and (max-width: 767px) {
	.block-content ol { margin: 0 0 20px 32px }
	.block-content ol > li:before { width: 20px; height: 22px; padding-top: 1px }
	.block-content ol > li { margin-bottom: 16px; padding-left: 16px; line-height: 1.4; font-weight: normal !important; }
	.block-content ol > li img { margin: 8px 0 12px 0 }

	.block-content li span.inside-ol { line-height: 0.6; display: block }
	.block-content ol > li > ul { margin: 4px 0 0 16px; list-style-type: disc }
	.block-content ol > li > ul > li { padding-left: 4px; margin: 0 0 12px 0 }
}

/* ============== TABLE OF CONTENTS ================= */

.block-content .box-toc { 
	border: solid 1px #d8f5fe; background: #d8f5fe; padding: 0 20px 18px 30px
}

.block-content .box-toc h2 { margin-top:0; color: #000 }

.block-content .box-toc a { 
	font-weight: normal;
	font-family: sans-serif;
}

/* Desktops */
@media screen and (min-width: 768px) {
	.block-content .box-toc {
		padding: 22px 20px 22px 30px
	}
	.block-content .box-toc p { line-height: 1.8 }
}

/* Mobiles */
@media screen and (max-width: 767px) {
	.block-content .box-toc {
		padding: 20px 20px 18px 20px
	}
	.block-content .box-toc p { line-height: 1.6 }
}


/* ====================== CONTENT BLOCKS ==================== */


.flex-blocks { 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start	
}

.flex-blocks .block-pic { width:54% }
.flex-blocks .block-text { width: 45% }
.flex-blocks .block-text p { line-height: 1.4; margin-left: 32px }

hr.hr-flex-blocks { margin: 20px 0; height: 1px; background: #230cea; border: solid 1px #230cea }


/* ====================== CODE SAMPLES ==================== */


.code-sample { background:#000; margin-top: 10px; margin-bottom: 44px; display: block }

/* Desktop */
@media screen and (min-width: 768px) {
	.code-sample { margin-top: 12px }
	.code-sample { margin-bottom: 28px; }
	pre, code { font-size:16px;font-weight:bold }
}

/* Mobiles */
@media screen and (max-width: 767px) {
	.code-sample { margin-top: 12px }
	.code-sample { margin-bottom: 20px }
	pre, code { font-size:14px;font-weight:bold}
}


pre, code { font-family: monospace; color: rgb(192,192,192) }
pre { overflow: auto }
pre > code { margin-top:0; display: block; padding: 0 12px 16px 12px; word-wrap: normal }

code[class*="language-"],
pre[class*="language-"] {
	text-shadow: 0 1px #fff;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 2;
}

span.bold { font-weight: bold}
span.comment { color: rgb(106,153,85); font-weight: bold }
span.white { color: #fff; font-weight: bold }


span.blue-dark { color: rgb(52,156,214); font-style: normal; font-weight: bold }
span.blue-light { color: rgb(140,220,240); font-style: normal; font-weight: bold }

span.green-light { color: rgb(147,206,168); font-style: normal; font-weight: bold }

span.brown { color: rgb(206,145,120); font-style: normal; font-weight: bold }

span.green-bright { color: rgb(78,201,143) }

span.green-dark { color: rgb(106,153,85) }


span.var, span.purple { color: rgb(130,167,255); font-weight: bold }
span.blue-em { color: rgb(103,216,219); font-style:italic; font-weight: bold }

span.string { color: rgb(255,51,51); font-style:italic; font-weight: bold }
span.red { color: rgb(255,51,51); font-weight: bold }
span.green { color: #7FFF00; font-weight: bold }
span.yellow { color: yellow; font-weight: normal }

span.orange { color: #FF7F50; font-style: normal; font-weight: bold }
span.orange-light { color: rgb(215,186,125); font-style: normal; font-weight: bold }
span.purple { color: rgb(197,134,161); font-style: normal; font-weight: bold }


span.orangered { color: orangered; font-style: italic; font-weight: bold }
span.erroneousLine { background: yellow; color: red; font-weight: bold }



/*======================= 3-COLUMN GRID =====================*/
.bg-section-light { background-color: #eff8f5}

/* Desktop */
@media all and (min-width:768px) { 
	.container-wide { width: 80%; margin: 0 auto 0 auto; padding-bottom:0 }
	.container-wide h2 {
		text-align: center;
		margin: 0 auto 5% auto;
		font-family: serif;
		font-weight: normal;
		letter-spacing:-1px;
		color: blue;
		font-size: calc(32px + (58 - 32) * ((100vw - 320px) / (1600 - 320))); 
	}

	.container-wide-padding { 
		background-color: #e3faf5;
		margin: 0 0 32px 0; 
		width: 100%; 
		padding: 40px 12% 20px 12%
	}

	.container-wide-padding h2 {
		text-align: center;
		margin: 0 auto 5% auto;
		font-family: serif;
		font-weight: normal;
		letter-spacing:-1px;
		color: rgb(49,145,131);
		font-size: calc(32px + (58 - 32) * ((100vw - 320px) / (1600 - 320))); 
	}
}

/* Mobiles */
@media all and (max-width:767px) { 
	.container-wide { width: 84%; margin: 0 auto 0 auto; padding-bottom:0; padding-top: 12px }
	.container-wide h2 {
		text-align: center;
		margin: 0 auto 8% auto;
		font-family: serif;
		font-weight: normal;
		color: blue;
		letter-spacing:-1px;
		font-size: calc(28px + (38 - 28) * ((100vw - 320px) / (1600 - 320))); 
	}

	.container-wide-padding { 
		background-color: #e3faf5;
		margin: 0 0 22px 0; 
		width: 100%; 
		padding: 40px 12% 0 12%
	}
	.container-wide-padding h2 {
		text-align: center;
		margin: 0 auto 8% auto;
		font-family: serif;
		font-weight: normal;
		color: blue;
		letter-spacing:-1px;
		font-size: calc(28px + (38 - 28) * ((100vw - 320px) / (1600 - 320))); 

	}
}


/* ==== FLEXBOX MULTI-COLUMN GRID ======= */

.flex-grid { display: flex; justify-content: space-between; flex-wrap: wrap }

/* Desktops */
@media all and (min-width:768px) { .flex-grid { flex-direction: row; text-align: left; margin-bottom: 4% } }

/* Mobiles */
@media all and (max-width:767px) { .flex-grid { flex-direction: column; text-align: center } }


/* ==== FLEXBOX COLUMNS ======= */

/* Inner child: 1 column every screen */
.flex-grid .item-1 {  width: 100%; padding: 1% 6% 0 6%; text-align: center }

/* Inner child: 3 cols on desktops, 1 column on mobiles */
@media all and (min-width:768px) { 
	.flex-grid .item-3 { width: 30% }
	.flex-grid .item-3 {
		display: flex;
		flex-direction: column;
		justify-content: center
	}
	.flex-grid .item-3 img.img-shadow { margin-top: auto }
	.flex-grid .item-3 a.btn-solid { margin-top: auto }
	/* .flex-grid .item-3:nth-child(0){ margin-top: auto }
	.flex-grid .item-3:nth-child(3){ margin-top: auto } */
}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.flex-grid .item-3 { width: 100%; margin-bottom: 10% }
}


/* ==== FLEXBOX COLUMN CONTENT ======= */

/* Inner child: column content */
.flex-grid .item-3 h3 a { 
	font-family: 'Roboto Condensed', sans-serif; 
	font-weight: 700; 
	color: rgb(0,0,255);
	line-height: 1.2;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

.flex-grid .item-3 h3 a:link, .flex-grid .item-3 h3 a:visited { 
	color: rgb(0,0,255);
	border-bottom-color: rgba(0,0,255, .0);
	transition: border-bottom 300ms;
}


.flex-grid .item-3 h3 a:hover, .flex-grid .item-3 h3 a:active { 
	color: rgb(0,0,255);
	border-bottom-color: rgba(0,0,255, 1);
}

.flex-grid .item-3 p { 
	font-weight: 400;
	color: #465E72;
	line-height: 1.5;
}

.flex-grid img.img-shadow { box-shadow: 5px 10px 8px #888 }

/* faux buttons  */
.flex-grid .item-3 a.btn-solid { 
	text-decoration: none; 
	text-align: center; 
	display: inline-block;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	border-style: solid;
	border-width: 2px;
}

.flex-grid .item-3 a.btn-soft    { border-radius: 5px }
.flex-grid .item-3 a.btn-rounded { border-radius: 100px }

.flex-grid .item-3 a.btn-solid:link,
.flex-grid .item-3 a.btn-solid:visited {
	background-color: rgb(0,0,255);
	border-color: rgb(0,0,255);
	color: #fff;
	transition: background-color 300ms;
	transition: border-color 300ms;
}

.flex-grid .item-3 a.btn-solid:hover, 
.flex-grid .item-3 a.btn-solid:active {
	background-color: #fff;
	border-color: rgb(0,0,255);
	color: rgb(0,0,255);
}


/* ==== Mobile screen sizes ==== */

@media all and (max-width:768px) {

	.flex-grid .item-3 img { 
		width: 90%; max-width: 390px; margin-left: auto; margin-right: auto;
		margin-bottom: 32px;
	}

	.flex-grid .item-3 h3 { 
		font-size: calc(24px + (42 - 24) * ((100vw - 320px) / (1600 - 320)));
		margin-bottom: 2%;
	}

	.flex-grid .item-3 p { 
		width: 90%; max-width: 390px; margin-left: auto; margin-right: auto;
		font-size: calc(15px + (24 - 15) * ((100vw - 320px) / (1600 - 320))); 
		margin-bottom: 6%;
	}

	.flex-grid .item-3 a.btn-solid { 
		font-size: 14px;
		padding: 12px 20px; 
		margin-bottom:20px
	}

	.flex-grid .item-3 a.btn-solid i.fas { margin-left: 8px }

}

/* ==== Tablet screen sizes ==== */

@media all and (min-width:768px) and (max-width:1024px) {

	.flex-grid img  { margin-bottom: 42px }
	.flex-grid h3   { margin-bottom: 12px }
	.flex-grid p    { margin-bottom: 32px }
	.flex-grid a.btn-solid i.fas { display: none }

	.flex-grid .item-3 h3 { 
		font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1600 - 320)));
		margin-bottom: 2%;
	}

	.flex-grid .item-3 p { 
		width:100%;
		font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1600 - 320))); 
		margin-bottom: 6%;
	}

	.flex-grid .item-3 a.btn-solid { 
		padding: 12px 16px;
		font-size: 14px;
		margin-bottom:20px;
		max-width: 172px
	}

	.flex-grid .item-3 a.btn-solid i.fas { margin-left: 6px }
}


/* ==== Desktop screen sizes ==== */

@media all and (min-width:1025px) {

	.flex-grid img  { margin-bottom: 32px }
	.flex-grid h3   { margin-bottom: 12px }
	.flex-grid p    { margin-bottom: 32px }

	.flex-grid .item-3 h3 { 
		font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1600 - 320)));
		margin-bottom: 3.5%;
	}

	.flex-grid .item-3 p { 
		font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); 
		margin-bottom: 8%;
	}

	.flex-grid .item-3 a.btn-solid { 
		font-size: 15px; 
		padding: 14px;
		max-width: 200px;
	}

	.flex-grid .item-3 a.btn-solid i.fas { margin-left: 6px }
}












/* ==== FOR MARKING UP WITH HTML TUTORIAL  ==== */
div.typewriter {
	margin-top: 5%;
	border: solid 1px #000;
	padding: 2%;
	background: rgb(234,234,234);
}

div.typewriter h1,
div.typewriter h2,
div.typewriter h3,
div.typewriter p { font-family: monospace; color: #000 }

span.fake-link {
	color: rgb(3,102,217);
	font-weight:normal;
	border-bottom: solid 1px rgb(3,102,217);
	padding-bottom: 2px;
	line-height: 1.6;
	letter-spacing: 1px;
}

/* Mobiles */
@media all and (max-width:767px) { 
	.ibat-banner-desktop { display: none }
}

/* Desktop */
@media all and (min-width:768px) { 
	.ibat-banner-desktop { 
		display: block;
		max-width: 1000px;
		margin: 60px auto 40px auto;
	}
}


/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */

/* Desktops - 3 columns */
@media all and (min-width:768px) { 

}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.container-flexbox .item-3 { width: 100% }
	.container-flexbox .item-3 { margin-bottom: 14% }
	.container-flexbox .item-3 img { margin-left: auto; margin-right: auto }
}

/* Spacing under images in children of parent flexbox containers */
.container-flexbox img { margin-bottom: 20px }


/* ==== NOTE BOX  ==== */

.box-toc h4 {
	font-weight:bold;
	font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); 
}

.box-toc  ul li { padding-left: 9px; font-weight: normal !important; }
.box-toc > ul { margin: -4px 0 20px 17px }
.box-toc  ul > li:last-child { margin-bottom: 0 }


.container-flexbox { 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Desktops only - inside padding  */
@media all and (min-width:768px) {
	.container-flexbox { padding: 2% 10% 1% 10% }
}

/* Mobiles only - inside padding */
@media all and (max-width:767px) {
	.container-flexbox { padding: 7% 8% 1% 8% }
}

/* Desktop */
@media all and (min-width:768px) { 
	.container-wide-padding .flex-grid .item-3.margin-above { 
		margin-top: 52px;
	}
}


/* ============== FAUX BUTTONS =================== */

a.button-solid:link, a.button-solid:visited, a.button-solid:hover, a.button-solid:active { 
    text-decoration: none;
    color: inherit;
    border-style: solid;
    border-width: 2px;
    padding: 18px 28px;
    display: inline-block;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
a.button-solid:link, .button-solid:visited {
    border-color: rgb(80,227,194);
    background-color: rgb(80,227,194);
    color: #000;
} 
 
a.button-solid:hover, .button-solid:active {
    border-color: rgb(49,145,131);
    background-color: rgb(49,145,131);
    color: #fff
}





@media all and (max-width:768px) {
	.flex-grid .item-3 a.button-solid { 
		font-size: 14px;
		padding: 12px 20px; 
		margin-bottom:20px
	}
	.flex-grid .item-3 a.button-solid i.fas { margin-left: 8px }
}

@media all and (min-width:768px) and (max-width:1024px) {
	.flex-grid .item-3 a.button-solid { 
		padding: 12px 16px;
		font-size: 14px;
		margin-bottom:20px;
		max-width: 172px
	}
	.flex-grid .item-3 a.btn-solid i.fas { margin-left: 6px }
}


@media all and (min-width:1025px) {
	.flex-grid .item-3 a.button-solid { 
		font-size: 15px; 
		padding: 14px;
		max-width: 190px;
	}

	.flex-grid .item-3 a.button-solid i.fas { margin-left: 8px }
}

/* Inner child: 3 cols on desktops, 1 column on mobiles */
@media all and (min-width:768px) { 
	.flex-grid .item-3 {
		display: flex;
		flex-direction: column;
		justify-content: center
	}
	.flex-grid .item-3 img.img-shadow { margin-top: auto }
	.flex-grid .item-3 a.button-solid { margin-top: auto }
	/* .flex-grid .item-3:nth-child(0){ margin-top: auto }
	.flex-grid .item-3:nth-child(3){ margin-top: auto } */
}



/* Inner child: column content */
.container-wide-padding .flex-grid .item-3 h3 a { 
	font-family: 'Roboto Condensed', sans-serif; 
	font-weight: 700; 
	color: rgb(49,145,131);
	line-height: 1.2;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

.container-wide-padding .flex-grid .item-3 h3 a:link, 
.container-wide-padding .flex-grid .item-3 h3 a:visited { 
	color: rgb(49,145,131);
	border-bottom-color: rgba(49,145,131, .0);
	transition: border-bottom 300ms;
}


.container-wide-padding .flex-grid .item-3 h3 a:hover,
.container-wide-padding .flex-grid .item-3 h3 a:active { 
	color: rgb(49,145,131);
	border-bottom-color: rgba(49,145,131, 1);
}