/*----- MENU -----*/
#menu {
  position:fixed;
  top:25px;
  right:25px;
  left:25px;
  height:50px;
  z-index:10;
  transition:width .3s;
  -webkit-transition:width .3s;
  padding:5px;
}
#menu_text_out {
  position:absolute;
  right:75px;
  top:0;
  bottom:0;
  overflow:hidden;
}
#menu_text {
  background-color:#559FCE;
  line-height:2px;
  padding:29px;
  color:#fff;
  width:auto;
  margin-right:-100%;
  margin-left:100%;
  transition:margin .3s;
  -webkit-transition:margin .3s;
  font-weight:800;
}
#menu.shown #menu_text {
  margin:0;
}
#menu_text a {
  color:#fff;
  position:relative;
  padding:20px 0;
  transition:top .2s;
  -webkit-transition:top .2s;
  top:0;
}
#menu_text div {display:inline;}
#menu_text a:hover {
  top:-5px;
}
#logo {
  background-color:#559FCE;
  display:block;
  position:absolute;
  right:0;
  top:0;
  padding:10px 15px;
  transition:width .3s;
  -webkit-transition:width .3s;
}
@media screen and (max-width:900px) {
  #menu {left:auto;}
  #menu_text_out {
    right:0;
    top:60px;
    width:200px;
  }
  #menu.shown #menu_text_out {
    overflow:visible;
  }
  #menu_text {padding-bottom:0;}
  #menu_text a {
    display:block;
    height:40px;
    padding:0;
    text-align:right;
  }
  #menu_text div {display:none;}
  #menu.shown #logo {
    width:170px;
  }
}

/*----- TOP -----*/
#top {
  height:92%;
  margin-top:15px;
  margin-left:15px;
  margin-right:15px;
  margin-bottom:15px;
  position:relative;
}
@media screen and (max-width:1200px) {
  #top {margin-bottom:100px;}
}
#top .cell {
  background-color:#559FCE;
}
#top .cell div {
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:contain;
  height:100%;
  width:20%;
  min-width:200px;
  margin:0 auto;
}
#top img {
  max-width:30%;
  width:100%;
}
#top:after {
  content:'';
  display:block;
  background: #ffffff;
  background: -moz-linear-gradient(84.5deg, transparent 0%,transparent 49.5%,#559fce 50%,#559fce 100%);
  background: -webkit-linear-gradient(84.5deg, transparent 0%,transparent 49.5%,#559fce 50%,#559fce 100%);
  background: linear-gradient(5.5deg, transparent 0%,transparent 49.5%,#559fce 50%,#559fce 100%);
  padding:5% 0;
}

/*----- PRODESIGNE -----*/
#prodesigne {padding-top:175px;}
#prodesigne .text {
  float:left;
  width:33%;
}
@media screen and (min-width:1200px) {
  #prodesigne .text h1 {margin-left:-15px;}
}
#prodesigne .folder {
  float:left;
  width:60%;
  margin-left:3%;
  position:relative;
  top:-100px;
}
@media screen and (max-width:1200px) {
  #prodesigne {padding-top:15px;}
  #prodesigne .folder {
    width:90%;
    top:0;
    margin-bottom:80px;
  }
  #prodesigne .text {width:100%;}
}
.folder_in {
  position:absolute;
  top:0.5%;
  bottom:0.5%;
  left:9.9%;
  right:0.5%;
}
.folder_img {
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  position:absolute;
  left:0;
  top:0;
  transition:margin .5s, opacity .5s;
  -webkit-transition:margin .5s, opacity .5s;
}
.folder_img:nth-child(1) {opacity:0;}
.folder.on .folder_img:nth-child(1) {
  margin-left:20px;
  margin-top:20px;
}
.folder.on .folder_img:nth-child(2) {
  margin-left:20px;
  margin-top:20px;
}

.folder:hover .folder_img:nth-child(1) {opacity:1;}
.folder:hover .folder_img:nth-child(2) {opacity:0;}

.folder img {
  display:block;
  width:100%;
  position:relative;
  z-index:2;
}

