/* WEB FONTS
font-family: brandon-grotesque, sans-serif; 
font-family: marydale, sans-serif; 
*/


/* GLOBAL STYLES */

:root{
	--accent-mint: #bedac1;
	--accent-yellow: #ffc111;
	--ms-black: #231f20;
	--ms-white: #fcfcfc;
	--off-white: #f2f2f2;
	--ws-orange: #f48e23;
	--ws-tan: #f4e9dc;
	--drama-queen-green: #66cc33;
	--forever-cool-blue: #0099cc;
	--goodie-two-shoes-pink: #cc6699;
	--mischief-maker-orange: #ff6633;
	--rebel-red: #cc3333;
	--smarty-pants-pink: #ff0099;
	--surfer-chick-green: #cccc33;
	--sweet-savvy-purple: #7c58cb;
	--wild-one-teal: #339999;
}
body,html {
overflow-x: hidden;
}
a, a:link, a:active, a:visited, a:focus {
	color: var(--forever-cool-blue);
}
h2, .h2 {
	font-size: 2.25rem;
	font-family: marydale, sans-serif;
	font-weight: 600;
	color: var(--ms-black);
}
h3, .h3 {
	font-size: 3rem;
	font-family: marydale, sans-serif;
	color: var(--ms-black);
}
h4, .h4 {
	font-family: brandon-grotesque, sans-serif;
	font-size: 40px;
	font-weight: 700;
	color: var(--ms-black);
}
h5, .h5 {
	font-family: brandon-grotesque, sans-serif;
	font-size: 34px;
	font-weight: 400;
	font-style: italic;
	color: var(--ms-black);
}
h6, .h6 {
	font-family: brandon-grotesque, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--ms-black);
}
body, p, .p {
	font-family: brandon-grotesque, sans-serif;
	color: var(--ms-black);
}
.display-5 {
	font-size: 2.15rem;
}

@media (max-width: 1024px) {
.container, .container-md, .container-sm {
    max-width: 100%;
}
	.display-5 {
		font-size: 1.5rem;
	}
	h3, .h3 {
		font-size: 2rem;
	}

}
@media (max-width: 767px) {
	.display-5 {
		font-size: 1.5rem;
	}
	h2, .h2 {
		font-size: 2rem;
	}
	h3, .h3 {
		font-size: 1.75rem;
	}
}

/* NAVIGATION */

.navbar-light .navbar-nav .nav-link {
	color: var(--ms-black) ;
	text-transform: uppercase;
	font-weight: 600;
}


/* BUTTONS */

.btn-lg {
	font-size: 2rem;
}
.btn.btn-primary {
	text-transform: uppercase;
	padding: .5rem 1.75rem;
	background-color: #F2F2F2;
	border-color: #F2F2F2;
	color: #505050;
}
.btn.btn-primary:hover {
	color: #FFFFFF;
}
.btn.btn-primary.purple {
	box-shadow: .5rem .5rem var(--sweet-savvy-purple);
}
.btn.btn-primary.purple:hover {
	box-shadow: 0rem 0rem var(--sweet-savvy-purple);
	background-color: var(--sweet-savvy-purple);
	border-color: var(--sweet-savvy-purple);
}
.btn.btn-primary.green {
	box-shadow: .5rem .5rem var(--drama-queen-green);
}
.btn.btn-primary.green:hover {
	box-shadow: 0rem 0rem var(--drama-queen-green);
	background-color: var(--drama-queen-green);
	border-color: var(--drama-queen-green);
}
.btn.btn-primary.orange {
	box-shadow: .5rem .5rem var(--mischief-maker-orange);
}
.btn.btn-primary.orange:hover {
	box-shadow: 0rem 0rem var(--mischief-maker-orange);
	background-color: var(--mischief-maker-orange);
	border-color: var(--mischief-maker-orange);
}
.btn.btn-primary.pink {
	box-shadow: .5rem .5rem var(--goodie-two-shoes-pink);
}
.btn.btn-primary.pink:hover {
	box-shadow: 0rem 0rem var(--goodie-two-shoes-pink);
	background-color: var(--goodie-two-shoes-pink);
	border-color: var(--goodie-two-shoes-pink);
}
.btn.btn-primary.teal {
	box-shadow: .5rem .5rem var(--wild-one-teal);
}
.btn.btn-primary.teal:hover {
	box-shadow: 0rem 0rem var(--wild-one-teal);
	background-color: var(--wild-one-teal);
	border-color: var(--wild-one-teal);
}
.shop_now_button_green {
	color: var(--drama-queen-green) !important;
	background-color: #FFF;
	border-radius: .5rem;
	box-shadow: .5rem .5rem var(--drama-queen-green);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.15;
	font-size: 2.15rem;
	padding: 1rem;
}
.shop_now_button_green:hover {
	background-color: var(--drama-queen-green) !important;
	color: #FFFFFF !important;
	box-shadow: 0rem 0rem var(--drama-queen-green);
}
/* TABLET - Media Queries */
@media (max-width: 1024px) {
	.shop_now_button_green {
		font-size: 1.5rem;
	}
}
/* MOBILE - Media Queries */
@media (max-width: 767px) {
	.btn-lg {
		font-size: 1.5rem;
	}
}


