@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700');
:root{
	--black: #212121;
	--gold: #eba63f;
}
body{
  margin: 0;
  background: var(--black);
  font-family: 'Roboto Slab', sans-serif;
}
.container{
  width: 100%;
}
.container h1{
  padding: 60px;
  text-align: center;
  margin: 0 auto;
  color: var(--gold);
  font-size: 5em;
  font-weight: 700;
}
.container h2{
  font-size: 2.5em;
  color: var(--gold);
  text-align: center;
  margin: 0 auto;
  font-weight: 400;
}
.fixed-navbar{
	width: 100%;
	position: fixed;
	display: flex;
	justify-content: space-between;
	height: 50px;
	background: #212121;
	top: 0;
}
.ch{
	background: #212121 !important;
	color: var(--gold) !important;
	height: 50px;
	border: 2px solid var(--gold);
}
.this{
	margin-top: 10px;
	padding: 5px;
	background: var(--gold);
	color: black;
	width: 100%;
}
.fixed-navbar ul{
	display: flex;
	list-style-type: none;
	align-items: center;
	color: var(--gold);
	padding: 0;
	margin: 0;
}
.fixed-navbar ul li{
	display: inline-block;
	padding: 0 20px 0 20px;
	height: 50px;
	line-height: 50px;
	position: relative;
	cursor: pointer;
}
.fixed-navbar ul a{
	text-decoration: none;
	color: var(--gold);
}
.fixed-navbar ul li i{
	margin-left: 15px;
}
.fixed-navbar ul li:hover{
	background: #2d3436;
}
.c{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
}
.item-container{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 75vh !important;
	width: 90%;
	padding: 30px;
}
.item-container .sider{
	width: 40%;
	margin: 40px;
}
.item-container .price{
	font-size: 2.5em;
	color: var(--gold);
}
.item-container .images{
	margin: 40px;
	width: 450px;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.item-container .images img{
	max-width: 100%;
	max-height: 100%;
}
.item-container h1{
	color: var(--gold);
	font-size: 3em;
	margin: 0;
}
.item-container h2.price{
	font-weight: lighter;
	font-size: 2em;
	margin: 0;
	margin-bottom: 30px;
}
.item-container .sizes{
	width: 100%;
	height: 50px;
	background: #212121;
	color: var(--gold);
	font-family: 'Roboto Slab', sans-serif;
	font-size: 1.54em;
	border: 2px solid var(--gold);
}
.item-container p{
	color: var(--gold);
	font-weight: lighter;
	font-size: 1.05em;
	max-height: 300px;
	overflow-y: auto;
	padding-right: 10px;
}

.item-container .sider .buy{
	width: 100%;
  background: var(--gold);
  padding: 10px;
  color: var(--black);
  font-weight: 400;
  margin-top: 10px;
  text-align: center;
	transition: .2s all ease;
	border: 2px solid var(--gold);
}
.item-container .sider .buy:hover{
	background: #212121;
	color: var(--gold);
	cursor: pointer;
}
.item-container p::-webkit-scrollbar {
    width: 10px;
}

.item-container p::-webkit-scrollbar-track {
    background: transparent;
}

.item-container p::-webkit-scrollbar-thumb {
  background-color: #eba63f;
}

.navbar{
  width: 70%;
  margin: 60px auto 0 auto;
  border-top: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  color: var(--gold);
  padding: 2.5px;
  text-align: center;
}
.navbar ul{
  list-style-type: none;
  height: 100%;
}
.navbar ul li{
  display: inline-block;
  font-size: 1.2em;
  margin-left: 40px;
  margin-right: 40px;
  font-weight: lighter;
}
.logo-link{
	transform: translateY(8px);
}
.products{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 70%;
  margin: 60px auto 0 auto;
}
.products .product{
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 90px;
  border-radius: 3px;
  height: 450px;
  width: 300px;
	border: 1px solid #eba63f;
	transition: all .5s ease;
}
.products .product:hover{
	background: #eba63f;
}

.products .product:hover > .bottom .price{
	color: #212121 !important;
}

.products .product:hover > .bottom .sizes{
	color: #212121 !important;
}

.products .product h1{
  font-size: 1.5em !important;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
  padding: 20px;
  font-weight: 400;
	color: #eba63f;
}
.products .product:hover h1{
	color: #212121 !important;
}
.products .product .image{
  margin: 0 auto;
  width: 230px;
  height: 300px;
}
.products .product .bottom{
  text-align: center;
}
.products .product .bottom .price{
  font-size: 1.3em;
  color: var(--gold)
}
.products .product .bottom .sizes{
  color: var(--gold);
}
.products .product .bottom .buy{
  background: var(--gold);
  padding: 10px;
  color: var(--black);
  font-weight: 400;
  margin-top: 10px;
  text-align: center;
	transition: .4s all ease;
}
.products .product .bottom .buy:hover{
	transform: scale(1.05);
}
.full{
	position: fixed;
	height: 100vh;
	z-index: 1000000000;
	width: 100%;
	display: none;
	background: rgba(0,0,0,0.7);
	justify-content: center;
	align-items: center;
}
.full #close{
	position: absolute;
	font-size: 2em;
	top: 100px;
	right: 200px;
	color: white;
	z-index: 10000;
		color: #eba63f !important;
	}
