/******* COLOR PALETTE

	LOGO
		Yellow: 			#ffcc4d
		Light pink: 		#f4abba
		Fuschia: 			#ea596e
		Green: 				#77b255
	BG
		Maroon: 			#34151a
		Maroon Charcoal: 	#2f181b
		Charcoal: 			#202020
	TEXT
		White: #fffff
		Toned-down Yellow: #ecc259
		
********/
	
	
/******* GLOBAL MEDIA QUERIES *******/

.mobileWrapper {
	width: 100%;
	text-align: left; 
}
.desktopWrapper {
	 width: 100%;
}
@media (max-width: 981px) { /* mobile */
	.mobileWrapper {
		display: block;
	}
	.desktopWrapper {
		display: none;
	}
}
@media (min-width: 982px) { /* desktop */
	.mobileWrapper {
		display: none;
	}
	.desktopWrapper {
		display: block;
	}
}


/******* GLOBAL SETTINGS *******/

* {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 20px;
	line-height: 145%;
	color: #f4abba;
	letter-spacing: .01em;
	margin: 0;
	padding: 0;
}

img {
	border: none;
	border-style: none;
	border-width: 0px;
}

body {
	background-color: #2f181b;     
	padding: 0;
	margin: 0;
}

a:link, a:visited, div a:link, div a:visited {
	color: #ea596e;
	text-decoration: none; /* or "none" */
}

a:hover, a:active, div a:hover, div a:active {
	color: #ecc259;
	text-decoration: none;
}

.pointer:hover {
	cursor: pointer;
}

.readonly {
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/******* MOBILE LAYOUT *******/

hr.style1M {
	border: 0;
	height: 1px;
	margin: 38px 0 0px 0;
	padding: 0;
	background: #ea596e;
	background-image: -webkit-linear-gradient(left, #2f181b, #ea596e, #ea596e, #2f181b);
	background-image: -moz-linear-gradient(left, #34151a, #ea596e, #34151a);
	background-image: -ms-linear-gradient(left, #34151a, #ea596e, #34151a);
	background-image: -o-linear-gradient(left, #34151a, #ea596e, #34151a);
	z-index: 1;
}

.buttonDivM {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 7;
	display: none;
	width: 100%;
	height: 70%;
	border-radius: 0;
	background-color: rgba(52, 21, 26, 0.8);
	margin: 0;
	padding: 0;
}

.quoteImageM {
	display: block;
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	min-height: 100px;
	border-radius: 4vw;
	margin: 0;
	padding: 0;
	z-index:1;
}

.button1M {
    width: 46.8%;
    height: 42%;
    margin: 0;
	padding: 0;
    border-radius: 40px;
    border: 0px solid #ea596e;
	background-color: #f4abba;
	
	display: flex;
    align-items: center;
    justify-content: center;
}

.button1M:hover {
	border: 0px solid #f87c8e;
	background-color: #f4abba;
}


/******* MOBILE HEADER *******/

@media screen and (orientation:portrait) {
   #mobileHeader { display: block; }
}
@media screen and (orientation:landscape) {
   #mobileHeader { display: none; }
}

#mobileHeader {
	position: fixed;
	z-index: 9;
	top: -20vw;
	padding-top: 20vw;
	width: 100%;
	background-color: #2f181b;
}

#mobileMenu {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	line-height: 285%;
	letter-spacing: .01em;
	color: #ea596e;
	
	position: fixed;
	z-index: 8;
	top: -10px;
	left: 0;	
	padding: 10px 14vw 6vw 12.5vw;
	margin: 0 0 0 0;
	background-color: #2f181b;
	border-bottom: .8vw solid #ea596e;
}
#mobileMenu a:link, #mobileMenu a:visited, #mobileMenu a:hover, #mobileMenu a:active {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	line-height: 285%;
	letter-spacing: .01em;
	color: #ea596e;
}
#mobileMenu a:active {
	color: #ecc259;	
}

#mobileSearch {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	line-height: 285%;
	letter-spacing: .01em;
	color: #ea596e;
	text-align: center;

	position: fixed;
	z-index: 8;
	top: -10px;	
	right: 0;
	width: 100%;
	padding: 6vw 0vw 6vw 0vw;
	margin: 0 0 0 0;
	background-color: #2f181b;
	border-bottom: .8vw solid #ea596e;
}
#mobileSearch a:link, #mobileSearch a:visited, #mobileSearch a:hover, #mobileSearch a:active {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	line-height: 285%;
	letter-spacing: .01em;
	color: #ea596e;
}
#mobileSearch a:active {
	color: #ecc259;	
}


