/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * cis.css
 * =========================================================================
 *
 * Table of Contents
 * -----------------
 *
 * + General Styles
 * + Fonts/Colors
 * + Navigation
 * + Header
 * + Shadow Boxes
 * + Overview tab
 * + Resources tab
 * + Quick Links tab
 * + FAQs tab
 * + Timeline
 * + Footer
 * + 
 * + Shame (Should always be the last item in stylesheet)
 *
 * Read more:
 * - http://www.sitepoint.com/architecture-sass-project/
 * - https://css-tricks.com/sass-style-guide/
 *
 * @TODO: Update TOC as necessary.
 *
 * @BUG:
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/*-General Styles----------------------------------------------------------*/
html, body {
	overflow-x: hidden;
	min-width: 320px;
}
section { padding-top: 0; }
.bg-footer { background-color: #fff; }
.clear-fix {
	clear: both;
	margin-bottom: 20px;
}

.container .container { max-width: 100%; }
.tab-pane { padding-right: 0; }
.container.container-mobile {
	position: relative;
	z-index: 0;
}
#navbar {
	position: relative;
	z-index: 2;
}
/*----------------------------------------------------------General Styles-*/

/*-Fonts/Colors------------------------------------------------------------*/
h1, .header-1 {
	font-family: "neue-haas-grotesk-display", 'helvetica neue', 'Helvetica', arial, sans-serif;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: #592C82;
	margin-bottom: 10px;
}
h2 {
	font-family: oswald, Arial, sans-serif;
	text-transform: uppercase;
	color: #00aac6;
}
.shadow-content h2 {
	font-family: sanchez, 'helvetica neue', 'Helvetica', arial, sans-serif;
	color: #00aac6;
	text-transform: none;
}
h3 {
	font-family: sanchez, Arial, sans-serif;
	text-transform: uppercase;
	color: #00aac6;
	font-size: 22px;/*24px;*/
	padding-bottom: 5px;
	border-bottom: 1px solid #dcddde;
}

.tab-pane ol li {
	color: #0a0a0a;
	padding-bottom: 0;
}
.tab-pane ul li {
	font-size: 18px;
	line-height: 1.6;
	font-family: museo-sans,sans-serif;
	font-style: normal;
	font-weight: 300;
	padding-bottom: 15px;
}
/*-Mobile----------------------------*/
@media (min-width: 768px) {
	.header-1 { font-size: 50px; }
}
/*----------------------------Mobile-*/
/*------------------------------------------------------------Fonts/Colors-*/

/*-Navigation--------------------------------------------------------------*/
section.nav {
	padding: 0px;
	margin: 0px;
	background: #f8f8f8;
}
.nav.nav-tabs {
	margin: 0px;
	border-top: none;
}
.nav-tabs>li>a:hover { border-top: none; }
/*-Sticky Nav------------------------*/
.sticky {
	position: fixed;
	z-index: 99;
	top: 0;
	width: 100%;
}
.anchor {
	display: block;
	height: 60px;
	margin-top: -40px;
	padding-top: 75px;
	visibility: hidden;
}
.cobra .anchor { margin-top: 0px; }

