@charset "utf-8";
  
/* Generic Classes */

/**
 * @license
 * MyFonts Webfont Build ID 3908477, 2020-05-29T15:45:58-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: AmericanTypewriterITCPro-BdCd by ITC
 * URL: https://www.myfonts.com/fonts/itc/american-typewriter/pro-bold-condensed/
 * Copyright: Copyright © 2014 Monotype ITC Inc. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc
*/

@font-face {
  font-family: myFirstFont;
  src: url("../fonts/font.woff");
}

html {
	font-family: myFirstFont;
	padding-bottom: 20px;
	color: #000;
	background: url("../images/background 500x500.jpg");
}

body {	
	display: block;
	margin: 0 auto;	
	padding: 20px 30px;
	width: 1060px;	
	line-height: 1.5rem;
}

hr {	
	background-color: gray;
	margin: 0 auto 10px auto;
}

a:link,a:visited {text-decoration:none;}
a:link {color: #190100;}
a:visited {color: #190300;}

a:hover, a:focus, a:active {
	color: black;
	text-decoration: underline;
}

h1, h2, h3 {
	text-align: center;
	margin: 0 auto 10px auto;
}
h1 {font-size: 1.4rem;}
h2 {font-size: 1.2rem;}
h3 {font-size: 1.0rem;}

	/* for SEO and AT */
	.hidden-text {
		font-size: 0;
		width: 1px;
		height: 1px;
		display: inline-block;
		overflow: hidden;
		position: absolute!important;
		border: 0!important;
		padding: 0!important;
		margin: 0!important;
		clip: rect(1px,1px,1px,1px);
	}

select {
	font-size: 1.2rem;
	width: 70%;
}

/* Header and Navigation */

header, main {
	width: 100%;
	margin: 0 auto 20px auto;
	padding: 9px 0 4px 0;
}

#logo1 {
	margin-left: 4.5%;
	margin-bottom: 4px;
}

img#logo1 {
	max-width: 90%;
	max-height: 100%
}

#logo2 {margin-left: 2%;}

img#logo2 {
	max-width: 90%;
	max-height: 100%;
}

header hr {
	width: 95%;
	height: 2px;
}

header nav {
	padding: 0 40px 5px 40px;
	color: black;
}

header nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}

header nav > ul > li {
	position: relative;
	display: inline-block;
	cursor: pointer;	
	max-height: 50px;
	background-size: contain;
}

li.dropdownmenu ul {
	position: absolute;
	top: 100%;
	left:-23.5%;
	z-index:501;
	width: 145%;
	max-height: 0;	
	background: #F0FFF0;
	overflow: hidden;	
	box-shadow: 0 0 5px rgba(0, 0, 255, .3);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 255, .3);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .3);
 	transition: max-height 0.1s ease-out;
	-webkit-transition: max-height 0.1s ease-out;
    -moz-transition: max-height 0.1s ease-out;	
}

li.dropdownmenu:hover ul {
	max-height: 1000px;		
    transition: max-height 0.3s ease-in;
	-webkit-transition: max-height 0.3s ease-in;
    -moz-transition: max-height 0.3s ease-in;		  
}

li.dropdownmenu li {
	position: relative !important;
	padding: 2px 0 !important;
	text-align: center;
}

li.dropdownmenu:hover a {
	color: #000;
	text-decoration: none;
}

li.dropdownmenu li:hover {
	background-color: #5e8ce9;
}

/* Main Content */

main {padding: 0 30px;}

main hr {
	width: 95%;
	height: 2px;
}

/* Footer */

footer {
	margin: 0 auto 10px auto;
	text-align: center;
}

footer p {
	color: #130300;
	font-style: italic;
}

footer .col1 {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}

#coach {
	text-align: left;
	margin-left: 3%;
}

#coach img {max-height: 140px;}

footer nav {
	font-family: myFirstFont;
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
	margin-bottom: 15px;
	margin-left: 3%;
	text-align: left;
}

footer .col2 {
	width: 25%;
	display: inline-block;
}

footer .col2 img {max-width: 100%;}

img#manonbird {
	position: relative;
	top: 20px;
	max-height: 210px;
}

#stayintouch {margin: 0 auto 10px auto;}

#stayintouch img {
	width: 79px;
	height: 72px;
}

#socials {margin: 0 auto 10px auto;}

