﻿html {

	--hue: 200;

    --teal: hsl(var(--hue) 40% 40%);
    --teallight: hsl(var(--hue) 40% 60%);

    --tealdark: hsl(var(--hue) 40% 20%);
	--tealtint: hsl(var(--hue) 40% 20% / .7);
	--field: #fff;
    --fonts: Raleway,Helvetica,Arial,Sans-Serif;
}

#content
{
	background-color: var(--teal);
}
.cms,
.leftTwoThirds
{
	background-color: var(--field);
}

.cms > h2
{
	margin-top: 0;
	padding-top: 1rem;
}


fieldset input[type=text]
{
	width: auto;
}

legend
{
	background: var(--field);
	color: var(--teal);
}


a[href] {
    color: var(--tealdark);
}

a[href]:hover,
a[href]:focus,
a[href]:active
{
    color: var(--teal);
}

.subCategories > li.callToActionWithoutStandfirst a.subcategoryLink:after
{
	border-color: transparent var(--teal);
}


.UserInputForm h3
{
	color: var(--tealdark)
}


body{
	background-color: var(--field);
	border-color: var(--tealdark);
}

form.wrapperform
{
	background-color: var(--field);
	border-bottom: 1px solid var(--tealdark);
}

.header{
	background-color: var(--teal);
	border-bottom: 1px solid var(--field);
}

.footer
{
	display: none;
}

.poweredByFooter
{
	border-top: 1px solid var(--teal);
}

.header h1 a:hover,
.header h1 a:focus,
.header h1 a:active
{
	background-color: var(--tealdark);
}

.userToolMenu
{
	border-width: 0 0 1px 0;
	border-color: var(--tealdark);
}
.mainMenu {
	display: none;
}

.header .title 
{
	float: none;
	max-width: unset;
}

.header .title img
{
	width: unset !important;
	max-width: 100% !important;
	height: unset !important;
	max-height: unset !important;
	min-width: 50%; 
}

.header .cobrand
{
	display: none;
}

li.mainmenu3, li.menu3selected, .contentmenu3 
{

}

.contentWrapper.contentmenu1,
.contentWrapper.contentmenu3 {
	background: var(--teal);
}


.contentmenu1 .leftTwoThirds,
.contentmenu3 .leftTwoThirds
{
	background: #fff;
}

.contentmenu3.rightThird {
	background: var(--teal);
	color: #fff;
}


.rightThird .subCategories
{
	margin: 1em 0;
	padding: 0 1em;
}


.rightThird p,
div[id$='pnl_SurgerySelect']
{
	margin: 1rem 1rem;
	padding: .3rem 1rem;
}

#lbl_SubmitWrapper
{
	display: block;
	position: relative;
}

#lbl_SubmitWrapper:after
{
	content: " ▶";
	display: inline-block;
	margin-left: -2.6rem;
	color: var(--teal);		
}

div[id$='pnl_SurgerySelect'] input[type=submit]:hover,
div[id$='pnl_SurgerySelect'] input[type=submit]:active,
div[id$='pnl_SurgerySelect'] input[type=submit]:focus
{
	margin-right: .6rem;
	color: var(--tealdark);	
}

.requestCoaching,
div[id$='pnl_SurgerySelect'] input[type=submit]
{
	color: var(--teal);	
	font-family: var(--fonts);
	font-size: large;
	font-weight: bold;
	margin: .6rem 0;
	padding: .3rem 2.6rem .3rem .6rem;
	border-radius: .3rem;
	border-style: solid;
	border-width: 1px;
	border-color: var(--tealdark);
	transition: margin-right .3s;
	background-color: var(--field);
	display: inline-block;
}

.requestCoaching[href]:after,
div[id$='pnl_Matches'] a[href]:after
{
	content: " ▶";
	display: inline-block;
	position: relative;
	left: 1rem;
	transition: left .3s;
}
.requestCoaching[href]:hover:after,
.requestCoaching[href]:focus:after,
.requestCoaching[href]:active:after,
div[id$='pnl_Matches'] a[href]:hover:after,
div[id$='pnl_Matches'] a[href]:focus:after,
div[id$='pnl_Matches'] a[href]:active:after
{
	left: 1.6rem
}


div[id$='pnl_Matches']
{
	margin: 1rem 0;
}

div[id$='pnl_Matches'] p
{
	margin: .3rem 0;
	padding: 0
}

div[id$='pnl_Matches'] a[href]
{
	color: var(--field);
}
div[id$='pnl_Matches'] a[href]:hover,
div[id$='pnl_Matches'] a[href]:active,
div[id$='pnl_Matches'] a[href]:focus
{
	text-decoration: underline;
}


/* .contentmenu3.rightThird a {

	color: #fff !important;
} */



