/* 
body classes and generals
Text Styles
Portal
Top Navigation
General Header
FOOTER
Body Background Classes
General Page Elements
About Me
Artist Bio
Contact Me Form
Installation Pages
Section for Installation Lead Page
Vimeo Page
MEDIA QUERIES / BREAKPOINTS
*/

html {
  scroll-behavior: smooth;
}

.strip {
	max-width: 1366px;
}

.strip100 {
	width:100%;
	margin:0 auto;}

/* ---------------------------------------------------------- body classes and generals */ 
body {
	background:#28221B;
	color:#EBEBEB;
	font-family: 'Fira Sans', sans-serif;
	font-size:1em;
	font-weight:300}
	
.pad20h {
	padding:10px 20px;}	
	
.pad20v {
	padding:20px 10px;}	
	
img > a {
  border: none} 	
  
p.centered {
	text-align:center;
}

.twnsButton {
	box-shadow: inset 0px 1px 0px 0px #dca7a7;
	background: linear-gradient(to bottom, #f66464 5%, #a04040 100%);
	background-color: #f66464;
	border-radius: 12px;
	border: 2px solid #646a6b;
	display: inline-block;
	cursor: pointer;
	color: #fbfbfb;
	font-family: 'Fira Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	padding: 8px 24px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #b23e35;
}
.twnsButton:hover {
	background: linear-gradient(to bottom, #a04040 5%, #f66464 100%);
	background-color: #a04040;
}
.twnsButton:active {
	position: relative;
	top:1px;
}  

/* ------------------------------------------------------------------------ Text Styles */
#portal-news .portal-news-subtitle {
	font-size: 1.225em;
	font-weight:400;
}

.headline-ital {
	color: #daaf35;
	font-size: 2.4vw;
	font-style:italic;
	font-weight:600;
}

.genPageTitle {
	color: #ffedd5;
	font-family:'Cormorant Garamond';
	font-size: 3em;
	padding: 2vh 10px;
}

p.page-header, p.page-header-m {
	color: #ffedd5;
	font-family:'Cormorant Garamond';
	margin: 0;
	padding: 5px 0;
}

p.page-header {
	font-size: 2.5em;
}

p.page-header-m {
	font-size: 1.8em;
}	

.text-mild-emphasis {
	color:#ffedd5;
	font-style: italic;
	font-weight:400;
}

.text-papaya-whip {
	color:#ffedd5;
}

.m-strong-emph {
	font-size: 1.225em;
	font-style: italic;
	font-weight:400;
}

.pad-crsl-text a {
	color: #ebebeb;
	font-weight: 600;
	text-decoration: none;
}

.pad-crsl-text a:hover {
	color: #f66464;
}

/* ----------------------------------------------------------------------------- Portal */	
#portal-nav-container {
	left: 0;
	max-width: 100%;
	/* padding: 1vh 2vw 1vh 1vw; */
	position: fixed;
	text-align:right;
	top: 0;
}

#portal-cover-container {
	background-image: url("/assets/img/backgrounds/portalbg5.webp");
	background-position: 0 25%;
	background-size: cover;
	position: fixed;
	width: 100%;
}

#portal-bigtitle-container {
	max-width: 100%;
	position: relative;
}

#portal-content-container {
	background-color:rgba(32,19,13,0.8);
	/* padding:20px 10px; */
	position: absolute;
	top:0px;
}

#portal-bigtitle {
	display:none;
	filter:drop-shadow(0 0 0.25rem #28221B);
	margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width:100%;
  text-align:center;
  transform: translate(-50%, -50%);
}

#portal-bigtitle p.title-name {
	color:#FFEDD5;
	font-family:'Cormorant Garamond';
	font-size:7vw;
	font-weight: 700;
	line-height:5vw;
	margin:5px;
}

#portal-bigtitle p.subtitle {
	color:#EBEBEB;
	font-family:'Fira Sans';
	font-size:4vw;
	letter-spacing: 0.8vw;
	margin:5px;
}

#portal-bigtitle i {
	font-size: 3vw;
	line-height: 1.5vw;
}

#portal-bigtitle a {
	color: #ebebeb;
	text-decoration: none;
}

.artworks-gate {
	color: #ffedd5;
	font-family: 'Cormorant Garamond';
	font-size:2.2em;
	padding: 10px 10px;
	text-align:center;
}

.artworks-gate img.artworks-img {
	border: 3px solid #696e7f;
	border-radius: 16px;
}

.artworks-gate img.artworks-img:hover {
	border: 3px solid #ca5252;
}

/* ------------------ Experimental portal news flexbox div */
.newsflex-row, .newsflex-row4 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin:16px auto;
	max-width: 1366px;
}

