/*!
Theme Name: SoulFlame v1.0
Author: Rohmad DJ
Author URI: https://soulflame.org
Description: A new ultimate for SoulFlame V1.0
Version: 3.3.5
Requires at least: 5.0
Tested up to: 6.2
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: SoulFlame
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/assets/dist/main.css" */


/* From http://codex.wordpress.org/CSS */

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.wp-caption {
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
	max-width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.bypostauthor {
	font-weight: bold;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* RESET */
#learn-tarot {
  overflow: hidden;
}

/* WRAPPER */
#wrapper {
	background-color: #120043;
}

/* FONT */
.ff-open-sans {
	font-family: 'Open Sans', sans-serif!important;
}

/* NAVBAR */
.navbar-brand {
	width: 230px;
}
#navbar ul.navbar-nav.top-nav {
	margin-left: 12em;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
.dropdown-menu .menu-item {
	margin: 0;
}
header .menu-item {
	margin: 0 1.5rem;
}
.top-nav .nav-link {
	font-family: 'Lexend';
	font-weight: 400;
	font-size: 16px;
	--bs-nav-link-color: #FFFFFF!important;
}
.top-nav .nav-link:hover {
	color: #FFFFFF;
}
.top-nav-btn {
	background: linear-gradient(86.88deg, #CC03ED 0%, #3D3EFE 96.41%);
	border-radius: 50px!important;
	border: none!important;
	font-family: 'Lexend'!important;
	font-size: 16px!important;
	font-weight: 400!important;
	transition: 0.3s!important;
}
.top-nav-btn:hover {
	background: linear-gradient(86.88deg, #3D3EFE 0%, #CC03ED 96.41%);
}
.nav-link:hover {
	/* color: #CC03ED!important; */
	text-decoration: underline;
}

/* SECTION */
#main {
	margin-top: 0em!important;
}
#home .top-section {
	background-image: url('assets/images/section-1-1.png');
	background-position: top center;
	background-size: cover;
}
#home .section-2,
#home .section-4,
#love-tarot .section-2,
#love-tarot .section-4,
#love-tarot-reading .section-2,
#love-tarot-reading .section-4,
#learn-tarot .section-4,
#blog-post .top-section,
#about-us .section-2,
#contact .top-section {
	background-color: #120043;
	background-image: url('assets/images/section-2-1.png');
	background-size: cover;
}
#home .section-3,
#love-tarot .top-section {
	background: url('assets/images/section-3-1-cut.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}

#love-tarot .section-3,
#love-tarot-reading .section-3,
#learn-tarot .section-3,
#blog-post .section-3,
#about-us .section-3,
#contact .section-2,
#affiliate .section-3 {
	background: url('assets/images/love-tarot-section-3-1.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
#love-tarot-reading .top-section {
	background: url('assets/images/love-tarot-reading-section-1-1.png');
	/* background-repeat: no-repeat; */
	background-position: top center;
	background-size: contain;
}
#love-tarot-reading .section-1-1 {
	background: linear-gradient(180deg, rgba(5, 0, 2, 0.37) -18.07%, rgba(255, 0, 118, 0.7) 100%);
}
.headline {
	background: linear-gradient(90deg, #900B34 3.04%, #EE4392 100%);
	background-size: 300% 300%;
	animation: gradient 15s ease infinite;
}
#learn-tarot .top-section {
  background: url('assets/images/tarot-learn-top-section-bg.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
  background-attachment: fixed;
}
#about-us .top-section {
	background: url('assets/images/about-us-top-section-bg.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
#blog-post .top-section {
  background-attachment: fixed;
}
#affiliate .top-section {
  background: url('assets/images/affiliate-top-section-bg.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
#affiliate .section-2 #affiliate-box .box {
  background-image: url('assets/images/affiliate-section-bg-min.png');
  background-size: cover;
  background-position: top center;
  background-color: #120043;
}
#user .top-section {
  background: url('assets/images/user-login-bg-min.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
#user .top-section.welcome {
	background: url('assets/images/about-us-top-section-bg.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
#card_list_2,
#card_list_3,
#card_list_4,
#card_list_5,
#card_list_6,
#card_list_7 {
  display: none
} 
#blog-single {
  background-color: #FFFFFF;
}
#user .modal .modal-header {
  border-bottom: 0;
}
#user .modal .modal-footer {
  border-top: 0;
}

