/*----------------------------------------------------------------------------*/

/*-- GOOGLE FONTS --*/
@import url(http://fonts.googleapis.com/css?family=Oswald);
/*-- GOOGLE FONTS (END) --*/

/*----------------------------------------------------------------------------*/

/*-- FUNDAMENTALS --*/
html {
	margin: 0;
	border: 0;
	padding: 0;
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none;   /* Firefox all */
	-ms-user-select: none;  /* IE 10+ */
	user-select: none;  /* Likely future */ 
}

body {
 margin: 0;
 padding: 0;
 border:0;
 background-color:black; /*#001836;*/
 font:12pt arial;
 line-height:30px;
 /* overflow:hidden; */
 color:white; /*#5c6779;*/ /* 001A36 */
}

h1{
 font-family: 'Oswald', sans-serif;
 font-size: 20pt;
 font-weight:bold;
 /*font-style:italic;*/ 
 letter-spacing:0px; 
 line-height:50pt;
 color:#5a6b7d; /*c43700;*/
 margin-bottom:10px;
 text-transform:uppercase;
}

h2 {
 text-transform: uppercase;
 font-size:14pt;
}

a {
 color:#2471AD; /* 854d2c */
 /* font-weight:bold; */
 text-decoration:none;
}

a.button{
	position:relative;
	display:inline-block;
	padding:5px 30px 1px 30px;
	transition: color .4s;
	text-transform: uppercase;
	color: white;
	cursor: pointer;
	font-size: 11px;
    margin: 6px;
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none;   /* Firefox all */
	-ms-user-select: none;  /* IE 10+ */
	user-select: none;  /* Likely future */ 
}
a.button span{
	position:relative;
}
a.button:before{
	content: "";
    border: 2px solid #1a8cb3;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: skew(-20deg);
	transition: background-color .4s;
}
a.button:hover{
}
a.button:hover:before{
	background-color: #1a8cb3;
}

a.step{
	color: white;
	display:block;
}
.stepNumber{
	font-size: 27px;
    color: white;
    display: inline-block;
    font-style: italic;
    width: 32px;
    margin: 5px;
    height: 32px;
    border: 6px solid #1a8cb4;
    border-radius: 100px;
    text-align: center;
    box-shadow: 0 0 0 6px #37586e;
    line-height: 32px;
    font-weight: bold;
}

.nav-next{
	float:right;
}

.clsImgLink {
 text-decoration:none;
 border:none;
}

.clsDivider {
 height:10px;
 border-bottom:1px solid lightgray;
 margin-bottom:10px;
}

.clsRainbow {
animation-name: aniRainbow;
animation-duration:6s;
animation-direction:alternate;
animation-iteration-count:infinite;

-webkit-animation-name: aniRainbow;
-webkit-animation-duration:6s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}

@keyframes aniRainbow
{
0% {color:red;}
20% {color:green;}
40% {color:blue;}
60% {color:yellow;}
80% {color:orange;}
95% {color:pink;}
}

@-webkit-keyframes aniRainbow
{
0% {color:red;}
20% {color:green;}
40% {color:blue;}
60% {color:yellow;}
80% {color:orange;}
95% {color:pink;}
} 

.clsNone {
 display:none;
}

.clsHide {
 height:0px;
 
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 
 -o-transition:.6s;
 -ms-transition:.6s;
 -moz-transition:.6s;
 -webkit-transition:.6s;
 transition:.6s;
}

.clsShow {
 height:auto;

 opacity: 100;
 filter: alpha(opacity=1); /* For IE8 and earlier */

 -o-transition:.6s;
 -ms-transition:.6s;
 -moz-transition:.6s;
 -webkit-transition:.6s;
 transition:.6s;   
}

.clsHide2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 
 -o-transition:.6s;
 -ms-transition:.6s;
 -moz-transition:.6s;
 -webkit-transition:.6s;
 transition:.6s;
}

.clsShow2 {
 opacity: 100;
 filter: alpha(opacity=1); /* For IE8 and earlier */

 -o-transition:.6s;
 -ms-transition:.6s;
 -moz-transition:.6s;
 -webkit-transition:.6s;
 transition:.6s;   
}

/*-- FUNDAMENTALS (END) --*/

/*----------------------------------------------------------------------------*/

/*-- POP UP --*/
#idFormWrap {
 overflow:hidden;
}

.clsFormCaptcha {
 margin-left:166px;
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s;  
}

.clsFormCaptcha_2 {
 margin-left:0px;

 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s;  
}


#idPopUp {
 width:100%;
 max-width:1024px;
 min-height:50px;
 padding:20px 50px 50px 50px;
 margin:0 auto;
 display:none;
 background-color:#365465; /*00101d;*/ /*001a2f;*/
}

