/*fix elementor header z-index*/
.elementor-location-header{
    z-index: 9999;
    position: relative;
}
/*end fix*/

#popup-box2{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background-color: #bbb;
    z-index:1001;
    text-align:center;
}
#popup-box2{
    display:none;
}
#popup-box2 .box{
    width:100%;
    max-width:600px;
    position:relative;
    top:60px;
    color: #000;
    background-color: #fff;
    border-radius:0px;
    padding:60px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    font-family: "Work Sans", Sans-serif;
}
#popup-box2 .box h4{
    text-align: left;
    color: #000;
    font-size: 20px;
    margin-bottom: 4px;
}
#popup-box2 .box h2{
    font-size: 32px;
    line-height: 32px;
    max-width: 500px;
    color: #000;
    text-align: left;
}
#popup-box2 .box h4, #popup-box2 .box .boxed a {
    color: #000;
}
#popup-box2 .box form{
    margin-bottom:36px;
    text-align: center;
}
#popup-box2 .box form input.top,
#popup-box2 label{
    margin-top:24px;
    display:block;
}
#popup-box2 label{
    text-align: left;
}
#popup-box2 .box form input{
    border-radius:16px;
    background-color: #fff;
}
#popup-box2 .box form select{
    width:100%;
    padding:0.625em 0.4375em;
    border:1px solid #d1d1d1;
    border-radius:16px;
    color:#686868;
    background:#fff;
}
#popup-box2 .box form select:last-of-type{
    margin-bottom:24px;
}
#popup-box2 .box form input.half,
#popup-box2 .box form span.half{
    width:45%;
    display:inline-block;
    margin: 2%;
}
#popup-box2 .box form span.half{
    float: left;
}
#popup-box2 .box form button{
    color: #fff;
    background-color: #53688F;
    border-radius: 16px;
    border: 0;
}
#popup-box2 .box form .terms{
    margin-bottom:12px;
    font-size:11px;
}
#popup-box2 .box form .err{
    margin-bottom:12px;
    clear: both;
}
.ninja{
    display: none;
}

table#quote_info{
    border:0px;
    border-bottom: #000 1px solid;
    padding-bottom: 20px;
    margin-bottom: 6px;
}
table#quote_info td{
    border:0px;
    padding: 0;
    font-size:14px; 
}
table#quote_info td.thick{
    font-weight: 700;
}
.lineTotal{
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}
#buildaboat *{
    font-family: "Work Sans", Sans-serif;
}
#buildaboat{
    position:relative;
    padding-bottom:60px;
    display: flex;
    justify-content: center;
}
#bab_colBoat{
    max-width: 960px;
    margin-left: 50px;
    margin-right: 50px;
}
#bab_colOptions{
    max-width: 490px;
    min-width: 490px;
    margin-right: 50px;
}
#bab_colInfoOnly{
    max-width: 960px;
    padding-top: 40px;
    margin-left: 1vw;
    margin-right: 1vw;
}
.option_page{
    transition: opacity 1.0s linear, max-height .75s linear;
    max-height: 2999px;
    background-color: #FFF;
    overflow: hidden;
}
.option_page.ducked{
    max-height: 0px;
    transition: max-height 0s linear;
}
#op2,
#op3,
#op4,
#op5,
#op6,
#op7{
    opacity: 0;
}

#buildaboat h1{
    font-size: 1.8rem;
    margin-top: 10px;
    margin-bottom: 20px;
}

#buildaboat h1 span{
    font-weight: 500;
    font-size: 2.2rem;
}
#buildaboat h1 span sup{
    font-weight: 400;
    font-size: 1.3rem;
}

.boat-info{
    text-align:left;
    position:relative;
    padding-top:36px;
    padding-bottom:16px;
    padding-left:6px;
    padding-right:36px;
    z-index:998;
    display: flex;
    justify-content: space-between;
    gap:20px;
}
.boat-info h5{
    margin-bottom: 2px;
    font-size: 1.8rem;
}
.boat-info h6{
    font-size: 1.3rem;
}
.boat-info a:link,
.boat-info a:active,
.boat-info a:visited{
    font-size: 1.4rem;
    color: #6888C8;
    white-space: nowrap;
}
.boat-info p.copy{
    font-size: 11px;
    margin-top: 24px;
    line-height: 12px;
    text-align: justify;
}
.boat-info .pricing{
    min-width: 300px;
}




