/* Crowning Portraits */



/* GLOBAL */

:root {
  --blacktext: #302b2b;
  --bronze: #5D5036;
  --gold: #a5885d;
  --goldtext: #bb9a67;
  --beige: #edd49e;
  --beigelite: #ffe9ba;
  --teal: #00CED1;
  --orange: #bb3b0c;
  
  --navy: #2e3b52;
  --emerald: #437c8b;
  --lightemerald: #b8e2e2;
  --gold: #bb9a67;
  --gray: #d7d1cc;
  --whitesmoke: #f5f5f5;
}

/*
@font-face {
    font-family: TrajanPro-Regular;
    src: url('fonts/TrajanPro-Regular.ttf') format('opentype');
}
*/

html, body {
	height: 100%;
	margin: 0em;
	padding: 0em;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: var(--gray);
	color: var(--blacktext);
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;     /* Makes website scroll faster on mobile devices */
}

#wrapper {
	min-height:100%;
	position:relative;
}

main {
	padding-bottom: 5em;	/* Height of the footer */
}

a {
	color: var(--emerald);
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: white;
}

button, .button{
	padding: 14px 20px 20px 20px;
	background-color: var(--emerald);
	color: white;
	height: 2.5em;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	display: inline;
	width: auto;
	text-align: center;
	margin: 30px 10px 30px 10px !important;
}

button:hover, .button:hover {
	color: white;
	background-color: black;
}

.buttonB {
	margin: 1em auto;
	height: 2.5em;
	font-size: 18px;
	border: 2px solid var(--emerald);
	border-radius: 5px;	
	background-color: transparent;
	color: black;
}

.buttonB:hover {
	color: white;
	background-color: black;
}

.miniButton {
	background-color: var(--emerald);
	color: white;
	height: 2em;
	font-size: 12px;
	border: none;
	border-radius: 5px;
	-webkit-appearance: none;
}

.miniButton:hover {
	color: white;
	background-color: black;
}

.miniButtonAlt {
	height: 2em;
	font-size: 12px;
	border: 2px solid var(--emerald);
	border-radius: 5px;	
	background-color: transparent;
	color: var(--blacktext);
	font-weight: 600;
}

.miniButtonAlt:hover {
	color: white;
	background-color: black;
}

.title {
	margin: 2em 0em 0em 0em;
	color: var(--blacktext);
	font-size: 45px;
}

a img,:link img,:visited img, img {
	border: none;
}



/* HEADER */

header {
	width: 100%;
	background-color: black;
	background-image: url('/images/resources/black-background.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.eCommerce {
	display: inline-block;
	float: right;
}

.logo {
	display: inline-block;
	text-align: center;
	width: 100%;
	position: relative;
	padding: 15px 0px 25px 0px;
}

.tm {
	font-size: 6px;
	display: inline;
	vertical-align: top;
}

.cartIcon {
	max-width: 28px;
	display: inline;
	margin: 1em 0em 0em -4em;
	position: relative;
}

.numberOfItemsInCart {
	font-family: sans-serif;
	font-size: 14px;
	margin: -1em 0em 0em -2.5em;
	padding: 0em;
	color: var(--emerald);
	position: relative;
}

header ul {
	list-style-type: none;
}

header li {
	display: inline-block;
}



@media only screen and (max-width: 50em) {
  .desktopNav {
	  visibility: hidden;
	}
}



/* Desktop Nav */

.desktopNav {
	margin: -1em 0em 0em -0.6em;
	padding-top: 1px;
	font-weight: 300;
	background: var(--emerald);
	height: 3em;
}	

.desktopNav a {
	color: var(--lightemerald);
	font-weight: 300;
	position: relative;
}

.desktopNav a:hover {
	color: white;
}

@media only screen and (min-width: 50em) {
  .mobileNav {
	  visibility: hidden;
	}
}



/* Mobile Nav */

.mobileNav {
	margin: -3.2em 0em 0em -1em;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: var(--goldtext);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
  background-color: black;
  border-bottom: 1px solid #2d2c2c;
  z-index: 1;
}

#menu, 
#toggle-menu {
  background: var(--emerald);
  color: var(--lightemerald);
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  background-color: gray;
  color: black;
  font-weight: 500;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#toggle-menu:hover {
	text-rendering: optimizeLegibility;
	color: white;
}