#idWarningPopUp {
	width:100%;
	max-width:640px;
	min-height:50px;
	padding:20px 50px 50px 50px;
	margin:0 auto;
	display:none;
	background-color:#365465; /*00101d;*/ /*001a2f;*/
   }

   #idColorPopUp {
	width:100%;
	max-width:640px;
	min-height:50px;
	padding:20px 50px 50px 50px;
	margin:0 auto;
	display:none;
	background-color:#365465; /*00101d;*/ /*001a2f;*/
   }

   #idShareWarningPopUp {
	width:100%;
	max-width:700px;
	min-height:50px;
	padding:20px 50px 50px 50px;
	margin:0 auto;
	display:none;
	background-color:#365465; /*00101d;*/ /*001a2f;*/
   }
/*-- POP UP (END) --*/

/*-- LOGOS --*/
.clsBrand4ModelsWrap {
 float:left;
 margin-bottom:20px;
 text-decoration:none;
 border:none;
 width:177px;
 height:49px;
 
 margin-left:50px;
 cursor:pointer;
}

.clsBrand4Models {
 position:relative;
 top:0px;
 left:0px;
 z-index:1;
 padding:10px; 
}

.clsBrand4Models2 {
 text-decoration:none;
 border:none;

 position:relative;
 top:-69px; /*-49px;*/
 left:0px;
 z-index:100;

 background-color:#1a88af;
 padding:10px;
 
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s; 
}

.clsBrand4Models2:hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */ 
}

.clsBrand4Models2_selected {
 position:relative;
 top:-69px; /* -49px */
 left:0px;
 z-index:100;

 background-color:#1a88af; 
 padding:10px;
 
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */ 
}
/*-- LOGOS (END) --*/

/*----------------------------------------------------------------------------*/

/*-- LOADING --*/
#idLoadCount {
 position:fixed; 
 z-index:100; 
 display:none;
}

#idLoading {
 background-image:url('../images/byot/black_sheer.png');
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 z-index:100;
 display:none;
 opacity:0;
 transition: opacity .5s;
}
body.loading #idLoading{
	display:block;
	opacity:1;
}

#idWavesWrap {
 width:99px;
 margin:0 auto;
 margin-top:20%;
}

#idWaves {
 width:99px;
 height:27px;
 background-image:url('../images/byot/load_waves.png');
}

#idLoadingText {
 margin-right:20px;
 float:right;
 font-family: gotham,arial;
 font-size: 9pt;
 font-weight: normal; 
}
/*-- LOADING (END) --*/

/*-- INTERFACE --*/
#idWrapSteps {
 margin:0 auto;
 max-width:521px;/*1122px;*/
 /*display:none;*/
}

#idPrevious {
 float:left;
 cursor:pointer;
}
#idPrevious2 {
 float:left;
 cursor:pointer;
 margin-top:10px;
}

#idBYOTStep {
 clear:left;
 float:left;
 max-width:500px; /*835px;*/
 min-width:237px;
 /* border:1px solid yellow; */
 
 display:none;
}

#idNext {
 float:right;
 cursor:pointer; 
}
#idNext2 {
 float:right;
 cursor:pointer; 
 margin-top:10px; 
}

#idChooseBtn {
 position:relative;
 /*
 top:0px;
 left:0px;
 */
 float:left;  
 margin-left:0px;
 margin-top:0px;
}








#idSection_1.sideView #idBYOTSide {
 display:none;
 position:relative;
 height:682px;
 width:100%;
 max-height:682px;
 max-width:1024px;
}
#idSection_1.sideView #idBYOTSide {
	display:block;
}

.clsLayers {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
}

canvas {
 width:100%;
}


/*----*/

#idSection_1 {
 margin-top:0px; /*50px;*/
 min-height:400px;
 height:100%;
 /*-- BOATMATE --*/
 overflow-y:auto;
 overflow-x:hidden;
 background:#011025 center center repeat-x;
 position:fixed;
 left:0;
 right:0;
 bottom:40px;
 transition:left .6s;
}

body.menuOpened #idSection_1{
	left:600px;
}





#idSection_1 .side,
#idSection_1 .rear{
	position:absolute;
	display:none;
	top: 125px;
    height: calc(100% - 125px);
	left:0;
	width:100%;
	background-size:contain;
	background-position: center center;
	background-repeat:no-repeat;
}
#idSection_1.view-side .side,
#idSection_1.view-rear .rear,
#idSection_1.view-print .side,
#idSection_1.view-print .rear{
	display:block;
}

#idSection_1 .layers *{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:contain;
	background-position: center center;
	background-repeat:no-repeat;
}

#idSection_1.frame-1 .side .frame{
	background-image:url(/images/byot2/frames/single/side/single_frame.png);
}
#idSection_1.frame-2 .side .frame{
	background-image:url(/images/byot2/frames/tandem/side/tandem_frame.png);
}
#idSection_1.frame-3 .side .frame{
	background-image:url(/images/byot2/frames/triple/side/triple_frame.png);
}
#idSection_1.frame-1 .rear .frame{
	background-image:url(/images/byot2/frames/single/rear/single_frame.png);
}
#idSection_1.frame-2 .rear .frame{
	background-image:url(/images/byot2/frames/tandem/rear/tandem_frame.png);
}
#idSection_1.frame-3 .rear .frame{
	background-image:url(/images/byot2/frames/triple/rear/triple_frame.png);
}









