@charset "UTF-8";
/*
Theme Name:		Can on the Run
Theme URI:		https://elementor.com/
Description:	Drum Elementor Starter Theme is a child theme of Hello Elementor, created by Elementor team
Author:			Drum Creative Team
Author URI:		https://drumcreative.com/
Template:		hello-elementor
Version:		1.0.0
Text Domain:	hello-elementor-child
Tags:           flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Fix WooCommerce width issue */
div.elementor-widget-container div.woocommerce {
	max-width: 1080px;
    margin: 0 auto;
}

body {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.elementor-section-wrap {
	/* overflow-x:  hidden; */
}

/* icon boxes keep icons on left for mobile */
@media (max-width: 640px) {
	.keep-icon-box-left.elementor-widget-icon-box .elementor-icon-box-wrapper {
	  display: flex;
	  flex-direction: row;
/* 		align-items: center; */
	}
	.keep-icon-box-left.elementor-widget-icon-box .elementor-icon-box-icon {
	  flex: 0 0 auto;
	  margin-left: 0px !important;
	  margin-right: 14px !important;
	}
	
	.keep-icon-box-right.elementor-widget-icon-box .elementor-icon-box-wrapper {
	  display: flex;
	  flex-direction: row;
/* 		align-items: center; */
	}
	.keep-icon-box-right.elementor-widget-icon-box .elementor-icon-box-icon {
	  flex: 0 0 auto;
	  margin-right: 0px !important;
	  margin-left: 14px !important;
		float: right;
		position: absolute;
		right: 20px;
	}
	.keep-icon-box-right.elementor-widget-icon-box .elementor-icon-box-content {
		padding-right: 30px;
	}
}
@media (min-width: 640px) {
	body.home > div.elementor-location-header {
		display: none;
	}
}
@media (max-width: 640px) {
	.home .light-mobile > .elementor-column-wrap {
		background-color: var( --e-global-color-secondary ) !important;
	}
}

/* footer nav center align on mobile */
@media (max-width: 640px) {
	.elementor-42 .elementor-element.elementor-element-cf21d01 .elementor-nav-menu--main .elementor-item {
		justify-content: center !important;
	}
}

/* homepage slider arrow positioning */
.elementor-arrows-position-outside .elementor-swiper-button-prev {
	left: -37px !important;
}
.elementor-arrows-position-outside .elementor-swiper-button-next {
	right: -37px !important;
}

/* adding watermark as psuedo element */
.watermark:after {
	content: url(/wp-content/uploads/2021/08/ghosted-logo.svg);
	left: calc(100% - 475px);
	top: calc(100% - 295px);
/* 	height: 100%; */
/* 	width: 100%; */
	position: absolute;
	z-index: -1;
}

/* bubble animation */
.bubbles {
	overflow: hidden;
}
@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* individual bubble position and animations */

.x1 {
    -webkit-animation: animateBubble 5s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 5s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 5s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
}

.x2 {
    -webkit-animation: animateBubble 2s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 2s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 2s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble 6s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 6s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 6s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
}

.x4 {
    -webkit-animation: animateBubble 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x7 {
    -webkit-animation: animateBubble 2s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 2s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 2s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 4s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 4s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 4s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 8s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 8s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 8s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    height: 200px;
	position: absolute;
	width: 200px;
  border: 2px solid #ff69b4;
  border-color: #fff;
}

.bubble:after {
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
}