@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');

body {
    font-family: 'Roboto Condensed', sans-serif;
}

p {
    font-size: 1.2em;
}

h1 {
    color: #8CC53E;
    font-size: 4em;
}

h2 {
    color: #929497;
    font-size: 2.3em;
}

h3 {
    color: #8CC53E;
    font-size: 2.8em;
}

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

a:hover {
    color: #8CC53E;
}

header a {
    color: #8CC53E;
}

header a:hover {
    color: #ffffff;
}

header {
    background: #000000;
    border-bottom: 5px solid #8CC53E;
    padding: 25px 0;
}

header .active {
    color: #ffffff;
}

header .logo {
	float: left;
	max-width: 100%;
}

header nav {
	padding: 30px 20px 5px 50px;
	float: right;
}
header nav ul {
	padding: 0;
}
header nav li {
	display: inline;
	list-style: none;
	margin-right: 0px;
	font-size: 1.4em;
}

header nav li a {
  text-transform: uppercase;
  text-decoration: none;
}

.green {
    color: #8CC53E;
}


#buy {
    padding:50px 0;
}

#buy h1 {
    text-align: right;
}

#buy h2 {
    margin-top: 10px;
}
.lightbox-opened {
  cursor: pointer;
  /* overflow-y: scroll; */
  padding: 24px;
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.lightbox-opened:before {
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.3);
  color: #eee;
  content: "x";
  font-family: sans-serif;
  padding: 6px 12px;
  position: fixed;
  text-transform: uppercase;
}
.lightbox-opened img {
  -webkit-box-shadow: -1px 5px 41px 0px rgba(0,0,0,0.54);
	-moz-box-shadow: -1px 5px 41px 0px rgba(0,0,0,0.54);
	box-shadow: -1px 5px 41px 0px rgba(0,0,0,0.54);
  max-width: 960px;
}

.no-scroll {
  /* overflow: hidden; */
}


ul {
    list-style-type: square;
}

li {
  color: #8CC53E; /* bullet color */
  margin: 0;
  font-size: 1.2em;
  padding-left: 1.4em;
    text-indent: -1.4em;
}
li span {
  color: #000000; /* text color */
}


button {
  background: #8BC43E !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.6em !important;
    border-radius: 0;
    font-family: 'Roboto Condensed', sans-serif;
        padding: 0 10px;
}

.button {
  background: #8BC43E !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.6em !important;
    border-radius: 0;
    font-family: 'Roboto Condensed', sans-serif;
        padding: 0 10px;
}

.greenBox {
  background: #8CC53E;
  position: relative;
  top: 46px;
  z-index: 0;
}

.greenBox:before {
  content: '';
  position: absolute;
  left: 0;
  top: -46px;
  width: 100%;
  height: 100px;
  background: #8CC53E;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  -webkit-backface-visibility: hidden;
}

#info {
padding: 40px 0 100px 0;
position: relative;
margin-top: 50px;
}

#info:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 200px;
  background: #b8b8b8; /* Old browsers */
  background: -moz-linear-gradient(top, #b8b8b8 0%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b8b8b8 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b8b8b8 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8b8b8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  /*-webkit-backface-visibility: hidden; */
}

#info ul {
    list-style-type: disc;
}

#info h2 {
    text-transform: uppercase;
    color: #000000;
    font-weight: 700;
    font-size: 3em;
    margin-bottom: 0;
}

#info h2 span {
    color: #A6A8AB;
    text-transform: lowercase;
}

#info .subheading {
    font-size: 1.6em;
}

.greyBox {
    background: #4D4D4D;
    position: relative;
    top: 46px;
    z-index: 2;
}

.greyBox:before {
  content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: visible;
    width: 100%;
    height: 100px;
    background: #4D4D4D;
    z-index: -1;
    -webkit-transform: skewY(2.5deg);
    -moz-transform: skewY(2.5deg);
    -ms-transform: skewY(2.5deg);
    -o-transform: skewY(2.5deg);
    transform: skewY(2.5deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: initial;
}

footer {
    background: #000000;
    padding: 20px 0 0 0;
    position: relative;
    z-index: 3;
}

footer:before {
  content: '';
  position: absolute;
  left: 0;
  top: -46px;
  width: 100%;
  height: 100px;
  background: #000000;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  -webkit-backface-visibility: hidden;
}

footer .green {
    font-size: 1.6em;
    font-weight: 700;
}

footer a {
    color: #ffffff;
}

footer #copyright {
    background: #8CC53E;
    padding: 10px 0;
}

footer #copyright p {
    color: #000000;
    text-align: center;
  margin: 0;
  font-size: 0.8em;
}

footer p {
    color: #ffffff;
}

#price_shipping-destination-3210, #price_shipping-destination-3219 {
  color: #8CC53E;
  font-size: 1.4em;
  font-weight: 700;
  margin-top: 10px;
}



/* Slider */
#hero .slider {
	max-width: 100%;
	padding: 0px 0 30px 0;
	margin: 0px auto;
}
#hero .slide-viewer {
	position: relative; /* needed for IE7 */
	overflow: hidden;
	height: 540px;
}
#hero .slide-group {
	width: 100%;
	height: 100%;
	position: relative;
}
#hero .slide {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
}
#hero .slide:first-child {
	display: block;
}
#hero .slide-buttons {
	text-align: center;
}
#hero .slide-btn {
	border: none;
	background: none;
	color: #000000 !important;
	font-size: 300% !important;
	padding: 0 10px;
	margin: 20px 0;
	height: 20px;
	line-height: 0.5em;
}
#hero .slide-btn:focus {
	outline: 0;
  background: #ffffff !important;
  color: #8CC53E !important;
}
#hero .slide-btn.active, .slide-btn:hover {
  background: #ffffff !important;
  color: #8CC53E !important;
	cursor: pointer;
}

@media all and (max-width: 550px) {
#hero button {
	margin-bottom: 20px;
}
#hero h2 {
	font-size: 2.2em;
}
#hero p {
	color: #FFFFFF;
	font-size: 0.8em;
	line-height: 21px;
}
#hero .device {
	display: none;
}
#hero .slider {
	padding: 110px 0 70px 0;
}
#hero .slide-viewer {
	position: relative; /* needed for IE7 */
	overflow: hidden;
	height: 300px;
}
}

#hero button {
    background: #ffffff !important;
    color: #000000 !important;
}


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 800px) {


header .logo {
	float: none;
	display: block;
	margin: 0 auto;

}

header nav {
    padding: 25px 0 0 0;
    float: none;
}

header nav li:last-child {
	margin-right: 0px;
}

header ul {
	text-align: center;
}

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {



}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}