@charset "UTF-8";

:root{
	--blue: #005eb8;
	--orange: #e35205;
	--ltgray: #ededed;
	--darkGray: #888;
	--gray2: #a2aaad;
	--white: #fff;
	--black: #000;
}

*, *::before, *::after {
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
}
/* keeps font size the same between portrait and landscape */
html, body {
	 font-size: 100%;
	 background-color: var(--white);
	 width: 100vw;
	 overflow-x: hidden;
}

.main {
	line-height: 1;
	font-size: 1.1rem;
	font-family: nimbus-sans-extended,sans-serif;
	font-weight: 400;
	color: var(--blue);
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 1000px;
	width: 100%;
	padding: 32px 32px 0;
	margin: 0 auto;
	position: relative;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul {
	list-style: disc;
	list-style-position: inside;
}

strong{font-weight: bold;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

border-collapse { border-collapse: collapse; }

a{transition: all 0.2s;text-decoration: none;color: #fff;outline: 0;line-height: 1.3;}
a:hover {
	cursor: pointer;
}

sup {
	font-size: 80%;
	line-height: 0;
	position: relative;
	top: -0.5em;
}

sub {
	font-size: 85%;
	line-height: 0;
	position: relative;
	bottom: -0.15em;
}
.active{
	display: block;
}
.white, .white p{ color: var(--white); }
.black, .black p{ color: var(--black); }
.gray, .gray p{ color: var(--gray); }
.darkGray{ color: var(--darkGray); }
.orange{ color: var(--orange); }
.blue{ color: var(--blue); }

.ltgrayBG, 
.fullltGray::before{
	background-color: var(--ltgray);
}
.grayBG,
.fullGray::before{
	background-color: var(--gray);
}
.darkOrangeBG{
	background-color: var(--darkOrange);
}
.orangeBG{
	background-color: var(--orange);
}
.blueBG,
.blueBG::before{
	background-color: var(--blue);
}
.whiteBG,
.whiteBG::before{
	background-color: #fff;
}
.blackStroke{
	-webkit-text-stroke: 1px #000;
}
.whiteStroke{
	-webkit-text-stroke: 1px #fff;
}
a.blue:hover{
	color: var(--orange);
}
a.orange:hover{
	color: var(--blue);
}
a.white:hover{
	color: var(--gray2);
}
a:after{
	content: none;
}
ul{
	list-style:none;
}
ul li{
	margin-top: 0.5rem;
}
.plyr__video-wrapper{
	background-color: transparent;
}
.plyr__video-wrapper:after{
	border: none;
}
.plyr--video.plyr--stopped .plyr__controls,
.plyr__controls__item.plyr__menu { 
	display: none;  
}
.plyr__control--overlaid{
	background-color: var(--blue);
	border: 1px solid #fff;
}
.plyr__control--overlaid:hover,
.plyr button:hover,
.plyr--video .plyr__control.plyr__tab-focus, 
.plyr--video .plyr__control:hover, 
.plyr--video .plyr__control[aria-expanded=true],
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{
	background-color: var(--orange) !important;
}
.plyr--full-ui input[type=range]{
	color: var(--orange);
}
.video-js {
	font-size: 10px;
	color: #fff !important;
	height: 100% !important;
	padding: 0 !important;
	background-color: transparent !important;
	outline: 3px solid white !important;
	overflow: hidden;
}
.vjs-poster{
	background-size: cover !important;
}
.video-js .vjs-big-play-button {
	font-size: 2.5em;
	line-height: 1.5em;
	height: 1.5em;
	width: 3em;
	border: 0.06666em solid #fff;
	border-radius: 0.3em;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	line-height: 1rem !important;
	height: 35px !important;
	background-color: #182860 !important;
	width: 60px !important;
	border: 1px solid #ffffff !important;
	border-radius: 5px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s;
	padding: 0 !important;
}
.vjs-poster:hover ~ .vjs-big-play-button,
.vjs-big-play-button:hover{
	background-color: #182860c2 !important;
}
.vjs-big-play-button .vjs-icon-placeholder{
	width: 30px;
	height: 15px;
}
.video-js .vjs-tech {
	height: auto;
}
.video-js button{
	display: flex;
	padding-left: 11px !important;
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.7);
}
.video-js .vjs-slider {
	background-color: #545454;
	background-color: rgba(84, 84, 84, 0.5);
}
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
	background: #fff;
}
.video-js .vjs-load-progress {
	background: #949494;
	background: rgba(84, 84, 84, 0.5);
}
.video-js .vjs-load-progress div {
	background: #d4d4d4;
	background: rgba(84, 84, 84, 0.75);
}
.vjs-controls-disabled .vjs-big-play-button, 
.vjs-has-started .vjs-big-play-button, 
.vjs-using-native-controls .vjs-big-play-button, 
.vjs-error .vjs-big-play-button {
	display: none !important;
}
.main_logo{
	background-image: url('/media/pjtube_subsidiary_logo.svg');
	background-repeat: no-repeat;
	max-width: 235px;
	display: block;
	width: 100%;
	aspect-ratio: 3/1;
}
.fitContent{
	width: fit-content;
}
.upper{
	text-transform: uppercase;
}
.screen{
	border-radius: 20px;
	overflow:hidden;
}
.keep_details_showing{
	transform: translateY(0) !important;
}
.all{position: relative;}
.video_container{
	position: absolute;
	top: 104px;
	left: 254px;
	width: 290px;
	height: 290px;
	display:none;
}
.benefits img{
	object-fit:
	cover;
	width: 100%;
}
.benefits_list li{
	display: flex;
	margin: 1.5rem 0 0 0;
	font-size: clamp(1rem, 4vw, 1.7rem);
	align-items: center;
}
.benefits_list li:first-child{
	margin: 0;
}
.benefits_list i{
	margin: 0 1rem 0 0;
	color: var(--orange);
	position: relative;
	font-size: 1rem;
}
.benefits_list span{
	display: block;
	align-items: center;
	justify-content: flex-start;
}
.benefits_list strong{}
ul a{
	color: var(--blue);
	text-decoration: underline;
}
/*ul a::after, ul a::before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(to left, var(--blue), var(--orange));
	z-index: 2;
	transition: all 0.3s;
	transform: translateX(0px);
	top: initial;
}
ul a::before{
	background: linear-gradient(to left, var(--orange), var(--orange));
	z-index: 1;
}
ul a:hover::after{
	opacity: 0;
}*/
ul a:after{
	display: none;
}
.video{
	height: auto;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1.75 / 1;
	margin: 1rem 0 2rem;
}
.choices_container{
	width: 100%;
}
.choices{
	display: flex;
	flex-direction: column;
	width: 100%;
}
.choice{
	padding: 1rem 1.3rem;
	flex: 1;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: flex 0.3s ease, background-color 0.3s ease;
	border-bottom: 2px solid #fff;
	background-blend-mode: overlay;
	background-color: var(--blue);
}
.choice h3{
	color: #fff;
	font-size: 1.6rem;
	text-transform: uppercase;
	animation: all 0.2s;
}
.choice:nth-child(1){
	background-image: url('/media/benefits1.webp');
}
.choice:nth-child(2){
	background-image: url('/media/benefits2.webp');
	background-position-y: 23%;
}
.choice:nth-child(3){
	background-image: url('/media/benefits3.webp');
	background-position-y: 29%;
}
.choice:nth-child(4){
	background-image: url('/media/benefits5.webp');
	background-position-y: 55%;
}
.choice:nth-child(5){
	background-image: url('/media/benefits4.webp');
	background-position-y: 19% !important;
	background-position: right;
}
.choice:nth-child(6){
	background-image: url('/media/benefits6.webp');
	background-position-y: 26%;
}
.choice:nth-child(7){
	background-image: url('/media/benefits7.webp');
	background-position-y: 30%;
}
.choice h3::first-letter{
	font-size: 150%;
	font-weight: 700;
}
.choice.selected{
	flex: 15;
	cursor: pointer;
	background-color: var(--orange);
}

#principles{
	display: grid;
	grid-template-areas:
		". ."
		". ."
		". ."
		". ."
		"expansion expansion"
		". .";
	gap: 0.4rem;
	justify-content: center;
	margin: 2rem;
}
.square{
	display: flex;
	align-items: center;
	place-content: center;
	background-color: var(--orange);
	padding: 1.3rem !important;
	color: #fff;
	font-size: 5.4rem;
	text-align: center;
	width: 100px;
	height: 100px;
	font-family: nimbus-sans-extended,sans-serif;
	font-weight: 700;
	font-style: normal;
	position: relative;
	overflow: hidden;
	z-index: 0;
	box-sizing: content-box;
}
.expansion{
	background-color: var(--blue);
	grid-area: expansion;
	width: 248px;
	height: 248px;
}
.expansion > div{
	line-height: 1.1;
	font-size: 1.2rem;
	text-transform: none;
	text-align: center;
}
.square .num{
	position:relative;
	top: -3px;
}
.square:nth-child(11) .num,
.square:nth-child(12) .num,
.square:nth-child(13) .num,
.square:nth-child(14) .num,
.square:nth-child(15) .num,
.square:nth-child(16) .num,
.square:nth-child(17) .num{
	left: -4px;
}
.regWeight{
	font-weight: 400;
	font-size: 0.9rem;
	margin: 0.6rem 0;
}
.twoDigit .num{
	left: -4px;
}
.square .details{
	position: absolute;
	background-color: var(--blue);
	color: #fff;
	width: 100%;
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
	display: block;
	text-align: center;
	font-size: 1rem;
	z-index: 1;
	transform: translateY(-150%);
	transition: all 0.2s ease-out;
}
.square:hover{
	cursor:pointer;
}
.square:hover .details{
	transform: translateY(0);
}
.expansion:hover{
	cursor: text;
}
.fa-circle-play{
	margin: 40px 0 0 0;
	display:block;
	color: #fff;
}
.keep_details_showing{
	transform: translateY(0) !important;
}
.video_container{
	position: absolute;
	top: 104px;
	left: 254px;
	width: 290px;
	height: 290px;
	display:none;
}
.selected_principle{
	box-shadow:	0 0 5px 4px var(--blue) inset;
}