@media only screen and (max-width: 50em) and (min-width: 50.01em) {
  #menu li {
    width: 33.333%;
  }
}

@media only screen and (min-width: 50em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu {
    display: none;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}



/* HOMEPAGE */

#cover {
	width: 90%;
	height: auto;
	margin: 6em auto;
}

#cover img {
	max-width: 800px;
	max-height: auto;
	width: 90%;
	height: auto;
	margin-left: -5em;
	box-shadow: 0px 0px 0px 2px var(--emerald), 0px 0px 0px 20px var(--bronze);
	border: 10px solid var(--bronze);
	border-radius: 5px;
}

#homepageButton {
	margin: 0em 0em 2em 0em;
}

#intro {
	text-align: left;
	max-width: 700px;
	padding: 10px;
	margin-top: -4em;
}

#intro h1 {
	text-align: center;
}



/* GALLERIES */

.gallery_caption_box {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 300px;
    font-size: 12px;
    margin: 5px;
}

.gallery_image_box:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}
    
.gallery_image_box {
    display: inline-block;
    text-align: center;
    width: 270px;
    height: 270px;
    padding: 8px;
}

@media only screen and (max-width: 768px) {
  .gallery_image_box {
	  display: none;
	}
}

.gallery_image_box2:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}
    
.gallery_image_box2 {
    display: inline-block;
    text-align: center;
    width: 270px;
    height: 270px;
    padding: 8px;
    position: relative;
}

@media only screen and (min-width: 769px) {
  .gallery_image_box2 {
	  display: none;
	}
}

.gallery_thumbnail {
    max-width: 265px;
	max-height: 265px;
	margin: auto;	
	display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 7px #555;
}
	
.gallery_thumbnail:hover {
	box-shadow: 0 0 17px #333;
	-webkit-filter: brightness(105%);
}

.captionPortrait {
    text-align: center;
    margin: -10px 0px 0px 0px;
    font-size: 17px;
    line-height: 2px;
}

.captionLandscape {
    text-align: center;
    margin: -55px 0px 0px 0px;
    font-size: 17px;
    line-height: 2px;
}

#picCount {
	font-size: 14px;
}



/* GALLERY DESKTOP */

#gallery_breadcrumb {
	margin-left: 1em;
	margin-top: 1em;
}

#gallery_name {
	text-align: center;
	font-size: 2em;
	line-height: 5px;
	margin-top: 0em;
	color: var(--blacktext);
}

@media only screen and (max-width: 45em) {
  #gallery_name {
	  font-size: 0.5em;
	}
}

.image_box:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}
    
.image_box {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 300px;
    height: 300px;
    margin: 5px;
    padding: 8px;
}
	
.thumbnail {
    max-width: 295px;
	max-height: 295px;
	display: inline-block;
	margin: -15em 0em -15em 0em;
    vertical-align: middle;
    box-shadow: 0 0 7px #555;
    position: relative;
	}
	
.thumbnail:hover {
	box-shadow: 0 0 17px #555;
	-webkit-filter: brightness(105%);
}



/* GALLERY MOBILE */

.backArrowIcon {
	position: fixed;
	top: 2%;
	left: 0%;
	width: 40px;
	height: 40px;
	z-index: 300;
}

#circle-back-arrow-outline-stroke {
	fill: black;
}

#gallery2_name {
	margin-left: 1.5em;
	margin-top: 5em;
	font-size: 20px;
	line-height: 5px;
	color: var(--blacktext);
}