.ul_PCNClinics
{
	list-style: none;
	margin: 0;
	padding: 0 1em;
}
.ul_PCNClinics li ul
{
	margin: 0;
	padding: 0;
}
.ul_PCNClinics li
{
	list-style: none;
	margin: 0;
	padding: 0;
}
.ul_PCNClinics li h3
{
	margin-bottom: 0;
}




.contentmenu3.rightThird
{
	padding: 0;
	margin: 0;
}
.rightThird .categoryInfo {
	padding: 0;
	margin: 0;
}

.rightThird .categoryInfo .subSection {
	padding: 1em 1em .6em 1em;
	margin: 0 0 .3em 0;
	background-image: linear-gradient(to bottom, #216594, #0085b0);
	color: #fff;
}

.leftTwoThirds .categoryInfo .subSection {
	padding: 1em 1em .6em 1em;
	margin: 0 0 .3em 0;
	border: 1px solid #0085b0;
}

.leftTwoThirds .subCategories li.subCategoryCallToAction
{
	border: 1px solid #0085b0;
	padding: .3em .6em;
	background: #fff
}

.rightThird .categoryInfo .subSection a[href],
.rightThird .categoryInfo .subSection a:hover,
.rightThird .categoryInfo .subSection a:active
{
	color: #fff;
}

.rightThird .categoryInfo .subSection .subCategories > li.subCategoryCallToAction
{
	background-color: #009fc6 !important; 
}

.rightThird .categoryInfo .subSection .subCategories > li.callToActionWithoutStandfirst a.subcategoryLink:after
{
	border-color: transparent #fff;
}

h4.subSectionTitle {
    margin: 0 0 0 0;
    font-size: 1.3em;
}


.rightThird h2
{
	padding: .3rem 1rem;
	margin: .3em 1rem;
}


.contentmenu1 .leftTwoThirds {


}
.moreLink {
	display: none;
}


.heroTrio
{
	
}

.heroTrio div
{
	font-size: 1em;
	margin: .3em;
	border-top: 1px solid var(--teal);
	color: var(--tealdark);
	padding: .3em 1em .6em 15%;
	position: relative;
	background-position: 1%;
	background-repeat: no-repeat;
	background-size: 10%;
}

.heroTrio div p:first-child
{
	font-weight: bold;
}

.heroTrio div:nth-child(1)
{
	border-top: none;
}

/*.heroTrio div::before
{
	float: left;
	font-weight: bold;
	font-size: 1rem;
	margin: 1.2rem 1rem .3rem 0;
	color: var(--field);
	background-color: var(--teal);
	border-radius: 1rem;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	display: block;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

 .heroTrio div:nth-child(1)::before
{
	content: "1";
}
.heroTrio div:nth-child(2)::before
{
	content: "2";
}
.heroTrio div:nth-child(3)::before
{
	content: "3";
} */


.leftTwoThirds .subCategories li.subCategoryCallToAction {
    border-color: var(--tealdark);
}






.heroTrio div:nth-child(1)
{
	border-top: none;
	background-image: url("https://national.kyoh.org/SiteUploads/96/Uploads/icon/icon-a-002.svg");
}

.heroTrio div:nth-child(2)
{
	background-image: url("https://national.kyoh.org/SiteUploads/96/Uploads/icon/icon-b-002.svg");
}

.heroTrio div:nth-child(3)
{
	background-image: url("https://national.kyoh.org/SiteUploads/96/Uploads/icon/icon-c-002.svg");
}


.pcn
{
	margin: 0 0 1px 1px;
	padding: .45em 1em 1em 1em;
	border-bottom: 1px solid #fff;
}

.pcn h3
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.pcn ul
{
	padding: 0 0 0 1.3em;
	margin: 0 0 0 0;
	
}

.pcn ul li
{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	
}




@keyframes carousel { 0%, 100%, 30%  { opacity: 0 } 10% , 20% { opacity: 1 } }

.siteHeros li { animation: carousel; opacity: 0; animation-iteration-count: infinite; }
.siteHeros li { animation-duration: 40s; background-position: center center; background-size: cover; }

.siteHeros li:nth-child(1) {animation-delay: 0s; } 
.siteHeros li:nth-child(2) {animation-delay: 8s; } 
.siteHeros li:nth-child(3) {animation-delay: 16s; } 
.siteHeros li:nth-child(4) {animation-delay: 24s; } 
.siteHeros li:nth-child(5) {animation-delay: 32s; } 
.siteHeros li:nth-child(6) {animation-delay: 40s; } 
.siteHeros li:nth-child(7) {animation-delay: 48s; } 


.div_SiteHerosBanner {
    position: relative;
    margin: -1em -1em 2em -1em;
    padding: 0;
}


.siteHeros {
    margin: 0;
    padding: 200px 0 0 0;
    width: 100%;
}

.siteHeros li {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
}

.div_SiteHerosBanner h1 {
    padding: 1rem 2% 1rem 2%;
    margin: 0;
    display: block;
    font-size: 1.6em;
    font-weight: bold;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--tealtint);
    color: var(--field);
    position: relative;
}