html, body{
      font-family: var(--font);
      font-weight: var(--fweight);
      font-size: var(--fsize);
      line-height: 1.5;
      background: #6C6774;
      color: white;
}

input[type="text"], input[type="email"], input[type="phone"], input[type="password"], input[type="number"], select, textarea{
      font-family:  var(--font);
      outline: none;
      box-shadow: none;
      background: transparent;
      border: 1px solid #ddd;
      border-radius: 0px;
      height: 40px;
      line-height: 40px;
      padding: 0 10px 0 40px;
      width: 300px;
      filter: none;
      -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus,
input:invalid, select:invalid, textarea:invalid{
      outline-width: 0;
      outline: none;
      box-shadow: none;
}

select{
      -ms-box-sizing:content-box;
      -moz-box-sizing:content-box;
      -webkit-box-sizing:content-box;
      box-sizing:content-box;
}

a{
      cursor: pointer;
      color: var(--white);
      text-decoration: underline;
}

a:hover{
      color: var(--red);
      text-decoration: underline;
}

p{
      margin: 15px 0;
}

b, strong{
      font-weight: 700;
}

#bgTop{
      background: url('/images/template/bg-top-transparent.png') center top repeat-x;
      background-size: cover;
      height: 300px;
}

#logo{
      width: 310px;
      height: 80px;
      float: left;
      margin: 70px 0 0 0;
}

#logo img{
      object-fit: contain;
      width: 100%;
      height: 100%;
}

.container{
      width: calc(100% - 220px);
      margin: 0 auto;
}

#footer .container{
      width: calc(100% - 50px);
}


#menu{
      text-transform: uppercase;
      font-weight: 700;
      float: right;
      margin-right: -40px;
      font-size: 0;

}

#menu a{
      text-decoration: none;
      transition: border 0.2s ease-out;
      height: 80px;
      width: 175px;
      display: inline-block;
      text-align: center;
      position: relative;
}

#menu a span{
      float: left;
      width: 100%;
      height: 90px;
      margin-top: -40px;
      transition: margin 0.12s linear;
}

#menu a b{
      height: 25px;
      margin-top: 95px;
      display: block;
      font-size: 22.5pt;
      transition: font-size 0.12s linear;
      position: absolute;
      width: 100%;
      text-align: center;
}

#menu a.elektrina{
      color: var(--blue);
}

#menu a.plyn{
      color: var(--green);
}

#menu a.mobil{
      color: var(--violet);
}

#menu a.informace{
      color: var(--white);
}

#menu a.elektrina span{
      background: url('/images/template/top-menu-blue.png') center top no-repeat;
}

#menu a.plyn span{
      background: url('/images/template/top-menu-green.png') center top no-repeat;
}

#menu a.mobil span{
      background: url('/images/template/top-menu-violet.png') center top no-repeat;
}

#menu a.informace span{
      background: url('/images/template/top-menu-white.png') center top no-repeat;
}

#menu a:hover span, #menu a.active span{
      margin-top: -15px;
}

#menu a:hover b{
      font-size: 25pt;
}

#bgMain{
      background: url('/images/template/bg.webp') center bottom repeat-x #1b0e2f;
      background-size: 1920px auto;
      /* min-height: 800px; */
}

#hp{
      text-align: center;
      font-size: 15pt;
      padding-bottom: 350px;
}

#hp p{
      max-width: 500px;
      margin: 15px auto;
}

#hp1{
      font-size: 28.5pt;
      margin-bottom: 0px;
}

#hp2{
      font-size: 17pt;
      margin-bottom: 40px;
}

#hpSelect{
      font-weight: 700;
      font-size: 24pt;
      margin-top: 30px;
      margin-bottom: -60px;

}

#hpEnergyContainer{
      position: relative;
      overflow: hidden;
}

#hpEnergy, #hpEnergyBG{
      height: 750px;
      overflow: hidden;
      position: relative;
      z-index: 3;
}

#hpEnergyBG{
      background: url('/images/template/halo.webp') center center no-repeat;
      display: none;
      z-index: 2;
      margin-bottom: -750px;
}

.hpEnergyBgAnimation{
      animation: energyBgAnimation 1s;
}

@keyframes energyBgAnimation{
    0%{
        filter: brightness(1);
        transform: scale(0.75);
    }
    50%{
        filter: brightness(1.4);
        transform: scale(1.1);
    }
    100%{
        filter: brightness(1);
        transform: scale(1);
    }
}


#hpEnergyEleTitle, #hpEnergyGasTitle{
      position: absolute;
      height: 88px;
      line-height: 88px;
      text-transform: uppercase;
      top: 465px;
      width: 260px;
      text-align: center;
      font-size: 32pt;
      font-weight: 700;
      animation: introAnimation 1.5s;
      text-decoration: none;
      transition: transform 250ms;
      animation-delay: 750ms;
      animation-fill-mode: forwards;
      opacity: 0;
}

.hpEnergyTitleStatic{
      transition: transform 200ms !important;
      animation: none !important;
      opacity: 1 !important;
}

.hpEnergyTitleStatic:hover{
      transform: scale(1.25);
}

#hpEnergyGasTitle{
      animation-delay: 1200ms;
}

