﻿.epgPSCarouselConfigurable { position: relative; overflow: hidden; padding: 57px 0; }
html[dir="RTL"] .epgPSCarouselConfigurable { margin-right:-210px;}
.epgPSCarouselConfigurable .innerWrap { overflow: hidden; }
.epgPSCarouselConfigurable .articles { max-width: 1180px; width: 100%; margin: 0 auto; overflow: hidden; }
.epgPSCarouselConfigurable .article { display: inline-block; box-sizing: border-box; float: left; }
html[dir="RTL"] .epgPSCarouselConfigurable .article{float:right;}
.epgPSCarouselConfigurable .article.first.first { margin-left: 0; }
html[dir="RTL"] .epgPSCarouselConfigurable .article.first.first { margin-right: 0; }
.epgPSCarouselConfigurable .article.last.last { margin-right: 0; }
html[dir="RTL"] .epgPSCarouselConfigurable .article.last.last { margin-left: 0; }
/* General pet-item styling (does not change based on column numbers) */
.epgPSCarouselConfigurable .article { position: relative; }
.epgPSCarouselConfigurable .article .hero { margin-bottom: 20px; }
.epgPSCarouselConfigurable .article .hero img { width: 100%; }

.epgPSCarouselConfigurable .article .content { margin-bottom: 50px; }
html[dir="RTL"] .epgPSCarouselConfigurable .article .content {text-align:right;}
.epgPSCarouselConfigurable .article .content h6 { font-size: 22px; margin-bottom: 10px; }

.epgPSCarouselConfigurable .article .abstract { }
.epgPSCarouselConfigurable .article .ctas { position: absolute; bottom: 1px; }
.epgPSCarouselConfigurable .article .ctas a { border: 0px; padding: 7px 22px 9px; font-size: 14px; font-family: 'Segoe UI', Arial, Verdana, Tahoma, Sans-Serif !important; cursor: pointer; line-height: normal; color: #fff; display: inline-block; }

/* 4-column styles! <--default */
.epgPSCarouselConfigurable.columns-4 .article { width: 22%; margin: 0 2%; }

/* 3-column styles! <--default */
.epgPSCarouselConfigurable.columns-3 .article { width: 30%; margin: 0 2.5%; }
html[dir="RTL"] .epgPSCarouselConfigurable.columns-3 .article.first.first { margin-left: 2.5%; }
html[dir="RTL"] .epgPSCarouselConfigurable.columns-3 .article.last { margin-right: 2.5%; }
/* 2-column styles! <--default */
.epgPSCarouselConfigurable.columns-2 .article { width: 46%; margin: 0 4%; }
html[dir="RTL"] .epgPSCarouselConfigurable.columns-2 .article.first { margin-left: 4%; }
html[dir="RTL"] .epgPSCarouselConfigurable.columns-2 .article.last { margin-right: 4%; }
/* 2-column styles! <--default */
.epgPSCarouselConfigurable.columns-1 .article { width: 100%; margin: 0 0 40px 0; }
.epgPSCarouselConfigurable.columns-1 .article.last { margin: 0 0 0 0; }

@media screen and (max-width: 1280px), only screen and (max-device-width: 1280px) {
    .epgPSCarouselConfigurable { width: 100% !important; margin-left: -20px !important; margin-right: -20px !important; padding: 57px 20px !important; }
    .epgPSCarouselConfigurable .innerWrap { padding: 0px !important; }
}

@media screen and (max-width: 500px), only screen and (max-device-width: 500px) {
}