.see_full {
  color:#fff;
  background-color:#549FCD;
  font-size:1em;
  float:right;
  padding:10px 20px;
  transition:background .2s;
  -webkit-transition:background .2s;
}
.see_full img {
  height:1em;
  margin-left:10px;
  vertical-align:middle;
}
.see_full hr {
  border-top:2px solid #fff;
  margin-left:10%;
  width:0;
  transition:width .3s;
  -webkit-transition:width .3s;
}
.see_full:hover hr {/width:80%;}
.see_full:hover {background-color:#2C71A8;}

/*----- BLOG -----*/
#blog .float {
  width:33%;
  padding:20px;
}
@media screen and (max-width:1200px) {
  #blog .float {width:50%;}
}
@media screen and (max-width:900px) {
  #blog .float {width:100%;}
}

/*----- PRODUKT -----*/
#map {
  width:55%;
  margin-right:12%;
  padding:32% 0;
  position:relative;
}
#map_in {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
#map_back {
  position:absolute;
  height:100%;
  width:80%;
  z-index:0;
  opacity:0;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}
#map_back.on {
  opacity:1;
}
.map {
  position:absolute;
  overflow:hidden;
  height:40%;
  width:40%;
  /background-color:rgba(0,0,0,.1);
}
.map p {margin:0;}
.map .table {
  margin-top:25%;
	opacity:0;
	transition:opacity .3s;
	-webkit-transition:opacity .3s;
	}
.map .cell div {
  display:inline-block;
  padding:10px 15px;
  background-color:#fff;
}
.map .cell div b {font-weight:800;}
.map .cell div hr {
  width:50%;
  border-top:3px solid #000;
  margin-top:5px;
  margin-bottom:5px;
}
.map:hover .table {opacity:1;}
.map_bar {
  width:300%;
  height:100%;
  transition:margin .3s;
  -webkit-transition:margin .3s;
}
.map_s {
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  float:left;
  width:33.3333%;
  height:100%;
}
.map_left, .map_right {
  opacity:0;
  transition:.3s;
  -webkit-transition:.3s;
  height:40px;
  width:40px;
  position:absolute;
  top:50%;
  margin-top:-20px;
  cursor:pointer;
  border:5px solid #559FCE;
  border-radius:50%;
  box-sizing:border-box;
  background-position:center;
  background-size:50%;
  background-repeat:no-repeat;
  background-color:#fff;
  background-image:url('./images/arr.png');
  left:5px;
}
.map_right {
  right:5px;
  left:auto;
  background-image:url('./images/arrr.png');
}
.map:hover .map_left, .map:hover .map_right {opacity:1;}
.map_left:hover {left:0;}
.map_right:hover {right:0;}
#map_1 {
  top:65%;
  left:15%;
  width:60%;
  height:35%;
}
#map_2 {
  top:30%;
  left:50%;
  width:50%;
  height:35%;
  z-index:1;
}
#map_3 {
  top:0%;
  width:30%;
  height:30%;
  left:35%;
}
#map_4 {
  top:25%;
  left:0%;
  width:30%;
  height:30%;
}
/*#map_1 {
  top:50%;
  left:25%;
  height:50%;
  width:40%;
}
#map_2 {
  top:9%;
  left:50%;
  height:50%;
  width:50%;
}
#map_3 {
  top:10%;
  left:21%;
  height:25%;
  width:25%;
}
#map_4 {
  top:14%;
  left:5%;
  height:70%;
  width:15%;
}*/
#produkt .float:nth-child(1) {
  width:33%;
}
@media screen and (max-width:1200px) {
  #produkt .float:nth-child(1) {width:100% !important;float:none !important;}
  #map {width:80%;padding:46.55% 0;
  margin:0 auto;
    margin-bottom:150px;
  float:none !important;}
  .map .table {
    opacity:1;
    margin-top:75%;
    margin-left:10%;
  }
  #map_back {display:none;}
  #map_in {position:static;margin-bottom:300px;}
  .map {position:relative;margin:0 auto;left:0 !important;top:0 !important;width:50%;}
  #map {padding:0;}
  .map .table {margin-left:0;margin-top:100%;}
}
@media screen and (max-width:1100px) {#map_in {margin-bottom:0;}}
@media screen and (max-width:800px) {.map {width:75%;}}
@media screen and (max-width:550px) {.map {width:100%;}}

/*----- NOTE -----*/
#note {
  position:relative;
  top:-250px;
  width:30%;
  left:60%;
  margin-bottom:-150px;
}
#note img {
  width:100%;
}
#note_in {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  color:#2C71A8;
  font-size:1.5em;
  padding:40px;
}
@media screen and (max-width:1100px) {
  #note_in {
    padding:20px;
    font-size:1.2em;
  }
  #note {
    top:-50px;
    left:0;
    right:0;
    margin:0 auto;
    margin-bottom:-50px;
  }
}
@media screen and (max-width:900px) {
  #note {width:50%;}
}
@media screen and (max-width:550px) {
  #note {width:90%;}
  #pen {display:none;}
}
#pen {
  position:absolute;
  height:100%;
  top:0;
  right:-50px;
  width:auto !important;
}