@keyframes introAnimation{
    from{
        transform: scale(1.5);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;

    }
}

#hpEnergyGasTitle{
      width: 160px;
}

#hpEnergyEleTitle:hover, #hpEnergyGasTitle:hover{
        transform: scale(1.15) !important;

}


#hpEnergyEleTitle{
      color: var(--blue);
      right: calc(50% + 345px);
}

#hpEnergyGasTitle{
      color: var(--green);
      left: calc(50% + 350px);
}


#hpEnergyEleLeft, #hpEnergyGasRight{
      position: absolute;
      height: 88px;
      width: calc(50% - 600px);
      top: 480px;
      opacity: 0;
      transition: transform 0.25s;
}

#hpEnergyGasRight{
      width: calc(50% - 515px);
}

#hpEnergyEleLeft{
      left: 0;
      background: url('/images/template/hp-line-ele-left.png') center right no-repeat;
}

#hpEnergyGasRight{
      right: 0;
      background: url('/images/template/hp-line-gas-right.png') center left no-repeat;
}

#hpEnergyEleRight, #hpEnergyGasLeft{
      position: absolute;
      height: 88px;
      width: 196px;
      top: 480px;
      z-index: 0;
      opacity: 0;
      transition: transform 0.25s;
}

#hpEnergyEleRight{
      right: calc(50% + 145px);
      background: url('/images/template/hp-line-ele-right.png') center right no-repeat;
}

#hpEnergyGasLeft{
      left: calc(50% + 145px);
      background: url('/images/template/hp-line-gas-left.png') center left no-repeat;
}

#hpEnergyBulb{
      background: url('/images/template/bulb.png') center center no-repeat;
      width: 180px;
      height: 280px;
      margin-left: -180px;
}

#hpEnergyFlame{
      background: url('/images/template/flame.png') center center no-repeat;
}



#hpEnergyBulb, #hpEnergyFlame{
      width: 180px;
      height: 280px;
      position: absolute;
      left: 50%;
      top: 260px;
      opacity: 0;
      transition: transform 400ms;
      animation: iconsAnimation 1.5s;
      animation-delay: 750ms;
      animation-fill-mode: forwards;

}

#hpEnergyFlame{
      animation-delay: 1300ms;
}

@keyframes iconsAnimation{
    0%{
        opacity: 0;
        transform: scale(0.75);
    }
    40%{
        transform: scale(1.25);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

#needHelp{
      margin: 25px 0 0px 0;
      cursor: default;
}

#needHelp .btn{
      margin-top: 10px;
}

.purple .sectionLeft, .purple .sectionRight{
      background: var(--purple);
}


.section{
      position: relative;
      overflow: hidden;
}

.sectionLeft, .sectionRight{
      border-radius: 8px;
      transform: skew(-10deg);
      height: 100px;
      width: calc(50% - 140px);
}

.sectionLow .sectionLeft, .sectionLow .sectionRight{
      height: 75px;
}

.sectionLeft{
      margin-left: -35px;
      float: left;
}


.sectionRight{
      margin-right: -35px;
      float: right;
}

#footer .section{
      margin-top: -50px;
}

#footer{
      background: url('/images/template/bg-footer.png') center top repeat-x white;
}

.sectionLabel{
      text-align: center;
      cursor: default;
}

#helpline1{
      height: 18px;
      line-height: 18px;
      margin-bottom: 15px;
      font-size: 15.4pt;
      font-weight: 600;
      color: var(--darkpurple);
      margin-top: 2px;
}

#helpline2{
      font-size: 42pt;
      color: black;
      font-weight: 700;
      height: 34px;
      line-height: 30px;
      margin-bottom: 8px;
}

#helpline3{
      color: var(--darkpurple);
      font-size: 18.3pt;
      font-weight: 600;
      height: 20px;
      line-height: 20px;
}

#helpline4{
      font-size: 25pt;
      font-weight: 600;
      margin-top: 10px;
}

#helpline5{
      text-transform: uppercase;
      font-weight: 500;
      font-size: 13pt;
}

#helpline4 a, #helpline5 a{
      text-decoration: none;
}



.underline{
      position: relative;
      overflow: hidden;
      text-decoration: none;
}

.underline::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: white;
      transition: opacity 300ms, transform 300ms;
      transform: scale(0);
      transform-origin: center;

}

#footer .underline::after{
       background-color: var(--darkpurple);
}

.underline:hover{
      text-decoration: none;
}

.underline:hover::after{
      transform: scale(1);
}

#footerMenu{
      padding: 100px 0;
}

.footerMenu{
      width: calc(25% - 60px);
      margin: 0 30px;
      float: left;
      text-align: center;
}

.footerMenuLabel{
      color: var(--darkpurple);
      padding-bottom: 20px;
      border-bottom: 2px solid white;
      margin-bottom: 30px;
      display: block;
}

.footerMenuLabel a{
      font-size: 23pt !important;
      font-weight: 500 !important;
      transform: weight 1500ms;
}

.footerMenuLabel a:hover{
      text-shadow: 0px 0px 15px black;

}

.overBlue:hover{
      color: var(--blue);
}

.overViolet:hover{
      color: var(--violet);
}

.overGreen:hover{
      color: var(--green);
}

