/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */

/* HTML element (SMACSS base) rules */
@import "normalize.css";

/* Layout rules */
@import "layouts/responsive.css";

/* Component (SMACSS module) rules */
@import "components/misc.css";
/* Optionally, add your own components here. */
@import "print.css";

/* SMACSS theme rules */
/* @import "theme-A.css"; */
/* @import "theme-B.css"; */


/*-------- Website Styles -------------*/
*{-webkit-transition: color .5s ease-in-out; -moz-transition: color .5s ease-in-out; -o-transition: color .5s ease-in-out; transition: color .5s ease-in-out; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {font-family: Helvetica, Arial, Heveltica Neue, sans-serif;font-size: 110%;color: rgba(0,0,0,1);-webkit-font-smoothing: antialiased;overflow-x: hidden;}
a {transition: color 0.5s ease, background 0.5s ease;  text-decoration:none; color:#217EA7}
a:hover { text-decoration:none; color:#B30839}
#content {max-width:1200px; margin:0 auto}
.page-single-page #content {max-width:100%;}
#content .field-name-body a{color:#B30839;}
#content .field-name-body a:hover{color:#2599D0;}
.block{margin:0}
p, ul{margin:0}
#content p{margin-bottom:1em}
.align-left{float:left; margin:0px 25px 25px 0;}
.align-right{float:right; margin:0px 0 25px 25px;-webkit-box-shadow: 2px 4px 12px 6px rgba(0,0,0,0.3);
box-shadow: 2px 4px 12px 6px rgba(0,0,0,0.3);}
input:not([type]), input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], textarea { background: #FFF;color: #000;border: 1px solid #BEBEBE;padding: 5px 5px 5px 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;width:100%}
input[type="button"], input[type="reset"], input[type="submit"], a.btn-default{background: #1574AC;display: inline-block;color: #FFF;font-size: 1em;
padding: 5px 15px;text-align: center;text-transform: uppercase;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;border:0}
input[type="button"]:hover , input[type="reset"]:hover , input[type="submit"]:hover , a.btn-default:hover{background:#131313; color:#FFF}

.not-responsive{display:none}

#page{background: #F3F3F3 url(../images/bg.jpg) no-repeat fixed; background-size:cover;}

#header{height:200px;}
.region-header{max-width: 1200px;margin: 0 auto;}

#header.f-nav2{background:#FFF}

#header img{max-width:100%}

#header .block{display:block; text-align:right}


/*----- NAVIGATION */

#header{position:relative;}

#main-menu{max-width: 1200px;margin: 0 auto; position:relative !important; top:0 !important; margin-top:-40px;	text-align:left}
#main-menu li {
  list-style: none;
  padding: 0 1px;
  margin: 0 1px;
  display:inline-block; vertical-align:top
}
#main-menu a{
color: #FFF;
text-decoration: none;
cursor: pointer;
font-size: 16px;
letter-spacing: 1px;
display: block;
padding: 8px 18px;
border: 2px solid #FFF;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
text-transform:uppercase
}
#header.f-nav2 #main-menu a{background:#217EA7}
/*------- Featured --------*/

#footer-wrapper{background:#333; color:#FFF}

.section{max-width:1200px; margin:auto}
.single_page{background: none;padding:0 15px 100px; margin-top:0px}
.single_page{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
#spw-about .single_page{ }
#spw-products .single_page{max-width:100%}
#spw-halfpipe .single_page{max-width:100%}
#spw-contact .single_page{}
#spw-gallery .single_page{max-width:100%}

/*------- Footer --------*/
#footer.region{padding:15px 0 10px 0; font-size:0.9em; background: rgba(51,51,51,1); color:#FFF !important; text-transform:uppercase}
#footer.region .block-wrapper ul{text-align:center}
#footer.region .block-wrapper ul li{list-style:none; display:inline-block; vertical-align:top; margin-right:10px;}
#footer.region .block-wrapper ul li a{color:#F4F4F4}


.view-products .views-row{
width: 33.333%;
float: left;
height:420px;
overflow:hidden
}
.view-products .views-row.double{width: 66.66%}
.views-row .views-field-field-image img{width:100%; max-height:420px;}

.view-gallery .views-row{
width: 20%;
float: left;
height:300px;
overflow:hidden
}

.view-gallery .views-row .views-field-field-image:hover{
-webkit-filter: grayscale(100%);

}

.box-hover{display:none;}
.box-hover .content-wrapper{padding:25px; font-size:130%; text-shadow:rgba(0,0,0,1) 1px 1px 1px;}
.box-hover .content-wrapper-title{font-size:1.5em; line-height:1em; margin-bottom:25px; }
.box-hover .content-wrapper-body{font-size:1em;line-height:1em;}
.box-hover .content-wrapper-price{font-size:2em; text-align:right; position:absolute; bottom:40px; right:40px; text-shadow:rgba(0,0,0,1) 3px 3px 3px;}
.view-products .views-row .views-field-field-image{position:relative;}
.view-products .views-row .views-field-field-image:hover .box-hover{position:absolute; width:100%; height:100%; background: rgba(0,118,236,0.9); color:#FFF; display:block; top:0}


h1#page-title{font-size: 60px;line-height: 1;margin: 0 0 45px; color:#f4f4f4; text-shadow: rgba(0,0,0,1) 2px 2px 0px; text-transform:uppercase; background:rgba(13, 103, 149, 0.5); padding:10px}
#spw-products .single_page h1#page-title,
#spw-gallery .single_page h1#page-title{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
#block-system-main--4,
div#block-block-4 {
float:left; display:block; width:50%
}
/*-------- MEDIA QUERIES -------------*/



/*-------- SMALL SCREEN MOBILES -------------*/
@media all and (min-width: 320px) and (max-width: 479px) {

body {font-size: 85%}
#page{background: #F3F3F3;}
#header{height:auto;background:#FFF}
#header img {
max-width: 100%;
max-height: 70px;
}
#header .block{ text-align:left
}
#spw-about{margin-bottom:100px}
.align-right{margin:0 0 10px 10px; max-width:40%;}
#main-menu{margin-top:10px; margin-bottom:10px}
#main-menu li { margin:0;width:20%; float:left; display:block; }
#main-menu a{font-size: 10px;padding: 2px 0px; background: #217EA7; text-align:center; border: 1px solid #FFF;letter-spacing: 0px;}
h1#page-title {
font-size: 30px;
line-height: 1;
margin: 0 0 25px;background:#217EA7;}


.view-products .views-row {
width: 100% !important;
float: left;
overflow: hidden;
height:200px;
margin-bottom:15px

}
.box-hover{display:none;}
.box-hover .content-wrapper{padding:25px; text-shadow:rgba(0,0,0,1) 1px 1px 1px; font-size:100%}
.box-hover .content-wrapper-title{font-size:1.2em; line-height:1.3em; margin-bottom:25px; }
.box-hover .content-wrapper-body{font-size:1em;line-height:1.3em;}
.box-hover .content-wrapper-price{font-size:1.7em; text-align:right; position:relative; bottom:inherit; right:inherit; text-shadow:rgba(0,0,0,1) 1px 1px 1px;}
.view-products .views-row .views-field-field-image img{width:100%;}
.view-products .views-row .views-field-field-image:hover .box-hover{position:absolute; width:100%; height:250px; background: rgba(0,118,236,0.4); color:#FFF; display:block; top:0}

.view-gallery .views-row {
width: 50%;
float: left;
height: auto;
overflow: hidden;
}
#block-system-main--4,
div#block-block-4 {float:none; display:block; width:100%}
#footer.region{padding:3px 0; font-size:0.8em; line-height:1.2em;}
}

/*-------- BIG SCREEN MOBILES AND SMALL TABLETS -------------*/
@media all and (min-width: 480px) and (max-width: 767px) {
#main-menu{margin-top:10px; margin-bottom:5px}
#main-menu a{font-size: 12px;padding: 4px 3px; text-align:center}
.align-right{margin:0 0 10px 10px; max-width:40%;}
#header{height:auto;}

#block-system-main--4,
div#block-block-4 {float:none; display:block; width:100%}
.view-products .views-row {
width: 100%;
height:250px;
margin-bottom:15px
}
.view-products .views-row.double {
width: 100%;
}
.box-hover .content-wrapper{padding:25px; text-shadow:rgba(0,0,0,1) 1px 1px 1px; font-size:100%}
.box-hover .content-wrapper-title{font-size:1.4em; line-height:1.3em; margin-bottom:25px; }
.box-hover .content-wrapper-body{font-size:1em;line-height:1.3em;}
.box-hover .content-wrapper-price{font-size:1.7em; text-align:right;text-shadow:rgba(0,0,0,1) 1px 1px 1px;position:relative; bottom:inherit; right:inherit;}
.view-gallery .views-row {
width: 50%;
float: left;
height: auto;
overflow: hidden;
}
#header img {
    max-height: 70px;
}
}
@media all and (min-width: 480px) and (max-width:599px) {
	#main-menu li { margin:0;width:20%; float:left; display:block; }
div#spw-halfpipe{
  padding-top:440px !important;
}
#footer.region{padding:3px 0; font-size:0.7em; line-height:1.2em;}

}
/*-------- TABLETS -------------*/
@media all and (min-width: 768px) and (max-width: 1023px) {
	#main-menu{margin-top:10px; margin-bottom:30px}
.align-right{margin:0 0 10px 10px; max-width:40%;}
#header{height:auto;}
#block-system-main--4,
div#block-block-4 {float:none; display:block; width:100%}
.view-products .views-row {
width: 50%;
height:250px;
margin-bottom:15px
}
.view-products .views-row.double {
width: 100%;
}
.box-hover .content-wrapper{font-size:90%}
.box-hover .content-wrapper-price{font-size:1.7em; text-align:right;text-shadow:rgba(0,0,0,1) 1px 1px 1px;position:relative; bottom:inherit; right:inherit;}
.view-gallery .views-row {
width: 33%;
height: auto;
}
#header img {
    max-height: 140px;
}
}
@media all and (min-width: 1024px) and (max-width: 1199px) {
#main-menu{margin-top:0px; margin-bottom:20px}
.align-right{margin:0 0 10px 10px; max-width:40%;}
#header{height:auto;}
.view-products .views-row {
width: 50%;
height:280px;
margin-bottom:15px
}
.view-products .views-row.double {
width: 100%;
}
.box-hover .content-wrapper{font-size:90%}
.box-hover .content-wrapper-price{font-size:1.7em; text-align:right;text-shadow:rgba(0,0,0,1) 1px 1px 1px;position:relative; bottom:inherit; right:inherit;}
.view-gallery .views-row {
width: 33%;
height: auto;
}
}
@media all and (min-width: 1200px) and (max-width: 1399px) {
.view-products .views-row {
width: 50%;
height:380px;
margin-bottom:15px
}
.view-products .views-row.double {
width: 100%;
}
.box-hover .content-wrapper{font-size:120%}
.box-hover .content-wrapper-price{font-size:1.7em; text-align:right;text-shadow:rgba(0,0,0,1) 1px 1px 1px;position:relative; bottom:inherit; right:inherit;}
}
/*-------- LANDSCAPE TABLETS and SMALL LAPTOPS -------------*/
@media all and (min-width: 1200px){
.single_page{background: none;padding:0 0 100px}
}