#idSection_1 .layers .wheel{
	position:absolute;
	width: 86px;
	height: auto;
	padding-top:86px;
	top: calc(50% + 32px);
	transform: translate(-50%, -50%);
	transform-origin: top left;
	background: url(/images/byot2/wheels/tire.png) no-repeat center center;
	background-size: 100%;
}
#idSection_1 .layers .wheel>div{
	position:absolute;
	width:67.8%;
	height: auto;
	padding-top:67.8%;
	top:50.5%;
	left:49%;
	transform: translateX(-50%) translateY(-50%);
}
#idSection_1 .layers .wheel-2{
	transform: rotate(15deg) translate(-50%, -50%);
}
#idSection_1 .layers .wheel-3{
	transform: rotate(30deg) translate(-50%, -50%);
}
#idSection_1.frame-1 .wheel-1{
	left:calc(50% - 142px);
}

#idSection_1.frame-2 .wheel-1{
	left:calc(50% - 182px);
}
#idSection_1.frame-2 .wheel-2{
	left:calc(50% - 72px);
}
#idSection_1.frame-3 .wheel-1{
	left:calc(50% - 255px);
}
#idSection_1.frame-3 .wheel-2{
	left:calc(50% - 145px);
}
#idSection_1.frame-3 .wheel-3{
	left:calc(50% - 35px);
}
#idSection_1 .wheel-spare-15,
#idSection_1 .wheel-spare-18,
#idSection_1.frame-1 .wheel-2,
#idSection_1.frame-1 .wheel-3,
#idSection_1.frame-2 .wheel-3{
	display:none;
}
#idSection_1.frame-1 .layers .wheel-spare-15{
	top: calc(50% - 21px);
    left: calc(50% - -257px);
    width: 69px;
    padding-top: 69px;
	transform: rotateY(52deg) translate(-50%, -50%);
}
#idSection_1.frame-2 .layers .wheel-spare-15{
	top:calc(50% - 24px);
	left:calc(50% - -313px);
	width: 79px;
	padding-top: 79px;
	transform: rotateY(52deg) translate(-50%, -50%);
}
#idSection_1.frame-3 .layers .wheel-spare-15{
	top:calc(50% - 24px);
	left:calc(50% - -313px);
	width: 79px;
	padding-top: 79px;
	transform: rotateY(52deg) translate(-50%, -50%);
}
#idSection_1.frame-2 .layers .wheel-spare-18{
	top:calc(50% - 23px);
	left:calc(50% - -314px);
	width: 69px;
	padding-top: 69px;
	transform: rotateY(52deg) translate(-50%, -50%);
}
#idSection_1.frame-3 .layers .wheel-spare-18{
	top:calc(50% - 23px);
	left:calc(50% - -314px);
	width: 69px;
	padding-top: 69px;
	transform: rotateY(52deg) translate(-50%, -50%);
}

#idSection_1.bg-dark{
	 background-image:url(/images/byot2/bgs/dark.png);
	 background-size: cover;
}
#idSection_1.bg-light{
	background-image:url(/images/byot2/bgs/light.png);
	background-size: auto 100%;
}
#idSection_1.bg-img.view-side{
	background-image:url(/images/byot2/bgs/img_side.jpg);
	background-size: cover;
}
#idSection_1.bg-img .side{
	top: 15%;
}
#idSection_1.bg-img .rear{
	top: 12%;
	height: calc(100% - 12%);
}
#idSection_1.bg-img.view-rear{
	background:url(/images/byot2/bgs/img_rear.jpg) center center;
	background-size: cover;
}
#idSection_1.bg-img.frame-1 .side .frameShadow{
	background-image:url(/images/byot2/frames/single/side/single_frame_shadow.png);
}
#idSection_1.bg-img.frame-2 .side .frameShadow{
	background-image:url(/images/byot2/frames/tandem/side/tandem_frame_shadow.png);
}
#idSection_1.bg-img.frame-3 .side .frameShadow{
	background-image:url(/images/byot2/frames/triple/side/triple_frame_shadow.png);
}
#idSection_1.bg-img.frame-1 .rear .frameShadow{
	background-image:url(/images/byot2/frames/single/rear/single_frame_shadow.png);
}
#idSection_1.bg-img.frame-2 .rear .frameShadow{
	background-image:url(/images/byot2/frames/tandem/rear/tandem_frame_shadow.png);
}
#idSection_1.bg-img.frame-3 .rear .frameShadow{
	background-image:url(/images/byot2/frames/triple/rear/triple_frame_shadow.png);
}