@media only screen and (max-width: 45em) {
  #gallery2_name {
	  font-size: 15px;
	  text-align: center;
	  margin-left: 0em;
	}
}

.mobileImageWrapper {
	position: relative;	
	width: 89%;
	height: auto;
}

.mobileImage {
	width: 89%;
	height: auto;
	margin: 1.5em;	
    vertical-align: middle;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: block;
}



/* PASSWORD FORM */


#pw_form {
	background-color: var(--whitesmoke);
	border: 1px solid var(--gray);
	border-radius: 10px;
	width: 220px;
	height: auto;
	vertical-align: middle;
	margin: 2em auto;
	font-family: sans-serif;
	padding: 2em;
	z-index: 10;
}

#cancelButton {
	background-color: transparent;
	color: black;
	width: 7em;
	margin: 0.5em;
	border: 1px solid black;
	border-radius: 5px;
}

#cancelButton:hover {
	background-color: black;
	color: white;
}

#submitButton {
	background-color: var(--emerald);
	color: white;
	width: 7em;
	margin: 0.5em;
	border: none;
	border-radius: 5px;
}

#submitButton:hover {
	background-color: black;
	color: white;
}

#pwTitle {
	color: black;
	margin: 0em;
	padding: 0em;
}

#incorrectMessage {
	color: black;
	background-color: var(--gold);
	padding: 1em;
}



/* PHOTO */
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-image: url("../images/resources/loading.gif");
	background-repeat: no-repeat;
	background-position: center;
	background-color: #222222;
}

#photoBoxNav{
	width: 98% !important;
	height: 60px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: -2.75em 0em 0em 0em;
	padding: 0em 0em 0em 1em;
}

@media only screen and (max-width: 45em) {
  #photoBoxNav {
	  display: none;
	}
}

#photoBreadcrumb {
	float: left;
}

@media only screen and (max-width: 64em) {
  #photoBreadcrumb {
	  display: none;
	}
}

.photoWrapper {
	position: relative;
	height: 80vh; /* must be same size as #photoImage */
	width: auto;
	display: block;
}

#photoImage{
	max-height: 80vh !important;
	max-width: 80vw !important;
	width: auto;
	height: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: block;
}

@media only screen and (min-width: 1500px) {
  #photoImage {
	max-width: 1600px;
	max-height: 1600px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

@media only screen and (max-width: 64em) {
  #photoImage {
	  /*height: 85%;
	  width: auto;*/
	  max-width: 85%;
	  height: auto;
	  margin-top: -3em;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

@media only screen and (max-width: 35em) {
  #photoImage {
	  height: auto;
	  width: 85%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}



/* Add to Cart */

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

.white_content {
	display: none;
	position: absolute;
	left: 40%;
	top: 30%;
	margin: 0em auto;
	width: 300px;
	background-color: var(--gold);
	z-index:1002;
	overflow: auto;
}

@media only screen and (max-width: 45em) {
	.white_content {
		display: none;
		position: absolute;
		left: 15%;
		top: 5%;
		margin: 0em auto;
		width: 300px;
		background-color: var(--beige);
		z-index:1002;
		overflow: auto;
	}
}

#orderSelectTable {
	width: 95%;
	border-collapse: collapse;
    border-spacing: 0;
    padding: 0em;
    background-color: var(--beigelite);
}

#orderSelectTable td {
	padding: 10px;
	border: 1px solid var(--gold);
}

#cQty {
	width: 2em;
	padding: 0em;
}

#cQty input {
	width: 2em;
	padding: 0em;
}

#cProd {
	width: 5em;
	padding: 0em;
	text-align: left;
}

#cPrice {
	width: 3em;
	padding: 0em;
	text-align: right;
}



/* Icons */

#leftIcon{
	vertical-align: middle;
	width: auto;
	height: 50px;
	position: fixed;
	top: 50%;
	left: 5%;
	z-index: 100;
}

