/* Marissa's Photography */



/* GLOBAL */

:root {
  --charcoal: #373737;
  --lightgray: lightgray;
  --offwhite: #FAFAFA;
  --deepgray: #5f5f5f;
  --tan: #DCD0C0;
  --lightblue: #63bdfd;
  --blue: #1c9efa;
  --orange: var(--orange);
}

html, body {
	height: 100%;
	margin: 0em;
	padding: 0em;
	font-family: 'arial', sans-serif;
	font-size: 14px;
	font-weight: 100;
	background-color: black;
	background-image: url("/images/resources/fabric-of-squares.png");
	color: gray;
	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 */
	margin-top: -3em;
}

p {
	line-height: 19px;
}

a {
	color: var(--lightblue);
	font-weight: 100;
	font-family: "arial", sans-serif;
	text-decoration: none;
}

a:hover {
	color: white;
}

.vanilla {
	color: gray;
	text-decoration: none;
}

button, .button{
	margin: 1em auto;
	background-color: var(--lightblue);
	color: white;
	height: 2em;
	font-size: larger;
	border: none;
	border-radius: 5px;
	width: auto;
}

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

.buttonB {
	margin: 1em auto;
	height: 2em;
	font-size: larger;
	border: 2px solid var(--lightblue);
	border-radius: 5px;	
	background-color: transparent;
	color: gray;
}

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

.miniButton {
	background-color: var(--orange);
	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(--orange);
	border-radius: 5px;	
	background-color: transparent;
	color: lightgray;
	font-weight: 600;
	-webkit-appearance: none;
}

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

.title {
	margin: 4em 0em 0em 0em;
	color: var(--deepgray);
	font-size: 35px;
}

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

@media only screen and (max-width: 500px) {
  .title {
	  font-size: 35px;
	}
}



/* HEADER */

header {
	padding: 0.5em 0em 0em 0.5em;
	position: relative;
	height: 5em;
	width: 100%;
	z-index: 3;
}

.eCommerce {
	display: inline-block;
	float: right;
	margin: 0em 2em 0em 0em;
}

.cartIcon {
	max-width: 28px;
	display: inline;
	position: relative;
	z-index: 5;
}

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

.logo_nav {
	position: relative;
}

.logo {
	text-decoration: none;
	display: inline-block;
	margin: 1em 0em 0em 0em;
}

.logo:hover {
	font-weight: 200;
}

#first {
	font-family: 'Rock Salt', cursive;
	color: var(--blue);
	font-size: 2.5em;
	font-weight: 100;
	line-height: 0em;
	}

#last {
	font-family: 'Maven Pro', sans-serif;
	font-size: 3em;
	color: var(--deepgray);
	line-height: 1.5em;
	font-weight: 100;
	}


.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	width: 1000px;
	margin: 2em 0em 4em 0em;
	padding: 0;
	line-height: 25px;
	border-top: 1px solid #b9b9b9;
	border-bottom: 1px solid #b9b9b9;
	text-align: center;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:relative" */
nav ul {
	padding:0;
	margin: 0em 0em 0em -4em;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	background-color: transparent; /* nav bar */
	}
		
/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color: var(--lightblue); /*#C0B283;*/
	font-size:12px;
	font-family: "arial", sans-serif;
	font-weight: 100;
	text-decoration:none;
	line-height: 25px;
}


nav ul li ul li:hover { background: #787878; }

/* Background color change on Hover */
nav a:hover { 
	color: white; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 35px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
	background-color: #1f1f1f;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:110px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 900px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 1em 0.5em 0em -0.5em;
		text-align: center;
		width: 98%;
	}
	
			
	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #161616;
		padding:14px 20px;	
		color: var(--lightblue);
		font-size:17px;
		text-decoration:none;
		border:none;
		height: 1.25em;
		line-height: 1em;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0em 0em 0em 2.1em;
		background-color: var(--deepgray);
	}
	
	nav ul li a {
		vertical-align: middle;
		line-height: 12px;
	}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: var(--lightblue);
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
	nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 530px) {

	#first {
		font-size: 1.75em;
	}
	
	#last {
		font-size: 1.75em;
	}
			
	.toggle {
		background-color: #191919;
		height: 0.5em;
		line-height: 5px;
	}
	
	nav {
		width: 96%;
	}
}



/* HOMEPAGE */

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

