/*---------------POSTY ------------*/
.postArea img {
  height: 100%;
}

.konferencje ul {
  list-style-type: none;
}

.margin_top {
  margin-top: 20px;
}

#_infrastruktura .articleArea {
  border-color: #e54e53;
}

#_infrastruktura .articleName h3 {
  background: #e54e53;
  color: #fff;
}

#_kolej .articleArea {
  border-color: #b9ce00;
}

#_kolej .articleName h3 {
  background: #b9ce00;
  color: #fff;
}

#_terminale .articleArea {
  border-color: #279725;
}

#_terminale .articleName h3 {
  background: #427941;
  color: #fff;
}

#_transport-samochodowy .articleArea {
  border-color: #33bda0;
}

#_transport-samochodowy .articleName h3 {
  background: #33bda0;
  color: #fff;
}

#_transport-morski .articleArea {
  border-color: #33bda0;
}

#_transport-morski .articleName h3 {
  background: #33bda0;
  color: #fff;
}

#_transport-lotniczy .articleArea {
  border-color: #33bda0;
}

#_transport-lotniczy .articleName h3 {
  background: #33bda0;
  color: #fff;
}

#_technologia .articleArea {
  border-color: #ff6a5a;
}

#_technologia .articleName h3 {
  background: #ff6a5a;
  color: #fff;
}

#_transport-intermodalny .articleArea {
  border-color: #335fbd;
}

#_transport-intermodalny .articleName h3 {
  background: #335fbd;
  color: #fff;
}

#_prawo .articleArea {
  border-color: #7f33bd;
  color: #fff;
}

#_prawo .articleName h3 {
  background: #7f33bd;
  color: #fff;
}

#_port-morski .articleArea {
  border-color: #bd3361;
  color: #fff;
}

#_port-morski .articleName h3 {
  background: #bd3361;
  color: #fff;
}

#_jedwabny-szlak .articleArea {
  border-color: #a3004c;
  color: #fff;
}

#_jedwabny-szlak .articleName h3 {
  background: #a3004c;
  color: #fff;
}

article p {
  line-height: 1.857;
  margin-bottom: 1.857em;
}

article ul {
  padding-left: 15px;
  list-style: circle;
  line-height: 1.857;
  margin-bottom: 1.857em;
}

article h3 {
  line-height: 1.857;
}

article h2 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  -webkit-font-smoothing: antialiased;
}

.article {
  background: #000;
  min-height: 200px;
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
}

.postAuthorArea {
  color: #afafaf;
}

.author {
  color: #e54e53;
  font-weight: 700;
}

.articleArea {
  border-bottom: 1px solid #eee;
  box-sizing: content-box;
  padding: 0;
}

.mainPartnerCat {
  max-height: 60px;
}

.category-partner-logo {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  gap: 10px;
}

.articleNameArea,
.articlePartner {
  font-size: 14px;
  color: #333;
}

.articleName h3 {
  text-transform: uppercase;
  font-size: 16px;
  padding: 0 14px;
  font-weight: 700;
  line-height: 43px;
}

.otherPartner {
  margin-bottom: 10px;
  font-size: 10px;
}

.main_partner img {
  float: right;
  height: auto;
  max-height: 100px;
  width: auto;
}

.partners img {
  width: auto;
  height: auto;
}

.partners {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}

.article .postname {
  bottom: 0px;
}

.tag-content a {
  display: inline-block;
  color: #e54e53;
}

.postname a {
  color: #fff;
}

.postname .date {
  color: #bbb;
  font-size: 11px;
}

.postname a:hover {
  text-decoration: underline;
}

.article:hover .post_img img {
  opacity: 0.8;
}

.article .post_img img {
  width: 100%;
  height: 200px;
  transition: all 0.5s ease-in-out;
}

.article:hover .post_img img {
  transform: scale(1.1);
  width: 110%;
}

.topNewsArea {
  background: #f8f8f8;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 25px;
}

.postFirstSection {
  display: grid;
  margin-right: 15px;
  grid-template-areas:
    "first Second"
    "b c"
    "d e";
}