.newsflex-row a, .newsflex-row4 a {
	color: #fbfbfb;
}

.newsflex-row > div {
	padding: 16px;
	width: 50%
}

.newsflex-row4 > div {
	padding: 16px;
	width: 25%
}

.news-inner-flex50 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.news-inner-flex50 div {
	align-self: center;
	padding: 10px;
}

.newsflex-row .portal-news-title, .newsflex-row4 .portal-news-title {
	color: #ffedd5;
	display:block;
	font-family: 'Cormorant Garamond';
	font-size:2em;
}

/* ----------------------------------------------------------------------Top Navigation */
nav ul {
  list-style: none;
  margin: 0;
  padding: 1vh 2vw 1vh 1vw;
  background-color: #28221b;
}

nav.nav-general ul {
	background-color: rgb(160,64,64);
	padding: 1vh 1vw 1vh 1vw;
}

nav.nav-compact ul {
	position: absolute;
	top: 60px;
	right: 0;
	width: 40vw;
	height: auto;
	display:block;
}

nav li {
  display: inline-block;
  position: relative;
}

nav.nav-compact li {
	width: 100%;
	position: relative;
	display: block;
	border-bottom: 1px solid #504436;
}

nav a {
	color:#d0d0d0;
  display: block;
  font-size: 1.125em;
  font-weight: 400;
  padding: 0 1.2vw;
  text-decoration: none;
}

nav.nav-general a {
	padding: 0 0.8vw;
}

nav.nav-compact a {
	padding: 0.4vh 1vw;
}

nav a:hover {
	color: #f66464;
}

nav.nav-general a:hover {
	color: #daaf35;
}

nav ul ul {
  position: absolute;
  top: 25px;
  left: 0px;
  list-style: none;
  display: none;
  padding: 0.5vw 0.5vw;
  text-align:left;
}

nav.nav-compact ul ul {
	position: static;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul li {
  min-width:180px;
	padding: 5px 0;
}

nav.nav-compact ul ul li {
	width:100%;
	display: block;
	border: none;
	left: 0.5em;
	border-top: 1px dotted #6a5a48;
}

nav ul ul:hover {
  display:block;
}

.navburger-icon {
	background-color: rgba(40,34,27,0.5);
	color: #ebebeb;
	cursor: pointer;
	display: none;
	font-size: 1.5em;
	padding:1vh 1vw;
	position: absolute;
	right: 10px;
}

.navburger-icon a {
	color: #ebebeb;
}

/* ----------------------------------------------------------------------General Header */
#header-container {
	background-color: #a04040;
	position:fixed;
	width: 100%;
	top: 0;
}

.general-header {
	max-width: 95%;
}

.general-header div {
	float: left;
}

#header-web-title {
	padding: 10px 0 0;
	width: 35%;
}

#header-web-title a {
	text-decoration: none;
}

#header-web-title p.title-name {
	color:#FFEDD5;
	font-family:'Cormorant Garamond';
	font-size:3.125em;
	font-weight: 600;
	line-height:0.7em;
	margin:5px;
}

#header-web-title p.subtitle {
	color:#EBEBEB;
	font-family:'Cormorant Garamond';
	font-size:1.5em;
	letter-spacing: 0.325em;
	margin:5px;
}

#general-nav-container {
	padding: 24px 0;
	text-align: right;
	width: 65%
}

/* ----------------------------------------------------------------------------- FOOTER */
#footer-outer-container {
	background-color: #a04040;
}

.footer-container a {
	color: #ebebeb;
	text-decoration: none;
}

.footer-container a:hover {
	text-decoration: underline;
}

.footer-container > div {
	padding: 15px;
}

.footer-container hr {
	border-style: dashed;
	border-width: thin;
	color: #ce9d9d;
}

.footer-social-section i {
	font-size: 1.5em;
	font-weight: 500;
}

.footer-social-section div {
	padding: 10px 0;
}

/* -------------------------------------------------------------Body Background Classes */
/* background-attachment:fixed is not working on iOS Safari */

.lead-sculpture-body {
	background-image: url("/assets/img/backgrounds/lead_sculpt_bg.webp");
	background-size: cover;
	background-repeat: no-repeat; 
	background-attachment:fixed;
}

.lead-installation-body {
	background-image: url("/assets/img/backgrounds/installation_02.webp");
	background-size: cover;
	background-repeat: no-repeat; 
	background-attachment:fixed;
}

.about-body {
	background-image: url("/assets/img/backgrounds/about_bg.webp");
	background-size: cover;
	background-repeat: no-repeat; 
	background-attachment:fixed;
}

