/*
-----------------------
    custom.css
    For styles / helper classes that are not easily set in Tailwind.
    Some of these can maybe be refactored into tailwind classes but for now this file is manageable.
-----------------------
*/


/*
    OVERRIDES OF CORE ELEMENTS
*/
body {
	width: 100%;
	overflow-x: hidden;
}

p {
    color:#767676;
}

/*
-----------------------
    NAVIGATION HELPERS
-----------------------
*/
#sideMenu {
	right: -3000px;
	opacity:0;
	transition: right 0.5s;
}

#sideMenu.is-active {
	opacity:1;
	right: 0px;
}

.toggle-account {
	height: 40px;
	width: 40px;
	position: relative;
	border: 1px solid #525C4D;
	cursor: pointer;
	transition: background-color 0.2s;
}

.toggle-account i {
	position: absolute;
	left: 11px;
	top: 4px;
}

.toggle-account:hover {
	background-color: white;
}

.toggle-account:hover i {
	color: #525C4D;
}

.hamburger {
	transform: scale(0.8, 0.8);
	opacity: 0.7;
	transition: opacity 0.2s;
}

.hamburger:hover {
	opacity: 1;
}

.top-logo {
	transition: transform 0.1s;
}

.top-logo:hover {
	transform: scale(1.02, 1.02);
}

/*
-----------------------
    TEXT HELPERS
-----------------------
*/
.underline-title {
	background-image: url(/assets/images/homepage/underline.png);
	background-size: 300px;
    background-position: 50% calc(100% - 15px);
	padding-bottom: 50px;
	display: inline-block;
	background-repeat: no-repeat;
}

.underline-title-white {
    background-image: url(/assets/images/homepage/underline-white.png);
    background-size: 300px;
    background-position: 50% calc(100% - 15px);
    padding-bottom: 50px;
    display: inline-block;
    background-repeat: no-repeat;
}


/*
-----------------------
    BACKGROUND HELPERS
-----------------------
*/
.background-textured {
	background: url(/assets/images/homepage/texture-bg.png);
	background-size: cover;
}

.background-textured-dark {
	background: url(/assets/images/homepage/texture-bg-dark.png);
	background-size: cover;
}

.background-textured-darker {
    background: url(/assets/images/homepage/texture-bg-darker.png);
    background-size: cover;
}

.background-dark-image {
    background: url(/assets/images/homepage/quotebg.jpg);
    background-size: cover;
}

/*
-----------------------
    BUTTON HELPERS
-----------------------
*/

.btn {
	border: 1px solid #525C4D;
	color: #525C4D;
	padding: 12px 25px;
	background: #f9f4ed;
	display: inline-block;
    letter-spacing: 0.15em;
	transition: all 0.2s;
}

.btn:hover {
	background: #525C4D;
	color: #FFF;
}

.btn-inverse {
	border: 1px solid #525C4D;
	color: #FAF6ED !important;
	padding: 8px 25px;
	background: #525C4D !important;
	display: inline-block;
    letter-spacing: 0.15em;
	transition: all 0.2s;
}

.btn-inverse:hover {
	background: #FFF !important;
	color: #525C4D !important;
}

.btn-alt {
	border: none;
	color: #525C4D;
	padding: 13px 25px;
	background: #dddacc;
	display: inline-block;
    letter-spacing: 0.15em;
	transition: all 0.2s;
}

.btn-alt:hover {
	background: #525C4D;
	color: #FFF;
}


/*
-----------------------
    OTHER HELPERS
-----------------------
*/

.progress-circle {
	width: 120px;
	height: 120px;
	border-width: 4px !important;
}

.card-one {
	top: -50px;
	left: 30px;
	width: 250px;
}

.card-two {
	bottom: -100px;
	right: 30px;
	width: 250px;
}

/*
-----------------------
    GIFT CLICK ANIMATION
-----------------------
*/
#giftOpen {
	transition: transform 0.2s !important;
	cursor: pointer;
	max-width: 250px;
}

#giftOpen:hover {
	transform: scale(1.1, 1.1) !important;
}

@keyframes bang {
	from {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

#giftOpenWrap i {
	animation: bang 750ms ease-out forwards;
	position: absolute;
	display: block;
	left: 50%;
	top: 25%;
	width: 3px;
	height: 8px;
	opacity: 0;
}

#cards {
	display: none;
}

#cards.is-active {
	display: flex;
}

#giftDetail {
	display: none;
}

#giftDetail.is-active {
	display: block;
}

#giftOpenWrap {
	display: none;
}

#giftOpenWrap.is-active {
	display: block;
}

#intro-text {
    display: none;
}

#intro-text.is-active {
    display:block;
}

#main-text {
    display: none;
}

#main-text.is-active {
    display:block;
}

/*
-----------------------
    MODAL HELPERS
-----------------------
*/


.overlay {
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/*
-----------------------
    LOADING HELPERS
-----------------------
*/


@keyframes gradientSweep {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.loading-overlay {
    background: linear-gradient(120deg,
    rgba(220, 219, 205, 0.7),
    rgba(243, 242, 230, 0.7),
    rgba(255, 255, 245, 0.7));

    background-size: 200% 200%;
    animation: gradientSweep 10s ease-in-out infinite;
	padding: 20px;
	width: 100%;
	position: absolute;
	height: 100%;
}

.loader {
	color: #525C4D;
	position: relative;
	font-size: 15px;
	background: #525C4D;
	animation: escaleY 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
	animation-delay: -0.16s;
}

.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2em;
	background: #525C4D;
	width: 1em;
	height: 4em;
	animation: escaleY 1s infinite ease-in-out;
}

.loader:before {
	left: -2em;
	animation-delay: -0.32s;
}

@keyframes escaleY {

	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

/*
-----------------------
    IMAGE HELPERS
-----------------------
*/
.circle-photo {
	clip-path: circle();
	width: 50%;
	position: absolute;
	left: 50%;
	margin-left: -25%;
    bottom:-25%;
}


@media screen and (max-width: 900px) {
	.circle-photo {
        width:250px;
        margin-left:-125px;
        bottom:-35%;
	}
}


.circle-photo-small {
    clip-path: circle();
    width: 100px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    margin-left: -50px;
}

@media screen and (min-width: 768px) {

    .circle-photo-small {
        clip-path: circle();
        width: 100px;
        position: absolute;
        bottom: -42px;
        left: 50%;
        margin-left: -50px;
    }


}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}



/* Workarounds */
.font-semibold, .bold, b {
    font-weight: bold !important;
}