/* INDEX PAGE - First Section */

.intro_section {
	height: 625px;
}
.purpleCircle {
	position: absolute;
	z-index: -1;
	left: 30%;
	top:5%;
}
.purple_character {
	position: absolute;
}
.moscato_wine {
	position: absolute;
	right: 33%;
	top: -5%;
}
.tanCircle {
	position: absolute;
	z-index: -1;
	left: 15%;
	top: 5%;
}
.tan_content {
	position: absolute;
	width: 24%;
	left: 20%;
	top: 15%;
	text-align: center;
}
.pink_arrows {
	position: absolute;
	left: 76%;
	top: 83%;
	z-index: -1;
}
.yellow_arrows {
	position: absolute;
	left: 77%;
	top: 51%;
}
.shop_now_button_container {
	position: absolute;
	left: 20%;
	top: 65%;
	z-index: 1;
}
.pinot_grigio {
	height: 560px;
}
/* DESKTOP - Media Queries 
@media (min-width: 1025px) and (max-width: 1366px) {
	.tan_content {
		top: 9%;
		width: 21%;
	}
	.yellow_arrows {
		left: 46%;
	}
	.pink_arrows {
		left: 44%;
	}
}
*/
/* TABLET - Media Queries */
@media (min-width: 768px) and (max-width: 1024px) {
	.purple_character {
		top:25%;
		left: 5%;
	}
	.purple_character img {
		height: 560px;
	}
	.tan_content {
		left: 30%;
		top: 7%;
		width: 30%;
	}
	.tanCircle {
		left: 22%;
		top:0%;
	}
	.tanCircle img {
		height: 350px;
		width: 340px;
	}
	.purpleCircle {
		top: 32%;
		left: -15%;
	}
	.purpleCircle img {
		height: 600px;
		width: 920px;
	}
	.moscato_wine {
		top: 5%;
		left: 55%;
	}
	.moscato_wine img {
		height: 700px;
	}
	.yellow_arrows {
		left: 90%;
		top: 78%;
	}
	.yellow_arrows img {
		height: 300px;
	}
	.pink_arrows img {
		height: 125px;
	}
	.pink_arrows {
		left: 89%;
		top: 106%;
	}
	.shop_now_button_container {
		top: 80%;
		left: 33%;
	}
	.pinot_grigio {
		height: 650px;
	}
}
/* MOBILE - Media Queries */
@media (max-width: 767px) {
	.purple_character {
		top:32%;
		left: 5%;
	}
	.purple_character img {
		height: 375px;
		width: auto;
	}
	.purpleCircle {
		top: 25%;
		left: -69%;
	}
	.tan_content {
		width: 65%;
		top: 9%;
		left: 17%;
	}
	.tanCircle {
		left: 4%;
		top: 0%;
		width: 92%;
	}
	.tanCircle img {
		width: 100%;
	}
	.moscato_wine {
		right: 20%;
		top: 40%;
	}
	.moscato_wine img {
		height: 475px;
	}
	.shop_now_button_container {
		top: 100%;
		left: 25%;
	}
	.yellow_arrows img {
		height: 300px;
	}
	.yellow_arrows {
		top: 65%;
		left: 85%;
	}
	.pink_arrows img {
		height: 135px;
	}
	.pink_arrows {
		left: 84%;
		top: 92%;
	}
}
/* WEIRD IN BETWEEN STAGE - Media Queries */
@media (min-width: 454px) and (max-width: 767px) {
	.purpleCircle {
		left: -50%;
	}
	.purpleCircle img {
		width: 140%;
	}
	.tan_content {
		width: 50%;
		top: 15%;
		left: 25%;
	}
	.shop_now_button_container {
		top: 70%;
	}
}
/* INDEX PAGE - Second Section */

.background_tan {
	background-image: url('../common/images/shape.png');
	background-size: cover;
	background-position: top center;
	margin-top: 8rem;
}
.background_tan > div.row {
	background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
}


/* INDEX PAGE - Third Section (Who We Are) */

.intro-bg-arrows {
	background-image: url(../static/images/2021/ms_down_arrows_tan.png);
	background-size: contain;
	background-repeat: repeat-y;
	background-position: center center;
}


