/*
 * Author: Digital Development Services
 * STEM Technical Services
 * URL: http://stem-ts.open.ac.uk/
 *
*/


/*------------------------------------------------
#
# site
#
--------------------------------------------------*/
* { margin:0; padding:0px; font-family:'Arial', sans-serif; box-sizing:border-box; } 
body { background:#fff; height:100%; margin:0; color:#24285c; overflow-x:hidden; }
html,
body,
#hero { width:100%; height:100%; }


/*------------------------------------------------
#
# WordPress
#
--------------------------------------------------*/
.wp-post-image { max-width:100%; height:auto; margin:0 10px 40px 10px; float:right; }
.post-edit-link { position:fixed; top:40%; right:0; background:#186d9c; color:#fff; padding:20px 30px; z-index:999; }
.post-edit-link:active,
.post-edit-link:focus,
.post-edit-link:hover,
.post-edit-link:visited{ background:rgba(44,109,155, 0.8); color:#fff !important; }
.entry-meta { margin:20px 0; }
.wp-block-image img { margin:0; }
.wp-block-image .alignright img { margin:0 0 20px 0; }
figure.wp-block-image { margin:40px 0 0 0; }

.wp-container-core-columns-is-layout-1 { margin-top:40px; }
.wp-block-column.is-vertically-aligned-top { background:#e8e8e8; border:1px solid #ccc; border-radius:0 2rem 0 0; padding:20px; margin-bottom:40px; }
.card-highlight { background:#fff !important; border:2px solid #24285c !important; border-radius:0 2rem 0 0; padding:20px; margin-bottom:40px !important; }

.wp-block-image .alignleft { float:left; margin:8px 20px 5px 15px !important; }
.wp-block-image .alignright { float:right; margin:8px 15px 5px 20px !important; }

/*------------------------------------------------
#
# OU
#
--------------------------------------------------*/
.ou-identity-name { color:#fff !important; }
.ou-footer-nav h3 { margin-left:0 !important; }
/*.ou-display-public-tutor::after, 
.ou-ia-student::after { content:" hub"}*/
.ou-ia-footer-accessibility-statement{display:none !important;}

/*------------------------------------------------
#
# ou header and footer styles
#
--------------------------------------------------*/
#ou-head #ou-header { padding: 0 15px 20px; max-width:1320px !important; }
#ou-org-footer .ou-container { max-width:1320px !important; }
.ou-cookies-bar .ou-container, 
#ou-header .ou-container, 
#ou-org-footer .ou-container { max-width:1200px; padding:0; /*height:300px; */}
img[src*="https://ad.doubleclick.net/ddm/activity/"],img[src*="https://secure.adnxs.com/"] { position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
/*body .ou-footer h1, body .ou-footer h2, body .ou-footer h3, body .ou-footer h4, body .ou-footer h5, body .ou-footer h6 { color:#fff; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-weight:normal; margin-top:.67em; margin-left:0; margin-right:0; }
body .ou-footer h3 { display:none; }
body .ou-footer { padding:20px 0 40px 0; }
body .ou-footer .ou-footer-nav #ou-ia-public { display:block !important; }
body .ou-footer .ou-footer-nav #ou-ia-public ul { display:block !important; width:100%; margin:0; padding:0; }
body .ou-footer .ou-footer-nav #ou-ia-public ul li { display:inline-block !important; }
body .ou-footer .ou-footer-nav #ou-ia-public ul li a { font-size:15px; font-size:0.9rem; font-style:normal; font-weight:normal; }
body .ou-footer .ou-footer-nav .ou-small-print p small { font-size:15px; font-size:0.9rem; font-style:normal; font-weight:normal; }
body .ou-footer .ou-footer-nav #ou-ia-public~.ou-small-print .ou-crest-icon { top:5px !important; }
body .ou-footer .ou-footer-nav #ou-ia-public~.ou-small-print .ou-copyright { padding-left:15%; padding-top:5.0%; margin-top:20px !important; }*/
li.ou-search { display:none !important; }
.cassie-pre-banner .cassie-accept-all, 
.cassie-pre-banner .cassie-reject-all { color:var(--accept-all-button-text-color) !important; }
.cassie-pre-banner .cassie-accept-all:focus, 
.cassie-pre-banner .cassie-reject-all:focus { color:#000 !important; }

@media only screen and (max-width: 767px), screen and (max-device-width: 767px) { 
    body #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.scotland #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.wales #ou-head #ou-header:not(.ie8) a[class*="ou-logo"] { position:absolute; margin:2px 9px; overflow:hidden; background:none; height:33px; width:auto; }
}

/*------------------------------------------------
#
# titles / paragraphs / blockquotes / lists
#
--------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6{color:#24285C; font-family:'Poppins', sans-serif; font-size: 28px; font-weight:700; margin:10px 0; line-height:1.4;}

h1 a, 
h2 a,
h3 a,
h4 a,
h5 a,
h6 a{font-family:'Poppins', sans-serif;font-weight:700; margin:10px 0; line-height:1.4;}

.classify { font-family:'Arial', sans-serif; font-weight:400; font-size:inherit; }

h1.section-title { margin-bottom:20px !important; }

p { padding:0; font-family:'Arial', sans-serif; font-weight:400; font-size:16px; line-height:1.6; color:#24285C; }
.oro-rss-item { padding:0; margin:10px 0 15px 0; font-family:'Arial', sans-serif !important; font-weight:400; font-size:16px; line-height:1.6; color:#24285C; }
p.has-background { margin:40px 10px; border:1px solid #24285b; }

h1 small { font-size:14px; }
small { display:block; }

blockquote { display:block; background:#0e56a7; color:#fff; margin:40px 10px; padding:30px; border-radius:0.25rem; }
blockquote:before { color:#fff; content:open-quote; font-size:4em; line-height:0.1em; margin:20px 0 0 0; display:block; }
blockquote:after { content:close-quote; visibility:hidden; }
blockquote p { display:inline; font-size:15px; font-size:1.1rem; margin:0; color:#fff; }
pre { background:#f4f4f4; border:none; border-left:3px solid #000; page-break-inside:avoid; font-family:monospace; font-size:14px; line-height:1.6; margin:20px; max-width:100%; overflow:auto; padding:20px; display:block; word-wrap:break-word; }

ul { list-style:square; }
ol { list-style:decimal-leading-zero; }
ul li, 
ol li { padding:0; font-family:'Arial', sans-serif; font-weight:400; font-size:16px; line-height:1.6; color:#24285C; }


/*------------------------------------------------
#
# margin / padding / alignments
#
--------------------------------------------------*/
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { margin-left:auto; margin-right:auto; display:block; clear:both; }
.text-align-left { text-align:left; }
.text-align-right { text-align:right; }
.text-align-center { text-align:center; }
.valign-image-center { display:table; }
.valign-image-center a { vertical-align:middle; display:table-cell; }
.valign-image-center img { display:block; height:auto; width:100%; }
.pointer { cursor:pointer; }
.fullwidth { width:100%; margin-bottom:20px; }
.nopadding { padding:0px !important; margin:0px; }
.margin-top-10 { margin-top:10px; }
.margin-top-20 { margin-top:20px; }
.margin-top-40 { margin-top:40px; }
.margin-top-60 { margin-top:60px; }
.margin-top-80 { margin-top:80px; }
.margin-top-100 { margin-top:100px; }
.margin-bottom-10 { margin-bottom:10px; }
.margin-bottom-20 { margin-bottom:20px; }
.margin-bottom-40 { margin-bottom:40px; }
.margin-bottom-80 { margin-bottom:80px; }
.margin-bottom-100 { margin-bottom:100px; }
.margin-left-20 { margin-right:20px; }
.margin-left-40 { margin-right:40px; }
.margin-right-20 { margin-right:20px; }
.margin-right-40 { margin-right:40px; }
.desktop { display:block; }
.phone, 
.tablet, 
.mobile { display:none; }
.removegridpadding { padding-left:0 !important; padding-right:0 !important; }
.removegutter-x { --bs-gutter-x:0 !important; }

mark { display:inline !important; padding:5px 0px!important; margin:10px 7px; color:#000 !important; background-color:rgba(207,207,207,1) !important; box-shadow:7px 0 0 0 rgba(207,207,207,1),-7px 0 0 0 rgba(207,207,207,1) !important; box-decoration-break:clone; -webkit-box-decoration-break:clone; float:none !important; line-height:1.8; }

hr { clear:both; background:#4f5353; border:none; color:#4f5353; display:block; height:1px; margin:40px 0 !important; width:100%; }
.clear { clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; }

::-moz-selection { color:#fff; text-shadow:none; background:#312b39; }
::selection { color:#fff; text-shadow:none; background:#312b39; }
*,*:after,*:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0; margin:0; }

.equal { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-wrap:wrap; }
.equal > [class*='col-'] { display:flex; flex-direction:column; }
@media (min-width:768px) { 
	.row.equal { display:flex; flex-wrap:wrap; }
}


/*------------------------------------------------
#
# link styles
#
--------------------------------------------------*/

a { color: #1f55a5; border: none !important; text-decoration: underline; }
a:visited { color: #a53c80; }
a:hover { color: #29245a; }
a:visited:hover { color: #742a5a; }
a:focus { background: #fcf289 !important; color: #000000 !important; }
a:active { color: #112e5a; }
a:disabled { color: #29245a; }

/* a { display:inline; color:#186d9c; background-image:linear-gradient(120deg, 
#186d9c 0%, 
#186d9c 100%); background-repeat:no-repeat; background-size:100% 0em; background-position:0 88%; transition:background-size 0.25s ease-in; text-decoration:none; padding:8px 2px 6px 2px; }
a:hover { color:#186d9c; background-size:100% 0.2em; text-decoration:none; } */

/* styles to apply if a user's device settings are set to reduced motion */
@media (prefers-reduced-motion) { 
	a { transition:background-size 0s ease-in; }
}

/* a.noborder { color:#186d9c; background-image:none; text-decoration:none; padding:0; }
a.noborder:hover { background-size:none; text-decoration:none; } */

/* use this when linking to the top level of an external website */
a.linkplusurl { color:inherit; text-decoration:none; background-image:none; border-bottom:2px solid #186d9c; }
a.linkplusurl::after { content:' → ' attr(href); /* show an arrow before the href */}
a.linkplusurl:hover { color:inherit; text-decoration:none; border-bottom:2px solid #186d9c; }

a.button { clear:both; display:block; background:#fff; color:#186d9c; padding:5px 10px; margin:20px 0 0 0; text-align:center; border:1px solid #186d9c; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; border-radius:0.2rem; font-size:15px; font-size:1.0rem; text-transform:uppercase; }
a.button:hover { background:#186d9c; color:#fff; }
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	a.button { -webkit-transition:all 0s; -moz-transition:all 0s; transition:all 0s; }
}

a.btn { background:#fff; color:#186d9c; padding:5px 10px; margin:20px 0 0 0; text-align:center; border:1px solid #186d9c; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; border-radius:0.2rem; font-size:15px; font-size:1.0rem; text-transform:uppercase; }
a.btn:hover { background:#186d9c; color:#fff}
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	a.btn { -webkit-transition:all 0s; -moz-transition:all 0s; transition:all 0s; }
}

.link { cursor:pointer; font-size:16px; font-size:1.2rem; position:relative; white-space:nowrap; color:#186d9c; float:right; background-image:none; border-bottom:1px solid #186d9c; }
.link::before,.link::after { position:absolute; width:100%; height:2px; background:#186d9c; top:100%; left:0; pointer-events:none; }
.link::before { content:''; /* show by default */}
.link--more { font-weight:700; text-transform:uppercase; }
.link--more::before { height:10px; top:100%; opacity:0; }
.link--more:hover::before { opacity:1; animation:lineUp 0.3s ease forwards; }
@keyframes lineUp { 
    0% { transform-origin:50% 100%; transform:scale3d(1, 0.045, 1); }
    50% { transform-origin:50% 100%; transform:scale3d(1, 1, 1); }
    51% { transform-origin:50% 0%; transform:scale3d(1, 1, 1); }
    100% { transform-origin:50% 0%; transform:scale3d(1, 0.045, 1); }
}
.link--more::after { content:''; transition:opacity 0.3s; opacity:0; transition-delay:0s; }
.link--more:hover::after { opacity:1; transition-delay: 0.3s; }
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	.link--more::after { transition:opacity 0s; transition-delay:0s; }
	.link--more:hover::after { transition-delay:0.3s; }
}


/*------------------------------------------------
#
# buttons
#
--------------------------------------------------*/
.wp-block-button__link,
.event-cta.btn { background: #5AC2B3 !important; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; color: #24285C; border: none !important; border-radius: 9999px; text-transform: none; }
.wp-block-button__link:visited,
.event-cta.btn:visited { background: #7bcec2 !important; color: #12142e; text-decoration: underline; }
.wp-block-button__link:hover,
.event-cta.btn:hover { background: #bde7e1 !important; color: #191c40; text-decoration: underline; }
.wp-block-button__link:focus,
.event-cta.btn:focus { background: #fdf289 !important; color: #12142e; text-decoration: underline; border: 1px solid #000 !important; }
.wp-block-button__link:active,
.event-cta.btn:active { background: #7bcec2 !important; color: #12142e; text-decoration: underline; }
.wp-block-button__link:disabled,
.event-cta.btn:disabled { background: #cccccc !important; color: #24285C; }

button { background:#ce363c; color:#fff; border:none; padding:0.65rem 1.25rem 0.64rem 1.25rem; border-radius:0; font-size:16px; font-size:1.0rem; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
button:hover, button:focus { background:#811519; }
button .icon { margin-right:5px; }
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	button { -webkit-transition:all 0s; -moz-transition:all 0s; transition:all 0s; }
}
.btn-outline-secondary{
	--bs-btn-color: #333;
	--bs-btn-border-color: #333;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #333;
	--bs-btn-hover-border-color: #333;
	--bs-btn-focus-shadow-rgb: 108, 117, 125;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #333;
	--bs-btn-active-border-color: #333;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #333;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #333;
	--bs-gradient: none;
}

/*------------------------------------------------
#
# tooltips
#
--------------------------------------------------*/
div.tooltip-inner { max-width:300px; width:300px; word-break:break-word; font-size:14px !important; font-size:0.8rem !important; padding:10px; }
.tooltip.top .tooltip-inner { background-color:#d6d34e; color:#d6d34e !important; }
.tooltip.top .tooltip-arrow { border-top-color:#d6d34e; }
.tooltip.in { opacity:1!important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color:#d6d34e !important; }
.tooltip-inner { background-color:#d6d34e; color:#000 !important; }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color:#d6d34e !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color:#d6d34e !important; }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color:#d6d34e !important; }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color:#d6d34e !important; }


/*------------------------------------------------
#
# colours
#
--------------------------------------------------*/
.white { color:#fff !important; }
.black { color:#000 !important; }
.yellow { color:#d6d34e !important; }
.darkred { color:#811519 !important; }
.red { color:#ce363c !important; }
.blue { color:#186d9c !important; }
.midblue { color:#1b5c81 !important; }
.grey { color:#4f5353 !important; }
.lightgrey { color:#f5f5f5 !important; }


.whitebg { background-color:#fff !important; }
.blackbg { background-color:#000 !important; }
.yellowbg { background-color:#d6d34e !important; }
.darkredbg { background-color:#811519 !important; }
.redbg { background-color:#ce363c !important; }
.bluebg { background-color:#186d9c !important; }
.midbluebg { background-color:#1b5c81 !important; }
.greybg { background-color:#4f5353 !important}
.lightgreybg { background-color:#f5f5f5 !important; }


/*------------------------------------------------
#
# datatable search
#
--------------------------------------------------*/
#site-search-container { background:#2855a5; padding:20px; margin:40px 0; border-radius:10px; }
#site-search-container label { color:#fff; margin:10px; font-size:16px; font-size:1.0rem; font-weight:700; }
#site-search-container input { background:#fff; color:#000; border:3px solid #fff; font-size:22px; font-size:1.4rem; }
#site-count { background:#fff; color:#000; margin-left:10px; padding:5px; border-radius:5px; }


/*------------------------------------------------
#
# datatable cards
#
--------------------------------------------------*/
#multisite-cards-container .card { box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3); margin-bottom:40px; }
#multisite-cards-container .card h3 { margin:0 10px 20px 10px; }
.card a.ra-logo { background:#fff; display:block; position:relative; padding:0; height:280px; overflow:hidden; }
.card a.ra-logo img { position:absolute; padding:0 10px; top:10%; bottom:0; margin:auto 0; border-radius:10px; }


/*------------------------------------------------
#
# mobile navigation
#
--------------------------------------------------*/
/* .scroll-list { } */
.navbar-toggle { border-color:#000 !important; border-radius:0; }
.navbar-toggle:hover,.navbar-toggle:focus { background-color:#f3f3f1 !important; }
.navbar-toggle .icon-bar { background-color:#186d9c !important; border-radius:0; }


/*------------------------------------------------
#
# modal
#
--------------------------------------------------*/
.modal { z-index:99999 !important; }
.modal-content { border-radius:0; border:none; }
h4.modal-title { color:#000; font-size:18px; font-size:1.2em; margin:0 10px; font-weight:700; }
.modal-header { border-bottom:none !important; }
.modal-header .close { color:#000; }


/*------------------------------------------------
#
# embed wrapper full width
#
--------------------------------------------------*/
.vwrapper { float:none; clear:both; width:100%; position:relative; padding-bottom:56.25%; padding-top:10px; height:0; margin:0 0 20px 0; }


/*------------------------------------------------
#
# video/audio iframe responsive design
#
--------------------------------------------------*/
.video-wrapper { margin-left:auto; margin-right:auto; width:640px; max-width:100%; }
.video-container { position:relative; padding-bottom:50%; padding-top:6.25%; height:0; overflow:hidden; }
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%; margin-left:10px; margin-right:15px; }
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

/* Responsive IFRAME Embed Encoding 
   Adapts fixed pixel IFRAME sizes and makes them responsive. */
/* First, define the common wrapper elements 
   Padding-top is for the fixed height header of the embedded content */
.youtubeWrapper, 
.instagramWrapper { position:relative; padding-top:0; height:0; overflow:hidden; margin-top:10px; }
/* Set the padding-bottom for 16:9 aspect ratio video from YouTube & Vimeo */ 
.youtubeWrapper { padding-bottom:56.25%; }
.wp-block-embed__wrapper::before { padding-top:var(--before-padding, 56.25%); }
/* Set padding-bottom for 5:6 aspect ratio Instagram content */
.instagramWrapper { padding-bottom:120%; }    
/* For each content source, set the IFRAME to be top left and occupy 100% of width and height of the containing DIV wrapper */    
.youtubeWrapper iframe,
.youtubeWrapper object,
.youtubeWrapper embed,
.instagramWrapper iframe,
.instagramWrapper object,
.instagramWrapper embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.wp-block-embed-youtube{margin:30px 0 40px 0;}


/*------------------------------------------------
#
# ouheaders
#
--------------------------------------------------*/
#ou-header, 
#ou-org-footer { font-family:Arial, Helvetica, sans-serif !important; font-size:14px !important; font-size:.875rem !important; font-weight:300; }
#ou-header a, 
#ou-org-footer a { font-family:Arial, Helvetica, sans-serif !important; font-size:14px !important; font-size:.875rem !important; font-weight:300; }
#ou-header ul li, 
#ou-header ol li, 
#ou-org-footer ul li, 
#ou-org-footer ol li { font-family:Arial, Helvetica, sans-serif !important; font-size:14px !important; font-size:.875rem !important; }
.ou-footer-title h2 { margin-left:0 !important; }


/*------------------------------------------------
#
# header
#
--------------------------------------------------*/
#header { position:relative; background:#fff; padding:0; margin:0; top:0; left:0; z-index:1; width:100%; }
/* #header .project-accessibility-banner {  }
#header .project-accessibility-banner a { } */
#header .kmi-logo-banner { position:relative; margin:40px 20px 0 0; }
#header .kmi-logo-banner img { float:right; position:relative; display:block; padding:0; margin:0; height:82px; }
/*#header .imgtxt { padding:0; position:absolute; top:35%; left:20.3%; }
#header h1 { float:left; position:relative; display:block; padding:0; color:#000; font-size:38px; font-size:2.3rem; margin:0 0 10px 0; font-weight:700; }
#header h2 { float:left; clear:both; position:relative; display:block; padding:0; color:#000; font-size:16px; font-size:1.2rem; margin:0; /*max-width:300px !important; /font-weight:300; }*/
#header .research-button a { float:left; clear:both; position:relative; display:inline; background:#d9d05b; padding:10px; color:#123740; font-size:16px; font-size:1.0rem; margin:10px 0 0 0; font-weight:400; }
/*#header a { color:#123740; }*/

/*#stem-banner { background: url("../images/banners/generic-blue-green-waves.png") no-repeat center; height:400px; width:100vw; }
#stem-banner-short { background: url("../images/banners/generic-blue-green-waves-short.png") no-repeat center; height:200px; width:100vw; }*/

#header .welcometitle { position:relative; margin:80px 0 40px 20px; }
#header .sitetitle { position:relative; margin:0 20px 0 20px; }
#header .welcometitle h2 { display:inline; padding:5px 0 !important; font-size:18px; font-size:1.4rem; color:#000; background-color:rgba(255,255,255,0.92); box-shadow:7px 0 0 0 rgba(255,255,255,0.92),-7px 0 0 0 rgba(255,255,255,0.92); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
#header .sitetitle h1 { display:inline !important; padding:10px 0 !important; background-color:rgba(255,255,255,0.92); box-shadow:7px 0 0 0 rgba(255,255,255,0.92),-7px 0 0 0 rgba(255,255,255,0.92); box-decoration-break:clone; -webkit-box-decoration-break:clone; font-size:40px !important; font-size:2.4rem !important; font-weight:700 !important; color:#000; float:none !important; line-height:2.0; }
#header .sitetitle h2 { display:inline; max-width:600px; padding:5px 0 !important; color:#000; background-color:rgba(255,255,255,0.92); box-shadow:7px 0 0 0 rgba(255,255,255,0.92),-7px 0 0 0 rgba(255,255,255,0.92); box-decoration-break:clone; -webkit-box-decoration-break:clone; line-height:1.6; }
#header .sitetitle p { background-color:rgba(255,255,255,0.7); font-size:30px; font-size:1.9rem; padding:20px; }
#header .sitetitle img { margin-bottom:20px; }


/*------------------------------------------------
#
# banner
#
--------------------------------------------------*/
#banner { position:relative; z-index:9; color:#fff; padding:0; margin:0; height:auto; }
.hero { position:absolute; width:400px !important; top:30% !important; right:1% !important; z-index:3; color:#000; text-align:right; text-transform:uppercase; }
.hero h1 { font-size:6em; font-weight:bold; margin:0; padding:0; }
.hero-logo { position:absolute; top:10%; left:2%; }
.hero-logo img { width:300px !important; }
.hero-button { position:absolute; bottom:25%; right:2%; }
.btn.btn-lg { padding:10px 40px; }
.btn.btn-hero { color:#fff; background-color:#0b508c; border-color:#0b508c; outline:none; margin:20px auto; border-radius:0; text-decoration:none; }
.btn.btn-hero:hover, 
.btn.btn-hero:focus { background-color:#0075ae; border-color:#0075ae; }
/*------------------------------------------------
#
# banner media queries
#
--------------------------------------------------*/
@media screen and (min-width: 980px) { 
	.hero { width:100%; }    
}
@media screen and (max-width: 640px) { 
	.hero h1 { font-size:4em; }    
}
/*------------------------------------------------
#
# banner carousel slider
#
--------------------------------------------------*/
.banner-carousel{position:relative;overflow:hidden; width:100%; /* max-height:310px;  */}
.carousel-wrapper{display:flex;transition:transform 0.5s ease-in-out;will-change:transform;}
.carousel-slide{min-width:100%;flex-shrink:0;position:relative;}
.carousel-slide img{width:100%;display:block;object-fit:cover;}
.carousel-prev,
.carousel-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;padding:1rem;cursor:pointer;z-index:10; }
.carousel-prev {left:10px;}
.carousel-next{right:10px;}

/*------------------------------------------------
#
# navigation
#
--------------------------------------------------*/
#logo { visibility:hidden; height:50px; margin-top:10px; }
#logo.alwayson { visibility:visible !important; }
.navbar-default { background:#fff; border:none; width:100%; border-radius:0; z-index:9999; top:0; }
.navbar-default p { margin:10px 10px 12px 10px; font-size:26px; font-size:1.6rem}
.navbar-default p a.home { color:#000; }
.navbar-default p a.home:hover,.navbar-default p a.home:active,.navbar-default p a.home:focus { color:rgba(0,0,0, 0.8); }
.navbar-fixed-top { position:fixed; right:0; left:0; z-index:999; box-shadow:0 2px 4px 0 rgba(0,0,0,.2); }
/*.navbar { margin-bottom:0 !important; }*/

.navbar-default li.current-menu-item a, 
.nav .menu li.current_page_parent a { text-decoration: underline; }

.hamburger .line { width:50px; height:5px; background-color:#186d9c; display:block; margin:8px auto; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.hamburger:hover { cursor:pointer; }
#hamburger.is-active { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); }
#hamburger.is-active .line { color:#24285C; }
#hamburger.is-active .line:nth-child(2) { -webkit-transition:none; -o-transition:none; transition:none; }
#hamburger .line:nth-child(2) { -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; }
#hamburger.is-active .line:nth-child(2) { opacity:0; }
#hamburger.is-active .line:nth-child(1),#hamburger.is-active .line:nth-child(3) { width:35px; -webkit-transform-origin:right; -moz-transform-origin:right; -ms-transform-origin:right; -o-transform-origin:right; transform-origin:right; }
#hamburger.is-active .line:nth-child(1) { -webkit-transform:translateY(15px) rotate(45deg); -ms-transform:translateY(15px) rotate(45deg); -o-transform:translateY(15px) rotate(45deg); transform:translateY(15px) rotate(45deg); }
#hamburger.is-active .line:nth-child(3) { -webkit-transform:translateY(-15px) rotate(-45deg); -ms-transform:translateY(-15px) rotate(-45deg); -o-transform:translateY(-15px) rotate(-45deg); transform:translateY(-15px) rotate(-45deg); }

.nav { width: 100%; display: flex; justify-content: end; padding-top: 23px; }
.nav .menu-toggle { position:relative; z-index:2; display:block; padding:0; background-color:#fff; text-decoration:none; text-align:center; color:#000; margin:7px 0 0 0; float:right; }
.nav .menu-toggle:focus { color:#000; }
.nav .menu-toggle-text { display:block; }
.no-js .nav .menu-toggle { display:none; }
.nav .expanded-menu-toggle { color:#000; }
.no-fontface .nav .icon-menu:before { display:none; }

/* .menu is visually hidden by default */
.menu { position:relative; z-index:1; background-color:#fff; border:0; margin:-1px -15px; overflow:hidden; padding:0; max-height:1px; min-height:0; }

 /* no sub menus for mobile */
.menu li { padding:0; list-style:none; margin-bottom:0 !important; }
.menu li a { color:#24285C; text-decoration:none; padding:8px 0 6px 0; font-family: 'Poppins', sans-serif; font-size: 16px; margin-right:25px; font-weight: 700; border: 1px solid #fff; }
.menu li ul.sub-menu,
.menu li ul.children { display:none; }
/* end .menu */

.no-js .menu, 
.expanded-mobile-menu { -moz-transition:max-height 800ms ease-in, min-height 500ms ease-out, padding 400ms ease-in; -o-transition:max-height 800ms ease-in, min-height 500ms ease-out, padding 400ms ease-in; -webkit-transition:max-height 800ms ease-in, min-height 500ms ease-out, padding 400ms ease-in; transition:max-height 800ms ease-in, min-height 500ms ease-out, padding 400ms ease-in; /*min/max heights allow me to css transition to height auto for WordPress menus with unknown number of items*/clip:auto; min-height:8em; max-height:100em; padding:0; z-index:9999; }

@media only screen and (min-width: 30.1em) { 
	/*481 ish px*/
	/* .menu li { float:right; width:100%; } */
}
@media only screen and (min-width: 58em) { 
	.nav .menu-toggle { display:none; }
	.menu, 
	.no-js .menu, 
	.expanded-mobile-menu { min-height:0; max-height:999em; border-radius:0; overflow:visible; padding:0; background:#fff; box-shadow:none; text-align:right; }
	.menu li, 
	.no-js .menu li, 
	.expanded-mobile-menu li { float:none; width:auto; display:inline-block; position:relative; vertical-align:middle; /* DROP DOWNS *//* showing sub-menus */}
	.lt-ie8 .menu li, 
	.lt-ie8 .no-js .menu li, 
	.lt-ie8 .expanded-mobile-menu li { /* inline-block fix for old ie (relevant if they're served larger media queries in an IE stylesheet or something similar...*/display:inline; zoom:1; }
	.menu li a:hover, 
	.menu li a:focus, 
	.no-js .menu li a:hover, 
	.no-js .menu li a:focus, 
	.expanded-mobile-menu li a:hover, 
	.expanded-mobile-menu li a:focus { /*border-top:10px solid #f9c602; */border-bottom:3px solid #186d9c; color:#186d9c; /*background-size:100% 90%; */text-decoration:none; }
	.menu li ul.sub-menu, 
	.menu li ul.children, 
	.no-js .menu li ul.sub-menu, 
	.no-js .menu li ul.children, 
	.expanded-mobile-menu li ul.sub-menu, 
	.expanded-mobile-menu li ul.children { display:block; position:absolute; z-index:2; /*top:100%; */left:0; /*white-space:nowrap; */-moz-transition:max-height 400ms ease-out, min-height 500ms ease-in, padding 500ms ease-out, opacity 500ms ease-in; -o-transition:max-height 400ms ease-out, min-height 500ms ease-in, padding 500ms ease-out, opacity 500ms ease-in; -webkit-transition:max-height 400ms ease-out, min-height 500ms ease-in, padding 500ms ease-out, opacity 500ms ease-in; transition:max-height 400ms ease-out, min-height 500ms ease-in, padding 500ms ease-out, opacity 500ms ease-in; background:#2f75d0; text-align:left; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; /* visually hidden */opacity:0; border:0; margin:7px 0; overflow:hidden; padding:0; max-height:1px; min-height:0; }
	.menu li ul.sub-menu li, 
.menu li ul.children li, 
.no-js .menu li ul.sub-menu li, 
.no-js .menu li ul.children li, 
.expanded-mobile-menu li ul.sub-menu li, 
.expanded-mobile-menu li ul.children li { display:block; padding:0 0 0 0; }
	.menu li ul.sub-menu li a, 
.menu li ul.children li a, 
.no-js .menu li ul.sub-menu li a, 
.no-js .menu li ul.children li a, 
.expanded-mobile-menu li ul.sub-menu li a, 
.expanded-mobile-menu li ul.children li a { padding:0 10px; display:block; /*line-height: 1.5; */margin:0; text-align:left; background:transparent; color:#fff; font-size:20px; font-size:1.2rem; }
	.navbar-default ul li:hover > a { color:#186d9c; background-size:100% 100%; text-decoration:none; }
	.menu li ul.sub-menu li a:hover, 
.menu li ul.sub-menu li a:focus, 
.menu li ul.children li a:hover, 
.menu li ul.children li a:focus, 
.no-js .menu li ul.sub-menu li a:hover, 
.no-js .menu li ul.sub-menu li a:focus, 
.no-js .menu li ul.children li a:hover, 
.no-js .menu li ul.children li a:focus, 
.expanded-mobile-menu li ul.sub-menu li a:hover, 
.expanded-mobile-menu li ul.sub-menu li a:focus, 
.expanded-mobile-menu li ul.children li a:hover, 
.expanded-mobile-menu li ul.children li a:focus { color:#186d9c; background-size:100% 90%; text-decoration:none; }
	.menu li ul.sub-menu li:last-child a, 
.menu li ul.children li:last-child a, 
.no-js .menu li ul.sub-menu li:last-child a, 
.no-js .menu li ul.children li:last-child a, 
.expanded-mobile-menu li ul.sub-menu li:last-child a, 
.expanded-mobile-menu li ul.children li:last-child a { border-bottom:0; }
	.menu li:hover ul, 
	.menu li.focused ul, 
	.no-js .menu li:hover ul, 
	.no-js .menu li.focused ul, 
	.expanded-mobile-menu li:hover ul, 
	.expanded-mobile-menu li.focused ul { -moz-transition: max-height 800ms ease-in, min-height 500ms ease-out, padding 500ms ease-out, opacity 800ms ease-out; -o-transition: max-height 800ms ease-in, min-height 500ms ease-out, padding 500ms ease-out, opacity 800ms ease-out; -webkit-transition: max-height 800ms ease-in, min-height 500ms ease-out, padding 500ms ease-out, opacity 800ms ease-out; transition: max-height 800ms ease-in, min-height 500ms ease-out, padding 500ms ease-out, opacity 800ms ease-out; /* again using min/max heights to deal with unknown length of lists */min-height: 8em; max-height: 100em; padding: 0; opacity: 1; }
	.menu li:hover ul ul, 
	.menu li.focused ul ul, 
	.no-js .menu li:hover ul ul, 
	.no-js .menu li.focused ul ul, 
	.expanded-mobile-menu li:hover ul ul, 
	.expanded-mobile-menu li.focused ul ul { min-height:0; padding:0; }
	.menu li:hover > a, 
	.no-js .menu li:hover > a, 
	.expanded-mobile-menu li:hover > a { color:#186d9c; background-size:100% 90%; text-decoration:none; }
}


/*------------------------------------------------
#
# content
#
--------------------------------------------------
#content { background:#f5f5f5; padding:60px 0 60px 0; }
#content h1, 
#content h2, 
#content h3, 
#content h4, 
#content h5, 
#content h6 { text-align:center; }
#content h4 { text-transform:uppercase; margin:0 !important; font-size:15px; font-size:1.0rem; }
.content { padding:60px 0 60px 0; }
.content section { background:#fff; color:#000; padding:0 0 10px 0; margin:0 0 20px 0; }
.content section h1 { background:#326fb4; padding:20px; color:#fff; margin-bottom:40px; font-size:28px; font-size:1.9rem; text-align:center; }
.content section p { margin:10px 20px; }*/


/*------------------------------------------------
#
# about
#
--------------------------------------------------*/
#content { background:#fff; padding:60px 0; }
/* #content h1 { text-align:center;} */
/* #content h2 { text-align:left; margin:40px 0 20px 0; font-weight:400; }
#content h2 strong { font-weight:400; }
#content h3 { font-size:1.4rem; font-weight:600; }
#content h3 strong { font-weight:600; }
#content h3, 
#content h5, 
#content h6 { text-align:left; margin:40px 0 20px 0; }
#content h4 { margin:40px 0 20px 0 !important; font-size:1.3rem; font-weight:700; } */


/*------------------------------------------------
#
# oro rss
#
--------------------------------------------------*/
.oro-rss { margin:10px; }
.oro-rss-items { list-style:none; }
.oro-rss-item { font-size:16px; font-size:1.2rem; border:none !important; }

/*------------------------------------------------
#
# news
#
--------------------------------------------------*/
#news { background:#fff; padding:60px 0 60px 0; }
#news h1, 
#news h2, 
#news h3, 
#news h4, 
#news h5, 
#news h6 { text-align:center; }
#news h4 { text-transform:uppercase; margin:0 !important; font-size:15px; font-size:1.0rem; }
#news .card { margin-top:20px; border: 2px solid #B0ADCD; border-radius: 0px; }
#news .card h3, 
#news .card h4 { text-transform:none; text-align:left; margin: 10px 0 !important; font-size:16px; }
#news .card .mask-img img { width:100%; height:auto; margin:0; padding:0;  }
#news .card .post-meta { margin:0 10px 10px 10px !important; font-size:15px; font-size:1.0rem; }
#news .card .post-meta .timestamp { background:#fff; position:absolute; top:0px; right:0px; padding:10px; }
#news .author {display:none;}

/*------------------------------------------------
#
# events
#
--------------------------------------------------*/
#events { background:#fff; padding:60px 0 60px 0; }
#events h2 { text-align:left; margin:40px 10px 20px 10px; font-weight:700; }
#events h2 strong { font-weight:700; }
#events h3 { font-size:1.4rem; font-weight:700; }
#events h3 strong { font-weight:700; }
#events h3, 
#events h5, 
#events h6 { text-align:left; margin:40px 10px 20px 10px; }
#events h4 { margin:40px 10px 20px 10px !important; font-size:1.3rem; font-weight:700; }
.events-container { margin-top:40px; }
.event-card { border:1px solid #B0ADCD; border-top-right-radius: 100px; background:#fff; overflow:hidden; margin-bottom: 20px; }
.event-card h2 { margin:0 0 10px 0 !important; }
.event-card__media { overflow:hidden; margin-bottom: 0; }
.event-card__media img { width:100%; height:auto; object-fit:cover; object-position:center; display:block; }
.event-card__title { font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: 700; }
.event-card__meta{color:#24285c;}

.event-hero__media img { border-top-right-radius: 100px; border-bottom-right-radius: 12px; height: auto !important; }

.event-card.is-past { opacity: .85; }
.event-card.is-past .event-card__media img { filter: grayscale(100%); }
.event-card.is-past .event-card__title,
.event-card.is-past .event-card__meta,
.event-card.is-past .event-card__excerpt { color: #000; }
.event-card .disabled-look { cursor: default; pointer-events: none; opacity: .75; }
.event-card__footer{margin-top:20px}

/*------------------------------------------------
#
# team
#
--------------------------------------------------*/
#team { background:#fff; padding:60px 0 60px 0; }
#team h1, 
#team h2, 
#team h3, 
#team h4, 
#team h5, 
#team h6 { text-align:center; }
#team h4 { text-transform:uppercase; margin:0 !important; font-size:15px; font-size:1.0rem; }
#team .card .mask-img { padding:5px; }
#team .card img { width:100%; height:auto; margin:0; padding:0; border-radius:var(--bs-card-border-radius); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.card-social { background:#f5f5f5; padding-left:15px; height:50px !important; }
.card-social a { margin-right:10px; }

.card { border:none; }
.shadow-sm { box-shadow: 0px 0px 10px -3px rgba(79,83,85,0.5) !important; border-radius:var(--bs-card-border-radius); }


/*------------------------------------------------
#
# outputs
#
--------------------------------------------------*/
#outputs { background:#f5f5f5; padding:60px 0 60px 0; }
#outputs h1, 
#outputs h2, 
#outputs h3, 
#outputs h4, 
#outputs h5, 
#outputs h6 { text-align:center; }
#outputs h4 { text-transform:uppercase; margin:0 !important; font-size:15px; font-size:1.0rem; }


/*------------------------------------------------
#
# contact
#
--------------------------------------------------*/
#contact { padding:0; }
#contact h2 { font-size:20px; text-transform:uppercase; font-weight:700; text-align:center; }
#contact a { border:none; }
#contact form { margin:0 auto; }
#contact ::-webkit-input-placeholder { color:#e6e6e6; }
#contact :-moz-placeholder { /* Firefox 18- */color:#e6e6e6; }
#contact ::-moz-placeholder { /* Firefox 19+ */color:#e6e6e6; }
#contact :-ms-input-placeholder { color:#e6e6e6; }
#contact label { display:inline-block; background:#fff; padding:5px; margin:20px 6px 0 6px; color:#fff; font-size:14px; font-size:0.9rem; }
#contact input[type=text], 
#contact input[type=email], 
#contact textarea { display:block; background:#fff; color:#fff; border:1px solid #4f5353; margin:0 auto 0 auto; width:30%; }
#contact input:focus, 
#contact textarea:focus { /*outline:none; */background:#e6e6e6; }
#contact input, 
#contact textarea { border-radius:0; }
#contact h3.sent { margin:0 0 30px 0; text-indent:0; text-transform:uppercase; font-weight:700; color:#000; font-size:16px; font-size:1.0rem; }
.alert { background:#fff; color:#811519; border-radius:0; font-size:16px; font-size:1.0rem; }
.g-recaptcha { margin:20px 5px 20px 5px; }


/*------------------------------------------------
#
# sidebar
#
--------------------------------------------------*/
/* #sidebar .wp-post-image { max-width:100%;height:auto;margin:0px 10px 10px 10px;float:none; } */
/* #sidebar h3 { margin:40px 10px 20px 10px; } */
/* #sidebar p { margin:10px; } */

#sidebar .latest-news-events-widget { margin-bottom: 50px; }
#sidebar .latest-news-events-widget article { border: 2px solid #B0ADCD; padding-bottom: 10px; }
#sidebar .latest-news-events-widget article:hover { border: 2px solid #ebebf2; }
#sidebar .latest-news-events-widget article a img { margin: 0 !important; padding: 0 !important; float: none !important; }
#sidebar .latest-news-events-widget article h3 { margin: 10px 30px 20px 30px !important; padding: 0 !important; }
#sidebar .latest-news-events-widget article h3 a { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; }
/* #sidebar .latest-news-events-widget article h3::after { content:' → ' attr(href); color: #276b61; } */
#sidebar .latest-news-events-widget article p { margin: 10px 30px !important; }

#sidebar .lcn-next-event-widget article { border: 2px solid #B0ADCD; border-top-right-radius: 100px; overflow: hidden; }
#sidebar .lcn-next-event-widget article a img { margin: 0 !important; padding: 0 !important; float: none !important; }
#sidebar .lcn-next-event-widget article h3 { margin: 10px 30px 20px 30px !important; padding: 0 !important; }
#sidebar .lcn-next-event-widget article h3 a { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; }
#sidebar .lcn-next-event-widget article p { margin: 10px 30px !important; }
#sidebar .lcn-next-event-widget article .btn-primary { background: #5AC2B3 !important; border-radius: 9999px; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; color: #24285C; border: none !important; padding: 15px 25px; text-transform: none; margin: 10px 30px !important; }
#sidebar .lcn-next-event-widget article .btn-primary:visited { background: #7bcec2 !important; color: #12142e; text-decoration: underline; }
#sidebar .lcn-next-event-widget article .btn-primary:hover { background: #bde7e1 !important; color: #191c40; text-decoration: underline; }
#sidebar .lcn-next-event-widget article .btn-primary:focus { background: #fdf289 !important; color: #12142e; text-decoration: underline; border: 1px solid #000 !important; }
#sidebar .lcn-next-event-widget article .btn-primary:active { background: #7bcec2 !important; color: #12142e; text-decoration: underline; }
#sidebar .lcn-next-event-widget article .btn-primary:disabled { background: #cccccc !important; color: #24285C; }


/*------------------------------------------------
#
# forms
#
--------------------------------------------------*/
form p { display:inline; padding:3px; margin:0 0 20px 0; }
.tab-group { list-style:none; padding:0; margin:0 0 40px 0; width:50%; }
.tab-group:after { content:""; display:table; clear:both; }
.tab-group li:first-child a { border-bottom-left-radius:15px; border-top-left-radius:15px; border-top-right-radius:0; border-bottom-right-radius:0; }
.tab-group li a { display:block; text-decoration:none; padding:15px; background:rgba(242, 231, 75, 0.5); color:#000; font-size:20px; font-weight:bold; float:left; width:50%; text-align:center; cursor:pointer; transition:.5s ease; border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:0; border-top-left-radius:0; }
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	.tab-group li a { transition:0s ease; }
}
.tab-group li a:hover { background:#f2e74b; color:#000; }
.tab-group .active a { background:#f2e74b; color:#000; }
.tab-content > div:last-child { display:none; }
form ::-webkit-input-placeholder { color:#bbb; }
form :-moz-placeholder { /* Firefox 18- */color:#bbb; }
form ::-moz-placeholder { /* Firefox 19+ */color:#bbb; }
form :-ms-input-placeholder { color:#bbb; }

/* h1, h2 { font-weight:300; margin:0 10px 10px 10px; } */
/*label { position:absolute; -webkit-transform:translateY(6px); transform:translateY(6px); left:13px; color:rgba(255, 255, 255, 0.5); transition:all 0.25s ease; -webkit-backface-visibility:hidden; pointer-events:none; font-size:22px; }*/
section.register label { display:inline-block; background:#000; padding:5px; margin:20px 5px 0 5px; color:#fff; font-size:14px; font-size:0.9rem; }
section.register label.first { margin:20px 7px 0 7px; }
label span { margin:2px; color:#000 !important; }
/*label.active { -webkit-transform:translateY(50px); transform:translateY(50px); left:2px; font-size:14px; }
label.active .req { opacity:0; }*/
label.highlight { background:#000; color:#f2e74b; }

input[type=text] { width:98% !important; }
input, textarea { font-size:18px; display:block; /*width:98% !important; height:100%; */padding:5px; margin:0 5px; background:#fff; background-image:none; border:1px solid #2c6d9b; color:#fff; transition:border-color .25s ease, box-shadow .25s ease; }
@media (prefers-reduced-motion) { 
	/* styles to apply if a user's device settings are set to reduced motion */
	input, textarea { transition:border-color 0s ease, box-shadow 0s ease; }
}
input:focus, textarea:focus { /*outline:none; */border-color:#f2e74b; }
input.search-field { display:inline-block; color:#2c6d9b; }
input.search-submit { background:#2c6d9b; color:#fff; display:inline-block; }
textarea { border:2px solid #000; resize:vertical; }
.field-wrap { position:relative; margin-bottom:40px; }
.top-row:after { content:""; display:table; clear:both; }
.top-row > div { float:left; width:48%; margin-right:4%; }
.top-row > div:last-child { margin:0; }
.button-block { display:block; width:100%; }
.forgot { margin-top:-20px; text-align:right; }

.topics { background:#b0b0b0; padding:30px 10px 20px 10px; border-radius:15px; border-top-left-radius:0; margin:0 10px 0 10px; }
label.suggested { background:#b0b0b0; color:#000; }
.topics-selected { background:#000; min-height:80px; padding:30px 10px 20px 10px; border-top-right-radius:15px; margin:0 10px 0 10px; }
input#missing { border-bottom-left-radius:15px; border-bottom-right-radius:15px; border-top-right-radius:0; border-top:2px solid #000; }
input#missing:focus { background:#000; border-top:2px solid #f2e74b; }
.topics .button, 
.topics-selected .button { display:inline-block; background:#fff; font-size:16px !important; font-size:1.0rem !important; text-transform:capitalize; padding:8px 8px 8px 12px; cursor:move; margin-bottom:10px; }
.topics a, 
.topics-selected a { background-image:none; }
.button.selected { background:#f5f2c4; }
.fa-plus-circle { color:#6AA823 !important; }
.fa-minus-circle { color:#a82346 !important; }

form button { background:#db5776; color:#fff; border:0; font-size:16px; font-size:1.2rem; margin-top:20px; margin-right:8px; float:right; }
form button:hover { background:#9c3e54; }

#content ul.topics, 
#content ul.topics-selected { margin-left:10px; }


/*------------------------------------------------
#
# tables
#
--------------------------------------------------*/
table { width:100%; }
/* table caption { } */
table tr { background-color:#fff; border:1px solid #ddd; padding:10px; }
table tr:nth-child(odd) td { background:#f2f2f2; }
table th { background:#0e56a7; color:#fff; padding:20px 10px; font-weight:bold; }
table td { padding:10px; background:#fff; }

.wp-block-table thead { border-bottom:none; }
.wp-block-table tr { background-color:#fff; border:1px solid #ddd !important; padding:10px; }
.wp-block-table tr:nth-child(odd) td { background:#f2f2f2; }
.wp-block-table th { background:#0e56a7; color:#fff; padding:20px 10px; font-weight:bold; border:none !important; }
.wp-block-table td { padding:10px; background:#fff; border:none !important; }

.time { width:130px; }
.break { background:#e6e6e6 !important; }
.alternative { background:#0e56a7 !important; color:#fff !important; }

@media screen and (max-width: 600px) { 
	table { border:0; }
	/* table caption { } */
	table thead { border: none; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
	table tr { border-bottom:3px solid #ddd; display:block; margin-bottom:10px; }
	table td { border-bottom:1px solid #ddd; display:block; text-align:right; }
	table td::before { /*aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */ content:attr(data-label); float:left; font-weight:bold; text-transform:uppercase; }
	table td:last-child { border-bottom:0; }
}


/*------------------------------------------------
#
# footer
#
--------------------------------------------------*/
.stem-footer { background:#fff; padding:80px 0 80px 0; margin:0; }
.stem-footer i { font-size:38px; font-size:2.4rem; margin-right:15px; }
.stem-footer img { height:72px; margin-left:20px; }


/*------------------------------------------------
#
# funding
#
--------------------------------------------------*/
.funding { padding:20px; margin:0; }
.funding img { width:100%; height:auto; }


/*------------------------------------------------
#
# Patterns - need to move later
#
--------------------------------------------------*/
/* .box--info { box-shadow: 0px 4px 4px 4px rgba(0,0,0,0.1); background: white !important; border: 1px solid #B0ADCD; border-top-right-radius: 20px; border-left: 5px solid #5AC2B3; } */





/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
	/*------------------------------------------------
	#
	# body
	#
	--------------------------------------------------*/
    html, body { background-color:#fff; width:100vw; overflow-x:hidden !important; }
	.desktop { display:none; }
	.mobile { display:block; }
	.phone { display:block; }
	.ipadp { display:none; }
	
	a.button { clear:both; display:block; background:#fff; color:#186d9c; padding:5px 10px; margin:20px 10px 0 0; text-align:center; border:1px solid #186d9c; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; border-radius:0.2rem; font-size:15px; font-size:1.0rem; text-transform:uppercase; }
	a.button:hover { background:#186d9c; color:#fff; }
	
	@media (prefers-reduced-motion) { 
		/* styles to apply if a user's device settings are set to reduced motion */
		a.button { -webkit-transition:all 0s; -moz-transition:all 0s; transition:all 0s; }
	}
	/*------------------------------------------------
	#
	# navigation
	#
	--------------------------------------------------*/
	body #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.scotland #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.wales #ou-head #ou-header:not(.ie8) a[class*="ou-logo"] { margin:2px 9px !important; height:34px !important; }
	
	/* .nav { padding:0; text-align:left; }
    .navbar-default { height:61px}
    .menu li a { display:block; padding:15px 0 15px 0 !important; background-color:transparent; text-decoration:none; text-align:center; color:#24285C; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; background-image:none; font-size:18px; font-size:1.8rem; }
    .menu li a:hover, 
.menu li a:focus, 
.menu li.current-menu-item a { color:#186d9c !important; border-bottom:3px solid #186d9c; }
	ul.sidebar-nav button.hamburger { margin-right:5px !important; }
	.nav .menu-toggle { background-color:transparent !important; margin:-65px 0px 0 auto; }
	.menu { margin:-11px -12px 5px auto; width:100%; }
	.menu li { padding:0; margin:0; width:100%; }
	.menu li a { width:100%; padding:10px 20px !important; font-size:18px; font-size:1.6rem; }	 */
	/*------------------------------------------------
	#
	# header
	#
	--------------------------------------------------*/	
	#header .welcometitle { position:relative; margin:20px 0 3px 20px; }
	#header .sitetitle h1 { max-width:600px; font-size:30px; font-size:1.9rem; font-weight:700; margin-left:10px; }
	#header .sitetitle h2 { font-size:30px; font-size:1.1rem; line-height:1.82; }
	#musiclab-banner { background: url("../images/banners/music-computing-labs-banner-mobile.png") no-repeat center; height:302px; width:100vw; }
	#musiclab-banner-short { background: url("../images/banners/music-computing-labs-banner-mobile.png") bottom no-repeat; height:142px; width:100vw; }
	/*------------------------------------------------
	#
	# page general
	#
	--------------------------------------------------*/
	h1, h2, h3 { font-weight:700; }
	h1 { font-size:2.6rem; }
	.wp-block-image .alignright { float:none !important; width:95% !important; display:block !important; margin:0 10px !important; }
	.wp-block-image img { width:100% !important; max-width:100%; height:auto; margin:0 0 20px 0px; }
	/*------------------------------------------------
	#
	# team
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# social
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# footer
	#
	--------------------------------------------------*/
    footer .footer-meta { margin-top:60px; }
	.kmifooter h3 { margin-top:20px; }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	/*------------------------------------------------
	#
	# body
	#
	--------------------------------------------------*/
    body { background-color:#fff; }
	.desktop { display:none; }
	.mobile { display:block; }
	.ipadp { display:block; }
	.phone { display:none; }
	/*------------------------------------------------
	#
	# navigation
	#
	--------------------------------------------------*/
	body #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.scotland #ou-head #ou-header:not(.ie8) a[class*="ou-logo"], body.wales #ou-head #ou-header:not(.ie8) a[class*="ou-logo"] { margin:2px 9px !important; height:34px !important; }
	
	/* .nav { padding:0; text-align:left; }
    .navbar-default { height:61px}
    .menu li a { display:block; padding:15px 0 15px 0 !important; background-color:transparent; text-decoration:none; text-align:center; color:#24285C; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; background-image:none; font-size:18px; font-size:1.8rem; }
    .menu li a:hover, 
.menu li a:focus, 
.menu li.current-menu-item a { color:#186d9c !important; border-bottom:3px solid #186d9c; }
	ul.sidebar-nav button.hamburger { margin-right:5px !important; }
	.nav .menu-toggle { background-color:transparent !important; margin:-48px 0px 0 auto; }
	.menu { margin:5px -12px 5px auto; width:100%; }
	.menu li { padding:0; margin:0; width:100%; }
	.menu li a { width:100%; padding:10px 20px !important; } */
	/*------------------------------------------------
	#
	# reports
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# news
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# team
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# social
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# footer
	#
	--------------------------------------------------*/
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	/*------------------------------------------------
	#
	# body
	#
	--------------------------------------------------*/
    body { background-color:#fff; }
	.phone,.ipadp,.mobile,.desktop,.ipadl { display:block; }
	/*------------------------------------------------
	#
	# navigation
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# reports
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# news
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# team
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# social
	#
	--------------------------------------------------*/
	/*------------------------------------------------
	#
	# footer
	#
	--------------------------------------------------*/
}