/* UTILITIES */
.head-1 {
	font-family: 'DM Sans', sans-serif;
	font-size: 81px;
}
.head-1-inconsistent {
	font-family: 'DM Sans', sans-serif;
	font-size: 60px;
}
.head-1-2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 60px;
}
.head-2 {
	font-family: 'DM Sans', sans-serif;
	font-size: 38px;
}
.section-4 .head-2, #career .section-3 .head-2 {
	font-size: 40px;
}
.head-3 {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
}
.sub-head-1 {
	font-family: 'DM Sans', sans-serif;
	font-size: 45px;
}
.sub-head-2 {
	font-family: 'DM Sans', sans-serif;
	font-size: 32px;
}
.sub-head-3 {
	font-family: 'DM Sans', sans-serif;
	font-size: 24px;
}
.sub-1, .btn.sub-1 {
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
}
.sub-2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
}
.sub-3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
}

.body-1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
}
.body-2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
}
.body-3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}
.body-4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}
.apply-now {
	font-family: 'Lexend', sans-serif;
	font-size: 22px;
}
.ls-1 {
	letter-spacing: 0.235em;
}
.start-15 {
	left: 15%!important;
}
.w-40 {
  width: 40%!important;
}
.w-10 {
	width: 10%;
}
.lh-2 {
	line-height: 1.8;
}
.my-5-em {
  margin-top: 5em!important;
  margin-bottom: 5em!important;
}
#about-us .section-1 .sub-1 {
  line-height: 35px;
}
.fc-brown {
  color: #FFC163;
}
#blog-single .head-1 {
	font-size: 50px;
}
#blog-single .entry-content p, #blog-single .entry-content ul li {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: #5A5A5A;
}
#blog-single .entry-content h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
	/* color: #000000; */
}
#blog-single .entry-content a.btn {
	background: linear-gradient(117deg, #FF1D85 0%, #8569FF 100%);
	border-radius: 45px;
	border: none;
	color: white;
}
#blog-single .entry-content a.btn:hover {
	/* background: linear-gradient(86.88deg, #3D3EFE 0%, #CC03ED 96.41%); */
  background: linear-gradient(117deg, #8569FF 0%, #FF1D85 100%)
}

