header nav ul, .categories-holder, main aside div {
  background: #ffffff;
  background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: linear-gradient(to top, #f0f0f0, #ffffff); }

html {
  font: 62.5% Arial, sans-serif; }

body {
  font-size: 1.4rem; }

.wrapper {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 2rem; }
  .wrapper:after {
    content: "";
    clear: both;
    display: table; }

header {
  display: flex;
  width: 80%;
  height: auto;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3rem; }
  header .title a {
    color: #000;
    text-decoration: none; }
  header .title h1 span {
    color: #277f9a; }
  header nav ul {
    border: 1px solid #dedede;
    border-radius: .25rem;
    padding: 1rem;
    margin-bottom: -1rem;
    font-size: 0; }
    header nav ul li {
      display: inline;
      font-size: 1.6rem; }
      header nav ul li:after {
        content: "|";
        padding: 0 1rem; }
      header nav ul li:last-child:after {
        content: "";
        padding: 0; }

.slider-holder {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background-color: #2c2c2c;
  padding: 1rem 0; }
  .slider-holder .slider {
    display: flex;
    width: 80%;
    height: auto;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    color: #fff; }
    .slider-holder .slider .slide {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      display: none;
      opacity: 1;
      position: relative; }
      .slider-holder .slider .slide .text {
        width: 33.333%;
        padding: 1rem 3rem;
        text-align: justify;
        text-justify: inter-word; }
        .slider-holder .slider .slide .text h2 {
          margin-top: -2rem;
          margin-bottom: 1rem; }
          .slider-holder .slider .slide .text h2 a {
            color: #fff; }
        .slider-holder .slider .slide .text .prev, .slider-holder .slider .slide .text .next {
          cursor: pointer;
          width: auto;
          position: absolute;
          bottom: 1rem; }
          .slider-holder .slider .slide .text .prev img, .slider-holder .slider .slide .text .next img {
            width: 2.5rem; }
        .slider-holder .slider .slide .text .prev {
          left: 3rem; }
        .slider-holder .slider .slide .text .next {
          left: 6rem; }
      .slider-holder .slider .slide .thumb {
        width: calc(33.333% - 2rem);
        height: 90%;
        min-height: 23rem;
        margin-left: 2rem;
        background: center center/cover no-repeat;
        border-radius: .25rem; }

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s; }

@keyframes fade {
  from {
    opacity: .5; }
  to {
    opacity: 1; } }
@-webkit-keyframes fade {
  from {
    opacity: .5; }
  to {
    opacity: 1; } }
.categories-holder {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  min-height: 7rem;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  overflow: hidden; }
  .categories-holder .categories {
    display: flex;
    width: 80%;
    height: 100%;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center; }
    .categories-holder .categories ul {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: row wrap;
      justify-content: space-around;
      align-items: center;
      font-size: 0; }
      .categories-holder .categories ul li {
        display: inline;
        font-size: 2rem;
        position: relative; }
        .categories-holder .categories ul li:after {
          content: "";
          position: absolute;
          top: -1.4rem;
          left: 15rem;
          width: 5rem;
          height: 5rem;
          border-right: 1px solid #dedede;
          border-top: 1px solid #dedede;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg); }
        .categories-holder .categories ul li:last-child:after {
          content: "";
          width: 0;
          height: 0; }

main {
  display: flex;
  width: 80%;
  height: auto;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3rem 3rem 0 3rem; }
  main .content {
    width: 70%;
    color: #5d5d5d;
    padding: 0 3rem 0 0;
    text-align: justify;
    text-justify: inter-word; }
    main .content p {
      margin-bottom: 1rem; }
    main .content h3 {
      margin-bottom: 2rem;
      color: #2a4f5e;
      font-size: 3rem; }
    main .content ul {
      margin-top: 1rem;
      margin-left: 2rem; }
      main .content ul li:before {
        content: "\2714\0020"; }
  main aside {
    display: flex;
    width: 30%;
    height: auto;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    color: #2a4f5e; }
    main aside div {
      padding: 2rem;
      margin-bottom: 2rem;
      width: 100%;
      border: 1px solid #dedede;
      border-radius: .25rem; }
      main aside div a {
        text-decoration: underline; }
        main aside div a:hover {
          text-decoration: none; }
      main aside div h4 {
        margin-bottom: 2rem;
        font-size: 1.8rem;
        color: #000; }
      main aside div strong {
        display: block;
        margin-bottom: 1rem; }
      main aside div span {
        display: block;
        margin-bottom: 1rem; }

.gallery h3 {
  width: 100%;
  text-transform: uppercase;
  color: #277f9a;
  padding-left: 0.3333333333rem;
  margin-bottom: 2rem;
  margin-top: 3rem; }
  .gallery h3:first-child {
    margin-top: 0; }
.gallery .thumb {
  width: 20rem;
  height: 20rem;
  background: center center/cover no-repeat;
  border: 3px solid #f1f1f1;
  border-radius: .5rem;
  margin-bottom: 1rem;
  margin-right: 1rem; }

.contacts {
  display: flex;
  width: 80%;
  height: auto;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch; }
  .contacts .content {
    width: 30%; }
    .contacts .content strong {
      font-size: 1.7rem;
      display: block;
      margin-top: 3rem;
      margin-bottom: 2rem;
      text-transform: uppercase; }
      .contacts .content strong:first-child {
        margin-top: 0; }
    .contacts .content span {
      display: block;
      margin-bottom: 1rem; }
      .contacts .content span img {
        vertical-align: middle;
        width: 2rem;
        margin-right: 0.5rem; }
  .contacts aside {
    width: 70%; }
    .contacts aside iframe {
      width: 100%;
      height: 100%; }

.fuel-tanks .content {
  width: 100%; }
  .fuel-tanks .content h3 {
    text-transform: uppercase;
    font-size: 1.7rem; }
  .fuel-tanks .content article {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 3rem; }
    .fuel-tanks .content article .text {
      width: 50%; }
    .fuel-tanks .content article a[data-lightbox="kuro-talpos"] {
      display: flex;
      width: 50%;
      height: auto;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: flex-start; }
      .fuel-tanks .content article a[data-lightbox="kuro-talpos"] .thumb {
        width: 80%;
        height: 30rem;
        background: center center/cover no-repeat;
        border: 3px solid #f1f1f1;
        border-radius: .5rem; }
    .fuel-tanks .content article:nth-of-type(2) a[data-lightbox="kuro-talpos"] {
      display: flex;
      width: 50%;
      height: auto;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start; }
    .fuel-tanks .content article:nth-of-type(3) .holder {
      width: 50%;
      padding-right: 3rem; }
      .fuel-tanks .content article:nth-of-type(3) .holder .text {
        width: 100%; }
      .fuel-tanks .content article:nth-of-type(3) .holder a[data-lightbox="kuro-talpos"] {
        display: flex;
        width: 100%;
        height: auto;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-start;
        margin-top: 3rem; }
      .fuel-tanks .content article:nth-of-type(3) .holder:last-child {
        padding-left: 3rem;
        padding-right: 0; }
        .fuel-tanks .content article:nth-of-type(3) .holder:last-child .thumb {
          margin-bottom: 3rem; }
  .fuel-tanks .content .pdf-icons {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 0 3rem 0; }
    .fuel-tanks .content .pdf-icons span {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: center;
      padding: 1rem;
      width: 33.333%; }
      .fuel-tanks .content .pdf-icons span img {
        display: block;
        margin-bottom: 1rem; }
      .fuel-tanks .content .pdf-icons span a {
        display: block;
        width: 50%;
        text-align: center;
        padding-left: 2rem; }

.fuel-systems .content {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start; }
  .fuel-systems .content h3, .fuel-systems .content h4 {
    display: block;
    width: 100%;
    text-transform: uppercase;
    margin-bottom: 2rem; }
  .fuel-systems .content aside {
    width: 25%;
    padding: 0 2rem 2rem 0; }
    .fuel-systems .content aside ul {
      border: 1px solid #dedede;
      border-radius: .5rem;
      margin: 0;
      width: 100%; }
      .fuel-systems .content aside ul li {
        padding: 1rem 2rem;
        border-bottom: 1px solid #dedede;
        background-color: #f1f1f1; }
        .fuel-systems .content aside ul li:before {
          content: ""; }
        .fuel-systems .content aside ul li:hover {
          background-color: #dedede;
          cursor: pointer; }
      .fuel-systems .content aside ul .current {
        background: #7abcff;
        background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
        background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
        background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
        color: #fff;
        outline: 2px solid #7abcff;
        border: 0;
        position: relative; }
        .fuel-systems .content aside ul .current:after {
          left: 100%;
          top: 50%;
          border: solid transparent;
          content: "";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none; }
        .fuel-systems .content aside ul .current:after {
          border-left-color: #60abf8;
          border-width: 1rem;
          margin-top: -1rem; }
        .fuel-systems .content aside ul .current a {
          color: #fff; }
  .fuel-systems .content section {
    width: 75%; }
    .fuel-systems .content section article {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-start;
      margin-bottom: 3rem;
      padding-left: 2rem;
      position: relative; }
      .fuel-systems .content section article p, .fuel-systems .content section article ul {
        width: 70%;
        float: left; }
      .fuel-systems .content section article img {
        max-width: 100%;
        border-radius: .5rem; }
      .fuel-systems .content section article ul {
        margin-bottom: 1rem; }
      .fuel-systems .content section article aside {
        display: flex;
        width: 30%;
        height: auto;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        right: 0;
        float: left;
        padding-left: 3rem; }
        .fuel-systems .content section article aside p {
          width: 100%;
          font-size: 1.2rem; }
        .fuel-systems .content section article aside img {
          width: 10rem; }

.fuel-systems.smdp-basic .content section article p, .fuel-systems.smdp-basic .content section article ul,
.fuel-systems.smdp-standart .content section article p,
.fuel-systems.smdp-standart .content section article ul,
.fuel-systems.smdp-pro .content section article p,
.fuel-systems.smdp-pro .content section article ul,
.fuel-systems.smdp-enterprise .content section article p,
.fuel-systems.smdp-enterprise .content section article ul {
  width: 100%; }

.oil-stands .content {
  width: 100%; }
  .oil-stands .content h3 {
    text-transform: uppercase;
    font-size: 1.7rem; }
  .oil-stands .content div {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start; }
    .oil-stands .content div .thumb {
      width: 30rem;
      height: 20rem;
      background: center center/cover no-repeat;
      border: 3px solid #f1f1f1;
      border-radius: .5rem;
      margin-bottom: 1rem;
      margin-right: 1rem; }

.fuel-equipment .content {
  width: 100%; }
  .fuel-equipment .content h3 {
    text-transform: uppercase;
    font-size: 1.7rem; }
  .fuel-equipment .content div {
    display: flex;
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 3rem; }
    .fuel-equipment .content div h4 {
      width: 100%;
      margin-bottom: 1rem;
      text-transform: uppercase; }
    .fuel-equipment .content div span {
      display: flex;
      width: 20%;
      height: auto;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: center;
      text-align: center; }
      .fuel-equipment .content div span p {
        width: 80%; }

footer {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background-color: #2c2c2c;
  margin-top: 2rem;
  padding: 2rem; }
  footer .content {
    display: flex;
    width: 80%;
    height: auto;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2rem;
    color: #fff; }
    footer .content div {
      display: flex;
      width: 25%;
      height: auto;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center; }
      footer .content div img {
        margin-right: 2rem; }
      footer .content div a {
        color: #dedede; }
        footer .content div a:hover {
          color: #fff; }

*,
*:before,
*:after {
  box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  padding: 0;
  margin: 0; }

ul {
  list-style-type: none; }

a {
  color: #2a4f5e;
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

/* Tablets, Ipads (portrait). Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  header {
    width: 100%; }
    header .title {
      width: 100%; }
    header nav {
      margin: 1rem 0; }

  .categories-holder .categories {
    width: 100%; }
    .categories-holder .categories ul li:after {
      display: none; }

  main {
    width: 100%;
    padding: 3rem 3rem 0 3rem; }

  .slider-holder .slider {
    width: 100%;
    padding-right: 2rem; }
    .slider-holder .slider .slide .text {
      width: 50%; }
    .slider-holder .slider .slide .thumb {
      width: 25%; }

  footer {
    height: 16rem;
    clear: both; }
    footer .content {
      width: 100%;
      justify-content: center; }
      footer .content div {
        width: 30%; }
        footer .content div:first-child {
          justify-content: center;
          width: 40%; }
        footer .content div:last-child {
          width: 100%;
          text-align: center;
          margin-top: 2rem;
          color: #ccc; }
        footer .content div img {
          max-width: 4rem; }

  .contacts {
    width: 100%; }
    .contacts .content {
      width: 40%; }
    .contacts aside {
      width: 60%; }

  .fuel-tanks .content .pdf-icons {
    align-items: flex-start; }

  .oil-stands .content div .thumb {
    width: 21rem; } }
/* Low Resolution Tablets, Mobiles (Landscape). Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
  main,
  header,
  .slider-holder .slider,
  .contacts,
  .fuel-systems,
  .fuel-equipment,
  .oil-stands {
    width: 100%; }

  header .title {
    width: 100%; }

  nav {
    margin-top: 1rem; }

  .slider-holder {
    min-height: 50vh; }
    .slider-holder .slider .slide {
      flex-flow: row wrap;
      padding: 2rem 2rem 2rem 0; }
      .slider-holder .slider .slide .text {
        width: 100%;
        padding: 2rem; }
        .slider-holder .slider .slide .text .prev, .slider-holder .slider .slide .text .next {
          top: 0; }
        .slider-holder .slider .slide .text .next {
          left: 90%; }
        .slider-holder .slider .slide .text .prev {
          left: 82.5%; }
      .slider-holder .slider .slide .thumb {
        width: calc(50% - 2rem);
        max-height: 20rem;
        overflow: hidden; }

  .categories-holder .categories {
    width: 100%; }
    .categories-holder .categories ul {
      padding: 0 2rem; }
      .categories-holder .categories ul li {
        width: 50%;
        padding: 1rem 0; }
        .categories-holder .categories ul li:after {
          display: none; }

  main .content {
    width: 100%; }
  main aside {
    margin-top: 2rem;
    width: 100%; }

  .contacts {
    width: 100%; }
    .contacts .content {
      width: 40%; }
    .contacts aside {
      width: 60%;
      min-height: 40rem; }

  .gallery .thumb {
    width: 15rem;
    height: 16rem; }

  .fuel-tanks .content {
    padding-right: 2rem; }
    .fuel-tanks .content .pdf-icons span {
      width: 100%; }
    .fuel-tanks .content article .text {
      width: 100% !important; }
    .fuel-tanks .content article a[data-lightbox="kuro-talpos"] {
      width: 100% !important;
      justify-content: center !important; }
      .fuel-tanks .content article a[data-lightbox="kuro-talpos"] .thumb {
        margin: 2rem 0; }
    .fuel-tanks .content article .holder {
      width: 100% !important;
      padding: 0 !important; }

  .fuel-systems .content {
    padding-right: 0; }
    .fuel-systems .content h3 {
      margin-bottom: 0; }
    .fuel-systems .content aside {
      padding-right: 0;
      width: 100%;
      text-align: center; }
      .fuel-systems .content aside ul li:after {
        display: none; }
    .fuel-systems .content section {
      width: 100%; }
      .fuel-systems .content section article {
        padding-left: 0; }
        .fuel-systems .content section article p {
          width: 100%; }
        .fuel-systems .content section article ul {
          width: 100%;
          margin-left: 0; }
        .fuel-systems .content section article aside {
          width: 100%;
          position: static;
          padding-left: 0; }

  .fuel-equipment .content div span {
    width: 50%; }

  footer {
    height: 22rem;
    clear: both; }
    footer .content {
      width: 100%;
      justify-content: space-between; }
      footer .content div {
        width: 33.333%;
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center; }
        footer .content div:last-child {
          width: 100%;
          margin-top: 2rem;
          color: #ccc; }
        footer .content div img {
          margin: 0 0 1rem 0; } }
/* Most of the Smartphones Mobiles (Portrait). Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
  main,
  header,
  .slider-holder .slider,
  .contacts,
  .fuel-systems,
  .fuel-equipment,
  .oil-stands {
    width: 100%; }

  main .content {
    padding: 0; }

  nav {
    margin-top: 1rem; }

  .slider-holder {
    min-height: 50vh; }
    .slider-holder .slider .slide {
      flex-flow: row wrap;
      padding: 2rem 2rem 2rem 0; }
      .slider-holder .slider .slide .text {
        width: 100%;
        padding: 2rem; }
        .slider-holder .slider .slide .text .prev, .slider-holder .slider .slide .text .next {
          top: 0; }
        .slider-holder .slider .slide .text .next {
          left: 90%; }
        .slider-holder .slider .slide .text .prev {
          left: 82.5%; }
      .slider-holder .slider .slide .thumb {
        width: calc(50% - 2rem);
        max-height: 20rem;
        overflow: hidden; }

  .categories-holder .categories {
    width: 100%; }
    .categories-holder .categories ul {
      padding: 0 2rem; }
      .categories-holder .categories ul li {
        width: 50%;
        padding: 1rem 0; }
        .categories-holder .categories ul li:after {
          display: none; }

  main .content {
    width: 100%;
    padding-right: 0 !important; }
  main aside {
    margin-top: 2rem;
    width: 100%; }

  .contacts {
    width: 100%; }
    .contacts .content {
      width: 100%; }
    .contacts aside {
      width: 100%; }

  .gallery .thumb {
    width: 14rem;
    height: 14rem; }

  .fuel-tanks .content {
    padding-right: 2rem; }
    .fuel-tanks .content .pdf-icons span {
      width: 100%; }
    .fuel-tanks .content article .text {
      width: 100% !important; }
    .fuel-tanks .content article a[data-lightbox="kuro-talpos"] {
      width: 100% !important;
      justify-content: center !important; }
      .fuel-tanks .content article a[data-lightbox="kuro-talpos"] .thumb {
        margin: 2rem 0; }
    .fuel-tanks .content article .holder {
      width: 100% !important;
      padding: 0 !important; }

  .fuel-systems .content {
    padding-right: 0; }
    .fuel-systems .content h3 {
      margin-bottom: 0; }
    .fuel-systems .content aside {
      padding-right: 0;
      width: 100%;
      text-align: center; }
      .fuel-systems .content aside ul li:after {
        display: none; }
    .fuel-systems .content section {
      width: 100%; }
      .fuel-systems .content section article {
        padding-left: 0; }
        .fuel-systems .content section article p {
          width: 100%; }
        .fuel-systems .content section article ul {
          width: 100%;
          margin-left: 0; }
        .fuel-systems .content section article aside {
          width: 100%;
          position: static;
          padding-left: 0; }

  .fuel-equipment .content div span {
    width: 50%; }

  footer {
    height: 25rem; }
    footer .content {
      width: 100%;
      justify-content: space-between; }
      footer .content div {
        width: 33.333%;
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center; }
        footer .content div:last-child {
          width: 100%;
          margin-top: 2rem;
          color: #ccc; }
        footer .content div img {
          margin: 0 0 1rem 0; } }

/*# sourceMappingURL=style.css.map */