/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { width: 100%; height: 100%; font-size: 100%; overflow-x: hidden; -ms-touch-action: manipulation; touch-action: manipulation; }
	
body { font-size: 16px; font-family: 'PT Sans', sans-serif; font-weight: 400; margin: 0; word-wrap: break-word; line-height: 1.3; 
	width: 100%; overflow-x: hidden; word-break: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
	color: #222; }

h1, h2, h3, h4, h5, h6{ font-family: 'Poppins', sans-serif; }

h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; line-height: inherit; font-weight: inherit; }

h1 { font-size: 5em; line-height: 1; }
h2 {font-size: 3em; }
h3 {font-size: 1.8em; }
h4 {font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: .96em; }

p { font-size: 1em; line-height: 1.6; color: #333; }

a, button{ cursor: pointer; }

a, button{ display: inline-block; color: inherit; -webkit-transition: all .25s ease; transition: all .25s ease; }

input, textarea{ display: inline-block; color: #222; }

a:hover, a:focus, a:active,
button:hover, button:focus, button:active{ text-decoration: none; color: #0c98cf; }

input:focus,
textarea:focus{ box-shadow: 0; outline: 0; border: 1px solid #0c98cf!important; }

ul { margin: 0; }

li { 
/*	display: inline-block;*/
	list-style: none; }

img { height: auto; width: 100%; }

b { font-weight: 600; }

i,span { display: inline-block; }

b.max-bold{ font-weight: 700; }



/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	h1 { font-size:3.2em; }
	h2 {font-size: 2.5em; }
	
}

@media only screen and (max-width: 767px) {

    body { font-size: 14px; }
	
	h1 { font-size: 2.5em; }
	h2 {font-size: 2em; }
	h3 {font-size: 1.8em; }


}

/* ---------------------------------
2. COMMON STYLES
--------------------------------- */

.font-blue{ color: #0c98cf; }

.font-white{ color: #fff; }

.font-medium{ font-weight: 500; }

.section{ padding: 80px 0 50px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }

.section + .section{ border-top: 0; }

.section .heading{ margin-bottom: 60px; font-weight: 600; }

.section .heading .pre-heading{ letter-spacing: 1px; margin-bottom: 5px; font-weight: 500; color: #0c98cf; }

.center-text { text-align: center; }

.full-height{ height: 100%; }

.display-table { display: table; width: 100%; height: 100%; }

.display-table-cell { display: table-cell; vertical-align: middle; }

.display-none{ display: none; }

.position-relative{ position: relative; }

.float-left{ float: left; }

.float-right{ float: right; }

.margin-bottom-5{ margin-bottom: 5px; }
.margin-bottom-10{ margin-bottom: 10px; }
.margin-bottom-20{ margin-bottom: 20px; }
.margin-bottom-30{ margin-bottom: 30px; }
.margin-bottom-50{ margin-bottom: 50px; }

.margin-left-10{ margin-left: 10px; }

.margin-top-5{ margin-top: 5px; }
.margin-top-10{ margin-top: 10px; }
.margin-top-20{ margin-top: 20px; }
.margin-top-30{ margin-top: 30px; }
.margin-top-50{ margin-top: 50px; }

.margin-tb-5{ margin-top: 5px; margin-bottom: 5px; }
.margin-tb-10{ margin-top: 10px; margin-bottom: 10px; }
.margin-tb-15{ margin-top: 15px; margin-bottom: 15px; }
.margin-tb-20{ margin-top: 20px; margin-bottom: 20px; }
.margin-tb-30{ margin-top: 30px; margin-bottom: 30px; }
.margin-tb-50{ margin-top: 50px; margin-bottom: 50px; }

.btn{ font-size: .9em; letter-spacing: 1px; padding: 12px 40px; border-radius: 2px; border: 1px solid #0c98cf; 
	background: #0c98cf; color: #fff; }

.btn:hover{ background: transparent; }

.float-right{ float: right; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {

    /* ---------------------------------
	2. COMMON STYLES
	--------------------------------- */
    
	.container{ padding-left: 15px; }
	
	.section{ padding: 50px 0 20px; }

	.section .heading{ margin-bottom: 40px; }

	.btn{ padding: 10px 30px; }
}


/* GO TOP */

#back-to-top{ height: 45px; width: 45px; line-height: 41px; border-radius: 50px; text-align: center; position: fixed; 
	bottom: 20px; right: 20px; z-index: 1000; font-size: 1.1em; opacity: 0; box-shadow: 2px 10px 30px rgba(0,0,0,.2); 
	background: #fff; border: 2px solid #0c98cf; color: #0c98cf;
	-webkit-transform: scale(0);  transform: scale(0); 
	-webkit-transition: all 0.3s ease-out;  transition: all 0.3s ease-out; }

#back-to-top:hover{ box-shadow: 2px 5px 20px rgba(0,0,0,.3); background: #0c98cf; color: #fff; }

#back-to-top:active,
#back-to-top:focus{ box-shadow: none; background: #fff; border: 2px solid #0c98cf; color: #0c98cf; }

#back-to-top.show { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }


/* PAGE PRE LOADER */

.page-loader{ position: fixed; top: 0px; left: 0px; right: 0; bottom: 0; z-index: 10000; background: #fff; }

.spinner{ height: 100%; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0;
   -webkit-animation: invert 2s infinite steps(2, end); animation: invert 2s infinite steps(2, end); }
  
.ball { height: 50px; width: 50px; position: absolute; border-radius: 50%; top: 50%; left: 50%; 
	margin: -25px 0 0 -25px; background: #0c98cf; }

.ball-1 { -webkit-animation: ball1 1s infinite alternate linear; animation: ball1 1s infinite alternate linear; }

.ball-2 { -webkit-animation: ball2 1s infinite alternate linear; animation: ball2 1s infinite alternate linear; }

.ball-3 { -webkit-animation: ball3 1s infinite alternate linear; animation: ball3 1s infinite alternate linear; }

.ball-4 { -webkit-animation: ball4 1s infinite alternate linear; animation: ball4 1s infinite alternate linear; }



@-webkit-keyframes invert {
  100% { transform: rotate(180deg); }
}

@-webkit-keyframes ball1 { 
	12% { -webkit-transform: none; }
	26% { -webkit-transform: translate3d(25%,0,0) scale(1, 0.8); }
	40% { -webkit-transform: translate3d(50%,0,0) scale(0.8, 0.8); }
	60% { -webkit-transform: translate3d(50%,0,0) scale(0.8, 0.8); }
	74% { -webkit-transform: translate3d(50%, 25%,0) scale(0.6, 0.8); }
	88% { -webkit-transform: translate3d(50%, 50%,0) scale(0.6, 0.6); }
	100% { -webkit-transform: translate3d(50%, 50%,0) scale(0.6, 0.6); }
}
@-webkit-keyframes ball2 {
  12% { -webkit-transform: none; }
  26% { -webkit-transform: translate3d(25%,0,0) scale(1, 0.8); }
  40% { -webkit-transform: translate3d(50%,0,0) scale(0.8, 0.8); }
  60% { -webkit-transform: translate3d(50%,0,0) scale(0.8, 0.8); }
  74% { -webkit-transform: translate3d(50%, -25%,0) scale(0.6, 0.8); }
  88% { -webkit-transform: translate3d(50%, -50%,0) scale(0.6, 0.6); }
  100% { -webkit-transform: translate3d(50%, -50%,0) scale(0.6, 0.6); }
}
@-webkit-keyframes ball3 {
  12% { -webkit-transform: none; }
  26% { -webkit-transform: translate3d(-25%,0,0) scale(1, 0.8); }
  40% { -webkit-transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  60% { -webkit-transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  74% { -webkit-transform: translate3d(-50%, 25%,0) scale(0.6, 0.8); }
  88% { -webkit-transform: translate3d(-50%, 50%,0) scale(0.6, 0.6); }
  100% { -webkit-transform: translate3d(-50%, 50%,0) scale(0.6, 0.6); }
}

@-webkit-keyframes ball4 {
  12% { -webkit-transform: none; }
  26% { -webkit-transform: translate3d(-25%,0,0) scale(1, 0.8); }
  40% { -webkit-transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  60% { -webkit-transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  74% { -webkit-transform: translate3d(-50%, -25%,0) scale(0.6, 0.8); }
  88% { -webkit-transform: translate3d(-50%, -50%,0) scale(0.6, 0.6); }
  100% { -webkit-transform: translate3d(-50%, -50%,0) scale(0.6, 0.6); }
}

@keyframes invert {
  100% { transform: rotate(180deg); }
}

@keyframes ball1 { 
	12% { transform: none; }
	26% { transform: translate3d(25%,0,0) scale(1, 0.8); }
	40% { transform: translate3d(50%,0,0) scale(0.8, 0.8); }
	60% { transform: translate3d(50%,0,0) scale(0.8, 0.8); }
	74% { transform: translate3d(50%, 25%,0) scale(0.6, 0.8); }
	88% { transform: translate3d(50%, 50%,0) scale(0.6, 0.6); }
	100% { transform: translate3d(50%, 50%,0) scale(0.6, 0.6); }
}
@keyframes ball2 {
  12% { transform: none; }
  26% { transform: translate3d(25%,0,0) scale(1, 0.8); }
  40% { transform: translate3d(50%,0,0) scale(0.8, 0.8); }
  60% { transform: translate3d(50%,0,0) scale(0.8, 0.8); }
  74% { transform: translate3d(50%, -25%,0) scale(0.6, 0.8); }
  88% { transform: translate3d(50%, -50%,0) scale(0.6, 0.6); }
  100% { transform: translate3d(50%, -50%,0) scale(0.6, 0.6); }
}
@keyframes ball3 {
  12% { transform: none; }
  26% { transform: translate3d(-25%,0,0) scale(1, 0.8); }
  40% { transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  60% { transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  74% { transform: translate3d(-50%, 25%,0) scale(0.6, 0.8); }
  88% { transform: translate3d(-50%, 50%,0) scale(0.6, 0.6); }
  100% { transform: translate3d(-50%, 50%,0) scale(0.6, 0.6); }
}

@keyframes ball4 {
  12% { transform: none; }
  26% { transform: translate3d(-25%,0,0) scale(1, 0.8); }
  40% { transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  60% { transform: translate3d(-50%,0,0) scale(0.8, 0.8); }
  74% { transform: translate3d(-50%, -25%,0) scale(0.6, 0.8); }
  88% { transform: translate3d(-50%, -50%,0) scale(0.6, 0.6); }
  100% { transform: translate3d(-50%, -50%,0) scale(0.6, 0.6); }
}


/* PRODUCT STYLING */

.product{ max-width: 400px; margin: 0 auto 30px; }

.product .title{ margin: 20px 0 5px; color: #0c98cf; }

.product .title:hover{ color: #222; }

.product .product-info{ position: relative; display: block; z-index: 1; }

.product .product-info .product-image{ position: relative; width: 100%; border-radius: 3px; overflow: hidden; }

.product .product-info .product-image:after{ content:''; position: absolute; top: 0; 
	bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,.2); 
	-webkit-transition: all .2s ease; transition: all .2s ease; }

.product .product-info .icons{ position: absolute; top: 10px; right: 10px; z-index: 1; }

.product .product-info .icons > li{ opacity: 0; display: block;
	-webkit-transform: -webkit-translateY(10px); transform: translateY(10px); 
	-webkit-transition: all .2s ease; transition: all .2s ease; }

.product .product-info .icons > li > a{ height: 35px; width: 35px; line-height: 35px; text-align: center; 
	border: 1px solid rgba(255,255,255,.2); border-bottom-width: 0; background: #0c98cf; color: #fff; }

.product .product-info .icons > li:last-child a{ border-bottom-width: 1px; }

.product .product-info .icons > li > a:hover{ background: #fdd921; color: #0c98cf; }

.product .product-info:hover .product-image:after{ opacity: 1; }

.product .product-info:hover .icons > li{ opacity: 1; 
	-webkit-transform: translateY(0px); transform: translateY(0px); }

.product .product-info .icons > li:nth-child(2){ -webkit-transition-delay: .1s; transition-delay: .1s; }
.product .product-info .icons > li:nth-child(3){ -webkit-transition-delay: .2s; transition-delay: .2s; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {

	.product .product-info .icons > li{ opacity: 1; 
		-webkit-transform: translateY(0px); transform: translateY(0px); }
	
}

@media only screen and (max-width: 479px) {

	.popular-products{ text-align: center; }
	
}