#cover img {
	max-width: 800px;
	max-height: auto;
	width: 90%;
	height: auto;
	margin-left: -5em;
	/*box-shadow: 0px 0px 0px 1px #1c9efa, 0px 0px 0px 20px var(--deepgray);*/
	border: 15px solid var(--deepgray);
}

#cover ul {
	list-style: none;
}

#intro {
	text-align: left;
	max-width: 800px;
	padding: 10px;
	margin-top: -11em;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

#intro h1 {
	text-align: center;
	margin-top: 0em;
	font-size: 40px;
}

@media all and (max-width : 900px) {
	
	#cover {
		margin: 8.5em 0.5em 0em 0.5em !important;
	}	
	
	#cover img {
		border: 3px solid var(--deepgray);
	}
	
	#intro {
		margin-top: 0em;
	}

}	


@media all and (max-width : 530px) {
	
	#cover {
		margin: 5.6em 0.5em 0em 0.5em !important;
	}
	
	#cover img {
		border: 3px solid var(--deepgray);
	}
	
	#intro {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	    margin-top: 0em;

	}
}	

/* 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: 280px;
    height: 280px;
    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: 280px;
    height: 280px;
    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 #222;
    border: 5px solid gray !important;
}
	
.gallery_thumbnail:hover {
	box-shadow: 0 0 17px #222;
	-webkit-filter: brightness(115%);
}

.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: 7em;
}

#gallery_name {
	margin-left: 0.5em;
	font-size: 2em;
	line-height: 5px;
	margin-top: 0em;
	color: var(--deepgray);
}

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

.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: 175px;
    height: 175px;
    margin: 5px;
    padding: 8px;
}
	
.thumbnail {
    max-width: 170px;
	max-height: 170px;
	margin: auto;	
	display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 7px #222;
    position: relative;
    border: 1px solid gray;
	}
	
.thumbnail:hover {
	box-shadow: 0 0 17px #222;
	-webkit-filter: brightness(120%);
}
		
.galleryheart {
	width:20px; 
	height:auto; 
	position: absolute; 
	right: 30px; 
	bottom: 35px;
}	



/* GALLERY MOBILE */

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

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

#gallery2_name {
	margin-left: 1.5em;
	margin-top: 7em;
	font-size: 20px;
	line-height: 5px;
	color: #302b2b;
}

@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;
}

.mobileHeartContainer {
	position: absolute; 
	right: 20px; 
	bottom: 0px;
}

.mobileheart {
	width:20px; 
	height:auto; 
	float:left; 
}

.mobilefavcount {
	color:#0bbcf7; 
	display:inline-block;
	float:right;
}



/* PASSWORD */
#pw_form {
	background-color: var(--deepgray);
	width: 220px;
	height: auto;
	vertical-align: middle;
	margin: 2em auto;
	font-family: sans-serif;
	padding: 2em;
}
#cancelButton {
	background-color: transparent;
	color: var(--lightblue);
	width: 9em;
	margin: 0.5em;
	border: 1px solid var(--lightblue);
}
#cancelButton:hover {
	background-color: black;
	color: white;
}
#submitButton {
	background-color: var(--lightblue);
	color: var(--deepgray);
	width: 9em;
	margin: 0.5em;
	border: none;
	-webkit-appearance: none;

}
#submitButton:hover {
	background-color: black;
	color: white;
}
#pwTitle {
	color: var(--lightgray);
	margin: 0em;
	padding: 0em;
}
#incorrectMessage {
	color: black;
	background-color: var(--lightgray);
	padding: 1em;
}
.formInput {
	background: var(--lightgray);
}



/* 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: -4.75em 0em 0em 0em;
	padding: 0em 0em 0em 1em;
}

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

#photoBreadcrumb {
	float: left;
	color: black;
	}
	
#photoBreadcrumb a {
	text-decoration: none;
	color: var(--lightblue);
	font-family: "arial", sans-serif;
	font-weight: 100;
}

#photoBreadcrumb a:hover {
	color: black;
}

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

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

#photoImage{
	height: 90%;
	width: 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;
	  margin-top: -4.25em;
	  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(--lightgray);
	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: #edd49e;
		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;
	}
}



/* PRICES */

#pricingTable {
	max-width: 800px;
	margin: 0em;
	border-collapse: collapse; 
	border-spacing: 0;
	background: var(--lightgray);
}