.overWhite:hover{
      color: white;
}


.footerMenuLabel.elektrina{
      border-color: var(--blue);
}

.footerMenuLabel.plyn{
      border-color: var(--green);
}

.footerMenuLabel.mobil{
      border-color: var(--violet);
}

.footerMenu a{
      text-decoration: none;
      color: var(--darkpurple);
      line-height: 40px;
      font-weight: 500;
      font-size: 15pt;
}

#footerLastLine{
      height: 125px;
      background: url('/images/template/footer-last-bg.png') center top repeat-x;
      background-size: cover;
      border-radius: 16px 16px 0 0;
}

#cookieLink{
      float: right;
      width: 55px;
      height: 55px;
      background: url('/images/template/cookie.png') center top repeat-x;
      margin: 30px 55px 0 0;
}

#footerLastLineLeft{
      float: left;
      width: 300px;
      margin: 40px 0 0 55px;
}

#copy{

}

#operate{
     font-size: 12pt;
}

.lineLeft, .lineRight{
      height: 80px;
      border-radius: 8px;
      transform: skew(-10deg);
}

.elektrina .lineLeft, .elektrina .lineRight, .elektrina .sectionLeft, .elektrina .sectionRight, .elektrina #pricelist .tr:hover{
      background: var(--blue);
}

.plyn .lineLeft, .plyn .lineRight, .plyn .sectionLeft, .plyn .sectionRight, .plyn #pricelist .tr:hover{
      background: var(--green);
}

.informace.lineLeft, .informace.lineRight, .informace.sectionLeft, .informace.sectionRight,
.informace .lineLeft, .informace .lineRight, .informace .sectionLeft, .informace .sectionRight{
      background: var(--white);
}

.mobil .lineLeft, .mobil .lineRight, .mobil .sectionLeft, .mobil .sectionRight{
      background: var(--violet);
}


.plyn #pricelist .tr:hover{
      color: black;
}

.elektrina h1, .elektrina h2, .elektrina #calcline2, .elektrina .calcline3, .elektrina a:hover, .elektrina .formLabel, .elektrina #submenu a.active, .elektrina #submenu{
      color: var(--blue);
}

.plyn h1, .plyn h2, .plyn #calcline2, .plyn .calcline3, .plyn a:hover, .plyn .formLabel, .plyn #submenu a.active, .plyn #submenu{
      color: var(--green);
}

.mobil h1, .mobil h2, .mobil #calcline2, .mobil .calcline3, .mobil a:hover, .mobil .formLabel, .mobil #submenu a.active, .mobil #submenu{
      color: var(--violet);
}

.informace #submenu a.active, .informace #submenu{
      color: var(--yellow);
}


.elektrina .catHalo{
      background: url('/images/template/halo-ele.png') center top no-repeat;
}

.plyn .catHalo{
      background: url('/images/template/halo-gas.png') center top no-repeat;
}

h2{
      line-height: 28px;
}


.lineLeft{
      width: 100px;
      margin-left: -34px;
      display: inline-block;
      float: left;
}

.lineRight{
      float: right;
      width: 100%;
      display: inline-block;
      margin-right: -50px;
      top: 0;
      position: absolute;
}

h1{
      line-height: 88px;
      height: 88px;
      overflow: hidden;
      position: relative;
      margin-top: -30px;
      margin-bottom: 0;
      cursor: default;
}

h1 b{
      display: inline-block;
      padding: 0 40px;
      line-height: 88px;
      float: left;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 40pt;
}

.plyn h1 b, .elektrina h1 b{
      font-size: 48pt;
}

.line{
      background: url('/images/template/opacity-line.png') center bottom no-repeat;
      background-size: 100% 1px;
      width: 100%;
      height: 1px;
}

#submenu{
      padding: 35px 0;
      background: url('/images/template/opacity-line.png') center bottom no-repeat;
      background-size: 100% 1px;
      line-height: 45px;
}

#submenu a{
      text-transform: uppercase;
      font-size: 20pt;
      font-weight: 500;
      text-decoration: none;
      margin-right: 60px;
      color: white;
      white-space: nowrap;
}


select option{
      background: var(--darkpurple);
      color: #fff;
}



#submenu .underline::after, .contact .underline::after{
      background: white;
}

#submenu .active.underline::after{
      display: none;

}

#catDesc{
      height: 240px;
      position: relative;
      margin-bottom: 20px;
}

.catHalo, .catHaloIco{
      float: right;
      width: 595px;
      height: 270px;
      margin-bottom: -270px;
}

.catHalo{
      transform-origin: top;
      position: relative;
      z-index: 2;
}

.catHaloAnimate{
      animation: catHaloAnimation 1s ;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
}


/* #hpEnergyContainer:hover .hpEnergyBGOnHover, .catHaloAnimateOnHover:hover{ */
.hpEnergyBGOnHover, .catHaloAnimateOnHover{
      animation: catHaloGlow 3s infinite ease-in-out !important;
}



@keyframes catHaloGlow{
    0%{
        filter: brightness(1);
    }
    50%{
        filter: brightness(1.4);
    }
    100%{
        filter: brightness(1);
    }
}

