/*

Theme Name: Spicy Brocoli Base Theme

Theme URI: http://spicybroccoli.com

Description: Spicy Broccoli template for WordPress sites. Good for you company's health!

Author: Spicy Broccoli Media

Author URI: http://spicybroccoli.com/

Version: 1.1

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
 @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, font, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	font-family: 'Open Sans', sans-serif;
	background: #d9d9d9;
	-webkit-animation-delay: 0.1s;
	-webkit-animation-name: fontfix;
	-webkit-animation-duration: 0.1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
}
 @-webkit-keyframes fontfix {
 from {
opacity: 1;
}
 to {
opacity: 1;
}
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
	font-weight: 700;
}
.page-title, #order_review_heading {
	margin-bottom: 20px;
	margin-top: 15px;
	text-align: center;
}
#header {
	background: #001933;
}
.container, .col-full {
	margin: 0 auto;
	padding: 0 20px;
}
div#content {
	padding-top: 20px;
}
.slider {
	margin-bottom: 45px;
	overflow: hidden;
}

@media only screen and (min-width: 768px) {
/* Desktop styles go here */

#main.fullwidth, .layout-full #main, .col-full, .no-sidebar #main {
	width: 960px;
	margin: 0 auto;
}
.container {
	width: 960px;
}
#header {
	padding-top: 15px;
	padding-bottom: 5px;
}
div#top {
	width: 483px;
}
div.wpcf7 {
	padding: 0 70px;
}
}
#top ul.nav {
	float: none;
}
#top ul.nav > li a {
	padding: 1.2em 1em;
	font-weight: bold;
}
#header #navigation ul.nav > li a {
	font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
	font-size: 1.28em;
	font-weight: bold;
}
#top ul.nav > li a:hover {
	text-decoration: none;
}
#top .wc-nav li.cart a .contents {
	padding: .2em .618em;
	color: #001933;
	background: #808c99;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	margin-left: 1em;
	display: inline;
}
#media-icons {
	float: right;
	height: 26px;
	width: 150px;
	margin-top: 5px;
}
span.facebook a, span.twitter a, span.instagran a, span.googleplus a {
	background: url(images/media_icon_sprite.png);
	width: 25px;
	height: 25px;
	display: block;
	float: right;
	margin: 4px;
	padding: 1px;
	-webkit-transition: background-position .1s ease;
	-moz-transition: background-position .1s ease;
	-o-transition: background-position .1s ease;
	transition: background-position .1s ease;
}
span.facebook a {
	background-position: 0 0;
}
span.twitter a {
	background-position: 28px 0;
}
span.instagran a {
	background-position: 54px 0;
}
span.googleplus a {
	background-position: 82px 0;
}
span.facebook a:hover {
	background-position: 0 28px;
}
span.twitter a:hover {
	background-position: 28px 28px;
}
span.instagran a:hover {
	background-position: 54px 28px;
}
span.googleplus a:hover {
	background-position: 82px 28px;
}
/* PAGE TILES */

.tiles {
	overflow: auto;
}
.tile-container {
	margin: 0 auto;
	display: table;
}
.tile-container div {
	float: left;
}
.tiles-row {
	width: 50%;
	float: left;
}
.tile-container .image-overlay {
	width: 240px;
	height: 200px;
	overflow: hidden;
}
.tile-container IMG {
	opacity: 0.4;
	filter: alpha(opacity=40);
	-webkit-transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;
	-ms-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}
.tile-container IMG:hover {
	opacity: 100;
	filter: alpha(opacity=100);
}
.tile-container .tile-caret-left {
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-right: 19px solid #ff0000;
	position: absolute;
	margin-left: -18px;
	margin-top: 81px;
}
.tile-container .tile-caret-right {
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-left: 19px solid #001933;
	position: absolute;
	margin-left: 240px;
	margin-top: 81px;
	z-index: 1;
}
.tile-container .txt {
	width: 240px;
	height: 200px;
}
.tile-container .txt h2 {
	text-transform: uppercase;
	margin: 30px 30px 20px 30px;
}
.tile-container .txt p {
	margin: 0px 30px 30px 30px;
}
div#tile-1 {
background:#fff;	
}

