/* GENERAL SITE WIDE STYLING */
body {
	margin: 0px;
	padding: 0px;

	/*Needed for the sticky footer*/
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.banner {
	height: 200px;
	background-image: url(../images/banner.png);
	background-position-y: 20%;
	background-position-x: 50%;
	background-size: cover;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}

.main_padding {
	padding: 2.25% 0px 85px;
}

.content_block:not(:last-of-type) {
    margin-bottom: 4%;
}

.skip_link {
	/* Accessibility navigation skip link */
	position: absolute;
	z-index: 3;
	left: 50%;
	padding: 18px 26px;

	transform: translate(-50%, -100%);
	transition: transform 0.3s;

	background: #D1D2EB;

	font-size: 1.2rem;
	font-weight: 400;
}

.skip_link:focus {transform: translate(-50%, 25%);}

/* DROPDOWN MENU */
.dropdown_menu {
	display: block;
	position: fixed;
	overflow: hidden;

	width: 100%;
	height: 0px;

	background-color: white;

	transition: 0.5s;
	
	z-index: 2;
}

.dropdown_menu ul {
	margin-top: 10px;
}

.dropdown_menu li {
	display: block;
	min-width: 320px;
}

.dropdown_bottom {
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 0px;

	background-color: #7E1C73;
}

.dropdown_bottom a {
	color: #D1D2EB;
}

.dropdown_bottom_social {
	display: flex;
	padding: 10px;

	background-color: white;
}

.dropdown_menu a {
	display: block;
	padding: 10px 0px;
	text-align: center;
	border-bottom: 1px solid lightgray;

	font-family: 'Cupola-Bold';
	font-size: 2rem;
	font-weight: 400;
}

/* HEADER */
.header {
	padding: 18px;
	text-align: center;
	background-color: #6C1F6A;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

	z-index: 1;
}

.logo {
	padding: 0px 12px;

	font-family: 'Cupola';
	font-size: 4rem;

	color: white;
	border-bottom: 2px solid #F95D66;
}

.title {
	display: flex;
}

/* NAVIGATION */
nav.main_nav {
	margin: 18px 0px 0px;
}

a.nav_link {
	position: relative;
	color: #000;
	text-decoration: none;

	margin: 0px 5px;
	padding: 5px 10px;

	color: white;
}

a.nav_link:hover {
	color: white;	
}

.header li {
	font-size: 1.2rem;
}

.header li:last-child {
	display: none;
}

.header li:last-child a {
	padding: 5px 20px;
	color: white;

	background-color: rgba(209, 210, 235, 0.25);
	
	border: 2px solid #F95D66;
	border-radius: 60px;
}

a.nav_link::before {
	/* Needed for the underline animation on menu links */
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #F95D66;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out 0s;
}

a.nav_link:hover::before, a.nav_link:focus::before {
	visibility: visible;
	transform: scaleX(1);
}

#headersoc {
	right: -25%;
	top: 50%;
	z-index: 2;
}

#bannersoc {
	display: none;

	right: -100%;
	top: 0%;

	transform: translate(-100%, 0%);

	padding: 8px 18px 10px 20px;
	background: #F95D66;

	border-bottom-left-radius: 24px;
}

.socials {
	display: inline-block;
	position: relative;
}

.socials a {
	color: white;
	font-size: 28px;
}

.socials a:not(:last-of-type) {
	margin-right: 12px;
}

/* NAVIGATION */
ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

li {
	display: inline-block;
}

/* BODY */
.page_body {
	/*Needed for the sticky footer*/
	flex: 1;

	width: 95%;
	max-width: 1200px;

	margin-left: auto;
	margin-right: auto;
}

/* FOOTER */
.footer {
	width: 100%;
	padding-top: 15px;
	background-color: #6C1F6A;
	box-shadow: 0 -5px 10px rgba(108, 31, 106, 1);
}