.passkey-alert-banner {
	width: 100%;
	text-align: center;
	margin: auto;
	padding: 10px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #EAEAEA 100%);
}
.passkey-alert-banner p { margin-bottom: 0; }
.passkey-icon { margin-right: 10px; }
/*------------------------Sticky Nav-*/
/*-Mobile----------------------------*/
@media (min-width: 768px) {
	#navbar button.menu-icon { display: none; }
}
@media (max-width: 767px) {
	#navbar .col-lg-12.col-md-12.col-sm-12 {
		text-align: center;
		margin: auto;
	}
	#navbar.nav button.menu-icon {
		height: 20px;
		display: block;
	/*	margin-top: 15px;*/
		float: right;
	}
	#navbar.nav button.menu-icon::after {
		background-color: #592C82;
		box-shadow: 0 7px 0 #592C82, 0 14px 0 #592C82;
	}
	#navbar.nav button.menu-icon.opened::after {
		background-color: #f8f8f8;
		box-shadow: none;
	}
	#navbar-button.opened:after{
		display: inline-block;
		content: "\00d7"; /* This will render the 'X' */
		font-size: 40px;
		line-height: 1rem;
		color: #592C82;
	}
	#navbar-collapse-managed {
		padding: 0 0;
	}

	.nav-tabs.nav-justified > li > a { margin: -1px 0px; width: 100%; }
	.nav-tabs.nav-justified > li > a:hover { margin: -1px 0px; }

	.nav-tabs.nav-justified > li.navlink { display: none; }
	.nav-tabs.nav-justified > li.navlink.menuShow,
	.nav-tabs.nav-justified > li.navlink.active { display: inherit; }

	#navbar > .container {
		padding-right: 0px !important;
		margin-right: 50px !important;
	}
	#navbar.nav button.menu-icon { margin: -30px -35px 0 0; }
}
/*----------------------------Mobile-*/
@media ( min-width: 768px ) {
	.nav.cobra .nav.nav-tabs.nav-justified {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: flex-end;
	}
	.nav.cobra .nav-tabs.nav-justified > li {
		width: 100%;
	}
	.nav.cobra.sticky {
		padding-bottom: 2px;
	}
}
@media ( max-width: 767px ) {
	.nav.cobra .nav.nav-tabs { display: block; }
}

/*--------------------------------------------------------------Navigation-*/

/*-Header------------------------------------------------------------------*/
.hero-wrapper {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: auto;
}
.hero-wrapper.v1 {
/*	background: url(https://drq94yec07kda.cloudfront.net/images/product/fsa-hero.png) left;
*/	background-image: url("./img/learn-hra-hero.png");
}
.hero-wrapper.v2 {
	background-image: url("./img/cobra-product-hero.png");
	background-position: center bottom;
	align-content: stretch;
}

.hero-text {
	text-align: center;
	margin: 0 auto;

	border-radius: 0 0 6px 6px;
	border-bottom: 13px solid #592C82;
	background: #ffffff;
	min-width: 50%;
	max-width: 740px;
	padding: 20px;
	margin-bottom: 40px;
}
.hero-text img.logo {
	margin-top: -15px;
	margin-bottom: 15px;
}
.hero-text h1.header-1 {
	margin-bottom: 15px;/*32px;*/
	text-align: center;}
