/*
Theme Name: STEMM
Theme URI: https://www.creative.onl
Description: A responsive theme for STEMM
Version: 1.0
Author: Joe Dawson
Author URI: https://www.creative.onl
*/

/* CSS Document */

body, html {margin:0; padding:0;}
body {font-family: 'Arial', sans-serif; font-weight:400; font-size:16px;}

.container {width:auto; max-width:1024px; display:block; margin:0 auto; padding:0 30px;}


.event h3:empty {display:none;}
#toolbar {background: url(assets/headergradient.jpg); background-size: cover; height:auto; overflow:hidden;}
#uon-logo {height:60px; width:auto; float:left;}
#epsrc-logo {height:40px; width:auto; float:right; padding-top:20px;}
#toolbar h1 {display: block; width: 100%; clear: both; color:#fff; padding:30px 0; margin:0;}

#mainmenu {width: 100%; height: auto; background-color: #efefef; padding:0;}
#mainmenu a:link, #mainmenu a:visited {color:#191a4f; text-decoration:none; font-size:16px;}
#mainmenu a:hover {color:#333;}
#mainmenu li {float:left; padding:10px 20px; transition:all 0.3s;}
#menu-main-menu {display: block; list-style-type: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; height:auto; overflow:hidden; margin:0; padding:0;}
.current_page_item {background-color:#191a4f; transition:all 0.3s;}
.current_page_item a:link, .current_page_item a:visited {color:#fff !important;}
#mainmenu li:hover {background-color:#ddd; transition:all 0.3s;}
.current_page_item:hover {background-color:#999 !important; transition:all 0.3s;}

#mainmenu ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute;
    margin-top: 10px;
	z-index:50;
	transition: all 0.5s ease;
	background-color: #ddd;

	padding-left: 0px;
}
#mainmenu ul ul li { /* this targets all submenu items */
	float: none; 
    width: 100%;
	list-style: none;
	padding-left: 0px;
	background-color: #ddd;
	margin-left: -20px;

}
#mainmenu ul ul li a { /* target all sub menu item links */
    padding: 5px 10px; /* give our sub menu links a nice button feel */
}

#mainmenu ul li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
	transition-duration: 0.5s;
}

#mainmenu ul li:hover {

	background-color: #ccc;
	
}



#header {position:relative;}
#header img {width:100vw; height:auto;}

#intro {width:220px; height:auto; color:#fff; position:absolute; top:80px; text-shadow: 0px 0px 50px rgba(0,0,0,0.4);}
#intro h1 {font-weight:800; font-size:4em; padding:0; margin:0; line-height:90%;}