/*----- PROPOZYCJE -----*/
#propozycje {
  font-size:0;
  text-align:right;
  letter-spacing:0;
}
#propozycje .text {
  display:inline-block;
  width:33%;
  font-size:initial;
  letter-spacing:1px;
  position:relative;
  top:-50px;
  margin-bottom:-50px;
}
@media screen and (max-width:1200px) {
  #propozycje {text-align:center;}
  #propozycje .text {
    top:0;
    width:100%;
  }
}
.prop {
  position:relative;
  display:inline-block;
  height:0;
  padding:11% 0;
  width:22%;
  vertical-align:bottom;
  top:0;
  transition:top .3s;
  -webkit-transition:top .3s;
}
.prop-new-mask {
  position:absolute;
  top:15px;
  right:15px;
  bottom:15px;
  left:15px;
  overflow:hidden;
}
.prop-new {
  font-size:12px;
  position:absolute;
  top:0;
  right:0;
  width:10em;
  height:2em;
  background-color:#f00;
  color:#fff;
  font-weight:800;
  letter-spacing:0.05em;
  text-align:center;
  line-height:2em;
  /transition:1s;
  transform:translate(50%, -50%) rotate(45deg) translate(0%, 200%);
}
@media screen and (max-width:900px) {
  .prop {
    width:25%;
    padding:12.5% 0;
  }
}
@media screen and (max-width:700px) {
  .prop {
    width:33.3333%;
    padding:16.6667% 0;
  }
}
@media screen and (max-width:400px) {
  .prop {
    width:50%;
    padding:25% 0;
  }
}
.prop:hover {
  top:-10px;
}
.prop_in {
  position:absolute;
  display:block;
  top:15px;
  left:15px;
  bottom:15px;
  right:15px;
}
.prop_in:nth-child(2) img:nth-child(2) {
  opacity:0;
  transition:opacity .3s;
  -webkit-transition:opacity .3s;
  margin-top:-100%;
}
@media screen and (max-width:900px) {
  .prop_in:nth-child(2) img:nth-child(2) {opacity:1;}
}
.prop:hover .prop_in:nth-child(2) img:nth-child(2) {opacity:1;}
.prop_in img {
  width:100%;
  height:100%;
  display:block;
}

/*----- INTERPIC -----*/
#interpic {
  position:relative;
  color:#fff;
  letter-spacing:3px;
}
#interpic p, #interpic h1 {margin:0;}
#inter_img {
  padding:22.5% 0;
  height:0;
  background-image:url('./images/inter.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  /opacity:.7;
}
#inter_in {
  font-size:1.5em;
  font-weight:900;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