@keyframes catHaloAnimation{
    0%{
        filter: brightness(1);
        transform: scale(0.75);
    }
    50%{
        filter: brightness(1.4);
        transform: scale(1.1);
    }
    100%{
        filter: brightness(1);
        transform: scale(1);
    }
}

.elektrina .catHaloIco{
      background: url('/images/template/bulb.png') center center no-repeat;
      background-size: contain;}

.plyn .catHaloIco{
      background: url('/images/template/flame.png') center center no-repeat;
      background-size: contain;
}

.catHaloIco{

      height: 155px;
      display: block;
      margin-top: 20px;
      position: relative;
      z-index: 0;
      animation: catHaloIcoAnimation 1s;
      animation-delay: 500ms;
      opacity: 0;
      animation-fill-mode: forwards;
}

@keyframes catHaloIcoAnimation{
    0%{
        opacity: 0;
        transform: scale(0.75);
    }
    40%{
        transform: scale(1.25);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}





#catDesc h2{
      font-size: 14pt;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0 0 40px 0;
      padding-top: 50px;
      cursor: default;
}


#catDesc h2 b{
      display: block;
      font-weight: 700;
      font-size: 34pt;
      line-height: 40px;
}

.boxBG{
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 40px 23px;

}

.formCol{
      float: left;
}

.formCol{
      width: calc(20% - 46px);
      border-radius: 6px;
      padding: 17pt;
      margin: 0;
      text-align: left;
}

#calc .formCol:nth-child(5){

}

.formCol select{
      background: url('/images/template/select-drop.png') center right no-repeat;
      cursor: pointer;

}

.formCol select, .formCol input{
      width: 100%;
      border: 0;
      text-align: left;
      color: white;
      padding: 0;
      font-size: 14pt;
}

.formColLabel{
      font-size: 12pt;
      font-weight: 600;
      padding-bottom: 14px;
      border-bottom: 1px solid white;
      margin-bottom: 14px;
      cursor: default;
}

.formCol:hover{
      box-shadow: 0 0 10px var(--darkpurple);
      background: var(--darkpurple);
      background: #1B0E2F;
}

input[type=number].inputNarrow{
      width: 50px !important;
      text-align: center !important;
      -moz-appearance: textfield;
      border-bottom: 1px solid white;
}

.input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
      -webkit-appearance: none;
      margin: 0;
}

#calcResult{
      text-align: center;
      padding-bottom: 340px;
      padding-top: 100px;
      cursor: default;
}

#calcResult .section{
      margin: 10px 0 100px 0;
}

#calcline1{
      font-weight: 600;
      text-transform: uppercase;
      text-align: center;
      width: 100%;

}

#calcResult #calcline2{
      font-size: 30pt;
      padding-top: 15px;
}

#calcline2{
      font-weight: 600;
      font-size: 46pt;
      line-height: 45px;
      text-transform: uppercase;
}


.calcline3, .calcline{


}

.calcline .calcline3{
      color: white !important;
      font-size: 14pt;
}

.calcline3{
      font-size: 14pt;
}


.calcline2_no_vat, .calcline2_month{
      font-weight: 600;
}

#pricelist{
      margin-top: 0px;
      padding-bottom: 320px;
      text-align: center;
}


#pricelist th, #pricelist td{
      text-align: left;
      width: 140px;
      font-weight: 500;
      padding: 4px 0;
      cursor: default;
}

#pricelist .section{
      margin-bottom: 50px;
      margin-top: 50px;
}

#pricelist th{
      font-size: 12pt;
      vertical-align: top;
      font-weight: 700;
}

#pricelist th span{
      font-weight: 400;
}

#pricelist table{
      max-width: 830px;
      width: 100%;
      margin: 0 auto 60px auto;
}

#pricelist th:nth-child(5n+1){
      padding-left: 50px;
}

#pricelist td:nth-child(5n+1){
      font-weight: 700;
      font-size: 12pt;
      padding-left: 50px;
}


td.line{
      background: url('/images/template/opacity-line.png') center center no-repeat;
      background-size: 100% 1px;
      height: 30px;
}

#pricelist .boxBG{
      padding-bottom: 70px;
      position: relative;
}

#pricelist .boxBG + .btn{
      top: -30px;
      position: relative;

}

#forms, .forms{
      text-align: center;
      font-size: 0;
}

.form{
      width: calc(33.3% - 60px);
      /*float: left;*/
      padding: 15px 30px;
      background: url('/images/template/opacity-line-vertical.png') center right no-repeat;
      background-size: 1px 100%;
      min-height: 200px;
      text-align: center;
      display: inline-block;
      vertical-align:top;
}

.form:nth-child(3n), .noBG{
      background: transparent !important;
}

.formLabel{
      text-transform: uppercase;
      font-size: 18pt;
      font-weight: 600;
      line-height: 32px;
      min-height: 64px;
      margin-bottom: 8px;
}

.form p{
      margin: 20px 0 30px 0;
      line-height: 25px;
      min-height: 50px;
      font-size: 13pt;
      font-weight: 500;
}

.form .btn{
      margin-bottom: 18px;
}

.form .altLink{
      font-weight: 600;
      font-size: 13pt;
}

.textInCols2{
      column-count: 2;
      padding: 60px 60px 35px 60px;
      column-fill: balance;
      column-gap: 60px;
      text-align: left;
}