.clsBrand4ModelsWrap .checked{
	display:none;
}
input:checked+.clsBrand4ModelsWrap,
.clsBrand4ModelsWrap:hover{
	background-color:#1a88af;
}
input:checked+.clsBrand4ModelsWrap .checked,
.clsBrand4ModelsWrap:hover .checked{
	display:block;
}
input:checked+.clsBrand4ModelsWrap .unchecked,
.clsBrand4ModelsWrap:hover .unchecked{
	display:none;
}







.clsWheelName {
 color:#40c9f7;
 font:10pt gotham, arial;
 text-transform:uppercase;
}

.clsWheelSize {
 color:white;
 font:10pt gotham, arial;
 font-style:italic;
}
.clsWheelSelection{
	float:left; 
	width:170px; 
	min-height:280px; 
	margin:5px; 
	padding:10px 1px 10px 2px;
}
.clsPartWrap {
 float:left; 
 width:180px; 
 margin:0px; 
 font-size:9pt;
}

.paintSelector label{
	cursor:pointer; 
	display:inline-block; 
	width: 35px;
	height: 34px;
	background-color: transparent;
	background-size:contain;
	border: 1px solid white;
	transform: skew(-20deg);
	margin: 3px;
}



.paintSelector label.flake{
	background-image:url("/images/byot2/colors/color_flake.png")
}	


.paintSelector input,
input[name="brand"]{
	display:none;
}

/*-- INTERFACE (END) --*/ 

.clsTopDrop {
 color:#556275; 
 /* border-bottom:1px solid #556275; */ 
 margin-bottom:30px;
 
 text-align:center;
 margin-top:-20px;
 padding-bottom:8px;
 
}

.clsTopDropper {
 text-transform:uppercase;
 font-size:8pt;
 color:#5c6779;
 font-family: gotham,arial;
}

/*-- CONTACT FORM --*/

#idSubmit {
 position:absolute;
 top:0px;
 left:0px;
 width:190px;
 height:180px;
 background-color:transparent;
 border:none;
 cursor:pointer;
}

#idContactFormWrap {
 width:600px;
 margin:0 auto;
}

#idSendBtn {
 position:relative;
 background-color:#c43700;
 border-radius:10px;
 /*width:91%;*/
 width:150px;
 height:150px;
 padding:15px 20px;
 
 cursor:pointer;
 float:left; 
 margin-left:10px; 
 text-align:center;
 
 background-image:url('../images/mailbox.png');
 background-repeat:no-repeat;
 background-position:210px 10px;
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s; 
}

#idEnvelope {
 margin-top:50px;
}

#idSendBtn:hover {
 background-position:100px 10px;
}

input {
/*
 width:91%;
 background-color:#cdcdcd;
 border:2px solid #c43700;
 padding:15px 20px;
 margin-bottom:2.04918033%; 
 color:#c43700;

 margin-right:0px;
 
 border-radius:10px;
 font:12pt arial;
*/
}

textarea {
/*
 float:left;

 width:345px;
 height:145px;
 padding:15px 20px;
 margin-bottom:2.18579235%;
 margin-left:5px;
 
 color:#c43700;
 font:12pt arial;

 background-color:#cdcdcd;
 border:2px solid #c43700;
 border-radius:10px;
*/ 
}

.clsGreen {
 font-style:italic;
 color:#00c88d;
}

.clsRed {
 font-style:italic;
 color:#ef6666;
}

/*-- CONTACT FORM (END) --*/

/*----------------------------------------------------------------------------*/

/*-- BOATMATE --*/

#idVideo {
 display:none;
}

#idOverlay {
 display:none;
 background-image:url('../images/home/models.jpg');
 overflow:hidden;
}

#idGlow_1 {
 background-image:url('../images/glow_1.png');
}
#idGlow_2 {
 background-image:url('../images/glow_2.png');
}
#idGlow_3 {
 background-image:url('../images/glow_3.png');
}
#idGlow_4 {
 background-image:url('../images/glow_4.png');
}
.clsGlow {
 position: absolute;
 bottom: 0;
 left: 0;
		
 overflow:hidden;
		
 background-repeat:no-repeat;
 background-position:left bottom;
 width:100%;
 height:100%;
 /*-- RES --*/
 -webkit-background-size: 100% auto;
 -moz-background-size: 100% auto;
 -o-background-size: 100% auto; 
 background-size: 100% auto;
 /*-- RES (END) --*/ 
}

#idGlowOuter_1 {
 background-image:url('../images/glow_1.png');
}
#idGlowOuter_2 {
 background-image:url('../images/glow_2.png');
}
#idGlowOuter_3 {
 background-image:url('../images/glow_3.png');
}
#idGlowOuter_4 {
 background-image:url('../images/glow_4.png');
}
.clsGlowOuter {
 position: absolute;
 bottom: 0px;
 left: 0;
		
 overflow:hidden;
		
 background-repeat:no-repeat;
 background-position:left 200%;
 width:100%;
 height:100%;
 
 /*-- RES --*/
 -webkit-background-size: 100% auto;
 -moz-background-size: 100% auto;
 -o-background-size: 100% auto; 
 background-size: 100% auto;
 /*-- RES (END) --*/
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s; 
}
.clsGlowOuter:hover {
 /*bottom:0px;*/
 background-position:left 100%;
}