.button{
	color: var(--white);
	background-color: var(--orange);
	padding: 0.5rem 0.7rem;
}
.button:active, .button:focus, .button:hover, 
.social a:active, .social a:focus {
	background-color: var(--blue);
	color: var(--white);
}
.social a:hover{
	background-color: var(--orange);
	color: var(--white);
}
.centered_col, .centered_row {
		float: none;
		margin: 0 auto;
}
.social a{
	background-color: var(--blue);
	padding: 0.5rem 0.7rem;
	font-size: 1.5rem;
	display: flex;
	place-content: center;
}
.social a:after{ display:none; }

header {
	 background-color: var(--white);
	 padding: 0 0 1rem 0;
}

header .col_12 {
	 margin: 0;
	 padding: 1rem 0;
}

.logo img,
.logo svg{
	width: 100%;
	max-width: 300px;
}
.img300{
	width: 100%;
	max-width: 300px !important;
}
.img400{
	width: 400px;
	max-width: 100% !important;
}
.im500{
	width: 100%;
	max-width: 500px !important;
}

nav {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		flex-flow: wrap;
		padding: 3rem 3rem 0;
}
nav a {
	 text-decoration: none;
	 color: var(--black);
	 transition: all 0.2s;
	 font-size: 1.2rem;
}
nav a:hover{
	color: var(--red);
	cursor: pointer;
}
nav a:active,
nav a:focus{
	color: var(--red);
}

