/* 
---------------------------------------
	Retail Spot theme 
---------------------------------------	
* 	Primary Color : #cc3333
* 	Secondary Color : #000000
* 	Highlighted Text (Title) Fonts : 'Cabin', sans-serif
* 	Body Text Fonts : 'Source Sans Pro', sans-serif

---------------------------------------
	Elements Covered
---------------------------------------
* 	Reuse class
*	Card
* 	Typography
* 	Buttons
* 	Form Elements and theme
--------------------------------------- 
*/
<!-- Google font -->
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i');

/* ----------------------------
	Reuse class
---------------------------- */ 
/* Background Color */
.primary-bg {background-color:#cc3333;} 
.secondary-bg {background-color:#000000;} 
.tertiary-bg {background-color:#fbfbfb}

/* Typography Color */
.primary-text {color:#121212;}
.secondary-text {color:#595959;}

/* ----------------------------
	Typography
---------------------------- */ 
/* Font Size */
.pmd-display-4 {font-size:46px;line-height:1.4;}
.pmd-display-3 {font-size:28px;}
.pmd-display-2 {font-size:24px;}
.pmd-display-1 {font-size:20px;}

/* Custom Font Family */
.ff-source{font-family: 'Source Sans Pro', sans-serif;}
.fw-light{font-weight:300;}
.fw-regular{font-weight:400;}
.fw-medium{font-weight:500;}
.fw-bold{font-weight:700;}

/* Color & Weight style */
h1, h2, h3, h4, h5, h6{ color:#121212;}
h1.inverse, h2.inverse, h3.inverse, h4.inverse, h5.inverse, h6.inverse{ color:#fff;}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong{font-weight:700;}

/* Font size and color according to Google Material */
h1, .h1 { font-size:46px; font-weight: 400;font-family: 'Cabin', sans-serif; color:#ffffff}
h2, .h2 { font-size:24px; font-weight: 400;font-family: 'Cabin', sans-serif;}
h3, .h3 { font-size:20px; font-weight: 600;font-family: 'Cabin', sans-serif;}
h4, .h4 { font-size:18px; font-weight: 500;font-family: 'Source Sans Pro', sans-serif;}
h5, .h5 { font-size:16px; font-weight: 500;font-family: 'Source Sans Pro', sans-serif;}

/* Other Element Style */
em{font-style:italic;font-family: 'Source Sans Pro', sans-serif;}
.lead, p.lead {line-height:1.4; margin-bottom: 20px;}
.lead.inverse{color: #ffffff;}
strong, b{font-weight: 500; color: #121212;}
label{font-weight:400;}
p {color:#595959;}
a{ transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s; -o-transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s;}
a{color:#595959; text-decoration:none; outline:none;}
a:hover, a:focus, a:active{color:#ef3846;}

@media screen and (max-width: 1280px) { 
	h2 { font-size:34px; margin-bottom:10px;}
}
@media screen and (max-width: 991px) { 
	h1 { font-size:32px;}
}
@media screen and (max-width: 767px){
	h1 { font-size:26px;}	
	h2, h2.pmd-card-title-text{font-size:22px; line-height:1.3;}
	h3{font-size:18px; line-height:1.3; margin-top:0}
	h4{font-size:16px; line-height:1.3}
	a{word-break: break-word; white-space: normal; }
	.lead {font-size:18px; line-height:1.2;}
	p {font-size:16px;}
}

/* ----------------------------
	Button
---------------------------- */
/* Primary Button */
.btn-primary{background-color:#cc3333; border:#cc3333 solid 2px;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover{background-color:#a02626; color:#ffffff; border-color:#a02626;}

/* Secondary Button */
.btn-secondary{ background-color:#000000; color:#ffffff;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{background-color:#4b4b4b; color:#ffffff;}

/* Default Button */
.btn-default{background-color:#ffffff; border:2px solid #ffffff;  color:#333333;}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active:focus, .btn-default:focus, .btn-default:active:hover{background-color:#cc3333; border-color: #cc3333; color:#fff;}

/* Outline Button */
.btn-primary.pmd-btn-outline{ background-color:transparent; border:2px solid #cc3333; color:#ffffff;}
.btn-primary.pmd-btn-outline:hover, .btn-primary.pmd-btn-outline:focus, .btn-primary.pmd-btn-outline:active{ background-color:#4acc8e; color:#ffffff; border:2px solid #4acc8e;}

.btn-default.pmd-btn-outline{ background-color:transparent; border:2px solid #ffffff; color:#ffffff;}
.btn-default.pmd-btn-outline:hover, .btn-default.pmd-btn-outline:focus, .btn-default.pmd-btn-outline:active{ background-color:#ffffff; color:#4acc8e; border:2px solid #ffffff;}

/* Button Ripple Background */
.btn .ink{background-color:rgba(255,255,255,0.74) !important;}

@media screen and (max-width: 640px) {  
	.btn.btn-lg { font-size:14px; }
}

/* ----------------------------
	Card
---------------------------- */ 
.pmd-card-body{color: #595959;}
.pmd-card-title-text {color:#121212;}
.pmd-card-subtitle-text{opacity:1}

/* card transparent */
.card-transparent .pmd-card-title, 
.card-transparent .pmd-card-body, 
.card-transparent .pmd-card-icon,
.no-padding{ padding-left:0; padding-right:0; }
.card-transparent{ background-color: transparent; box-shadow: none;}

/* card icon */
.pmd-card-icon svg,
.pmd-card-icon img { max-width:64px;}
.pmd-card-icon svg { display:inline-block; vertical-align:middle;}
.pmd-card-icon {padding: 0 16px 0 16px; margin-bottom: 24px;}

@media screen and (max-width: 767px){
	.pmd-card-icon{ margin-bottom:10px;}
	.pmd-card-body{ font-size:16px;}
	.pmd-card{ margin-bottom:15px;}
	.card-transparent .pmd-card-description{margin-top:10px;}
}

/* Common CSS Styles */
.inner-footer.footer-bottom, .pmd-textfield-focused{background-color: #000000;}
.btn-primary .ink,.dropdown-toggle.btn-primary .ink{ background-color:#000000}
 
.dropdown-toggle.btn-default:hover { background-color: #000000; color:#fff; }
.dropdown-toggle.btn-default:focus { background-color: #000000; color:#fff; }

/* Form CSS */
.form-group.pmd-textfield {margin-bottom: 8px;}