html, body{
      font-family: var(--font), arial;
      font-weight: 400;
      font-size: 13pt;
      line-height: 1.5;
      margin: 0;
      padding: 0;
      background: var(--blue);
      color: white;
}

a{
      cursor: pointer;
      color: #fff;
      text-decoration: none;
}

input, textarea{
      font-family: var(--font);
      color: black;
      font-size: 13pt;
      font-weight: 300;
}

a:hover{
      color: var(--yellow);
}

#top{
      background: url('/images/template/light-half.png') center bottom no-repeat;
}

#logo{
      float: left;
      width: 340px;
      height: 50px;
      line-height: 50px;
      font-size: 28pt;
      margin: 80px 0 0 0px;
      font-weight: 200;
      text-align: left;
}

.btn:hover{
      filter: brightness(115%);
}

.container{
      width: calc(100% - 30px);
      max-width: 1370px;
      margin: 0 auto;
      text-align: center;
      padding: 0 15px;
}

#top .container{
      max-width: 100%;
}

#menu{
      text-align: right;
      padding: 85px 35px 25px 0;
      line-height: 30px;

}

#menu a{
      font-size: 13.5pt;
      font-weight: 300;
      margin: 0 15px;
      color: white;
}

#menu a:hover{
      text-decoration: underline;
}

#topSpace{
      height: 55px;
}


#webDesc{
      float: left;
      width: calc(50% - 40px);

      font-size: 55px;
      line-height: 55px;
      text-transform: uppercase;
      color: var(--orange);
      font-weight: 600;
      margin-top: 50px;
      display: table;
      cursor: default;
}

#webDescText{
      padding-left: 40px;
      vertical-align: middle;
      display: table-cell;
}

#webDesc b{
      display: block;
      font-size: 90px;
      line-height: 100px;
      color: var(--yellow);
      font-weight: 800;
}

#webDescLine{
      /*width: calc(50% - 40px); */
      width: 25%;
      display: table-cell;
}

#webDescLine div{
      height: 186px;
      border-radius: 0 93px 93px 0;
      background: var(--yellow);
      height: 186px;
      width: 100%;
}

#webImg{
      width: calc(50% - 40px);
      float: right;
      height: 306px;
      border-left: 10px solid var(--yellow);
      border-radius: 16px 0 0 16px;
      background: var(--yellow);
}

#webImg div{
      width: 100%;
      height: 100%;
      background: url('/images/template/main.jpg') center center no-repeat;
      background-size: cover;
      border-radius: 16px 0 0 16px;
}

#productDesc{
      font-size: 15pt;
      font-weight: 500;
      margin: 80px 30px 60px 30px;
      text-align: center;
      cursor: default;
}

#productMenu{


}

.container{
      width: 90%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
}

#productMenu a{
     width: 20%;
     display: block;
     float: left;
     margin: 20px 0;
     line-height: 20px;
     font-weight: 500;
     font-size: 12pt;
     text-align: left;
}

#productMenu a i{
      float: left;
      width:  20px;
      height: 20px;
      line-height: 20px;
      background: white;
      border-radius: 50%;
      text-align: center;
      color: var(--blue);
      margin-right: 10px;
      font-style: normal;
}

#productMenu a:hover i{
      background: var(--yellow);
      color: white;
}

#productMenuLabel{
      background: #FDBF16;
      padding: 0 15px;
      height: 70px;
      display: inline-block;
      border-right: 1px solid #EFB91B;
      font-size: 14pt;
}

#createDesc{
      text-align: center;
      margin: 50px 0;
}

#createBtn, .btn{
      margin: 0px auto 45px 0;
      background: var(--yellow);
      color: white;
      text-transform: uppercase;
      padding: 0px 25px;
      border-radius: 27px;
      height: 54px;
      line-height: 54px;
      display: inline-block;
      font-weight: 500;
}

.btn{
      height: 44px;
      border-radius: 22px;
      line-height: 44px;
      margin-bottom: 0;
}