h1, h2, h3, h4 {
	font-weight: 700;
}

h1 {font-size: 5rem;color: var(--blue);}
h2 { font-size: 1.7rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.8rem; }

p {
	 line-height: 1.5;
	 margin-bottom: 2rem;
}

.link{
		color: var(--red);
		margin-bottom: 1rem;
		display: block;
}
 
.link:hover {
	 text-decoration: underline;
}

.larger {
	 font-size: 1.333rem;
}

img.main-graphic {
		display: block;
	 padding: 2.5rem 0;
		width: 100%;
}

.bullets {
	 list-style-type: disc;
}

hr {
		background-color: var(--red);
		color: var(--red);
		border: 0 none;
		height: 1px;
}

/*  UTILITY  ============================================================================= */
.band { padding: 3rem 0; position: relative; }
.band-narrow { padding: 2rem 0; position: relative; }
.footer-band {
	width: fit-content;
	margin: 0 auto;
	background: white;
	padding: 0 2rem 1rem;
}
.footer-band img{
	width: 100%;
	max-width: 250px;
}
.arrow-bg {
	 background-image:url("../img/background-arrows.svg");
	 background-repeat: no-repeat;
	 background-position: bottom right;
	 background-size: 40%;
}

.arrow-bg-full-color {
	 background-image: url("../img/background-arrows-full-color.svg");
	 background-repeat: no-repeat;
	 background-position: bottom right;
	 background-size: 40%;
}

