/* ------------------------
*	General
------------------------*/
body {
	font-family: $px-font-family;
	font-size: $px-base-font;
	color: $px-body-color;
	font-weight: 400;
	line-height: 1.6;
	font-smoothing: antialiased;
}

html {
	overflow-x: hidden;
}

a {
	color: $px-theme;
	@include px-hover {
		color: darken($px-theme, 8%);
		text-decoration: none;
	}
}
img {
	max-width: 100%;
}


.fa, 
.fab, 
.fal, 
.far, 
.fas {
	line-height: inherit;
}

mark {
    background-image: linear-gradient(#7ef6e7, #81f1e7);
    background-size: 100% 34%;
    background-repeat: no-repeat;
    background-position: 0 bottom;
    background-color: transparent;
    padding: 0;
    color: currentColor;
}

/* ----------------------
*	Loading
---------------------------*/
#loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: $px-theme;
	z-index: 99999;
}
.load-circle {
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
	 span {
	  display: inline-block;
	  width: 64px;
	  height: 64px;
	  &:after {
		  content: " ";
		  display: block;
		  width: 46px;
		  height: 46px;
		  margin: 1px;
		  border-radius: 50%;
		  border: 5px solid $px-white;
		  border-color: $px-white transparent $px-white transparent;
		  animation: lds-dual-ring 1.2s linear infinite;	
	  }
	}
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ----------------------
*Heading fonts size
---------------------------*/
.h1,
h1 {
	font-size: $px-h1-font;
	@include down-md {
		font-size: $px-h1-font - 10px;
	}
	@include down-sm {
		font-size: $px-h1-font - 15px;
	}
}
.h2,
h2 {
	font-size: $px-h2-font;
	@include down-md {
		font-size: $px-h2-font - 8px;
	}
	@include down-sm {
		font-size: $px-h2-font - 12px;
	}
}
.h3,
h3 {
	font-size: $px-h3-font;
	@include down-md {
		font-size: $px-h3-font - 4px;
	}
	@include down-sm {
		font-size: $px-h3-font - 8px;
	}
}
.h4,
h4 {
	font-size: $px-h4-font;
	@include down-sm {
		font-size: $px-h4-font - 4px;
	}
}
.h5,
h5 {
	font-size: $px-h5-font;
}
.h6,
h6 {
	font-size: $px-h6-font;
}



/* ----------------------
*	owl 
---------------------------*/
.owl-dots {
	text-align: center;
	.owl-dot {
		display: inline-block;
		vertical-align: top;
		width: 15px;
		height: 15px;
		background: $px-white;
		border: 1px solid $px-theme;
		@include transition(ease all 0.55s);
		border-radius: 50%;
		margin: 0 5px;
		.owl-carousel-white & {
			border-color: $px-white;
			background: none;
		}
		&.active {
			background: $px-theme;
			.owl-carousel-white & {
				background: $px-white;
			}
		}
	}
}

.owl-carousel {
	.owl-item {
		img {
			width: auto;
			max-width: 100%;
		}
	}
}