/* Desktop */
.mobileMenu, .mobileMenuIcon, .mobileSocial {display: none;}

	/* * { */
		/* -webkit-transition: .5s ease; */
	/* -o-transition: .5s ease; */
	/* transition: .5s ease; */
	/* } */

/******************** Links and Buttons ********************/
a {
	font-weight:bold;
	text-decoration:none;
	word-wrap: break-word;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
a:link {color: #cc33cc;}
a:visited {color: #992299;}
a:hover {color: #ff99ff;}
a:active {color: #ffffff;} /* selected link */
.button, button {
	background-color: #cc33cc !important;
	border: none !important;
	color: white !important;
	padding: 12px 20px !important;
	text-align: center !important;
	text-decoration: none !important;
	display: inline-block !important;
	font-size: 16px !important;
	font-weight:bold !important;
	margin: 4px !important;
	/* cursor:pointer?? */
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
.button:hover, button:hover {background-color: #992299 !important;}




/******************** top of page ********************/
.stickyHeader {
	position: sticky;
	top:0;
	z-index:99;
	
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
.header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	/* padding: 5px; */
	/* margin-bottom:50px; */
	background-color: #000;
}

#logo {width: 110px;}

.cartButton, .cartButtonEmpty {
		/* padding: 13px 18px !important; */
		height:100%;
		width:100%;
		padding:0px;
		margin:auto;
		display:table-cell;
		vertical-align: middle;
		padding-left: 10px;
		padding-right:10px;
	}
	.cartButtonDiv {
		height:100%;
		width:100%;
		display:table;
		text-align:center;
		
	}
	
	
.cartButton, .cartButtonEmpty {
	/* border: none !important; */
	/* color: white !important; */
	/* padding: 15px !important; */
	/* font-weight:bold !important; */
	/* margin: 0px; */
	/* display:inline-block; */
}
.cartButton {background-color: #cc33cc !important;	color:white !important;}
.cartButton:hover {background-color: #992299 !important;}
.cartButtonEmpty {background-color: #111 !important; 		color:#999 !important;}
.cartButtonEmpty:hover {background-color: #444 !important; 	color: #f4f4f4 !important;}

/*.cartButton {background-color: #cc33cc !important;}
.cartButton:hover {background-color: #992299 !important;}
.cartButtonEmpty {background-color: #444 !important;}
.cartButtonEmpty:hover {background-color: #333 !important;}*/

/* Top Menu */
	.topMenu a {
		color: #999;
		background: #111;
		display:inline-block;
		border-bottom: 5px solid #444;
		padding: 15px;
	}
	.topMenu a:hover {
		color: #f4f4f4;
		background: #333;
		border-color: #d01a71;
	}
	.topMenu a.active{
		color: #f4f4f4;
		background: #333;
		border-color: #d01a71;
	}

/* Add a black background color to the top navigation */
.topnav ul {
	list-style:none;
	padding: 0;
	margin: 0;
}
.topnav li {
	padding: 0;
	margin: 0;
}
/* Style the links inside the navigation bar */
.topnav a {
	color: #999;
	background: #111;
	border-right: 4px solid #444;
	display: block;
	font-weight: normal;
}
.topnav a:hover {
	color: #f4f4f4;
	background: #333;
	border-color: #d01a71;
}
.topnav a.active { /* Add a color to the active/current link */
	color: #f4f4f4;
	background: #333;
	border-color: #d01a71;
}



/* Social Media Buttons */
.topSocial {
	width:110px;
	padding:5px;
	/* margin-bottom:calc(-68px - 5px - 5px); */
	position:absolute;
}
.social {
	text-align: center;
	/*margin-top:20px;*/
}
.socialButton {
	width: 25px;
	margin-right: 6px;
	margin-top: 3px;
	margin-bottom: 3px;
	opacity: 0.45;
	-webkit-filter: drop-shadow(2px 2px 6px black);
	filter: drop-shadow(2px 2px 6px black);
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}

.socialButton:hover {
	opacity: 1;
}

/******************** main structure ********************/
body {
	background-color:#000000;
	color:#d1d1d1;
	font-family: "Verdana";
	font-size: 12px;
	margin:0px;
	
	/* animation: fadeInAnimation ease 0.5s; */
	/* animation-iteration-count: 1; */
	/* animation-fill-mode:forwards; */
}

@-webkit-keyframes fadeInAnimation {
	0% { opacity: 0; }
	100% {opacity: 1; }
}
@keyframes fadeInAnimation {
	0% { opacity: 0; }
	100% {opacity: 1; }
}




/******************** OLD main structure ********************/
.lhsmain {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
}
.lhs {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 110px;
	flex: 0 0 110px;
	width:110px;
}
.main {
	-webkit-box-flex:50;
	-ms-flex-positive:50;
	flex-grow:50;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	padding:16px;
	text-align:center;
}
.rhs {
	-webkit-box-flex:1;
	    -ms-flex-positive:1;
	flex-grow:1;
	width:300px;
	min-width:300px;
	padding:16px;
	background-color: #222
}

.nowrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}



.mainImage {
	text-align:center;
	max-width:70vw;
	max-height:85vh;
	border-width:1px;
	border-style:solid;
	border-color:#222222;
	
	-webkit-animation: fadeInAnimation ease 0.5s;
	animation: fadeInAnimation ease 0.5s;
	-webkit-animation-iteration-count: 1;										  
	animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;								  
	animation-fill-mode:forwards;
}

.video {
	text-align:center;
	max-width:70vw;
	max-height:85vh;
	width:70vw;
	height:85vh;
	border-width:1px;
	border-style:solid;
	border-color:#222222;
}

.buyPrintImage {
	text-align:center;
	border-width:1px;
	border-style:solid;
	border-color:#222222;
	width:150px;
}
.thumb {
	min-height:50px;
	max-height:100px;
	border-width:1px;
	border-style:solid;
	border-color:#222222;
	
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
	
	-webkit-animation: fadeInAnimation ease 0.5s;
	animation: fadeInAnimation ease 0.5s;
	
	-webkit-animation-iteration-count: 1;									  
	animation-iteration-count: 1;
	
	-webkit-animation-fill-mode:forwards;								  
	animation-fill-mode:forwards;
}

.thumb:hover {
	-webkit-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);
	/* margin:10px; */
	/* -webkit-filter: drop-shadow(0px 0px 6px white); */
	/* filter: drop-shadow(0px 0px 6px white); */
	
	/* border: 8px solid #d01a71; */
	
}

/******************** home page ********************/
.collageTitle {
	display: -ms-inline-grid;
	display: inline-grid;
}

.collageRow {
	width:80vw;
	margin:auto;
	height:calc(13vh + 6px);
	overflow:hidden
}

.collageRowImg {
	border: 1px solid #222222;
	margin:4px;
	height:13vh;
	-o-object-fit:contain;
	object-fit:contain;
	
	-webkit-animation: fadeInAnimation ease 0.5s;
	animation: fadeInAnimation ease 0.5s;
	-webkit-animation-iteration-count: 1;										  
	animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;								  
	animation-fill-mode:forwards;
}

.collageTitleRow {
	width:80vw;
	margin:auto;
	padding:4px;
	vertical-align:middle;
	height:calc(13vh + 6px);
	display:-ms-inline-grid;									  
	display:inline-grid;
	grid-auto-flow:column;
}

.collageTitleLeft, .collageTitleRight {
	height:calc(13vh + 6px);
	overflow:hidden;
	display:inline-block;
}

.collageTitleLeft {
	text-align:right;
}

.collageTitleRight {
	text-align:left;
}

.titleImg {
	margin:4px;
	max-height:13vh;
	-o-object-fit:contain;
	object-fit:contain;
	
	-webkit-animation: fadeInAnimation ease 0.5s;
	animation: fadeInAnimation ease 0.5s;
	-webkit-animation-iteration-count: 1;										  
	animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;								  
	animation-fill-mode:forwards;
}

.homepageButtonRow {
	margin-top:100px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.homepageButton {
	position: relative;
	margin:auto;
	margin-top:16px;
	width: 250px;
	height: 200px;
	
	overflow: hidden;
	border: 8px solid #111;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
.homepageButton:hover {
	border-color:#d01a71;
}

.homepageButton img {
	display:inline-block;
	z-index:1;
	width:100%;
	height:100%;
	-o-object-fit:cover;			 
	object-fit:cover;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
	-webkit-box-flex: 0;
	-ms-flex: 0 0;
	flex: 0 0;
}
.homepageButton:hover img{
	-webkit-filter: blur(6px);
	filter: blur(6px);
}

.overlay {
	z-index:2;
	position: absolute;
	width:100%;
	height:100%;
	background: rgb(0, 0, 0);
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0.7;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
.homepageButton:hover .overlay {
	opacity:0.8;
}

.centered {
	z-index: 3;
	position: absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color:white;
	text-shadow: 1px 1px 5px black;
	font-size: 20px;
	-webkit-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
}
.homepageButton:hover .centered {
	font-size: 25px;

}

/******************** art page ********************/
.artPageMain {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
	/* padding:16px; */
	text-align:center;
	
	
	/* -webkit-box-flex:50; */
	/* -ms-flex-positive:50; */
	/* flex-grow:50; */
}

.mainImageSectionBlock {
	display:block;
	-webkit-box-flex:50;
	-ms-flex-positive:50;
	flex-grow:50;
}
.mainImageSection {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	padding:10px;
}
.prevButton,
.nextButton {
  cursor: pointer;
  position: relative;
  z-index: 10;
  width: auto;
  padding: 16px;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 20px;
  display:inline;
}
.nextButton {right: 0;}
.prevButton:hover, .nextButton:hover {background-color: rgba(50, 50, 50, 0.8);}
.backToGalleryButton {		 
	-webkit-box-ordinal-group:0;
	-ms-flex-order:-1;	
	order:-1;			 
	-webkit-box-flex: 1;
	-ms-flex: 1 0 100%;
	flex: 1 0 100%;
	text-align:center;
}
.prevButton{
	-webkit-box-ordinal-group:2;
	-ms-flex-order:1;
	order:1;
}
.mainImageDiv, .mainVideoDiv{
	-webkit-box-ordinal-group:3;
	-ms-flex-order:2;
	order:2;
}
.mainVideoDiv {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
}

.nextButton{
	-webkit-box-ordinal-group:4;
	-ms-flex-order:3;
	order:3;
}

.artDescriptionSection {
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow:1;
	width:300px;
	min-width:300px;
	padding:16px;
	background-color: #222;
	text-align:left;
}






/* buy art page */
h2 { /* radio button titles */
	font-size: 20px;
	margin-bottom: -10px;
}
.smallTotal { /* small totals */
	font-size: 12px;
	margin: 0px;
	font-weight: normal;
}
h3 { /* total + shipping */
	margin: 0px;
	font-size: 14px;
}
.radioButton {
	cursor: pointer;
}
.radioButton input {
	visibility:hidden;
	width: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
}
.radioButtonLabel {
	margin:5px;
	background-color:#444;
	color: #999;
	padding: 10px 15px;
	display: inline-block;
	border: 5px solid #222;
	font-weight:bold;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}
.radioButton:hover input ~ .radioButtonLabel {
	background-color: #333;
	border: 5px solid #222;
}
.radioButton input:checked ~ .radioButtonLabel {border: 5px solid #cc33cc;}
.button {
	cursor:pointer;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
}

/* cart page */
.cartItem {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background-color: #000;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin:16px;
}
.cartThumb {
	height:50px;
	padding: 16px;
}
.cartItemPair {display:-webkit-box;display:-ms-flexbox;display:flex;}
.cartItemPairFirst {
	width:50px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-right: 5px;
}
.cartItemLHS {
	padding: 16px;
	width: 200px;
}
.cartItemMid {
	padding: 16px;
	width: 200px;
}
.cartItemRHS {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding:16px;
}
.deleteButtonDiv {
	padding-left: 16px;
}
.deleteButton {
	background-color: #444 !important;
	border: none !important;
	color: white !important;
	padding: 5px 8px !important;
	font-weight:bold !important;
}
.deleteButton:hover {background-color: #333 !important;}
.totalPrice, .shippingPrice, .grandTotalPrice {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin: 16px;
	margin-right: 32px;
	font-size: 20px;
	font-weight: bold;
}
.totalPrice, .shippingPrice {
	font-size:12px;
	margin-top: 2px;
	margin-bottom: 2px;
}
.totalPriceFirst, .shippingPriceFirst, .grandTotalPriceFirst {
	margin-right: 16px;
}
.checkoutButtonDiv {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin: 16px 16px 0px; /*top LR bottom*/
	margin-right: 32px;
}
.checkoutButtonFooter {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin-right: 32px;
}
#squareLogo {
	width: 100px;
	vertical-align:-6px;
}

/* bottom of page */
.adBlockText {text-align:center;}
.gau {
	width: 30vw;
	margin: 1px;
}

.policyHeader {
	font-size: 20px;
	font-weight: bold;
	margin-top: 16px;
	margin-bottom: 4px;
}
.policyHeader2 {
	font-size: 15px;
	font-weight: bold;
	margin-top: 12px;
	margin-bottom: 4px;
}
.policyHeader3{
	font-weight: bold;
}

.tab1 {margin-left: 16px;}

.note {font-size: 10px;}
footer {
	background-color:#000000;
	color:#d1d1d1;
	font-size: 10px;
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	height:auto;
}


/************************************* MOBILE ***********************************/
@media only screen	
	and (max-device-width: 1000px) {
	.lhs, topnav, .topSocial, #socialButtons, .topMenu { display: none; } /* hide desktop stuff */
	footer {
		position: relative;
	}
	
	/* make room for menu */
	/* .lhsmain {margin-top:50px;}
	/* .artPageMain {margin-top:50px;} */
	
	#logoDiv, #logo {
		/* width: 20vw; */
		}
	#logo{width:100%;
	max-height:50px;
	-o-object-fit:contain;
	object-fit:contain;}
	
	/* .header { */
		/* since social buttons removed, need to put margin? */
		/* margin-bottom:50px; */
		
	/* } */
	
	
	.collageRow {height:calc(13vh + 2px);}
	.collageRowImg {margin:0px;}
	.collageTitleRow {padding:0px;}
	.titleImg {margin:0px;}
	
	.homepageButton img {
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}

	/******************** Links and Buttons ********************/
	a, .adBlockText, .socialText { font-size: 15px; }
	.button, button {
		font-size: 20px !important;
		padding: 15px 20px !important;
	}
	
	.prevButton,
	.nextButton {
		font-size: 50px;
		padding: 0px;
	}
	
	body {
		font-size: 15px;
		text-align: center;
	}
	.rhs {
		width:80vw;
		margin: 5px;
	}
	
	/* show mobile menu */
	.mobileMenuIcon img {
		-webkit-filter:invert(1);
		filter:invert(1);
		width:30px;
		height:30px;
		margin:auto;
	}
	.mobileMenuIcon{
		background:#444;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width:100%;
		height:100%;
		-webkit-box-align:center;
		-ms-flex-align:center;
		align-items:center;
	}
	
	.mobileMenu {
		display:none;
		visibility: hidden;
		width: 100%;
		height:100vh;
		text-align: center;
		margin-bottom: -100vh;
		overflow: auto;
	}
	.mobileMenu a {
		color: #999;
		background: #111;
		display:block;
		border-right: 5px solid #444;
		border-left: 5px solid #444;
		padding: 15px;
	}
	.mobileMenu a.active{
		color: #f4f4f4;
		background: #333;
		border-color: #d01a71;
	}
	.mobileSocial {
		display: initial;
		width: 100vw;
		text-align: center;
	}
	.socialButton {
		width: 30px;
		margin: 5px;
	}
	
	.lhsmain {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	.mainImageSection{
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
	}
	.backToGalleryButton {
		-webkit-box-ordinal-group:4;
		-ms-flex-order:3;		
		order:3;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 0px;
		flex: 0 0 0;
	}
	.prevButton{
		-webkit-box-ordinal-group:3;
		-ms-flex-order:2;
		order:2;
	}
	.mainImageDiv, .mainVideoDiv {
		-webkit-box-ordinal-group:6;
		-ms-flex-order:5;
		order:5;
		-webkit-box-flex:1;
		-ms-flex:1 0 100%;
		flex:1 0 100%;
	}
	.nextButton{
		-webkit-box-ordinal-group:5;
		-ms-flex-order:4;
		order:4;
	}
	
	.mainImage {
		/* minus the mainImageSection padding */
		max-width: calc(100vw - 20px);
		max-height: 100vh;
	}
	.video {
		max-width: calc(100vw - 20px);
		max-height: calc(100vw - 100px);
		width: calc(100vw - 20px);
		height: calc(100vw - 100px);
	}
	
	.gau {
		width: 80vw;
	}
	
	.policyHeader {font-size: 25px;}
	.policyHeader2 {font-size: 20px;}
}


@media only screen	
	and (max-device-width: 790px) {
	
	.collageTitleLeft, .collageTitleRight {
		display:none;
	}
}