/*
 * CSS Variables colors are defined in theme's custom-editor-styles.css file
 */

:root {
	/* set as same colors in the Customizer > Theme Settings > Branding */
	--so-accent-color: #5fb0e0;
	--so-accent-color-dark: #4c8db3;

	--scc-blue: #00547e;
	--scc-blue-dark: #004365; /* 80% over black */
	--scc-blue-light: #b2cbd8; /* 30% over white */
	--scc-blue-lightest: #edf3f6; /* 7% over white */

	--sf-teal: #5b8c9b;
	--sf-teal-dark: #49707c;
	--sf-teal-light: #cddce1; /* 30% over white */
	--sf-teal-lightest: #eef3f5; /* 10% over white */
	
	--sf-orange: #a63921;
	--sf-orange-dark: #96331e; /* 90% over black */
	--sf-orange-light: #e4c3bc; /* 30% over white */
	--sf-orange-lightest: #f8efee; /* 8% over white */

	--sf-grey: #626262;
	--sf-grey-dark: #2d2d2d;
	--sf-grey-darkest: #191919;
	--sf-grey-light: #adadad;
	--sf-grey-lightest: #ededed; /* 7% over white */
	--sf-grey-white: #fbfbfb;
	--white: #ffffff;
}

.content-area strong {
	color: var(--sf-grey-dark);
}

.content-area a strong {
	color: inherit;
}

.content-area em {
	margin-right: 0.15em;
}


/* buttons */
#page #infinite-handle span .woocommerce button, 
#page #infinite-handle span button, 
.button, 
.woocommerce #page #infinite-handle span button, 
.woocommerce #respond input#submit, 
.woocommerce.single-product .cart button, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
input[type=button], 
input[type=reset], 
input[type=submit] {
    background: #fff;
    border: 2px solid;
    border-color: var(--sf-grey-light);
    border-radius: 0;
    color: var(--sf-grey);
    font-family: Lato,sans-serif;
    font-size: 13.8656px;
    font-size: .8666rem;
    line-height: 1;
    letter-spacing: 1.5px;
    outline-style: none;
    padding: 1em 1.923em;
    transition: .3s;
    text-decoration: none !important;
    text-transform: uppercase;
    
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
}

.button:hover, 
#page #infinite-handle span button:hover, 
input[type=button]:hover, 
input[type=reset]:hover, 
input[type=submit]:hover, 
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce.single-product .cart button:hover {
	background: #ffffff;
	border-color: var(--so-accent-color);
	color: var(--so-accent-color);
}


a.button {
	/*background: var(--scc-blue);
	border: 1px solid;
	border-color: rgba(0,0,0,.15);
	color: #ffffff;
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: .9em;
	margin: 1em auto !important;
	padding: 10px 25px !important;
	text-decoration: none !important;
	text-transform: uppercase;
	*/
	display: inline-block;
	padding: 1em 1.923em !important;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
}

a.button:hover {
	opacity: .8;
}


/* blockquotes */
blockquote {
	border-left: 4px solid var(--so-accent-color);
	font-size: 18px;
	font-style: normal;
	margin: 2em 1em;
	padding: 1em 2em;
}

blockquote p {
	border: 0 none;
	margin-bottom: 1.9833em;
	margin-left: 0;
	padding-left: 0;
}

blockquote p:last-child{
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	font-style: italic;
	font-size: 16px;
	margin: 1em 0;
}

blockquote cite em {
	font-style: normal;
}


/* grey-box */
.grey-box {
	background: var(--sf-grey-lightest);
	margin: 1.5em 0;
	padding: 1em 2em;
	overflow: hidden;
}
.grey-box p {
	margin: 1em 0;
}
.grey-box p:last-child:first-child {
	margin: 0;
}
.grey-box h2:first-child,
.grey-box h3:first-child,
.grey-box h4:first-child,
.grey-box h5:first-child {
	margin-top: 0;
}

p + .grey-box,
.grey-box + p {
	margin-top: 2.5em;
}
.grey-box .fa-pull-left {
	margin-bottom: 15px;
}
.panel-first-child.panel-last-child > .grey-box {
	margin-top: 0;
}

@media screen and (max-width: 679px) {
	.grey-box {
		font-size: .875em;
		padding: 1em;
	}
	.grey-box .fa-pull-left {
		display: block;
		float: none;
		text-align: center;
	}
}