#rightIcon{
	vertical-align: middle;
	width: auto;
	height: 50px;
	position: fixed;
	top: 50%;
	right: 5%;
	z-index: 100;
}

#shareMenu {
	display:inline-block;
}

#exitIconSolo{
	position: fixed;
	top: 0.25em;
	left: 0.25em;
	width: 10%;
	display: none;
	opacity: .5;
}

@media only screen and (max-width: 64em) {
  #exitIconSolo {
	  display: inline;
	}
}



/* SUGGESTIONS */

#tipsbox {
	max-width: 600px;
	margin: 2em;
	text-align: left;
	border: 2px solid var(--emerald);
	border-radius: 20px;
	padding: 2em;
	font-size: large;
	background-color: var(--lightemerald);
	color: var(--blacktext);
}

#tipsbox li {
	margin-bottom: 1.5em;
}



/* PRICES */

#pricingTable {
	max-width: 800px;
	border-collapse: collapse; 
	border-spacing: 0;
	background: whitesmoke;
	font-size: small;
}

#pricingTable th {
	border-top: 3px solid var(--emerald);
	border-bottom: 3px solid var(--emerald);
	padding: 2em;
	margin: 0em;
	background-color: var(--lightemerald);
	color: var(--emerald);
}

#pricingTable td {
	border-bottom: 1px solid black;
	padding: 1em;
	margin: 0em;
	vertical-align: top;
	text-align: left;
}

.narrow {
	max-width: 575px;
	text-align: left;
	padding: 20px;
}

@media screen and (min-width: 700px){
	#pricingTable {
		font-size: 16px;
	}
	#pricingTable td {
		padding: 2em;
	}
	#pricingTable th {
		padding: 2em;
	}
}


/* ABOUT */

#aboutbox {
	max-width: 45em;
	height: auto;
	margin: 0em 0em 4em 1em;
	padding: 3em;
    color: var(--blacktext);
    position: relative;
}

#aboutText {
	text-align: left;
}

#about img {
	max-width: 300px;
	max-height: auto;
	margin: 0em;
    box-shadow: 0 0 17px #222;
    display: inline;
    float: left;
    margin: 0em 2em 2em 0em;
}

#aboutbox ul {
	padding-left: 30px;
}



/* CONTACT */

body a,form li,input[type="submit"],input[type="text"],input[type="email"]{
	transition: 0.1s all;
	-webkit-transition: 0.1s all;
	-moz-transition: 0.1s all;
	-o-transition: 0.1s all;
}

.registration h2 {
	text-align: center;
	color: black;
	font-size: 1.5em;
	font-weight: 500;
	background: transparent;
	padding: 15px;
	border-bottom: none;
	margin-bottom: 0px;
	margin: 1em;
}	
		
.form-info {
	margin: 2em 2em 0 2em;
}

.registration {
	width: 27%;
	margin: 2% auto 0;
	padding-bottom: 1%;
	border: 1px solid var(--gray);
	border-radius: 15px;
    padding-top: 0.1em;
    margin-bottom: 3em;
    background: var(--whitesmoke);
}

input.text {
	outline: none;
	background: none;
	color: black;
	width: 94%;
	padding: 10px 10px;
	border: 1px solid var(--gray);
	border-radius: 5px;
	font-size: 1em;
	font-weight: 100;
	margin-bottom: 1em;
}

input.text:hover {
	background: #fff;
	color: #3E4E95;
    transition: 2s all;
	-webkit-transition: 2s all;
	-moz-transition: 2s all;
	-o-transition: 2s all;
}

textarea {
	outline: none;
	background: none;
	color: black;
	width: 94%;
	padding: 10px 10px;
	border: 1px solid var(--gray);
	resize: none;
}

textarea:hover {
	background: #fff;
	color: #3E4E95;
	transition: 2s all;
	-webkit-transition: 2s all;
	-moz-transition: 2s all;
	-o-transition: 2s all;
}