/******* MOBILE SEARCH *******/

.searchFormM {
	display:inline;
}

form.searchFormM {
	position: relative;
	top: 0;
	z-index: 3;
}

.searchFormM input[type=text] {
	width: 80vw;
    border: 0px solid #ea596e; 
	border-radius: 3vw;
    padding: 4vw 4vw 4vw 4vw;
    background-color: #160d0e; 
    margin: 0;
	
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	letter-spacing: .01em;
	color: #ecc259;
	text-align: center;
}
.searchFormM input[type=text]:focus{
  	outline: 0px solid #ecc259;
	box-shadow: 0 0 .6vw #ecc259;
}

.searchFormM button {
	padding: 2vw 30vw 2vw 30vw;
    border: 0px solid #ea596e;
	border-radius: 3vw;
	background-color: #ea596e;
	
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 7vw;
	letter-spacing: .01em;
	color: #34151a;
	text-align: center;
}
.searchFormM button:active {
	color: #34151a;
	border: 0px solid #ecc259;
	background-color: #ecc259;
}

.searchFormM ::-webkit-input-placeholder { color: #75383f; } /* Chrome/Opera/Safari */
.searchFormM ::-moz-placeholder { color: #75383f; } /* firefox 19+ */
.searchFormM :-moz-placeholder { color: #75383f; } /*below firefox 19 */
.searchFormM :-ms-input-placeholder { color: #75383f; } /* ie */

.searchMessageM {
	position: relative;
	top: 0;
	left: 0;
	margin: 4vw 0 2vw 0;
	color: #ecc259;
	text-align: center;
	
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 6vw;
	font-style: normal;
	font-weight: bold;
	line-height: 200%;
	letter-spacing: .01em;
}

.searchMessage2M {
	position: relative;
	top: -2vw;
	left: 0;
	margin: 0vw 0 2vw 0;
	color: #ea596e;
	text-align: center;
	
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 5vw;
	font-style: normal;
	font-weight: bold;
	line-height: 200%;
	letter-spacing: .01em;
}


/******* MOBILE – COLLECTIONS HOME PAGE *******/

.collectionsWrapperM {
	position: relative;
	top: 2vw;
	left: 0;
	width: 100%;
}

.collectionM {
	position: relative;
	width: 100%;
	height: 16vw;
	padding: 4vw 0 4vw 0;
	margin: 0 0 4vw 0;
	background-color: none;
	
	border: 0 solid #34151a;
	border-radius: 4vw;

	overflow: hidden;
}

.collectionM img, .collectionBannerM img {
	position: absolute;
	z-index: 0;
	top: 0;
	left: -32vw;
	width: 192vw;
	height: 25vw;
}

.collectionBannerM {
	position: relative;
	width: 100%;
	height: 16vw;
	padding: 4vw 0 4vw 0;
	margin: 0 0 4vw 0;
	background-color: none;
	
	border: 0 solid #34151a;
	border-radius: 0vw;

	overflow: hidden;
}

.collectionTitleM {
	text-align: center; 
	font-family: 'Caveat', cursive;
	font-size: 11.2vw;
	font-style: normal;
	font-weight: bold;
	line-height: 90%;
	letter-spacing: .01em;
	
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 6vw;
	
	color: #f5c753;
	text-shadow: 4px 4px 40px #272624;
}

.collectionDots {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 6vw;
	line-height: 90%;
	letter-spacing: .01em;
	color: #ea596e;
	text-align: center;
	
	padding: 0;
	margin: 0 0 4vw 0;
}

/******* MOBILE – PHOTOS PAGE *******/

.photosWrapperM {
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}

.photoM {
	position: relative;
	width: 100%;
	margin: 0vw 0 2.5vw 0;
	padding: 0;
	border-radius: 4vw;
}

.photoDivM {
	position: relative;
}

.photoClickerM {
	position: absolute;
	left: 0;
	top: 0;
	z-index:5;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}

.photoButtonDivM {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 7;
	display: none;
	width: 100%;
	height: 40%;
	border-radius: 0;
	background-color: rgba(52, 21, 26, 0.8);
	margin: 0;
	padding: 0;
}

.photoButtonM {
	position: absolute;
	top: 12.5%;
	left: 10%;
    width: 80%;
    height: 60%;
    margin: 0;
	padding: 0;
    border-radius: 40px;
    border: 0px solid #ea596e;
	background-color: #f4abba;
	
	display: flex;
    align-items: center;
    justify-content: center;
}

.photoButtonM:hover {
	border: 0px solid #f87c8e;
	background-color: #f4abba;
}

/******* DESKTOP LAYOUT *******/

hr.style1D {
	border: 0;
	height: 1px;
	margin: 16px 0 23px 0;
	padding: 0;
	background: #ea596e;
	background-image: -webkit-linear-gradient(left, #2f181b, #ea596e, #ea596e, #2f181b);
	background-image: -moz-linear-gradient(left, #34151a, #ea596e, #34151a);
	background-image: -ms-linear-gradient(left, #34151a, #ea596e, #34151a);
	background-image: -o-linear-gradient(left, #34151a, #ea596e, #34151a);
	z-index: 1;
}

.buttonDivD {
	position: absolute;
	top: 0;
	right: 0;
	width: 352px;
	margin: 14px 0 0 0;
	padding: 0;
}
.buttonDivD p, div {
	font-family: 'Merriweather Sans', sans-serif;	/* or "Lucida Grande", sans-serif; */
	font-size: 20px;
	line-height: 145%;
	color: #ea596e;
	letter-spacing: .01em;
	margin: 0px;
	padding: 0px;
	text-align: left;
}
.buttonDivD a:link, a:visited {
	color: #ea596e;
	text-decoration: none;
}
.buttonDivD a:hover, a:active {
	color: #ea596e;
	text-decoration: none;
}

.button1D {
	position:relative;
	z-index: 1;
    width: 99%;
    height: 56px;
    padding: 0;
	margin: 10px 0 6px 0;
    border-radius: 14px;
    border: 1px solid #ea596e;
	background-color: #34151a;
	
	display: flex;
    align-items: center;
    justify-content: left;
}
.button1D:hover {
	color: #ecc259;
	border: 1px solid #ecc259;
	background-color: #3e1a1e;
}
.button1D img {
	height: 40px;
	margin: 0 15px 0 28px;
	padding: 0;
}


/******* DESKTOP SEARCH *******/

#search1D {
	display:inline;
}

form#search1D {
	position: absolute;
	top: 4px;
	right: 10px;
	z-index: 3;
}

#search1D input[type=text] {
	width: 282px;
    border: 0px solid #ea596e; 
	border-radius:5px;
    padding: 1px 4px 1px 10px;
    background-color: #160d0e; 
    margin: 0 0 0 2px;
	color: #ecc259;
	letter-spacing: .01em;
}
#search1D input[type=text]:focus{
  	outline: 0px solid #ecc259;
	box-shadow: 0 0 1px #ecc259;
}

#search1D button {
	padding: 0px 4px 0px 4px;
	color: #34151a;
    border: 0px solid #ea596e;
	border-radius:5px;
	background-color: #ea596e;
	
}
#search1D button:hover {
	color: #34151a;
	border: 0px solid #ecc259;
	background-color: #ecc259;
}

#search1D ::-webkit-input-placeholder { color: #75383f; } /* Chrome/Opera/Safari */
#search1D ::-moz-placeholder { color: #75383f; } /* firefox 19+ */
#search1D :-moz-placeholder { color: #75383f; } /*below firefox 19 */
#search1D :-ms-input-placeholder { color: #75383f; } /* ie */


/******* DESKTOP – COLLECTIONS HOME PAGE *******/

.collectionsWrapper {
	position: relative;
	top: 8px;
	left: 50%;
	margin-left: -480px;
	width: 960px;
}

.collection {
	position: relative;
	width: 100%;
	height: 85px;
	padding: 20px 0 20px 0;
	margin: 0 0 36px 0;
	background-color: none;
	
	border: 1px solid #34151a;
	border-radius: 0px;

	overflow: hidden;
}

.collection img {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 960px;
	height: 125px;
}

.collectionTitle {
	text-align: center; 
	font-family: 'Caveat', cursive;
	font-size: 90px;
	font-style: normal;
	font-weight: bold;
	line-height: 90%;
	letter-spacing: .01em;
	
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 21px;
	
	color: #f5c753;
	text-shadow: 4px 4px 40px #272624;
	background-position: top center;
	background-repeat: no-repeat; 
	background-size: 960px 125px; 

	transition: transform .3s ease, background-image .3s ease, background-size .3s ease, color .3s ease;
	transform: scale(1.0);
}
.collectionTitle:hover {
	color: #f5c753;
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 939px 125px; 
	transition: transform .3s ease, background-image .3s ease, background-size .3s ease, color .3s ease;
	transform: scale(1.035);
}

.collectionTitleStatic {
	pointer-events: none;
	text-align: center; 
	font-family: 'Caveat', cursive;
	font-size: 90px;
	font-style: normal;
	font-weight: bold;
	line-height: 90%;
	letter-spacing: .01em;
	
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 20px;
	
	color: #f5c753;
	text-shadow: 4px 4px 40px #272624;
	background-position: top center; 
	background-repeat: no-repeat; 
	background-size: 939px 125px; 
	transform: scale(1.035);
}

.collectionTitle1 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection1_60.png);
}
.collectionTitle1:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection1_50.png);
}
.collectionTitle2 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection2_60.png);
}
.collectionTitle2:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection2_50.png);
}
.collectionTitle3 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection3_60.png);
}
.collectionTitle3:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection3_50.png);
}
.collectionTitle4 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection4_60.png);
}
.collectionTitle4:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection4_50.png);
}
.collectionTitle5 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection5_60.png);
}
.collectionTitle5:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection5_50.png);
}
.collectionTitle6 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection6_60.png);
}
.collectionTitle6:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection6_50.png);
}
.collectionTitle7 {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection7_60.png);
}
.collectionTitle7:hover {
	background-image: url(https://hibiscus4tulsi.com/images/site/collection7_50.png);
}


/******* DESKTOP – PHOTOS PAGE *******/

.photosWrapper {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}

.photoD {
	width: 460px;
	padding: 0;
	margin: 0;
	border-radius: 20px;
}

.photoDiv {
	display: inline-block;
	position: relative;
	width: 460px;
	margin: 2px 8px 0px 8px;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

.hoverBox {
	display: inline-block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	padding: 50px 0 0 0;
	opacity: 0;
	transition: opacity .3s ease, padding .3s ease;
}
.hoverBox:hover {
	padding: 0 0 0 0;
	opacity: 1;
	transition: opacity .3s ease, padding .3s ease;
}

.photoButtonDiv {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 7;
	width: 100%;
	height: 40%;
	border-radius: 0;
	background-color: rgba(52, 21, 26, 0.8);
	margin: 0;
	padding: 0;
	text-align: center;
}

.photoButton {
	position: absolute;
	top: 20px;
	left: 50%;
    width: 414px;
    height: 56px;
    padding: 0;
	margin: 0 0 0 -207px;
    border-radius: 14px;
    border: 1px solid #ea596e;
	background-color: #34151a;
	
	text-align: center;
	display: flex;
    align-items: center;
    justify-content: center;
}
.photoButton:hover {
	color: #ecc259;
	border: 1px solid #ecc259;
	background-color: #3e1a1e;
}
.photoButton img {
	height: 40px;
	margin: 0 15px 0 0;
	padding: 0;
}