:root {
--root: 16;
--root-font-size: calc( 1px * var(--root) );
--color-brand: #E4013A;
--color-brand-hover: #b1002d;
--color-brand-dark: #d80035;
--color-white:#ffffff;
--color-bg: #F6F6F7;
--color-bg-dark:#EDEDEE;
--color-light-grey: #F8F8F8;
--color-text: #575757;
--color-text-dark: #4A4A4A;
--color-brand-alternate: #0055B8;
--gap: calc( ( 40/var(--root) ) * 1rem );
--section-padding: 80px;
--container-padding:60px;
--section-gap: 60px;
--font-family: "Neue Haas Unica";
--font-size: calc( ( 19/var(--root) ) * 1rem);
--font-color: var(--color-text);
--headline-color: var(--color-brand);
--transition: 300ms;
--box-shadow: 0px 2px 6px #ffffff
--upload-dir : "../../../wp-content/uploads/";
}
@media (max-width: 989px) {
:root {
--section-padding: 60px;
}
}
@media (max-width: 767px) {
:root {
--section-padding: 50px;
}
}
@media (max-width: 667px) {
:root {
--section-padding: 40px;
}
}
@media (max-width: 420px) {
:root {
--section-padding: 30px;
}
}
.slider {
width: 100%;
max-width: var(--page-width);
position: relative;
}
.slider.carousel + .controls-wrapper, .slider.carousel .tns-controls {
position: absolute;
top: 50%;
width: calc(100% + 80px);
left: -40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.slider.carousel + .controls-wrapper button, .slider.carousel .tns-controls button {
width: 40px;
height: 40px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media (max-width: 767px) {
.slider.carousel + .controls-wrapper button, .slider.carousel .tns-controls button {
width: 30px;
height: 30px;
}
}
.slider.carousel + .controls-wrapper button.prev, .slider.carousel + .controls-wrapper button[data-controls=prev], .slider.carousel .tns-controls button.prev, .slider.carousel .tns-controls button[data-controls=prev] {
background-image: url(//dirak.com/wp-content/uploads/arrow-left.svg);
}
.slider.carousel + .controls-wrapper button.next, .slider.carousel + .controls-wrapper button[data-controls=next], .slider.carousel .tns-controls button.next, .slider.carousel .tns-controls button[data-controls=next] {
background-image: url(//dirak.com/wp-content/uploads/arrow-right.svg);
}
.slider.carousel .acf-innerblocks-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.slider.carousel .acf-innerblocks-container .slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.slider.carousel .acf-innerblocks-container .slide .card-slide {
background-color: var(--color-bg);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.slider.image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
border-left: 10px solid white;
width: calc(100% - 700px);
width: 62%;
height: 100%;
position: absolute;
right: 0;
overflow: hidden;
}
@media (max-width: 1280px) {
.slider.image {
width: 50%;
}
}
@media (max-width: 1024px) {
.slider.image {
border-left: none;
}
}
.slider.image .tns-outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider.image .tns-outer .tns-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider.image .tns-outer .tns-inner .tns-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider.image + .controls-wrapper {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
max-width: 1480px;
width: 100%;
padding: 60px 40px;
padding-bottom: 40px;
margin: 0 auto;
}
.slider.image + .controls-wrapper .container {
max-width: 480px;
padding-left: 0px;
padding-right: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 1024px) {
.slider.image + .controls-wrapper .container {
padding-right: 0;
}
}
.slider.image + .controls-wrapper .slider-nav {
margin: 0;
}
.slider.image + .controls-wrapper .slider-nav li {
list-style: none;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-left: 2px solid #EBEBEB;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.slider.image + .controls-wrapper .slider-nav li span.icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: var(--color-text);
-webkit-mask-image: var(--background-image);
mask-image: var(--background-image);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
margin: 10px 25px;
}
.slider.image + .controls-wrapper .slider-nav li span.title {
font-size: 1.375rem;
font-weight: 400;
}
.slider.image + .controls-wrapper .slider-nav li:hover, .slider.image + .controls-wrapper .slider-nav li.tns-nav-active {
color: var(--color-brand);
border-left-color: var(--color-brand);
}
.slider.image + .controls-wrapper .slider-nav li:hover span.icon, .slider.image + .controls-wrapper .slider-nav li.tns-nav-active span.icon {
background-color: var(--color-brand);
}
.slider.image + .controls-wrapper .slider-controls {
margin-top: 60px;
margin-left: auto;
}
@media (max-width: 1024px) {
.slider.image + .controls-wrapper .slider-controls {
margin-top: 40px;
}
}
.slider.image + .controls-wrapper .slider-controls button {
width: 20px;
height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.slider.image + .controls-wrapper .slider-controls button.prev {
background-image: url(//dirak.com/wp-content/uploads/arrow-left.svg);
}
.slider.image + .controls-wrapper .slider-controls button.next {
background-image: url(//dirak.com/wp-content/uploads/arrow-right.svg);
}
.slider.image .slide {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.slider.image .slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.slider.tab {
background-color: var(--color-bg);
padding: 30px;
}
.slider.tab .slider.slider.carousel {
padding: 0 40px;
}
.slider.tab .slider.slider.carousel + .controls-wrapper, .slider.tab .slider.slider.carousel .tns-controls {
width: calc(100% + 20px);
left: -10px;
}
.slider.tab .slider.slider.carousel + .controls-wrapper button, .slider.tab .slider.slider.carousel + .controls-wrapper[data-controls=prev], .slider.tab .slider.slider.carousel .tns-controls button, .slider.tab .slider.slider.carousel .tns-controls[data-controls=prev] {
width: 20px;
height: 20px;
}
.slider.tab .slider.slider.carousel .card-slide .card-content, .slider.tab .slider.slider.carousel[data-controls=prev] .card-content {
display: none;
}
.slider.tab .slider-headline {
margin-left: 35px;
}
.slider.tab p a {
color: var(--color-brand);
}
.slider.tab .wp-block-table {
overflow: visible;
}
.slider.tab .wp-block-table table {
border: 0;
}
@media (max-width: 767px) {
.slider.tab .wp-block-table table tbody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media (max-width: 600px) {
.slider.tab .wp-block-table table tbody tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.slider.tab .wp-block-table table tbody tr td {
font-size: 1.25rem;
border: 0px;
line-height: 1;
padding: 5px;
}
@media (max-width: 767px) {
.slider.tab .wp-block-table table tbody tr td:first-child {
font-weight: 500;
}
}
@media (max-width: 600px) {
.slider.tab .wp-block-table table tbody tr td {
width: 100%;
}
}
.slider.tab .wp-block-table .wp-element-caption {
line-height: 1;
padding: 10px 0px 10px 40px;
display: inline-block;
background-image: url(//dirak.com/wp-content/uploads/info_icon.svg);
background-size: 27px;
background-repeat: no-repeat;
background-position: left center;
}
.slider.tab .wp-block-table .wp-element-caption a {
text-decoration: underline;
color: var(--color-brand);
}
.slider.tab .wp-block-table .wp-element-caption a:hover {
font-weight: 500;
}
.tab-slider-nav-container {
position: relative;
}
.tab-slider-nav-container .tab-slider-nav {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
}
.tab-slider-nav-container .tab-slider-nav li {
z-index: 9;
text-align: center;
font-size: 1.25rem;
font-weight: 500;
padding-bottom: 40px;
}
.tab-slider-nav-container .tab-slider-nav li.tns-nav-active {
background-color: var(--color-bg);
}
@media (max-width: 766px) {
.tab-slider-nav-container .tab-slider-nav li.tns-nav-active {
background-color: var(--color-white);
}
}
.tab-slider-nav-container .tab-slider-nav li.tns-nav-active .title:before {
background-color: var(--color-brand);
}
.tab-slider-nav-container .tab-slider-nav li .nav-image {
display: inline-block;
}
.tab-slider-nav-container .tab-slider-nav li .title {
margin-top: 20px;
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: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tab-slider-nav-container .tab-slider-nav li .title:before {
content: "";
width: 50%;
background-color: #C4C4C4;
display: inline-block;
height: 5px;
margin-bottom: 10px;
}
.tab-slider-nav-container .slider-controls {
position: absolute;
top: 50%;
width: calc(100% + 80px);
left: -40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
pointer-events: none;
}
.tab-slider-nav-container .slider-controls button {
width: 40px;
height: 40px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
pointer-events: all;
}
@media (max-width: 767px) {
.tab-slider-nav-container .slider-controls button {
width: 30px;
height: 30px;
}
}
.tab-slider-nav-container .slider-controls button.prev {
background-image: url(//dirak.com/wp-content/uploads/arrow-left.svg);
}
.tab-slider-nav-container .slider-controls button.next {
background-image: url(//dirak.com/wp-content/uploads/arrow-right.svg);
}