.postFirstSection .date {
  color: #9c9c9c;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.post_titles {
  padding: 0;
  margin-top: 14px;
  margin-bottom: 11px;
  color: #161616;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

.excerpt_content {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.615;
  color: #777;
  padding-bottom: 10px;
}

.excerpt_content figure {
  display: none;
}

.postFirstSection li {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.postFirstSection li a {
  text-decoration: none;
}

.postFirstSection li a:hover .post_titles {
  text-decoration: underline;
}

.postFirstSection li:nth-child(1) {
  grid-area: first;
  margin-right: 15px;
}

.postFirstSection li:nth-child(1) .post_thumbalis,
.postFirstSection li:nth-child(2) .post_thumbalis,
.postFirstSection li:nth-child(1) .post_thumbalis img,
.postFirstSection li:nth-child(2) .post_thumbalis img {
  max-height: 290px;
  min-height: 290px;
  width: 100%;
  height: 100%;
}

.postFirstSection li:nth-child(2) {
  grid-area: Second;
  margin-left: 15px;
}

.postFirstSection li:nth-child(3) {
  grid-area: b;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin-right: 15px;
}

.postFirstSection li:nth-child(4) {
  grid-area: c;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin-left: 15px;
}

.postFirstSection li:nth-child(5) {
  grid-area: d;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin-right: 15px;
}

.postFirstSection li:nth-child(6) {
  grid-area: e;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin-left: 15px;
}

.postFirstSection li:nth-last-child(1),
.postFirstSection li:nth-last-child(2) {
  border-bottom: 0;
}

.postFirstSection li:nth-child(3) .excerpt_content,
.postFirstSection li:nth-child(4) .excerpt_content,
.postFirstSection li:nth-child(5) .excerpt_content,
.postFirstSection li:nth-child(6) .excerpt_content {
  display: none;
}

.postFirstSection li:nth-child(3) .post_titles,
.postFirstSection li:nth-child(4) .post_titles,
.postFirstSection li:nth-child(5) .post_titles,
.postFirstSection li:nth-child(6) .post_titles {
  font-size: 14px;
}

.postFirstSection li:nth-child(3) .post_thumbalis,
.postFirstSection li:nth-child(4) .post_thumbalis,
.postFirstSection li:nth-child(5) .post_thumbalis,
.postFirstSection li:nth-child(6) .post_thumbalis {
  width: 104px;
  height: 69px;
  float: left;
  margin-right: 10px;
}

.postFirstSection li:nth-child(3) .post_thumbalis img,
.postFirstSection li:nth-child(4) .post_thumbalis img,
.postFirstSection li:nth-child(5) .post_thumbalis img,
.postFirstSection li:nth-child(6) .post_thumbalis img {
  height: 69px;
}

.postFirstSection li .post_thumbalis img {
  object-fit: cover;
  object-position: top;
}

.topNews {
  display: grid;
  grid-template-areas:
    "head head a b"
    "head head c d";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3px;
}

.topNews li {
  display: inline-block;
  position: relative;
  background: #1e1e1e;
  overflow: hidden;
  cursor: pointer;
}

.topNews li .postname p {
  margin: 0;
}

.topNews li:hover .postname p {
  text-decoration: underline;
}

.topNews li:hover .postname .date {
  text-decoration: none !important;
}

.topNews li .post_img img {
  transform: scale(1.1);
}

.topNews li:hover .post_img img {
  transform: scale(1.2);
}

.topNews li:nth-child(1) {
  grid-area: head;
  height: 483px;
}

.topNews li:nth-child(1) .postname {
  font-size: 20px;
  overflow: hidden;
}

.topNews li:nth-child(2) {
  grid-area: a;
  height: 240px;
}

.topNews li:nth-child(3) {
  grid-area: b;
  height: 240px;
}

.topNews li:nth-child(4) {
  grid-area: c;
  height: 240px;
}

.topNews li:nth-child(5) {
  height: 240px;
  grid-area: d;
}

.post_img {
  height: 100%;
}

.post_img img {
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.mask {
  position: absolute;
  z-index: 8;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.88) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.88) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.88) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
  width: 100%;
  height: 100%;
  left: 0;
}

