h2,
span {
  color: #304e87
}

h2,
main {
  position: relative
}

.header-bar,
header {
  position: absolute;
  left: 0;
  right: 0
}

.header-fast-info p,
nav ul li a,
span {
  letter-spacing: 1.5px
}

.lighter,
a,
nav ul li a:before {
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.center,
.information,
.technologie-desc,
.typing {
  text-align: center
}

body {
  font-size: 15px;
  font-family: Roboto, sans-serif
}

img {
  max-width: 100%;
  height: auto
}

ul {
  list-style-type: none
}

a {
  text-decoration: none;
  font-weight: 300
}

h1,
h2 {
  font-weight: 600
}

p {
  font-size: 1.1em;
  line-height: 1.5em
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6em 0
}

.lighter {
  opacity: .4
}

.lighter:hover {
  opacity: 1
}

.hidden {
  display: none
}

.point,
.point-yellow {
  display: inline-block
}

h1 {
  font-size: 4em;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #e9e9e9
}

h2 {
  font-size: 3em;
  letter-spacing: 2px
}

h3 {
  color: #2e2e2e;
  letter-spacing: 1px;
  font-size: 1.2em
}

span {
  font-weight: 700
}

.yellow {
  color: #ffed00
}

.active {
  color: #304e87;
  font-weight: 600
}

.not-active {
  color: #5776b8;
  font-weight: 400
}

.title-col h3:hover {
  color: #304e87;
  font-weight: 600
}

.point {
  width: 7px;
  height: 7px;
  background-color: #5776b8;
  margin-right: .8em;
  margin-bottom: 2px
}

.point-yellow {
  width: 10px;
  height: 10px;
  background-color: #ffed00;
  margin: 0 1em
}

main {
  width: 100%;
  height: 100vh;
  overflow: hidden
}

.header-bar {
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(87, 118, 184, .7);
  top: 0
}

.header-fast-info,
.header-languages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: .5em
}

header,
nav ul {
  display: -webkit-flex
}

.header-fast-info p {
  padding-left: 1em;
  font-size: 1.2em
}

.header-fast-info i {
  margin-right: .6em;
  color: #ffed00
}

.header-fast-info a:hover {
  color: #fff
}

.header-languages p {
  padding-right: .5em;
  cursor: pointer
}

.header-fast-info a,
.header-fast-info p,
.header-languages a,
.header-languages p {
  color: #e9e9e9
}

header {
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #e9e9e9;
  top: 80px
}

#header-fixed {
  position: fixed;
  top: 80px;
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  z-index: 999
}

#header-fixed.small {
  top: 0;
  height: 80px;
  border-bottom: 4px solid rgba(87, 118, 184, .15)
}

#header-fixed.small a {
  padding: 1em;
  font-size: 1.1em
}

#header-fixed.small img {
  width: 250px
}

nav ul li a.border-extra:after,
nav ul li:after {
  content: '';
  position: absolute;
  bottom: -30px;
  height: 80px;
  width: 4px;
  background-color: rgba(87, 118, 184, .15)
}

#header-fixed.small nav ul li a:before {
  bottom: -30px;
  left: 27px
}

#attach-mobile-menu {
  display: none
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

nav ul li {
  position: relative
}

nav ul li:after {
  left: 30px;
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg)
}

nav ul li a.border-extra:after {
  right: -30px;
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg)
}

nav ul li a:before,
nav ul li a:hover:before {
  position: absolute;
  left: 25px;
  bottom: -50px;
  height: 7px;
  background-color: rgba(87, 118, 184, .4);
  content: ''
}

nav ul li a {
  margin-left: 3.5em;
  font-size: 1em;
  color: #304e87;
  padding: 3em 1em;
  font-weight: 400;
  -webkit-transition-timing-function: cubic-bezier(.08, .61, .79, 1.75);
       -o-transition-timing-function: cubic-bezier(.08, .61, .79, 1.75);
          transition-timing-function: cubic-bezier(.08, .61, .79, 1.75);
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all
}

.information h1,
.information h2,
.information p,
.localization-info h3,
.words-wrapper {
  color: #fff
}

nav ul li a:before {
  width: 0%
}

nav ul li a:hover:before {
  width: 100%
}

.arrows,
.clickable-arrows {
  left: 50%;
  position: absolute
}

.arrows {
  width: 60px;
  height: 72px;
  margin-left: -30px;
  bottom: 20px;
  cursor: pointer
}

.arrows path {
  stroke: #ffed00;
  fill: transparent;
  stroke-width: 1px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite
}

@keyframes arrow {
  0%,
  100%,
  80% {
    opacity: 0
  }
  40% {
    opacity: 1
  }
}

@-webkit-keyframes arrow {
  0%,
  100%,
  80% {
    opacity: 0
  }
  40% {
    opacity: 1
  }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s
}

.arrows path.a2 {
  animation-delay: -.5s;
  -webkit-animation-delay: -.5s
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s
}

.clickable-arrows {
  bottom: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100px;
  height: 100px
}

.typing {
  position: absolute;
  top: 45%;
  left: 10%;
  height: 320px;
  margin: 0
}