/* WINE LOCATOR */
#grappos-locator {
	box-shadow: 1rem 1rem var(--wild-one-teal);
	border-radius: .25rem;
}


/* FOOTER */
.rainbow_gradient {
	z-index: -1;
}
.sign_up_content {
	position: absolute;
	top:14%;
	width: 60%;
	color: #FFF;
	font-size: 28px;
	left: 21%;
}


/* 2021 REDESIGN */

.products-intro>p, .img-bg-p {
	font-size: 45px;
}
.text-white {
	color: #fff;
}
.bg-cool-blue {
	background-color: var(--forever-cool-blue);
}

/* PRODUCT LISTING ITEMS*/
	.bg-arrow {
	background-image: url("../static/images/2021/ms_product_arrow.png");
	background-position: center 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.btn.atc-button {
	min-height: 150px;
	min-width: 150px;
	padding:0;
	position: absolute;
	bottom: 151px;
	left: 389px;
	z-index: 100;
	filter: drop-shadow(6px 8px 12px rgba(0,0,0,.16))
}
.atc-button>div{
	height: 150px;
}
.atc-button:hover, .atc-button:focus {
	background-color: var(--sweet-savvy-purple);
}
.img-bg {
	transition: all 1s ease;
	border-radius: 5%;
	height: 400px;
	width: 400px;
	position: absolute;
	top: 83px;
	left: 70px;
	background-color: var(--off-white);
	transform: rotate(0deg);
	display:none;
}
.product_listing_item:hover .img-bg {
	transform: rotate(-5deg);
	display:inline;
}
#product_listing_items .product_listing_item:hover .img-fluid {
	opacity: 0;
}
.img-bg-p-container {
	padding: 2rem;
	height: 450px;
	width: 450px;
	position: absolute;
	top: 83px;
	left: 52px;
	background-color: transparent;
}
.img-bg-p{
	line-height: 1;
}
#product_listing_items .img-fluid {
	max-width: 83%;
	z-index: 4;
	position: relative;
	transition: all .5s ease;
}
/**** large screen ****/
@media (max-width: 1199px){
	.btn.atc-button {
	   min-width: 130px;
	   min-height: 130px;
	   bottom: 122px;
	   left: 324px;
	}
	.atc-button>div{
		height: 130px;
	}
	p.h4 {font-size: 32px;}
	p.h6{font-size: 13px;}
	.products-intro>p {
		font-size: 40px;
	}
	.products-intro>p, .img-bg-p {
		font-size: 39px;
	}
	.img-bg, .img-bg-p-container {
		height: 350px;
		width: 350px;
	}
	.img-bg {
		top: 59px;
		left:58px;
	}
	.img-bg-p-container {
		padding: 1.6rem;
	}
}
/**** tablet ****/
@media (max-width: 991px){
	.intro-bg-arrows {background-size: 17%;}
	.btn.atc-button {
	   min-width: 95px;
	   min-height: 95px;
	   bottom: 108px;
	   left: 255px;
	}
	.atc-button>div{
		height: 95px;
	}
	p.h4 {font-size: 20px;}
	p.h6 {font-size: 10px;}
	#product_listing_items, #product_listing_items>div, .product-listing-item-image-container {
		padding-left: 0;
		padding-right: 0;
	}
	.products-intro>p {
		font-size: 34px;
	}
	.img-bg-p {
		font-size: 28px;
	}
	.img-bg, .img-bg-p-container {
		height: 242px;
		width: 242px;
	}
	.img-bg {
		top: 65px;
	}
	.img-bg-p-container {
		padding: 1rem;
		left: 66px;
	}
}
/**** mobile ****/
@media (max-width: 425px){
	h5, .h5 {font-size: 18px;}
	.btn.atc-button {
	   bottom: 93px;
	   left: 279px;
	}
	.intro-bg-arrows {background-size: 20%;}
	 .products-intro>p {
		font-size: 20px;
	}
}
/**** xs mobile ****/
@media (max-width: 374px){
	.btn.atc-button {
	   min-width: 90px;
	   min-height: 90px;
	   bottom: 82px;
	   left: 235px;
	}
	.atc-button>div{
		height: 90px;
	}
	p.h5{font-size: 18px;}
}

/* AGE GATE */
#age-gate {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
	background-color: rgba(0,0,0,.8);
}
.age-gate {
	background-color: #000000;
	border-radius: .5rem;
}
#age-gate .container {
	margin-top: 5%;
}
/*********************** REDESIGN END *****************************/
/* DEV SITE BUTTON */
.project_header {
	position:fixed;
	bottom: 15px;
	left: 15px;
	z-index: 9999;
}
.project_header font {
	display:none;
}
.project_header input {
	padding:1rem 2rem;
	border: 2px solid black;
	background-color: pink;
	cursor: pointer;
}