@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;
    margin-bottom: 15px;
}

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:0px 0 50px 0;
    position: relative;
    top: -40px;
}

#buy h1 {
  margin-bottom: 0;
}

#buy h2 {
    margin-top: 40px;
    font-size:2em;
    margin-top: 0;
}

.boatSelect {
    font-weight: 700;
    margin: 10px 0 0 0;
}

.hero {
    position: relative;
    top: 50px;
    z-index: -1;
}

.left {
  position: relative;
  top: 100px;
}

.right {
  position: relative;
      bottom: 320px;
      margin-top: 50px;
      margin-bottom: -300px;
}


ul {
    list-style-type: square;
}

li {
  color: #8CC53E; /* bullet color */
  margin: 0 0 5px 0;
  font-size: 1.2em;
  float: left;
  padding-left: 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;
}

#main_image_back {display:none; position:absolute; top:0; left:0;}

#price_shipping-destination-3216, #price_shipping-destination-3213 {
  color: #8CC53E;
  font-size: 1.4em;
  font-weight: 700;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79.68%;
}
.span_3_of_5 {
	width: 59.36%;
}
.span_2_of_5 {
	width: 39.04%;
}
.span_1_of_5 {
	width: 18.72%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
}

.selection {
    border: 3px solid #8CC53E;
}

/* Larger than desktop */
@media (max-width: 1080px) {

  .right {
      position: relative;
      bottom: 250px;
      margin-top: 50px;
      margin-bottom: -200px;
  }

}


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

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


  .left {
    position: static;

  }

  .right {
      position: static;
margin-bottom: 0px;
  }

  #buy {
    padding: 0px 0 50px 0;
    position: static;
}

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 (max-width: 1400px) {
  .split {
    width: 100% !important;
    float: left;
    box-sizing: border-box;
    margin-left: 0px !important;
}