#socials li {
	display: inline-block;
	height: 30px;
	width: 30px;
}

#socials a {
	display: block;
	width: inherit;
	height: inherit;
}

#fb_soc {background: url(../images/icons/iconmap.png) 0 0;}
#flickr_soc {background: url(../images/icons/iconmap.png) -31px 0;}
#twitter_soc {background: url(../images/icons/iconmap.png) -62px 0;}
#yahoo_soc {background: url(../images/icons/iconmap.png) -93px 0;}
#pint_soc {background: url(../images/icons/iconmap.png) -124px 0;}

footer hr {
	height: 0px;
	border-top: 0px solid grey;
	width: 60%;
}

/* General slide settings */

.slideshow-container {
	position: relative; /* Arrows need this */
	box-sizing: content-box;
	overflow: hidden;
	background-color: black;
}

.slider {
	height: 100%;
	width: 20000%;
	position: relative;
	left: 0;
	-webkit-transition: 1.0s ease-in-out;
    -moz-transition: 1.0s ease-in-out;
    -o-transition: 1.0s ease-in-out;
    transition: 1.0s ease-in-out;
}

.slide {
	height: 100%;
	float: left;
}

.slide img {
	display: block;
	margin: 0 auto;
	width: 1px;
	height: 1px;
	max-width: 100%;
	max-height: 100%;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;	
}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	padding: 20px;
	color: white;
	font-weight: bold;
	font-size: 1.2rem;
	-webkit-transition: 0.6s ease;
    -moz-transition: 0.6s ease;
    -o-transition: 0.6s ease;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.prev {
	left: 0px;
}

.next {
	right: 0px;
	border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  	background-color: rgba(0,0,0,0.8);
	text-decoration: none;
	color: #FFF;
}

.caption {
	position: absolute;
	bottom: 0px;
	color: #FFF;
	background-color: rgba(0,0,0,0.5);
	font-size:1.3rem;
	line-height:1.33;
	border-top:1px solid #000;
	padding: 4px 0;
	width: inherit;
	text-align: center;
}

	/* Fading in animation */

@keyframes fade-in {
  from {opacity: 0.5}
  to {opacity: 1}
}

@-webkit-keyframes fade-in {
  from {opacity: 0.5}
  to {opacity: 1}
}

@-moz-keyframes fade-in {
  from {opacity: 0.5}
  to {opacity: 1}
}

@-o-keyframes fade-in {
  from {opacity: 0.5}
  to {opacity: 1}
}

@-ms-keyframes fade-in {
  from {opacity: 0.5}
  to {opacity: 1}
}

/* Index.html */

#index-top-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 20px;
}

#index-top-row .col1 {flex-basis: 40%;}

img#splash {
	max-width: 95%;
	padding-top: 5%;
	display: block; 
	margin: 0 auto;
}

#index-top-row .col2 {flex-basis: 60%;}

#index-carousel.slideshow-container {
	width: 75%;
	height: 95%;
	margin: 0 auto;
	border: 25px solid transparent;
	-webkit-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
	-moz-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
	-o-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
	border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
}

#index-bottom-row .col1 {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 80%;
	font-size: 1.2rem;
}

/* Merch Pages */
	
img#stamps-h1, img#stamps-h2 {
	display: block;
	margin: 0 auto 20px auto;
	max-width: 100%;
}

img#stamps-h1 {
	width: 100%;
}
	
#merch-top-row {margin-bottom: 20px;}

	/* Cover Carousel */

#cover-carousel.slideshow-container {
	width: 90%;
	height: 550px;
	margin: 0 auto;
	border: 25px solid transparent;
	-webkit-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
	-moz-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
	-o-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
	border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
}

	/* Merch Selector */

#merch-bottom-row {
	width: 95%;
	margin: 0 auto 20px auto;
}

#merch-bottom-row .col1 {
	display: inline-block;
	width: 35%;
	overflow: hidden;
	margin-bottom: 10px;
}

#merch-viewer-container.slideshow-container {
	display: block;
	width: 70%;
	height: 330px;
	margin: 0 auto;
	background-color: #000000;
	border: 40px solid transparent;
	-webkit-border-image: url("../images/merchslideframe250.png") 29 stretch;
	-moz-border-image: url("../images/merchslideframe250.png") 29 stretch;
	-o-border-image: url("../images/merchslideframe250.png") 29 stretch;
	border-image: url("../images/merchslideframe250.png") 29 stretch;
}

