*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;  font-family: 'Rubik', sans-serif; background: #e9edf0;
}
body {min-height:100%;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
}

h1{  font-size: 28pt; padding: 0 20px;}
h2{  font-size: 22pt; padding: 0 20px;}
.articles h2{padding: 0;}
p{padding: 10px 0;}
p.main{font-size: 16pt;}
p.cit{text-align: right; font-style: italic;}
p.falarge{font-size: 32pt;}

#page{
    width: 100%; }

.menu{margin-top: 20px;}
.menu .logo h1{float:left; font-size: 14pt;}
.menu .logo h1 strong{font-size: 20pt; display: block;}
.menu .menuright{float:right; padding: 30px 0px 0 0;}


.btn{
    padding: 12px 18px;
    text-decoration: none;
    font-size: 12pt;
    border: none;
    color: white;
    border-radius: 5px;
    background: #253335;
    cursor: pointer;
    display: inline-block;
    float: none;
    margin: 10px 10px 10px 0;
    transition: all 200ms ease-in-out;
}
.btn:hover{box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 15%);}
.btn.green{background: #2ec667; color:white;}
.btn.white{background: white; color:#253335;}
.btn.red{background: #e74d54; color:white;}

.btn.large{font-size: 18pt; font-weight: bold; padding: 10px 30px; margin: 40px 0 0 20px; display: inline-block;}
.btn.large span{display:block; font-size: 12pt; padding: 10px 0;}
.btn.flright{float: right; display: block; margin: 0 auto;}

.content{    margin: 0 auto 20px auto;max-width: 1024px;padding: 60px 20px;color:#2d2d2d;}


.itemslist{ display: grid;  grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px; }

.item{ transition: all 200ms ease-in-out;   }
.item.active0{opacity: .5;}
.item .item-in{ padding: 20px ; transition: all 200ms ease-in-out; height: 100%;   display: flex; flex-direction: column; position: relative;

    border-radius: 5px;
    box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 15%);}
.item:hover .item-in{    box-shadow: 0px 10px 40px 0px #00000014; transform: translate(0px,-4px); }
.item img{max-width: 100%; }


.foot{text-align: center; width: 100%; opacity: .3; font-size: 9pt; padding: 20px  0;}
.foot a{color:black;}
.foot img{max-width: 120px; margin: 10px;}



.modal .row .colin.mvR{ margin: 0;  }
.modal .row .colin.mvL{ margin: 0 ;  }


@media screen and (max-width: 1020px) {
    .itemslist{  grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 720px) {
    .itemslist{  grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 420px) {

    .itemslist{  grid-template-columns: repeat(1, 1fr); }
}



@keyframes loader {
    0% {stroke-dashoffset: 141; opacity: 0;}
    5%{opacity: 1;}
    50% {stroke-dashoffset: 0;}
    95%{opacity: 1;}
    100% {stroke-dashoffset: -141; opacity: 0;}

}


@keyframes blink {
    50% {opacity: .5}

}

.clear {
    clear: both; }

.openphoto{margin: -40px -40px 40px -40px;background-size: cover;background-position: center;height: 220px;}

.content-under{
    margin: 40px 0px 40px 0px;
    background-color: white;
    overflow: hidden;
    color: black;
    font-size: 10pt;
    padding: 40px 60px 30px 40px;
    border-radius: 5px;
    box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 15%);
}



.content-under .logo{ width: 200px; }
 h1{font-size: 24pt; margin:0; padding: 0 0 20px 0;}
 label{display:block; font-size: 12pt;padding: 5px 0;}
 span.help{display:block; font-size: 9pt; opacity: .6;}
 .btn{padding: 15px 15px;  float:right;}
 .formrow{display:block;  margin: 0; padding: 0 0 20px 0;}
 .formrow .alert{display:none;    float: right;
     position: relative;
     margin: -42px 16px 0px 0;
     color: #bf0909;}
 .formrow.alert .alert{display:block;}
 .formrow.alert input{border-color:#bf0909;}
 .mainalert{color:#bf0909;}

 select{-webkit-appearance: none; background-image: url(/img/arrow.svg);        background-position: right top;     background-repeat: no-repeat;     background-size: 50px 50px; }
 input,  textarea,  select{padding: 15px 15px; border: none;  font-family: 'Rubik', sans-serif;  font-weight:bold; font-size: 12pt; display: block; border-radius: 5px; width: 100%; margin: 0 auto 10px auto;
    border-style:solid; border-width: 1px; border-color: #9aa1b5;    background-color: #f9f9fa;}
 input:focus,  textarea:focus,  select:focus{ outline:none; border: 1px solid #253335; }
 select:focus{ background-image: url(/img/arrow-focus.svg);  }
input:-webkit-autofill {box-shadow: 0 0 0 30px #f9f9fa inset !important;}

.bottomnote{opacity: .5; font-size: 10pt; text-align: center;}
.links a{opacity: .5; font-size: 10pt; text-align: center; color:black; }

.service-picker{}
.service-picker .service{    border-style: solid;
    border-radius: 5px;
    cursor: pointer;
    transition: all 300ms ease-in-out;
    margin: 0 0 10px 0;
    padding: 15px;
    border-color: #e0e0e0;
    background: #f7f7f7;
    border-width: 2px;}
.service-picker .service:hover{    box-shadow: 0px 4px 6px 1px #0000000f;transform: translate(0, -2px);}
.service-picker .service.nohover{cursor: auto; }
.service-picker .service.nohover:hover{    box-shadow: none;transform: none;}
.service-picker .service.nohover p{display: none;}
.service-picker .service.nohover .label{display: none;}
.service-picker .service .service-control{padding: 0 0 10px 0;}
.service-picker .service .service-control span{float:right; cursor: pointer; text-decoration: underline; }

.service-picker .service.active{    border-color: #2b3033;    background: #2b2f33; color:white;}
.service-picker .service .servicecounter{  display:none;}
.service-picker .service.active .servicecounter{  display:block;}
.service-picker .service .label{    font-size: 9pt;   color: white;;  background: #0c72b7;    padding: 5px 7px;    margin: -5px 0 0 -22px;    display: inline-block;    transform: translate(0px, -4px);    border-radius: 6px;}


.service-picker .service .servicecounter{ }
.service-picker .service .servicecounter .bikecontrolline{ padding-right: 57px;  position: relative}
.service-picker .service .servicecounter .bikecontrolline .bikecontrol_minus{position: absolute;top: 0;right: 0;margin: 0;padding: 17px;background: #ffffff21;}
.service-picker .service .servicecounter .btn.btnadd{ background: #ffffff21;  margin: 0;}
.service-picker .service .servicecounter.numcontrol{ padding: 0 57px; position: relative;}
.service-picker .service .servicecounter .btnmin{ background: #ffffff21; position: absolute;top: 0;left: 0;margin: 0;padding: 17px;}
.service-picker .service .servicecounter .btnpls{ background: #ffffff21;  position: absolute;top: 0;right: 0;margin: 0;padding: 17px; }
.service-picker .service .servicecounter .select{ }
.service-picker .service .servicecounter .input{ text-align: center;  }

.pickedservice .extra-service-text{display:none;}
.pickedservice .h2{}
.pickedservice .p{}


.overfloat{height: 69px; margin: 0 -20px;}
.overfloat .floatbar{height: 69px; width: 100%; padding: 0 20px;}
.overfloat .floatbar .info{padding: 27px 0 20px 10px;}
.overfloat .floatbar.fixed{
    position: fixed;
    bottom: 0;
    background: #ffffffcf;
    backdrop-filter: blur(5px);
}

.service-picker .service h2{font-size: 16pt;padding: 0;margin: 0;}
.service-picker .service strong{    float: right;font-size: 16pt;}
.service-picker .service p{margin: 0;padding: 10px 0;}


.service-picker .service.extra-service{}
.service-picker .service.extra-service h2{font-size: 12pt;}
.service-picker .service.extra-service strong{font-size: 12pt;}


.content-over{margin: 0 0px 0 -20px;background-color: white;overflow: hidden;color: black;font-size: 10pt;padding: 40px;border-radius: 5px;box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 15%);}

.welcomehelp{    position: relative; margin: 25px 0 0 0;}
.welcomehelp span.num{       background: #e9edf0;display: inline-block;border-radius: 50%;font-size: 12pt;font-weight: bold;padding: 16px;width: 50px;height: 50px;text-align: center;position: absolute;top: 0;}
.welcomehelp strong.title{    padding: 16px 10px 0 58px;font-size: 12pt;margin: 0px 0 10px 0;display: block;}
.welcomehelp p{  padding: 0px 10px 0 58px; margin: 0;}

.welcomehelp .help{display:block;}
.welcomehelp .summary{display:none;}
.welcomehelp.show .help{display:none;}
.welcomehelp.show .summary{display:block;}
.welcomehelp.show .summary span.num{width: auto; border-radius: 50px; position: relative;}
.welcomehelp.show .summary .change{    float: right;cursor: pointer;text-decoration: underline;padding: 15px 0;opacity: .5;}
.welcomehelp.show .summary h2{margin: 0; padding: 0; font-size: 12pt; display: inline-block; }
.welcomehelp.show .summary .pickcnt{clear: both;margin: 10px 0 0 58px;}
.welcomehelp.show .summary strong{font-size: 12pt;}

.welcomehelp.show .summary p{ padding: 10px 0 0 0;}
.welcomehelp.show .summary .label{display: none;}

.datepick{margin: 20px -5px 0 -5px; transition: all 300ms ease-in-out;}
.datepick .navMonth{   transition: all 300ms ease-in-out; margin: 0 10px; background: #f7f7f7;width: 30px;height: 30px;display: block;border-radius: 50%;text-align: center;color: #2b3033;font-size: 16pt;padding: 3px;cursor: pointer;}
.datepick .navMonth:hover{box-shadow: 0px 4px 6px 1px #0000000f;transform: translate(0, -2px);}
.datepick .navMonth.mnthPrev{    float: left;}
.datepick .navMonth.mnthNext{    float: right;}
.datepick h3{    text-align: center;margin: 0;padding: 6px;}
.datepick table{ margin: 5px 0 0 0;   width: 100%; border-collapse: separate;border-spacing: 5px;}
.datepick table thead{opacity: .4;}
.datepick table th{font-weight: normal; font-size: 8pt;}
.datepick table td{ border-style: solid; text-align: center;border-radius: 5px;transition: all 300ms ease-in-out;margin: 0 10px 10px 0;padding: 15px;border-color: #e0e0e0;background: #f7f7f7;border-width: 2px;}
.datepick table td.no{opacity: 0;}
.datepick table td.selected{  border-color: #2b3033;    background: #2b2f33;     }
.datepick table td.selected{  border-color: #0c72b7;background: #045b96; color:white; }
.datepick table td.actv{cursor: pointer; font-weight: bold;}
.datepick table td.actv:hover{  box-shadow: 0px 4px 6px 1px #0000000f;transform: translate(0, -2px);}
.datepick table td.actv.selected:hover{   box-shadow: none;transform: none;}
.datepick table td.disabled{opacity: .4;}

.timepick{transition: all 300ms ease-in-out;}
.timepick h3{}
.timepick .timepicker{    border-style: solid;display: inline-block;width: 130px;text-align: center;border-radius: 5px;transition: all 300ms ease-in-out;margin: 0 10px 10px 0;padding: 15px;border-color: #e0e0e0;background: #f7f7f7;border-width: 2px;}
.timepick .timepicker.tmactv{cursor:pointer; font-weight: bold;}
.timepick .timepicker.tmactv:hover{  box-shadow: 0px 4px 6px 1px #0000000f;transform: translate(0, -2px);}
.timepick .timepicker.tmactv.selected:hover{    box-shadow: none;transform: none;}
.timepick .timepicker.selected{  border-color: #2b3033;    background: #2b2f33;    }
.timepick .timepicker.selected{   border-color: #0c72b7;background: #045b96; color:white;}
.timepick .timepicker.disabled{opacity: .4;}

#submittostep2{background: #045b96; }
#submittostep2:hover{background: #0c72b7; }

.inload{position: relative; opacity: .5;}
.inload:before{
    position: absolute;
    background: white;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -15pt;
    width: 35px;
    height: 30px;
    font-size: 20pt;
    text-align: center;
    padding-top: 5px;
    content: "\f1ce";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    animation: fa-spin 2s infinite linear;
}

.finishestimate{ transition: all 300ms ease-in-out;}
.finishestimate h3{}
.finishestimate p{padding: 0; margin: 0;}
.finishestimate .btn{float:right;}


#frm_type{

    padding: 15px 15px;
    border: none;
    font-family: 'Rubik', sans-serif;
    font-size: 12pt;
    display: block;
    border-radius: 5px;
    width: 100%;
    margin: 0 auto 10px auto;
    border-style: solid;
    border-width: 1px;
    border-color: #9aa1b5;
    background-color: #f9f9fa;
    color: #818181;

}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }

@media screen and (max-width: 720px) {


    .content-over {
        margin: 0 0px 0 0px;
    }
    .datepick table td {

        padding: 10px 5px;
    }

    .content{
        padding: 0 20px;
    }
    .timepick .timepicker {
        width: 120px;
        padding: 15px 5px;
    }

    .content-under,     .content-over {
    padding:  20px;
    }


    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  }
    .col-6 .list-box{ margin: 0 0 15px 0; }
    .col-2, .col-3 {  width: 50%;    }
}


@media screen and (max-width: 450px) {


}

@media screen and (max-width: 340px) {
    .col-2, .col-3 {  width: 100%;   }
    .col-1{  width: 50%;    }

}