@charset "utf-8";
@import url("stylesheet_768px.css");
/* CSS Document */


body {
	background-image: url("images/miscellaneous-images/negative-space-foliage_05_b-w.svg");
	background-size: 40%;
	background-repeat: repeat;
	color: rgba(212,211,211,1.00);
	font-family: "acumin-variable",sans-serif;
  	font-variation-settings: 'wght' 300, 'wdth' 100, 'slnt' 0;
	margin: 0px 0px 0px 0px;
	
}

footer{
	text-align: center;
	color:rgba(130,130,131,1.00);
	padding: 30px 0px;
	font-size: 1.8vw;
	font-weight: 500;
}

header {
	width: 100%;
	background-color: rgba(49,49,49,1.00);
	padding: 0vw 0vh 1vw 0vh;
	/*position: fixed;*/
	
	/*"position-fixed" enables the nav bar to always be present. When activated, it partially covers the container when the visitor hasn't scrolled down at all.*/	
}

h1 {
	
	width: 11%;
	padding: 0% 0% 0% 1%;
	float: left;
	line-height: 1.3em;
	font-size: 2.8vw; 
	font-family: "arek", serif;
	font-weight: 400;
	font-style: italic;	
}

h2 {
	width: 90%;
	font-size: 1.7vw;
	font-weight: 400;
	padding: 3% 5% 0% 5%;
	margin: 0%;
	line-height: normal;	
}

/*Text under exhibition info (h3)*/
h3{	
	float: left;
	width: 90%;
	color: whitesmoke;
	font-size: 1.3rem;
	font-weight: 400;
	padding: 3% 0% 0% 10%;
	line-height: 1.3em;
}

h4{
	width: 40%;
	padding: 0% 0% 3% 3%;
	margin: 0px;
	font-size: 2.6vw;
	font-weight: 400;
	color: rgba(232,149,30,1.00);			
}

a:link{
	color: rgba(232,149,30,1.00);
}

a:visited{
	color: rgba(232,149,30,1.00);
}

a:hover{
	color: lightblue;
}

/*The following selecter is to see if the "visual search" icon in the upper-left corner of images can be disabled.*/
/*img {
	pointer-events: none;
}*/

/*"Nav" applies to WHERE text is placed.*/
nav {
	width: 40%;
	text-align: right;
	padding: 4% 0% 0% 0%;
	float: left;
	font-family: "acumin-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1vw;
	display: cover;
}
	
/*"Nav a:xxx" applies to the characters, THEMSELVES. Additionaly, it applies to their distance appart from each other.*/

/*Any link, BEFORE being pushed*/

nav a:link {
	color: rgba(127,126,126,1.00);
	font-size: 230%;
	padding-left: 30px;
	text-decoration: none;
}

/*The state of a link, AFTER having been clicked upon*/
nav a:visited {
	color: rgba(127,126,126,1.00);
	/*color: green;*/
}
/*The curser is hovering over the text, or area, WITHOUT being clicked upon*/
nav a:hover  {
	color: rgba(212,211,211,1.00);
	transform: scale(1.3);
	transition: color .2s ease-in-out, .2s ease-in-out;	
}
/*A mouse's button would be actively pushed while curser is hovering over the text, or area.*/
nav a:hover img {
	
}

nav a:active {
	color: rgba(212,211,211,1.00);
}

p{
	text-align: center;
	font-size: 22px
	
}
/*Class Facts*/

/*A dot (.class) WITHOUT the "img" abbrev. is created by the computer. It cannot exceed any value beyond 99.9. 

/*A class, followed by an "img" tag, is a class within an element's image - usually specifying its OWN width.*/

/*Applying either a class/id by adding using the blue/white bar, accompanied its orange frame, will accommodate that class/ids's decloration(s). If that frame doesn't appear to have any class/id DOES NOT mean that one wasn't previously applied.*/

.answers{
	padding: 1% 7% 2% 7%;
	font-size: 1.5vw;
	margin: 0px auto;	
}

/*Jessica Snow acknowledgement*/
.author {
	width: 35%;
	padding: 2% 4% 0% 7%;
	font-size: 12px;
	float: left;
	color:rgba(150,150,150,1.00);
	
}

.banner {
	width: auto;
	height: auto;	
}

.banner img {
	width: 100%;
	max-width: 100%;
	margin-bottom: -4px;
}



.clearfloat{
	clear: both;
}

/*Exhibtion images and text*/
.column1 {
	width: 65%;
	padding: 34px 0px 0px 0px;
	float: left;
	margin: 0px;
}

.collection-title{
	text-align: center;
	font-size: 18px;
	padding-top: 10px;
}

/*.collection-title img{
	transform: scale(1.5);
}*/
.column1 img {
	max-width: 90%;
	padding-left: 10%;
	padding-top: 5%;
}

.column2 {
	width: 35%;
	float: left;
	text-align: center;
	font-size: 1.7vw;
	line-height: .7em;
	padding: 7% 0% 2% 0%;
	font-weight: 400;
	color: rgba(232,149,30,1.00);
}

/*GENERAL Container*/
.container	{
	width: 70%;
	margin: -5px auto 0px auto;
	background-color: rgba(49,49,49,1.00);
	/*max-width: 1500px;*/
}
.contactText{
	width: 100%;
	padding: 0% 0% 0% 0%;
	
}

.defaultCaption	{
	width: 90%;
	font-size: 18px;
	float: left;
}

