@charset "utf-8";

body {
	font-family: 'Tuffy', sans-serif;
	background-color:#FFFDF0;
	padding-top: 0px;
	margin: 0px;
}
.nav {
	justify-content: center;
	padding-top: 1vh;
	align-items: space-evenly;
	display: flex;
	gap: 27%;
	box-shadow: 0px 4px 10px #C6C8CA;
	height: 60px;
	font-size: 1.15em;
	align-content: center;
}
.navileft {
	align-items: center;
	justify-content: left;
	padding: 0px;
	list-style:none;
	display: flex;
	gap: 12%;
	float: left;
}
.navileft a:link {
	color: #293C7F;
	text-decoration: none;
}
.navileft a:visited {
	color: #293C7F;
	text-decoration: none;
}
.navileft a:hover {
	text-decoration: underline;
}
.navileft a:active {
	color: #87BAD9;
	font-weight: 600;
	text-decoration: none;
}
.naviright {
	align-items:center;
	justify-content: right;
	padding: 0px;
	list-style:none;
	display: flex;
	gap: 8%;
	float: right;
}
.naviright a:link {
	color: #293C7F ;
	text-decoration: none;
}
.naviright a:visited {
	color: #293C7F ;
	text-decoration: none;
}
#lang {
	font-weight: bold;
}
#artfriend {
	margin-bottom: 5px;
	padding: 5px;
	align-items: center;
}
.carousel-inner {
	margin-top: 10px;
}
.carouseltitle {
	font-family: "Belleza";
	font-size: 10vh;
	color: black;
	line-height: 0.6;
	text-align: left;
}
#position1 {
	position: relative;
	padding: 0vh 0vw 55vh 62vw;
	white-space: nowrap;
}
#position1 button {
	position: relative;
	width: 11vw;
	height: 8vh;
	border-radius: 10px;
	border: none;
	background-color: #0F2A71;
	color: #FFFDF0;
	font-weight: bold;
	font-size: 1.1em;
}
#position1 button:hover {
	background-color: #346488;
}
#shopby {
	font-weight:600;
	font-size: 28px;
	text-transform: uppercase;
	color: #0F2A71;
	text-align: center;
	padding: 20px;
	margin-bottom: 0;
	margin-top: 10px;
}
.box {
	background-color: #001740;
	color: white;
	opacity: 90%;
	height: 52vh;
	padding: 40px;
	text-align: center;
}
#exclusive {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.7em;
	line-height: 2.3;
}
.boxtext {
	font-size: 1.2em;
	font-weight: 400;
	line-height: 0.8;
}
#signup a:link {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 5;
	padding: 6px 10px 8px 10px;
	border: solid;
	border-radius: 0.3em;
	color: #F4C400;
	text-decoration: none;
}
#signup a:visited {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 5;
	padding: 6px 10px 8px 10px;
	border: solid;
	border-radius: 0.3em;
	color: #F4C400;
	text-decoration: none;
}
#signup a:hover {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 5;
	padding: 6px 10px 8px 10px;
	border: solid;
	border-radius: 0.3em;
	color: #87BAD9;
	text-decoration: none;
}
.sectionrec {
	height: 85vh;
	display: flex;
	flex-direction: row;
}
.boxleft {
	color: #0F2A71;
	height: 80vh;
	width: 40vw;
	padding: 100px 0px 100px 50px;
	float: left;
}
.recent {
	text-transform: uppercase;
	font-weight: 800;
	font-size: 1.9em;
	line-height: 0.4
}
.favtext {
	font-size: 1.1em;
	font-weight: 400;
	line-height: 0.6;
}
#horline {
	width: 6vw;
	border-top: solid;
	color: #0F2A71;
	opacity: 100;
	margin: 40px 0px 40px 0px;
}
#imgright {
	float: right;
	width: 58vw;
	height: fixed;
	padding: 8vh 3vw 8vh 0vw;
}
.boxleft button {
	width: 11vw;
	height: 8vh;
	border-radius: 10px;
	border: none;
	background-color: #0F2A71;
	color: #FFFDF0;
	font-weight: bold;
	font-size: 1.1em;
	margin-top: 5vh;
}
.boxleft button:hover {
	background-color: #346488;
}
.footer {
	height: 35vh;
	width: 100vw;
	background-color: #293C7F;
	padding-top: 4.5vh;
	font-size: 0.83em;
	line-height: 1.6;
	position: absolute;
}
.footercon {
	display: flex;
}
#BnP {
	font-weight: 600;
}
.firstcol {
	list-style: none;
	margin-left: 3vw;
	color: #F4C400;
}
.firstcol a:link, a:visited {
	color:#FFFFFF;
	text-decoration: none;
}
.firstcol a:hover, a:active {
	color:#87BAD9;
	text-decoration: underline;
}
#help {
	font-weight: 600;
}
.seccol {
	list-style: none; 
	margin-left: 7vw;
	color: #F4C400;
}
.seccol a:link, a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
.seccol a:hover, a:active {
	color:#87BAD9;
	text-decoration: underline;
}
#ci {
	font-weight: 600;
}
.thirdcol {
	list-style: none;
	margin-left: 7vw;
	color: #F4C400;
}
.thirdcol a:link, a:visited {
	color:#FFFFFF;
	text-decoration: none;
}
.thirdcol a:hover, a:active {
	color:#87BAD9;
	text-decoration: underline;
}
#centerfooter {
	padding-top: 3.5vh;
	font-size: 1.2em;
	color: #F4C400;
	text-align: center;
}

@media (max-width: 768px) {
  	body {
    	font-size: 14px;
  	}
	.sectionrec {
		max-height: 60%;;
		max-width: 100%;
		flex-direction: column;
		align-content: center;
	}
	.boxleft {
		width: 100%;
		float: none;
	}
	.boxleft button {
		width: 30%;
	}
	#imgright {
		opacity: 0;
	}
	.footer {
		height: 40%;
		width: 100%;
	}
	.box {
		max-height: 35%;
		padding: 7%;
	}
	#exclusive {
		line-height: 1.3;
	}
	.boxtext {
		line-height: 1;
	}
}