#createBtn i, .btn i{
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-style: normal;
      color: var(--yellow);
      border-radius: 50%;
      background: white;
      float: left;
      text-transform: none;
      font-weight: 500;
      margin: 7px 12px 0 -16px;
      text-align: center;
}

#createBtn:hover, .btn:hover{
      color: white;
}

#createBtn:hover i, .btn:hover i{
      color: var(--yellow);
}

.btnAddToQuote i{
      font-family: arial;
      font-weight: 600;
      font-size: 18pt;
}

.btn i{
      width: 32px;
      height: 32px;
      line-height: 30px;
      margin: 6px 12px 0 -18px;
}

#manualDesc{
      text-align: center;
      font-size: 13pt;
      font-weight: 300;
      margin-bottom: 150px;
}

#manualDesc a{
      text-decoration: underline;
}

h2{
      margin: 80px auto;
      text-align: center;
      font-size: 24pt;
      font-weight: 600;
      text-transform: uppercase;
}

#howWeWork{
      margin: 120px auto 220px auto;
      width: calc(100% - 40px);
      cursor: default;
}

#howWeWork .step{
      width: 25%;
      float: left;

}

#howWeWork .stepNr{
      width: 140px;
      height: 140px;
      line-height: 140px;
      border-radius: 50%;
      font-size: 70px;
      color: #4d5a69;
      font-weight: 600;
      text-align: center;
      float: left;
      margin-right: 20px;
      background: #65707D;

}

.stepDesc{
      padding-top: 30px;
      padding-right: 30px;
      font-weight: 200;
}

.stepDesc b{
      font-weight: 500;
      font-size: 15pt;
}

#quoteLabelContainer{
      margin: -74px auto 0 auto;
      height: 74px;

}
#quoteLabel{
      background: var(--darkblue);
      text-transform: uppercase;
      padding: 0px 50px;
      font-size: 22pt;
      font-weight: 600;
      line-height: 74px;
      display: inline-block;
      border-radius: 12px 12px 0 0;
}

#products{
      text-align: center;
      padding-top: 0;
}

.productImg{
      width: calc(50% - 30px);
      float: left;
}

.productLight .productImg{
      float: right;
}

.productDesc{
      width: calc(50% - 150px);
      float: right;
      text-align: left;
      padding: 70px 0;
      margin: 0 100px 0 0;
}

.productLight .productDesc{
      float: left;
      margin: 0 0 0 100px;
}

.productDesc h3{
      text-transform: uppercase;
      margin: 0 0 0 0;
      font-size: 20pt;
}

.productImg img{
      max-width: calc(100% - 80px);
      margin: 90px 40px;
}

.pIncluded{
      color: var(--orange);
      font-weight: 400;
      text-transform: uppercase;
      font-size: 16pt;
}

.pDesc{
      margin: 25px 0;
      font-weight: 300;
      font-size: 13pt;

}

.quote{
      display: none;
}

.quoteForm{
      background: var(--lightblue);
      padding: 10px;
      border-radius: 5px;
}

.qProductCell, .qProductQCell, .qFinishCell{
      background: white;
      border-radius: 5px;
      padding: 8px;
      width: calc(60% - 16px);
      float: left;
}

.qProductCell{
      position: relative;
      z-index: 5;
}

.qFinishCell{
      width: calc(100% - 20px);
      margin-bottom: 15px;
}

.qProductQCell{
      width: calc(40% - 16px);
      background: #C1C5CA;
      margin-left: -5px;
      padding-left: 13px;
}

.qRow span{
      display: block;
      font-size: 10pt;
      text-transform: uppercase;
      color: black;
}

.qRow{
      margin-bottom: 10px;
}

.qProductCell input, .qProductQCell input, .qFinishCell input, .qFinishCell textarea{
      width: calc(100% - 4px);
      padding: 0;
      height: 32px;
      line-height: 32px;
      background: transparent;
      border: 0;
}