.clsGlowInner {
 position: absolute;
 bottom: -37px;
 left: 0;

 overflow:hidden;

 /*background-color:red;*/		
 
 width:100%;
 height:100%;

 /*-- RES --*/
 -webkit-background-size: 100% auto;
 -moz-background-size: 100% auto;
 -o-background-size: 100% auto; 
 background-size: 100% auto;
 /*-- RES (END) --*/ 
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s; 
}

.clsGlowInner:hover {
 font-weight:bold;
 bottom: 10px;
}

.clsGlowContent {
 position: absolute;
 bottom: 0px; /*-37px;*/
 left: 0;
 
 line-height:20px;
 
 width:100%;
 text-align:center;
 color:white;
 font-family:gotham,arial;
 font-size:11pt;
 font-style:italic;
 text-transform:uppercase;
 /*
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s;
 */ 
}

.clsGoBtn {
 margin-top:8px;
}
/*
#idMenuWrap {
 height:auto;
 background-image:none;

 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 overflow:hidden;
 background-position:center top; 

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
}

#idSecondaryMenu{
 display:none;
 color:white;
 font-size:9pt;
 text-align:center;
 margin-top:105px;
}
*/

#idMenuWrap {
 min-height:84px;/* jp new */

 height:auto;
 background-image:none;

 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 /*overflow:hidden;*/
 background-position:center top; 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/
 /* background-color:green; */
}

#idSecondaryMenu{
 display:none;
 color:white;
 font-size:9pt;
 text-align:center;
 margin-top:105px;
}

.clsSecondaryMenuItem {
 color:white;
 text-decoration:none;
 text-transform:uppercase;
 font-family:gotham,arial;
 font-weight:normal;
 position:relative;
 top:-15px;
 text-shadow:0px 0px 4px grey;
}

#idContentWrap {
 max-width:888px;
 width:100%;
 margin:0 auto;
 margin-top:115px;
}

.clsHeaderImg {
 width:100%;
}

.clsColA {
 float:left;
 width:24.25%;
 margin-right:1%;
 background-image:url('../images/bm_bg_column.png');
 cursor:pointer;
 position:relative;
}

.clsColB {
 float:left;
 width:24.25%;
 background-image:url('../images/bm_bg_column.png');
 cursor:pointer;
 position:relative; 
}

#idContent {
 width:100%;
 max-width:1024px;
 margin:0 auto;
 min-height:680px;
}

#idContentInner {
 padding:10px;
}

/*-- --*/
#idMobileHeader {
 display:block;
 height:54px;
 padding:15px 0px;
 background-color:#001836;
 text-align:center;
 position:absolute;
 z-index:100;
 width:100%;
}

#idMobileLogo {
}

#idMobileHeaderInner {
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%; 
 height:2px;
}

/*
#idMobileHeader {
 display:block;
 height:54px;
 padding:15px;
 background-color:#001836;
 text-align:center;
}

#idMobileLogo {
}
*/
/*
#idMenu {
 display:block;
 float:right;
 padding:10px;
 background-color:#000e1f;
 margin-top:-67px;
 position:relative;
 z-index:100;
}
*/
/*
#idMobileHeader {
 display:block;
 height:54px;
 padding:15px 0px;
 background-color:#001836;
 text-align:center;
 position:absolute;
 z-index:100;
 width:100%;
}

#idMobileLogo {
}

#idMobileHeaderInner {
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%; 
 height:2px;
}

#idMenu {
 display:block;
 float:right;
 padding:10px;
 background-color:#000e1f;
 position:relative;
 z-index:100;
 top:17px;
 margin-right:17px;
}
*/

/*
#idMenuBtn {
 cursor:pointer;
 font-family:gotham,arial;
 font-weight:bold;
 float:right;
}

#idMenuItemsWrap {
 display:none;
}
*/

#idMenu {
 display:block;
 float:right;
 padding:10px;
 background-color:#000e1f;
 /*margin-top:-67px;*/
 position:relative; /*absolute;*/
 z-index:100;
 top:17px;
 margin-right:17px;
}

#idMenuBtn {
 cursor:pointer;
 font-family:gotham,arial;
 font-weight:bold;
 float:right;
}

#idMenuItemsWrap {
 display:none;
}
/*-- --*/
#idMobileHome {
 display:block;
 margin-top:84px;
}
#idRow_1 {
 width:100%;
 height:200px;
 cursor:pointer; 
 background-image:url('../images/home/models.jpg');
 background-position:center; 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}
#idRow_2 {
 width:100%;
 height:200px;
 cursor:pointer; 
 background-image:url('../images/home/byot.jpg');
 background-position:center; 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}
