/* font-family: 'Open Sans', sans-serif; */
* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

html {
 font-family: 'Open Sans', Arial, Helvetica, sans-serif
}

body {
 height: 2200px;
}

@media(min-width:1024px) {
 body {
  height: 100vh;
 }
}

/* CONTAINER */
div.wrap {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: 100%;
 margin: 0 auto;
 max-width: 1980px;
}

/* Div Back to menu */
div.info {
 position: fixed;
 left: 50%;
 bottom: -100%;
 transform: translateX(-50%);
 width: 95%;
 z-index: 1;
 height: 70px;
 text-align: center;
 line-height: 30px;
 background-color: rgba(66, 66, 66, 0.8);
 border-radius: 2px;
 box-shadow: 0px 4px 4px 4px rgb(66, 66, 66);
}

div.info a {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
 font-weight: 800;
 color: white;
}

/* End of Div Back to menu */


div.info.active {
 bottom: 5px;
}

/* HEADER */
header {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 background-color: #ffffff;
 -ms-flex-preferred-size: 25%;
 flex-basis: 25%;
}


div.logo {
 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;
 -ms-flex-preferred-size: 18%;
 flex-basis: 18%;
 
}

div.logo img {
 width: 80%;
 filter: blur(6px);
}

header ul {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 list-style-type: none;
 -webkit-box-flex: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 font-size: 25px;
}

header ul li {
 -ms-flex-preferred-size: 10vh;
 flex-basis: 10vh;
 width: 100%;
}

header ul li a {
 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
 text-decoration: none;
 color: black;
 line-height: 10vh;
}

header div.flag {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-preferred-size: 30%;
 flex-basis: 30%;
}

div.flag a {
 position: relative;
 -ms-flex-preferred-size: 25%;
 flex-basis: 25%;
 height: 30%;
 overflow: hidden;
 border: 1px solid grey;
 border-radius: 5px;
}

div.flag a img {
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 min-width: 100%;
 min-height: 100%;
}

header p.line {
 width: 50%;
 border: 1px solid black;
 background-color: black;
}

@media (min-width: 460px) {
 div.flag a {
  -ms-flex-preferred-size: 18%;
  flex-basis: 18%;
  height: 30%;
 }
}

@media (min-width: 640px) {
 div.logo img {
  width: 60%;
 }

 div.flag a {
  height: 40%;
 }

 header p.line {
  width: 30%;
 }
}

@media (min-width: 768px) {
 div.logo img {
  width: 50%;
 }

 div.flag a {
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;
 }
}

@media(min-width:1024px) {
 div.wrap {
  height: 100vh;
 }

 header {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;
 }

 div.logo {
  -ms-flex-preferred-size: 17%;
  flex-basis: 17%;
  margin-left: 22px;
 }

 div.logo img {
  width: 100%;
 }

 header ul {
  -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;
  font-size: 18px;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
 }

 header ul li {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  height: 40%;
 }

 header ul li:hover {
  border-bottom: 1px solid black;
 }

 header ul li a {
  line-height: 6vh;
 }

 header ul li:nth-child(1) {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
 }

 header div.flag {
  -ms-flex-preferred-size: 17%;
  flex-basis: 17%;
 }

 div.flag a {
  -ms-flex-preferred-size: 35%;
  flex-basis: 35%;
  height: 30%;
 }

 header p.line {

  height: 16%;
  width: 0px;
 }

 div.flag a:hover {
  -webkit-box-shadow: 0 2px 2px 2px grey;
  box-shadow: 0 2px 2px 2px grey;
 }
}

@media(min-width:1280px) {
 header {
  -ms-flex-preferred-size: 13.5%;
  flex-basis: 13.5%;
 }

 header div.flag {
  -ms-flex-preferred-size: 14%;
  flex-basis: 14%;
  margin-right: 10px;
 }

 header ul li:nth-child(1) {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
 }

 header ul li a {
  line-height: 5vh;
 }
}

@media(min-width:1366px) {
 div.logo {
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;
  margin-left: 90px;
 }

 header div.flag {
  -ms-flex-preferred-size: 10%;
  flex-basis: 10%;
  margin-right: 40px;
 }

 div.flag a {
  border-radius: 5px;
 }
}

/* END OF HEADER */

/* MAIN */
main {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-flex: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 background-image: url(../images/tlo_5_procent.svg);
 background-repeat: no-repeat;
 background-position: -70px 0px;
 background-size: cover;
 overflow: hidden;
}

div.shadow {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 height: 0px;
 z-index: -1;
 background-color: transparent;
 -webkit-box-shadow: 0px 10px 21px 21px rgb(128, 128, 128, 0.2);
 box-shadow: 0px 10px 21px 21px rgb(128, 128, 128, 0.2);
}

/* END OF MAIN */