.topNews li:hover .post_img {
  opacity: 0.9;
}

.topNews li .postname {
  font-weight: 700;
}

.postname,
.tagBox .post-title {
  position: absolute;
  bottom: 0px;
  line-height: 1.5em;
  z-index: 9;
  padding: 10px;
  color: #fff;
  text-shadow: 0 0 4px #000;
  width: 100%;
  font-size: 14px;
  margin-bottom: 0;
}

.topNews li:nth-child(1) .post_img img {
  width: 100%;
  object-fit: cover;
  object-position: top;
  min-height: 483px;
}

.topNews li:nth-child(2) .post_img img,
.topNews li:nth-child(3) .post_img img,
.topNews li:nth-child(4) .post_img img,
.topNews li:nth-child(5) .post_img img {
  width: 100%;
  object-fit: cover;
  object-position: top;
  min-height: 240px;
}

.thumbali_post img {
  max-width: 100%;
  width: 100%;
}

.author_info {
  border-bottom: 1px solid #dedede;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.author_info .avatar {
  padding-right: 0;
}

.author_info img {
  width: auto;
}

.tagContent .post-title {
  font-size: 14px;
}

.tagBox {
  height: 200px;
  position: relative;
  cursor: pointer;
  transform: scale(1);
  transition: all 1s;
}

.borderBox {
  position: absolute;
  z-index: 8;
  width: 100%;
  height: 100%;
  border: 1px solid #dedede;
}

.tagBox:hover .post-title {
  text-decoration: underline;
}

.tagBox:hover .thumbali_post img {
  opacity: 0.8;
}

.tagBox:hover {
  transform: scale(1.1);
  transition: all 1s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tagBox .post-title {
  position: absolute;
  text-decoration: none;
  bottom: 0;
  padding: 10px;
  z-index: 9;
  color: #ffffff;
}

.tagBox .post-title.archive {
  color: #000;
  text-shadow: none;
}

.tagBox .thumbali_post {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
}

.tagBox .thumbali_post img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

p.nocomments {
  display: none;
}

.archivpost a {
  display: block;
}

/* Ekspert koment */
.expertHeader {
  text-transform: uppercase;
  font-size: 16px;
  padding: 0 14px;
  font-weight: 700;
  line-height: 43px;
  background-color: #ececec;
  color: #5c5c5c;
}

.experetContent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
}

.expertBox {
  border: 1px solid #eee;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

.expertPhoto {
  position: relative;
}

.expertPhoto img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
}

.expoertName {
  font-weight: bold;
  font-size: 13px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.expoertName span {
  font-weight: normal;
  font-size: 10px;
}

.comments {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.comments h3 {
  line-height: normal;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 3px;
}

.comments .date {
  font-size: 12px;
}

.comments li {
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
}

.comments li:hover {
  background: #eee;
  cursor: pointer;
}

.comments li:nth-child(1) .coment {
  background: #f1f1f1;
  padding: 5px;
}

.time {
  font-size: 12px;
  color: #db3466;
  margin-bottom: 5px;
  font-weight: bold;
}

.coment {
  letter-spacing: 1px;
  font-size: 13px;
  color: #616161;
  padding-bottom: 5px;
}

.bio {
  position: absolute;
  top: 10px;
  right: 10px;
}

.bio button {
  border: none;
  background: #fff;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.close button {
  border: none;
  background: #fff;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-cardback .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
/* .flip-card-front {
  background-color: #bbb;
  color: black;
} */

/* Style the back side */
.flip-card-back {
  display: none;
  padding: 30px;
  max-height: 300px;
  overflow: auto;
  line-height: 21px;
  position: relative;
  background-color: #e8e8e8;
  transform: rotateY(180deg);
}

.flip-cardback .flip-card-back {
  display: block;
}