.textInCols3{
      column-count: 3;
      padding: 60px 60px 35px 60px;
      column-fill: balance;
      column-gap: 40px;
}

.textInCols4{
      column-count: 4;
      padding: 60px 60px 35px 60px;
      column-fill: balance;
      column-gap: 30px;
}

.textInCols p{
      margin: 0 0 25px 0;
      break-inside: avoid-column;
}


.informace.boxBG{
      margin-top: 100px;

}

div.pageContent.informace{
      padding-bottom: 320px;
      cursor: default;
}

h1 i{
      display: block;
      font-size: 12pt;
      font-style: normal;
}

h1.twoLine b{
     padding-top: 10px;
     line-height: 40px;
     text-align: center;
}

h1.twoLine b i{
     line-height: 24px;
     font-weight: 600;
}

#contactBox{
      float: right;
      width: calc(33% - 80px);
      padding: 40px 40px 25px 40px;
      margin-top: 20px;
}

.informace#submenu a{
      font-size: 17pt;
      margin-right: 30px;
}

.formLabelSub{
      font-size: 12pt;
      line-height: 18px;
      height: 36px;
}

#contacts{
      margin-top: 50px;
      margin-top: -20px;
      width: 66%;
      float: left;
}

#contacts .form{
      text-align: left;
      width: calc(50% - 60px);
      background: url('/images/template/opacity-line.png') center bottom no-repeat;
      background-size: 100% 1px;
      margin: 0 30px 20px 30px;
      padding: 30px 0 40px 0;
}

#contacts .form:nth-child(3), #contacts .form:nth-child(4){
      background: transparent;
}

.contact table, #contactBox table{
      margin-top: 15px;
      width: 100%;
}

#contacts td, #contactBox td{
      padding: 5px 0;
      vertical-align: top;
      text-align: left;
}

.contact{
      float: left;
}

.contact td:nth-child(2n+1), #contactBox td:nth-child(2n+1){
      font-weight: 600;
      font-size: 12pt;
      padding-right: 20px !important;
      max-width: 40%;
      vertical-align: top;
}

#customerZone{
      margin: 80px 0 0 0;
      text-align: center;
      font-size: 18pt;
      font-weight: 600;
      text-transform: uppercase;
}

#forms{
      padding-bottom: 320px;
}

#customerZone .btn{
      margin-top: 30px;
}

#modalOverlay, #menuOverlay{
      background: rgba(27, 14, 47, 0.8);
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: none;
      z-index: 20;
}

#contactModal{
      width: calc(100% - 120px);
      max-width: 450px;
      padding: 50px;
}

.modal{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 1001;
      max-height: calc(100vh - 100px);
      overflow: hidden;
      overflow-y: auto;
      cursor: default;
      display: none;
      background: #493F57;
      border-radius: 8px;
      box-shadow: 0 0 10px white;
}

#contactModalContent{
      margin-bottom: 35px;
}

.mobile{
      display: none;
}

.bodyOverflow{
      overflow: hidden;
}


.informace #catDesc{
      height: auto;
}




.mobil #calcline2, .mobil .calcline3, .mobil .formLabel{
      color: white;
}

.spotreba_nt{
      display: none;
}

#archive a{
      font-size: var(--fsize);
}

#archive h2{
      font-size: var(--fsize-h2);
}

#archive{
      text-align: left;
}

#contactMe, #msg{
      margin-top: 50px;
      display: none;
}

#msg{
      font-weight: bold;
}

#contactMe .formCol{
      display: inline-block;
      float: none;
}
#contactMe input{
      border-bottom: 1px solid white;
}

.inputErrorInfo{
      background: #ff0000;
      display: inline-block;
      color: white;
      margin: 10px 0 0 0;
      padding: 4px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 12pt;
}


#cenikContainer{
      width: 100%;
      overflow: hidden;
      overflow-x: auto;
      margin-bottom: 40px;
}

.cenik .trdark{
      background: #51495D;
}


.cenik{
      max-width: 100% !important;
}

.cenik th, .cenik td{
      font-size: 12pt;
      padding: 4px 10px !important;
      vertical-align: top;
}

.nobg{
      background: transparent !important;
}

.cenik .tr1 td{
      height: 0px;
      padding: 0 !important;
      vertical-align: middle;
}

.cenik td:nth-child(5n+1){
      font-size: 11pt !important;
      font-weight: initial !important;
}

.hideFromPDF.btn{
      margin-bottom: 50px;
}

select optgroup{
      color: white;
      font-size: 11pt;
      font-weight: 400;
      background: #310A43;
      font-style: normal;
}

#modalMsg{
      background: #444;
      padding: 35px;
      border-radius: 12px;
      background: white;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 15px #666;
      font-weight: 400;
      font-size: 13pt;
      opacity: 1;
      display: none;
      z-index: 100100;
      text-align: center;

}

#modalMsgText{
      margin-bottom: 30px;
      color: black;
      font-weight: 500;
}

#wait{
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.75);
      text-align: center;
      z-index: 12;
}

.loader {
      width: 248px;
      height: 248px;
      border: 3px solid #FFF;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      margin-top: 25%;
}