figure {
	margin-bottom: 1rem !important;
	display: table;
	text-align: center;
}
figcaption {
	font-size: 0.8rem;
	text-align: center;
}

.ptrbl-half, .pad05 { padding: 0.5rem !important; } /* top, right, bottom, left padding */
.ptrbl-75 { padding: 0.75rem !important; } /* top, right, bottom, left padding */
.ptrbl-1, .pad1 { padding: 1rem !important; } /* top, right, bottom, left padding */
.prl1{ padding: 0 1rem !important; }
.ptrbl-1half { padding: 1.5rem !important; } /* top, right, bottom, left padding */
.ptrbl-2, .pad2 { padding: 2rem !important; } /* top, right, bottom, left padding */
.pad3 { padding: 3rem !important; }
.prl2{ padding: 0 2rem !important; }
.pad3rl0{padding: 3rem 0 !important;}
.pt05 { padding-top: 0.5rem !important; }
.pb05 { padding-bottom: 0.5rem !important; }
.pt1 { padding-top: 1rem !important; }
.pb1 { padding-bottom: 1rem !important; }
.pb1pt1 { padding-bottom: 1.1rem !important; }
.pb1pt2 { padding-bottom: 1.2rem !important; }
.pb1pt3 { padding-bottom: 1.3rem !important; }
.pt2 { padding-top: 2rem !important; }
.pb2 { padding-bottom: 2rem !important; }
.pt3 { padding-top: 3rem !important; }
.pb3 { padding-bottom: 3rem !important; }
.pt4 { padding-top: 4rem !important; }
.pb4 { padding-bottom: 4rem !important; }
.pb5 { padding-bottom: 5rem !important; }
.pt2pt5{ padding-top: 2.5rem !important; }
.pb2pt5{ padding-bottom: 2.5rem !important; }
.pr04{ padding-right: 0.4rem !important; }
.pl04{ padding-left: 0.4rem !important; }
.pr1{ padding-right: 1rem !important; }
.pl1{ padding-left: 1rem !important; }
.pr2{ padding-right: 2rem !important; }
.pl2{ padding-left: 2rem !important; }
.pl3{ padding-left: 3rem !important; }
.pr3{ padding-right: 3rem !important; }
.pl4{ padding-left: 4rem !important; }
.pr4{ padding-right: 4rem !important; }
.pl8 { padding-left: 8vw !important; }
.pr8 { padding-right: 8vw !important; }
.prl2pt1{ padding: 0 2.1rem !important; }
.prl5{ padding: 0 5rem !important; }
.pad0{ padding: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important }
.prl2r1{ padding: 0 calc(2rem + 1vw) !important; }
.pb3px{ padding-bottom: 3px !important }