.merchSlide {
	width: 100%;
	height: 100%;
	display: none;
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 1.0s;
	animation-name: fade-in;
	animation-duration: 1.0s;
}

.merchSlide img {
	width: 1px;
	height: 1px;
	display: block;
	margin: 0 auto;
}

.merchSlide:first-child {
	display: block;
}

#merch-bottom-row .col2 {
	display: inline-block;
	width: 63%;
	vertical-align: top;
	overflow: hidden;
}

#merch-selector-container {
	display: block;
	margin: 0 auto 10px auto;
	width: 90%;
	padding: 5px;
	line-height: 0;
	text-align: center;
	background-color: #000000;
	background-clip: padding-box;
	overflow: hidden;
	border: 40px solid transparent;
	-webkit-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
	-moz-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
	-o-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
	border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
}

#merch-selector-container figure {
	display: inline-block;
	width: 18%;
	padding: 2px;
	overflow: hidden;
	cursor: pointer;
}

#merch-selector-container figure:first-child {
	background-color: #6495ed;
}

#merch-selector-container img {
	max-width: 94%;
	max-height: 100px;
	display:block;	
	margin: 0 auto;
}

#paypal {
	width: 100%;
	margin: 0 auto;
}

.paypalButton {
	display: block;
	margin: 0 auto 10px auto;
}

#orderinstructions {
	display: block;
	width: 90%;
	margin: 0 auto 20px auto;
	text-align: center;	
	font-size: 1.6rem;
	line-height: 2.0rem;
}

#orderinstructions p {
	margin-bottom: 10px;
}

#merch-bottom-row .col3 {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 80%;
	font-size: 1.2rem;
}

.underline {
	text-decoration: underline !important;
}

.bold-centered {
	font-weight: bold;
	text-align: center;
}

.doubleSpace {
	margin-bottom: 1rem;
}

.quote {
    text-align: left;
    display: block;
    margin: 0 auto;
    width: 50%;
    color: black;
    font-size: 1.0rem !important;
	font-style: italic;
}

#pinkies {
	text-align: left;
    display: block;
    margin: 0 auto 10px auto;
    width: 420px;
    color: black;
    font-size: 1rem;
	text-align: center;
	font-style: italic;
}

.quoteAuthor {
	margin-top: 1rem;
	margin-bottom: 10px;
}

	/* Bonjour Madame Merch */

#merch-bottom-row #leftColumn2 {
	display: inline-block;
	width: 350px;
	vertical-align: top;
	font-size: 1.2rem;
}

#merch-bottom-row #rightColumn2 {
	display: inline-block;
	width: 350px;
}

	/* Santos Merch */

#merch-bottom-row #leftColumn p {
	font-size: 1.2rem;	
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	color: #000;	
}

/* art */

ul.artRows {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

ul.artRows li {
	display: block;
	width: 95%;
	overflow: hidden;
	padding-bottom: 10px;
	margin: 0 auto 10px auto;	
}

ul.artRows li:not(:last-child) {border-bottom: 1px solid grey;}

.artRows .col1 {
	display: inline-block;
	width: 53%;
	overflow: hidden;
	margin-right: 10px;
}

.artRows .col1 img {
	max-width: 100%;
	display: block;
	margin: 0 auto;	
	border: 1px solid grey;
	box-shadow: 0 0 5px;
}

.artCaption {
	text-align: center;
	color: black;
	font-size: 1.0rem;
	font-style: italic;
	margin-top: 2px;
	margin-bottom: 1px;
}

.artRows .col2 {
	display: inline-block;
	vertical-align: top;
	width: 40%;
	overflow: hidden;
	margin-left: 10px;
}

.artRows .col2 p {
	text-align: left;
	font-size: 1.1rem;
	color: black;
	margin: 10px auto;
}

	/* The Art Doll Chronicles */

#chronicles {
	width: 80%;
	margin: 0 auto;
}

#chronicles img {
	display: block;
	margin: 0 auto;
	max-width: 50%;
}

#art-dolls-stolen-section {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

#art-dolls-stolen-section p {
	font-size: 1.3rem;
	margin-bottom: 20px;
}