.loader::after {
      content: '';
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 256px;
      height: 256px;
      border-radius: 50%;
      border: 6px solid transparent;
      border-bottom-color: var(--violet);
}

@keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
}

.toast{
      display: none;
}

#calcNote{
      padding: 25px;
      font-size: 10.5pt;
      font-weight: 500;
}

.textInCols{
      font-size: var(--fsize);
      text-align: left;
}:root {
  --green:        #99FF00;
  --blue:         #00CCFF;
  --violet:       #B5009F;
  --white:        #FFFFFF;
  --purple:       #544C60;
  --darkpurple:   #423951;
  --yellow:       #FFCC00;

  --font:         "Rajdhani", sans-serif;

  --fweight:      400;

  --fsize:        14pt;

  --fsize-h1:     22pt;
  --fsize-h2:     28pt;
  --fsize-h3:     18pt;

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



.container{
     width: calc(100% - 80px);
}

#bgTop{
      height: 250px;
}

#menu{
      margin-right: 0;
}

#menu a{
      width: 140px;
}

#menu a b{
      font-size: 20pt;
      margin-top: 85px;
}


#hp p {
      margin: 35px auto;
}

#hp1 {
      font-size: 25pt;
}

#hp2 {
  font-size: 16pt;
  margin-bottom: 10px;
}

#hpSelect {
      font-size: 20pt;
      margin-bottom: -90px;
}

#hpEnergyContainer{
      margin-top: -30px;
}

#hpEnergyEleRight, #hpEnergyGasLeft,
#hpEnergyEleLeft, #hpEnergyGasRight{
      top: 445px;
}

#hpEnergyEleRight{
      width: 129px;
      right: calc(50% + 145px);
      background: url('/images/template/hp-line-ele-right-narrow.png') center right no-repeat;
}

#hpEnergyGasLeft{
      width: 129px;
      left: calc(50% + 145px);
      background: url('/images/template/hp-line-gas-left-narrow.png') center left no-repeat;
}

#hpEnergyEleTitle{
      color: var(--blue);
      right: calc(50% + 255px);
}

#hpEnergyGasTitle{
      color: var(--green);
      left: calc(50% + 255px);
}

#hpEnergyEleLeft {
     width: calc(50% - 480px);
}

#hpEnergyGasRight {
  width: calc(50% - 395px);
}

#needHelp{
      margin-top: 0;
}

#footerMenu{
      padding: 75px 0;
}

.boxBG{
      padding-left: 0;
      padding-right: 0;
}

#about{
      padding-left: 40px;
      padding-right: 40px;
}

.informace .boxBG{
      margin-top: 70px;;
}

#contacts, #contactBox{
      float: none;
      width: 100%;
      margin-top: 20px;
}

#contactBox{
      width: calc(100% - 80px);
      margin-top: 0;
}

}


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

:root {
      --fsize:  12pt;
}

body{
      font-weight: 500;
}

.mobile{
      display: block;
}

.desktop{
      display: none;
}

#bgMain {
  background: url('/images/template/bg-mobile.webp') center bottom repeat-x #1b0e2f;
  background-size: 800px auto;
}

.container{
      width: calc(100% - 40px);
}

#logo{
      height:50px;
      width: 200px;
      margin: 30px 20px 0 0px;
}

#bgTop{
      height: 300px;
      margin-bottom: -180px;
}


#menu{
      display: none;
}

#hp p {
      font-size: 11pt;
}

#hp1 {
      font-size: 16pt;
}

#hp2 {
  font-size: 12pt;
  margin-bottom: 10px;
}

#hpSelect {
      font-size: 14pt;
      margin-top: 10px;
      margin-bottom: 30px;
}

#showMenu, #closeMenu{
      float: right;
      width: 40px;
      height: 60px;
      background: url('/images/template/mobile-menu.png') center right no-repeat;
      background-size: 40px auto;
      margin: 15px 5px 0 0;
}

#closeMenu{
      background: url('/images/template/mobile-menu-close.png') center right no-repeat;
      background-size: 20px auto;
}

#hpEnergyBG{
      background: url('/images/template/halo-mobile.webp') center center no-repeat;
}

#hpEnergyMobile .lineLeft, #hpEnergyMobile .lineRight{
      transition: width 200ms;
      width: 0;
      position: absolute;
      height: 64px;
}

#hpEnergyMobile h2{
      font-size: 32pt;
      line-height: 64px;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      margin: 0;
      z-index: 4;
}


#hpEnergyMobile .elektrina h2 a, #hpEnergyMobile .plyn h2 a{
      animation: introAnimation 1.5s;
      text-decoration: none;
      transition: transform 250ms;
      animation-delay: 400ms;
      animation-fill-mode: forwards;
      opacity: 0;
      display: block;
      color: var(--blue);
      cursor: hand;
}


#hpEnergyMobile .plyn h2 a{
      animation-delay: 900ms;
      color: var(--green);
}

#hpEnergyMobile h2 a:hover{
      transform: scale(1.2);
}


#hpEnergyMobile .elektrina .lineLeft{
      left: 0;
      animation: eleLineLeft 2s;
      animation-fill-mode: forwards;
}

#hpEnergyMobile .elektrina .lineRight{
      right: 0;
      animation: eleLineRight 2s;
      animation-fill-mode: forwards;
}

