:root {
	--theme-light: #bedcf9;
	--theme-light-text: #333;
	--theme-dark: #2a3f54;
	--theme-dark-text: #fff;
	--theme-accent: #57ad57;
	--theme-ugly-orange-light: #78bd78;
	--theme-accent-text: #fff;

	--theme-ugly-orange: linear-gradient(90deg, #e85d7b, #efa645);
	--theme-ugly-orange-light: linear-gradient(90deg, #e85d7b, #efa645);

	--transition-duration: 500ms;
}
* {
	box-sizing: border-box;
}

.hidden {
	display: none !important;
}

body {
	
	font-family: ClanPro-News, Helvetica, sans-serif;
	background-repeat: no-repeat;
	background-position: center;
	user-select: none;
	cursor: default;
	display: flex;
	flex-wrap: wrap;
	min-width: 250px;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;

}
 .logo
{
	height: 30px;
}
	body > header {
		background: #fff;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
		position: fixed;
		top: 0;
		left: 0;
		right:0;
		padding: 16px;
		display: flex;
		align-items: center;
		width: 100%;
		z-index: 1;
	}
		#ajax-loader {
			position: fixed;
			top: 8px;
			left: calc(50% - 30px);
			opacity: 0;
			padding: 5px 10px;
			font-size: 12px;
			font-weight: bold;
			transition: opacity var(--transition-duration);
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
			background: var(--theme-ugly-orange);
			color: var(--theme-accent-text);
			width: 70px;
			z-index: 100;
		}
		#ajax-loader.show {
			opacity: 1;
		}
		body > header #cart-summary {
			margin-left: auto;
		}
			body > header #cart-summary small {
				color: #666;
				margin-right: 8px;
			}
		body > header #checkout {
			background: var(--theme-ugly-orange);
			border: 0;
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
			margin-left: 16px;
			color: #fff;
			padding: 10px 16px;
			font-size: 15px;
			transition: opacity var(--transition-duration),
						box-shadow var(--transition-duration);
			outline: none;
		}
		body > header #checkout[disabled] {
			display: none;
		}
		body > header #checkout:not([disabled]):hover {
			cursor: pointer;
			
		}
		body > header #checkout:active {
			box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
		}
		body > header .popup {
			padding: 18px;
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
			position: absolute;
			left: calc(50% - 175px);
			width: 350px;
			top: 250px;
			transition: background var(--transition-duration);
			background: #fff;
			z-index: 2;
		}
			body > header .popup h3 {

				margin: 0 0 8px;
				padding: 5px 25px;
			}
			body > header .popup form {
				display: block;
				margin: 8px;
				display: flex;
				padding: 8px;
				flex-direction: column;
			}
			body > header .popup small {
				text-align: center;
				color: #666;
				display: block;
			}
			body > header .popup input {
				padding: 10px 15px;
				flex: 1;
				outline: none;
				border: solid 1px #eaeaea;
				margin: 8px;
				transition: border var(--transition-duration);
			}
			body > header .popup input:focus {
				
				border: solid 1px black;
				
			}
			body > header .popup input[type=submit] {
				border: 0;
				background: var(--theme-ugly-orange);
				color: var(--theme-accent-text);
				cursor: pointer;
				outline: none;
				transition: background var(--transition-duration),
							box-shadow var(--transition-duration);
			}
			body > header .popup input[type=submit]:hover {
				background: var(--theme-ugly-orange-light);
			}
			body > header .popup input[type=submit]:active {
				box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.4);
			}
			body > header .popup #loginError {

				text-align: center;
				color: red;
				font-size: 13px;
				padding: 5px;
            }
		body > header #blanket {
			z-index: 1;
			background: radial-gradient(rgba(127,127,127,.5),rgba(127,127,127,.5) 35%,rgba(0,0,0,.7));
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
		}

	body > #title-card {
		height: 350px;
		display: flex;
		align-items: center;
		overflow: hidden;
		width: 100%;
		margin-top: 63px;

	}
		body > #title-card > div {
			display: flex;
			background-size: cover;
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
			align-items: center;
			height: 100%;
			width: 100%;
		}
		body > #title-card.thin > div {
			width: 400px;
			margin-left: auto;
		}
		#title-card #title {
			background: #FFFFFF;
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
			padding: 16px 27px;
			transition: box-shadow var(--transition-duration);
			margin-left: 30px;
			height: 250px;
			min-width: 250px;
		}
		
		#title-card h1 {
	font-size: 36px;

	margin: 10px 0;
	margin-bottom: 80px;
	-webkit-font-smoothing: antialiased;
	font-weight: 200;
	font-family: ClanPro-Book, Helvetica, sans-serif;
}

		#title-card address {
			color: #757575;
			font-size: 14px;
			font-style: normal;
		}
		#title-card h2 {

			
			font-size: 14px;
			color: #757575;
			border: 0;
			font-family: ClanPro-News, Helvetica, sans-serif;
			 font-weight: 400;
		}

	body > #menu {
		display: flex;
		flex-wrap: wrap;
		margin-left: 30px;
		margin-right: 30px;
	}
		#menu h2 {

				color: #000000;
				font-size: 22px;
				margin-left: 24px;
				margin-bottom: 8px;
				font-family: ClanPro-News, Helvetica, sans-serif;
				-webkit-font-smoothing: antialiased;
				font-weight: 400;
				margin-top: 40px;

		}
		#menu > nav {
			flex: 0 0 250px;
			margin-right: 16px;
		}

			#menu > nav > ul.popup {
				z-index: -1;
			}

			#menu > nav h2 {
				font-weight: normal;
				color: #333;

				padding-bottom: 3px;
				font-size: 22px;
				align-items: flex-end;
				margin-bottom: 8px;
			}
			#menu > nav ul {
				font-weight: normal;
				background: #fff;
				border: solid 1px rgb(224, 224, 224);
				list-style-type: none;
				padding: 8px 0;
			}
				#menu > nav li a {
						padding: 12px 26px;
						cursor: pointer;
						display: block;
						color: #666;
						font-size: 16px;
						transition: background var(--transition-duration), box-shadow var(--transition-duration);
						text-decoration: none;
						font-family: ClanPro-News, Helvetica, sans-serif;
						-webkit-font-smoothing: antialiased;
				}
				#menu > nav li a:hover {
					background: #eee;
				}
				#menu > nav li a:active {
					box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.15);
				}
		#menu > #items {
			flex: 1;
		}
			#menu .items {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -8px;
			}
			#menu .items:after {
				content: '';
				flex: 1 0 50%;
			}
				#menu .item {
					background: #fff;
					flex: 1 0 calc(50% - 16px);
					min-width: 250px;
					padding: 16px;
					margin: 8px;
					display: flex;
					flex-direction: column;
					border: solid 1px rgb(224, 224, 224);
					transition: box-shadow var(--transition-duration) ease;
				}

				#menu .item:hover{
					box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 9px 0px;
				}
					#menu .item h3 {
						margin: 8px 0;
						font-size: 16px;
						color:#262626;
						letter-spacing: 1px;
						-webkit-font-smoothing: antialiased;
						font-weight: 400;

					}
					#menu .item p {
						font-size: 13px;
						color: #666;
						font-family: ClanPro-News, Helvetica, sans-serif;
						-webkit-font-smoothing: antialiased;
						font-weight: 400;
					}
					#menu .item .footer {
						display: flex;
						justify-content: space-between;
						margin-top: auto;
					}
						#menu .item .price {
							margin-top: auto;
							-webkit-font-smoothing: antialiased;
							font-weight: 400;
							font-size: 15px;
							color: black;
							font-family: ClanPro-News, Helvetica, sans-serif;
						}

						#menu .item button.change {
							font-size: 17px;
							padding: 0px 9px;
							border: solid black;
							cursor: pointer;
							outline: none;
							height:50px;
							width:40px;
						}
						#menu .item button.change:hover {
							background: #eee;
						}
						#menu .item button.change:active {
							box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.4);
						}
						#menu .item button.less {
							border-width: 2px 0 2px 2px;
							background:#fff;
						}
						#menu .item button.more {
							border-width: 2px 2px 2px 0;
							background:#fff;
						}
						#menu .item footer input {
							width: 40px;
							background: #fff;
							padding: 3px 5px;
							border: solid black;
							color :orange;
							border-width: 2px 0;
							outline: 0;
							font-size: 17px;
							height: 50px;
							text-align: center;
						}
						#menu .item .customizations {
							position: fixed;
							top: 200px;
							left:calc(50% - 250px);
							background: #ffffff;
							box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
							z-index: 1;
						}
							#menu .item .customizations article {
								padding: 30px;
								width: 500px;
								background: white;
								
							}



       						#menu .item .customizations article label {
							    font-size: 16px;
							    padding: 34px 0px;
							    margin: 34px 0px;
							    font-family: ClanPro-News, Helvetica, sans-serif;
							    font-weight: 200;
							    color: rgb(38, 38, 38);

							   }
							 #menu .item .customizations article input {
							   	width: 100%;
							    border: none;
							    border-bottom: solid 2px rgb(250, 250, 250);
							    height: 50px;
							    outline:none;
							    font-size: 14px;
							    }
								#menu .item .customizations article h3 {
									margin: 8px 0;
									font-size: 36px;
									letter-spacing: 1px;
									-webkit-font-smoothing: antialiased;
									font-weight: 200;
									font-family: ClanPro-Book, Helvetica, sans-serif;
									text-align: center;
								}
								#menu .item .customizations article p {
									font-size: 14px;
									margin-bottom: 40px;
									color: #666;
									font-family: ClanPro-News, Helvetica, sans-serif;
									-webkit-font-smoothing: antialiased;
									font-weight: 400;
									text-align: center;
								}
							#menu .item .customizations footer {
								padding: 30px;
								background: rgb(250, 250, 250);
								display: flex;
								justify-content: center;
							}
								#menu .item .customizations footer .addItem {
									height: 50px;
									font-size: 16px;
									flex:1;
									margin-left: 20px;
								   background: var(--theme-ugly-orange);
								   color: #fff;
								   outline: none;
								   border:none;
								}

						#menu .item #blanket {
							position:fixed;
							top: 0;
							background: black;
							width:100%;
							height:100%;
							opacity: .5;
						}

	body > #summary {
			margin-top: -250px;
	margin-left: 30px;
	max-width: 310px;
	background: #fff;

	}

	body > #cart {
		background: #fff;
		width: 400px;
		margin-left: auto;
		padding-top: 16px;
	}
	body > #cart.popup {
		position: fixed;
		right:16px;
		padding: 20px;
		top:70px;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
	}

		#cart table {
			border-collapse: collapse;
			width: 100%;
		}
		#cart table thead{
			border-bottom: solid 1px black

		}

			#cart tbody,
			#cart tfoot {
				border-top: solid 1px black;
			}

			
				#cart .quantity {
					text-align: center;
				}
				#cart th,
				#cart td {
					padding: 8px 16px;
					-webkit-font-smoothing: antialiased;
					font-weight: 200;
					font-size: 14px;
					font-family: ClanPro-News, Helvetica, sans-serif;
					vertical-align: middle;
				}
				#cart th:last-child,
				#cart td:last-child {
					text-align: right;
				}
				#cart thead th {
					font-size: 17px;
					padding-bottom: 20px;
					text-align: left;
					font-family: ClanPro-News, Helvetica, sans-serif;
					font-weight: 400;
					-webkit-font-smoothing: antialiased;
				}
				#cart tfoot th {
					text-align: left;
					padding-top: 50px;
					font-size: 22px;
				}
					#cart td small {
						color: #666;
						max-width: 300px;
						display: inline-block;
					}

		#summary h2 {
			font-family: ClanPro-News, Helvetica, sans-serif;
			font-weight: 200;
			-webkit-font-smoothing: antialiased;
			padding: 20px;
			color: #333;
			font-size: 25px;
			margin-bottom: 0px;
			width: 100%;
		}

		#summary #cart-info {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -8px -8px;
		}
		#summary form {
			flex: 1;
			padding: 8px;
		}
			#summary form label {
				display: block;
				margin: 20px;
				font-family: ClanPro-News, Helvetica, sans-serif;
				font-size: 14px;
				font-weight: 200;
				-webkit-font-smoothing: antialiased;
			}
				#summary form select {
					width: 100%;
					background: #fff;
					height:30px;
					padding: 5px 10px;
					font-size: 14px;
					outline: none;
					margin-top: 8px;
					border-radius:0px;
					border:none;
					border-bottom:solid 1px #eaeaea;
					-webkit-appearance: none;
					}
			#summary form select:focus {
				border-bottom:solid 1px black;
			}
				#summary form input:not([type=radio]),
				#summary form textarea {
					padding: 5px 10px;
					margin-top: 8px;
					width: 100%;
					font-size: 14px;
					outline: none;
					border: none;
					border-bottom: solid 1px #eaeaea;
					transition: border var(--transition-duration);
					height: 30px;
				}
		#summary form input:not([type=radio]):focus,
		#summary form textarea:focus {
			border-bottom: solid 1px black;
		}
		#summary form label span {
			color: #666;
			display: inline-block;
			margin-top: 8px;
		}
		#summary #place-order-submit {
			padding: 27px;
			padding-top: 0px;
			flex-basis: 100%;
		}
			#summary #place-order-submit input {
				border: 0;
				padding: 7px 58px;
				font-size: 15px;
					height: 38px;
				cursor: pointer;
				outline: none;
				width:100%;
				transition: background var(--transition-duration);
			}
			#summary #place-order-submit input:active {
				box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3);
			}
			#summary #place-order-submit input[type=button] {
				margin-bottom: 10px;
				background: var(--theme-ugly-orange);
				color:#fff;
			}
			#summary #place-order-submit input[type=button]:hover {
				background: var(--theme-ugly-orange-light);
				color:#fff;
			}
			#summary #place-order-submit input[type=submit] {
				background: var(--theme-ugly-orange);
				color: var(--theme-accent-text);
			}
			#summary #place-order-submit input[type=submit]:hover {
				background: var(--theme-ugly-orange-light);
			}

			#message {
				color: #666;
				text-align: center;
				margin-top: 8px;
				padding: 20px;
			}
		   .fixed{
				position: fixed;
			   top:80px;
			   width:250px;
			   overflow-y: scroll;
    		   max-height: 85vh;

			}