div#tile-1 .txt {
	background: #001933;
	color: #B3BAC2;
}
div#tile-1 .tile-caret-left {
	border-right-color: #001933;
}
div#tile-2 .txt {
	background: #fff;
	color: #1a1a1a;
}
div#tile-2 .tile-caret-left {
	border-right-color: #fff;
}
div#tile-3 .txt {
	background: #edea00;
	color: #1a1a1a;
}
div#tile-3 .tile-caret-right {
	border-left-color: #edea00;
}
div#tile-4 .txt {
	background: #0063cc;
	color: #E6F0FA;
}
div#tile-4 .tile-caret-right {
	border-left-color: #0063cc;
}
/* END PAGE TILES */

.home-about-us {
	padding: 62px 170px;
	text-align: center;
}
.home-about-us H1 {
	margin-bottom: 20px;
}
.footer {
	background: #001933;
	padding: 50px 0 25px 0;
	overflow: hidden;
}
.footer, .footer .content a {
	color: #fff;
}
.footer .content {
	width: 50%;
	float: left;
	color: #fff;
}
.footer .content H3 {
	color: #edea00;
	text-transform: uppercase;
	font-size: 32px;
}
.footer .content-divider {
	float: left;
	width: 100%;
	border-bottom: 1px solid #fff;
	margin-top: 32px;
	margin-bottom: 20px;
}
form#form-footer {
	margin-top: 15px;
}
#form-footer input[type="text"], .btn-footer {
	padding: 0;
	margin: 0;
	border: 0;
}
#form-footer input[type="text"] {
	height: 45px;
	width: 62%;
	float: left;
	font-size: 28px;
	padding: 0 5px;
}
.button, .submit {
	height: 45px;
	line-height: 45px;
	width: 33%;
	background-color: #0063cc;
	color: #fff;
	font-size: 19px;
	border: 0;
}
.product-view.button {
	width: 100%;
}
.button:hover {
	background-color: #00C;
}
.select2-choice {
	height: 45px;
	line-height: 45px;
	border-color: #AAA !important;
}
.select2-drop-active {
	border-color: #AAA !important;
}
.btn-footer {
	float: left;
	margin-left: 2%;
}
.single_add_to_cart_button {
	margin-top: 15px;
}
.sbm {
	text-align: right;
}
.sbm a {
	color: #0069da !important;
	text-decoration: none;
}
ul.the-tricks {
	margin-left: 0 !important;
	list-style: none;
	overflow: auto;
	margin-bottom: 15px;
}
ul.the-tricks li {
	float: left;
	width: 25%;
}
.the-tricks-container {
	padding: 10px;
}
.the-tricks-container .title, .product-title {
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 10px;
}
div.wpcf7 .left, div.wpcf7 .right {
	width: 45%;
	float: left;
	padding: 0 2.5%;
}
div.wpcf7 input, div.wpcf7 textarea {
	height: 45px;
	margin-bottom: 10px;
	width: 100%;
}
div.wpcf7 textarea {
	height: 150px;
}
.page section.entry {
	padding: 0 10%;
	text-align: center;
}

.woocommerce-checkout.page section.entry {
	padding: 20px;
	text-align: center;
}


@media only screen and (max-width: 767px) {
ul.the-tricks li {
	float: left;
	width: 50%;
}
.tiles-row {
	width: 100%;
}
div#content {
	padding-top: 80px;
}
.home-about-us {
	padding: 62px 20px;
}
.footer .content {
	width: 100%;
	text-align: center;
}
#header #logo {
	width: 150px;
	position: absolute;
}
#header {
	background: #001933;
	position: fixed;
	z-index: 9999;
	width: 100%;
	min-height: 55px;
	margin: 0;
	padding: 5px 0;
}
#top {
	margin: 0 auto;
	margin-right: 42px;
	margin-top: 10px;
}
#navigation {
	margin-top: 15px;
}
#media-icons {
	display: none;
}
#gallery-1 .gallery-item {
	width: 33.334% !important;
}
div.wpcf7 .left, div.wpcf7 .right {
	width: 100%;
	margin: 0;
	padding: 0;
}
}
@media only screen and (max-width: 560px) {
	ul.the-tricks li {
	width: 100%;
}
}
@media only screen and (max-width: 484px) {

.tile-container .image-overlay {
	display: none;
}
.tile-caret-left, tile-caret-right {
	display: none;
}
.tile-container .txt {
	width: 100%;
}
}