.accordion.n2d-ppx-news {
border-color: #505050;
border-style: solid;
border-width: 0px;
border-radius: 20px;
margin: 0 auto;
height: 330px;
width: 929px;
 }
 
 .accordion.n2d-ppx-news > ul > li,
 .n2d-ppx-news .accordion-title,
 .n2d-ppx-news .accordion-content,
 .n2d-ppx-news .accordion-separator {
 float: left;
 }
 
 .accordion.n2d-ppx-news > ul > li {
background-color: var(--primary-color);
margin-right: -600px;
margin-bottom: -0px;
 }
 
 .n2d-ppx-news .accordion-select:checked ~ .accordion-separator {
margin-right: 600px;
margin-bottom: 0px;
 }
 
 .n2d-ppx-news .accordion-title,
 .n2d-ppx-news .accordion-select  {
background-color: white;
color: var(--primary-color);
width: 40px;
height: 330px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
border-radius: 10px;
 }
 
 .n2d-ppx-news .accordion-title span {
margin-bottom: 20px;
margin-left: 20px;
 }
 
 .n2d-ppx-news .accordion-select:hover ~ .accordion-title, .n2d-ppx-news .accordion-select:checked ~ .accordion-title {background-color: white; }
 
 .n2d-ppx-news .accordion-title span  {
     transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     -ms-writing-mode: lr-bt;
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     margin-left: 0px;
     line-height: 40px;
 }
 
 .n2d-ppx-news .accordion-content {
     background-color: var(--secondary-color);
     color: #ffffff;
     height: 283px;
     width: 552px;
     padding: 24px;
     -webkit-border-top-right-radius: 10px;
     -webkit-border-bottom-right-radius: 10px;
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 10px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     line-height: 1.3;
 }
 
 .n2d-ppx-news .accordion-title,
 .n2d-ppx-news .accordion-select:checked ~ .accordion-content {
     margin-right: 1px;
     margin-bottom: 1px;
     line-height: 1.3;
 }
 .accordion-content dd {font-size: 16px; line-height: 1.1; }
 
 /* Do not change following properties, they aren't
 generated automatically and are common for each slider. */
 .accordion {
     overflow: hidden;
 }
 
 .accordion > ul {
     margin: 0;
     padding: 0;
     list-style: none;
     width: 101%;
 }
 
 .accordion > ul > li,
 .accordion-title {
     position: relative;
 }
 
 .accordion-select {
     cursor: pointer;
     position: absolute;
     opacity: 0;
     top: 0;
     left: 0;
     margin: 0;
     z-index: 1;
 }
 
 .accordion-title span {
     display: block;
     position: absolute;
     bottom: 0px;
     width: 100%;
     white-space: nowrap;
 }
 
 .accordion-content {
     position: relative;
     overflow: auto;
 }
 
 .accordion-separator {
     transition: margin 0.3s ease 0.1s;
     -o-transition: margin 0.3s ease 0.1s;
     -moz-transition: margin 0.3s ease 0.1s;
     -webkit-transition: margin 0.3s ease 0.1s;
 }
 
.accordion .n2d-ppx-news-mobile {display: none;}
.accordion .n2d-ppx-news-mobile .accordion-title {width: 100%; height: auto; font-weight: 600;}

 
 @media (max-width: 1000px) {
      .accordion.n2d-ppx-news {width: 100%; }
      .accordion.n2d-ppx-news > ul > li {margin-right: -240px;}
      .n2d-ppx-news .accordion-content {width: 192px;}
      .n2d-ppx-news .accordion-select:checked ~ .accordion-separator {margin-right: 240px;}
      .accordion > ul {margin: 0 0 0 10%;}
 }
 @media (max-width: 700px) {
      .accordion > ul {margin: 0 0 0 5%;}
 }
 @media (max-width: 600px) {
       .accordion > ul {margin: 0 0 0 2%;}
  }
@media (max-width: 570px) {
    .accordion > ul {margin: 0;}
}
@media (max-width: 560px) {
     .accordion > ul {margin: 0;}
     .accordion.n2d-ppx-news {width: 100%; height: auto;}
     .accordion.n2d-ppx-news > ul > li {margin-right: 0;}
     .n2d-ppx-news .accordion-content {width: 100%;}
     .n2d-ppx-news .accordion-select:checked ~ .accordion-separator {margin-right: 0;}
}
@media (max-width: 559px) {
     .accordion.n2d-ppx-news {display: none;}
     .accordion.n2d-ppx-news-mobile {display: block; background: var(--secondary-color);}
     .accordion.n2d-ppx-news-mobile ul {margin: 40px auto; width: 75%; }
     .n2d-ppx-news-mobile ul .accordion-title {font-weight: 600; text-transform: uppercase; border-radius: 10px; border: 1px solid var(--primary-color); margin: 20px 0 10px -20px; padding: 10px; color: var(--primary-color); background-color: white;}
     .accordion.n2d-ppx-news-mobile ul li {margin: 0 0 0 20px; line-height: 1.4; color: white;}
}
@media (max-width: 400px) {
  .accordion.n2d-ppx-news-mobile ul {width: 95%; }
}