/*The local version significantly varies from the remote.*/
.dropCap:first-letter	{
	font-family: 'Times New Roman', 'serif';
	float: left;
	font-size: 3.1rem;
	line-height: 0.3;
	margin: .3em 0.06em 0.16em 0;
	
}
.edition{
	width: 15%;
	float: left;
	text-align: left;
	color: rgba(173,171,171,1.00);
	font-size: 1.3vw;
	padding-left: 1.5vw
}

.featured-artwork /*Text*/{
	width: 66%;
	padding: 6% 17% 0% 17%;
	font-size: 1.5vw;
}

.FAQs	{
	font-size: 1.7vw;
	color: rgba(232,149,30,1.00);
	padding: 1% 5% 2% 5%;
	text-align: justify;
}
.first-letter{
	font-size: 30px;
}


.janJablonski {
	float: left; 
	padding: 40px 50px;
}

.janJablonski img{
	border: rgba(204,201,201,1.00) 6px solid;
}
/*ID text of which location at which I am rendering*/
.location{
	width: 70%;
	text-align: right;
	font-size: 1.5vw;
	float: left;
}

.logo{
	width: 9%;
	padding: 1% 0% 0% 19%;
	float: left;
	margin-top: 0px;
}
	
.names	{
	line-height: 2em;
	padding-left: 5vw;
	font-size: 20px;
}

/*Width: 100% = Element (X), plus padding*/

.NBCC-Logo /*element*/{
	padding: 4% 0% 0% 8%;	
}

/*The "img" extension is relative to the element's width without affecting the padding.*/

.NBCC-Logo img {
	width: 46%;
	float: left;
	padding-right: 6%;
}


.NBCC-Text img{
	padding-top: 8%;
	width: 38%;
}

.noyes-artwork-col_1	{
	values: column;
	grid-auto-flow: column;
}

/*.posedQuestion {
	outline: 5px solid rgba(223,176,15,1.00)
}*/

.P-AND-P {
	margin: auto;	
}

/*The actual P. AND P. Logo*/
.P-AND-P img {
	width: 70%;
	padding: 1.5vw 0vw .5vw 0vw;
	margin: 0px;
	
}

.photo-op{
	width: 38%;
	padding: 2% 4% 0% 12%;
	font-size: 12px;
	float: left;
}

img.Wrap{
	width: 40%;
	float: right;
	padding: 0% 5% 2% 4%
}

.signature	{
	padding-left: 58%;
}

.question	{
	color: rgba(128,186,240,1.00);
	padding: 5px 0% 5px 5%;
	font-size: 1.8vw;
}

/*.visual-imagery-icon-co1_1{
	width: 38%; /*The width + the padding (if ANY) is the sum of element.*/

/*Column 1*/

.visual-imagery-icon-col_1{
	width: 38%; /*The width + the padding (if ANY) is the sum of element.*/
	float: left;
	border-color: rgba(130,130,131,1.00);
	border-width: 8px;
	tramsform: scale(5px);
	padding: 30px 4% 25px 8%;
	/*transition: color 3s ease-in-out;*/
}

.tracingBanner {
	width: 100%;
	text-align: center; 
	
}

.tracingBanner img{
	width: 100%;
	padding-top: .5% ;
	
}

.visual-imagery-icon-col_1 img{
	width: 100%; 
	border: 3px solid;
	border-color: rgba(138,137,137,1.00);
	transition: color .2s ease-in-out, .2s ease-in-out;	
}

.visual-imagery-icon-col_1:hover img{
	transform: scale(1.1);
	border: 6px solid;
	border-color: rgba(138,137,137,1.00);
	opacity: 100%; /*Here, Opacity represents the icon image.*/
}

/*Column 2*/

.visual-imagery-icon-col_2{
	width: 38%; /*The width + the padding (if ANY) is the sum of element.*/
	float: left;
	border-color: rgba(130,130,131,1.00);
	border-width: 8px;
	tramsform: scale(5px);
	padding: 30px 8% 25px 4%;
	/*transition: color 3s ease-in-out;*/
}

.visual-imagery-icon-col_2 img{
	width: 100%; 
	border: 3px solid;
	border-color: rgba(138,137,137,1.00);
	transition: color .2s ease-in-out, .2s ease-in-out;
}

.visual-imagery-icon-col_2:hover img{
	transform: scale(1.1);
	border: 6px solid;
	border-color: rgba(138,137,137,1.00);
	opacity: 100%; /*Here, Opacity represents the icon image.*/
}

/*Center*/

.visual-imagery-icon_center{
	/*width: 38%;*/ /*The width + the padding (if ANY) is the sum of element.*/
	float: left;
	border-color: rgba(130,130,131,1.00);
	border-width: 8px;
	tramsform: scale(5px);
	padding: 30px 31% 0px 31%;
	
	/*padding: 30px 8% 25px 4%;*/
	/*transition: color 3s ease-in-out;*/
}

.visual-imagery-icon_center img{
	width: 100%; 
	border: 3px solid;
	border-color: rgba(138,137,137,1.00);
	transition: color .2s ease-in-out, .2s ease-in-out;	
}

.visual-imagery-icon_center:hover img{
	transform: scale(1.1);
	border: 6px solid;
	border-color: rgba(138,137,137,1.00);
	opacity: 100%; /*Here, Opacity represents the icon image.*/
}

.wvwc-exhibition-pose	{
	width: 90% auto;
	margin: 5% 5% 0% 5%;
}