/* COMPONENT */
.hr {
	background: linear-gradient(90.35deg, #8D00F8 22.31%, #CC03ED 100.31%);
	height: .7em;
}
.brown-btn, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background: linear-gradient(117deg, #FF1D85 0%, #8569FF 100%) !important;
	border-radius: 10px!important;
	border: none!important;
  color: white!important;
}
.brown-btn:hover {
  background: linear-gradient(117deg, #8569FF 0%, #FF1D85 100%)!important;
}
.white-btn {
  background: linear-gradient(110.37deg, rgba(215, 215, 215, 0.776) -6.7%, rgba(255, 255, 255, 0.8) 49.71%, rgba(204, 204, 204, 0.632) 94.56%);
  backdrop-filter: blur(6.21055px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 16px;
}
.border-btn {
  border-radius: 50px!important;
	border: 2px solid #FFC163!important
}
#home .section-1 .card {
  background: transparent;
}
#home .section-2 .card {
	background: linear-gradient(163.31deg, #120043 -8.98%, rgba(255, 29, 133, 0.71) 110.32%);
	backdrop-filter: blur(35.2841px);
	border-radius: 20px;
	height: 100%;
}
#home .section-4 .card,
#about-us .section-2 .card {
	border: 2px solid #FFFFFF;
	border-radius: 20px;
	height: 100%;
  min-height: 500px;
}
#home .section-4 .card.linear,
#about-us .section-2 .card.linear
{
	border: none!important;
	background: linear-gradient(163.31deg, #120043 -8.98%, rgba(255, 29, 133, 0.71) 110.32%);
	backdrop-filter: blur(34.327px);
}
#home .section-4 .carousel-control-prev,
#about-us .section-2 .carousel-control-prev {
	opacity: 1;
	width: 5%;
	left: -5%;
}
#home .section-4 .carousel-control-next,
#about-us .section-2 .carousel-control-next {
	opacity: 1;
	width: 5%;
	right: -5%;
}
#home .section-4 .carousel .carousel-indicators,
#about-us .section-2 .carousel .carousel-indicators {
	margin-bottom: -.5em;
}
#home .section-4 .carousel .carousel-indicators button,
#about-us .section-2 .carousel .carousel-indicators button {
	width: 20px;
	height: 20px;
	margin: 0 .8em;
	border-radius: 100%;
}
#love-tarot .section-3 .form-control,
#love-tarot .section-3 .form-select,
#love-tarot-reading .section-3 .form-control,
#love-tarot-reading .section-3 .form-select,
#learn-tarot .section-3  .form-control,
#learn-tarot .section-3  .form-select,
#blog-post .section-3  .form-control,
#blog-post .section-3  .form-select,
#about-us .section-3  .form-control,
#about-us .section-3  .form-select,
#contact .section-2  .form-control,
#contact .section-2  .form-select {
	border: none;
	border-radius: 0;
	line-height: 3;
}
#love-tarot .section-3 .brown-btn,
#love-tarot-reading .section-3 .brown-btn,
#learn-tarot .section-3 .brown-btn,
#blog-post .section-3 .brown-btn,
#about-us .section-3 .brown-btn {
	border-radius: 0!important;
}
#love-tarot .section-4 .card,
#love-tarot-reading .section-4 .card,
#learn-tarot .section-4 .card,
#blog-post .top-section .card {
	border: none;
	background-color: #F9F9FE;
  height: 100%;
}
#love-tarot .section-4 .card .btn-category,
#love-tarot-reading .section-4 .card .btn-category,
#learn-tarot .section-4 .card .btn-category,
#blog-post .top-section .card .btn-category {
	background: linear-gradient(100.47deg, #FF1D85 7.62%, #676CF6 102.22%);
	border: none;
	border-radius: 0;
	padding: 0.5em 2em;
}
#love-tarot .section-4 .card .card-footer,
#love-tarot-reading .section-4 .card .card-footer,
#learn-tarot .section-4 .card .card-footer,
#blog-post .top-section .card .card-footer {
	background: #f9f9fe;
	border: none;
}
#contact .top-section .card#one {
  background: linear-gradient(230deg, #120043 -8.98%, rgba(255, 29, 133, 0.71) 110.32%);
  backdrop-filter: blur(37.5913px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 20.2993px;
}
#contact .top-section .card#two {
  background: linear-gradient(50deg, #120043 -8.98%, rgba(255, 29, 133, 0.71) 110.32%);
  backdrop-filter: blur(37.5913px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 20.2993px;
}
#affiliate .box {
  margin: 2em 0;
  padding: 2em;
  border-radius: 18.032px;
  background: #FFF;
  box-shadow: -2.6714529991149902px 2.6714529991149902px 6.6786322593688965px 0px rgba(0, 0, 0, 0.25), 2.6714529991149902px -2.6714529991149902px 6.6786322593688965px 0px rgba(0, 0, 0, 0.25);
}
#affiliate .sub-box {
  padding: 2em;
  border-radius: 8.811px;
  background: #EBEBEB;
}
#affiliate .list-group-item {
  border: none;
  padding: 1em 0;
}
#affiliate .list-group-item a {
  color: black;
}
#affiliate .list-group-item a:hover {
  text-decoration: underline;
}
#affiliate .btn.btn-linear {
  background: linear-gradient(138deg, #FF1D85 0%, #6F0860 100%);
  backdrop-filter: blur(6.210552215576172px);
}
#user .nav-link {
  color: white
}
img.tarot {
	border: 3px solid #FFFFFF;
	border-radius: 15px;
}
.btn-circle {
  border: 2px solid #FFC163!important;
  border-radius: 25px!important;
  color: #FFC163!important;
}
#blog-post .blog-thumbnail-custom {
  height: 100%;
  width: 100%;
}
#blog-single .hstack img.rounded-circle {
	width: 5%;
}
#blog-single .post-thumbnail img {
	border-radius: 33px;
}
#blog-single .card {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
#blog-single .card, #blog-single .card-footer {
	border: none;
	background-color: #F9F9FE;
}
#blog-single .card-footer .row {
	border-top: 1px solid #c5c5c56b;
}
#blog-single .card .btn-category {
  background: linear-gradient(117deg, #FF1D85 0%, #8569FF 100%) !important;
	border: none;
	border-radius: 0;
	padding: 0.5em 2em;
}
#blog-single .card .card-img-top {
	height: 200px;
	/* max-height: 200px; */
}
#blog-single .post img, .post-thumbnail img {
	width: 100%;
}
i.copy_text:hover {
  cursor: pointer;
}
.custom-wpform input, .custom-wpform textarea {
  border: none!important;
  border-radius: 0!important;
}