#art-dolls-stolen-section img {
	display: inline-block;
	margin: 0 50px 20px 50px;
	border: 1px solid grey;
	box-shadow: 0 0 5px;
}

#trust-and-surrender-section {
	width: 90%;
	margin: 0 auto;
}

#trust-and-surrender-section p {
	font-size: 1.3rem;
	margin-bottom: 20px;
}

#trust-and-surrender-section img {
	display: inline-block;
	margin: 0 20px;
	border: 1px solid grey;
	box-shadow: 0 0 5px;
}

.floatLeft {
	float: left;
}

.floatRight {
	float:right;
}

	/* The Artful Storybook */
	
#artful-section .col1 {
	display: inline-block;
	width: 50%;
	padding-top: 10px;
	padding-left: 10px;
	overflow: hidden;
}

#artful-section .col1 img {
	display: block;
	margin: 0 auto;
	max-width: 90%;
	border: 1px solid grey;
	box-shadow: 0 0 5px;
}

.artfulCaption {
	text-align: center;
	font-size: 1.3rem;
	margin-bottom: 1px;
	margin-top: 2px;
	font-weight: bold;
}

#artful-section .col2 {
	display: inline-block;
	width: 48%;
	vertical-align: top;
	padding-top: 10px;
}

#artful-section .col2 p {
	font-size: 1.3rem;
}

#artful-section .col2 p.blockQuote {
	display:inline-block;
	margin-left: 2rem;
	margin-right: 2rem;
	text-align: justify;
}

i {font-style: italic;}
b {font-weight: bold;}

/* Guest Artists */

#text-section {
	width: 90%;
	margin: 0 auto;
}

#text-section p {
	font-size: 1.3rem;
	margin-bottom: 10px;
}

/* Artist Statement */

#text-section p.quote {
	width: 30%;
	margin: 0 auto;
	font-size: 1.0rem;
}

#text-section p.quoteAuthor {
	margin-bottom: 20px;
}

/* Contact */

#contactCard {
	width: 560px;
	margin: 0 auto;
}

#contactCard img {
	float: left;
	margin-left: auto;
	margin-right: auto;
	margin-right: 20px;
	height: 300px;
	border: 1px solid black;
	box-shadow: 0 0 5px;
}

#contactCard p {
	font-size: 1.0rem;
}

#contactCard p:first-of-type {
	padding-top: 70px;
}

/* Wearable Art */

ol.instructions {
	display: block;
	list-style-type: decimal;
	margin-top: 1rem;	
	padding-left: 40px;
	font-size: 1.3rem;
	color: black;
}

ol.instructions li {margin-bottom: 1rem;}

aside.tips {
	font-size: 1.3rem;
	color: black;
}

aside.tips ul {
	list-style-type: disc;
	padding-left: 40px;
}

aside.tips ul li {margin-bottom: 1rem;}

/* Smith Demo */

ol > li:before {
	font-weight: bold;
}

ol.roman {
	list-style-type: upper-roman;
}

ol.alpha {
	list-style-type: upper-alpha;
	margin-left: 2rem;
}

ol.deci {
	list-style-type: decimal;
	margin-left: 2rem;
}

/* Paper Dream Theatre */

#triptych {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}

#triptych .cell {
	width: 33%;
	display: inline-block;
}

#triptych img {
	max-width: 90%;
	display: block;
	margin: 0 auto;
	border: 1px solid grey;
	box-shadow: 0 0 5px; 
}

/* Box Dolls */

#quadtych {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}

#quadtych .cell {
	width: 24%;
	display: inline-block;
}

#quadtych img {
	max-width: 90%;
	display: block;
	margin: 0 auto;
	border: 1px solid grey;
	box-shadow: 0 0 5px; 
}

/* Keepsake Box */

#diptych {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}

#diptych .cell {
	width: 49%;
	display: inline-block;
}

#diptych img {
	width: 90%;
	display: block;
	margin: 0 auto;
	border: 1px solid grey;
	box-shadow: 0 0 5px; 
}

/* Other Art Pages */

#guestArt {
	width: 100%;
	margin-bottom: 20px;
}

/* Artist Statement */

img#authenticity {
	display: block;
	width: 200px;
	margin: 0 auto 10px auto;
}

/* Order Policies */

