/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

@media only screen and (max-width: 568px) {
	.rainbow_footer{
	margin-top: 70px;
	}
}


.locations-over {
  display: inline-flex; /* takes only the content's width */
  flex-direction: column; /* stacks flex-items (children) vertically */
}

.locations-text {
  position: relative; /* positioned relative to its normal position */
  top: 0; /* default */
  left: 0; /* default */
  transition: left 0.1s linear; /* adjust */
}

.locations-text:hover {
  left: 8px;
  transition: left 0.1s linear; /* adjust */
}

.col-padding-about { padding: 2rem; }

.bg-color-dark,
.bg-color-dark #header-wrap { background-color: #303030 !important; }

/* Video - Inside Phone
-----------------------------------------------------------------*/
.device-video-wrap { position: relative; }

.device-video-wrap img {
	position: relative;
	margin: 0 auto;
	max-width: 1024px;
}

.device-video-wrap video {
	position: absolute;
	top: 35px;
	left: 50%;
	max-width: 77%;
	z-index: 2;
	transform: translate(-50%);
}

.device-video-wrap::before,
.dotted-bg::before {
	content: "";
	position: absolute;
	display: block;
	top: 40%;
	left: 35%;
	width: 110%;
	height: 120%;
	background-size: 12px 12px;
	background-position: center;
	transform: translate(-50%, -50%);
	background-image: radial-gradient(#2a0707 14%, transparent 14%);
	-webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	z-index: 1;
}

.dotted-bg::before { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 14%, transparent 14%); }

.device-video-wrap > * {
	position: relative;
	z-index: 2;
}

/* Nav Size - FIX
-----------------------------------------------------------------*/
.device-lg .menu-container > .menu-item > .menu-link {
	padding-left: 5px;
	padding-right: 5px;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0;
}

.device-xl .menu-container > .menu-item > .menu-link {
	padding-left: 5px;
	padding-right: 5px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0;
}

/* Portfolio - Items
-----------------------------------------------------------------*/

.portfolio,
.portfolio-item-gallery {
	position: relative;
}

.portfolio-rounded .portfolio-image {
	border-radius: 5px;
	overflow: hidden;
}

body:not(.device-touch) .portfolio {
	-webkit-transition: height .4s linear;
	-o-transition: height .4s linear;
	transition: height .4s linear;
}

.portfolio-reveal .portfolio-item-gallery { overflow: hidden; }

.portfolio-item-gallery .portfolio-image {
	position: relative;
	overflow: hidden;
}

.portfolio-item-gallery .portfolio-image,
.portfolio-item-gallery .portfolio-image > a,
.portfolio-item-gallery .portfolio-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.portfolio-reveal .portfolio-image img,
	.portfolio-reveal .bg-overlay {
		-webkit-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
}

@media (min-width: 991px){
	.offset_v{
		margin-top: -35px !important;
		margin-bottom: 35px !important;
	}
	
	.header-misc-icon > a {
		width: 28px;
		height: 28px;
		font-size: 24px;
		line-height: 28px;
	}
}

/*top cart fix for white bg and elfsight contact widget*/
@media (max-width: 991.98px) {
    .top-cart-content {
        height: calc( 100vh );
    }
    
    .eapps-form-floating-button {
    	bottom: 60px !important;
    	right: -65px !important;
		border-radius: 0px !important;
	}
	.header-misc-icon > a {
		width: 24px;
		height: 24px;
		font-size: 20px;
		line-height: 24px;
	}
}

/* Section Instagram */
.instagram-image::before {
	opacity: 0;
	content: "";
	background-color: rgba(0,0,0,0.65);
	background-image: url('images/icons/cart_icon2.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color: #FFF;
	font-size: 24px;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	transition: opacity .4s ease;
}

.instagram-image:hover::before {
	opacity: 1;
}

/* 4px Gutter bewtween col*/
.gutter-4 {
	--custom-gutter: 4px !important;
}