input[type="submit"] {
	width: 95%;
	margin: 1em 0 .5em 0;
	padding: 12px;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	height: 3em;
	-webkit-appearance: none;
}

.g-recaptcha { 
	width: 90%;
	margin: 1em auto;
}

@media screen and (max-width: 700px){
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.75);
		-webkit-transform:scale(0.75);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
	}
}

.succMsg{ color:#009755 ; font-size: 15px;font-weight: bold;padding-top: 15px;}
.errMsg{ color:#ea3b0f ; font-size: 15px;font-weight: bold;padding-top: 15px;}

@media (max-width:1440px){
	.registration {
	  width: 31%;
	}
}

@media (max-width:1366px){
	
}

@media (max-width:1280px){
	.registration {
	  width: 33%;
	}	
}

@media (max-width:1024px){
	.registration {
	  width: 41%;
	    margin: 1% auto 0;
	}
	
	.registration {
	  margin: 2% auto 0;
	}
}

@media (max-width:768px){
	.registration {
	  width: 50%;
	}
	
	input[type="submit"] {
	  width: 100%;
	}
	.registration {
	  margin: 3% auto 0;
	}
	
}

@media (max-width:640px){
	.registration {
	  width: 82%;
	    margin: 3% auto 0;
	}
	
}

@media (max-width:480px){
	.registration {
	  width: 85%;
	}
	
}

@media (max-width:320px){
	
	.registration {
	  width: 92%;
	    margin: 4% auto 0;
	}
	textarea {
	  width: 94%;
	  padding: 7px 6px;
	  height: 200px;
	}
	.form-info {
	  margin: 1em 1em 0 1em;
	}
	
	input.text {
	 padding: 10px 6px;
	}
	input[type="submit"] {
	  width: 99%;
	  padding: 8px;
	  font-size: 14px;
	}
}



/* CART */

#cartBox {
	background-color: var(--beige);
	max-width: 53em;
	border: 1px solid black;	
	font-family: sans-serif;
}

.cartItemBox {
	background-color: var(--gold);
	width: 92%;
	border: 1px solid black;
	padding: 5px;
}

.cartItemBox img {
	margin-right: 10px; 
	width: 100px; 
	height: auto; 
	display: inline-block; 
	padding: 5px;
}

#info {
	max-width: 300px;
	margin-right: 2em;
	display: inline-block;
	text-align: left;
	vertical-align:top;
	margin-top:1em;
}

#imageFileName {
	font-size: 60%;
}

#quantity {
	display:inline-block; 
	vertical-align:top; 
	margin:20px;
}

#quantity input {
	width:40px;
	text-align: center;
}

#cost {
	width: 60px;
	display: inline-block;
	vertical-align: top;
}

#totalCost {
	width: 120px;
	display: inline-block;
	vertical-align: top;
}

#trashCanDiv {
	width: 100px;
	display: inline-block;
	vertical-align: top;
	margin-top: 1.5em;
}

#trashCanImage {
	width: 20px; 
	height: auto; 
	padding: 0em 0em 2em 0em;
}

#trashCanImage:hover {
	-webkit-filter: brightness(110%);	
}

.cartLink {
	font-family: sans-serif;
	font-size: 10px;
	text-decoration: underline;
	line-height: 25px;
}

#totals {
	padding-top: 5em;
	text-align: right;
	margin-right: 2em;
	line-height: 0px;
}

#totals p {
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: 12px;
}

#promoCodeArea {
	text-align: left;
	margin-left: 1.8em;
	margin-right: 1em;
	display: inline-block;
	position: relative;
	float: left;
}

#promoCodeArea h2 {
	font-size: 15px;
}

#promotionCode {
	margin-right: 10px;
	width: 7em;
}



/* Delivery Options */