.full .inner{
	width: 50%;
	height: 70vh;
	background: #1a1a1a;
	border-radius: 5px;
}
.full .inner h1{
	position: relative;
	font-size: 3.3em;
	color: #eba63f !important;
	font-weight: lighter;
	display: inline-block;
	padding-bottom: 10px;
	margin: 20px;
}
.full .inner .item-container{
	height: 60%;
	width: 80%;
	margin: 0 auto;
	overflow-y: auto;
	display: block;
}
#qty{
	width: 100%;
	background: none;
	border: none;
	height: 30px;
	outline: none;
	color: var(--gold);
	font-size: 1.4em;
	border-bottom: 2px solid var(--gold);
}
.full .inner .item-container .no-items{
	align-self: center;
	font-size: 1.1em;
	font-weight: lighter;
	margin: 0 !important;
	padding: 0 !important;
		color: #eba63f !important;
}
.full .inner .item-container .cart-item{
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border-bottom: 2px solid #eba63f;
	color: #eba63f !important;
}
.full .inner .item-container .cart-item .remove{
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 1.7em;
		color: #eba63f !important;
}
.full .inner .item-container .cart-item .image{
	width: 60px;
	height: 60px;
}
.full .inner .item-container .cart-item .image img{
	max-width: 100%;
	max-height: 100%;
}
.full .inner .item-container .cart-item .item-title{
	font-size: 1.5em;
	color: #eba63f !important;
	padding: 0;
	margin: 0;
}
.full .inner .item-container .cart-item .price{
	font-size: 1em;
	color: #eba63f !important;
}
.full #checkout{
	max-width: 300px;
	background: #212121;
	border: 2px solid #eba63f;
	color: var(--gold);
	padding: 10px;
	font-size: 1.1em;
	font-weight: lighter;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	transition: all .5s ease;
}
.full #checkout:hover{
	background: #eba63f;
	color: #212121;
}
.checkout{
	width: 100%;
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
}
.checkout .items{
	width: 15%;
	max-height: 60%;
	overflow-y: auto;
	padding-right: 10px;
	display: block;
}
.checkout .items .item{
	width: 100%;
	margin-top: -10px;
	padding-bottom: 20px;
	color: white;
	border-bottom: 2px solid var(--gold);
}
.checkout .form{
	width: 50%;
	height: 60%;
	padding: 20px;
	margin: 40px;
}
.checkout .form h1{
	color: var(--gold);
	font-weight: lighter;
	font-size: 3em;
}
.checkout .form form input{
	border: none;
	background: #212121;
	border-bottom: 2px solid var(--gold);
	margin-bottom: 20px;
	display: block;
	width: 85%;
	padding: 15px;
	outline: none;
	color: var(--gold);
	font-size: 1.05em;
}
#paypal-button{
	width: 300px !important;
	padding: 10px !important;
	color: #212121 !important;
	background: var(--gold) !important;
	border-radius: 3px !important;
	border: none !important;
	line-height: 0px !important;
	cursor: pointer !important;
	text-align: center !important;
}
#pay{
	display: none;
	text-align: center;
	margin-top: 50px;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #eba63f;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--gold);
	opacity: 0.6;
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--gold);
	opacity: 0.6;
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--gold);
	opacity: 0.6;
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--gold);
	opacity: 0.6;
}

@media screen and (max-width: 1000px){

	.checkout{
		justify-content: center;
	}
	.checkout .items{
		display: none;
	}
	.checkout .form{
		width: 80%;
	}
	.checkout .form form input{
		width: 100%;
	}

}

@media screen and (max-width: 800px){

	.item-container{
		margin-top: 150px !important;
		display: block;
		margin: 0;
	}
	.item-container .sider{
		width: 100%;
		margin: 0;
	}
	.item-container .images{
		width: 60%;
		margin: 0 auto 40px auto;
	}

	.full .inner{
		width: 80%;
	}
}