* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
} 
body {
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.header {
	margin-top: 30px;
	margin-left: 530px;
	overflow: hidden;
}
ul.navBar {
	list-style-type: none;
	/* margin: 0; */
	/* overflow: hidden; */
	width: 80%;
	margin: 0px auto;
	/* background-color: burlywood; */
}
.navBar li a {
	float: left;
	display: block;
	color: black;
	text-align: center;
	text-decoration: none;
	margin-left: 120px;
}
.navBar li a:hover {
	background-color: white;
	color: burlywood;
}
.search-container {
	margin-top: 30px;
	float: left;
	margin-left: 50px;
}
.search-container input[type="text"] {
	padding: 6px;
	width: 130px;
	font-size: 15px;
	margin-top: 8px;
	border: none;
	border-bottom: 1.5px solid chocolate;
	background: transparent;
	color: white;
}
.search-container input[type="text"]:focus {
	border: 3px solid white;
	/* background: white; */
}
.search-container button {
	float: left;
	font-size: 15px;
	padding: 6px 10px;
	margin-top: 8px;
	margin-left: 16px;
	border: none;
	cursor: pointer;
	background-color: white;
	color: chocolate;
	border-radius: 0%;
	border-bottom: 1.5px solid chocolate;
}
.search-container button:hover {
	background-color: cornsilk;
}
.icons {
	float: right;
	margin-top:50px;
	margin-right: 100px;
}
.icons a{
	padding: 5px;
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:beige;
	color: chocolate;
	text-align: center;
}

form.search input[type=text] {
	padding: 10px;
	font-size: 17px;
	border: 1px solid grey;
	float: left;
	width: 200px;
	background: white;
	display: flex;
}
form.search button {
	float: left;
	width: 100px;
	padding: 10px;
	background: cornsilk;
	font-size: 17px;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
}
form.search button:hover {
	background: white;
}
form.search::after {
	content: "";
	clear: both;
	display: table;
}
table {
	margin: 0px auto;
	width: 100%;
}
tr {
	text-align: center;
}
.table {
	/* display: flex;
	align-items: center; */
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	text-align: center;
	font-size: 15px;
}
.table-best-sellers {
	width: 100%;
	text-align: center;
	font-size: 15px;
}

.table3 {
	width: 100%;
	text-align: center;
	font-size: 15px;
}
.table4 {
	width: 60%;
	text-align: center;
}
.table5 {
	width: 25%;
	text-align: center;
	font-size: 15px;
}
.best-size {
	width: 210px;
	height: 210px;
	transition: transform 0.2s;
}
.best-size:hover {
	transform: scale(1.3);
}
.space {
	text-align: center;
}
a {
	color: black;
}
a:hover {
	color: chocolate;
	/* font-size: 20px; */
}
a:active {
	color: chocolate;
}
.container {
	position: relative;
	text-align: center;
	color: white;
}
.containerMain {
	position: relative;
	text-align: center;
	color: white;
	margin: 0;
}
.centered {
	position: absolute;
	font-weight: bolder;
	top: 50%;
	left: 50%;
	font-size: 50px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.viewmore {
	position: absolute;
	top: 88%;
	left: 50%;
	font-size: 20px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
	color: chocolate;
	border: 1px solid chocolate;
}
.center {
	/* margin-left: auto;
	margin-right: auto; */
	margin: auto;
}
#center2 {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.centered2 {
	position: absolute;
	top: 60%;
	left: 50%;
	font-size: 50px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.centered3 {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 20px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.centered4 {
	position: absolute;
	top: 20%;
	left: 50%;
	font-size: 20px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.centered5 {
	position: absolute;
	top: 30%;
	left: 50%;
	font-size: 20px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.centered6 {
	position: absolute;
	bottom: 0%;
	left: 50%;
	font-size: 20px;
	letter-spacing: 3px;
	transform: translate(-50%, -15%);
}
.show1 {
	background-image: url("images/purse1.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 700px 600px;
	width: 650px;
	height: 500px;
	grid-area: show1;
}
.show2 {
	width: 650px;
	height: 500px;
	grid-area: show2;
}
.show3 {
	width: 650px;
	height: 500px;
	grid-area: show3;
}
.show4 {
	background-image: url("images/belt1.png");
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: 700px 600px;
	width: 650px;
	height: 500px;
	grid-area: show4;
}
div.showcase {
	display: grid;
	grid-template-areas: "show1 show2"
	"show3 show4";
	row-gap: 10px;
	column-gap: 0px;
	justify-content: space-around;
}
.box1 {
	width: 650px;
	height: 500px;
	grid-area: box1;
}
.box2 {
	background-image: url("images/brand1.jpg");
	background-attachment: fixed;
	/* background-position-y: center; */
	background-repeat: no-repeat;
	background-size: cover;
	width: 650px;
	height: 500px;
	grid-area: box2;
}
.box3 {
	background-image: url("images/brand2.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	width: 650px;
	height: 500px;
	grid-area: box3;
}
.box4 {
	width: 650px;
	height: 500px;
	grid-area: box4;
}
div.brand {
	display: grid;
	grid-template-areas: "box1 box2"
	"box3 box4";
	row-gap: 10px;
	column-gap: 0px;
	justify-content: space-around;
}
.craft1 {
	width: 650px;
	height: 500px;
	grid-area: craft1;	
}
.craft2 {
	background-image: url("images/process1.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	width: 650px;
	height: 500px;
	grid-area: craft2;	
}
.craft3 {
	background-image: url("images/process2.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	width: 650px;
	height: 500px;
	grid-area: craft3;	
}
.craft4 {
	width: 650px;
	height: 500px;
	grid-area: craft4;	
}
.craft5 {
	width: 650px;
	height: 500px;
	grid-area: craft5;	
}
.craft6 {
	background-image: url("images/process3.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	width: 650px;
	height: 500px;
	grid-area: craft6;	
}
div.craft {
	display: grid;
	grid-template-areas: "craft1 craft2"
	"craft3 craft4"
	"craft5 craft6";
	row-gap: 10px;
	column-gap: 0px;
	justify-content: space-around;
}
.button {
  background-color: transparent;
  border: 1px solid;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 4px;
  transition-duration: 0.4s;
  cursor: pointer;
  letter-spacing: 3px;
}
.button:hover {
  background-color: white;
  color: chocolate;
}
.button2 {
  background-color: white;
  opacity: -0,1;
  border: 1px solid;
  color: chocolate;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  /* margin-left: auto;
  margin-right: auto; */
  transition-duration: 0.4s;
  cursor: pointer;
  letter-spacing: 3px;
  position: absolute;
  left: 43%;
}
.button2:hover {
  background-color: chocolate;
  color: white;
}
.button3 {
  background-color: rgb(128, 55, 66);
  border: 1px solid;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 30px;
  /* margin: 4px 2px; */
  transition-duration: 0.4s;
  cursor: pointer;
  letter-spacing: 3px;
  padding: 20px 125px;
  font-weight: lighter;
}
.button3:hover {
  background-color: white;
  color: rgb(128, 55, 66);
}
.button4 {
  background-color: rgb(143, 89, 9);
  border: 1px solid;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  letter-spacing: 3px;
  padding: 20px 125px;
  font-weight: lighter;
}
.button4:hover {
  background-color: white;
  color: rgb(143, 89, 9);
}
.button5 {
  background-color: white;
  border: 1px solid;
  color: chocolate;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 4px;
  transition-duration: 0.4s;
  cursor: pointer;
  letter-spacing: 3px;
}
.button5:hover {
  background-color: chocolate;
  color: white;
}
.text-centered {
	text-align: center;
}
.spaced {
	letter-spacing: 3px;
}
.large {
	font-size: 26px;
	font-weight: bolder;
}
p#shop-all {
	font-size: 40px;
	font-weight: bolder;
	letter-spacing: 10px;
}
p#the-brand {
	font-size: 40px;
	font-weight: bolder;
	letter-spacing: 10px;
}
p#process {
	font-size: 40px;
	font-weight: bolder;
	letter-spacing: 10px;	
}
p#contact {
	font-size: 40px;
	font-weight: bolder;
	letter-spacing: 10px;		
}
.font {
	font-family: 'Dancing Script', cursive;
}
.follow {
	background-color: rgb(196, 153, 122);
	font-weight: lighter;
}
.emoji {
	font-size:100px; 
	text-align: center;
}
div.a {
	position: absolute;
	right: auto;
}
.chocolate {
	color: chocolate;
}
.bottom-logo {
	float: left;
	margin-top: 80px;
	margin-left: 50px;
}
ul.bottom-links{
	list-style-type: none;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-right: 200px;
	float: right;
}
.bottom-links li a{
	text-decoration: none;
	margin-top: 80px;
}
article.subsciption {
	/* border: 2px solid burlywood; */
	/* margin: 0px 0px 0px 1000px;	*/
	margin-top: 50px;
	margin-left: 200px;
    /* padding-bottom: 30px; */
	display: inline-block;
	/* margin-left: 1000px; */
	/* margin-right: 0px; */
}
form input[type="text"] {
	padding-bottom: 30px;
	width: 180px;
	font-size: 15px;
	margin-top: 8px;
	border: none;
	border-bottom: 1.5px solid chocolate;
	background: transparent;
	color: white;
}
form input[type="text"]:focus {
	border: 3px solid white;
	/* background: white; */
}
.button-form {
	background-color: white;
	border: 1px solid;
	color: rgb(196, 153, 122);
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	/* margin: 2px 25px; */
	transition-duration: 0.4s;
	cursor: pointer;
	letter-spacing: 3px;
	width: 180px;
  }
.button-form:hover {
	background-color: rgb(196, 153, 122);
	color: white;
  }
.background {
	display: block-inline;
	background-image: url("brand1.jpg");
	background-attachment: scroll;
	height: 500px;
	width: 700px;
	background-position: bottom-right;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.background2 {
	background-image: url("brand2.jpg");
}
.backgroundbrown {
	background-image: url("tan.jpg");
	background-color: chocolate;
	height: 500px;
	width: 700px;
	background-position: bottom-left;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.background-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	bottom: 50%;
	transform: translate (-50%, -50%);
	color: white;
}
/* .scroll { */
	/* background-attachment: scroll; */
/* } */
.customer-service {
	background-color: rgb(241, 231, 237);
}
.form {
	box-sizing: border-box;

}
select, textarea {
	width: 90%;
	padding: 12px;
	border: 1px solid  rgb(138, 116, 100);;
	border-radius: 4px;
	resize: vertical;
	background: transparent;
}
.input {
	width: 90%;
	padding: 12px;
	/* border-left: 1px solid rgb(138, 116, 100); */
	border-radius: 4px;
	resize: vertical;
	background: transparent;
	border-right: none;
	border-top: none;
	border-left: none;
	border-bottom: 1px solid rgb(138, 116, 100);
}
label {
	padding: 12px 12px 12px 0px;
	display: inline-block;
}
.buttonform {
	background-color: transparent;
	color: rgb(138, 116, 100);;
	padding: 12px 20px;
	border: 1px solid rgb(138, 116, 100);
	width: 300px;
	height: 50px;
	/* border-radius: 4px; */
	cursor: pointer;
	margin-left: 400px;
	/* float: right; */
}
.buttonform:hover {
	background-color: rgb(138, 116, 100);;
	color: white;
}
.container-form {
	border-radius: 5px;
	/* background-color: cornsilk; */
	padding: 20px;
}
.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
}
.col-25 {
	float: left;
	width: 25%;
	margin-top: 6px; 
}
.row:after {
	content: "";
	display: table;
	clear: both;
}
.form-size {
	margin-left: 200px;
	margin-right:200px;
}
.center1 {
	position: relative;
}
.middle {
	margin: 10px 100px;
}
.middle2 {
	margin: 10px 80px;
}


.modal-container {
	width: 700px;
	height: 400px;
	transition-duration: 0.4s;
	background-color: rgb(196, 153, 122);
	margin: 100px auto;
	border-radius: 10px;
	position: relative;
	color: white;
}
.img-container {
	width: 350px;
	height: 400px;
	margin-left: 0px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.modal-heading {
	position: absolute;
	top:10%;
	left: 50%;
	font-size: 35px;
	margin-left: 30px;
}
.modal-text {
	position: absolute;
	top:40%;
	left: 50%;
	margin-left: 30px;
}
.modal-container input[type="text"] {
	padding: 12px;
	position: absolute;
	top: 60%;
	margin-left: 80px;
	border: none;
	background: transparent;
	color: white;
	border: 1px solid white;
}
.button-modal {
	background-color: white;
	position: absolute;
	color: chocolate;
	margin-top: 20px;
	margin-left: 120px;
	padding: 10px 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	top: 70%;
}
.button-modal:hover {
	color: white;
	background-color: chocolate;
}
.modal-text-bottom {
	position: absolute;
	top: 85%;
	left: 50%;
	margin-left: 20px;
	font-size: 12px;
}

/* the modal(background) */
.modal {
	/* display: none; */
	position: fixed;
	z-index: 1; /*makes it sit on top*/
	padding: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /*Enable scroll if needed*/
	/* background-color: burlywood; */}
.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	margin-right: 10px;
}
.close:hover {
	color: chocolate;
}

/* text over image  */
.container-text {
	position: relative;
	width: 210px;
	margin-right: 50px;
}

.img-text {
	display: block;
}

/* the overlay effect - lays on top of the container and over the image */
.overlay {
	position: absolute;
	bottom: 0;
	background: rgb(0, 0, 0);
	background: rgba(146, 64, 26, 0.5);
	color: white;
	width: 100%;
	transition: .5s ease;
	opacity: 0;
	font-size: 15px;
	padding: 20px;
	text-align: center;
}

.container-text:hover .overlay {
	opacity: 1;
	transform: scale(1.3);
}

/* modal for gallary  */
.modal-gallery {
	display: none;
	position: fixed;
	z-index: 1;
	padding: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(146, 64, 26, 0.5);
}

.modal-gallery-image {
	margin: auto;
	display: block;
	width: 80%;
	/* max-width: 700px; */
}

/* the close button  */
.close-gallery {
	position: absolute;
	top: 15px;
	right: 35px;
	color: white;
	font-size: 40px;
	font-weight: bold;
	/* transition: 0.3s; */
}

.close-gallery:hover {
	color: chocolate;
	cursor: pointer;
}
/* filter section */
.filter-section {
	background-color: beige;
	margin: 15px auto;
	color: white;
	width: 700px;
	height: 120px;
	padding-left: 200px;
	padding-top: 40px;
}
.show {
	display: block;
}
.button-filter {
	border: none;
	outline: none;
	padding: 12px 16px;
	background-color: burlywood;
	cursor: pointer;
	color: white;
}
.button-filter:hover {
	background-color: white;
	color: burlywood;
}
.button-filter:focus,
.button-filter:active,
.button-filter.active {
	background-color: chocolate;
	color: white;
}
#bags:target {
	/* background-image: linear-gradient(burlywood, cornsilk, burlywood, beige, cornsilk, burlywood); */
	background-color: rgb(196, 153, 122);
	color: white;
}

#purses:target {
	background-color: rgb(196, 153, 122);
	color: white;
}

#belts:target {
	background-color: rgb(196, 153, 122);
	color: white;
}
.validate {
	margin-left: 360px;
}
#jumpToTop{
	position: fixed;
	bottom: 50px;
	right: 20px;
	font-size: 30px;
	width: 50px;
	background-color: transparent;
	color:burlywood;
	cursor: pointer;
	/* outline: none; */
	border: none;
	padding-left: 1px;
	/* border: 1px solid burlywood; */
	border-radius: 50%;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out; 
	transition-property: background-color,color;
}
#jumpToTop:hover, #jumpToTop:focus{
/* background-color: burlywood; */
color:#fff;
}
video {
	width: 500px;
	margin-left: 430px;
}
iframe {
	margin-left: 370px;
}
section.images {
	margin-left: 70px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
section.images2 {
	margin-left:100px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid1 {
	margin-left: 100px;
	align-self: center;
}
/* pop-up login form  */
.form-popup {
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	border: 3px solid rgba(146, 114, 72, 0.774);
	z-index: 9;
}
.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: white;
}
.form-container input[type=text], .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: white;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}
.form-container .login-btn {
	background-color: burlywood;
	color: white;
	padding: 16px 20px;
	border: none;
	width: 100%;
	margin-bottom: 10px;
	opacity: 0.8;
}
.form-container .login-close {
	background-color: rgba(146, 114, 72, 0.774);;
	color: white;
	padding: 16px 20px;
	border: none;
	width: 100%;
	margin-bottom: 10px;
	opacity: 0.8;
}
.form-container .btn:hover, .open-button:hover {
	opacity: 1;
  }