.pages-sculpture-body {
	background-image: url("/assets/img/backgrounds/pages_sculpture.webp");
	background-size: cover;
	background-attachment:fixed;
}

.cloudy-bark-body {
	background-image: url("/assets/img/backgrounds/cloudy_bark.webp");
	background-size: cover;
	background-repeat: no-repeat; 
	background-attachment:fixed;
}

/* xp - not in use */
.page-bg-installation {
	background-image: url("/assets/img/backgrounds/installation_02.webp");
	background-size: cover;
	background-repeat: no-repeat; 
}

/* -------------------------------------------------------------- General Page Elements */
#page-content-container, #multisculpt-content-container {
	background-color: rgba(40, 34, 27, 0.8);
}

#page-background-container {
	position: fixed;
	width: 100%;
}

p.norm {
	margin: 8px 0;
}

p.doublev {
	margin: 16px 0;
}

.pad-sculpt-lead {
	font-family:'Cormorant Garamond';
	font-size: 2em;
	padding: 10px 10%; 
	text-align: center;
}

.pad-sculpt-lead img {
		display:block;
		padding: 15px 0;
}

.pad-sculpt-lead a {
	color:  #ffedd5;
	text-decoration: none;
}

.gallery-lead-box {
	border-radius: 12px;
	border: 3px solid rgba(105,110,127,0);
	cursor: pointer;
	display: flex;
	font-family:'Cormorant Garamond';
	font-size: 2em;
	padding: 10px 10px;
}

.gallery-lead-box:hover	{
	border: 3px solid rgba(202,82,82,1); 
}

.gallery-lead-box div.middleflex {
	align-self: center;
	text-align: center;
}

.img-brad16 {
	border-radius: 16px;
}

/* --------------------------------------------------------------------------- About Me */

.about-year-strip {
	max-width:1280px;  
}

.about-year-strip > div {
	background-color: rgba(202,82,82,0.3);
	border-radius: 18px;
	font-size: 1.125em;
}

.about-year-strip > div p {
	margin: 0 15px;
}

.about-year-flex {
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	max-width: 1280px;
	width: "100%";
}

.about-year-flex > div {
	padding: 10px 24px;
	width: 33.3333%
}

.about-year-flex > div img {
	border-radius: 8px;
	float: left;
	margin-right: 15px;
	max-height: 175px;
	width: auto;
}

.about-year-flex > div p.titl {
	margin: 2px;
	font-size: 1.4em;
	font-weight: 600;
}

.about-year-flex i {
	font-size: 1.75em;
	padding: 5px 2px;
}

.about-year-flex a {
	color: #a04040;
}

.about-year-flex a:hover {
	color: #ca5252;
}

#residency-strip {
	max-width: 1280px;
}

/* ------------------------------------------------------------------------- Artist Bio */

.biospacer {float: left; width: 25%}
.bio-container {float: left; width: 50%}

#bio-wlbg-container {
	background-image: url("/assets/img/backgrounds/bio_teresa_left.webp");
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 16px 0 0 16px;
}

#bio-smbg-container {
	background-image: url("/assets/img/backgrounds/bio_teresa_top.webp");
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 16px 16px 0 0;
}

/* -------------------------------------------------------------------- Contact Me Form */

#contact-me-form label {
	color: #ebebeb;
	font-weight: 600;
}

#contact-me-form input.norm, #contact-me-form textarea, #contact-me-form input.submitt {
	border-radius: 12px;
	border-width: 0;
	margin: 10px;
	padding: 12px 12px;
}

#contact-me-form input.norm, #contact-me-form textarea {
	background-color: #ffedd5;
	color: #303027;
}

#contact-me-form input.norm {
	width: 50%;
}

#contact-me-form textarea {
	height: 160px;
	width: 90%;
}

#contact-me-form input.submitt {
	background-color: #ca5252;
	color: #ebebeb;
	font-weight: 600;
}

#contact-me-form input.submitt:hover {
	background-color: #a04040;
}

/* ----------------------------------------------------------------- Installation Pages */

.instlltn-flex-nav {
	display: flex;
	justify-content: center;
}

.instlltn-flex-nav > div {
	font-size: 2em;
	padding: 0 20px;
}

.instlltn-flex-nav > div a {
	color: #a04040;
}

.instlltn-flex-nav > div a:hover {
	color: #f66464;
}

/* ------------------------------------------------- Section for Installation Lead Page */
#installbitcontainer {
	overflow: hidden;
	width:100%;
}

#installbitcontainer div {
	color: #EBEBEB;
	cursor: pointer;
	float: left;
	font-family: "Cormorant Garamond";
	font-size: 28px;
	height:280px;
	padding: 2vh 2vw;
	text-align: center;
	width: 16.666%;
}