#hpEnergyMobile .plyn .lineLeft{
      left: 0;
      animation: plynLineLeft 2s;
      animation-fill-mode: forwards;
}

#hpEnergyMobile .plyn .lineRight{
      right: 0;
      animation: plynLineRight 2s;
      animation-fill-mode: forwards;
}

#hpEnergyMobile .plyn .lineLeft, #hpEnergyMobile .plyn .lineRight{
      animation-delay: 500ms;
}

#hpBulb img, #hpFlame img{
      width: 100%;
}


#hpBulb img{
      transform: rotate(-180deg);
}


#hpBulb, #hpFlame{
      width: 15%;
      position: absolute;
      left: 50%;
      margin-left: -7.5%;
      opacity: 0;
      transition: transform 400ms;
      animation: iconsAnimation 1.5s;
      animation-delay: 750ms;
      animation-fill-mode: forwards;
}

#hpBulb{
      top: 20%;
      transform-origin: top center;
}

#hpFlame{
      animation-delay: 1300ms;
      bottom: 20%;
      transform-origin: bottom center;
}

@keyframes iconsAnimation{
    0%{
        opacity: 0;
        transform: scale(0.75) ;
    }
    40%{
        transform: scale(1.25);
    }
    100%{
        opacity: 1;
        transform: scale(1) ;
    }
}

#hpEnergy{
      height: 0;
      width: 100%;
      max-width: 700px;
      padding-bottom: 100%;
      margin: -100% auto 0 auto;
      margin-top: -100%;
}

#hpEnergyBG {
      width: 100%;
      max-width: 700px;
      padding-bottom: 100%;
      height: 0;
      margin: -50px auto 0 auto;
}

#hpEnegyMaxWidth{
      max-width: 700px;
      margin: -50px auto -40px auto;;
}

#hpEnergyBG{
      margin-bottom: -350px;
      background-size: contain;
}

#hpEnergyMobile .plyn{
      margin-top: -20px;
}

@keyframes eleLineLeft{
    0%{
        width: 0;
    }

    100%{
        width: calc(50% - 100px);
    }
}

@keyframes eleLineRight{
    0%{
        width: 0;
    }

    100%{
        width: calc(50% - 80px);
    }
}

@keyframes plynLineLeft{
    0%{
        width: 0;
    }

    100%{
        width: calc(50% - 60px);
    }
}

@keyframes plynLineRight{
    0%{
        width: 0;
    }

    100%{
        width: calc(50% - 40px);
    }
}

#needHelp{
      margin-top: 50px;
      margin-bottom: 0px;
}

.sectionLeft, .sectionRight {
      width: calc(50% - 130px);
}

#footerMenu{
      padding: 60px 0;
}

.footerMenu:nth-child(1) span, .footerMenu:nth-child(2) span, .footerMenu:nth-child(3) span{
      display: none;
}

.footerMenu:nth-child(1), .footerMenu:nth-child(2), .footerMenu:nth-child(3){
      width: calc(33% - 20px);
      margin: 0 10px;
}

.footerMenu:nth-child(4){
      width: calc(100% - 30px);
      margin: 15px 15px 0 15px;

}

#footerLastLine {
  height: 100px;
}

#footerLastLineLeft {
  float: left;
  width: 250px;
  margin: 25px 0 0 25px;
}

#cookieLink{
      margin: 20px 25px 0 0;
}

#submenu{
      padding: 25px 0 35px 0;
}

#submenu a{
      display: inline-block;
      float: none;
      text-align: center;
      font-size: 18pt;
      line-height: 40px;
      display: table;
      margin: 0 auto;
      font-weight: 500;

}

.lineLeft, .lineRight {
      height: 60px;
}

.lineLeft, .lineRight{
      border-radius: 8px;
      transform: skew(-10deg);
      width: calc(50% - 100px);
      position: relative;
}

.lineLeft{
      margin-left: -35px;
      float: left;
}

.lineRight{
      margin-right: -35px;
      float: right;
}

h1 b{
      text-align: center;
      cursor: default;
      display: block;
      position: absolute;
      width: 100%;
      margin: 0;
      padding: 0;
      line-height: 60px;
      font-size: 30pt !important;

}


.about h1 b{
      font-size: 28pt !important;
}

h1{
      height: 60px;
      line-height: 60px;
}

h1.twoLine b {
  padding-top: 2px;
}

.catHaloContainer{
      width: 500px;
      margin-left: 50%;
      transform: translateX(-50%);

}

.catHalo, .catHaloIco {
      float: none;
      width: 100%;
      margin: 0 auto -220px auto;
      height: 220px;
}

.catHalo{
      background-size: 500px auto !important;
}

.catHaloIco{
      height: 160px;
      margin: 20px auto 0 auto;
      background-position: center top !important;
      background-size: auto 130px !important;
}

#catDesc{
      height: auto;
      overflow: hidden;
      width: calc(100% + 40px);
      margin-left: -20px;
}

#catDesc p{
      text-align: center;
}

#catDesc h2{
      padding-top: 20px;
      text-align: center;
}

#calc .formCol{
      width: 100%;
      float: none;
      padding: 0;
      padding-bottom: 20px;
      height: 40px;
}

