@font-face
{	
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Medium.eot");
	src: url("/css/webfonts/RobotoSlab-Medium.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Medium.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Medium.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Medium.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Medium.svg#RobotoSlab-Medium") format("svg");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-ExtraLight.eot");
	src: url("/css/webfonts/RobotoSlab-ExtraLight.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-ExtraLight.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-ExtraLight.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-ExtraLight.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-ExtraLight.svg#RobotoSlab-ExtraLight") format("svg");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Light.eot");
	src: url("/css/webfonts/RobotoSlab-Light.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Light.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Light.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Light.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Light.svg#RobotoSlab-Light") format("svg");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Regular.eot");
	src: url("/css/webfonts/RobotoSlab-Regular.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Regular.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Regular.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Regular.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Regular.svg#RobotoSlab-Regular") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-SemiBold.eot");
	src: url("/css/webfonts/RobotoSlab-SemiBold.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-SemiBold.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-SemiBold.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-SemiBold.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-SemiBold.svg#RobotoSlab-SemiBold") format("svg");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Thin.eot");
	src: url("/css/webfonts/RobotoSlab-Thin.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Thin.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Thin.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Thin.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Thin.svg#RobotoSlab-Thin") format("svg");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Black.eot");
	src: url("/css/webfonts/RobotoSlab-Black.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Black.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Black.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Black.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Black.svg#RobotoSlab-Black") format("svg");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-Bold.eot");
	src: url("/css/webfonts/RobotoSlab-Bold.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-Bold.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-Bold.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-Bold.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-Bold.svg#RobotoSlab-Bold") format("svg");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("/css/webfonts/RobotoSlab-ExtraBold.eot");
	src: url("/css/webfonts/RobotoSlab-ExtraBold.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/RobotoSlab-ExtraBold.woff2") format("woff2"),
		url("/css/webfonts/RobotoSlab-ExtraBold.woff") format("woff"),
		url("/css/webfonts/RobotoSlab-ExtraBold.ttf") format("truetype"),
		url("/css/webfonts/RobotoSlab-ExtraBold.svg#RobotoSlab-ExtraBold") format("svg");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

:root
{
	--dark-blue: #124c8a;
	--dark-blue-rgb: 18,76,138;
	--light-blue: #0ebfe9;
	--light-blue-rgb: 14,191,233;

	--dark-red: #721c24;
	--dark-red-rgb: 114,28,36;

	--font-colour:#333333;
	--light-grey: #cdd1dd;
	--light-grey-hover: #e2e6ea;
	--light-grey-background: var(--light-grey-hover);
	--dark-grey: #32373c;
	--dark-grey-hover: #5b5f63;
}

html { padding: 0px; margin: 0px; min-width: 320px; color: var(--font-colour); font-family: "Roboto Slab", Serif; font-size: 16px; font-weight: 300; line-height: 1.6em; background-color: var(--dark-blue); }
body { padding: 0px; margin: 0px; min-width: 320px; color: var(--font-colour); font-family: "Roboto Slab", Serif; font-size: 16px; font-weight: 300; line-height: 1.6em; width: 100%; background-color: var(--dark-blue); }

/* general styles */
h1 { margin: 0px; color: var(--font-colour); font-weight: 400; font-size: 36px; }
h2 { margin-top: 60px; margin-bottom: 30px; color: var(--font-colour); font-weight: 400; font-size: 30px; }
h2.first { margin-top: 0px; }
h3 { margin-top: 45px; margin-bottom: 15px; color: var(--font-colour); font-weight: 400; font-size: 24px; }
h3.first { margin-top: 0px; }
h4 { margin-top: 45px; margin-bottom: 15px; color: var(--font-colour); font-weight: 400; font-size: 18px; }

img { vertical-align: bottom; }
img.loading-image { height: 32px; }
canvas { vertical-align: top; }
a { color: var(--light-blue); outline-color: var(--light-blue); transition: color 200ms, background-color 200ms; text-decoration: underline; }
a:focus, a:hover { text-decoration: none; }
a img { border: none; }
a.edit-link { opacity: 0.1; transition: opacity 200ms; }
iframe { vertical-align: top; }

label { padding: 0px; }

.alert { padding: 11px 10px; min-height: 48px; border-radius: 0px; padding-left: 30px; padding-right: 30px; }
span.alert { display: block; }
.alert.margin-bottom-10 { margin-bottom: 10px; }

input[type="checkbox"], input[type="radio"] { cursor: pointer; }
.form-check { margin-bottom: 0px; padding-left: 25px; }
.form-check .form-check-input { margin-top: 2px; margin-left: -20px; margin-right: 0px; margin-top: 14px; margin-bottom: 14px; padding-right: 0px; font-size: 20px; }
.form-check-inline { margin-right: 25px; }
.form-check-label { padding-left: 10px; padding-top: 12px; padding-bottom: 12px; }
.form-check-label[for] { cursor: pointer; }
.form-check .form-check-input:checked { background-color: var(--light-blue); border-color: var(--light-blue); }
.form-check input[type="text"].form-check-input { width: 100%; margin-left: 10px; margin-top: 0px; margin-bottom: 0px; padding-right: 0.75rem; font-size: 1rem; }
.form-check::after { display: block; clear: both; content: ""; }

.form-group { margin-bottom: 20px; }
.form-group label { font-weight: bold; margin-bottom: 0px; }
.form-group label.form-check-label { font-weight: normal; margin-bottom: 0px; }
.form-group .alert { margin-top: 8px; margin-bottom: 0px; }
.form-group .alert + .form-text { margin-top: 20px; }

.form-group.buttons { margin-top: 20px; }
.form-group + .form-group.buttons { margin-top: 40px; }
.form-group.buttons.first { margin-top: 0px; }
.form-group.buttons .btn { margin-right: 20px; margin-bottom: 20px; }
.form-group.buttons .btn:last-child { margin-right: 0px; }
.form-group.buttons .btn + .alert { margin-top: 0px; }

.form-control { border-color: var(--bs-border-color); }
.form-control:focus, select.form-select:focus, .form-check-input:focus { border-color: var(--light-blue); box-shadow: 0 0 0 .25rem rgba(var(--light-blue-rgb), .25); }
input.form-control, select.form-select, .form-control.readonly, textarea.form-control { height: auto; min-height: 48px; padding-top: 11px; padding-bottom: 11px; border-radius: 24px; padding-left: 25px; padding-right: 25px; }
input.form-control-sm, select.form-select-sm { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }

.form-control.readonly { display: block; background-color: var(--light-grey-background); border: solid 1px var(--dark-grey); }

.has-error label { color: var(--dark-red); }
.has-error .form-control, .has-error select.form-select, .has-error .form-check-input { border-color: var(--dark-red); }
.has-error .form-control:focus, .has-error select.form-select:focus, .has-error .form-check-input:focus { border-color: var(--dark-red); box-shadow: 0 0 0 .2rem rgba(var(--dark-red-rgb),.25); }
.has-error .form-group label { color: var(--font-colour); }
.has-error .form-group .form-control { border-color: var(--bs-border-color); }
.has-error .form-group .form-control:focus { border-color: var(--light-blue); box-shadow: 0 0 0 .25rem rgba(var(--light-blue-rgb), .25); }

.form-text { font-size: 14px; color: var(--font-colour); }

.spacer { overflow: hidden; }

/* button styles */
.btn { padding: 13px 60px; min-height: 58px; font-size: 20px; font-weight: 400; }
.btn-primary
{
    --bs-btn-bg: var(--dark-grey);
    --bs-btn-border-color: var(--dark-grey);
    --bs-btn-disabled-bg: var(--dark-grey-hover);
    --bs-btn-disabled-border-color: var(--dark-grey-hover);
    --bs-btn-hover-bg: var(--dark-grey-hover);
    --bs-btn-hover-border-color: var(--dark-grey-hover);
    --bs-btn-active-bg: var(--dark-grey-hover);
    --bs-btn-active-border-color: var(--dark-grey-hover);
	--bs-btn-border-radius: 15px;
	--bs-btn-disabled-opacity: 1;
}
.btn-secondary
{
	--bs-btn-color: var(--dark-grey);
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--dark-grey);
	--bs-btn-disabled-color: var(--dark-grey);
    --bs-btn-disabled-bg: var(--light-grey-background);
    --bs-btn-disabled-border-color: var(--dark-grey);
	--bs-btn-hover-color: var(--dark-grey);
    --bs-btn-hover-bg: var(--light-grey-background);
    --bs-btn-hover-border-color: var(--dark-grey);
	--bs-btn-active-color: var(--dark-grey);
    --bs-btn-active-bg: var(--light-grey-background);
    --bs-btn-active-border-color: var(--dark-grey);
	--bs-btn-border-radius: 15px;
	--bs-btn-disabled-opacity: 1;
}
.btn-outline-secondary
{
	--bs-btn-color: var(--dark-grey);
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--dark-grey);
	--bs-btn-disabled-color: var(--dark-grey);
    --bs-btn-disabled-bg: var(--light-grey-background);
    --bs-btn-disabled-border-color: var(--dark-grey);
	--bs-btn-hover-color: var(--dark-grey);
    --bs-btn-hover-bg: var(--light-grey-background);
    --bs-btn-hover-border-color: var(--dark-grey);
	--bs-btn-active-color: var(--dark-grey);
    --bs-btn-active-bg: var(--light-grey-background);
    --bs-btn-active-border-color: var(--dark-grey);
}
.btn-secondary { border-width: 2px; padding-top: 12px; padding-bottom: 12px; }
.btn-sm { padding: 4px 15px; min-height: 32px; font-size: 14px; font-weight: 400; border-radius: 10px; }
.btn.loading img { height: 32px; vertical-align: top; }
.btn-sm.loading { padding-top: 6px; }
.btn-sm.loading img { height: 16px; }