/* images */
img.circle {
	border: 1px solid var(--sf-grey-lightest);
	border-radius: 50%;
	margin-bottom: 1.5em;
}


/* images with captions */
.wp-caption-text {
	font-family: Lato, sans-serif;
}


/* image shadows */
.image-shadows {
	background-color: var(--sf-grey-lightest);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
}


/* info paragraphs */
p.info {
	background: #f7f7f7;
	font-size: .9em;
	padding: 1em 2em;
}


/* embed articles */
div.embed-articles {
	background-color: var(--sf-grey-white);
	border-bottom: 1px solid var(--sf-grey-lightest);
	border: 1px solid var(--sf-grey-lightest);
	padding-top: 1em;
	margin: 3em 0;
	
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-evenly;
	justify-content: space-evenly;
}

/* Embedded content*/
div.embed-articles p {
	margin-bottom: 1em;
}

div.embed-articles > h4:first-child,
div.embed-articles > h5:first-child,
div.embed-articles > h6:first-child,
div.embed-articles > p:first-child,
div.embed-articles > strong:first-child {
	margin-top: 0;
	padding-left: 16px;
	padding-right: 16px;
	
	-ms-flex: 0 1 100%;
	-webkit-flex: 0 1 100%;
	flex: 0 1 100%;
}


div.embed-articles blockquote.wp-embedded-content {
	display: none;
}

div.embed-articles blockquote.wp-embedded-content + p {
	-ms-flex: 0 1 50%;
	-webkit-flex: 0 1 50%;
	flex: 0 1 50%;
	box-sizing: border-box;
	display: block;
	margin-right: 0;
	padding-left: 15px;
	padding-right: 15px;
	width: calc(50% - ( 1 * 30px ) );
}

/* Displays 1 embedded article at 100% (full rows of 1 item) */
div.embed-articles > blockquote.wp-embedded-content + p:nth-last-child(1):nth-child(3) {
	-ms-flex: 0 1 100%;
	-webkit-flex: 0 1 100%;
	flex: 0 1 100%;
	width: calc(100% - ( 1 * 30px ) );
}

div.embed-articles iframe.wp-embedded-content {
	width: 100%;
}
@media (max-width: 539px) {
	div.embed-articles {
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	div.embed-articles blockquote.wp-embedded-content + p {
		margin-right: auto;
		margin-left: auto;
		max-width: 320px;
		padding-right: 0;
		padding-left: 0;
		width: 100%;
	}
}



/* footnotes */
.footnote {
	border-top: 1px solid var(--sf-grey-light);
	margin-top: 3em;
	margin-bottom: 1em;
	padding: 1em 0;
	
}

.footnote ol {
	padding-left: 1.4em;
}

.footnote,
.footnote ol,
.footnote p {
	color: var(--sf-grey);
	font-family: Lato, "sans-serif";
}

.footnote p,
.footnote li {
	margin: .5em;
}


/* Email links */
a[href^="mailto:"] {
	font-style: italic;
}


/* Lesson Outline Lists */
@counter-style decimal-parens {
	system: extends decimal;
	suffix: ') ';
}

@counter-style lower-alpha-parens {
	system: extends lower-alpha;
	suffix: ') ';
}

@counter-style lower-roman-parens {
	system: extends lower-roman;
	suffix: ') ';
}

@counter-style decimal-double-parens {
	system: extends decimal;
	prefix: '(';
	suffix: ') ';
}

@counter-style lower-alpha-double-parens {
	system: extends lower-alpha;
	prefix: '(';
	suffix: ') ';
	
}


ol.lesson {
	list-style-type: upper-roman;
}
ol.lesson ol {
	list-style-type: upper-alpha;
}
ol.lesson ol ol {
	list-style-type: decimal;
}
ol.lesson ol ol ol {
	list-style-type: lower-alpha;
}
ol.lesson ol ol ol ol {
	list-style-type: decimal-parens;
}
ol.lesson ol ol ol ol ol {
	list-style-type: lower-alpha-parens;
}
ol.lesson ol ol ol ol ol ol {
	list-style-type: lower-roman-parens;
}
ol.lesson ol ol ol ol ol ol ol {
	font-size: .875em;
	list-style-type: lower-alpha-double-parens;
}
ol.lesson ol ol ol ol ol ol ol ol {
	list-style-type: decimal-double-parens;
}

ol.none {
	list-style-type: none !important;
	margin: 0 !important;
}
ol.lesson ol.none li {
	line-height: 3em;
}