#pricingTable th {
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	background: var(--charcoal);
	padding: 1em;
	margin: 0em;
}

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

.narrow {
	max-width: 375px;
	text-align: left;
}



/* ABOUT */
#aboutbox {
	max-width: 45em;
	height: auto;
	margin: 0em 0em 4em 1em;
	padding: 3em;
    position: relative;
}

#aboutText {
	text-align: left;
	margin-top: -15px;
}

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

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



/* CONTACT */

#contactFormTitle {
	color: var(--lightgray);
}

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 black;
    padding-top: 0.1em;
    margin-bottom: 3em;
    background: var(--deepgray);
}
input.text {
	outline: none;
	background: none;
	color: #fff;
	width: 94%;
	padding: 10px 10px;
	border: 1px solid var(--lightgray);
	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: #fff;
	width: 94%;
	padding: 10px 10px;
	border: 1px solid var(--lightgray);
	font-size: 1.1em;
	font-weight: 100;
	resize: none;
	height: 120px;
	font-family: 'Open Sans', sans-serif;
}
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: 900px){
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.75);
		-webkit-transform:scale(0.75);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
		width: 80%;
	}
}

.succMsg{ color:#009755 ; font-size: 15px;font-weight: bold;padding-top: 15px;}
.errMsg{ color:#fb4314 ; 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: 100px;
	  font-size: .97em;
	}
	.form-info {
	  margin: 1em 1em 0 1em;
	}
	
	input.text {
	 padding: 10px 6px;
     font-size: .9em;
	}
	input[type="submit"] {
	  width: 99%;
	  padding: 8px;
	  font-size: 14px;
	}
}



/* CART */

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

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

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

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

#imageFileName {
	font-size: 60%;
}

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

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

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

#totalCost {
	width: 110px;
	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(130%);	
}

.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;
}



/* CHECKOUT */

.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: 1px solid var(--lightgray);
    color: var(--lightgray);
    text-align: center;
}

.numberCircle:hover {
    color: white;
    background: black;
}

.numberCircleActive {
    font-size: 25px;
    font-weight: bold;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    padding: 0.2em;
    background: black;
    border: 1px solid black;
    color: white;
    text-align: center;
}

#addressFrame {
	background-color:var(--lightgray); 
	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(--charcoal);
	color: gray;
	margin-top:-1.4em;
	padding-top:15px;
}

#paymentFrame {
	background-color:var(--lightgray); 
	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(--lightgray); 
	max-width:72em; 
	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 20px 20px 0px; 
	width: 42em; 
	background-color: var(--offwhite); 
	display:inline-block; 
	vertical-align:top; 
	border: 1px solid black;
}

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

#reviewItemBox {
	background-color: var(--lightgray); 
	width: 95%; 
	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(--offwhite); 
	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:5em;			/* Height of the footer */
	line-height: 15px;
	color: var(--deepgray);
}

footer a {
	color: var(--blue);
	text-decoration: none;
	font-weight: 100;
	font-size: 12px;
}

footer a:hover {
	color: black;
}

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

footer li {
	display: inline-block;
}



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

#portalName {
	height: 2em;
	width: 100%;
	margin: -0.6em 0em 0em -1em;
	padding-top: 0em;
	background-color: #e35a1a;
	font-size: 12px;
	line-height: 25px;
	display: block;
	position: absolute;
	vertical-align: center;
}

#portalName a {
	color: black;
}

#portalName a:hover {
	color: red;
}

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

.adminForm {
	width: 20em;
	background-color: var(--lightgray);
	border: 1px solid var(--deepgray);
	padding: 3em 1em 1em 1em;
}

#downloadFrame {
	vertical-align:top; 
	display: inline-block; 
	width: 600px; 
	background-color:var(--lightgray); 
	border: 1px solid black;
}



/* ADMIN: PRODUCTS */

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

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

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

#prodTable input, #prodTable textarea, #prodTable checkbox {
	background-color: white;
	border: 1px solid #c0c0c0;
	color: black;
}

#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(--charcoal);
	color: var(--lightgray);
}

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

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



/* ADMIN: PROMOTIONS */

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

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

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

#promoTable input, #promoTable textarea, #promoTable checkbox {
	background-color: white;
	border: 1px solid #c0c0c0;
	color: black;
}

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

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

#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: 11em;
	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;
}