.deliveryOptions {
  display: inline-block;
  text-align: left;
  float: right;
  margin: 0.25em 1.6em 0em 0em;
  font-size: 10px;
}
.control {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  padding-right: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 15px;
  padding-top: 5px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #0e647d;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}



/* CHECK OUT */

.progressTable, th, tr, td {
	text-decoration: none;
	background: none;
	text-align: center;
	padding: 0.4em 4em 0.4em 4em;
}

.progressTable {
	border-collapse:collapse;
}

.numberCircle {
    font-size: 25px;
    font-weight: bold;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    padding: 0.2em;
    border: 2px solid #876635;
    color: var(--beige);
    text-align: center;
}

.numberCircle:hover {
    color: var(--gold);
    background: black;
}

.numberCircleActive {
    font-size: 25px;
    font-weight: bold;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    padding: 0.2em;
    background: var(--beige);
    border: 2px solid #876635;
    color: var(--gold);
    text-align: center;
}

#addressFrame {
	background-color:var(--beige); 
	max-width:40em; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#addresses {
	position: relative;
}

.addressTable {
	width: 20em;
	margin-top: -8em;
}

.addressTable tr, .addressTable td {
	border: none;
	padding: 3px;
}

.addressTable input {
	width: 15em;
}

.formHeader {
	display:block;
	width:100%;
	height:1.5em;
	background:var(--bronze);
	color:var(--gold);
	margin-top:-1.4em;
	padding-top:15px;
}

#paymentFrame {
	background-color:var(--beige); 
	max-width:40em; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sq-input {
	border: 1px solid #CCCCCC;
	margin-bottom: 10px;
	padding: 1px;
	width: 200px;
}
.sq-input--focus {
	outline-width: 5px;
	outline-color: #70ACE9;
	outline-offset: -1px;
	outline-style: auto;
}
.sq-input--error {
	outline-width: 5px;
	outline-color: #FF9393;
	outline-offset: 0px;
	outline-style: auto;
}

#reviewFrame {
	background-color:var(--beige); 
	max-width:70em; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#orderSummaryFrame {
	margin:20px; 
	width: 37em; 
	background-color:var(--beigelite); 
	display:inline-block; 
	vertical-align:top; 
	border: 1px solid black;
}

#totalsColumn {
	float:right; 
	margin-right:1.7em; 
	text-align:right;
}

#reviewItemBox {
	background-color: var(--beige); 
	width: 92%; 
	border: 1px solid black;
}

#reviewItemBox img {
	margin: 5px; 
	width: 100px; 
	height: auto; 
	display: inline-block;
}

#itemPicFileName {
	font-size:10px;
}

#reviewItemBoxPricing {
	display:inline-block; 
	vertical-align:top; 
	margin-left:10px; 
	margin-right:10px;
}

#reviewMiniBoxesFrame {
	margin:20px; 
	width:30%;  
	display:inline-block; 
	vertical-align:top;
}

.reviewMiniBox {
	margin-bottom:20px; 
	background-color:var(--beigelite); 
	width:90%; 
	display:inline-block; 
	border: 1px solid black;
}

.reviewMiniBox h3 {
	text-decoration:underline;
}


@media screen and (max-width: 700px){
	#progressTable, th, tr, td {
		padding: 0.5em 2em 0.5em 2em;
	}
	
	.addressTable input {
	width: 10em;
	}
	
	.addressTable {
	width: 18em;
	}
	
	#orderSummaryFrame {
		width: 90%
	}
	#reviewMiniBoxesFrame {
	width:90%;  
	}
}





/* FOOTER */

footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:7em;			/* Height of the footer */
	background: black;
	line-height: 15px;
	color: var(--gold);
}

footer a {
	color: var(--gold);
}

footer ul {
	list-style-type: none;
}

footer li {
	display: inline-block;
}



/* ******** ADMIN PORTAL******** */

#portalName {
	height: 1em;
	width: 100%;
	Margin-top: 4.25em;
	padding-top: 1em;
	background-color: #1d6cb1;
	font-size: 12px;
	line-height: 5px;
	display: block;
	position: absolute;
	vertical-align: center;
}

