/*===================== Common ==============================*/

*{margin: 0;padding: 0;}

html, body, div, class,id, section, aside, article, header, footer, p, ul, li {
  margin: 0;
  padding: 0;
  font-family: "Roboto",sans-serif;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}
.surface-povezava a, .surface-povezava a:hover, .surface-povezava a:focus, .surface-povezava a:active {
  outline: none;
  text-decoration: none;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.surface-naslov h1, .surface-naslov h2, .surface-naslov h3 {
  margin: 0px;
  font-weight: 700;
  color: #000000;
  font-family: "Roboto",sans-serif;
}

.surface-vsebina p {  
  font-weight: 400;
}

.surface-button i {
  font-size: 24px;
  padding-bottom: 1px;
}

.img-center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.surface-button.material-icons {
  vertical-align: middle;
}

.surface-povezava a {
  color: #005aab;
}

/*===================== END Common ==============================*/

/*========================= Hero Section ==================================*/

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  width: 1225px !important;
}

.header-section {
  background-color: #fff;
}

.row-container {
  display: table;
  width: 100%;
}

.main-banner {
  height: 480px;
 
}

.hero-content {
  position: absolute;
  top: 130px;
  left: 100px;
}

.hero-content h1 {
  font-weight: 300;
  font-size: 46px;
}

.hero-content p {
  font-weight: 100;
  font-size: 24px;
  line-height: 32px;
  margin: 30px 0;
}

.hero-content span {
  font-size: 18px;
  font-weight: 600;
  vertical-align: middle;
}

.hero-content i {
  font-size: 24px;
  padding-bottom: 1px;
}

/*======================= END Hero Section ================================*/

/*======================== Polja Surface Section ================================*/

.zakaj-surface-section h3 {
  font-weight: 100;
  font-size: 18px;
  line-height: 26px;
  padding: 50px 0;
  text-align: center;
}

.polja-surface-section .row {
  margin: 0;
}

.leva-stran-izdelkov, .desna-stran-izdelkov {
  background-color: #ddd;
  width: 610px;
  height: 610px;
  margin-right: 5px;
  margin-bottom: 5px;
  float: left;
  position: relative;
}

.desna-stran-izdelkov {
  margin: 0;
}

.polje-content {
  position: absolute;
  bottom: 40px;
  left: 50px;
}

.polje-content h2 {
  font-weight: 300;
  font-size: 36px;
}

.polje-content p {
  font-weight: 100;
  font-size: 16px;
  line-height: 24px;
  margin: 15px 0 25px 0;
  padding-right: 50px;
}

.polje-content span {
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}

.polje-content i {
  font-size: 22px;
  padding-bottom: 2px;
}

/*======================== END Polja Surface Section ================================*/

/*========================= Dodatki Section ==================================*/

.surface-dodatki-section h2 {
  font-weight: 300;
  font-size: 36px;
  padding: 50px 0;
  text-align: center;
}

.dodatki-banner {
  height: 590px;
 }

.dodatki-content {
  position: absolute;
  top: 70px;
  left: 120px;
}

.dodatki-content ul li {
  list-style-type: none;
}

.dodatki-content ul li:before {
  content: '\2014';
  position: absolute;
  margin-left: -20px;
  margin-top: 7px;
}

.dodatki-content ul li {
  margin-bottom: 30px;
}

.dodatki-content ul li span {
  font-weight: 300;
  font-size: 16px;
  margin: 0;
}

.dodatki-content p {
  font-size: 24px;
}

.dodatki-content span {
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: -20px;
}

.dodatki-content i {
  font-size: 22px;
  padding-bottom: 2px;
}

/*======================= END Dodatki Section ================================*/


@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .hero-section h1 {
      background: none;
    }
}