/*
IMPORTS
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:400,700');




/*
CATCH-ALLS/ROOT APPLIED
*/
* {box-sizing: border-box;}
body {
	box-sizing: border-box;
	
    position: relative;
	
    margin: 0;
	margin-top: calc(64px + 4rem);
	
	background: url(../_images/rednoisedark.png);
    font-size: 15px;
}




/*
GENERAL TAG FORMATTING
*/
/*HEADERS*/
h1, h2, h3 {font-family: "Playfair Display", "Times New Roman", Times, serif;}
/*An h1 specific margin to the left is added since the h1 will only be used for the site header.*/
h1 {
    display: none;
    margin: 0;
    margin-left: 2rem;
    padding: 0;
    
    color: white;
    font-size: 5rem;
}
h2 {
    color: white;
    font-size: 1.75rem;
}
/*Header modifications for blocked aesthetic*/
main > h2 {
	margin: 0;
	width: 100%;
	padding: 1rem;
	
	background: url(../_images/rednoiselight.png);
}
main > h2:nth-of-type(even) {text-align: right}
/*Exhibitions page exception, due to the splash screen bit*/
#exhibitions main > h2 {text-align: left}


/*BODY*/
p {
    font-family: "Open Sans", "Arial", sans-serif;
    
    line-height: 1.7
}
.standard p {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}


/*LINKS*/
a {
    color: #00b1f4;
    font-family: "Open Sans", Arial, sans-serif;
    text-decoration: none;
}
a:hover {text-decoration: underline;}
a:visited {color: #B371EA;}




/*
HEAD, BODY, FOOT
*/
/*HEADER AND RELATED CLASSES*/
header {
    position: fixed;
    top: 0;
	z-index: 5;
	
	width: 100%;
}
header * {user-select: none;}
header .headerwrap {
	display: grid;
	grid-template-rows: auto 1fr;
    
	width: 100%;
	max-width: 1600px;
	margin: auto;
	height: 100%;
}
header.menutoggle {height: 100%;}
.logohead {
    display: flex;
    align-items: center;
    justify-content: space-between;
	
	width: 100%;
    padding: 2rem;
    
    background: url(../_images/rednoisedark.png);
}
.logohead img {height: 64px;}
#hamburger {
	width: 64px;
    height: 64px;
	
	background: url(../_images/hamburger.svg);
    background-position: center;
    background-repeat: no-repeat;
}
#hamburger:hover {cursor: pointer;}
#hamburger.menutoggle {background: url(../_images/close.svg);}
nav {display: none;}
nav.menutoggle {display: contents;}
nav ul {
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	
	margin: 0;
	padding: 0;
	
	list-style: none;
}
nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	
	height: 100%;
	background: url(../_images/rednoisedark.png);
	color: white;
	font-family: "Playfair Display", "Times New Roman", Times, serif;
	font-size: 3rem;
	text-decoration: none;
}
.menutoggle nav a {background: url(../_images/rednoisedarktransparent.png);}
nav a:hover {
	background: url(../_images/rednoisemed.png);
    	
	text-decoration: underline;
}
.menutoggle nav a:hover {background: url(../_images/rednoisemedtransparent.png);}
nav a:active {background: url(../_images/rednoiselight.png);}
/*Nav menu links, on page*/
#home .home-pg,
#exhibitions .exhibitions-pg,
.artists .artists-pg,
#news .news-pg,
#about .about-pg {background: url(../_images/rednoiselight.png);}
/*Nav menu links, on page, mobile*/
#home .menutoggle .home-pg,
#exhibitions .menutoggle .exhibitions-pg,
.artists .menutoggle .artists-pg,
#news .menutoggle .news-pg,
#about .menutoggle .about-pg {background: url(../_images/rednoiselighttransparent.png);}
nav a:visited {color: white;}


/*BODY AND RELATED CLASSES*/
.backing {
	background: url(../_images/sitebg.jpg);
	background-repeat: no-repeat;
	background-position: center 100%;
	background-size: cover;
	background-attachment: fixed;
}
main {
	margin: auto;
	max-width: 1600px;
	
	background: white;
}
main > section {
    padding: 1rem;
}
section > *:first-child {margin-top: 0;}
section > *:last-child {margin-bottom: 0;}
section.submissionpolicy {padding-bottom: 0;}
div.splash {
    padding: 1rem;
    
    background: url(../_images/rednoiselight.png);
    
    color: white;
    text-align: center;
}

/*Artists splash*/
.artists div.splash {background: url(../_images/rednoisemed.png)}
.splash > *:first-child {margin-top: 0;}
.splash > *:last-child {margin-bottom: 0;}
div.splash.img {
    width: 100%;
    padding: 0;
    padding-top: 177%;
}