@media(max-width: 1000px) {

	main > nav {
		display: none;
	}
}

@media(max-width: 720px) {

    body {
		background-image: none !important;
	}
	body > #cart.popup {
		display: none;
	}

	main > nav {
		display: none;
	}

	#cart th, #cart td {
		padding: 5px 12px;
		font-size: 14px;
	}
	body > #title-card {
		height: 250px;
		margin-top: 50px;
	}
	body > header .popup {
		left: calc(50% - 152px);
		width: 300px;
		top: 83px;
		background: #fff;
		z-index: 2;
	}

	body > #summary {
		margin: 25px auto;
		order: 1;
		max-width:100%;
	}
	#summary h2 {
		padding-left: 16px;
		text-align: center;
	}
	body > #title-card.thin > div {
		width:100%;
	}
	body > #cart {
		width:100%;
		margin-top: 100px
	}

	#summary #place-order-submit input[type=button] {
		margin-right: 0px;
		margin-bottom: 16px;
	}
	#title-card #title {
		position: absolute;
		height: 230px;
		top:150px;
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;

	}
	body > #menu {
		margin-left: 15px;
		margin-right: 15px;
	}

	#menu .item .customizations {
		top: 0;
		left: 0;
		width:100%;
	}
	#menu .item .customizations article {
		width: auto;
	}
	#menu h2 {
		text-align: center;
		position: relative;
		margin-bottom: 50px;
		margin-top:50px;
	}
		#menu > #items {

			margin-top:100px;
		}
		#menu h2::after {
			content: " ";
   			position: absolute;
   			border-bottom: solid 1px black;
   			left:calc(50% - 15px);
   			width:30px;
   			bottom: -20px;
		}

	#menu > nav {
		display: none;
	}

	#menu .item {
    flex-basis:100%;
    border: none;
    border-bottom: solid 1px rgb(224, 224, 224);
    margin: 0;
    
	}
	#menu .item p
	{
		margin-bottom: 2px;
		margin-top:5px;
		font-size: 13px
	}
	#menu .item:hover {
    flex-basis:100%;
    border: none;
    box-shadow: none;
    border-bottom: solid 1px rgb(224, 224, 224);
    margin: 0;
    }


	body > header #cart-summary {
		margin-left: auto;
		font-size: 14px;
	}
	
	body > header #checkout {
		padding: 7px 12px;
		font-size: 10px;
	}
	.logo {
		height: 20px;
	}

	body > header #checkout
	{
		position: fixed;
		width:100%;
		left:0;
		right:0;
        font-size: 14px; 
		bottom: 0;
		margin: 0px;
		height: 40px;

    }	
}