.typing h1 {
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.center {
  display: table-cell;
  vertical-align: middle
}

.words-wrapper {
  position: relative
}

.words-wrapper b {
  position: absolute;
  left: 0;
  white-space: nowrap
}

.words-wrapper b.visible {
  position: relative
}

.words-wrapper i {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation-duration: .6s;
          animation-duration: .6s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards
}

.words-wrapper i:nth-of-type(2) {
  -webkit-animation-delay: .05s;
          animation-delay: .05s
}

.words-wrapper i:nth-of-type(3) {
  -webkit-animation-delay: .1s;
          animation-delay: .1s
}

.words-wrapper i:nth-of-type(4) {
  -webkit-animation-delay: .15s;
          animation-delay: .15s
}

.words-wrapper i:nth-of-type(5) {
  -webkit-animation-delay: .2s;
          animation-delay: .2s
}

.words-wrapper b.visible i {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: scale-up;
          animation-name: scale-up
}

.words-wrapper b.hidden i {
  -webkit-animation-name: scale-down;
          animation-name: scale-down
}

@-webkit-keyframes scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0)
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

@keyframes scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0)
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

@-webkit-keyframes scale-down {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1)
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0)
  }
}

@keyframes scale-down {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1)
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0)
  }
}

#ofirmie .wrapper,
.info-col1,
.info-col3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.title-col {
  margin-right: 10em
}

.info-col1 p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 2em
}

.info-col1 p:last-child {
  padding-right: 0
}

.info-col1,
.info-col3,
.info-col4 {
  padding-bottom: 3em
}

.info-col3 {
  padding-bottom: 5em;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

.title-col h2:after {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  width: 100px;
  height: 4px;
  background-color: #ffed00
}

.info-columns li {
  font-size: 1.1em;
  line-height: 1.4em
}

.information {
  background: url(../img/maszyna-cnc-alupart2.jpg) 100% 100% no-repeat fixed;
  position: relative
}

.information p {
  font-size: 1.6em
}

#writer2 {
  margin: 0 auto;
  width: 800px;
  height: 200px
}

.park-image,
.park-title-col h2 {
  margin-bottom: 2em
}

.loading h2,
footer p.mar {
  margin-top: 1em
}

#parkmaszynowy .wrapper,
.info-col1,
.info-col3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.park-title-col {
  margin-right: 4em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1
}

.park-title-col h3 {
  font-size: 1.2em;
  line-height: 1.8em;
  position: relative;
  cursor: pointer
}

.info-columns {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1
}

.info-columns p {
  line-height: 1.6em
}

.park-image {
  background: url(../img/park-maszynowy1.jpg) top center no-repeat;
  width: 700px;
  height: 559px
}

.park-image img {
  border-radius: 5px
}

.park-detail p {
  position: relative;
  margin-left: 25px
}

.park-detail p:after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #5776b8;
  top: 10px;
  left: -18px
}

#map,
.company-view {
  width: 100%;
  height: 600px
}

#technologie {
  height: 450px;
  background: url(../img/alupart-technologie.jpg) 100% 100% no-repeat
}

.technologie-desc h3 {
  display: inline-block
}

#kontakt {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #e9e9e9
}

.company-view {
  background: url(../img/alupart-slide3.jpg) center center no-repeat;
  position: relative
}

.localization-info {
  text-align: center;
  position: absolute;
  bottom: 22%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  background-color: rgba(87, 118, 184, .8);
  padding: 5em
}

.localization-info i {
  font-size: 3em;
  color: #fff;
  background-color: #ffed00;
  width: 70px;
  height: 70px;
  line-height: 75px;
  margin-bottom: .6em
}

footer {
  width: 100%;
  background-color: #304e87
}

.footer-col h3 {
  position: relative
}

.footer-col h3:after {
  content: '';
  position: absolute;
  background-color: #ffed00;
  width: 15px;
  height: 15px;
  top: 3px;
  left: -30px
}

footer .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around
}

footer a,
footer h3,
footer p {
  color: #e9e9e9
}

footer p {
  line-height: 1.6em;
  font-weight: 300
}

footer a:hover {
  color: #ffed00
}

.copyright {
  background: #5776b8;
  color: #fff
}

.copyright p {
  font-weight: 300;
  font-size: .95em
}

.copyright .wrapper {
  padding: 1em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

.copyright a {
  color: #ffed00;
  font-size: .95em
}

.loading {
  background-color: #e9e9e9;
  color: #304e87;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  position: fixed;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column
}

.c-logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.c-logos-item {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-direction:row;
          flex-direction:row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 192px;
  cursor: pointer;
}
.c-logos-item img {
  max-width: 80%!important;
}
.center {
  display: block;
  margin: auto;
}
.references-img {
  text-align: center;
  margin-top: 2%;
}
.references-img-item {
  max-width: 40%;
  margin: 0 auto;
  display: none;
}
.img-open {
  /* display: block!important; */
}
.park-pdf {
  width: 250px;
  margin: 4rem 0 -1rem 5rem;
  box-shadow: 2px 5px 20px rgba(0, 0, 0, .25) ;
}
@media only screen and (max-width: 768px) {
  .c-logos-item {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 192px;
    cursor: pointer;
  }
  .references-img-item {
    max-width: 75%;
    margin: 0 auto;
    display: none;
  }
}