/*Grid material*/
.grid {
	display: flex;
	flex-direction: column;
	
	padding: 0;
}
.grid.quotes {padding: 1rem;}
.grid > * {
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	background: url(../_images/rednoisedark.png);
}
.grid .imgcontent {
	width: 100%;
	height: 0;
	padding-top: 100%;
	
	background: blue;
}
.artists .grid .imgcontent {padding-top: 125%;}
.grid .textcontent {
	margin: 0;
	padding: 1rem;
	
	background: url(../_images/rednoisedark.png);
	
	color: white;
}
.grid .textcontent > *:first-child {margin-top: 0}
.grid .textcontent > *:last-child {margin-bottom: 0}
.grid > * > a {
	display: block;
	width: 100%;
	padding: 1rem;
	
	background: url(../_images/rednoisemed.png);
	
	color: white;
}
.grid > * > a:hover {background: url(../_images/rednoiselight.png);}
.grid > * > a:active {background: url(../_images/rednoisedark.png);}
.endorsement {
    background: url(../_images/endorsementquote.png);
    background-repeat: no-repeat;
    background-position: 1rem 1rem;
    
    font-size: 1.05rem;
}
/*Map iframe and related material*/
iframe {
    border: 0;
    width: 100%;
    height: 600px;
}
.mapgrid section {padding: 1rem;}

/*Actual quote*/
.endorsement > *:first-child {font-style: italic;}
/*Quote source*/
.endorsement > *:last-child {
    text-align: right;
    font-weight: 700;
}

/*Form*/
.formsection {background: url(../_images/rednoisemed.png);}
.formsection > * {
    color: white;
    text-align: center;
}
.formsection ul {
    list-style: none;
    padding-left: 0;
}
.formsection li:first-child {margin-bottom: 1rem;}
.formsection input[type="email"] {
    width: 100%;
    max-width: 200px;
}
.formsection input[type="submit"] {
    border: none;
    padding: 0.5rem;
    
    background: url(../_images/rednoisedark.png);
    
    color: white;
    font-family: "Playfair Display", "Times New Roman", Times, serif;
    font-size: 1.5rem;
}
.formsection input[type="submit"]:hover {
    background: url(../_images/rednoiselight.png);
    
    cursor: pointer;
    
    text-decoration: underline;
}
fieldset {border: 0}


/*FOOTER AND RELATED CLASSES*/
footer {background: url(../_images/rednoisedark.png);}
.footwrap {
	display: flex;
	flex-direction: column;
	margin: auto;
	max-width: 1600px;
}
.socmeccontainer {
	padding: 1rem;
	display: flex;
	justify-content: center;
}
.socmeccontainer * {
	margin: 0;
	height: 40px;
}
.socmeccontainer > *:first-child {margin-right: 1rem}
.fineprint {
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	padding: 1rem;
	padding-top: 0;
	
	color: white;
}
.fineprint > * {margin-top: 0}
.fineprint > *:last-child {margin-bottom: 0}