/* LOADER */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}
.lds-ellipsis div {
  position: absolute;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff60ba;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

/* Center the loader */
#loader {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  border-top: 5px solid #FFEB3B;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/* COLORING */
.error {
	color: red
}
.text-orange {
	color: #FFC163;
}
.text-pink {
  color: #FF1D85!important;
}
.text-gray {
  color: #858585;
}
.text-navy {
  color: #0E0041;
}
.text-linear {
	background: linear-gradient(180deg, #FF8FC3 39.43%, #FF00A8 65.07%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	filter: drop-shadow(0.1em 0.1em 0.3em hsl(340, 100%, 60%));
}
.text-linear-2 {
	background: linear-gradient(90deg, #FFC163 7.81%, #FFFFFF 53.64%, #FFC163 91.63%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.gradient-color {
  background: -webkit-linear-gradient(271.16deg, #3D3EFE 5.91%, #CC03ED 58.36%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
#blog-single .brown-btn a {
  color: white;
}
/* FOOTER */
#footer {
	background-color: #160133!important;
	font-family: 'DM Sans', sans-serif;
}
#footer .border-top {
	border-top: 1px solid #dfe6ef24 !important;
}
#footer p {
	font-size: 14px;
	color: #DDDDDD;
}
#footer .nav-link {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	color: #BDBDBD;
}
#footer .nav-link {
	/* font-weight: 600; */
	color: #FFFFFF;
	padding: 0 2em;
}
#footer .menu-item a[aria-current=page] {
	color: #FFFFFF!important;
	/* border-radius: 10px;
	background: linear-gradient(100.47deg, #CC03ED 7.62%, rgba(61, 62, 254, 0.78) 102.22%); */
}

/* KEYFRAMES ANIMATION */
@keyframes gradient {
	0% {
    background-position: 82% 0%;
	}

	50% {
			background-position: 19% 100%;
	}
	100% {
			background-position: 82% 0%;
	}
}

@-webkit-keyframes smallPulse {
	0% {
			-webkit-transform: scale(.75);
			transform: scale(.75);
			opacity: 1
	}

	95%,to {
			-webkit-transform: scale(2);
			transform: scale(2);
			opacity: 0
	}
}