.homebox {background-color:#eeeeee; width:calc(50% - 30px); margin-right:29px; margin-top:20px; float:left; min-height:230px; position:relative;}
.homebox h2 {display:block; text-align:center; font-weight:400; padding:10px !important; color:#fff !important; font-size:20px !important;}
#homebox1 h2 {background-color:#191a4f;}
#homebox2 h2 {background-color:#005496;}
#homebox3 h2 {background-color:#009bbd;}
#homebox4 h2 {background-color:#1b2a6b;}
#homebox5 h2 {background-color:#191a4f;}

.inhomebox {display: table; width: 100%;}
.inhomebox a {}
.homebox p {margin:0; text-align:center; padding:20px; color:#005496 !important; font-size:16px !important; position:relative; top:27px; display:table-cell; vertical-align:middle;}

.homebox a:link, .homebox a:hover, .homebox a:visited {text-decoration:none !important;}
.homebox a:hover p, .homebox:hover {background-color:#ddd !important; transition:all 0.3s;}

.row {height:auto; overflow:hidden;}

.page-template-default #content .container {display:none;}

#content {padding:30px 0; height:auto; overflow:hidden;}

#content h2 {color:#009bbd; font-weight:400; padding:0; margin:0; font-size:1.7em;}
#content p {color:#191a4f;}
#content a:link, #cta a:visited {color:#191a4f; text-decoration:none;}
#content a:hover {color:#005496; text-decoration:underline;}

.third {width: 33.333%; float:left;}
.thirds {width: 66.666%; float:left;}
.half {float:left;}
.half:first-of-type {width:calc(50% - 15px); margin-right:15px;}
.half:last-of-type {width:calc(50% - 15px); margin-left:15px;}

#arrowicon {height:25px; width:25px; padding-right:6px; margin-bottom:-7px;}
.page-template-template-events .overviewphoto {padding-top:76px !important;}
.page-template-template-events h2 {color:#191a4f !important; padding-bottom:20px !important}
.page-template-template-events h3 {color:#005496 !important; font-weight:600; margin-block-start: 0em;}
.page-template-template-events .half a:link, .page-template-template-events .half a:visited {color:#005496 !important; font-weight:600;}
.page-template-template-events p {color:#005496 !important;}

.fulldivider {padding-top:40px; width:100%;}
.page-template-template-resources h2 {color:#191a4f !important;}
.page-template-template-resources .resource h3 {color:#1b2a6b; font-weight:600;}
.page-template-template-resources .resource h4 {color:#1b2a6b; font-weight:600;}
.resource a:link, .resource a:visited {color:#1b2a6b !important;}

.page-template-template-gallery h2 {color:#191a4f !important; }
#stemm-gallery {  margin-top: 40px; }
.eventTextContainer { width: 50%; float: left; }
.eventImagesContainer { width: 50%; float: right; text-align: right; }
.eventImagesContainer ul > li { display: inline-block; } 


.page-template-template-contact h2 {color:#191a4f !important; padding-bottom:40px !important;}
.contact img {height: 25px; width: 25px; padding-right: 6px; margin-bottom:-7px;}
.contact h4 {color: #1b2a6b; margin-block-start: 0; margin-block-end: 0; font-weight:600;}
.contact p {color: #1b2a6b;}
.contact a:link, .contact a:visited {color: #1b2a6b !important; font-weight:600;}
.divider {width:100%; height:5px; padding:20px 0;}

#cta, #cta p {color:#005496 !important;}
#cta p img {width:20px; height:auto; margin-bottom:-5px;}
#cta a:link, #cta a:visited {color:#005496; text-decoration:none;}
#cta a:hover {color:#191a4f; text-decoration:underline;}

.overviewphoto {width:100%; height:auto; padding-bottom:30px; padding-top:20px;}
.half ul {list-style-type: square;}


.half ul {list-style: none; margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 16px;}

.half ul li::before {
  content: "\25A0"; 
  color: #191a4f; 
  display: inline-block;
  width: 1em;
  margin-left: -1em; 
}

.half li {padding-bottom:10px; color:#009bbd;}

#swirl {position: absolute; left: 0; width: 45%; padding-top: 30px; max-width:750px; transition:all 1s;}
#swirl:hover {transform:scale(1.1); transition: all 1s; left:-30px;}

.page-template-template-team h2 {font-weight:400 !important; max-width:700px; color:#191a4f !important; margin:30px 0 20px 0 !important;}
.person img {width:100%; height:auto;}
.person {width:calc(33.333% - 20px); margin-right:30px; padding:15px 0;}
.person:nth-child(3) {margin-right:0;}
.person h3, .person p {font-size:16px; font-weight:400; margin:0; color: #191a4f !important;}
#personblock {width: calc(66.666% - 80px); background-color:#1b2a6b; padding:35px; margin-top:15px;}
#personblock p {color:#fff !important;}

#footer {display:block; width:auto; height: auto; overflow:hidden; padding:30px 0;}
#footer img {height:50px; float:left;}
#strip-first {width:calc(55% - 25px); padding-right:25px;}
#strip-second {width:45%;}

#contactstripe {background: url(assets/headergradient.jpg); background-size: cover; height:auto; overflow:hidden; color:#fff; padding:30px 0; margin-bottom:40px; position:relative; z-index:2;}
#contactstripe h4 {margin:0; padding-bottom:20px; font-weight:400;}
#contactstripe img {height:25px; width:25px; padding-right:6px;}
#contactstripe a:link, #contactstripe a:visited {display:block; padding:10px 0; text-decoration:none; color:#fff;}

@media screen and (max-width: 1023px) {
	
	#mainmenu a:link, #mainmenu a:visited {font-size:12px;}
#mainmenu li {float:left; padding:8px 15px;}
	.homebox {min-height:300px;}
	
}

@media screen and (max-width: 839px) {
	
	#personblock {width: calc(66.666% - 79px);}
}
@media screen and (max-width: 767px) {
	
	.event  {overflow-wrap: break-word;}
}

@media screen and (max-width: 750px) {
	
	#header {overflow:hidden; height:500px;}
	#header img {height:500px; width:auto; margin-left:-200px;}
	#intro {width:220px; height:auto; color:#fff; position:absolute; top:10vw; left:5vw;}
	#intro h1 {font-weight:800; font-size:3em; padding:0; margin:0; line-height:90%;}
	#stemm-logo {height:30px; width:auto; float:left;}
	#epsrc-logo {height:30px; width:auto; float:right;}
	.homebox {width:calc(100% - 20px); float:none; margin-right:0; height:auto; min-height:220px;}
	
}



@media screen and (max-width: 600px) {

	
	#mainmenu li {padding:4px 15px; display:block; width:43%;}
	#header img {margin-left:-300px;}
	#intro {top:20vw; left:10vw;}
	.third, .thirds {width:auto; float:none; padding:30px 0;}
	.half {float:none;}
.half:first-of-type {width:100%; margin-right:0;}
.half:last-of-type {width:100%; margin-left:0;}
	#strip-first, #strip-second {float:none; height:40px; width: auto; max-width:100%;}
	#footer img {}
	
	.homebox {width:100%; float:none; margin-right:0; height:auto; min-height:220px;}
	#swirl {display:none;}
	
	.person, #personblock {width:auto; margin-right:0px; float:none;}
	
	.page-template-template-events #arrowicon {margin-bottom:-7px;}
	.event {margin-left:0;}
	
	
}


@media screen and (max-width: 500px) {

	#mainmenu li {padding:3px 15px; display:block; width:auto; float:none;}
	#header img {margin-left:-500px;}
	#intro {top:auto; bottom:10vw;}
}

@media screen and (max-width: 400px) {
	#header img {margin-left:-500px;}
}


@media screen and (max-width: 350px) {

	#header img {margin-left:-500px;}
	
}