.qFinishCell textarea{
      height: 90px;
      height: 84px;
}

input:focus-visible, textarea:focus-visible{
      outline: 0;
}

.qProductQCell{

}

.quoteMoreP{
      float: right;
      font-weight: 300;
      font-size: 12pt;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-size: 10pt;
}

.quoteMoreP i{
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      background: white;
      color: var(--blue);
      display: inline-block;
      font-style: normal;
      font-weight: 600;
      border-radius: 50%;
      font-family: arial;
      margin-right: 5px;
      font-size: 11pt;
}

.quoteMoreP:hover{
      text-decoration: underline;
      color: white;
}

.quoteAction{
      margin: 30px 0 0 0;
}

.quoteAction .btn{
      width: calc(50% - 10px);
      text-transform: none;
      font-size: 12pt;
      text-align: center;
      padding: 0;
      height: 44px;
      line-height: 44px;
      font-weight: 400;
}

.btnNext{
      float: left;
}

.btnFinish{
      float: right;
}

.btnOrange{
      background: var(--orange);
}

#contact .container{
      width: 85%;
      max-width: 85%;
}

#contactCompany{
      width: calc(70% - 140px);
      padding: 50px 70px;
      float: left;
      background: var(--yellow);
      color: white;
      text-align: left;
}

#companyInfo{
      position: relative;
      width: 100%;
      margin: 80px 0 50px 0;
}

.h2desc{
      text-align: center;
}

#contact{
      background: var(--darkblue);
      overflow: hidden;
      cursor: default;
}

#contact h2{
      margin-bottom: 15px;
}

#companyName{
      font-size: 24pt;
      font-weight: 300;
      margin-bottom: 20px;
}

.contactLeft{
      float: left;
      width: 180px;
}

.contactRight{
      float: left;
      max-width: 50%;
}

#customerSupport{
      top: 50px;
      background: white;
      width: calc(40% - 30px);
      position: absolute;
      right: 0;
      z-index: 5;
      border-radius: 5px;
      text-align: center;
      color: black;
      text-transform: uppercase;
      padding: 45px 15px;
}

#csHeader, #csPhone{
      font-size: 24pt;
      margin-bottom: 5px;
      font-weight: 500;
}

#csOpening{
      font-weight: 300;
      color: #666;
      font-size: 15pt;
}

#csDot{
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #1C2D3F;
      margin: 30px auto;
}

#csEmail{
      text-transform: none;
      font-size: 16pt;
}

#csEmail a, #csPhone a{
      color: black;
}

#csEmail a:hover, #csPhone a:hover{
      color: black;
      text-decoration: underline;
}

#copy{
      width: 50%;
      float: left;
      text-align: left;
}

#author{
      width: 50%;
      float: right;
      text-align: right;
}

#footer{
      font-weight: 300;
      margin: 80px 0 80px 0;
      font-size: 11pt;
}

.productDark{
      background: var(--darkblue);
}

#qTemplate{
      display: none;
}

.filled .quote{
      display: block;
}

.filled .btnAddToQuote{
      display: none;
}

#saved, #error, #finished, #wait, #mailError{
      width: 250px;
      height: 90px;
      line-height: 90px;
      background: #00C11D;
      color: white;
      font-size: 40pt;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
      position: fixed;
      top: 50%;
      margin-top: -75px;
      left: 50%;
      margin-left: -125px;
      border-radius: 10px;
      box-shadow: 0 0 40px black;
      z-index: 50;
      cursor: default;
      display: none;
      padding: 30px 15px;
}

#wait{
      background: var(--yellow);

      z-index: 55;
      font-size: 36pt;
}

#finished, #mailError{
      min-height: 90px;
      height: auto;
}

#mailError{
      background: #D80000;
}

#finishedText{
      line-height: 25px;
      font-size: 13pt;
}