@keyframes smallPulse {
	0% {
			-webkit-transform: scale(.75);
			transform: scale(.75);
			opacity: 1
	}

	95%,to {
			-webkit-transform: scale(2);
			transform: scale(2);
			opacity: 0
	}
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


/* INCONSISTENT VARIABLE */
#funnel .section-1 .head-1 {
	font-size: 60px;
}

/* RESPONSIVE */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.top-section .w-75 {
		width: 100%!important;
	}
	.top-section .start-50 {
		left: 51.5%!important;
	}
	.top-section .top-100 {
		top: 102%!important;
	}
	.top-section img.w-25 {
		width: 40%!important;
	}
	header .menu-item {
		margin: 0 1rem;
	}
	.head-1 {
		font-size: 60px;
	}
	.head-2 {
		font-size: 30px!important;
	}
	.body-1 {
		font-size: 16px;
	}
	.section-3 .col-4 img.w-50, .top-section .col-4 img.w-50 {
		width: 100%!important;
	}
	#navbar ul.navbar-nav.top-nav {
		margin-left: 0;
	}
	#footer img.w-10 {
		width: 20%;
	}
  #learn-tarot .carousel-control-prev {
    left: -12%;
  }
  #learn-tarot .carousel-control-next {
    right: -12%
  }
  .my-5-em {
    margin-top: 0em!important;
    margin-bottom: 0em!important;
  }
}
@media (min-width: 1400px) {
	.container.container-custom {
		max-width: 1560px;
	}
  #home .top-section {
    background-position: bottom center;
    background-repeat: repeat-x;
  }
  #user .top-section {
    background-position: top center;
    min-height: 80vh;
  }
}
@media (max-width: 767px) {
	/* SECTION */
  #home .top-section {
    background-image: url('assets/images/section-1-1-mobile.png');
  }

	/* NAVBAR */
	.navbar-brand img {
		height: 40px!important;
	}
	#navbar ul.navbar-nav.top-nav {
		margin-left: 0;
	}
	
	/* UTILITIES */
	.head-1 {
		font-size: 32px;
	}
  .head-1-inconsistent {
    font-size: 30px;
  }
	.head-2, .section-4 .head-2, #career .section-3 .head-2 {
		font-size: 24px;
	}
	.head-3, #career .section-1 .sub-1, #career .section-3 .sub-1 {
		font-size: 16px;
	}
	.sub-head-2 {
		font-size: 18px;
	}
	.sub-1, .btn.sub-1 {
		font-size: 16px;
	}
	.sub-2 {
		font-size: 16px;
	}
	.sub-3 {
		font-size: 12px;
	}
	.sub-head-1 {
		font-size: 36px;
	}
	.body-1 {
		font-size: 16px;
	}
	/* .body-2 {
		font-size: 16px;
	} */
	.body-3 {
		font-size: 14px;
	}
	.body-4 {
		font-size: 12px;
	}
  #about-us .section-1 .sub-1 {
    line-height: 25px;
  }
  #affiliate .sub-head-3 {
    font-size: 18px;
  }

	/* INCONSISTENT VARIABLE */
	#home .section-3 img.w-50, #love-tarot .section-1 img.w-50 {
		width: 100%!important;
	}
  #learn-tarot .top-section .body-2 {
    font-size: 14px;
  }
  #home .section-2 .sub-1 {
    font-size: 25px;
  }

	/* COMPONENT */
	#home .section-4 .carousel-control-prev,
  #home .section-4 .carousel-control-next,
  #home .section-4 .carousel .carousel-indicators,
  #about-us .section-2 .carousel-control-prev,
  #about-us .section-2 .carousel-control-next,
  #about-us .section-2 .carousel .carousel-indicators {
		display: none;
	}
  #love-tarot .input-group>.form-control.email, 
  #love-tarot-reading .input-group>.form-control.email,
  #learn-tarot .input-group>.form-control.email,
  #learn-tarot-reading .input-group>.form-control.email,
  #blog-post .input-group>.form-control.email,
  #blog-post-reading .input-group>.form-control.email,
  #about-us .input-group>.form-control.email {
    width: 100%;
  }
  #love-tarot .input-group button.brown-btn,
  #love-tarot-reading .input-group button.brown-btn,
  #learn-tarot .input-group button.brown-btn,
  #learn-tarot-reading .input-group button.brown-btn,
  #blog-post .input-group button.brown-btn,
  #blog-post-reading .input-group button.brown-btn,
  #about-us .input-group button.brown-btn {
    border-radius: 50px!important;
    width: 100%;
  }
  #home .section-4 .card, #about-us .section-2 .card {
    min-height: 350px;
  }
  #affiliate .section-3 {
    background: url('assets/images/affiliate-section-3-bg-mobile-min.png');
    background-size: cover;
    background-position: top center;
  }
  #affiliate .box {
    padding: 1.5em;
  }
  #affiliate .sub-box {
    padding: 1em;
  }
  #affiliate .list-group-item {
    padding: .5em 0;
  }
  #affiliate .section-2 img.w-75 {
    width: 100%!important;
  }
  img.tarot {
    border-radius: 9px;
  }

	/* FOOTER */
	#footer img.w-10 {
		width: 50%;
	}
	nav .menu.nav {
		display: block;
	}
	nav .menu.nav .menu-item {
		margin: 1em 0;
	}

	/* CARD */
	#career .card img.w-75 {
		width: 50%!important;
	}
	#funnel .card img.w-75 {
    width: 50%!important;
  }
  .my-5-em {
    margin-top: 0em!important;
    margin-bottom: 0em!important;
  }
  #affiliate .section-2 .btn.white-btn {
    width: 75%;
  }
}