.artboard{
    /*background-image:url(https://www.visionelectricboats.com/wp-content/themes/astra-child/images/customboat/artboard.jpg);*/
    background-size:cover;
    margin-right:0px;
    position:relative;
    text-align:center;
}
.artboard img{
    max-width:100%;
    width: 100%;
    margin:auto;
}
.artboard .options {
    position: absolute;
    /* max-width: 1427px; */
    margin: auto;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
.artboard .options img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.dock{
    width:100%;
    height:auto;
    float:none;
    position:relative;
    z-index:999;
}
.dock h4{
    margin:0px;
    padding:10px 6px 6px 10px;
    font-size:14px;
    font-weight: 500;
}

.dock ul{
    margin:0px;
    padding:0px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}
.dock ul li{
    color:#474747;
    list-style:none;
    padding:10px 10px 26px 10px;
    border:#ccc 1px solid;
    border-radius: 5px;
    cursor:pointer;
    font-size:12px;
    line-height:13px;
    flex-basis: calc(33.33% - 12px);
    margin: 6px;
    min-height: 44px;
    position: relative;
}
.dock .big_group ul li{
    flex-basis: calc(50% - 12px);
}
.dock .icon_group ul li{
    min-height: 80px;
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.dock ul li.thin{
    padding:10px 10px 10px 10px;
}
.dock .icon_group ul li.thin{
    min-height: 60px;
    background-size: contain;
}

.dock ul li:hover,
.dock ul li.curr{
    box-shadow: #ccc 0px 0px 0px 3px;
}
.dock ul li span.puce{
    float: right;
    height:24px;
    width:24px;
    border-radius:12px;
    margin-top: -2px;
}
.dock ul li.dual span.puce{
    margin-top: -16px;
}
.dock .option_group ul li span.check{
    display:none;
    float:right;
    vertical-align:middle;
    height:19px;
    width:19px;
    border:#999 2px solid;
    border-radius:9px;
    margin-right:2px;
    background-color:#FFF;
}
.dock .option_group ul li span.on{
    display:inline-block;
    width:15px;
    height:15px;
    background-color:#666;
    border-radius:9px;
    border:#FFF 2px solid;
    display:none;
}
.dock .option_group ul li span.pricetag{
    display: block;
    position: absolute;
    bottom: 10px;
}
.dock .multiple ul li span.check,
.dock .multiple ul li span.on{
    border-radius:2px;
}
.dock ul li.startsoff{
    display: none;
}
.dock .option_group.invisible,
.dock .option_group.dependant{
    display: none;
}
.dock ul.dualcolor li{
    line-height: 16px;
}
.dock ul.dualcolor span.puce{
    right: 10px;
    top: 12px;
    position: absolute;
    width: 16px;
    height: 16px;
}
.dock ul.dualcolor span.puce+span.puce{
    top: 30px;
}
.dock .texture_group ul li{
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: none;
    border: none;
    padding-top: 44px;
    padding-bottom: 0px;
    max-width: 151px;
}

/*Price tag*/
.pricing span{
    color:#333;
    font-size: 26px;
    display: block;
}
.pricing .taxes span{
    font-size: 12px;
    line-height: 20px;
}
.pricing span.priceLabel,
.pricing span.notes{
    font-size: 17px;
    font-weight: 400;
}
.pricing span.paymentLabel{
    font-size: 66px;
    margin-bottom: 20px;
    margin-top: 9px;
    font-weight: 500;
}

#bab-pagenav{
    z-index: 99;
    position: relative;
}
#bab-pagenav .nav-bts{
    display: flex;
    justify-content: space-between;
}
#bab-pagenav a#page-prev{
    display: none;
}
#bab-pagenav .nav-bts>div{
    flex-basis: calc(50% - 10px);
}
#bab-pagenav .nav-bts a{
    color: #fff;
    background-color: #53688F;
    text-align: center;
    display: block;
    width: 100%;
    border-radius: 16px;
    padding: 20px;
    font-weight: 400;
    font-size: 17px;
}
#bab-pagenav .steps-flex{
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}
#bab-pagenav .steps-flex>div{
    flex: 1;
}
#bab-pagenav .step-flex{
    display: flex;
    margin: 4px;
}
#bab-pagenav .step-flex div{
    height: 4px;
    width: 100%;
    background-color: #ccc;
    margin: 2px;
}
#bab-pagenav .step-flex div.curr{
    background-color: #53688F;
}
#bab-pagenav .step-flex div.completed{
    background-color: #9eb9e5;
}
#bab-pagenav .steps-flex h5{
    font-weight: 300;
    font-size: 14px;
    margin: 6px;
}