#idRow_3 {
 width:100%;
 height:200px;
 cursor:pointer; 
 background-image:url('../images/home/warranty.jpg');
 background-position:center; 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}
#idRow_4 {
 width:100%;
 height:200px;
 cursor:pointer; 
 background-image:url('../images/home/part_service.jpg');
 background-position:center; 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}
/*-- BOATMATE (END) --*/

/*----------------------------------------------------------------------------*/

#idSplashWrapper {
 position:fixed;
 left:0px;
 text-align:center;

 width:100%;
 min-width:600px;
 height:600px;
 background-image:url('../images/dot_pattern.png');
 background-repeat:repeat;
 background-color:transparent;
}

#idSplashLogo {
 margin-top:300px;
 z-index:1;
 width:47.03%;
 max-width:903px;
 min-width:343px;
}
/*
header {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:90px;
 background-color:transparent;
 z-index:3; 
 overflow:hidden;
}
*/
header {
 position:absolute;
 top:0px;
 left:50%;
 height:90px;
 background-color:transparent;
 z-index:3; 
 transform: translateX(-50%);
 /*overflow:hidden;*/
}

#idMenuItem_1 { /* LOGO */
 position:absolute;
 top:0px;
 left:263px;
 cursor:pointer;
 /*width:108px;*/
 width:203px;
 height:54px;
}
#idMenuItem_6 {
 position:absolute;
 top:13px;
 left:720px; /*675px;*/
 z-index:100;
}
#idMenuItem_5 {
 position:absolute;
 top:12px;
 left:690px;/*632px;*/
}
#idMenuItem_7 {
 position:absolute;
 top:10px;
 left:632px;
}
#idMenuItem_4 {
 position:absolute;
 top:10px;
 left:543px;
}
#idMenuItem_3 {
 position:absolute;
 top:10px;
 left:106px;
}
#idMenuItem_2 {
 position:absolute;
 top:10px;
 left:0px;
}

.clsMenuItem {
 text-decoration:none;

 font-family: gotham, arial; /* 'Oswald', sans-serif; */
 font-size: 9pt;
 font-weight:normal;
 text-transform:uppercase;
 /* font-style:italic; */

 /*
 padding:10px;
 margin-right:5px;
 float:right;
 */
 background-color:transparent;
 color:white;
 text-align:center;
 cursor:pointer;
 /*
 background-image:url('../images/arrow.png');
 background-repeat:no-repeat;
 background-position:center -50px;
 
 -o-transition:.4s;
 -ms-transition:.4s;
 -moz-transition:.4s;
 -webkit-transition:.4s;
 transition:.4s;
 */ 
}

.clsMenuItem:hover {
 /*
 background-color:#c43700;
 background-position:center -4px;
 */
}

section {
 width:100%;
 min-width:600px;
 min-height:600px;
 /*background-color:lightgray;*/
 z-index:2;
 position:relative;
 text-align:center;
}



#idSection_1b {
 margin-top:150px; /*50px;*/
 min-height:400px; 
 /*-- BOATMATE --*/
 overflow-y:auto;
 background-color:white;
 /*background-image:url('../images/this.jpg');*/
 
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
 
 /*-- BOATMATE (END) --*/
}

#idTagline {
 width:100%;
 height:100px;
 background-color:black;
 color:white;
 float:left;
 /*margin-top:500px;*/
 position:relative;
}
#idTaglineInnerWrap {
 text-align:center;
 padding:5px 100px;
 font-family: 'Oswald', sans-serif;
 font-size: 30pt;
 font-weight:normal;
 font-style:italic;
 line-height:60px;
}
.clsQuote {
 font:13pt arial;
 font-style: italic;
}

/*--*/
.clsSectionPic {
}

#idSection_2 {
 clear:left;
} 
#idSection_2_Pic {
 width:100%;
 background-color:white;
 background-image:url('../images/this.jpg');
 background-repeat:no-repeat;
 background-position:center 0px;
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}
 
#idSection_3_Pic { 
 width:100%;
 background-color:white;
 background-image:url('../images/sample.jpg');
 background-repeat:no-repeat;
 background-position:center 0px;
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover;
 /*-- RES (END) --*/ 
}

#idSection_4_Pic {  
 width:100%;
 background-color:white;
 background-image:url('../images/kicks.jpg');
 background-repeat:no-repeat;
 background-position:center 0px;
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover; 
 /*-- RES (END) --*/ 
}

#idSection_5_Pic {
 width:100%;
 background-color:white; 
 background-image:url('../images/ass.jpg');
 background-repeat:no-repeat;
 background-position:0px 0px;
 /*-- RES --*/
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; 
 background-size: cover; 
 /*-- RES (END) --*/  
}

#idSection_6 {
 background-color:#565656; 
 background-image:url('../images/gradient.png');
 background-repeat:repeat-x;
 background-position:bottom;
 min-height:680px;
}
/*--*/

