@charset "UTF-8";
/* CSS Document */


body { padding-top: 0; }
	
	.navbar-default { background-color: rgba(255, 255, 255, .7); }
	.navbar { position: fixed !important; }

	.pagebody { border-top: #ccc solid 1px; }

	
	/******** headlines ********/
	
	h3 { font-family: "Pathway Gothic One", Helvetica, sans-serif !important; font-weight: 400; font-size: 22px !important; line-height: 40px; color:#4a5c6b; text-align:center; margin-top: 0; margin-bottom:50px; position:relative; text-transform: uppercase; }
	h3::before { content:''; border-top:2px solid rgba(74,92,107,0.5); display:block; width:100%; height:1px; position:absolute; top:50%; left:0; }
	h3 span { border:2px solid rgba(74,92,107,0.5); display:inline-block; vertical-align:middle; zoom:1; *display:inline; padding:0 27px; letter-spacing:6px; background:#f5f5f5; position:relative; }
	
	.fullscreen { height: 100vh; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
		display: flex; align-items: center; position: relative;
	}
	
	.range-name {
		width: 100%;
		height: auto;
		background-color: rgba(0,0,0,0.89);
		padding:40px 0 50px 0;
		bottom: 0;
		position: absolute;
		border-top: #e36f26 solid 1px;
	}
	.range-name img {
		max-width: 350px;
		display: block;
		margin: auto;
	}

	.mc .range-name img {
		max-width: 230px;
		display: block;
		margin: auto;
	}

	.gt .range-name img {
		max-width: 230px;
		display: block;
		margin: auto;
	}
	
	.title-center { position: absolute; width: 100%; text-align: center; top: calc(50% - 22px); z-index: 100; }
	.title-center h3::before { display: none; }
	
	.arrows { position: fixed; bottom: -40px; height: 40px; width: 100%; background-color: #657072; z-index: 1000; opacity: 0; -webkit-transition: 1s; transition: 1s; }
	.arrows .left a, .arrows .right a { line-height: 40px; }
	
	.pageEnd {}
	.pageEnd .arrows { opacity: 1; bottom: 0; }


.nav-small { -webkit-transition: 1s; transition: 1s; opacity: 1; }
.scrolling .nav-small { -webkit-transition: 1s; transition: 1s; opacity: 0; }
.nav-small .navbar-brand { width: 80px; padding: 15px; }
.nav-small .navbar-brand img {  }
.nav-small li a:before { bottom: 0 !important; }

.nav-small li a { height: 60px; line-height: 60px; }

#fp-nav ul li a span { background-color: #e36f26;  }

.fp-tooltip { list-style: none; background-color: #e36f26 !important; color: #ffffff !important; padding: 3px 6px !important; top: -6px !important; max-width: 230px !important; line-height: 24px; letter-spacing: 2px; font-size: 12px !important; text-transform: uppercase; }


h1::after, h2::after {
		border-bottom: none;
	}
	p, h1, h2, h3, h4, h5, li {
		font-family: 'Century Gothic W01', Helvetica, sans-serif;
		color: #253A49;
	}
	h2 {
		margin-bottom: 30px;
	}
/*
	.left, .right {
		text-transform: uppercase;
		color: #fff;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 3px;
	}
*/
	p {
		line-height: 32px;
	}


	.left {
		float: left;
		padding-left: 15px;
	}
	.right {
		float: right;
		padding-right: 15px;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	.pagebody {
	 	background-color:rgb(230, 230, 230);
	}
	
	.swatch-row .col-md-12 {
		display: block;
		margin: auto;
	}
	.range{
		width: 100%;
		height: auto;
	}
	.swatch-row{
		width:100%;
		height:100%;
		z-index: 1;
		position: relative;
	}
	.background{
		padding:0 0;
		position: relative;
		z-index: -1;
	}
	.positioning{
		position: relative;
	}
	.diamond{
		height:240px; 
		width:240px;
		padding: 0 !important;
		display:block; 
		transform: rotate(135deg); 
		background-color:white; 
		outline: white medium solid; 
		position:absolute;
	}


	.color { top: calc(50% - 120px); left:-120px; }
	.texture { top: calc(50% - 120px); left:auto; right: -120px; }


.boat-plans { padding-top: 30px; padding-bottom: 30px;}
.boat-plan img { width: 100%; height: auto; }

.st .boat-plans { padding-top: 15px; padding-bottom: 15px;}



.swatch { height:50%; width:50%;background-color:#b8c4da;float:left; border: #fff solid 2px; }
	.color1 { background-color:#b8c4da; }
	.color2 { background-color:#7093aa; }
	.color3 { background-color:#2e3c51; }
	.color4 { background-color:#39596d; }
		

.scrollButton { display: block; opacity: 1; position: fixed; bottom: 0; left: calc( 50% - 20px); right: auto; z-index: 999; background-color: rgb(227, 111, 38) !important; width: 40px; height: 25px; line-height: 25px; text-decoration: none !important; text-align: center; color: #ffffff; transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;}
.scrollButton i { color: #ffffff; line-height: 25px; }
.scrollButton:visited, .scrollButton:active, .scrollButton:focus { color: #ffffff; }

.pageEnd .scrollButton { opacity: 0; }



	.bottom-nav { list-style: none; }
	.bottom-nav li { list-style: none; display: inline-block; margin-left: 5px; margin-right: 5px; font-size: 9px; color: #ccc; }
	.bottom-nav li a { line-height: 40px; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; font-size: 11px;  }
	.bottom-nav li a:hover { opacity: .6; text-decoration: none; }
	
	.arrows { background-color: #e36f26; } 

/*.scrolling .scrollButton { opacity: 0; }*/


li { font-size: 16px; line-height: 32px; color: #253A49; list-style: square; }


.two-columns {  
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	margin-left: 0;
	padding-left: 0;
}


.two-columns li { list-style: none; padding-left: 0; margin-left: 0; }
 .two-columns li:before {
  content: "• ";
}


@media (max-width: 1367px){
	.color { top: calc(98% - 108px); left: 50px;display: block; float: left; position:absolute;  }
		.texture { top: calc(98% - 108px); right: 50px;display: block; float: right; position:absolute;}
	.colors-textures{
		    padding-bottom: 100px;
	}
}

	@media (min-width: 1200px){
		.container {
			width: 1100px !important;
		}	
	}
	@media (max-width: 1199px){
		
		.diamond{
			height:180px; 
			width:180px;
			padding: 0 !important;
			display:block; 
			transform: rotate(135deg); 
			background-color:white; 
			outline: white medium solid; 
			position:absolute;
		}


		.color { top: calc(98% - 79px); left: 50px;display: block; float: left; position:absolute;  }
		.texture { top: calc(98% - 79px); right: 50px;display: block; float: right; position:absolute;  }

		
	}
	@media (min-width: 992px) {
		.container {
			width: 970px;
		}
	}
	@media (max-width: 990px){
		
	}