/*
IMAGES IN USE AS DEFINED IN CSS
Images are defined as such to allow for responsive resizing. Investigating a more semantic way to do this with proper img tags ought to be done.
background-repeat and background-size must be defined in each image individually in order for the effect to be applied. Applying these properties
in a seperate, all encompassing rule does not work. This also ought to be investigated, but finding a way to use the img tag would likely make this
a non-issue.
*/
.img.choiceasmetaphor {
	background: url(../_images/choiceasmetaphor.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center 66%;
}
/*EXHIBITS PG*/
#milkandhoney.imgcontent {
	background: url(../exhibitions/_images/milkandhoney.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
#thepeace.imgcontent {
	background: url(../exhibitions/_images/thepeace.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#harbor.imgcontent {
	background: url(../exhibitions/_images/harbor.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#realpeople.imgcontent {
	background: url(../exhibitions/_images/realpeople.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
/*NEWS PG*/
#mousee.imgcontent {
	background: url(../news/_images/mousee.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#cutsandfilets.imgcontent {
	background: url(../news/_images/cutsandfilets.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100%;
}
#hifructose.imgcontent {
	background: url(../news/_images/hifructose.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#kickboxing.imgcontent {
	background: url(../news/_images/kickboxing.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 63%;
}
#pgp.imgcontent {
	background: url(../news/_images/pgp.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-position: center 80%;
}
#ole.imgcontent {
	background: url(../news/_images/ole.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#busan.imgcontent {
	background: url(../news/_images/busan.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-position: center 100%;
}
#gamec.imgcontent {
	background: url(../news/_images/gamec.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#identity.imgcontent {
	background: url(../news/_images/identity.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#moma.imgcontent {
	background: url(../news/_images/moma.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-position: center 100%;
}
/*ARTISTS*/
#hadley.imgcontent {
	background: url(../artists/hadley/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/*Artist profile*/
#hadley.splash.img {
	background: url(../artists/hadley/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 45%;
}
/*Artist works*/
#hadleywork1.imgcontent{
	background: url(../artists/hadley/_images/hadleywork1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#hadleywork2.imgcontent{
	background: url(../artists/hadley/_images/hadleywork2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#hadleywork3.imgcontent{
	background: url(../artists/hadley/_images/hadleywork3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#aggra.imgcontent{
	background: url(../artists/aggra/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/*Artist profile*/
#aggra.splash.img {
	background: url(../artists/aggra/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 40%;
}
/*Artist works*/
#aggrawork1.imgcontent{
	background: url(../artists/aggra/_images/aggrawork1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#aggrawork2.imgcontent{
	background: url(../artists/aggra/_images/aggrawork2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#aggrawork3.imgcontent{
	background: url(../artists/aggra/_images/aggrawork3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#mastrovick.imgcontent {
	background: url(../artists/mastrovick/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/*Artist profile*/
#mastrovick.splash.img {
	background: url(../artists/mastrovick/_images/portrait.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 45%;
}
/*Artist works*/
#mastrovickwork1.imgcontent{
	background: url(../artists/mastrovick/_images/mastrovickwork1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 25%;
}
#mastrovickwork2.imgcontent{
	background: url(../artists/mastrovick/_images/mastrovickwork2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#mastrovickwork3.imgcontent{
	background: url(../artists/mastrovick/_images/mastrovickwork3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 100%;
}
#archber.imgcontent {
	background: url(../artists/_images/archber.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#booker.imgcontent {
	background: url(../artists/_images/booker.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#bradley.imgcontent {
	background: url(../artists/_images/bradley.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#cate.imgcontent {
	background: url(../artists/_images/cate.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#jing.imgcontent {
	background: url(../artists/_images/jing.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#kites.imgcontent {
	background: url(../artists/_images/kites.jpg);
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/*
MEDIA QUERIES
*/
/*Certain elements (ie. the dropdown menu) only matter if the website is being viewed on a computer and not on mobile.
These will be applied exclusively to computer displays only. The dropdown menu should be visible on mobile regardless of width.*/
@media only screen and (min-width: 800px) and (hover: hover) {
    h1 {display: contents;}
    
    
    
    
    .logohead {display: block;}
    .logohead img {margin-right: 2rem;}
    #hamburger {display: none;}
    nav {
        display: contents;
    }
    nav ul {
        grid-template-columns: auto auto auto auto auto 1fr;
        grid-template-rows: auto;
        background: url(../_images/rednoisedark.png);
    }
    nav a {
        padding: 0.5rem;
        font-size: 1.5rem;
    }
    
    
    body {margin-top: 219px;}
	.grid {
		display: grid;
		grid-gap: 1rem;
		
		padding: 1rem;
	}
	.grid.col2 {
		grid-template-columns: 1fr 1fr;
	}
	.grid.col3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
    grid.quotes {padding: 0;}
    
    .mapgrid {display: flex;}
    .mapgrid section {
        background: url(../_images/rednoisemed.png);
        
        color: white;
    }
}
@media only screen and (min-width: 800px) {
    #homesplash1 {text-align: left;}
    #homesplash3 {text-align: right;}
    div.splash.img {padding-top: 56%;}
	
	
	.footwrap {
		flex-direction: row;
	}
	.socmeccontainer {flex-direction: column;}
	.socmeccontainer > *:first-child {
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.fineprint {
		padding-top: 1rem;
		padding-left: 0;
	}
}


/*WIDESCREEN BREAKPOINT*/
@media only screen and (min-width: 1600px) {
	header {background: url(../_images/rednoisedark.png);}
    #home .splashcontainer {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-areas:
            "a a"
            "b c"
        ;
    }
    #homesplash1 {grid-area: b;}
    #homesplash2 {grid-area: a;}
    #homesplash3 {grid-area: c;}
    div.splash.img {padding-top: 33%;}
	.grid .imgcontent {padding-top: 56%;}
	
	
	.socmeccontainer {
		flex-direction: row;
		align-items: center;
	}
	.socmeccontainer > *:first-child {
		margin-right: 1rem;
		margin-bottom: 0;
	}
}