#interpic a {
  display:inline-block;
  color:#000;
  background-color:#fff;
  font-size:0.6777em;
  padding:10px 20px;
  margin-top:20px;
  /border:3px solid #fff;
  transition:background .2s;
  -webkit-transition:background .2s;
  font-weight:400;
  text-transform:uppercase;
}
#interpic a:hover {
  background-color:#ccc;
}
#interpic:before {
  content:'';
  display:block;
  background: #ffffff;
  background: -moz-linear-gradient(94.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  background: -webkit-linear-gradient(94.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  background: linear-gradient(-5.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  padding:5% 0;
  margin-bottom:-9.8%;
  opacity:0.99;
  z-index:2;
  position:relative;
}
#interpic:after {
  content:'';
  display:block;
  background: #ffffff;
  background: -moz-linear-gradient(85.5deg, #fff 0%,#fff 49.5%,transparent 50%,transparent 100%);
  background: -webkit-linear-gradient(85.5deg, #fff 0%,#fff 49.5%,transparent 50%,transparent 100%);
  background: linear-gradient(5.5deg, #fff 0%,#fff 49.5%,transparent 50%,transparent 100%);
  padding:5% 0;
  margin-top:-9.8%;
  opacity:0.99;
}
@media screen and (max-width:900px) {
  #interpic {display:none;}
}

/*----- PROFORMA -----*/
@media screen and (min-width:1201px) {
#pp_wrap {
  position:relative;
  width:100%;
  height:auto !important;
}
#pp {
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:0 !important;
  text-align:center;
  font-size:0;
  letter-spacing:0;
  padding:0 100px;
  width:auto !important;
}
.person {
  position:relative;
  display:inline-block;
  width:25% !important;
  transition:height .3s;
  -webkit-transition:height .3s;
  font-size:initial;
  letter-spacing:1px;
}
.person:hover {z-index:3;}
.pp_img {
  background-color:#333;
  background-size:300% auto;
  /*background-position:50% 50%;*/
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  bottom:10px;
  transition:background .5s;
  -webkit-transition:background .5s;
}
/*.person:nth-child(1):hover .pp_img {background-position:81% 50%;}
.person:nth-child(2):hover .pp_img {background-position:76% 55%;}
.person:nth-child(3):hover .pp_img {background-position:83% 25%;}
.person:nth-child(4):hover .pp_img {background-position:27% 60%;}
.person:nth-child(5):hover .pp_img {background-position:77% 70%;}*/
.person svg {
  display:block;
  width:100%;
  height:100%;
}
.person path {
  transition:stroke-dashoffset .5s;
  -webkit-transition:stroke-dashoffset .5s;
}
.person:hover path {
  stroke-dashoffset:0 !important;
}
.pp_e {
  position:absolute;
  box-sizing:border-box;
  left:-50%;
  top:102%;
  width:200%;
  display:none;
}
.person:hover .pp_e {
  display:block;
}
.pp_e_in {
  display:inline-block;
  border:1px solid #333;
  background-color:#fff;
  color:#000;
  padding:15px 20px;
  box-sizing:border-box;
  font-size:0.8em;
  text-align:left;
  max-width:100%;
}
}
@media screen and (max-width:1200px) {
#proforma .center {color:#2C71A8;}
#pp_wrap {
  position:relative;
  width:100%;
  overflow:hidden;
  transition:height .3s;
  -webkit-transition:height .3s;
}
#pp {
  width:500%;
  transition:margin .3s;
  -webkit-transition:margin .3s;
  margin-left:0;
}
#pp .clear {display:none;}
.person {
  width:20%;
  float:left;
}
.pp_top {
  position:relative;
  max-width:400px;
  margin:0 auto;
  margin-bottom:50px;
}
.pp_img {
  background-color:#333;
  background-image:url('./images/p1.jpg');
  background-size:cover;
  background-position:50% 50%;
  position:absolute;
  top:2%;
  bottom:2%;
  left:2%;
  right:2%;
  transition:background-position .5s;
  -webkit-transition:background-position .5s;
}
.person svg {
  width:100%;
  display:block;
  opacity:0;
}
.person path {
  transition:stroke-dashoffset .5s;
  -webkit-transition:stroke-dashoffset .5s;
}
.person:hover path {
  stroke-dashoffset:0 !important;
}
.pp_e_in {
  padding:5px 10px;
  box-sizing:border-box;
  font-size:0.8em;
  text-align:center;
}
}
.pp_s {
  height:20px;
  width:20px;
  margin:10px;
  display:inline-block;
  vertical-align:middle;
}

