@charset "utf-8";
/* Neil McIvor Artwork 2023 */
/* neilmcivor.co.uk */


/* colour 1 = indigo #2f4670 rgba(47,70,112,1) */

* {box-sizing: border-box;}
/*------------------------------| TYPOGRAPHY |------------------------------*/

html {font-family: 'Open Sans', sans-serif; color: #3A3C3E;}
h1, h2, h3, h4, h5 {font-family: 'Noto Serif', serif; color: rgba(47,70,112,1);}
p {font-size: 1em; color: #3A3C3E!important; background-color: /*#EDEDED*/#F4F4F4; padding: 1em;}
a {color: rgba(47,70,112,1)!important; text-decoration: none!important;}
a:hover, a:focus {text-decoration: underline!important;}

#page-content h1, #page-content h2, #page-content h3 {/*background-color: #fff;*/ text-align: center;}
#page-content h1, #page-content h2 {text-shadow: 0px 0px 2px rgba(255,255,255,0.1); mix-blend-mode: hard-light;}
hr {}
#page-content ul {background-color: #F4F4F4; padding: 1em 1em 1em 2em;}
#page-content li {}

#site-title h1, #site-title p, #site-description {font-family: 'Noto Serif', serif; font-size: 1.125em!important; font-weight: 600; line-height: 1.5; margin: 0; color: rgba(47,70,112,1)!important;}

#site-title p {padding: 0px; background-color: transparent;}

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;}


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


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

nav ul {width: 100%; list-style: none; margin: 0; padding: 0;}
nav li {padding: 0.5%;}
nav a {display: block;}
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;}
#desktop-navigation a {text-decoration: none!important; font-size: 1.4em; padding: 0.5em;}
#desktop-navigation li {margin: 0 1%; border: solid 1px #fff;}
#desktop-navigation li.current-menu-item {background-color: rgba(255,255,255,0.5);}

#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 {margin-bottom: 1.4em; font-size: 1.23em;}
#global-navigation ul {background-color: transparent;}
#global-navigation li {display: inline-block; width: 30.33%; margin: 0 1%; border: solid 1px #fff; text-align: center;}
#global-navigation li.current-menu-item {background-color: rgba(255,255,255,0.5);}

#second-level-pages {background-color: rgba(0,0,0,0.8); display: none;}
#second-level-pages li {float: left; text-align: center;}
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 {}

#scrollToTop {position: relative; width: 100%; margin-bottom: 1.4em; text-align: center;}
#scrollToTop img {cursor: pointer;}

#view-artwork {width: 25%; margin: 1.4em auto; padding: 0.3em 0.7em; background-color: #3B4657; border: solid 2px rgba(255,255,255,0.5); border-radius: 50px;}
#view-artwork h4 a {color: #fff!important;}

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



body {background-color: #EDEDED!important; background-image: url("../assets/img/grid.png"); background-attachment: fixed;}
header {position: relative; width: 100%; height: auto; padding: 0.5em 0; /*background-color: rgba(0,0,0,0.5);*/ }
footer {width: 100%; height: auto; padding: 2em 0; /*background-color: rgba(0,0,0,0.5);*/}
section {}
.container-fluid {padding-left: 0!important; padding-right: 0!important; overflow: hidden;}


#site-logo {display: flex; flex-wrap: wrap; justify-content: center; width: 100px;}
#site-logo img {width: 60%; padding: 2.5%; border: solid 1px #fff;}
#site-title {display: inline-block; margin-right: 1.4em; font-size: 1.6em;}
#site-description {display: inline-block; padding-top: 0.6em;}


#columns-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 101vh; z-index: -1; opacity: 1;}

#slideshow-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; opacity: 1;}
#slideshow-outer {position: relative; width: 60%; margin: 0 auto; z-index: -2;}
#hero-banner {position: relative;}
#page-content {padding: 3em 0;  border-top: solid 1px rgba(255,255,255,0.2);}

#archive, #single {background-color: rgba(237,237,237,1); padding: 2em;}


/*feature image*/
#hero-banner #feature-image img {opacity: 0.2;}
#feature-image {position: relative; width: 100%; max-height: 50vh;}
#feature-image img {position: fixed; max-width: 100vw; width: 100%; height: auto; z-index: -2;}
#feature-image-overlay {max-width: 50%; margin: 1.4em auto 0 auto; text-align: center; overflow-x: hidden; /*display: none;*/}


#post-grid {width: 100%; height: auto; padding: 3em 0;}


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

#box-0 {/*mix-blend-mode: darken;*/}

/*------------------------------| 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{display: flex; flex-wrap: wrap; justify-content: center; width: 33.33%; padding: 2.5em; margin-bottom: 1.2em;}
.snippet:hover, .snippet:focus {background-color: rgba(255,255,255,0.5);}
.snippet-thumb {width: 50%; margin: auto; max-height: 150px; overflow: hidden; margin-bottom: 1.2em; text-align: center;}
.snippet-thumb img {}
/*.snippet-thumb img:hover, .snippet-small-thumb img:focus {opacity: 1;}*/
.snippet-title h3 {font-size: 1.6em;}

#art-categories {font-size: 1.765em;}

/* SINGLE POST */

.entry-header {}
.entry-date {padding: 10px; text-align: center;}
.entry-image {padding: 2.3em 0.7em; text-align: center; background-color: rgba(255,255,255,0.9);}
.entry-image img {max-width: 80%; height: auto;}
.entry-content {}

/* ARCHIVE */

.snippet {float: left; padding: 0.75em;}
.snippet-title {width: 100%;}
.snippet-thumb {}
.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; }


}