/* page loading overlay styles */
div.page-loading-overlay-backdrop { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999998; background-color: white; opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay { position: fixed; top: 40%; left: 50%; width: 200px; margin-left: -100px; margin-top: -30px; padding-top: 20px; padding-bottom: 20px; text-align: center; background-color: white; z-index: 99999999; border: 2px solid var(--dark-blue); opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay-backdrop.fade-out { opacity: 0; }
div.page-loading-overlay.fade-out { opacity: 0; }

/* admin frontend header styles */
.admin.front-end-header .alert { padding: 10px 30px; border-radius: 0px; margin: 0px; text-align: center; }

/* header styles */
div.header { background-color: white; }
div.header .navbar-brand img { max-width: 200px; }
@media (min-width: 340px) { div.header .navbar-brand img { max-width: 220px; } }
@media (min-width: 360px) { div.header .navbar-brand img { max-width: 240px; } }
@media (min-width: 380px) { div.header .navbar-brand img { max-width: 260px; } }
@media (min-width: 400px) { div.header .navbar-brand img { max-width: 280px; } }
@media (min-width: 420px) { div.header .navbar-brand img { max-width: 300px; } }
@media (min-width: 440px) { div.header .navbar-brand img { max-width: auto; max-height: 90px; } }

div.header a.admin-dashboard-link { position: absolute; right: 0px; top: 0px; font-size: 12px; text-decoration: none; }
@media (min-width: 992px) { div.header a.admin-dashboard-link { right: 15px; } }
@media (min-width: 1280px) { div.header a.admin-dashboard-link { right: 30px; } }

/* navigation menu styles */
.navbar { padding: 0px; }
.navbar-nav { padding-bottom: 20px; }
.nav-link { text-align: center; font-size: 20px; font-weight: 500; }
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 20px; padding-right: 20px; color: var(--dark-blue); padding-top: 30px; padding-bottom: 10px; }
.navbar-expand-lg .navbar-nav .nav-link:focus, .navbar-expand-lg .navbar-nav .nav-link:hover  { color: var(--light-blue); }
@media (min-width: 992px)
{
	.navbar-nav { padding-bottom: 0px; }
	.navbar-expand-lg .navbar-nav .nav-link { padding-left: 15px; padding-right: 15px; padding-top: 20px; padding-bottom: 20px; }
}
@media (min-width: 1200px)
{
	.navbar-expand-lg .navbar-nav .nav-link { padding-left: 30px; padding-right: 30px; }
}

.navbar-toggler { color: var(--dark-blue); border-color: var(--dark-blue); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2818,76,138, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }

.navbar .dropdown-toggle::after { display: none; }

.navbar .dropdown-menu { padding-top: 0px; padding-bottom: 0px; overflow: hidden; background-color: transparent; border: none; }
.navbar .dropdown-menu .dropdown-item { text-align: center; padding-top: 2px; padding-bottom: 2px; color: var(--dark-blue); font-size: 14px; }
.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover { color: var(--light-blue); background-color: transparent; }
@media (min-width: 992px)
{
	.navbar .dropdown-menu { background-color: white; border: 1px solid var(--dark-grey); filter: drop-shadow(0 0 2px var(--light-grey)); border-radius: 0px; }
	.navbar .dropdown-menu .dropdown-item { padding-top: 10px; padding-bottom: 10px; font-size: 18px; text-align: left; }
	.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover { background-color: var(--light-grey-hover); color: var(--light-blue); }
}

/* container styles */
.container { padding-left: 20px; padding-right: 20px; }
div.page-container { background-color: white; }
div.content-container { padding-top: 45px; padding-bottom: 60px; }
div.general-content div.left-column { padding-bottom: 60px; }
div.general-content div.right-column { padding-bottom: 60px; }
@media (min-width: 992px)
{
	div.general-content div.right-column { padding-left: 30px; }
}
html .cog-cognito.cog-form, :root:root:root:root:root .cog-cognito.cog-form { max-width: auto; margin: 0px; }

div.page-description { padding-bottom: 60px; }
div.documents { padding-bottom: 30px; }

/* datepicker styles */
div.ui-datepicker { z-index: 2; }

/* footer styles */
div.footer { background-color: var(--dark-blue); color: white; padding-top: 60px; padding-bottom: 60px; text-align: center; }
div.footer div.footer-column { padding-bottom: 30px; }
@media (min-width: 768px)
{
	div.footer div.footer-column { text-align: right; }
	div.footer div.footer-column:first-child { text-align: left; }
}
div.footer h3 { margin-top: 0px; color: white; }
div.footer .copyright { display: block; border-top: 1px solid white; font-size: 14px; padding-top: 30px; opacity: 0.5; }
div.footer a.footer-link { display: block; max-width: 200px; margin-left: auto; margin-right: auto; }
div.footer a.footer-link img { width: 100%; }
@media (min-width: 768px)
{
	div.footer a.footer-link { margin-right: 0px; }
}

/* banner styles */
div.banner { background-size: cover; background-repeat: no-repeat; background-position: center bottom; height: 200px; }
@media (min-width: 768px)
{
	div.banner { height: 300px; }
}

/* page heading styles */
div.page-heading { background-color: var(--dark-blue); color: white; padding-top: 28px; padding-bottom: 30px; }
div.page-heading h1 { color: white; }

/* side links styles */
a.side-link { display: block; margin-bottom: 30px; max-width: 300px; margin-left: auto; margin-right: auto; }
a.side-link img { width: 100%; }

/* home page styles */
div.facebook-plugin { margin-left: auto; margin-right: auto; padding-bottom: 30px; }
div.home-content .btn.btn-primary { margin-left: auto; margin-right: auto; display: block; margin-top: 30px; max-width: 600px; }

div.feature-boxes { border-bottom: 1px solid var(--dark-grey); }
div.feature-box { border-top: 1px solid var(--dark-grey); padding-top: 30px; padding-bottom: 30px; }
div.feature-box img { width: 100%; }
div.feature-box .btn { display: block; margin-top: 30px; }

/* card styles */
.card { margin-bottom: 30px; filter: drop-shadow(0 0 2px var(--light-grey)); display: block; text-decoration: none; transition: background-color 200ms; }
a.card:focus, a.card:hover { background-color: var(--light-grey-background); }
div.card-image { height: 100px; width: 80%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-size: contain; background-position: center center; margin-top: 30px; margin-bottom: 30px; }

/* document styles */
.document { display: block; margin-bottom: 30px; }

/* grounds styles */
div.ground p.club-info { font-weight: 400; }
div.ground a.directions-link { margin-top: 15px; display: block; }

/* sponsors styles */
a.sponsor { text-align: center; }
a.sponsor h3 { margin-top: 60px; }

/* clubs styles */
div.club.national-club h3, div.club.state-club h3 { text-align: center; }
div.club .contact-info-label { display: inline-block; min-width: 20px; font-weight: 400; }

a.registration-link { display: block; }

/* event styles */
div.event-details div.event-date { padding-bottom: 30px; font-weight: 400; }
div.event-details div.club-info,
div.event-details div.contact-info,
div.event-details div.article-info { padding-bottom: 30px; }
div.event-details div.right-column { padding-bottom: 30px; }
div.event-details div.documents-info { max-width: 600px; }
div.event-details div.images::after { display: block; clear: both; content: ""; }
div.event-details div.images a.image { margin-right: 10px; margin-bottom: 10px; float: left; }
div.event-details div.images img { max-height: 120px; }
@media (min-width: 576px)
{
	div.event-details div.images img { max-height: 150px; }
}
@media (min-width: 768px)
{
	div.event-details div.images img { max-height: 180px; }
}
@media (min-width: 992px)
{
	div.event-details div.images img { max-height: 205px; }
}

/* article styles */
div.article-details div.article-date { padding-bottom: 30px; font-weight: 400; }
div.article-details div.documents-info { max-width: 600px; }
div.article-details div.images::after { display: block; clear: both; content: ""; }
div.article-details div.images a.image { margin-right: 10px; margin-bottom: 10px; float: left; }
div.article-details div.images img { max-height: 120px; }
@media (min-width: 576px)
{
	div.article-details div.images img { max-height: 150px; }
}
@media (min-width: 768px)
{
	div.article-details div.images img { max-height: 180px; }
}
@media (min-width: 992px)
{
	div.article-details div.images img { max-height: 205px; }
}