/*----- PROGRES -----*/
#progres .center {color:#2C71A8;}
#progres_wrap {
  width:100%;
  overflow:hidden;
  position:relative;
  transition:height .3s;
  -webkit-transition:height .3s;
}
#progres_bar {
  transition:margin .3s;
  -webkit-transition:margin .3s;
}
.prog {
  float:left;
  box-sizing:border-box;
  padding:0 100px;
}
@media screen and (max-width:900px) {
  .prog {padding:0 50px;}
}
@media screen and (max-width:550px) {
  .prog {padding:0 10px;}
}
.prog .sc {
  max-width:1400px;
  min-height:100px;
  padding:0;
  position:relative;
}
#progres_nav {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  font-size:0;
  text-align:center;
}
.prog_nav {
  position:relative;
  top:-0px;
  display:inline-block;
  background-color:#eee;
  box-sizing:border-box;
  height:20px;
  width:20px;
  margin:0 10px;
  border-radius:50%;
  box-shadow:1px 1px #559FCE inset;
  transition:.3s;
  -webkit-transition:.3s;
  cursor:pointer;
}
#prog_nav_in {
  width:33%;
  float:right;
}
.prog_nav:hover {
  box-shadow:5px 5px #559FCE inset;
}
.prog_nav.current {
  top:-5px;
  box-shadow:20px 20px #559FCE inset;
}
.prog .text {
  padding-bottom:60px;
  width:33%;
  float:left;
}
.prog_img {
  float:left;
  width:67%;
  transition:background-size .3s;
  -webkit-transition:background-size .3s;
  overflow:hidden;
}
@media screen and (max-width:1200px) {
  .prog_img, .prog .text, #prog_nav_in {width:100%;}
}
.prog_img img {
  width:100%;
  display:block;
  position:relative;
  z-index:1;
  transition:.3s;
  -webkit-transition:.3s;
}
@media screen and (min-width:1200px) {
.prog_img:hover img {
  width:110%;
  margin-left:-5%;
  margin-top:-5%;
}
}
.prog_img:nth-child(3) {
  left:auto;
  right:0;
}

/*----- ZAPROSZENIE -----*/
#cont_f {text-align:center;}
#cont_f .float {
  width:25%;
  padding:0 50px;
  box-sizing:border-box;
  color:#2C72A9;
  font-weight:400;
}
#cont_f img {
  width:80%;
  max-width:100px;
  margin:0 auto;
  display:block;
}
#cont_f hr {
  border-top:5px solid #2c72a9;
  width:15%;
  margin-bottom:30px;
  margin-top:10px;
}
#form {
  width:60%;
}
#form_in {
  max-width:550px;
  width:100%;
  margin:0 auto;
}
#form input[type='text'], #form input[type='email'], #form textarea, #form input[type='submit'] {
  font:inherit;
  display:block;
  width:100%;
  margin:10px 0;
  border:none;
  border:3px solid #559FCE;
  padding:15px 20px;
  color:#559FCE;
  box-sizing:border-box;;
}
textarea {
  height:200px;
  resize:vertical;
}
#form ::-moz-placeholder {opacity:1;color:#559FCE;}
#form :-moz-placeholder {opacity:1;color:#559FCE;}
#form ::-webkit-placeholder {opacity:1;color:#559FCE;}
#form :-ms-input-placeholder {opacity:1;color:#559FCE;}
#form input[type='submit'] {
  background-color:#559FCE;
  color:#fff;
  cursor:pointer;
  border:none;
  display:inline-block;
  width:auto;
  transition:background .2s;
  -webkit-transition:background .2s;
}
#form input[type='submit']:hover {
  background-color:#2C71A8;
}

#phone {
  width:40%;
  padding:0 60px;
  box-sizing:border-box;
  position:relative;
  top:20px;
}
#phone img {
  width:100%;
}
#phone_in {
  position:absolute;
  top:18%;
  bottom:18%;
  left:21%;
  right:19.5%;
  color:#559FCE;
}
@media screen and (max-width:1200px) {
  #phone {padding:0 40px;}
  #phone_in {font-size:0.9em;}
}
#phone_in p {
  margin:10px 0;
}
#phone_in strong {
  letter-spacing:1px;
  font-weight:700;
  margin-top:20px;
}
#phone_in a {color:#559FCE;}
#phone_in a:hover {color:#2C71A8;}
@media screen and (max-width:900px) {
  #phone, #form {width:100%;}
  #phone img {display:none;}
  #phone_in {position:static;font-size:1em;}
}

#mapo {
  background: -moz-linear-gradient(5.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  background: -webkit-linear-gradient(5.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  background: linear-gradient(5.5deg, transparent 0%,transparent 49.5%,#fff 50%,#fff 100%);
  padding:5.25% 0;
  margin-bottom:-10%;
  position:relative;
  z-index:2;
}
#gmap {
  height:90%;
  width:100%;
}