.formCol:hover {
      box-shadow: 0 0 0;
      background: transparent;
}

.formCol select, .formCol input{
      display: inline-block;
      width: calc(100% - 155px);
      float: left;
}

.formColLabel{
      width: 140px;
      float: left;
      margin-left: 15px;
      border: 0;
      margin-bottom: 0;
      padding-top: 5px;
      margin-left: 0;
}

.boxBG {
      background: transparent;
      padding: 0;
}


#calcResult {
      padding-top: 40px;
      padding-bottom: 310px;
}

#forms{
      padding-bottom: 270px;
}

#calcResult .section{
      margin-bottom: 50px;
}

.form{
      float: none;
      width: 100%;
      padding: 0 0 30px 0;
      margin-bottom: 35px;

      background: url('/images/template/opacity-line.png')  center bottom / 100% 1px no-repeat;
}

.form .formLabel, .form p{
      text-align: left;
      min-height: auto;
}

#pricelist th:nth-child(5n+1), #pricelist td:nth-child(5n+1){
      padding-left: 0px;
      text-align: left;
}

#pricelist th:nth-child(5n+1), #pricelist .tr td:nth-child(5n+1){
      display: none;
}

#pricelist td:nth-child(5n+2) {
      text-align: left;
}

#pricelist {
      margin-top: 40px;
      padding-bottom: 290px;
}

#pricelist table{
      margin-bottom: 50px;
}

.textInCols, .textInCols1, .textInCols2, .textInCols3, .textInCols4{
      column-count: 1;
}

.informace .boxBG {
      margin-top: 40px;
}

.informace{
      padding-bottom: 300px;
}

.informace #submenu a{
      margin-right: auto;
}

#contacts{
      width: 100%;
      float: none;
      margin-top: 10px;
}

#contacts .form {
      text-align: left;
      width: 100%;
      float: none;
      margin: 0 0 20px 0;
}

.contact .formLabel, #contactBox .formLabel,
.contact .formLabelSub, #contactBox .formLabelSub{
      text-align: center;
      padding-bottom: 15px;
}

.contact .formLabelSub{
      text-align: center;
      line-height: inherit;
}

#contacts td:nth-child(2n+1){
      font-size: 12pt;
}

#contacts td, .contact td, #contactBox td{
      font-size: 14pt;
}

#contacts .form:nth-child(3), #contacts .form:nth-child(4){
      background: url('/images/template/opacity-line.png') center bottom no-repeat;
      background-size: 100% 1px;
}

#contactBox {
      float: right;
      width: 100%;
      margin: 25px 0 0 0;
      padding: 0 0 35px 0;
}

#customerZone{
      margin-top: 40px;
}

#contactModal{
      width: calc(100% - 60px);
      max-width: 450px;
      padding: 30px 20px;
}

#mobileMenu{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      z-index: 100;
      background: url('/images/template/mobile-menu-bg.jpg') center bottom repeat-x #1b0e2f;
      background-size: cover;
      height: 0;
      overflow: hidden;
      overflow-y: auto;
}

#mobileMenu .informace{
      padding: 0;
      margin: 0;
}

#mobileMenu .lineLeft{
      width: 45px;
      margin-left: -34px;
      display: inline-block;
      float: left;
}

#mobileMenu .lineRight{
      float: right;
      width: 100%;
      display: inline-block;
      margin-right: -50px;
      top: 0;
      position: absolute;
}

#mobileMenu h2{
      line-height: 44px;
      height: 44px;
      overflow: hidden;
      position: relative;
      margin-top: 10px;
      margin-bottom: 0;
      cursor: default;
}

#mobileMenu h2 b{
      display: inline-block;
      padding: 0 20px;
      line-height: 32px;
      float: left;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 18pt;
}

#mobileMenu ul{
      margin: 0;
      padding: 0;
}

#mobileMenu ul li{
      list-style-type: none;
      line-height: 30px;
      padding-left: 50px;
}

#mobileMenu ul li a{
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14pt;
}

#mobileMenu .container{
      margin-bottom: 20px;
}

#mobileMenu .lineLeft, #mobileMenu .lineRight {
      height: 32px;
      border-radius: 5px;
}

.calcline, .calcline .calcline3, .calcline3{
      font-size: 14pt;
}



}


.btn{
      transform: skew(-10deg);
      border-radius: 8px;
      background: rgba(255,255,255,0.9);
      color: black;
      text-transform: uppercase;
      display: inline-block;
      height: 60px;
      line-height: 60px;
      padding: 0 50px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 0 10px #524A5E;
      transition: transform 0.15s;
      font-size: var(--fsize);
}

.btn b{
      transform: skew(10deg); /* UNSKEW */
      display: block;
}

.btn:hover{
      color: black !important;
}

.btn:hover b{
      color: black !important;
      text-decoration: none !important;
}

.btn:hover{
      transform: scale(1.1) skew(-10deg);
      background: white;
      text-decoration: none;
}

.btnSmall{
      height: 50px;
      line-height: 50px;
}.fl{ float: left; }

.fr{ float: right; }

.cleaner{ clear: both; height: 0 !important; overflow: hidden !important; display: block; float: none !important; }

.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;
}