#portalName a {
	color: var(--beige);
}

#portalName a:hover {
	color: white;
}

#adminMenu {
	font-size: 20px;
	line-height: 1.75em;
}

.adminForm {
	width: 20em;
	background-color: var(--beige);
	padding: 3em 1em 1em 1em;
}



/* ADMIN: PRODUCTS */

#prodTableFrame {
	max-width: 900px;
	background-color: var(--beige);
	overflow-x: auto;
}

#prodTable {
	width: 100%;
	border-collapse: collapse;
    border-spacing: 0;
}

#prodTable td {
	font-size: 12px;
	border-top: 1px solid var(--gold);
	padding: 1em 0em 1em 0em;
}

#prodTable input, #prodTable textarea, #prodTable checkbox {
	background-color: white;
	border: 1px solid #c0c0c0;
	color: var(--blacktext);
}

#colType {
	padding: 0;
	font-weight: bold;
}

#colRemove {
	padding: 0;
}

#colProduct {
	padding: 0;
}

#colProduct input {
	width: 11em;
	height: 2.5em;
}

#colPrice {
	padding: 0;
	min-width: 4em;
}

#colPrice input {
	width: 4.5em;
	height: 2.5em;
	text-align: right;
}

#colShipping {
	padding: 0;
	min-width: 4em;
}

#colShipping input {
	width: 4.5em;
	height: 2.5em;
	text-align: right;
}

#colSize {
	padding: 0;
}

#colSize input {
	width: 4.5em;
	height: 2.5em;
	text-align: right;
}

#prodTable thead {
	font-weight: bold;
	background-color: var(--bronze);
	color: var(--beige);
}

#newProductRow {
	background-color: var(--beigelite);
	border-bottom: 1px solid var(--gold);
}

@media screen and (max-width: 700px){
	
	#prodTable thead {
	font-size: 11px;
	}
}



/* ADMIN: PROMOTIONS */

#promoTableFrame {
	max-width: 650px;
	background-color: var(--beige);
	overflow-x:auto;
}

#promoTable {
	width: 100%;
	border-collapse: collapse;
    border-spacing: 0;
}

#promoTable td {
	font-size: 12px;
	border-top: 1px solid var(--gold);
	padding: 1em 0em 1em 0em;
}

#promoTable input, #promoTable textarea, #promoTable checkbox {
	background-color: white;
	border: 1px solid #c0c0c0;
	color: var(--blacktext);
}

#promoTable thead {
	font-weight: bold;
	background-color: var(--bronze);
	color: var(--beige);
}

#newPromoRow {
	background-color: var(--beigelite);
	border-bottom: 1px solid var(--gold);
}

#colRemv {
	padding: 0;
}

#colType {
	padding: 0;
	font-weight: bold;
}

#colPromoCode {
	padding: 0;
}

#colPromoCode input {
	width: 7em;
	height: 2.5em;
}

#colTyp {
	padding: 0;
	min-width: 4em;
}

#colTyp input {
	width: 5.5em;
	height: 2.5em;
}

#colVal {
	padding: 0;
	min-width: 4em;
}

#colVal input {
	width: 4.5em;
	height: 2.5em;
	text-align: right;
}

#colThreshold {
	padding: 0;
}

#colThreshold input {
	width: 4.5em;
	height: 2.5em;
	text-align: right;
}

#colExpire {
	padding: 0;
}

#colExpire input {
	width: 10em;
	height: 2.5em;
}

#colSingle {
	padding: 0;
}

#notes {
	max-width: 650px;
	text-align: left;
}

#promoTable th {
	padding: 10px 5px 10px 5px;
}

@media screen and (max-width: 700px){
	
	#promoTable thead {
	font-size: 11px;
	}
}


/* 404_ERROR */

.lost {
	width: 22em;
	margin: 2em auto;
	text-align: left;
	line-height: 25px;
}