.mt05{ margin-top: 0.5rem !important; }
.mb05{ margin-bottom: 0.5rem !important; }
.mr05{ margin-right: 0.5rem !important; }
.ml05{ margin-left: 0.5rem !important; }
.mr1 { margin-right: 1rem !important; }
.ml1 { margin-left: 1rem !important; }
.mr1pt2{ margin-right: 1.2rem !important }
.mr2 {margin-right: 2rem !important;}
.ml2 {margin-left: 2rem !important;}
.mr3 { margin-right: 3rem !important; }
.ml3 { margin-left: 3rem !important; }
.mr4 { margin-right: 4rem !important; }
.ml4 { margin-left: 4rem !important; }
.mt1pt5{ margin-top: 1.5rem !important; }
.mb1pt5{ margin-bottom: 1.5rem !important; }
.m1 { margin: 1rem !important; }
.m2 { margin: 2rem !important; }
.mt1 { margin-top: 1rem !important; }
.mb1 {margin-bottom: 1rem !important;}
.mt2 { margin-top: 2rem !important; }
.mb2 { margin-bottom: 2rem !important; }
.mt3 { margin-top: 3rem !important; }
.mb3 {margin-bottom: 3rem !important;}
.mt4 { margin-top: 4rem !important; }
.mb4 { margin-bottom: 4rem !important; }
.mt2pt5{ margin-top: 2.5rem !important; }
.mb2pt5{ margin-bottom: 2.5rem !important; }
.mb6{ margin-bottom: 6rem !important; }
.mb7{ margin-bottom: 7rem !important; }
.mb8{ margin-bottom: 8rem !important; }
.mb9{ margin-bottom: 9rem !important; }
.mb10{ margin-bottom: 10rem !important; }
.mlr-10{ margin-left: 10%; margin-right: 10%; }
.mlr-15{ margin-left: 15%; margin-right: 15%; }
.mlr-20{ margin-left: 20%; margin-right: 20%; }
.mlr-30{ margin-left: 30%; margin-right: 30%; }
.margin-0, .marg0, .m0 { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.m0auto{ margin: 0 auto !important; }
.mlrAuto{ margin-left: auto !important; margin-right: auto !important; }

.width-10 { width: 10%; }
.width-20 { width: 20%; }
.width-30 { width: 30%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-60 { width: 60%; }
.width-70 { width: 70%; }
.width-80 { width: 80%; }
.width-90 { width: 90%; }
.width100 { width: 100%; }

.width300 { width: 300px !important; }
.width400 { width: 400px !important; }
.width500 {width: 500px !important;}

.maxWidth170{ max-width: 170px !important; }
.maxWidth200{ max-width: 200px !important; }
.maxWidth300{ max-width: 300px !important; }
.maxWidth400{ max-width: 400px !important; }
.maxWidth500{max-width: 500px !important;}
.maxWidth600{ max-width: 600px !important; }
.maxWidth700{ max-width: 700px !important; }
.maxWidthfull{ max-width: 100% !important; }

.maxHeight500{ max-height: 500px !important; }

.columnCount1{ column-count: 1; }
.columnCount2{ column-count: 2; }
.columnCount3{ column-count: 3; }
.columnCount4{ column-count: 4; }
.noBorder{ border: none !important; }
.circle{ border-radius: 50px; }
.minWith100{ min-width: 100px; }

.flex{display: flex;flex-flow: wrap;}
.directionrow{ flex-direction: row; }
.directioncol{ flex-direction: column !important; }
.flowwrap{flex-flow: wrap;}
.flowwnorap{ flex-flow: nowrap; /* default */ }
.flex0{ flex: 0 1 0%;}
.flex9{ flex: 0 1 9%;}
.flex10{ flex: 0 1 10%;}
.flex13{ flex: 0 1 13%;}
.flex20{ flex: 0 1 20%;}
.flexquarter{ flex: 0 1 25%;}
.flexthird{ flex: 0 1 33%;}
.flex30{ flex: 0 1 30%;}
.flexhalf{ flex: 0 1 50%;}
.flex60{ flex: 0 1 60%;}
.flex80{ flex: 0 1 80%;}
.flex2full{ flex: 1 1 50%;}
.flexfull{ flex: 0 1 100%;}
.flexgrow{ flex-grow: 1;}
.flexequalwidth{ flex: 1 1 100%; }
.flex120{ flex: 0 1 120px; }
.flex150{ flex: 0 1 150px; }
.flex200{ flex: 0 1 200px; }
.justify-evenly{justify-content: space-evenly;}
.justify-between{ justify-content: space-between; }
.justify-around{justify-content: space-around;}
.justify-center{justify-content: center;}
.gap1{gap: 1rem;}
.gap2{ gap: 2rem; }
.gap2pt5{ gap: 2.5rem; }
.gap3{gap: 3rem;}
.gapMax2{gap: clamp(1rem, 3vw, 2rem);}

.letterSpacetight{
	letter-spacing: -0.2rem;
}

.placeCenter{place-content: center;}
.centerSelf{place-self: center;}
.align_center{ /* vertically on row direction */
	align-items: center;
	align-content: center;
}
.align_start{ /* vertically on row direction */
	align-items: flex-start;
	align-content: center;
}
.align_end{
	align-items: flex-end;
}
.align_content_start{ /* vertically on row direction */
	align-content: flex-start;
}
.center_self{
	left: 50%;
	transform: translateX(-50%);
	position: relative;
}
.center_vert_horz{
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: relative;
	width: fit-content;
}
.center_vert{
	top: 50%;
	transform: translateY(-50%);
	position: relative;
	width: fit-content;
}
.center_children {
		display: grid;
		place-items: center;
}
.centered-ul {
	 display: table;
	 margin: 0 auto;
}
.centered {
	 display: block;
	 margin: 0 auto;
}
.center_txt { text-align: center !important; }
.trans{ transition: all 0.2s }
.rightText { text-align: right !important; }
.leftText { text-align: left !important; }
.boldless { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }
.bolder { font-weight: 900 !important; }
.italic{ font-style: italic; }
.bold-italic { font-weight: 700; font-style: italic; }
.text-shadow { text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
.right{ float: right; }
.absright{position: absolute; right: 0; top: 0;}
.left{ float: left; }
.absleft{position: absolute; left: 0; top: 0;}
.indent{margin: 0 0 0 25px; padding: 0;}
.position-relative { position: relative !important; }
.position_abs, .abs {position: absolute !important;}
.color-inherit{ color: inherit !important; }
.abscenter{ position: absolute !important; left: 0 !important; right: 0 !important; }
.zIndexTop{ z-index: 9999; }
.zIndex9{ z-index: 9; }
.zIndexbottom{ z-index: -1; }
.zIndex1{z-index: 1;}
.zIndex0{ z-index: 0; }
.lineheight0{ line-height: 0; }
.lineheight05{ line-height: 0.5; }
.lineheight1{ line-height: 1; }
.lineheight1pt1{ line-height: 1.1; }
.lineheight1pt2{ line-height: 1.2; }
.lineheight1half{ line-height: 1.5; }
.lineheight1pt7{ line-height: 1.7; }
.lineheight2{ line-height: 2; }
.lineheight2half{ line-height: 2.5; }
.lineheight3{ line-height: 3; }
.text_shadow { text-shadow: 0 0 4px #000; }
.overflowHidden{overflow: hidden;}
.overflowScroll{ overflow: scroll; }
.cursor:hover{ cursor: pointer; }
.rel{position: relative;}
.block{display: block !important;}
.inlineBlock{display: inline-block !important;}
.opacity0{ opacity: 0 !important; }
.opacity08:hover{ opacity: 0.8 !important; }
.opacity1{ opacity: 1 !important; }
.hide, .hidden{ display: none; }
.show{ display:block; }
.jump_link{position: absolute;top: -40px;}

/*  Font Size  ============================================================================= */
.halfrem{ font-size: 0.5rem; }
.pt8rem{ font-size: 0.8rem; }
.pt9rem{ font-size: 0.9rem; }
.onerem{ font-size: 1rem; }
.one1rem{ font-size: 1.1rem; }
.one2rem{ font-size: 1.2rem; }
.one3rem{ font-size: 1.3rem; }
.one4rem{ font-size: 1.4rem; }
.one5rem{ font-size: 1.5rem; }
.one6rem{ font-size: 1.6rem; }
.one7rem{ font-size: 1.7rem; }
.tworem{ font-size: 2rem; }
.two3rem{ font-size: 2.3rem; }
.twohalfrem{ font-size: 2.5rem; }
.threerem{font-size: 3rem;}
.fourrem{ font-size: 4rem; }
.fiverem{ font-size: 5rem; }

/** adjustable font sizes **/
.min4max6{font-size: clamp(4rem, 10vw, 6rem);}
.min1max2half{font-size: clamp(1rem, 6vw, 2.5rem);}
.min1max3{font-size: clamp(1rem, 6vw, 3rem);}
.min2max2half{font-size: clamp(2rem, 6vw, 2.5rem);}
.min2pt2max2half{font-size: clamp(2.2rem, 4vw, 2.5rem);}
.min1max5{font-size: clamp(1rem, 9vw, 5rem);}
.min1max2pt5{font-size: clamp(1rem, 10vw, 2.5rem);}

/** adjustable line heights **/
.baseLineheight{ line-height: calc(1.1em + 0.5vw); }

.ninevw{ font-size: 9vw; }
.tenvw{ font-size: 10vw; }
.elevenvw{ font-size: 11vw; }
.twelvevw{ font-size: 12vw; }
.upper{ text-transform: uppercase; }
footer{
}

footer p {
		text-align: center;
		font-size: 0.75em;
}

.fullBG::before{
	content: '';
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/*--------------------------------- BACK TO TOP -----------------------------------*/ 
.back-to-top {
		position: fixed;
		width: 50px;
		height: 50px;
		bottom: 30px;
		right: 30px;
		cursor: pointer;
		display: none;
		z-index: 90;
		text-align: center;
}

.back-to-top span {
		background: var(--gray2)  none repeat scroll 0% 0%;
		position: absolute;
		width: 100%;
		height: 100%;
		transition: opacity 500ms linear 0s;
		opacity: 0.6;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
}

.back-to-top .fa {
		color: var(--white);
		font-size: 2em;
}
.orangeOutline{
	font-size: clamp(3.8rem, 10vw, 5rem);
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 2px var(--orange);
	letter-spacing:-4px;
}
.guiding_principle_video{
	position: fixed;
	bottom: 0;
	right: 8%;
	z-index: 3;
	box-shadow: 0 0 5px 2px #fff, 0 0 15px 0px #757575;
}
.video_container{
	position:relative;
	width: 100%;
	max-width: 350px;
	min-height: 169px !important;
}
.video iframe,
.video_container iframe, 
.video_container object, 
.video_container embed {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
}
iframe{
	width: 100%;
}
#vid_txt{
	padding: 2rem 0;
	z-index: 1;
	margin-top: 2rem;
}
#vid_txt:before{
	content: '';
	background-image: url('/media/tube.webp');
	background-repeat: repeat;
	background-size: 13%;
	opacity: 0.2;
}
.bg{ display:none; }
#vid_txt iframe, 
.video_scroller iframe, 
.video-js,
.plyr{
	height: auto;
	aspect-ratio: 16/9;
	max-width: 300px;
	margin: 0;
	padding: 0;
}
.plyr{
	height: fit-content;
	border-radius: initial;
	border: none;
	outline: 3px solid white !important;
	background-color: transparent;
	padding: 0;
	box-shadow: none;
}
.video-js, 
.plyr{
	max-width: 400px;
}
.slider .plyr{
	aspect-ratio: 1/1;
}
.bold_choices{
	width: 100%;
	height: auto;
	max-width: 600px;
	z-index: 2;
}
.top_work{
	max-height: 200px;
	width: fit-content;
	object-fit: contain !important;
}
.slider {
		padding: 5rem 0 0 0;
		min-height: calc(600px + 6vw);
		margin: 2rem 0 0;
}
.slider::before{
	background-image: url('/media/spools.webp');
	background-repeat: no-repeat;
	background-size: cover;
}
.slider li {
		list-style:
		none;
		position: absolute;
}
.slider input {
		display: none;
}

/* Navigation */
.slider label {
		background-color: #fff;
		top: -45px;
		border-radius: 100%;
		display: block;
		height: 15px;
		width: 15px;
		opacity: 1;
		position: absolute;
		transition: .2s;
		z-index: 10;
}
.slider label:hover{
	cursor: pointer;
}
.slider input:checked + label {
		background-color: var(--orange);
}
.slider li:nth-child(1) label {
		left: 10px;
}
.slider li:nth-child(2) label {
		left: 50px;
}
.slider li:nth-child(3) label {
		left: 90px;
}
.slider li:nth-child(4) label {
		left: 100px;
}

/* Images */
.slider .img_txt {
		opacity: 0;
		transition: .2s;
		visibility: hidden;
		display: flex;
		gap: 2rem;
		justify-content: space-between;
		width: 100%;
		flex-flow: wrap;
}
.slider h3{
	position: absolute;
	color: white;
}
.slider li input:checked ~ .img_txt{
		opacity: 1;
		visibility: visible;
		z-index: 9;
}
.hoverShadow:hover{
	text-shadow: -3px 3px 3px black;
}
.hoverShadow:after{
	height: 0;
}

/* PJ Tube styles */
.header_img{
	max-width: 360px;
	width: 100%;
}


/** Media Queries **/
@media (min-width: 410px){
	.slider{
		min-height: calc(600px + 25vw);
	}
}
@media (min-width: 481px){
	.banner{	
		position: absolute; 
		right: calc((100vw - 500px) / 2);
		top: 0;
	}
	nav{ padding: 4rem 4rem 0; }
}

@media (min-width: 500px) {
	#vid_txt {
		padding: 3rem 0;
	}
	.slider{
		min-height: calc(600px + 30vw);
	}
}
@media (min-width: 650px){
	#vid_txt {
		padding: 5rem 0 3rem;
	}
	.blueExt{
		padding-left: 2rem;
	}
	.orangeExt{
		text-align: right;
		padding-right: 2rem;
	}
	.orangeExt::before{
		content: '';
		position: absolute;
		width: 1000%;
		background-color: var(--orange);
		height: 100%;
		left: -998%;
		top: 0;
	}
	.blueExt::before{
		content: '';
		position: absolute;
		width: calc((100vw - 108%) / 2);
		background-color: var(--blue);
		height: 100%;
		left: 99%;
		top: 0;
	}
	#principles{
		grid-template-areas:
		". . . ."
		". expansion expansion ."
		". expansion expansion ."
		". . . ."; 
	}
	.mt10 { margin-top: 10px !important; }
	.desktop_90{
		width: 90%;
	}
	.desktop_80{
		width: 80%;
	}
	.desktop_70{
		width: 70%;
	}
	.desktop_60{
		width: 60%;
	}
	.desktop_50{
		width: 50%;
	}
	.desktop_40{
		width: 40%;
	}
	.desktop_30{
	 width: 30%;
	}
	.desktop_20{
		width: 20%;
	}
	.desktop_gap1{
		gap: 1rem;
	}
	.desktop_gap2{
		gap: 2rem;
	}
	.desktop_gap3{
		gap: 3rem;
	}
	#vid_txt .video-js,
	.plyr{
		max-width: 285px;
	}
	.plyr--pip-supported [data-plyr=pip]{
		position: absolute;
		top: 0;
	}
	.plyr--fullscreen-enabled [data-plyr=fullscreen]{
		position: absolute;
		top: -35px;
	}
	.slider{
		min-height: calc(500px + 40vw);
	}
	.slider .video-js,
	.slider .plyr{
		max-width: 400px;
	}
	#bold_top_work .plyr{
		max-width: 100%;
	}
	.desktop_mb4{
		margin-bottom: 4rem;
	}
	.desktop_basis_default{
		flex-basis: auto;
	}
}
@media (min-width: 750px){
	.choices{
		flex-direction: row;
		height: 500px;
	}
	.choice {
		writing-mode: vertical-lr;
		text-orientation: revert;
		border-left: 2px solid #fff;
		border-bottom: none;
		background-position-y: initial !important;
	}
	.choice h3{
		transform: rotate(180deg);
		left: calc(100% - 25px);
	}
	.choice:nth-child(1){
		background-position-x: 52%;
	}
	.choice:nth-child(2){
		background-position-x: 49%;
	}
	.choice:nth-child(3){
		background-position-x: 53%;
	}
	.choice:nth-child(4){
		background-position-x: 29%;
	}
	.choice:nth-child(5){
		background-position-x: 78%;
	}
	.choice:nth-child(6){
		background-position-x: 72%;
	}
	.choice:nth-child(7){
		background-position-x: 62%;
	}
}
@media (min-width: 880px){
	#bold_top_work{
		justify-content: space-between;
	}
	.top_work{
		z-index: 3;
		position: absolute;
		right: 0;
	}
}
@media (min-width: 929px){
	.slider .slider_txt{
		width: 50%;
	}
	.slider {
		min-height: 475px;
		padding: 2rem 0;
	}
	#slide1dot, #slide2dot {
		top: 370px;
	}
	#slide2dot {
		left: 40px;
 }
}
@media (min-width: 1400px){
	.bg{
		display: block;
		position: absolute;
		z-index: -1;
		max-width: initial !important;
		aspect-ratio: 21/9 !important;
		border: none !important;
		width: 100vw;
		top: 0px;
		opacity: 0.2;
	}
	#vid_txt:before{
		display: none;
	}
}