body {
	font-family: 'Comic Sans MS', 'Comic Sans', 'Helvetica', cursive;
}

/* General
-----------------------------------------------------------*/
.clearfix {
	&:before,
  	&:after {
	    content: " "; // 1
    	display: table; // 2
  	}
  	&:after {
    	clear: both;
  	}
}

.alert {
    text-align: center;
    background: #3078B4;
    color: #fff;
    padding: 15px;
    font-size: 1.3em;
    margin: 30px 0 20px 0;
}

.alert-heading {
 	margin-top: 0; 
}

#content .alert a {
 	color: #fff;
  	text-decoration: underline;
}

.no-border {
 	border: none; 
}

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

.hide {
 	display: none; 
}

p.lead {
	font-size: 18px;
  	line-height: 1.4;
  	text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
 	font-family: inherit; 
}

h1 {
 	font-size: 34px; 
}

h2 {
 	font-size: 30px; 
}

h4 {
 	margin-bottom: 10px; 
}

b, .strong, .bold {
 	font-weight: bold; 
}

select {
 	padding: 6px 4px; 
}

hr {
 	margin: 30px 0; 
}

figure {
  	text-align: center;
 	margin-bottom: 20px; 
}

figure.right {
 	float: right;
  	padding-left: 15px;
}

figure.border img {
   	padding: 5px;
  	border: 1px solid #e0e0e0;
}

ol.upper-alpha {
 	list-style-type: upper-alpha; 
}

table.add-cell-padding th, table.add-cell-padding td {
 	padding: 7px; 
}

table .gray {
 	background-color: #ececec; 
}

table.center th, table.center td {
 	text-align: center; 
}

/* Header
-----------------------------------------------------------*/
#topbar {
  	background: #3078B4;
  	color: #fff;
}

#topbar a {
 	color: #fff; 
}

#topbar a:hover, #topbar a:focus {
 	color: #fff;
  	text-decoration: underline;
}

#topbar a.icn-social {
 	position: relative;
  	top: 2px;
}

#topbar a.icn-social:hover, #topbar a.icn-social:focus {
  	text-decoration: none;
}

#topbar ul li {
 	float: none;
  	display: inline-block;
}

#topbar ul li.no-border {
	border: none;
}

.chat {
 	position: absolute;
  	top: 52px;
  	left: 135px;
}

/* Menu
-----------------------------------------------------------*/
.nav .has-dropdown li {
  	min-width: 250px;
}

.nav .has-dropdown ul {
 	z-index: 20; 
}

.nav a {
  	font-family: inherit;
  	font-size: 13px;
}

/* Content
-----------------------------------------------------------*/
#breadcrumbs {
  	margin-bottom: 25px;
}

/* Products
-----------------------------------------------------------*/
.product-overview-heading {
  	background: #3078B4;
  	color: #fff;
  	padding: 5px;
  	margin-bottom: 20px;
  	font-size: 23px;
  	text-align: center;
}

.product-overview-image {
 	text-align: center; 
}

.product-overview + .product-overview {
 	margin-top: 35px; 
}

/* Product reviews
-----------------------------------------------------------*/
#content .spr-starrating a:hover, .spr-starrating a:focus {
	color: #CF3132;
}

table tfoot {
 	font-weight: bold; 
}

.emphasis {
 	font-style: italic; 
}

/* Home page images
-----------------------------------------------------------*/
.grid {
	position: relative;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	background: #3085a3;
    background: #fff;
	text-align: center;
	cursor: pointer;
    margin-bottom: 45px;
}

.grid figure img {
	position: relative;
	display: block;
	max-width: 100%;
    margin: 0 auto;
}

.grid figure figcaption {
    margin-top: 45px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption.two-lines {
    margin-top: 67px; 
}

.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;  
  	background: #fff;
}

.grid figure h2 {
	word-spacing: -0.05em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


/* Home page animation
-----------------------------------------------------------*/
figure.effect {
	background: #fff;
}

figure.effect img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect:hover img {
	opacity: 0.5;
}

figure.effect h2 {
	position: absolute;
	bottom: 0;
	left: 0;
    padding: 0;
    margin: 0;
	width: 100%;
	text-align: center;
    font-size: 21px;
    background: #CF3132;
    color: #fff;
    line-height: 1.2;
    padding: 8px;
    box-sizing: border-box;
}

figure.effect h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect:hover h2 {
	opacity: 1;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);  
}


/* Collections
-----------------------------------------------------------*/
#content a.calc-link {
 	color: #fff; 
  	position: relative;
  	bottom: 5px;
  	float: right;
  	margin-bottom: 0;
}

.calc-link i {
 	margin-left: 5px; 
}

.title-link {
 	margin-top: 5px; 
}

#content .title-link a {
 	color: #fff; 
}