/*colors*/
li.bg_bat{
    background-image: var(--wpr-bg-852d9e61-1721-400f-a8e5-aebeb6966c7b);
}
li.bg_den{
    background-image: var(--wpr-bg-67d984c4-4e9a-41ba-890e-0991b9bc0a70);
}
li.bg_dot{
    background-image: var(--wpr-bg-dab8fa0b-df71-46f7-8572-6e74425e7594);
}
li.bg_hor{
    background-image: var(--wpr-bg-2eadc688-1218-4828-af40-56c64b4dcacd);
}
li.bg_lag{
    background-image: var(--wpr-bg-8966dd39-3997-4806-8bd1-80da52de5d47);
}
li.bg_man{
    background-image: var(--wpr-bg-1d1d5fde-c68c-4ae6-ac27-9a00a50903d4);
}
li.bg_edge{
    background-image: var(--wpr-bg-4c3612db-2116-4268-8b04-01aedd99e9cd);
}
li.bg_beluga{
    background-image: var(--wpr-bg-f8761ef6-6bbb-4316-9251-060fa8a57907);
}
li.bg_nocanopy{
    background-image: var(--wpr-bg-eb75721f-0eab-40fc-8cfb-44dcf98a46d4);
}
li.bg_can{
    background-image: var(--wpr-bg-5ad6a56c-77e9-4ebc-b5fb-a84f8b245d22);
}
li.bg_mod{
    background-image: var(--wpr-bg-6aa204de-ec31-4c4b-b733-3ec7ec769c9f);
}
li.bg_canfull{
    background-image: var(--wpr-bg-ac7cf56d-306d-4645-8c8b-3a1fe97eb075);
}

span.puce.stitch_red{
    background-color: #DD0505;
}
span.puce.stitch_black{
    background-color: #212121;
}
span.puce.stitch_navy{
    background-color: #00467A;
}
span.puce.stitch_white{
    background-color: #FCFCED;
    border: #ccc 1px solid;
}
span.puce.stitch_grey{
    background-color: #9B9A84;
}
span.puce.stitch_charcoal{
    background-color: #595959;
}
span.puce.stitch_pink{
    background-color: #F90390;
}

span.puce.edge_bronze{
    background-color: #C17B46;
}
span.puce.edge_black{
    background-color: #3D3E3F;
}
span.puce.edge_beige{
    background-color: #F9F8CD;
    border: #ccc 1px solid;
}
span.puce.edge_gunmetal{
    background-color: #697C8C;
}
span.puce.edge_yellow{
    background-color: #FFFF00;
}
span.puce.edge_purple{
    background-color: #6C14C9;
}
span.puce.edge_red{
    background-color: #DD0505;
}
span.puce.edge_chalk{
    background-color: #FCFCED;
    border: #ccc 1px solid;
}
span.puce.edge_navy{
    background-color: #0037FF;
}
span.puce.edge_orange{
    background-color: #FF6D00;
}
span.puce.edge_titanium{
    background-color: #9B9A84;
}
span.puce.beluga_red{
    background-color: #DD0505;
}
span.puce.beluga_black{
    background-color: #3D3E3F;
}
span.puce.beluga_celestial{
    background-color: #084D7C;
}
span.puce.beluga_purewhite{
    background-color: #F9F9F9;
    border: #ccc 1px solid;
}
span.puce.beluga_offwhite{
    background-color: #F9F7E4;
    border: #ccc 1px solid;
}
span.puce.beluga_dune{
    background-color: #E2C66A;
}
span.puce.beluga_pearlgrey{
    background-color: #BCBCBC;
}
span.puce.beluga_pink{
    background-color: #F90390;
}
span.puce.beluga_ochre{
    background-color: #933D0C;
}