.footer_body {
	display: flex;
	flex-wrap: wrap;

	max-width: 1220px;
	min-width: 320px;

	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

.footer_section {
	flex: 1;
	min-width: 200px;

	padding: 0px;
	margin: 0px 10px;
}

.footer_section p {
	font-family: 'Cupola-Bold';
	font-size: 1.5rem;
	color: white;
}

.footer_section ul {
	padding: 2% 4px 6%;
}

.footer_section a {
	display: inline-block;
	padding: 0px;

	font-size: 1.65rem;
	color: white;
}

.footer_section a:hover, .footer_section a:focus {
	color: #F95D66;
}

.footer_trim {
	height: 50px;
	background-image: url("../images/Triangle.png");
	background-repeat: repeat-x;
	
	
}

.copyright {
	margin-top: 5px;
	padding: 4px 0px;

	color: black;
	background-color: #D1D2EB;
	text-align: center;
}

/* MULTI USE */
li.block {
	display: block;
}

.flexseg {
	flex: 1;
}

.flex {
	display: flex;
}

/* ANIMATION */
a, input, textarea {
	/*Fade transitions for hover effects - properties need to be specified to prevent Edge animating on page load*/
	transition: background 0.40s ease-in-out, border 0.40s ease-in-out, color 0.30s ease-in-out;
}

/* FONT AND TEXT */
@font-face {
	font-family: 'Cupola';
	font-style: normal;
	font-weight: normal;
	src: url("./fonts/cupola.woff");
}

@font-face {
	font-family: 'Cupola-Bold';
	font-style: normal;
	font-weight: normal;
	src: url("./fonts/cupolabold.woff");
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Cupola-Bold';

	margin: 0;
	padding: 0;
}

h1 {font-size: 2rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.5rem;}

.h1_size {
	/* Used where you want a large heading without it affecting SEO */
	font-size: 2rem;
	font-family: Cupola-Bold;
}

.h_underline {
	display: inline-block;

	/* Adds an underline to headings */
	border-bottom: 2px solid #F95D66;
	padding-bottom: 6px;
	margin-bottom: 12px;
}

.subheading {
	border-color: #D1D2EB;

}

.thin {border-width: 1px;}
.nomargin {margin-bottom: 0px}

.h_focal {
	font-size: 1.8rem;
	font-family: Cupola-Bold;

	/* Move below code if this class is to be used anywhere other than homepage */
	text-align: center;
	margin: 1%;
}

a {
	color: black;
	text-decoration: none;
	font-family: 'Zen Loop', cursive;
	font-weight: 400;
	font-size: 1.75rem;
}

p {
	padding: 0px;
	margin: 0px;
	font-family: 'Zen Loop', cursive;
	font-weight: 400;
	font-size: 1.75rem;
}

/* Homepage */
.home_quote {
	width: 100%;
	padding: 16px 0px;
	
	text-align: center;
	background: aliceblue;

	box-shadow: 0px 0px 20px rgba(0,0,0,0.08);
}

.wid_flex_container {
	display: flex;
}

.wid_left {
	flex: 2;
	margin-right: 12px;

	min-width: 300px;
}

.wid_right {
	flex: 1;

	min-width: 300px;
}

.abt_flex_container {
	display: flex;
}

.abt_left {
	display: none;
	flex: 1;
	
	margin-right: 12px;
	
	background: aliceblue;
	height: 250px;
}

.abt_right {
	flex: 2;
}

.prod_prev_container {
	display: flex;
}

.prod_prev {
	flex: 1;
	border: 1px solid #D1D2EB;
}

.prod_prev:not(:last-of-type){
	margin-right: 8px;
}

.full {
	width: calc(100% - 42px);
	display: block;
}

.prod_prev img {
	width: 100%;
	display: block;
}

/* SITEMAP */
a.maplink {
	display: inline-block;
	margin-bottom: 5px;
}

a.maplink:hover, a.maplink:focus {
	text-decoration: underline;
}

/* PRIVACY */
.linkhover {
	font-weight: 500;
}

.linkhover:hover, .linkhover:focus {
	color: #F95D66;
}


/* RESPONSIVENESS */
@media screen and (max-width: 1800px) {
	/* Desktop breakpoint*/

}

@media screen and (max-width: 1200px) {
	/* Tablet (landscape) breakpoint */
	
}

@media screen and (max-width: 900px) {
	/* Tablet (portrait) breakpoint */
	#tulsi_img img {width: 240px;}

	/* Font size shifts */
	h1 {font-size: 1.75rem;}
	h2 {font-size: 1.75rem;}
	h3 {font-size: 1.25rem;}

	.h1_size {font-size: 2rem;}
	.h_focal {font-size: 2rem;}

	.logo {font-size: 3.7rem;}
	 
	/* !!! */
	.content_block:not(:last-of-type) {margin-bottom: 6.5%;}

	.wid_flex_container {
		display: block;
	}

	.wid_right {
		margin-top: 16px;
	}

	.banner {height: 150px;}
	.socials a {
		font-size: 24px;
	}
}

@media screen and (max-width: 700px) {
	.abt_flex_container {
		display: block;
	}

	.abt_left {
		margin: 0 0 12px 0;
	}

	#bannersoc {display: inline-block;}
	#headersoc {display: none;}
}

@media screen and (max-width: 650px) {
	.h_focal {font-size: 1.6rem;}
}

@media screen and (max-width: 630px) {
	.full {
		width: calc(100% - 34px);
	}
}

@media screen and (max-width: 600px) {
	/* Phone breakpoint */
	.header li:not(:last-child) {display: none;}
	.header li:last-child {display: inline-block;}

	.logo {
		font-size: 3.2rem;

		border-bottom: none;
		padding: 0px;
	}
	p {font-size: 1.6rem;}

	#tulsi_img img {width: 100%;}
	.main_padding {padding-top: 4%;}

	.footer_trim {
		height: 40px; 
		background-size: contain;
	}
}

@media screen and (max-width: 450px) {
	/* Font size shifts */
	h1 {font-size: 1.5rem;}
	h2 {font-size: 1.5rem;}
	h3 {font-size: 1.25rem;}

	.h1_size {font-size: 1.75rem;}
	.h_focal {font-size: 1.75rem;}

	.logo {font-size: 2.8rem;}

	.footer_section a {font-size: 1.5rem;}
	
	.content_block:not(:last-of-type) {margin-bottom: 8%;}
	.banner {height: 100px;}

	#bannersoc {padding: 6px 16px 8px 18px}
	.socials a {font-size: 22px;}
	.h_focal {font-size: 1.4rem;}
}

@media screen and (max-width: 380px) {
	/* Small phone breakpoint*/
	.logo {
		font-size: 2.4rem;
	}

	.header li {
		font-size: 1rem;
	}

	.footer_section p {
		font-size: 1.95rem;
	}

	.footer_trim {
		height: 35px;
	}
}