// Base

// # Variables

@include set-default (
	(
		body: (
			background: #fff
		)
	)
);

html {
	font-size: 62.5%;
	font-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	color: $body-text;
	@include css( background, body, background );
	font-size: #{$font-size};
	font-weight: 400;
	line-height: 1.4;
	font-family: $font-family;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden !important;
	overflow-y: auto !important;

	&:not(.loaded) > *:not(.loading-overlay) {
		visibility: hidden;	
	}
}

::-moz-selection {
	background-color: $primary-color;
	color: #fff;
}

::selection {
	background-color: $primary-color;
	color: #fff;
}

p {
	margin-bottom: 1.5rem;
}

ul,
ol {
	margin: 0 0 2.25rem;
	padding: 0;
	list-style: none;
}

b,
strong {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

hr {
	max-width: 1730px;
	margin: 5.5rem auto 5.2rem;
	border: 0;
	border-top: 1px solid #e7e7e7;
}

sub,
sup {
	font-size: 70%;
}

sup {
	font-size: 50%;
}

sub {
	bottom: -.25em;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

button:focus {
	outline: none;
}

textarea {
	box-shadow: none;
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
.product-single-qty .bootstrap-touchspin .form-control {
	-moz-appearance: textfield;
}

// add product to cart message box / bs-modal
body.modal-open {
	padding-right: 0 !important;
}

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

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

	100% {
		transform: rotate(359deg);
	}
}

@keyframes bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@-webkit-keyframes bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

body {    
    &.loaded {
		.loading-overlay {
            display: none !important;
        }
    }
}

#root {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s cubic-bezier(0, 0, 0.5, 1);
    
    &.loaded {
        opacity: 1;
        visibility: visible;
    }
}

.loading-overlay {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all .5s ease-in-out;
	background: #fff;
	z-index: 999999;

	.loaded > & {
		display: none;
	}
}

.bounce-loader {
    position: absolute;
    top: 50%;
    left: 50vw;
    width: 70px;
    margin: -9px 0 0 -35px;
    transition: all .2s;
    text-align: center;
    z-index: 10000;

    &::selection {
        background: transparent;
    }

    .bounce1,
    .bounce2,
    .bounce3 {
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 100%;
        background-color: #CCC;
        box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
        animation: 1.4s ease-in-out 0s normal both infinite bouncedelay
    }

    .bounce1 {
        animation-delay: -.32s;
    }

    .bounce2 {
        animation-delay: -.16s;
    }
.loader & {
		left: 50%;
	}
}

@include mq(md, max) {
	html {
		font-size: 9px;
	}
}