#error{
      background: #D80000;
      font-size: 20pt;
      line-height: 45px;
}

#overlay, #waitOverlay{
      background: rgba(19, 30, 42, 0.85 );
      background: rgba(0, 0, 0, 0.85 );
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 15;
      display: none;
}

#waitOverlay{
      z-index: 20;
}

#finishQuote{
      width: calc(100% - 40px);
      max-width: 600px;
      max-height: 90%;
      cursor: default;
      overflow: hidden;
      overflow-y: auto;
      background: var(--darkblue);
      box-shadow: 0 0 15px black;
      border-radius: 5px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 16;
      padding: 35px;
      display: none;
}

#finishQuote .btn{
      width: calc(100% - 50px);
      text-align: center;
}

#finishQuote h3{
      text-transform: uppercase;
      font-size: 18pt;
      margin: 0 0 25px 0;
}

#finishQuoteClose{
      float: right;
      font-size: 20pt;
}

#finishQuoteError, #fileError{
      margin-bottom: 15px;
      padding: 15px;
      font-size: 12pt;
      text-align: center;
      background: #D80000;
      border-radius: 5px;
      display: none;
}

#finishQuoteNote{
      margin-top: 15px;
      font-size: 10pt;
      text-align: center;
}

.warn{
      font-size: 20pt;
      float: left;

}

.disabled{
    pointer-events: none;
}:root {
  --yellow:       #FEBA07;
  --blue:         #1c2d3f;
  --darkblue:     #131E2A;
  --lightblue:    #505D6B;
  --orange:       #FF6600;
  --font:         "Roboto Condensed", sans-serif;
}
@media all and (max-width: 1024px) {

#webDesc b{
    font-size: 64px;
    line-height: 70px;
}

#webDesc {
    font-size: 40px;
    margin-top: 45px;
}

#logo{
      margin-left: 0;
}

#webDescLine div{
      height: 124px;
}

#webImg{
      height: 240px;
}

.container, #contact .container {
      max-width: 100%;
      width: calc(100% - 30px);
}

#howWeWork .stepDesc{
      text-align: center;
}

#howWeWork .stepNr{
      margin: 0 0 15px 0;
}

#productMenu a{
      width: calc(33% - 15px);
      padding-left: 15px;
      display: inline-block;
      float: none;
}

#footer{
      margin: 35px;
}

#howWeWork{
      margin: 80px auto 150px auto;
}

#manualDesc{
      margin-bottom: 100px;
}

h2{
      margin: 60px 0;
}

#productMenu{
      text-align: center;
      font-size: 0;
}

#quoteLabel{
      font-size: 18pt;
}

.productLight .productDesc{
      margin: 0 20px 0 20px;
      width: calc(60% - 40px);
}

.productDark .productDesc{
      margin: 0 20px 0 20px;
      width: calc(60% - 40px);
}

.productImg{
      width: 40%;
}



.productImg img {
  max-width: 100%;
  margin: 90px 0px;
}



}@media all and (max-width: 750px) {

#webImg{
      width: calc(100% - 10px);
}

#logo{
      font-size: 20pt;
      margin: 0;
      width: auto;
      height: auto;
      padding: 30px 10px 15px 10px;
      line-height: 1;
}

#webDesc{
      position: absolute;
      text-shadow: 0px 0px 10px black;
}

#webDescText{
      padding-top: 50px;
}

#menu{
      float: none;
      clear: both;
      margin: 0;
      height: auto;
      padding: 0;
      text-align: left;
}

#menu a{
      margin: 0 10px;
}

#topSpace{
      height: 25px;
}

#productDesc{
      font-size: 13pt;
      margin: 50px 20px 30px 20px;

}

#productMenu a{
      width: calc(50% - 10px);
      padding: 0;

}

.container{
      width: calc(100% - 20px);
      padding: 0 10px;
}

#manualDesc{
      margin-bottom: 100px;
}

h2{
      margin: 55px 0;
      font-size: 20pt;
}