.hero-text p { color: #6f6a74; }
/*-Mobile----------------------------*/
@media (min-width: 768px) {
	.hero-wrapper.wide { height: 414px; }
}
@media (max-width: 767px) {
	.line-break { display: none; }

	.hero-wrapper.wide {
		height: 354px;
	/*	background-size: contain;*/
	}
}
/*----------------------------Mobile-*/
/*-----------------------------------------------------------------Header-*/

/*-Shadow Boxes-----------------------------------------------------------*/
.shadow-container {
	position: relative;
	margin-bottom: 3%;
}
.purple-shadow {
	background-color: #592C82;
	height: 86%;
	width: 70%;
	position: absolute;
	z-index: 0;
	bottom: -3%;
}
.shadow-content {
	background-color: #fff;
	position: relative;
	max-width: 55%;
	z-index: 2;
	margin: 25px 0;
	padding: 0 15px;
}
.shadow-img {
	position: absolute;
	z-index: 1;
	top: 10%;
}
.shadow-img img { max-height: 330px; }
.shadow-container.type0 .shadow-content { margin: 15px; }
.shadow-container.type0 .shadow-img { padding-top: 15px; }
.shadow-container.type0 .purple-shadow {
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.shadow-container.type1 .shadow-img { right: 0%; }
.shadow-container.type1 .shadow-content { margin-left: 5%; }
.shadow-container.type1 .purple-shadow { left: 0%; }

.shadow-container.type2 .shadow-img { left: 0%; }
.shadow-container.type2 .shadow-content { 
	margin-left: auto;
	margin-right: 5%;
}
.shadow-container.type2 .purple-shadow { right: 0%; }

.shadow-container.type3 { filter: drop-shadow(5px 5px 5px #6f6a74); }
.shadow-container.type3 .shadow-img { float: left; }
.shadow-container.type3 .shadow-content {
	margin-left: 41%;
	filter: drop-shadow(5px 5px 5px #6f6a74); 
}
.shadow-container.type3 .purple-shadow { left: 30%; }

.shadow-container.type4 .purple-shadow {
	height: 86%;
	width: 65%;
	left: 0%;
}
.shadow-container.type4 .shadow-content {
	filter: drop-shadow(5px 5px 5px #6f6a74);
	max-width: 95%;
	margin-left: 5%;
}

.shadow-container.type4 .shadow-content img {
	float: right;
	margin-top: 40px;
	max-width: 300px;
}

/*-Mobile----------------------------*/
@media (max-width: 768px) {
	.content-tabs .container, .col-lg-12.col-md-12.col-sm-12,
	.tab-content { padding: 0; }

	.shadow-img,
	.purple-shadow { display: none; }
	.shadow-content {
		max-width: 100%;
		margin: 0 !important;
		border: solid 15px #592C82;
	}
}
/*----------------------------Mobile-*/
/*-----------------------------------------------------------Shadow Boxes-*/

/*-Overview tab-----------------------------------------------------------*/
@media (min-width:992px) {
	#overview-tab .img-responsive { max-height: 350px; }
}
h1 {
	text-align: center;
	margin: 0 auto 20px;
}
/*-----------------------------------------------------------Overview tab-*/

/*-Resources tab----------------------------------------------------------*/
.resource-link { text-align: center; }
.resource-link a {
	text-decoration: none;
	color: #3B3B3B;
}
.resource-sub-headers img {
	float: left;
	margin-right: 5px;
}

.resource-tab-link .resources-links { color: #3B3B3B; }
.resource-tab-link .resources-links:hover { color: #767676; }
.resource-tab-link .resources-links img {
	display: block;
	text-align: center;
	margin: 0 auto 24px;
}
.resources.product .tab-pane { display: none; }
.resources.product .tab-pane.active { display: block; }

.resources.product .tab-pane > div.col-lg-6.col-md-6.col-sm-6 { padding-right: 40px; }
.resources.product .tab-pane > div.col-lg-6.col-md-6.col-sm-6 ul + h3 { margin-top: 20px; }

.btn-lv1 {
	text-align: center;
	margin-bottom: 20px;
}
.btn-lv1 .btn-left { text-align: right; }
.btn-lv1 .btn-right { text-align: left; }
.faqs.product button,
.resources.product button {
	background-color: #592C82;
	color: #ffffff;
	margin: auto 0;
	border-radius: 4px;
	font-size: 1.5rem;
}
.faqs.product button.active,
.resources.product button.active {
	background-color: #0070b9;
}

abbr, abbr[title] { border-bottom: none; }
sup i.fa-plus-square { color: #592C82; }

@media (min-width: 768px) {
	.faqs.product button,
	.resources.product button {
		font-size: 1.5rem;
	}
}
@media (max-width: 767px) {
	.faqs.product button,
	.resources.product button {
		font-size: 1rem;
	}
}
@media (max-width: 560px) {
	.faqs.product .btn-lv1 div,
	.resources.product .btn-lv1 div {
		display: block;
		clear: both;
		text-align: center;
		margin: 5px auto;
	}
	.faqs.product button,
	.resources.product button {
		font-size: 1.5rem;
	}
}
/*----------------------------------------------------------Resources tab-*/

/*-Quick Links tab--------------------------------------------------------*/
.videos ul, .videos ul > li { list-style: none; }
.videos ul, .videos ul > li:first-child { padding-left: 0px; }
.videos ul, .videos ul > li:last-child { padding-right: 0px; }

.videos ul > li > a:hover { text-decoration: none; }
.videos ul > li > a > strong { color: #2b374d; }
.videos ul > li > a > img { display: block; }
/*--------------------------------------------------------Quick Links tab-*/

/*-FAQs tab---------------------------------------------------------------*/
.faqs.product .tab-pane { display: none; }
.faqs.product .tab-pane.active { display: block; }
.collapsible-container .collapsible, .collapsible-container .collapsed,
h2.collapsible {
	text-transform: none;
	font-size: 18px;
}
.collapsible-container:first-of-type {
    margin-top: 5px;
}
/*---------------------------------------------------------------FAQs tab-*/

/*-Timeline---------------------------------------------------------------*/
.row.timeline {
	clear: both;
	margin-top: 50px;
}
.timeline h1 {
	text-align: center;
	margin-bottom: 20px;
}
.timeline h1.header-1 + p { padding-bottom: 20px; }

.timeline ul li,
.timeline ul li p {
	font-size: 18px;
	color: #6f6a74;
}

.timeline *,
.timeline *::before,
.timeline *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul.timeline-vertical {
	display: grid;
	grid-template-columns: 0.25rem 1fr;
	grid-auto-columns: max-content;
	column-gap: 2rem;
	list-style: none;
	width: min(60rem, 90%);
	margin-inline: auto;
}

/*-line------------------------------*/
ul.timeline-vertical::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 20;
	background: #f5f5f5;;
	border-radius: calc(0.25rem / 2);
}
ul.timeline-vertical::before {
	margin-top: -20px;
	margin-bottom: 20px;
}

/*-row gaps--------------------------*/
ul.timeline-vertical li:not(:last-child) { margin-bottom: 2rem; }

/*-card------------------------------*/
ul.timeline-vertical li {
	grid-column: 2;
	margin-inline: 1.5rem;
	grid-row: span 2;
	display: grid;
	grid-template-rows: min-content min-content min-content;
}

/*-date------------------------------*/
ul.timeline-vertical li .date {
	height: 3rem;
	margin-inline: calc(1.5rem * -1);

	text-align: center;
	color: #ffffff;
	line-height: 1;
	font-size: 1.25rem;
	font-weight: 700;

	display: grid;
	place-content: center;
	position: relative;

	border-radius: calc(3rem / 2) 0 0 calc(3rem / 2);
}

/*-date flap-------------------------*/
ul.timeline-vertical li .date::before {
	content: "";
	width: 1.5rem;
	aspect-ratio: 1;
	background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
	position: absolute;
	top: 100%;

	clip-path: polygon(0 0, 100% 0, 0 100%);
	right: 0;
}

/*-circle----------------------------*/
ul.timeline-vertical li .date::after {
	content: "";
	position: absolute;
	width: 2rem;
	aspect-ratio: 1;
	background: #ffffff;
	border-radius: 50%;
	top: 50%;

	transform: translate(50%, -50%);
	right: calc(100% + 2rem + 0.25rem / 2);
}

/*-title + descr---------------------*/
ul.timeline-vertical li .title,
ul.timeline-vertical li .descr {
	background: #f5f5f5;;
	position: relative;
	padding-inline: 1.5rem;
}
ul.timeline-vertical li .title {
	overflow: hidden;
	padding-block-start: 1.5rem;
	padding-block-end: 1rem;
	font-weight: 500;
}
ul.timeline-vertical li .descr {
	padding-block-end: 1.5rem;
	font-weight: 300;
}
ul.timeline-vertical li .title { padding: 5px; }

ul.timeline-vertical li .descr > p + ul { margin-left: 15px; }
ul.timeline-vertical li .descr > p + ul li::before {
	display: inline-block;
	content: '';
	-webkit-border-radius: 0.375rem;
	border-radius: 0.375rem;
	height: 0.25rem;
	width: 0.25rem;
	background-color: #6f6a74;
	margin: auto 10px 0.2rem -35px;
}
ul.timeline-vertical li .descr > p + ul li {
	text-indent: 20px;
	display: inline-block;
	font-size: 16px;
}

/*-shadows---------------------------*/
ul.timeline-vertical li .title::before,
ul.timeline-vertical li .descr::before {
	content: "";
	position: absolute;
	width: 90%;
	height: 0.5rem;
	background: rgba(0, 0, 0, 0.5);
	left: 50%;
	border-radius: 50%;
	filter: blur(4px);
	transform: translate(-50%, 50%);
}
ul.timeline-vertical li .title::before { bottom: calc(100% + 0.125rem); }

ul.timeline-vertical li .descr::before {
	z-index: -1;
	bottom: 0.25rem;
}

/*-Colors----------------------------*/
/*
li.accent-color1 { background-color: #592C82; }
li.accent-color2 { background-color: #00aac6; }
li.accent-color3 { background-color: #0070b9; }
*/

/*--- date ---*/
ul.timeline-vertical li .date { background-color: var(--accent-color); }
ul.timeline-vertical li.accent-color1 .date { background-color: #592C82; }
ul.timeline-vertical li.accent-color2 .date { background-color: #00aac6; }
ul.timeline-vertical li.accent-color3 .date { background-color: #0070b9; }


/*--- date flap ---*/
ul.timeline-vertical li .date::before { background: var(--accent-color); }
ul.timeline-vertical li.accent-color1 .date::before { background: #592C82; }
ul.timeline-vertical li.accent-color2 .date::before { background: #00aac6; }
ul.timeline-vertical li.accent-color3 .date::before { background: #0070b9; }

/*--- circle ---*/
ul.timeline-vertical li .date::after { border: 0.3rem solid var(--accent-color); }
ul.timeline-vertical li.accent-color1 .date::after { border: 0.3rem solid #592C82; }
ul.timeline-vertical li.accent-color2 .date::after { border: 0.3rem solid #00aac6; }
ul.timeline-vertical li.accent-color3 .date::after { border: 0.3rem solid #0070b9; }
/*----------------------------Colors-*/

/*-Mobile----------------------------*/
@media (min-width: 40rem) {
	ul.timeline-vertical {  grid-template-columns: 1fr 0.25rem 1fr; }
	ul.timeline-vertical::before { grid-column: 2; }
	ul.timeline-vertical li:nth-child(odd) { grid-column: 1; }
	ul.timeline-vertical li:nth-child(even) { grid-column: 3; }

	/* start second card */
	ul.timeline-vertical li:nth-child(2) { grid-row: 2/4; }
	ul.timeline-vertical li:nth-child(odd) .date::before {
		clip-path: polygon(0 0, 100% 0, 100% 100%);
		left: 0;
	}
	ul.timeline-vertical li:nth-child(odd) .date::after {
		transform: translate(-50%, -50%);
		left: calc(100% + 2rem + 0.25rem / 2);
	}
	ul.timeline-vertical li:nth-child(odd) .date { border-radius: 0 calc(3rem / 2) calc(3rem / 2) 0; }
}
/*----------------------------Mobile-*/

/*-Timeline2-------------------------*/
.managed .timeline .descr > ul > li {
	margin: 0;
	padding: 0;
}
.managed .timeline .descr > ul > li > ul > li {
	margin-bottom: 0;
	padding-bottom: 0;
}
/*-------------------------Timeline2-*/
/*---------------------------------------------------------------Timeline-*/

/*-COBRA Timeline---------------------------------------------------------*/
/*.cobra-timeline { margin-top: 100px; }*/
/*---------------------------------------------------------COBRA Timeline-*/

/*-Footer-----------------------------------------------------------------*/
#survey-link a {
	font-weight: bold;
	font-size: larger;
}

#footer #brand-banner p { display: none; }
/*
#footer-hr, #footer-content, #mobile-menu { display: none; }
.top-bar.show-for-large .top-bar-left ul.dropdown.menu,
.top-bar.show-for-large .top-bar-right ul li:first-child { display: none; }
/*-----------------------------------------------------------------Footer-*/