span.puce.c-siw{
    background-color: #f4f4f4;
    border: #ccc 1px solid;
}
span.puce.c-cob{
    background-color: #282C52;
}
span.puce.c-lib{
    background-color: #3B83BD;
}
span.puce.c-dug{
    background-color: #7D7F7D;
}
span.puce.c-ang{
    background-color: #293133;
}
span.puce.c-stg{
    background-color: #8B8C7A;
}
span.puce.c-puo{
    background-color: #F44611;
}
span.puce.c-hvp{
    background-color: #DE4C8A;
}
span.puce.c-stb{
    background-color: #030F60;
}
span.puce.c-fig{
    background-color: #31372B;
}
span.puce.c-lug{
    background-color: #00BB2D;
}
span.puce.c-mog{
    background-color: #646B63;
}
span.puce.c-lig{
    background-color: #84C3BE;
}
span.puce.c-trr{
    background-color: #CC0605;
}
span.puce.c-mab{
    background-color: #4C2F27;
}
span.puce.c-bab{
    background-color: #99D6EA;
}
span.puce.c-skb{
    background-color: #0743FF;
}
span.puce.c-pec{
    background-color: #763C28;
}
span.puce.c-bei{
    background-color: #C2B078;
}
span.puce.c-blp{
    background-color: #6C4675;
}
span.puce.c-sqg{
    background-color: #78858B;
}
span.puce.c-jeb{
    background-color: #0A0A0A;
}
span.puce.c-mig{
    background-color: #20603D;
}
span.puce.c-suy{
    background-color: #F3DE38;
}


span.puce.multi{
    background-color:#515151;
}span.puce.gray{
    background-color:#AFAFAF;
}span.puce.navy{
    background-color:#38498D;
}span.puce.white{
    background:transparent;
    background-color:#FFF;
    color:#474747;
    border: #ccc 1px solid;
}span.puce.black{
    background:transparent;
    background-color:#000;
    color:#FFF;
}span.puce.blue{
    background:transparent;
    background-color:#00F;
}span.puce.green{
    background:transparent;
    background-color:#030;
}span.puce.pink{
    background:transparent;
    background-color:deeppink;
}span.puce.red{
    background:transparent;
    background-color:#F00;
}span.puce.grey{
    background:transparent;
    background-color:#CCC;
}span.puce.lgrey{
    background:transparent;
    background-color:#CCC;
}span.puce.dgrey{
    background:transparent;
    background-color:#666;
}span.puce.bblue{
    background:transparent;
    background-color:#3CF;
}span.puce.cblue{
    background:transparent;
    background-color:#036;
}span.puce.ochre{
    background:transparent;
    background-color:#930;
}span.puce.dune{
    background:transparent;
    background-color:#963;
}span.puce.mahogany{
    background:transparent;
    background-color:#630;
}span.puce.carbonfiber{
    background:transparent;
    background-color:#333;
}span.puce.marine{
    background:transparent;
    background-color:#009;
}span.puce.off-white{
    background:transparent;
    background-color:#CCC;
}span.puce.brown{
    background:transparent;
    background-color:#AC8864;
}span.puce.wood{
    background:transparent;
    background-color:#630;
}


.mobileonly{
    display: none;
}
@media screen and (max-width: 1279px){
    #buildaboat{
        flex-wrap: wrap;
    } 
    #bab_colBoat{
        max-width: 100%;
    }
    #bab_colOptions{
        max-width: 100%;
        margin-left: 50px;
    }
    .mobileonly{
        display: flex;
    }
    #bab_colBoat .boat-info{
        display: none;
    }

}
@media screen and (max-width: 960px){ 
    #bab_colBoat{
        margin-right: 16px;
        margin-left: 16px;
    }
    #bab_colOptions{
        margin-right: 16px;
        margin-left: 16px;
    }
    .boat-info{
        flex-direction: column;
    }
    table{
        margin-top: 30px;
    }

}
@media screen and (max-width: 520px){ 
    #bab_colOptions{
        margin-right: 0px;
        margin-left: 0px;
        padding-left: 2px;
        padding-right: 6px;
        min-width: 0;
    }
    .dock ul li{
        flex-basis: calc(33.33% - 4px);
        margin: 2px;
    }
    #bab-pagenav .nav-bts{
        padding: 8px;
    }
}

/*ELEMENTOR Elements*/
#conclusion{
    display: none;
}
#thankyou{
    display: none;
}
#thankyou h2{
    text-align: center;
    margin-top: 12px;
    margin-bottom: 2px;
}
#thankyou h3{
    text-align: center;
    margin-bottom: 22px;
}