#installbitcontainer div:hover {
	color: #FFEDD5;
}

#installbitcontainer div img {
	border-radius: 12px;
	display: block;
	margin:0 0 5px;
}

/* ------------------------------------------------------------------------- Vimeo Page */
.vimtypo {
	color:#ebebeb; 
	font-size:0.9em}
	
.vimhead {
	background:rgba(189, 189, 189, 0.2);
	border-radius:6px 6px 0 0;
	cursor:pointer;
	margin:0.425vh 0.2vw;
	padding:3%}
	
.vimbox {
	padding:0.5vh 15%}	
	
.vimpic {
	cursor:pointer}	

/* -------------------------------------------------------- MEDIA QUERIES / BREAKPOINTS */

/* small */
@media screen and (max-width: 559px) {
	/* Top Navigation */
	#portal-nav-container {text-align: left}
	#general-nav-container {text-align: left; width: 35%}
	nav.nav-compact ul {width:60vw; display: none}
	.navburger-icon {display: flex}
  /* General Header */
  #header-web-title {width: 65%}
  #header-web-title p.title-name {font-size:2.225em}
  #header-web-title p.subtitle {font-size:1.125em; letter-spacing: 0.275em}
  /* Portal Sections */
	#portal-bigtitle-container {background-position: 30% 80%}
	#portal-bigtitle p.title-name{font-size:12vw; line-height:7vw}
	#portal-bigtitle p.subtitle{font-size:8vw}
	#portal-bigtitle i {font-size:8vw}
	#portal-news div {padding:5px}
	.newsflex-row > div {width: 100%}
	.newsflex-row4 > div {width: 100%} 
	/* General Page Contents */
	.general-header {max-width: 100%}	
	.headline-ital {font-size:7vw}	
	.genPageTitle {font-size: 2em; padding: 10px 10px}
	.pad-sculpt-lead {font-size: 2em; padding: 10px 10px}
	/* Installation Page */
	#installbitcontainer div {font-size: 18px;height:220px;padding: 2vh 5vw;width: 50%;}
	/* About Me */
	.about-year-flex > div {width:100%}
		/* Artist Bio */
	.biospacer {width: 4%}
	.bio-container {width: 92%}
}

/* medium */
@media screen and (min-width: 560px) and (max-width: 823px) {
	/* Top Navigation */
	#portal-nav-container {text-align: left}
	#general-nav-container {text-align: left; width: 35%}
	nav.nav-compact ul {display: none}
	.navburger-icon {display: flex}
	/* General Header */
	#header-web-title {width: 65%}
  #header-web-title p.title-name {font-size:2.5em}
  #header-web-title p.subtitle {font-size:1.25em; letter-spacing: 0.275em;}
	/* Portal Sections */
	#portal-bigtitle-container {background-position: 30% 80%}
	#portal-bigtitle p.title-name{font-size:9vw; line-height:6vw}
	#portal-bigtitle p.subtitle{font-size:5.5vw}
	#portal-bigtitle i {font-size:5.5vw}
	.newsflex-row > div {width: 100%}
	.newsflex-row4 > div {width: 50%}
	.artworks-gate {padding: 10px 60px}
	/* General Page Contents */
	.general-header {max-width: 100%}		
	.headline-ital {font-size:5vw}
	.genPageTitle {font-size: 2.4em; padding: 1.2vh 10px}
	.pad-sculpt-lead {font-size: 2em; padding: 10px 20%}
	.gallery-lead-box {padding: 10px 15%}
	/* Installation Page */
	#installbitcontainer div {font-size: 22px;height:240px;padding: 2vh 3vw;width: 25%;}
	/* About Me */
	.about-year-flex > div {width:50%}
	#residency-strip img {width:80%}
	/* Artist Bio */
	.biospacer {width: 8%}
	.bio-container {width: 84%}
	/* Vimeo */
	.break-m33 {width:33.3333%}
}

/* large */
@media screen and (min-width: 824px) and (max-width: 1139px) {
	/* Top Navigation */
	nav a {font-size: 1.025em};
	/* General Header */
	#header-web-title p.title-name {font-size:2.75em}
  #header-web-title p.subtitle {font-size:1.325em; letter-spacing: 0.3em}
	/* General Page Contents */
	.headline-ital {font-size:4vw}
	/* Installation Page */
	#installbitcontainer div {font-size: 24px;height:240px;padding: 2vh 3vw;width: 20%;}
	/* Artist Bio */
	.biospacer {width: 10%}
	.bio-container {width: 80%}
}		

/* wide */
@media screen and (min-width: 1140px) {

}