/* FOOTER */
footer {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -ms-flex-pack: distribute;
 justify-content: space-around;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 background-color: #424242;
 -ms-flex-preferred-size: 25%;
 flex-basis: 25%;
 color: white;
}

div.roundflags {
 position: absolute;
 left: 50%;
 top: 0;
 -webkit-transform: translate(-50%, -70%);
 -ms-transform: translate(-50%, -70%);
 transform: translate(-50%, -70%);
 width: 60px;
 height: 60px;
}

footer div {
 -ms-flex-preferred-size: 20%;
 flex-basis: 20%;
 width: 90%;
}

div.logogrey {
 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;
}

div.logogrey img {
 width: 80%;
}

div.adress {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
}

div.adress h1,
div.adress p {
 text-align: center;
 -ms-flex-preferred-size: 50%;
 flex-basis: 50%;
}

div.adress h1 {
 padding-top: 3%;
 font-size: 20px;
}

div.adress h1 span {
 font-weight: 400;
}

div.adress p {
 font-size: 20px;
}

div.adress p span {
 word-spacing: 10px;
}

div.contact {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
}

div.contact p {
 text-align: center;
 -ms-flex-preferred-size: 50%;
 flex-basis: 50%;
 font-size: 20px;
}

div.contact p.mobile {
 padding-top: 4%;
}

div.contact p.mail a {
 text-decoration: none;
 color: white;
}

div.web {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

div.web p.page {
 -ms-flex-preferred-size: 90%;
 flex-basis: 90%;
 height: 40%;
 text-align: center;
 padding-top: 20px;
}

div.web p.page a {
 text-decoration: none;
 color: white;
 font-size: 25px;
}

div.web div.socials {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: start;
 -ms-flex-align: start;
 align-items: flex-start;
 -ms-flex-preferred-size: 70%;
 flex-basis: 70%;
}

div.web div.social {
 -ms-flex-preferred-size: 15%;
 flex-basis: 15%;
}

div.social a {
 display: block;
 height: 100%;
 width: 100%;
 text-align: center;
}

div.social a img {
 width: 100%;
}

div.social:nth-child(1) a {
 margin-top: 7%;
}

div.social:nth-child(3) a {
 margin-top: 12%;
}

footer p.line {
 border: 1px solid white;
 background-color: white;
 width: 50%;
}

@media (min-width: 640px) {
 div.logogrey img {
  width: 60%;
 }

 div.web div.socials {
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
 }

 div.web div.social {
  -ms-flex-preferred-size: 13%;
  flex-basis: 13%;
 }

 footer p.line {
  width: 30%;
 }
}

@media(min-width:1024px) {
 footer {
  -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;
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;
 }

 div.roundflags {
  width: 60px;
  height: 60px;
 }

 div.logogrey img {
  width: 90%;
  filter: blur(6px);
 }

 div.adress {
  -ms-flex-preferred-size: 28%;
  flex-basis: 28%;
 }

 div.adress h1 {
  margin-bottom: 5px;
  font-size: 18px;
  padding-top: 0%;
  padding-right: 27px;
 }

 div.adress p {
  font-size: 15px;
 }

 div.contact p.mobile {
  padding-top: 1%;
  margin-right: 22px
 }

 div.contact {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
 }

 div.contact p {
  font-size: 15px;
 }

 div.contact p.mail a:hover {
  border-bottom: 1px solid white;
 }

 div.web {
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
 }

 div.web p.page {
  padding-top: 9px;
  margin-bottom: 10px;
 }

 div.web p.page a:hover {
  border-bottom: 1px solid white;
 }

 div.web p.page a {
  font-size: 15px;
 }

 div.web div.socials {
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
 }

 div.web div.social {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
 }

 div.social a {
  height: 80%;
  width: 80%;
 }

 div.social:nth-child(1) a {
  margin-top: 9%;
 }

 div.social:nth-child(2) a img {
  margin-top: 4%;
 }

 div.social a:hover {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
 }

 footer p.line {
  width: 0px;
  height: 25%;
 }
}

@media(min-width:1280px) {
 footer {
  -ms-flex-preferred-size: 13.5%;
  flex-basis: 13.5%;
 }
}

@media(min-width:1366px) {
 div.logogrey {
  margin-left: 45px;
  margin-top: 10px;
  -ms-flex-preferred-size: 24%;
  flex-basis: 24%;
 }

 div.logogrey img {
  width: 70%;
 }

 div.adress {
  -ms-flex-preferred-size: 24%;
  flex-basis: 24%;
 }

 div.contact {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
 }

 div.web {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;

 }

 div.web div.socials {
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
 }

 div.web div.social {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
 }

 div.social a {
  height: 85%;
  width: 85%;
 }

 div.web div.social {
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;

 }

 footer p.line {
  margin-top: 10px;
  height: 40%;
 }


}


@media(min-width:1680px) {
 div.social:nth-child(2) a img {
  margin-top: 7%;
 }
}

/* END OF FOOTER */