html, body, body * { box-sizing: border-box; }

html { min-width: 360px !important; }
body, html { background-color: #dcdcdc; color:#111; width: 100%; padding:0 0 0 0; margin: 0 0 0 0; font-family: 'Lato', sans-serif; }

h1, h2, h3, h4, h5 { font-family: 'PT Sans', sans-serif;  font-weight: 300; }

h1 { font-size: 1.175em; color:#666; line-height: 1; text-transform: uppercase; }
h2 { font-size: 1.325em; color:#333; line-height: 1.1; letter-spacing: 1px; }
h3 { font-size: 1.25em; color:#222; margin-top:0; margin-bottom: 0em; }
h4 { font-size: 1.17em; color:#111; }
h5 { font-size: 1.125em; }

::selection {background-color: green ; color:#000;}

a { outline:none; }

.mainbody { background-color: #F0F0F0; }
.mainbody a { color: #151B54; }
.mainbody a:visited { color: #36013F; opacity:0.25 !important; }

p, a { font-weight: 300; }
.mainbody ul { font-weight: 300; line-height: 1.25; margin-top: 0.75em; }

.mainbody p a { color: #111 !important; }

p { line-height: 1.4; margin-top: 0.5em; }

span { font-size: 1em; }

header#header-with-top-navigation { float:left; clear:both; box-sizing: border-box; width:100%; padding:2vw 3vw 2vw 3vw; height:8vw; position:relative; /* overflow:hidden; */
 background-color: #ddd; z-index:999; }

/* uncomment for overlay header - absolute positioning is the key here
#homepage header#header-with-top-navigation { position:absolute; background: linear-gradient(176deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));  } */

header img.logo { float:left; height:4vw; }
header img.logo:hover { background:none; }

header nav { width:auto;float:right; }
header nav ul li { font-weight: 300; }
header nav a { font-weight: 400; }
header nav ul { font-size:1em;text-align:right;margin:0; padding:0; }
header nav ul li { display:inline;margin:0 0 0 0.6em;text-align:right; }
header nav ul:first-child { padding-left:0; margin-left:0; }
header nav ul li:first-of-type { margin-left:0; }
header nav ul li a { text-decoration:none;color:#111; }
header nav ul li a:hover { background-color:transparent;text-decoration:underline; }

#homepage header nav ul li a.homepage-nav-item { text-decoration:none;color: green !important; }
#collections-page header nav ul li a.work-nav-item { text-decoration:none;color: green !important; }
#a-collection-page header nav ul li a.work-nav-item { text-decoration:none;color: green !important; }
#about-page header nav ul li a.about-nav-item { text-decoration:none;color: green !important; }
#links-page header nav ul li a.contact-nav-item { text-decoration:none;color: green !important; }
#concrete-colours-page header nav ul li a.colours-nav-item { text-decoration:none;color: green !important; }
#concrete-stamps-page header nav ul li a.stamps-nav-item { text-decoration:none;color: green !important; }

header nav ul li.icon { display: none !important; }
header nav ul li.icon { margin-left:0; }
header nav ul li.icon a { padding:0 0; margin:0 0 0 0.7em; }
header nav ul li.icon a img { height:1.75em; width:auto; vertical-align: middle; }

header div.slogan { float:right; font-weight: 400; font-style: italic; font-size: 1em; line-height: 1; }
header div.slogan p { color: #000 !important; font-weight: 400; opacity: 0.5; line-height: 1.75; padding: 0 0 0 0; margin: 0 0 0 0; text-shadow: 0 0 0.25em #444; letter-spacing: 0.5pt; }

header nav ul li.phone-li { font-size:1.25em; line-height: 2; margin:0; padding: 0; color:rgb(0,128,64); font-weight: 400; }
header nav ul li.phone-li a { color:rgb(0,128,64); }

	br.mobile-only { display: none; }
.mobile-only { display:none; }
.desktop-only .rsSlideTitle { font-size: small; }

.mainbody {  width: 100%; position:relative; float: left; padding: 1vw 3vw 1vw 3vw; }
.two-col { float: left ; clear:both; margin-bottom:1em; column-count: 3; column-fill: balance; column-gap: 2em; }
#homepage .two-col { column-count: 2; }

.two-col { color:#111 !important; text-shadow: 0 0 0.25px #444; }

.two-col div { float: left; clear: both; }
.two-col h2:first-of-type { margin-top:0; padding-top: 0; }
.two-col img { margin-bottom:1em; max-width:100%; float:left; }
.two-col a { text-decoration:none; border-bottom: 1px solid #888; }

.gallery-thumb-overview { column-count: 3; font-size:0.8em; line-height: 1; }
.gallery-thumb-overview img { width:100%; height:auto; }
.gallery-thumb-overview div { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
		page-break-inside: avoid; /* Firefox */
			break-inside: avoid; /* IE 10+ */
		}

.gallery-thumb-overview div p { margin-top:0.25em; line-height: 1; color:#bbb; }

.gallery-thumb a { font-weight: 400; color:#444; text-decoration-style: solid; text-decoration-color: #999;}
.gallery-thumb a:hover { color:#111; text-decoration-color: #111; }
.gallery-thumb a:hover img { opacity:0.9; background-color:#111 !important; }

.gallery-thumb { position: relative; }
.gallery-thumb .gallery-info { position: absolute; top:1em; left: 1em; }
.gallery-thumb .gallery-info p { font-family: 'PT Sans', sans-serif; font-size: 1.75em; font-weight: bold;  padding: 0.25em; background-color: rgba(0,128,64,0.5); color: white !important; text-transform: uppercase;  }
.gallery-thumb .gallery-info p a { text-decoration: none; color: white !important; }

.my-gallery {  }
.my-gallery figure { float:left; width:20%; margin:0 0; padding:0 0.5em 0.5em 0; }
.my-gallery { font-size:0.8em; line-height:1; column-fill: balance }
.my-gallery figure { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
		page-break-inside: avoid; /* Firefox */
			break-inside: avoid; /* IE 10+ */
		}
.my-gallery figure img { width: 100%; }

.my-gallery figcaption { margin-bottom:1em; line-height: 1; color:#222; opacity: 0.8;}
.my-gallery a { color:#000; text-decoration-style: solid !important; }

/* this is for photoswipe default skin - an override */
.pswp__caption__center {
text-align: center; }

footer { background-color: #DCDCDC; color:#222; float:left; width:100%; padding:1vw 3vw 0.75vw 3vw; box-sizing: border-box; font-size: 0.9em; opacity:0.9; }

footer a { color:#000; }

footer .footerleft { float:left; }
footer .footerleft a { text-decoration: none; }

footer .social { float:right;text-align:right; font-size:smaller; }
footer .social ul { list-style-type:none; float:right; text-align:right; }
footer .social ul li {float:right; border:none; clear:both; margin-bottom:0.125em; }
footer .social ul li a { text-decoration: none; border-bottom: 1px #444 dotted; }

footer .web-design-by {font-size:0.8em;text-decoration:none;}

/* media queries --------------------------------------------- */

@media only screen and (min-width:90em) {body {font-size:1em;}}
@media only screen and (min-width:100em) {body {font-size:1.025em;}}
@media only screen and (min-width:1921px) {body {font-size:1.05em;}}
@media only screen and (min-width:2000px) {body {font-size:1.1em;}}
@media only screen and (min-width:2200px) {body {font-size:1.2em;}}
@media only screen and (min-width:2400px) {body {font-size:1.3em;}}
@media only screen and (min-width:2600px) {body {font-size:1.4em;}}
@media only screen and (min-width:2800px) {body {font-size:1.5em;}}
@media only screen and (min-width:3000px) {body {font-size:1.6em;}}
@media only screen and (min-width:3200px) {body {font-size:1.7em;}}
@media only screen and (min-width:3400px) {body {font-size:1.8em;}}
@media only screen and (min-width:3600px) {body {font-size:1.9em;}}
@media only screen and (min-width:3800px) {body {font-size:2em;}}
@media only screen and (min-width:7500px) {body {font-size:4em;}}

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

	header nav ul li.phone-li { font-size:1.125em; }
}

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

	header#header-with-top-navigation { padding:2.5vw 3vw 1.75vw 3vw; height:11vw; }
	header img.logo { height:7vw; }

	header nav ul .icon { font-size: 0.9em; }
	header nav ul li.phone-li { font-size:1.1em; }

.mainbody { font-size: 0.9em; }

	.two-col { column-count: 2; }
}

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

	header#header-with-top-navigation { position: relative !important; padding:3vw 3vw 2.25vw 3vw; height:13vw; }
	header img.logo { height:8vw; }

	header nav ul li { line-height: 1.4; font-size: 1.0em;}
	header nav ul .icon { font-size: 0.9em; }
	header nav ul li.phone-li { font-size:1em; }

.mainbody { font-size: 0.8em; }

	footer {font-size:0.8em;}
	footer .social ul li { margin-bottom:0.3em; }

	.gallery-thumb-overview { column-count: 2; font-size:0.8em; }
	.my-gallery figure { width: 33.3%; }
	.my-gallery figcaption { font-size: 0.9em; }
	.desktop-only { font-size: 0.666em; }

		#homepage .two-col { column-count: 1; }

}

@media screen and (max-width: 800px) and (max-height: 400px ) {
	.gallery-thumb-overview { column-count: 2; font-size:0.8em; }
	.my-gallery { font-size:0.8em; }

		#homepage .two-col { column-count: 1; }

}

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

	header { font-size:0.9em; }
	header#header-with-top-navigation { position: relative; padding:3vw 3vw 3vw 3vw; height:15.75vw; }
	header img.logo { height:9vw; }

	br.mobile-only { display: inline; }
	.mobile-only { display:inline; }
	header nav ul li.icon { line-height:2.25; }
	header nav ul li.phone-li { font-size:0.9em; }

	.desktop-only { display: none; visibility: hidden; }
	.two-col { column-count: 1; }
	.two-col .artist { width: 49%; float: left; }
	.two-col .artist:first-child { padding: 0 2% 0 0; }
	#homepage .two-col { column-count: 1; }

	footer {font-size:0.75em; }}
@media screen and (max-width: 480px) {

	header { font-size:0.85em; }
	header#header-with-top-navigation { position: relative; padding:3vw 3vw 2vw 3vw; height:17.75vw; }
	header img.logo { height:10vw; padding-top:1vw; }

	footer {font-size:0.7em;}
}

@media screen and (max-width: 480px) and (max-height: 400px ) {
	.gallery-thumb-overview { column-count: 2; font-size:0.8em; }
	.my-gallery { font-size:0.8em; }

.gallery-thumb .gallery-info p { font-size: 1.5em; }
}

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

	header { font-size:0.8em; }
	header#header-with-top-navigation { position: relative; padding:3vw 3vw 3vw 3vw; height:19vw; }
	header img.logo { height:11vw;  padding-top: 0.75vw;}

	footer {font-size:0.59em; }

.gallery-thumb .gallery-info p { font-size: 1.375em; }
}