.clsContentBlock {
 min-height:260px;
 background-color:white;
 padding:20px 100px;
}

/*-- FOOTER --*/
#idBlocker {
 background-image:url('../images/byot/black_sheer.png');
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 z-index:100;
 display:none;
}

#idArrowToggle {
 position:absolute;
 top:0px;
 left:600px;
 width:32px;
 bottom:0;
 background-color:#1a8cb3;
 z-index:98;
 cursor:pointer;
}
#idArrowToggle:hover{
 background-color:white;
}

#idArrowToggle2 {
 position:absolute;
 top:0px;
 left:600px;
 width:32px;
 bottom:0;
 z-index:99;
 cursor:pointer;
 background-color:#1a8cb3;
 filter: alpha(opacity=0); 
 
 -o-transition:.6s;
 -ms-transition:.6s;
 -moz-transition:.6s;
 -webkit-transition:.6s;
 transition:.6s; 
}
#idArrowToggle2:hover{
	background-color: white;
}
#idArrowToggle:after,
#idArrowToggle2:after {
	content:"";
	width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid white;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	transition: border-color;
}
body.menuOpened #idArrowToggle:after,
body.menuOpened #idArrowToggle2:after {
	border-left: 0px solid white;
	border-right: 20px solid white;
}
body.menuOpened #idArrowToggle:hover:after,
body.menuOpened #idArrowToggle2:hover:after {
	border-right-color: #1a8cb3;
	border-left-color: #1a8cb3;
}
#idArrowToggle:hover:after,
#idArrowToggle2:hover:after {
	border-left-color: #1a8cb3;
	border-right-color: #1a8cb3;
}

#idArrowToggle2:hover {
 opacity: 100;
 filter: alpha(opacity=1);
}

#idToolWrap {
 float:left;
}

.clsContainer {
 width:560px;
 height:0;
 border:none;
 border-top:1px solid lightgray;
 overflow:hidden;
 margin-top:10px;
 margin-bottom:10px;
 padding:0; 
 background-color:transparent;
 box-sizing:border-box;
 transition:height .4s;
}

.clsContainerOpen {
 width:560px;
 height:500px;
 border-top:1px solid lightgray;
 border-bottom:1px solid lightgray; 
 overflow:auto;
 margin-top:10px;
 margin-bottom:10px;
 padding:10px;
 background-color:#113448;
}

/*footer {*/
#idNewFooter {
 clear:both;
 width:100%;
 height:42px;
 background-color:black;
 color:white;
 z-index:2;
 position:relative;
 text-align:center;
 position:fixed;
 bottom:0;
}

#idFooterInnerWrapB {
 padding:1px 50px 0px 50px;
 font-size:8pt;
}

#idFooter{
	transition:transform .6s;
	transform: translateX(-600px);
}


body.menuOpened #idFooter{
 transform: translateX(0);
 }



#navbuttons{
	position:absolute;
	right:10px;
	bottom:10px;
	text-align:right;
}
#navbuttons img{
	float:right;
	cursor:pointer;
	margin-top:11px
}

#idFooter {
 width:600px;
 /*min-height:30px;*/
 background-color:#001b30;
 color:white;
 /*z-index:2;*/
 
 /*
 position:relative;
 */
 position:absolute;
 top:0px;
 /*left:0px;*/
 /* z-index:2; */ 
 
 z-index:99;
 height:100%;
 min-height:950px; 
 
 /* text-align:center; */
 border-right:2px solid white;
}

#idFooterInnerWrap {
 background-color:#001b30;
 float:left;
 width:100%;
}

#idFooterInnerWrap2 {
 padding:1px 8px 0px 7px;
 font-size:8pt;
 background-color:#001b30;
 
 margin:0 auto;
}

/*-- FOOTER (END) --*/

#idContact {
 padding:5px 0px 0px 0px;
}

/*----------------------------------------------------------------------------*/

/*-- BOATMATE --*/

/*
	#idLeftBar {
 display:none;
 position:relative;
 float:left;
 width:100px;
 height:54px;
 background-image:url('../images/menu_bg_sides.png');
 background-repeat:repeat-x;
 backround-position:center 2px;
}

#idRightBar {
 display:none;
 position:relative;
 float:left;
 width:100px;
 height:54px;
 background-image:url('../images/menu_bg_sides.png');
 background-repeat:repeat-x;
}
*/

#idMiddleBar {
 display:none;
 position:relative;
 float:left;
 width:730px;
 height:54px;
 background-image:url('../images/menu_bg_mid.png');
 background-repeat:no-repeat;
}
#idMiddleBar:before,
#idMiddleBar:after{
	content:"";
	background-color:rgba(0,25,56,.65);
	position:absolute;
	width:50vw;
	right:100%;
	top:0;
	height:50px;
}
#idMiddleBar:after{
	left:100%;
	right:auto;
}
/*--------------------*/

