@charset "utf-8";
/* SHMU base min v1.1 */


/*------------------------------| TYPOGRAPHY |------------------------------*/

html {font-family: 'Open Sans', sans-serif; color: #3A3C3E;}
h1, h2, h3, h4, h5 {font-family: 'Noto Serif', serif;}
p {font-size: 1em; color: #3A3C3E!important;}
a {color: #000; text-decoration: none!important;}
a:hover, a:focus {text-decoration: underline!important;}

hr {}

#site-title h1, #site-title p, #site-description {font-size: 0.875em!important; font-weight: 600; line-height: 1.5; margin: 0; color: #93A6AC!important;}

#desktop-navigation a {text-decoration: none!important; font-size: 1.1em;}
#desktop-navigation li {}
#desktop-navigation li.current-menu-item {border-bottom: solid 2px #000;}
header a {color: #fff;}
footer a {color: #fff;}

button {margin: 0.5em auto!important;}
button, input[type="submit"]  {padding: 0.3em 0.7em; border: none!important; font-size: 1.1em!important; border-radius: 50px!important; background-color: #3A3C3E; color: #fff!important;}

button a {color: #fff!important;}



/*------------------------------| SPECIAL |------------------------------*/

#task {padding: 1em; border: solid 1px rgba(0,0,0,0.1); background-color: #E7E7E7;}
#solution {padding: 1em; /*border: dashed 1px #84BC44;*/ background-color: #fff;}
#code {padding: 1em;}
#aims {padding: 1em; margin-top: 2em; border: solid 1px rgba(0,0,0,0.1); background-color: #E7E7E7;}
#activities {padding: 1em; background-color: #fff;}
#code-example {border: dashed 1px red; border-radius: 10px; padding: 2em; background-color: rgba(255,255,255,0.6);}

#sqa-materials {font-weight: 600;}

.excercise {background-color: rgba(255,255,255,0.4);}
.excercise:hover, .excercise:focus {background-color: rgba(255,255,255,0.6);}

#robot {text-align: center; height: 600px; width: 460px; margin: 0px auto; background-image: url("../assets/img/robot.png"); background-size: contain; background-repeat: no-repeat;}
#robot-display {padding: 70% 37.5% 0px 37.5%;}
#about-me {}
#image-viewer {width: 250px; height: 250px; border: solid 1px #ddd; background-image: url("../assets/img/dooniesfarm-default.jpg"); background-size: contain; background-repeat: no-repeat;}

#polly-parrot {background-image: url("../assets/img/parrot.jpg"); background-size: contain; background-repeat: no-repeat;}

/*------------------------------| NAVIGATION |------------------------------*/


#site-navigation {width: 100%; height: auto;}

nav ul {width: 100%; list-style: none; margin: 0; padding: 0;}
nav li {padding: 0.3em 0.7em;}

ul.sub-menu {position: absolute; width: 100%; height: auto; left: 0; padding: 1em; z-index: 9999; display: none;}
ul.sub-menu li {float: left;}



#desktop-navigation {display: block;}
#desktop-navigation ul li {float: left; text-align: center;}
#desktop-navigation ul li ul li {float: left; text-align: center;}

#mobile-nav-toggle {display: block; width: 100%; cursor: pointer; text-align: right;}

#mobile-navigation {position: relative; display: none; width: 100%; margin-top: 1em;}
#mobile-navigation li {float: none; text-align: center;}
#mobile-navigation ul {display: none; width: 100%; padding-bottom: 2em; z-index: 99;}


#footer-navigation {width: 100%; height: auto; margin-bottom: 2em;}
#footer-navigation ul {position: relative;}
#footer-navigation li {position: relative;}
#footer-navigation li a {font-size: 1em;}
footer nav li ul.sub-menu {position: absolute; top: 0; display: block!important; padding: 0; float: left;}
footer nav li ul.sub-menu li {margin: 0 0 0 0.25em; padding: 0px 0.25em 0px 0.5em; font-weight: 300; border-left: solid 1px #3A3C3E; text-align: center;}
footer nav li ul.sub-menu li:first-child {border-left: none;}

#global-navigation {}

#second-level-pages {background-color: rgba(0,0,0,0.8); padding: 0.6em 0;}
#second-level-pages li {display: flex; align-items: center; justify-content: center; text-align: center; border: solid 1px #fff;}
ul.childpages {list-style: none; width: 80%; margin: 0 10%; padding: 0;}
ul.childpages li {float: left; padding: 0.3em 0.7em;}
ul.childpages li a {display: block; font-size: 1.1em; color: #fff!important;}


svg {}



/*------------------------------| LAYOUT |------------------------------*/



body {background-color: #EDEDED!important;}
header {position: relative; width: 100%; height: auto; padding: 0.5em 0; background-color: #5A6569;}
footer {width: 100%; height: auto; padding: 2em 0; background-color: #5A6569}
#footer-logo {width: 120px; height: auto; margin: 1.4em auto;}
section {}
.container-fluid {padding-left: 0!important; padding-right: 0!important; overflow: hidden;}


#site-logo {display: inline-block; width: 100px; height: auto;}
#site-title {display: inline-block; margin-left: 1.4em; font-size: 1.6em;}
#site-description {display: inline-block; padding-top: 0.6em;}

#hero-banner {position: relative;}
#page-content {padding: 3em 0;  border-top: solid 1px rgba(255,255,255,0.2);}

/*feature image*/
#feature-image {position: relative; width: 100%; max-height: 50vh;}
#feature-image img { width: 100%; height: auto;}
#feature-image-overlay {max-width: 50%; margin: 1.4em auto 0 auto; text-align: center; overflow-x: hidden; /*display: none;*/}

/* search form */
#site-search {float: right; width: 120px; text-align: center; border-radius: 5px; border: solid 0.5px rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.8); cursor: pointer;}
#search-toggle {float: right; text-align: center; width: 18%; margin-right: 15%;}
#search-toggle span {display: inline; width: 30px; height: 30px; border-radius: 3px;}
#search-form-wrap {width: 100%; height: auto; padding: 0.5em 0; background-color: rgba(0,0,0,0.8); display: none; overflow: hidden; z-index: 99;}
#search-form {width: 350px; margin: 0 auto; padding: 0.3em 0}


#site-controls {width: 100%; margin: 0 auto; padding: 0.3em 0;}
#social-media-wrap {float: left; width: 78%; margin-left: 2%;}
#post-grid {width: 100%; height: auto; padding: 3em 0;}
#common-content {text-align: center; padding: 1.5em 0 3em 0;}

#site-copyright, #site-info {text-align: right; font-size: 0.875em;}


/*------------------------------| POSTS |------------------------------*/


#single-post-wrap {padding: 2em 0;}
.single-post-item a {display: block; text-decoration: none!important;}
.single-post-item {margin-left: -30px; margin-bottom: 1em; background-color: rgba(214,217,189,0.3); border: solid 1px #000; opacity: 0;}
.post-title {font-weight: 600;padding: 1em;}
.post-thumbnail {overflow: hidden; padding: 1em;}
.post-thumbnail img {max-width: 100%; height: auto;}
.post-summary {padding: 1em;}
#category-list {text-transform: capitalize; padding: 1em;}
#current-category-title p,  #current-category-title h3 {display: inline;}
#current-category-title h3 {text-transform: capitalize;}

.category-title { font-size: 1.25em;}
.post-count {display: inline-block; float: right; margin-right: 1em;}

.snippet-small {display: block; padding: 2.5em; margin-bottom: 1.2em; background-color: #FDEFCB; /*border: solid 1px rgba(206,179,113,0.8);*/ box-shadow: 2px 4px 8px 0 rgba(46, 61, 73, 0.2);}
.snippet-small:hover, .snippet-small:focus {box-shadow: 1px 2px 4px 0 rgba(46, 61, 73, 0.2); background-color: #fbe39d;}
.snippet-small-thumb {display: flex; flex-wrap: wrap; justify-content: center; max-height: 150px; overflow: hidden; margin-bottom: 1.2em;}
.snippet-small-thumb img {min-width: 140%; height: auto; margin-top: -20%; opacity: 0.85;}
/*.snippet-small-thumb img:hover, .snippet-small-thumb img:focus {opacity: 1;}*/
.snippet-small-title h3 {font-size: 1.6em;}

/* SINGLE POST */

.entry-header {}
.entry-date {padding: 10px; text-align: center;}
.entry-image {padding: 10px; text-align: center;}
.entry-content {}

/* ARCHIVE */

.snippet {float: left; padding: 0.75em;}
.snippet-title {width: 100%;}
.snippet-thumb {float: left; width: 20%;}
.snippet-summary {padding: 0.75em; width: 80%;}


/*------------------------------| CLASSES |------------------------------*/



.container {}
a.in-page-anchor {text-decoration: none!important;}
.entry-title {text-align: center;}

/* CALL TO ACTION */

.cta {display: flex; flex-wrap: wrap; justify-content: center; width: 100%; height: auto;  padding: 1em 1em 2em 1em; opacity: 0;}
.cta button {align-self: flex-end; position: relative; width: 80%;}
.cta a {margin: 1em auto; padding: 0.3em 0.7em; border-radius: 25px; color: #fff!important;}
.cta h4 {width: 100%; color: #fff;}


/* SOCIAL MEDIA */

.social-media {float: left; width: 2.5em; height: auto; margin: 0 5px;  padding: 0 1.5px; background-color: rgba(255,255,255,1); border-radius: 5px;}
.social-media svg {margin-top: 1px;}
.social-media svg:hover, .social-media svg:focus { margin-top: 0;}

.no-link {display: none;}


/* WORDPRESS */

.wp-block-button a {}
.wp-block-columns {margin-top: 1.75em;}
.wp-block-columns .wp-block-image {}

/* GOOGLE MATERIAL ICONS */

.material-icons {margin-right: 10px;}

/* PAGINATION */

.post-navigation {float: left; width: 100%; height: auto; margin-bottom: 1.2em; border-top: solid 1px rgba(0,0,0,0.3);}

.nav-links {}
.nav-previous, .nav-next {float: left; width: 50%;}
.nav-subtitle-left, .nav-subtitle-right {font-weight: 600; margin-right: 0.5em; font-size: 1.2em;}
.nav-next {text-align: right;}
.nav-title-left {}
.nav-title-right {}

.mec-container {background-color: rgba(255,255,255,0.5);}
.mec-container .widget-area, .mec-container #respond {display: none;}

/*------------------------------| BOOTSTRAP BREAKPOINTS |------------------------------*/



/* x-small */
@media only screen and (max-width: 576px) {
    #site-search {width: 120px!important; margin-top: 0!important;}	
}

/* small */
@media only screen and (max-width: 577px) {
	.narrow  {padding: 1em;}
	#feature-image-overlay {max-width: 80%; margin-top: 0; top: 22%;}
	#feature-image-overlay h3 {font-size: 1.1em;}	
}

/* medium */
@media only screen and (max-width: 768px) {
    #footer-navigation li {width: 100%;}
	nav li ul.sub-menu {position: relative;}
	/*#page-content article, #single-post-wrap {width: 96%; padding-left: 2%; padding-right: 2%;}*/
	#footer-navigation li {text-align: center;}
	#common-content .cta {width: 92%; margin: 1em 4%;}
	#accessibility-toggle {margin-left: 1em;}
	#site-search {margin-right: 1em;}
	#font-size-l, #font-size-m, #font-size-s {float: none; }
	#accessibility-controls button {width: 60%;  margin: 0 auto 1.8rem auto; text-align: center;}
	#close-accessibility {float: none; }
	#close-accessibility button {width: 100%;}
	#feature-image-mask-top, #common-content-bottom {margin-top: -5px;}
	#site-copyright, #site-info {text-align: center;}
	#site-info {padding: 0 0.75em;}
	#site-description {padding-top: 0; padding-bottom: 0.7em;}
	.nav-previous, .nav-next {float: left; width: 100%;}
	.nav-next {text-align: left;}

}

/* large */
@media only screen and (max-width: 992px) {

}

/* x-large */
@media only screen and (max-width: 1200px) {
	#site-title, #site-description {width: 100%; text-align: center;}
	#social-media-wrap {width: 100%;}
	.social-media {width: 2em; margin: 0;}
	#site-search {width: 100%; margin-right: 0; margin-top: 0.7em; }


}