/* TAROT DECK */
.tarot-back-bg {
  background: url("https://individualogist.com/wp-content/uploads/tarot-back.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 272px;
  width: 150px;
  display: block;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(15deg);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
}

.tarot-card {
  width: 175px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
}

.reverse {
  transform: rotate(180deg);
}

.tarot-deck {
  height: 800px;
  overflow: visible;
  position: relative;
}

.tarot-deck .deck {
  margin: 30px auto 0;
  width: 1530px;
  position: relative;
}

.tarot-deck .deck .card {
  background: url("assets/images/section-3-2.png") no-repeat center center;
  width: 398px;
  height: 489px;
  display: block;
  position: absolute;
  /*all transition to take 1s */
  transition: all 1s;
  -ms-transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;

  /*set card transform origin to 20% from x-axis and 80% from y-axis */
  transform-origin: 20% 80%;
  -ms-transform-origin: 20% 80%;
  -webikit-transform-origin: 20% 80%;
  -moz-transform-origin: 20% 80%;

  /*make card non selectable*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tarot-deck .deck .card-1 {
  z-index: 1;
  left: 10px;
  top: 0;
}

.tarot-deck .deck .card-2 {
  z-index: 2;
  left: 110px;
  top: 0;
}

.tarot-deck .deck .card-3 {
  z-index: 3;
  left: 210px;
  top: 0;
}

.tarot-deck .deck .card-4 {
  z-index: 4;
  left: 310px;
  top: 0;
}

.tarot-deck .deck .card-5 {
  z-index: 5;
  left: 410px;
  top: 0;
}

.tarot-deck .deck .card-6 {
  z-index: 6;
  left: 510px;
  top: 0;
}

.tarot-deck .deck .card-7 {
  z-index: 7;
  left: 610px;
  top: 0;
}

.tarot-deck .deck .card-8 {
  z-index: 8;
  left: 710px;
  top: 0;
}

.tarot-deck .deck .card-9 {
  z-index: 9;
  left: 810px;
  top: 0;
}

.tarot-deck .deck .card-10 {
  z-index: 10;
  left: 910px;
  top: 0;
}

.tarot-deck .deck .card-11 {
  z-index: 11;
  left: 1010px;
  top: 0;
}

.tarot-deck .deck .card-12 {
  z-index: 12;
  left: 1110px;
  top: 0;
}

.tarot-deck .deck .card-13 {
  z-index: 12;
  left: 1210px;
  top: 0;
}

.tarot-deck .deck .card-14 {
  z-index: 12;
  left: 1310px;
  top: 0;
}

.tarot-deck .featured-article {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 13;
}

.deck-two-card {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.yes-no-tarot {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 1em auto;
  padding: 0.5em;
}

.yes-no-tarot:hover {
  transform: scale(0.9);
  transition: 0.4s;
  -webkit-transition: 0.4s;
}

.deck-two-card .card {
  background: url(/images-US/tarot/tarot-card.png) no-repeat top left;
  background-size: cover;
  display: block;
  width: 280px;
  height: 345px;
  float: left;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.deck-two-card .card img {
  visibility: hidden;
  margin: 0 5px;
}

.deck-two-card .card.hide-card {
  background: 0 0;
  width: auto;
  height: auto;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .tarot-deck {
    height: 220px!important;
		left: 3.8%;
  }

  .tarot-deck .deck {
    position: relative;
    /* width: 270px; */
		width: 100%;
    display: block;
    margin: 1em auto;
    height: 185px;
  }

  .tarot-deck .deck .card {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 0;
    width: 22%;
    height: 108px;
    float: left;
    margin: 3px 3px 3px 0;
    left: 0!important;
    background-size: contain;
    display: block;
    position: relative;
		border-radius: 0;
		border: 1px solid transparent;
  }

  .tarot-deck .deck .card:hover {
    box-shadow: 0 0 5px rgb(141 20 183 / 50%), 0 0 10px rgb(159 82 155 / 60%), 0 0 20px rgb(142 22 183 / 80%);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    /* z-index: 13; */
    top: -20px;
    /* transform: rotate3d(1, 1, 1, 20deg); */
  }

  .tarot-deck .deck .card-1 {
    left: -8px;
  }

  .tarot-deck .deck .card-2 {
    left: 10px;
  }

  .tarot-deck .deck .card-3 {
    left: 30px;
  }

  .tarot-deck .deck .card-4 {
    left: 47px;
  }

  .tarot-deck .deck .card-5 {
    left: 64px;
  }

  .tarot-deck .deck .card-6 {
    left: 80px;
  }

  .tarot-deck .deck .card-7 {
    left: 97px;
  }

  .tarot-deck .deck .card-8 {
    left: 113px;
  }

  .tarot-deck .deck .card-9 {
    left: 129px;
  }

  .tarot-deck .deck .card-10 {
    left: 145px;
  }

  .tarot-deck .deck .card-11 {
    left: 160px;
  }

  .tarot-deck .deck .card-12 {
    left: 176px;
  }

  .tarot-deck .deck .card-13 {
    left: 164px;
  }

  .tarot-deck .deck .card-14 {
    left: 174px;
  }

  .deck-two-card {
    margin: 15px 0;
  }

  .deck-two-card .card {
    width: 150px;
    height: 185px;
  }

  .deck-two-card .card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    top: -20px;
    transform: rotate3d(1, 1, 1, 20deg);
  }

  .section-headline .result {
    margin: 15px 0;
  }

  .section-headline .result img {
    width: 100%;
    display: block;
    height: auto;
    padding-right: 15px;
  }

  .section-headline .result-2-card {
    margin: 15px 0;
  }

  .section-headline .result-2-card img {
    width: 120px;
  }

  .tarot-list {
    padding: 0 1rem;
    margin-bottom: 2rem;
  }

  .tarot-list:before {
    background-size: 90% 50%;
    margin-top: 2rem;
    height: 4rem;
  }

  .tarot-list:after {
    background-size: 80% 80%;
    width: 6rem;
    left: -3rem;
  }

  .tarot-list h2 {
    margin-bottom: 0.5rem;
  }

  .tarot-list .grid-4 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  .tarot-list .major-arcana-cards-title {
    padding-top: 60px;
  }

  .tarot-content.suits {
    text-align: center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .tarot-deck {
    height: 400px!important;
    width: 645px;
    overflow: visible;
    margin: 0 auto;
  }

  .tarot-deck .deck {
    width: 630px;
    height: 345px;
    position: absolute;
  }

  .tarot-deck .deck .card {
    width: 210px;
    height: 345px;
    background-size: cover;
  }

  .tarot-deck .deck .card:hover {
    box-shadow: 0 0 5px rgb(141 20 183 / 50%), 0 0 10px rgb(159 82 155 / 60%), 0 0 20px rgb(142 22 183 / 80%);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    top: -20px;
    transform: rotate3d(1, 1, 1, 20deg);
  }

  .tarot-deck .deck .card-1 {
    left: -10px;
  }

  .tarot-deck .deck .card-2 {
    left: 30px;
  }

  .tarot-deck .deck .card-3 {
    left: 70px;
  }

  .tarot-deck .deck .card-4 {
    left: 110px;
  }

  .tarot-deck .deck .card-5 {
    left: 150px;
  }

  .tarot-deck .deck .card-6 {
    left: 190px;
  }

  .tarot-deck .deck .card-7 {
    left: 230px;
  }

  .tarot-deck .deck .card-8 {
    left: 270px;
  }

  .tarot-deck .deck .card-9 {
    left: 310px;
  }

  .tarot-deck .deck .card-10 {
    left: 350px;
  }

  .tarot-deck .deck .card-11 {
    left: 390px;
  }

  .tarot-deck .deck .card-12 {
    left: 430px;
  }

  .tarot-deck .deck .card-13 {
    left: 450px;
  }

  .tarot-deck .deck .card-14 {
    left: 490px;
  }

  .tarot-deck .deck-two-card .card {
    width: 180px;
    height: 222px;
  }

  .tarot-list {
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 1025px) {
  .tarot-deck {
    height: 750px;
  }

  .tarot-deck .deck {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
  }

  .tarot-deck .deck .card {
    width: 200px;
    height: 320px;
    background-size: cover;
  }

  .tarot-deck .deck .card:hover {
    box-shadow: 0 0 5px rgb(141 20 183 / 50%), 0 0 10px rgb(159 82 155 / 60%), 0 0 20px rgb(142 22 183 / 80%);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    top: -20px;
    transform: rotate3d(1, 1, 1, 20deg);
  }

  .tarot-deck .deck .card-1 {
    left: 10px;
  }

  .tarot-deck .deck .card-2 {
    left: 70px;
  }

  .tarot-deck .deck .card-3 {
    left: 130px;
  }

  .tarot-deck .deck .card-4 {
    left: 190px;
  }

  .tarot-deck .deck .card-5 {
    left: 250px;
  }

  .tarot-deck .deck .card-6 {
    left: 310px;
  }

  .tarot-deck .deck .card-7 {
    left: 370px;
  }

  .tarot-deck .deck .card-8 {
    left: 430px;
  }

  .tarot-deck .deck .card-9 {
    left: 490px;
  }

  .tarot-deck .deck .card-10 {
    left: 550px;
  }

  .tarot-deck .deck .card-11 {
    left: 610px;
  }

  .tarot-deck .deck .card-12 {
    left: 670px;
  }

  .tarot-deck .deck .card-13 {
    left: 730px;
  }

  .tarot-deck .deck .card-14 {
    left: 780px;
  }
}

.tarot-deck {
  height: 660px;
}

@media only screen and (min-width: 1025px) {
  .tarot-deck {
    height: 350px;
    display: block;
    position: relative;
    margin: 1em auto;
    max-width: 880px;
  }
}