@media screen and (min-width: 750px) { /* Above 750px screen size */

	#idChooseBtn {
	 position:relative;
	 float:left;
	 margin-left:-188px; /*-25px;*/
	 margin-top:0px; 
	}


	#idContentWrap {
	 margin-top:190px;
	}

	#idContentInner {
	 padding:0px;
	}

	#idMenuWrap {
	 height:150px;
	 overflow:hidden;
	 position:fixed;
	 /*background-image:url('../images/menu_bg.jpg');*/
	}

	header {
	 top:35px;
	}

	#idMobileHeader {
	 display:none;
	}

	#idLeftBar {
	 display:block;
	}
	#idMiddleBar {
	 display:block;
	}
	#idRightBar {
	 display:block;
	}
	#idSecondaryMenu{
	 display:block;
	}
	#idMenu {
	 display:none;
	}

	#idMenuItem_6 {
	 display:block;
	}
	#idMenuItem_5 {
	 display:block;
	}
	#idMenuItem_4 {
	 display:block;
	}
	#idMenuItem_3 {
	 display:block;
	}
	#idMenuItem_2 {
	 display:block;
	}

	#idMobileHome {
	 display:none;
	}

	#idVideo {
	 display:inline-block; 
	 width:100%; 
	 position:relative; 
	 z-index:0;
	}

	#idOverlay {
	 display:block;
	 width:100%; 
	 position:absolute; 
	 top:0px; /* 50 */ 
	 left:0; 
	 z-index:1;
	 background-position:center;
	 /*-- RES --*/
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover; 
	 background-size: cover;
	 /*-- RES (END) --*/ 
	}

	#idSection_1 {
	 overflow-y:hidden;
	}

}

#idBYOTRear,
#idBYOTSide{
	position:relative;
}


.printView{
	background-color: white;
	color: black;
}

.printView #idBYOTRear,
.printView #idBYOTSide{
    display: block !important;
    transform: scale(.5) !important;
    position: absolute !important;
    top: 100px;
	width: 4in !important;
}
.printView #idBYOTSide{
	top: 600px;
}

.printView #idFooter {
    display:none;
}

.printView #idHeader .clsMenuItem,
.printView #idSecondaryMenu,
.printView #idChooseBtn{
	display:none;
}

.printView #idSection_1{
	background-color: transparent !important;
	background-image: none !important;
	left:0 !important;
	
}

.printView #idContentWrap{
	margin:0 !important;
}



.appIconsHolder{
	position:fixed;
	right:10px;
	top:45%; 
	width:76px;
	z-index: 999;
	text-align:right;
	transform:translateY(-50%);
    line-height: 1.1em;
}
.appIconsHolder span{
	display:none;
}
.appIconsHolder a{
	display:none;
	cursor:pointer;
	margin:5px 0;
	border-radius:10px;
}
.appIconsHolder img{
	width:100%;
}
.appScreenshotHolder{
	position: fixed; 
	z-index: 999;
	right: 110px;
	top: 45%;
	transform:translateY(-50%);
}
.appScreenshotHolder img{
	display:none;
	width:250px;
}
.rainbow{
	 animation: hue-rotate 2.5s linear infinite;
}
@keyframes hue-rotate {
  from {
    filter:hue-rotate(0deg) brightness(300%);
  }
  to {
    filter:hue-rotate(360deg) brightness(300%);
  }
}

#printList{
	display:none;
}

body.view-print{
	background-color: white;
}
body.view-print #idSecondaryMenu,
body.view-print #idLeftBar,
body.view-print #idRightBar,
body.view-print #idFooter,
body.view-print #idNewFooter,
body.view-print #navbuttons,
body.view-print #idMenuBtn,
body.view-print .frameShadow,
body.view-print .appIconsHolder,
body.view-print .appScreenshotHolder
{
	display:none;
}
body.view-print #idMenuWrap{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background-color: #021d37;
	height: 1in;
}
	
body.view-print .clsMenuItem{
	display:none;
}
body.view-print #idSection_1{
	width:3.5in;
	height: 100%;
	left:0;
	background:white !important;
}
body.view-print .layers.side{
	left:0 !important;
	top:1.5in !important;
	height: 3in !important;
	width: 3in !important;
}
body.view-print .layers.rear{
	left:0 !important;
	top:5in !important;
	height: 3in !important;
	width: 3in !important;
}
body.view-print #printList{
	display:block;
	position:absolute;
	top:1.5in;
	left:3.25in;
	width:3.75in;
	min-height: 7.5in;
	border-left:2px solid black;
	color:black;
	padding-left:.25in;
}
body.view-print #printList h2{
    font-family: 'Oswald', sans-serif;
    font-size: 20pt;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 50pt;
    color: #5a6b7d;
    margin-bottom: 0px;
    text-transform: uppercase;
}



/*-- BOATMATE (END) --*/

/* fancybox overrides */
.fancybox-container{
	z-index: 100 !important;
}
.swal2-popup{
	border-radius:0 !important;
}