#howWeWork{
      margin-top: 0;
}

#howWeWork .step{
      width: 100%;
}

#howWeWork .stepNr{
      margin: 0 15px 0 0;
}

#howWeWork .stepDesc{
      text-align: left
}

#quoteLabel{
      font-size: 15pt;
      padding: 0px 30px;
}

.productDesc h3 {
  margin: 0 0 0 0;
  font-size: 17pt;
}

.pIncluded{
      font-size: 13pt;
}

.product{
      padding: 40px 0 90px 0;
}

.productImg{
      float: none !important;
      width: 100% !important;
      margin: -100px auto 35px auto !important;
      height: 90px;
      overflow: hidden;

}

.pDesc{
      margin: 25px 0 35px auto;
}

.productImg img{
      max-width: 105%;
      margin: 0;
}

.productDesc{
      float: none !important;
      width: calc(100% - 30px) !important;
      margin: 0 15px !important;
      padding: 0 0 35px 0;
}

#quoteLabelContainer + .product{
      padding-top: 120px !important;
}

.quoteAction .btn{
      display: inline-block;
      float: none;
      width: auto;
      padding: 0 12px;
      margin: 4px 3px 4px 0;
}

#products .product:last-child{
      padding-bottom: 0;
}

.desktop{
      display: none;
}

#products{
      margin-bottom: -50px;
}

#companyInfo{
      margin-top: 60px;
}

#customerSupport, #contactCompany{
      width: calc(100% - 60px);
      position: static;
      border-radius: 0;
      padding: 50px 30px;
}

#contactCompany{
      width: calc(100% - 60px);
      padding: 50px 30px;
}

.contactLeft, .contactRight{
      float: none;
      width: 100%;
      max-width: 100%;
}

.contactLeft{
      margin-bottom: 15px;
}

#footer{
      margin: 35px 0px;
}

}.fl{ float: left; }

.fr{ float: right; }

.cleaner{ clear: both; height: 0; overflow: hidden; display: block; }

.f7 { font-size:  7pt; }
.f8, .f8 th, .f8 td { font-size:  8pt !important }
.f9 { font-size:  9pt; }
.f10{ font-size: 10pt; }
.f11{ font-size: 11pt; }
.f12{ font-size: 12pt; }
.f13{ font-size: 13pt; }
.f14{ font-size: 14pt; }
.f15{ font-size: 15pt; }
.f16{ font-size: 16pt; }
.f17{ font-size: 17pt; }
.f18{ font-size: 18pt; }
.f19{ font-size: 19pt; }
.f20{ font-size: 20pt; }
.f21{ font-size: 21pt; }
.f22{ font-size: 22pt; }
.f23{ font-size: 23pt; }
.f24{ font-size: 24pt; }

.bold{ font-weight: bold; }
.normal{ font-weight: normal; }
.nodecor{ text-decoration: none; }
.noborder{ border: 0 !important; }
.hand, .pointer{ cursor: pointer !important; }
.cdefault{ cursor: default !important; }
.tleft{text-align: left}
.tcenter{text-align: center}
.tright{text-align: right !important}
.decor{text-decoration: underline !important}

.red{ color: red }
.gray{ color: #777777}
.white{ color: white }
.black{ color: black }

.mcenter{ margin: auto }

.center{ margin: auto }

.nobg{ background: transparent !important }

.hidden{display: none; }
.hiddenI{display: none !important}

#null, #preload{display: none}

.nocellspacing{ border-collapse: collapse; }

.nocellpadding td, .nocellpadding th{ padding:0 }

.inlineblock{
      display: inline-block;
}

.block{
      display: block !important;
}.qFinishCell.inputError{
      background: #FE9E9E;
}

.inputErrorInfo{
      display: none;
      width: 0;
      height: 0;
      font-size: 0;
      border: 0;
      overflow: hidden;
}

.inputFocus{
      border-color: #217C57 !important;
}