.title-link i {
 	margin-left: 5px; 
}

.title-link .button {
 	margin-bottom: 0; 
}

.shipping-info {  	
    text-align: center;
    position: relative;
    top: -30px;  
  	background: #3078B4;
  	color: #fff;
  	padding: 10px;
}


/* Product detail
-----------------------------------------------------------*/
.selector-wrapper label {
 	font-size: 17px; 
  	margin-bottom: 2px;
}

.swatch {
 	text-align: center;
}

.swatch-element {
  	width: 200px;	
 	background: #e0e0e0;  	
  	text-align: center;
  	display: inline-block;
  	border-radius: 3px;
}

	.swatch-element:hover, .swatch-element:focus {
     	cursor: pointer; 
    }

	.swatch-element + .swatch-element {
     	margin-left: 15px; 
    }

	.swatch-element.selected {
     	background-color: #3078B4;
      	color: #fff;
    }

		.swatch-element.selected label span {
         	color: #fff; 
        }

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

.swatch-element label {
 	line-height: 1.5; 
  	font-size: 1em;
  	display: block;
  	padding: 15px;
  	font-weight: normal;
}

	.swatch-element label:hover, .swatch-element label:focus {
     	cursor: pointer; 
    }

	.swatch-element label span {
        display: block;	
        font-size: 2.1em;   
      	margin-bottom: 10px;
    }

.swatch-element input {
 	display: none;
}

/* Pages
-----------------------------------------------------------*/
img.h400 {
  	max-height: 400px;
}

.buy-it-wrapper {
 	text-align: center;
  	margin-top: 45px;
}

#content a.button-buy-it {
  	color: #fff;
  	font-size: 18px;
  	letter-spacing: 0.4px;
  	padding: 11px 40px;
}

/* Calculators
-----------------------------------------------------------*/
.calculator-result {
 	font-weight: bold;
  	font-size: 18px;
  	margin-bottom: 15px;
}

.easy-selection-result {
  	display: none;
  	width: 250px;
  	border: 1px solid #ccc;  
  	margin: 0 auto 40px auto;
  	padding: 11px 15px 5px 15px;
}

.easy-selection-result .calculator-result {
 	margin-bottom: 0; 
}

.easy-selection-result ul {
 	list-style: none;
  	margin: 0;
    padding: 0;
}

/* Check out
-----------------------------------------------------------*/
#cart ul {
 	list-style: none;	 
}


/* Footer
-----------------------------------------------------------*/
#footer {
  	background: #3078B4;
  	color: #fff;
}

#footer a, #footer #footer-logo h4 a {
 	color: #fff !important; 
  	font-family: inherit;
}

#footer a:hover, #footer a:focus {
 	text-decoration: underline; 
}

#footer button {
 	background: #fff;
  	color: #3078B4;
}


/* Notify.js
-----------------------------------------------------------*/
.notifyjs-bootstrap-base {
 	font-size: .9em;
}


/* Media queries
-----------------------------------------------------------*/
@media only screen and (max-width: 959px) {

  	#content .grid figure img {
     	max-height: 220px;     	
    }
  
  	.swatch-element {
     	width: 171px; 
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

  	#topbar {
     	text-align: center; 
    }
  
  	#topbar p, #topbar ul {
     	float: none; 
    }
  
	figure.effect h2   {
     	font-size: 16px; 
    }  
  
    .chat {
        left: 110px;
    }  
}

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

    .container .grid {
        padding-bottom: 25px; 
    }
  
	.container .grid figure.column {
     	margin-top: 55px; 
    }
  
  	.container .grid figure.column:first-child {
     	margin-top: 0px;  
    }
  
  	.contact-form {
     	margin-top: 35px; 
    } 
  
  	h1 {
      	font-size: 32px;
     	line-height: 40px; 
    }
  
  	h2 {
     	font-size: 26px;
      	line-height: 32px;
    }
  
  	select {
     	width: 100%; 
    }  
  
  	#featured-image {
     	text-align: center; 
    }
  
	#content a.calc-link   {
      	margin-top: 20px;
      	float: none;
      	bottom: 0;
    }
  
  	.swatch-element {
     	width: 200px; 
    }  
  
  	figure.right {
     	float: none; 
    }
}

@media only screen and (max-width: 479px) {
 
  	p.lead {
		font-size: 16px;
    } 
  
	figure.effect h2   {
     	font-size: 18px; 
    }   	
  
  	.chat {
      	left: auto;
     	right: 0; 
    }
  
  	.swatch-element {
     	width: 140px; 
    }  
}

/* Animation
-----------------------------------------------------------*/
.flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.5s;

    animation-name: flash-animation;
    animation-duration: 0.5s;
}

@-webkit-keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

@keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}