#text-section ul.rows li {margin: 10px auto;}
#text-section ul.rows li:not(:last-child) {border-bottom: 1px solid grey;}
#text-section.narrow-text-section {width: 70%;}
#text-section.narrow-text-section img {max-width: 100%;}

/* 404 Page */

img#notFound {
	display: block;
	max-width: 80%;
	margin: 0 auto;
}

@media only screen 
and (max-width: 1200px) {
	body {width:100%; padding: 0;}
	header, main {border: 0; padding: 20px 0;}	
	.prev, .next {background-color: rgba(0,0,0,0.8); text-decoration: none; color: #FFF;}
	header {padding-bottom: 5px; margin-bottom: 0px;}
	header nav {padding: 0;}
	header nav > ul {flex-wrap: wrap; justify-content: center;}
	#index-carousel.slideshow-container {
		border-style: solid;
		border-width: 15px; 
		border-color: white;
		-webkit-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
		-moz-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
		-o-border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
		border-image: url("../images/slideframe600.png") 25 25 25 25 stretch;
	}
	#cover-carousel.slideshow-container {
		border-style: solid;
		border-width: 15px; 
		border-color: white;
		-webkit-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
		-moz-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
		-o-border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
		border-image: url("../images/slideframe600_rotate.png") 25 25 25 25 stretch;
	}
	#merch-viewer-container.slideshow-container {
		border-style: solid;
		border-width: 30px; 
		border-color: white;
		-webkit-border-image: url("../images/merchslideframe250.png") 29 stretch;
		-moz-border-image: url("../images/merchslideframe250.png") 29 stretch;
		-o-border-image: url("../images/merchslideframe250.png") 29 stretch;
		border-image: url("../images/merchslideframe250.png") 29 stretch;
	}
	#merch-selector-container {
		border-style: solid;
		border-width: 30px; 
		border-color: white;
		-webkit-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
		-moz-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
		-o-border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
		border-image: url("../images/merchselectorframe300.png") 39 72 39 72 stretch;
	}
	#merch-selector-container {padding: 4;}
	#merch-selector-container figure {width: 18%;}
}

@media only screen 
and (max-width: 700px) {
	nav > ul > li {margin-bottom: 10px;}
	#index-top-row {display: block;}
	#index-top-row img#splash {padding-top: 0;}
	#index-top-row .col1, #index-top-row .col2 {max-width: 100%; margin-bottom: 1rem;}
	#index-carousel.slideshow-container {width:90vw; height: 120vw;}
	
	#cover-carousel.slideshow-container {width:90vw; max-height: 30vh;}
	#cover-carousel .caption {font-size: 1rem;}
	#merch-bottom-row {width: 100%; margin: 0;}
	#merch-bottom-row .col1, #merch-bottom-row .col2 {display: block; width: 100%; margin: 0 auto 10px auto;}
	
	#merch-viewer-container.slideshow-container {width: 60%; height: 300px;}
	.artRows .col1, .artRows .col2 {display: block;	width: 100%; margin: 0;}	
	.quote {width: 80% !important; font-size: 1.0rem;}
	#art-dolls-stolen-section {width: 100%;}
	#art-dolls-stolen-section p {width: 80%; margin: 0 auto 20px auto;}
	#trust-and-surrender-section img {display: block; margin: 0 auto 10px auto; border: none; float: none;}
	#artful-section .col1, #artful-section .col2 {display: block; width: 100%; padding: 0; margin-bottom: 20px;}
	#artful-section .col2 p {margin: 0 10px 20px 10px;}
	#contactCard {width: 100%;}
	#contactCard img {display: block; max-width: 90%; margin: 0 auto 20px auto; float: none;}
	#contactCard p:first-of-type {padding: 0;}
	#text-section.narrow-text-section {width: 90%;}
	#quadtych .cell, #triptych .cell, #diptych .cell {width: 100%; display: block; margin-bottom: 20px;}
	footer .col1, footer .col2 {width: 100%; display: block;}
	footer .col2 img {margin: 0 auto; width: 60%;}
}

@media only screen 
and (max-width: 1200px) 
and (min-width: 701px) {
	#index-carousel.slideshow-container {
		width: 75%; 
		height: 95%;
	}
	#cover-carousel.slideshow-container {max-width:90%; max-height: 80vh;}
	#cover-carousel .slide {max-width: 80vw; max-height: 100%;}	
	#cover-carousel .caption {max-width: 80vw;}
}