body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-wrapper{z-index:1000}.sl-wrapper button{border:0;background:0 0;font-size:24px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:1015}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1015}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-10px;height:30px;width:30px;line-height:30px;text-align:center;display:block;z-index:1015;font-family:arial sans-serif}.sl-wrapper .sl-navigation button.sl-next{right:40px}.sl-wrapper .sl-navigation button.sl-prev{left:40px}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block}.sl-wrapper .sl-image iframe{border:0;background:#000}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#fff;z-index:1005}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}}.anima1 {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.anima-none {
-webkit-transition: none!important;
-moz-transition: none!important;
transition: none!important;
}
.anima-transform {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.background-cover,
.bg-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}  .elpt-portfolio {
padding-top: 20px;
padding-bottom: 20px;
}
.elpt-portfolio-filter {
text-align: center;
padding-bottom: 20px;
}
.elpt-portfolio-filter .portfolio-filter-item {
border: 0;
background: #333;
color: #fff;
padding: 8px 12px;
margin-right: 3px;
margin-bottom: 3px;
font-size: 13px;
outline: none!important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.elpt-portfolio-filter .portfolio-filter-item:hover {
background: #555;
opacity: 0.9;
}
.elpt-portfolio-filter .portfolio-filter-item.item-active {
background: #555;
opacity: 0.8;
outline: none!important;
}
.elpt-portfolio-content:after {
content: '';
clear: both;
}
.elpt-portfolio-content .portfolio-item-wrapper {
float: none;
margin-bottom: 0;
width: 100%;
overflow: hidden;
background: transparent;
box-sizing: border-box !important;
}
@media (min-width: 768px) {
.elpt-portfolio-content .portfolio-item-wrapper {
float: left;
width: 50%;
}
}
.elpt-portfolio-content .portfolio-item-wrapper img {
display: block;
width: 100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background: #f4f4f4;
}
.elpt-portfolio-content .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.elpt-portfolio-content p {
display: none;
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-columns-3 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-columns-3 .portfolio-item-wrapper {
width: 33.33%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-columns-4 .portfolio-item-wrapper {
width: 25%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-columns-5 .portfolio-item-wrapper {
width: 20%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-columns-6 .portfolio-item-wrapper {
width: 16.66%;
}
}
@media (max-width: 992px) {
.elpt-portfolio-content.elpt-portfolio-columns-mobile-1 .portfolio-item-wrapper {
width: 100%;
}
}
@media (max-width: 992px) {
.elpt-portfolio-content.elpt-portfolio-columns-mobile-2 .portfolio-item-wrapper {
width: 50%;
}
}
@media (max-width: 992px) {
.elpt-portfolio-content.elpt-portfolio-columns-mobile-3 .portfolio-item-wrapper {
width: 33.33%;
}
} @media (max-width: 992px) { .elementor-widget-elpug .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-1 .portfolio-item-wrapper:nth-child(n) {
width: 100% !important;
} .elementor-widget-elpug .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-2 .portfolio-item-wrapper:nth-child(n) {
width: 50% !important;
} .elementor-widget-elpug .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-3 .portfolio-item-wrapper:nth-child(n) {
width: 33.33% !important;
}
} @media (max-width: 992px) { .elementor-widget-powerfolio_gallery .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-1 .portfolio-item-wrapper:nth-child(n) {
width: 100% !important;
} .elementor-widget-powerfolio_gallery .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-2 .portfolio-item-wrapper:nth-child(n) {
width: 50% !important;
} .elementor-widget-powerfolio_gallery .elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-columns-mobile-3 .portfolio-item-wrapper:nth-child(n) {
width: 33.33% !important;
}
} .elpt-portfolio-content.elpt-portfolio-grid-builder .portfolio-item-wrapper {
box-sizing: border-box !important;
}
.elpt-portfolio-content.elpt-portfolio-margin .portfolio-item-wrapper {
padding: 0;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
}
.elpt-portfolio-content.elpt-portfolio-style-box .portfolio-item {
height: 250px;
}
@media (min-width: 1400px) {
.elpt-portfolio-content.elpt-portfolio-style-box .portfolio-item {
height: 400px;
}
}
.elpt-portfolio-content.elpt-portfolio-style-box .portfolio-item img {
display: none;
}
.elpt-portfolio-content .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content .portfolio-item-infos {
position: absolute;
width: 100%;
top: 50%;
left: 0;
padding: 20px;
margin-top: -40px;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content .portfolio-item-title {
font-size: 18px;
font-weight: bold;
line-height: 1.1;
margin-bottom: 2px;
}
.elpt-portfolio-content .portfolio-item-desc {
font-size: 12px;
}
.elpt-portfolio-content .portfolio-item-category {
font-size: 11px;
font-style: italic;
display: inline-block;
opacity: 0.7;
line-height: 1;
}
.elpt-portfolio-content .elpt-portfolio-cat {
display: inline-block;
padding: 3px;
}
.elpt-portfolio .isotope-pager {
text-align: center;
}
.elpt-portfolio .isotope-pager a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
margin-right: 3px;
background: #333;
color: #fff;
font-size: 12px;
border-radius: 3px;
line-height: 1;
aspect-ratio: 1 / 1;
min-width: 30px;
}
.elpt-portfolio .isotope-pager a:focus,
.elpt-portfolio .isotope-pager a:hover,
.elpt-portfolio .isotope-pager a.active {
background: #555;
opacity: 0.8;
}
.elpt-portfolio-style-box.zoom_effect img {
display: block !important;
min-height: 100%;
max-width: auto;
width: auto;
object-fit: cover;
}
.elpt-portfolio-content.zoom_effect .portfolio-item {
overflow: hidden;
}
.elpt-portfolio-content.zoom_effect .portfolio-item img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.elpt-portfolio-content.zoom_effect .portfolio-item:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.elpt-portfolio-content.simple .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.simple .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.simple .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.simple .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.simple .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.simple p {
display: none;
}
.elpt-portfolio-content.hover1 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.elpt-portfolio-content.hover1 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
.elpt-portfolio-content.hover1 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover1 .portfolio-item-infos-wrapper {
position: absolute;
transform: translateY(40%);
-webkit-transform: translateY(40%);
-moz-transform: translateY(40%);
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover1 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover1 p {
display: none;
}
.elpt-portfolio-content.hover2 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.elpt-portfolio-content.hover2 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
.elpt-portfolio-content.hover2 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover2 .portfolio-item-infos-wrapper {
position: absolute;
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover2 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover2 p {
display: none;
}
.elpt-portfolio-content.hover3 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.elpt-portfolio-content.hover3 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
}
.elpt-portfolio-content.hover3 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover3 .portfolio-item-infos-wrapper {
position: absolute;
transform: translateX(-40%);
-webkit-transform: translateX(-40%);
-moz-transform: translateX(-40%);
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover3 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover3 p {
display: none;
}
.elpt-portfolio-content.hover4 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.elpt-portfolio-content.hover4 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
}
.elpt-portfolio-content.hover4 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover4 .portfolio-item-infos-wrapper {
position: absolute;
transform: translateX(40%);
-webkit-transform: translateX(40%);
-moz-transform: translateX(40%);
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover4 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover4 p {
display: none;
}
.elpt-portfolio-content.hover5 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover5 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
visibility: visible;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
}
.elpt-portfolio-content.hover5 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover5 .portfolio-item-infos-wrapper {
position: absolute;
transform: translate(30px, -30px);
-webkit-transform: translate(30px, -30px);
-moz-transform: translate(30px, -30px);
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover5 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover5 p {
display: none;
}
.elpt-portfolio-content.hover6 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow: visible;
}
.elpt-portfolio-content.hover6 .portfolio-item img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 1;
}
.elpt-portfolio-content.hover6 .portfolio-item:hover .portfolio-item-infos-wrapper {
visibility: visible;
transform: translate(4px, -4px);
-webkit-transform: translate(4px, -4px);
-moz-transform: translate(4px, -4px);
opacity: 1;
}
.elpt-portfolio-content.hover6 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover6 .portfolio-item:hover img {
transform: translate(-4px, 4px);
-webkit-transform: translate(-4px, 4px);
-moz-transform: translate(-4px, 4px);
opacity: 1;
}
.elpt-portfolio-content.hover6 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover6 .portfolio-item-infos {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover6 p {
display: none;
}
.elpt-portfolio-content.hover7 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover7 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover7 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateX(0px) !important;
-webkit-transform: translateX(0px) !important;
-moz-transform: translateX(0px) !important;
}
.elpt-portfolio-content.hover7 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover7 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
transform: translateX(-60px);
-webkit-transform: translateX(-60px);
-moz-transform: translateX(-60px);
}
.elpt-portfolio-content.hover7 p {
display: none;
}
.elpt-portfolio-content.hover8 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover8 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover8 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateX(0px) !important;
-webkit-transform: translateX(0px) !important;
-moz-transform: translateX(0px) !important;
}
.elpt-portfolio-content.hover8 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover8 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
transform: translateX(60px);
-webkit-transform: translateX(60px);
-moz-transform: translateX(60px);
}
.elpt-portfolio-content.hover8 p {
display: none;
}
.elpt-portfolio-content.hover9 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover9 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover9 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover9 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover9 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
transform: translateY(-60px);
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
}
.elpt-portfolio-content.hover9 p {
display: none;
}
.elpt-portfolio-content.hover10 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover10 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover10 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover10 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover10 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
transform: translateY(60px);
-webkit-transform: translateY(60px);
-moz-transform: translateY(60px);
}
.elpt-portfolio-content.hover10 p {
display: none;
}
.elpt-portfolio-content.hover11 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover11 .portfolio-item:hover {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover11 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover11 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover11 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover11 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover11 p {
display: none;
}
.elpt-portfolio-content.hover12 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover12 .portfolio-item .portfolio-item-infos-wrapper {
background: #111;
}
.elpt-portfolio-content.hover12 .portfolio-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.elpt-portfolio-content.hover12 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover12 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover12 .portfolio-item:hover img {
transform: translateX(80px);
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
}
.elpt-portfolio-content.hover12 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0.9;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
}
.elpt-portfolio-content.hover12 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover12 p {
display: none;
}
.elpt-portfolio-content.hover13 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover13 .portfolio-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.elpt-portfolio-content.hover13 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
left: 50%;
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover13 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover13 .portfolio-item:hover img {
transform: translateX(-20px);
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
}
.elpt-portfolio-content.hover13 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 100%;
width: 50%;
height: 100%;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0.9;
}
.elpt-portfolio-content.hover13 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover13 p {
display: none;
}
.elpt-portfolio-content.hover14 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover14 .portfolio-item img { }
.elpt-portfolio-content.hover14 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
top: 50%;
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover14 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover14 .portfolio-item-infos-wrapper {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 50%;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0.9;
}
.elpt-portfolio-content.hover14 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover14 p {
display: none;
}
.elpt-portfolio-content.hover14b .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover14b .portfolio-item img { }
.elpt-portfolio-content.hover14b .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
bottom: 0%;
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover14b .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover14b .portfolio-item-infos-wrapper {
position: absolute;
top: auto;
bottom: -70px;
left: 0;
width: 100%;
height: 70px;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0.9;
}
.elpt-portfolio-content.hover14b .portfolio-item-infos {
opacity: 1;
position: relative;
top: 0 !important;
margin-top: 0 !important;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
padding: 15px;
padding-bottom: 0px;
}
.elpt-portfolio-content.hover14b .portfolio-item-infos .portfolio-item-title {
margin-bottom: 5px;
display: block;
}
.elpt-portfolio-content.hover14b .portfolio-item-infos .portfolio-item-category {
display: block;
}
.elpt-portfolio-content.hover14b p {
display: none;
}
.elpt-portfolio-content.hover15 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover15 .portfolio-item .portfolio-item-infos-wrapper {
height: 50%;
top: 50%;
}
.elpt-portfolio-content.hover15 .portfolio-item img { }
.elpt-portfolio-content.hover15 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
.elpt-portfolio-content.hover15 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover15 .portfolio-item:hover img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
.elpt-portfolio-content.hover15 p {
display: none;
}
.elpt-portfolio-content.hover16 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.elpt-portfolio-content.hover16 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 0.95;
}
.elpt-portfolio-content.hover16 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
}
.elpt-portfolio-content.hover16 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) !important;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.elpt-portfolio-content.hover16 .portfolio-item-infos {
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover16 .portfolio-item-title-span,
.elpt-portfolio-content.hover16 .portfolio-item-category {
display: inline-block;
padding: 3px;
background: #000;
}
.elpt-portfolio-content.hover16 p {
display: none;
}
.elpt-portfolio-content.hover17 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
}
.elpt-portfolio-content.hover17 .portfolio-item img { }
.elpt-portfolio-content.hover17 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
bottom: 0%;
-webkit-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 9px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover17 .portfolio-item:hover .portfolio-item-infos {
opacity: 1!important;
}
.elpt-portfolio-content.hover17 .portfolio-item-infos-wrapper {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0.9;
}
.elpt-portfolio-content.hover17 .portfolio-item-infos {
opacity: 1;
position: relative;
top: 0 !important;
margin-top: 0 !important;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
padding: 15px;
padding-bottom: 0px;
}
.elpt-portfolio-content.hover17 .portfolio-item-infos .portfolio-item-title {
margin-bottom: 5px;
display: block;
}
.elpt-portfolio-content.hover17 .portfolio-item-infos .portfolio-item-category {
display: block;
}
.elpt-portfolio-content.hover17 p {
display: none;
}
.elpt-portfolio-content.hover18 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover18 .portfolio-item:hover {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover18 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
}
.elpt-portfolio-content.hover18 .portfolio-item:hover .portfolio-item-infos {
opacity: 1 !important;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
.elpt-portfolio-content.hover18 .portfolio-item-infos-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover18 .portfolio-item-infos {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
}
.elpt-portfolio-content.hover19 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover19 .portfolio-item:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
}
.elpt-portfolio-content.hover19 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
}
.elpt-portfolio-content.hover19 .portfolio-item:hover .portfolio-item-infos {
opacity: 1 !important;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
}
.elpt-portfolio-content.hover19 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.elpt-portfolio-content.hover19 .portfolio-item-infos {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
}
.elpt-portfolio-content.hover20 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover20 .portfolio-item img {
filter: grayscale(0%);
}
.elpt-portfolio-content.hover20 .portfolio-item:hover img {
filter: grayscale(100%);
}
.elpt-portfolio-content.hover20 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.elpt-portfolio-content.hover20 .portfolio-item:hover .portfolio-item-infos {
opacity: 1 !important;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.elpt-portfolio-content.hover20 .portfolio-item-infos-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.elpt-portfolio-content.hover20 .portfolio-item-infos {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
.elpt-portfolio-content.hover21 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.elpt-portfolio-content.hover21 .portfolio-item img {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.elpt-portfolio-content.hover21 .portfolio-item:hover .portfolio-item-infos-wrapper {
opacity: 1;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
.elpt-portfolio-content.hover21 .portfolio-item:hover .portfolio-item-infos {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.elpt-portfolio-content.hover21 .portfolio-item-infos-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}  .elpt-portfolio-content.hover22 .portfolio-item-wrapper.elpt-layout-content-below {
display: flex;
flex-direction: column;
} .elpt-portfolio-content.hover22 .portfolio-item {
display: block;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
} .elpt-portfolio-content.hover22 .portfolio-item img.elpt-main-image {
display: none;
} .elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper {
position: relative;
top: auto;
bottom: auto;
left: auto;
width: 100%;
height: auto;
min-height: 60px;
background: transparent;
color: #fff;
text-align: left;
z-index: 9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
} .elpt-portfolio-content.hover22 .portfolio-item-infos {
opacity: 1;
position: relative;
top: 0 !important;
margin-top: 0 !important;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
padding: 15px 0;
} .elpt-portfolio-content.hover22 .portfolio-item-infos .portfolio-item-title {
margin-bottom: 5px;
display: block;
} .elpt-portfolio-content.hover22 .portfolio-item-infos .portfolio-item-desc {
display: block;
margin-bottom: 8px;
font-size: 13px;
line-height: 1.4;
opacity: 0.9;
} .elpt-portfolio-content.hover22 .portfolio-item-infos .portfolio-item-category {
display: block;
} .elpt-portfolio-content.hover22 .portfolio-item-wrapper:hover .portfolio-item {
-webkit-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
box-shadow: 0px 4px 14px -1px rgba(0, 0, 0, 0.24);
} .elpt-portfolio-content.hover22 p {
display: none;
}  .elpt-portfolio-content .portfolio-item-icon-wrapper {
margin-bottom: 10px;
line-height: 1;
} .elpt-portfolio-content .powerfolio-item-icon {
font-size: 24px;
color: inherit;
display: inline-block;
line-height: 1;
} .elpt-portfolio-content .powerfolio-item-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
}  .elpt-portfolio-content.hover22 .portfolio-item-infos.has-icon {
display: flex;
align-items: flex-start;
gap: 15px;
} .elpt-portfolio-content.hover22 .portfolio-item-text-content {
flex: 1;
min-width: 0;
} .elpt-portfolio-content.hover22 .portfolio-item-icon-wrapper {
margin-bottom: 0;
flex-shrink: 0;
} .elpt-portfolio-content.hover22 .portfolio-item-infos.has-icon {
flex-direction: row;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos.has-icon .portfolio-item-icon-wrapper {
order: 2;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos.has-icon .portfolio-item-text-content {
order: 1;
} .elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: right"] .portfolio-item-infos.has-icon {
flex-direction: row-reverse;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: right"] .portfolio-item-infos.has-icon .portfolio-item-icon-wrapper {
order: 1;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: right"] .portfolio-item-infos.has-icon .portfolio-item-text-content {
order: 2;
text-align: right;
} .elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: center"] .portfolio-item-infos.has-icon {
flex-direction: column;
align-items: center;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: center"] .portfolio-item-infos.has-icon .portfolio-item-icon-wrapper {
order: 1;
margin-bottom: 10px;
}
.elpt-portfolio-content.hover22 .portfolio-item-infos-wrapper[style*="text-align: center"] .portfolio-item-infos.has-icon .portfolio-item-text-content {
order: 2;
text-align: center;
}
.element-hsize-1 {
height: 279px;
}
.element-hsize-1 .portfolio-item {
height: 279px;
}
.element-hsize-2 {
height: 558px;
}
.element-hsize-2 .portfolio-item {
height: 558px;
}
.element-size-1 {
width: 100%;
height: 279px;
}
.element-size-1 .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.element-size-1 {
width: 50%;
}
}
@media (min-width:992px) {
.element-size-1 {
width: 25%;
}
}
.element-size-2 {
width: 100%;
}
@media (min-width:992px) {
.element-size-2 {
width: 50%;
}
}
.element-size-3 {
width: 100%;
}
@media (min-width:992px) {
.element-size-3 {
width: 75%;
}
}
.element-size-4 {
width: 100%;
}
.element-size-4 .portfolio-item {
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper {
box-sizing: border-box;
padding: 0px !important;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(6),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(9),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(12) {
width: 100%;
height: 558px;
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(6),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(9),
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(12) {
width: 50%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(3) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(6) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(9) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-1 .portfolio-item-wrapper:nth-child(12) .portfolio-item {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper {
box-sizing: border-box;
padding: 0px !important;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper:nth-child(3n+1) {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-2 .portfolio-item-wrapper:nth-child(3n+1) .portfolio-item {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper {
padding: 0px !important;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(1),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(7),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(9) {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(1) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(7) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(9) .portfolio-item {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(5),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(11) {
width: 100%;
height: 558px;
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(5),
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(11) {
width: 50%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(3) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(5) .portfolio-item,
.elpt-portfolio-content.elpt-portfolio-special-grid-3 .portfolio-item-wrapper:nth-child(11) .portfolio-item {
height: 558px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper {
box-sizing: border-box;
padding: 0px !important;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper:nth-child(2n) {
width: 100%;
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-4 .portfolio-item-wrapper:nth-child(2n) {
width: 50%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper {
padding: 5px !important;
margin-bottom: 5px;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper {
width: 25%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(4),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(9),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(10) {
width: 100%;
}
@media (min-width:992px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(3),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(4),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(9),
.elpt-portfolio-content.elpt-portfolio-special-grid-5 .portfolio-item-wrapper:nth-child(10) {
width: 50%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper {
padding: 5px !important;
margin-bottom: 5px;
width: 33.33%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper:nth-child(4),
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper:nth-child(9),
.elpt-portfolio-content.elpt-portfolio-special-grid-6 .portfolio-item-wrapper:nth-child(11) {
width: 66.66%;
}      .elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper {
box-sizing: border-box;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
margin-bottom: 5px;
width: 100%;
height: 279px;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper .portfolio-item {
height: 279px;
}
@media (min-width: 768px) {
.elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) { .elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper {
width: 33.33%;
} .elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper:nth-child(6n+4) {
width: 60%;
margin-left: 20%;
margin-right: 20%;
} .elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper:nth-child(6n+5),
.elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper:nth-child(6n) {
width: 50%;
}
}
.elpt-portfolio-content.elpt-portfolio-special-grid-7 .portfolio-item-wrapper img {
display: none;
}
.elpt-portfolio-content.elpt-portfolio-grid-builder.elpt-portfolio-margin { margin-bottom: 5px;
}
.elpt-portfolio-content.elpt-portfolio-grid-builder .portfolio-item-wrapper {
width: 25%;
}
.elpt-portfolio-content.elpt-portfolio-grid-builder .portfolio-item-wrapper * {
box-sizing: border-box;
}
.elpt-portfolio-content.elpt-portfolio-grid-builder .portfolio-item-wrapper img {
display: none;
}   .elpt-portfolio-content.elpt-portfolio-carousel .owl-dots button,
.elpt-portfolio-content.elpt-portfolio-carousel .owl-nav button {
display: inline-block;
padding: 0;
margin: 0;
border: none;
background: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
color: inherit;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: normal;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.elpt-portfolio-content.elpt-portfolio-carousel .portfolio-item-wrapper {
float: none;
width: 100%;
display: block;
height: 250px;
}
@media (min-width: 1400px) {
.elpt-portfolio-content.elpt-portfolio-carousel .portfolio-item-wrapper {
height: 400px;
}
}
.elpt-portfolio-content.elpt-portfolio-carousel .portfolio-item {
height: 250px;
}
@media (min-width: 1400px) {
.elpt-portfolio-content.elpt-portfolio-carousel .portfolio-item {
height: 400px;
}
}
.elpt-portfolio-content.elpt-portfolio-carousel .portfolio-item img {
display: none;
} .elpt-portfolio-content .portfolio-item.elpt-has-hover-image {
position: relative;
overflow: hidden;
}
.elpt-portfolio-content .portfolio-item.elpt-has-hover-image .elpt-main-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block !important;
transition: opacity 0.3s ease-in-out;
}
.elpt-portfolio-content .portfolio-item.elpt-has-hover-image .elpt-hover-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
display: block !important;
transition: opacity 0.3s ease-in-out;
}
.elpt-portfolio-content .portfolio-item.elpt-has-hover-image:hover .elpt-main-image {
opacity: 0;
}
.elpt-portfolio-content .portfolio-item.elpt-has-hover-image:hover .elpt-hover-image {
opacity: 1;
} .elpt-portfolio-content .portfolio-item.elpt-has-hover-image .portfolio-item-infos-wrapper {
display: none !important;
}
.elpt-portfolio-content .portfolio-item.elpt-has-hover-image:hover .portfolio-item-infos-wrapper {
display: none !important;
}.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent; position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden; }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
background: none;
color: inherit;
border: none;
padding: 0 !important;
font: inherit; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; } .no-js .owl-carousel {
display: block; } .owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
animation-name: fadeOut; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } } .owl-height {
transition: height 500ms ease-in-out; } .owl-carousel .owl-item { }
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
max-height: 0; }
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(//galliganmedia.com/wp-content/plugins/portfolio-elementor/elementor/../vendor/owl.carousel/assets/owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}.anima1 {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.anima-none {
-webkit-transition: none!important;
-moz-transition: none!important;
transition: none!important;
}
.anima-transform {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.background-cover,
.bg-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} .pwgd-post-grid {
box-sizing: border-box;
}
.pwgd-post-grid * {
box-sizing: border-box;
}
.pwgd-post-grid .pwgd-post-grid-content:after {
content: '';
display: block;
clear: both;
}
.pwgd-post-grid .pwgd-post-grid-item-wrapper {
padding: 10px;
}
.pwgd-post-grid .pwgd-post-grid-item {
padding: 10px;
position: relative;
overflow: hidden;
min-height: 100%;
}
.pwgd-post-grid .pwgd-post-grid-item-meta-wrapper {
padding-top: 5px;
padding-bottom: 10px;
}
.pwgd-post-grid .pwgd-post-grid-item-meta-wrapper .pwgd-post-grid-item-meta {
display: inline-block;
margin-right: 5px;
font-size: 12px;
background: #f4f4f4;
padding: 2px 5px;
}
.pwgd-post-grid .pwgd-post-grid-item-meta-wrapper .pwgd-post-grid-item-meta a {
text-decoration: none;
}
.pwgd-post-grid .pwgd-post-grid-item-meta-icon {
margin-right: 3px;
}
.pwgd-post-grid .pwgd-post-grid-item-img-wrapper .pwgd-post-grid-item-img-link {
display: block;
background: no-repeat center center #eeeeee;
background-image: url(//galliganmedia.com/wp-content/plugins/portfolio-elementor/elementor/../assets/img/post.png);
min-height: 120px;
background-size: cover;
position: relative;
}
.pwgd-post-grid .pwgd-post-grid-item-title-wrapper .pwgd-post-grid-item-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 20px;
}
.pwgd-post-grid .pwgd-post-grid-item-title-wrapper .pwgd-post-grid-item-title a {
text-decoration: none;
}
.pwgd-post-grid .pwgd-post-grid-item-btn-wrapper {
margin-top: 10px;
}
.pwgd-post-grid .pwgd-post-grid-item-btn-wrapper .pwgd-post-grid-item-btn {
display: inline-block;
padding: 3px 6px;
border-radius: 6px;
text-decoration: none;
background: #f4f4f4;
}
.pwgd-post-grid .pwgd-post-grid-pagination {
margin-top: 20px;
text-align: center;
}
.pwgd-post-grid .pwgd-post-grid-pagination a {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
border: 1px solid #ddd;
border-radius: 3px;
}
.pwgd-posts-filter {
text-align: center;
padding-bottom: 20px;
}
.pwgd-posts-filter .posts-filter-item {
border: 0;
background: #333;
color: #fff;
padding: 8px 12px;
margin-right: 3px;
margin-bottom: 3px;
font-size: 13px;
outline: none!important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.pwgd-posts-filter .posts-filter-item:hover {
background: #555;
opacity: 0.9;
}
.pwgd-posts-filter .posts-filter-item.item-active {
background: #555;
opacity: 0.8;
outline: none!important;
}
.pwgd-posts-filter .pwgd-post-grid-item-img-link {
background-image: url(//galliganmedia.com/wp-content/plugins/portfolio-elementor/elementor/../assets/img/product.png);
}
.pwgd-product-grid .pwgd-on-sale-badge {
position: absolute;
display: block;
left: 10px;
top: 10px;
padding: 4px 7px;
background: #31b54e;
text-transform: uppercase;
font-size: 11px;
color: #fff;
}
.pwgd-product-grid .pwgd-post-grid-item-pricing .product-price-sale {
display: inline-block;
margin-right: 6px;
text-decoration: line-through;
opacity: 0.7;
}
.pwgd-post-grid-cols-grid .pwgd-post-grid-content {
display: grid;
grid-auto-rows: 1fr;
}
.pwgd-post-grid-cols-grid .pwgd-post-grid-content:after {
display: none;
}
.pwgd-post-grid-cols-grid.pwgd-1columns .pwgd-post-grid-content {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-grid.pwgd-2columns .pwgd-post-grid-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-grid.pwgd-3columns .pwgd-post-grid-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-grid.pwgd-3columns .pwgd-post-grid-content {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-grid.pwgd-4columns .pwgd-post-grid-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-grid.pwgd-4columns .pwgd-post-grid-content {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-grid.pwgd-5columns .pwgd-post-grid-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-grid.pwgd-5columns .pwgd-post-grid-content {
grid-template-columns: repeat(5, 1fr);
}
}
.pwgd-post-grid-cols-float .pwgd-post-grid-item-wrapper {
float: left;
}
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-1columns .pwgd-post-grid-item-wrapper {
float: none;
width: 100%;
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-2columns .pwgd-post-grid-item-wrapper {
width: 50%;
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-3columns .pwgd-post-grid-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-3columns .pwgd-post-grid-item-wrapper {
width: 33.33%;
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-4columns .pwgd-post-grid-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-4columns .pwgd-post-grid-item-wrapper {
width: 25%;
}
}
@media (min-width: 768px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-5columns .pwgd-post-grid-item-wrapper {
width: 50%;
}
}
@media (min-width:992px) {
.pwgd-post-grid-cols-float.pwgd-post-grid-cols.pwgd-5columns .pwgd-post-grid-item-wrapper {
width: 20%;
}
}
.pwgd-post-grid.grid-style-classic .pwgd-post-grid-item-img-link {
display: block;
height: 300px;
}
.pwgd-post-grid.grid-style-classic .pwgd-post-grid-item-img-link img {
display: none;
}
.pwgd-post-grid.grid-style-style2 .pwgd-post-grid-item {
width: 100%;
display: flex;
}
.pwgd-post-grid.grid-style-style2 .pwgd-post-grid-item-img-wrapper {
width: 30%;
}
.pwgd-post-grid.grid-style-style2 .pwgd-post-grid-item-img-link {
display: block;
min-height: 100%;
}
.pwgd-post-grid.grid-style-style2 .pwgd-post-grid-item-img-link img {
display: none;
}
.pwgd-post-grid.grid-style-style2 .pwgd-post-grid-item-content {
width: 70%;
padding: 20px;
}
.pwgd-post-grid.grid-style-style3:after {
content: '';
display: block;
clear: both;
}
.pwgd-post-grid.grid-style-style3 .pwgd-post-grid-item {
position: relative;
padding: 0 !important;
}
.pwgd-post-grid.grid-style-style3 .pwgd-post-grid-item-img-wrapper {
position: relative;
z-index: 1;
}
.pwgd-post-grid.grid-style-style3 .pwgd-post-grid-item-img-link {
min-height: 250px;
}
.pwgd-post-grid.grid-style-style3 .pwgd-post-grid-item-img-link img {
display: none;
}
.pwgd-post-grid.grid-style-style3 .pwgd-post-grid-item-meta-wrapper {
position: absolute;
top: -5px;
left: 0;
z-index: 9;
margin: 0 !important;
padding: 7px !important;
}
.pwgd-product-grid.grid-style-style3 .pwgd-post-grid-item-meta-wrapper {
left: auto;
right: 0;
}
.pwgd-post-grid.grid-style-style4:after {
content: '';
display: block;
clear: both;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item {
position: relative;
padding: 0 !important;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-img-wrapper {
position: relative;
z-index: 1;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-img-link {
height: 300px;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-img-link img {
display: none;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-img-link:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, #020024 0%, #000000 8%, rgba(0, 212, 255, 0) 100%);
opacity: 0.7;
z-index: 2;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-meta-wrapper {
position: absolute;
top: -5px;
left: 0;
z-index: 9;
margin: 0 !important;
padding: 7px !important;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-btn-wrapper {
display: none;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-text-wrapper {
display: none;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-title-wrapper {
position: absolute;
bottom: 0;
left: 0;
padding: 10px !important;
z-index: 7;
margin-bottom: 0;
}
.pwgd-post-grid.grid-style-style4 .pwgd-post-grid-item-content {
padding: 0 !important; }@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:calc(10px * 2);padding:calc(var(--plyr-control-spacing,10px) * 2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(calc(10px * -4));transform:translateY(calc(var(--plyr-control-spacing,10px) * -4))}.plyr__caption{background:rgba(0,0,0,.8);background:var(--plyr-captions-background,rgba(0,0,0,.8));border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:0 0;border:0;border-radius:3px;border-radius:var(--plyr-control-radius,3px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:calc(10px * .7);padding:calc(var(--plyr-control-spacing,10px) * .7);position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}a.plyr__control{text-decoration:none}a.plyr__control::after,a.plyr__control::before{display:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:calc(10px / 4);margin-left:calc(var(--plyr-control-spacing,10px)/ 4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:calc(10px / 4);padding-left:calc(var(--plyr-control-spacing,10px)/ 4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 calc(10px / 2);padding:0 calc(var(--plyr-control-spacing,10px)/ 2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr__controls:empty{display:none}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);background:var(--plyr-menu-background,rgba(255,255,255,.9));border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-menu-shadow,0 1px 2px rgba(0,0,0,.15));color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border:var(--plyr-menu-arrow-size,4px) solid transparent;border-top-color:rgba(255,255,255,.9);border-top-color:var(--plyr-menu-background,rgba(255,255,255,.9));content:'';height:0;position:absolute;right:calc(((18px / 2) + calc(10px * .7)) - (4px / 2));right:calc(((var(--plyr-control-icon-size,18px)/ 2) + calc(var(--plyr-control-spacing,10px) * .7)) - (var(--plyr-menu-arrow-size,4px)/ 2));top:100%;width:0}.plyr__menu__container [role=menu]{padding:calc(10px * .7);padding:calc(var(--plyr-control-spacing,10px) * .7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding-bottom:calc(calc(10px * .7)/ 1.5);padding-bottom:calc(calc(var(--plyr-control-spacing,10px) * .7)/ 1.5);padding-left:calc(calc(10px * .7) * 1.5);padding-left:calc(calc(var(--plyr-control-spacing,10px) * .7) * 1.5);padding-right:calc(calc(10px * .7) * 1.5);padding-right:calc(calc(var(--plyr-control-spacing,10px) * .7) * 1.5);padding-top:calc(calc(10px * .7)/ 1.5);padding-top:calc(calc(var(--plyr-control-spacing,10px) * .7)/ 1.5);-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;border:var(--plyr-menu-item-arrow-size,4px) solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:calc(calc(10px * .7) * 4);padding-right:calc(calc(var(--plyr-control-spacing,10px) * .7) * 4)}.plyr__menu__container .plyr__control--forward::after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:calc((calc(10px * .7) * 1.5) - 4px);right:calc((calc(var(--plyr-control-spacing,10px) * .7) * 1.5) - var(--plyr-menu-item-arrow-size,4px))}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:calc(10px * .7);margin:calc(var(--plyr-control-spacing,10px) * .7);margin-bottom:calc(calc(10px * .7)/ 2);margin-bottom:calc(calc(var(--plyr-control-spacing,10px) * .7)/ 2);padding-left:calc(calc(10px * .7) * 4);padding-left:calc(calc(var(--plyr-control-spacing,10px) * .7) * 4);position:relative;width:calc(100% - (calc(10px * .7) * 2));width:calc(100% - (calc(var(--plyr-control-spacing,10px) * .7) * 2))}.plyr__menu__container .plyr__control--back::after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:calc((calc(10px * .7) * 1.5) - 4px);left:calc((calc(var(--plyr-control-spacing,10px) * .7) * 1.5) - var(--plyr-menu-item-arrow-size,4px))}.plyr__menu__container .plyr__control--back::before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:'';height:1px;left:0;margin-top:calc(calc(10px * .7)/ 2);margin-top:calc(calc(var(--plyr-control-spacing,10px) * .7)/ 2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:calc(10px * .7);padding-left:calc(var(--plyr-control-spacing,10px) * .7)}.plyr__menu__container .plyr__control[role=menuitemradio]::after,.plyr__menu__container .plyr__control[role=menuitemradio]::before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]::before{background:rgba(0,0,0,.1);content:'';display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]::after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{background:#00b3ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before{background:rgba(35,40,47,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:calc((calc(10px * .7) - 2) * -1);margin-right:calc((calc(var(--plyr-control-spacing,10px) * .7) - 2) * -1);overflow:hidden;padding-left:calc(calc(10px * .7) * 3.5);padding-left:calc(calc(var(--plyr-control-spacing,10px) * .7) * 3.5);pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:calc(13px * 2);border-radius:calc(var(--plyr-range-thumb-height,13px) * 2);color:#00b3ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));display:block;height:calc((3px * 2) + 13px);height:calc((var(--plyr-range-thumb-active-shadow-width,3px) * 2) + var(--plyr-range-thumb-height,13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor 0,transparent 0);background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px);-webkit-appearance:none;margin-top:calc(((13px - 5px)/ 2) * -1);margin-top:calc(((var(--plyr-range-thumb-height,13px) - var(--plyr-range-track-height,5px))/ 2) * -1)}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px);margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{outline-color:#00b3ff;outline-color:var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));outline-offset:2px;outline-style:dotted;outline-width:3px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:rgba(255,255,255,.9);background:var(--plyr-tooltip-background,rgba(255,255,255,.9));border-radius:3px;border-radius:var(--plyr-tooltip-radius,3px);bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:calc(calc(10px / 2) * 2);margin-bottom:calc(calc(var(--plyr-control-spacing,10px)/ 2) * 2);opacity:0;padding:calc(10px / 2) calc(calc(10px / 2) * 1.5);padding:calc(var(--plyr-control-spacing,10px)/ 2) calc(calc(var(--plyr-control-spacing,10px)/ 2) * 1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-left:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-right:4px solid transparent;border-right:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-top:4px solid rgba(255,255,255,.9);border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,rgba(255,255,255,.9));bottom:calc(4px * -1);bottom:calc(var(--plyr-tooltip-arrow-size,4px) * -1);content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:calc((18px / 2) + calc(10px * .7));left:calc((var(--plyr-control-icon-size,18px)/ 2) + calc(var(--plyr-control-spacing,10px) * .7))}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:calc((18px / 2) + calc(10px * .7));right:calc((var(--plyr-control-icon-size,18px)/ 2) + calc(var(--plyr-control-spacing,10px) * .7));transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{left:calc(13px * .5);left:calc(var(--plyr-range-thumb-height,13px) * .5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:calc(13px * -.5);margin-left:calc(var(--plyr-range-thumb-height,13px) * -.5);margin-right:calc(13px * -.5);margin-right:calc(var(--plyr-range-thumb-height,13px) * -.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height,13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px));left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:calc((5px / 2) * -1);margin-top:calc((var(--plyr-range-track-height,5px)/ 2) * -1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(35,40,47,.6) 25%,transparent 25%,transparent 50%,rgba(35,40,47,.6) 50%,rgba(35,40,47,.6) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 25%,transparent 25%,transparent 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25);background-color:var(--plyr-video-progress-buffered-background,rgba(255,255,255,.25))}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6))}.plyr__volume{align-items:center;display:flex;max-width:110px;min-width:80px;position:relative;width:20%}.plyr__volume input[type=range]{margin-left:calc(10px / 2);margin-left:calc(var(--plyr-control-spacing,10px)/ 2);margin-right:calc(10px / 2);margin-right:calc(var(--plyr-control-spacing,10px)/ 2);position:relative;z-index:2}.plyr--is-ios .plyr__volume{min-width:0;width:auto}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b3ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(193,200,209,.6);background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1))}.plyr--audio .plyr__progress__buffer{color:rgba(193,200,209,.6);color:var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6))}.plyr--video{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;left:0;position:absolute;top:0}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));background:var(--plyr-video-controls-background,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75)));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:calc(10px / 2);padding:calc(var(--plyr-control-spacing,10px)/ 2);padding-top:calc(10px * 2);padding-top:calc(var(--plyr-control-spacing,10px) * 2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:calc(10px * 3.5);padding-top:calc(var(--plyr-control-spacing,10px) * 3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b3ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b3ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:calc(10px * 1.5);padding:calc(var(--plyr-control-spacing,10px) * 1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,rgba(255,255,255,.25)))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,rgba(255,255,255,.25)))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25);background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,rgba(255,255,255,.25)))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(255,255,255,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(255,255,255,.5))}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(255,255,255,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(255,255,255,.5))}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(255,255,255,.5);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(255,255,255,.5))}.plyr--video .plyr__progress__buffer{color:rgba(255,255,255,.25);color:var(--plyr-video-progress-buffered-background,rgba(255,255,255,.25))}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;position:static}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;position:static}.plyr:fullscreen .plyr__video-wrapper{height:100%;position:static}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}.plyr:-ms-fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;position:static}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;position:static}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;position:static}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;position:static}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;position:relative}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin:-var(--plyr-range-track-height,5px)/2 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr__preview-thumb{background-color:rgba(255,255,255,.9);background-color:var(--plyr-tooltip-background,rgba(255,255,255,.9));border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));margin-bottom:calc(calc(10px / 2) * 2);margin-bottom:calc(calc(var(--plyr-control-spacing,10px)/ 2) * 2);opacity:0;padding:3px;padding:var(--plyr-tooltip-radius,3px);pointer-events:none;position:absolute;transform:translate(0,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0,0) scale(1)}.plyr__preview-thumb::before{border-left:4px solid transparent;border-left:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-right:4px solid transparent;border-right:var(--plyr-tooltip-arrow-size,4px) solid transparent;border-top:4px solid rgba(255,255,255,.9);border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,rgba(255,255,255,.9));bottom:calc(4px * -1);bottom:calc(var(--plyr-tooltip-arrow-size,4px) * -1);content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:calc(3px - 1px);border-radius:calc(var(--plyr-tooltip-radius,3px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img{height:100%;left:0;max-height:none;max-width:none;position:absolute;top:0;width:100%}.plyr__preview-thumb__time-container{bottom:6px;left:0;position:absolute;right:0;white-space:nowrap;z-index:3}.plyr__preview-thumb__time-container span{background-color:rgba(0,0,0,.55);border-radius:calc(3px - 1px);border-radius:calc(var(--plyr-tooltip-radius,3px) - 1px);color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px));padding:3px 6px}.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Permanent+Marker&display=swap");
@import url(https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.pro_ads_img {
position: relative;
max-width: 100%;
text-align: center;
}
.pro_ads_img img {
filter: blur(0.9px);
width: 100%;
}
.pro_ads_img::before {
content: "This option available in Pro Version only";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-size: 20px;
max-width: 80%;
font-weight: bold;
} .elementor-element .icon {
position: relative;
}
.elementor-element .icon .bl_icon::after {
content: "MP";
font-size: 11px;
position: absolute;
right: 5px;
top: 5px;
background: #4527A4;
color: #fff;
padding: 2px 5px 3px 5px;
border-radius: 3px;
font-family: monospace;
text-align: center;
line-height: 1;
vertical-align: middle;
}
.art-video-player {
max-width: 100% !important;
height: 600px !important;
}
:root {
--light-clr: #e5e5e5;
--primary-clr: #6490f6;
--secondary-clr: #c1daff;
--active-clr: rgba(149, 153, 186, 0.4);
--player-bg: rgba(5, 9, 51, 0.4);
--scrollbar-track: rgb(79, 78, 78);
--scrollbar-thumb: rgb(116, 116, 116);
}
.playlist-wrapper {
font-family: "Nunito", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.playlist-container {
position: relative;
width: 90%;
min-height: 80vh;
background: #00112473;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
border-radius: 15px;
overflow: hidden;
}
.playlist-container::after,
.playlist-container::before {
content: "";
position: absolute;
width: 250px;
aspect-ratio: 1/1;
border-radius: 50%;
transition: 5s ease-in-out;
}
.playlist-container::after {
top: -3%;
left: -5%;
transform: scale(1);
background-color: #5768af;
}
.playlist-container:hover::after {
left: 85%;
transform: scale(1.2);
background-color: #a0acbd;
}
.playlist-container::before {
bottom: -3%;
right: -5%;
transform: scale(1);
background-color: #ab4c72;
}
.playlist-container:hover::before {
right: 85%;
transform: scale(1.2);
background-color: #bda5ad;
} .playlist-container .content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100%;
place-items: center;
background: rgba(53, 54, 72, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: inherit;
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 10;
color: var(--light-clr);
overflow-y: auto;
padding: 30px 30px 10px;
}
.playlist-container .content::-webkit-scrollbar {
width: 7px;
}
.playlist-container .content::-webkit-scrollbar-track {
box-shadow: inset 0 0 0.3rem var(--scrollbar-track);
border-radius: 40px;
margin: 18px 0;
}
.playlist-container .content::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0.5rem var(--scrollbar-thumb);
background-color: var(--primary-clr);
outline: none;
border-radius: 40px;
} .slider-playlist {
display: grid;
grid-template-columns: 45% 55%;
align-items: center;
} .playlist-container .swiper {
width: 300px;
height: auto;
display: flex;
}
.playlist-container .swiper-slide {
display: grid;
grid-template-rows: 4fr 1fr;
padding: 15px;
border-radius: 10px;
background-color: #d3d2d6;
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
user-select: none;
}
.playlist-container .swiper-slide img {
aspect-ratio: 1/1;
border-radius: 5px;
margin-bottom: 14px;
pointer-events: none;
}
.playlist-container .swiper-slide h1 {
width: max-content;
font-family: "Permanent Marker", serif;
font-size: 18px;
letter-spacing: 2px;
color: #222224;
text-transform: uppercase;
transform: rotate(-3deg);
margin: auto;
} .playlist {
width: 100%;
}
.playlist-item {
display: grid;
grid-template-columns: 15% 65% 15% 5%;
align-items: center;
width: 100%;
height: auto;
padding: 8px 10px;
margin-bottom: 15px;
border-bottom: 2px solid var(--primary-clr);
color: var(--light-clr);
cursor: pointer;
user-select: none;
}
.playlist-item img {
width: 70%;
aspect-ratio: 1/1;
border-radius: 5px;
overflow: hidden;
}
.playlist-item .song p:nth-child(1) {
font-weight: 500;
margin-bottom: 3px;
}
.playlist-item .song p:nth-child(2) {
font-weight: 300;
opacity: 0.5;
}
.playlist-item i {
font-size: 1.2rem;
color: var(--light-clr);
}
.active-playlist-item {
background-color: var(--active-clr);
border-radius: 5px;
} .playlist-container .player {
position: sticky;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: var(--player-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0 5px;
z-index: 15;
overflow: hidden;
} .controls {
display: flex;
justify-content: center;
align-items: center;
column-gap: 25px;
}
.controls svg {
width: 24px;
height: 24px;
cursor: pointer;
transform: scale(1);
will-change: transform;
}
.controls #shuffleBtn path {
stroke: #fff;
}
.controls #nextBtn path,
.controls #prevBtn path {
fill: #fff;
}
#playPauseBtn {
width: 45px;
aspect-ratio: 1/1;
margin: 5px 0;
color: var(--primary-clr);
outline: 0;
background: var(--light-clr);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 0 10px 20px rgba(5, 36, 28, 0.3);
font-size: 1.5rem;
transform: scale(1);
will-change: transform;
}
#playPauseIcon {
display: flex;
align-items: center;
justify-content: center;
}
#playPauseIcon::before {
content: ' ' !important;
}
#playPauseIcon.fa-pause svg.pause {
display: block;
}
#playPauseIcon.fa-pause svg.play {
display: none;
}
#playPauseIcon.fa-play svg.pause {
display: none;
}
#shuffleBtn:hover,
#prevBtn:hover,
#nextBtn:hover,
#playPauseBtn:hover {
transform: scale(1.05);
} .volume {
position: relative;
display: flex;
align-items: center;
}
.volume svg path {
stroke: #fff;
}
#volume-range {
position: absolute;
left: 30px;
top: 9px;
appearance: none;
-webkit-appearance: none;
width: 120px;
height: 4px;
background: var(--primary-clr);
border-radius: 4px;
cursor: pointer;
padding: 0;
}
#volume-range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: var(--light-clr);
width: 12px;
aspect-ratio: 1/1;
border-radius: 50%;
} #progress-bar {
appearance: none;
-webkit-appearance: none;
width: 90%;
height: 5px;
background: linear-gradient(90deg,
var(--light-clr),
var(--secondary-clr),
var(--primary-clr),
var(--secondary-clr),
var(--light-clr));
border-radius: 4px;
margin: 12px 0 16px;
cursor: pointer;
padding: 0;
}
#progress-bar::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: var(--light-clr);
width: 15px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.plyr--html5 .plyr__volume {
justify-content: flex-end;
}
.plyr--html5 .plyr__progress input {
width: 100%;
} @media (max-width: 1300px) {
.playlist-container .swiper {
width: 270px;
}
}
@media (max-width: 1100px) {
.playlist-container .content {
padding: 40px 20px 20px;
}
.playlist-container .swiper {
width: 240px;
}
.slider-playlist {
grid-template-columns: 50% 50%;
}
}
@media (max-width: 900px) {
.playlist-container .content {
padding: 30px 40px 20px;
overflow-x: hidden;
}
.playlist {
margin-bottom: 60px;
}
.slider-playlist {
grid-template-columns: 100%;
}
.playlist-container.swiper {
margin: 30px auto 50px;
}
.playlist-container .player {
width: 110%;
}
#volume-range {
width: 50px;
}
}
@media (max-width: 580px) {
.playlist-container .content {
overflow-x: hidden;
}
.playlist-container.swiper {
width: 220px;
margin: 20px auto 35px;
}
.playlist-item {
margin-bottom: 10px;
}
.playlist-container .player {
width: 115%;
}
.controls {
column-gap: 15px;
}
.controls i {
font-size: 1.3rem;
}
#playPauseBtn {
width: 40px;
font-size: 1.2rem;
}
.volume i {
font-size: 0.9rem;
}
#volume-range {
left: 20px;
top: 6px;
width: 40px;
}
} .classic-playlist-container {
width: min(100%, 900px);
overflow: hidden;
margin: auto auto;
}
.classic-playlist-container .album-art {
width: 220px;
height: 220px;
border-radius: 12px;
overflow: hidden;
transition: transform 0.4s ease;
}
.classic-playlist-container .album-art:hover {
transform: scale(1.05);
}
.classic-playlist-container .album-art img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.classic-playlist-container .track-info h2 {
font-size: 1.6rem;
margin-bottom: 8px;
}
.classic-playlist-container .track-info p {
color: #a0a0c0;
font-size: 1.2rem;
}
.classic-playlist-container .progress-container {
width: 100%;
height: 6px;
background: #32364394;
border-radius: 10px;
margin: 20px 0;
cursor: pointer;
position: relative;
}
.classic-playlist-container .progress {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #6a5acd, #00d4ff);
border-radius: 10px;
transition: width 0.1s linear;
}
.classic-playlist-container .time {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.9rem;
color: #a0a0c0;
}
.classic-playlist-container .controls {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 26px;
}
.classic-playlist-container .btn {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 4px;
color: #32364394;
border: 1px solid #32364394;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.classic-playlist-container .btn:hover {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
transform: translateY(-3px);
color: #F7F7F7;
}
.classic-playlist-container .btn.play-pause {
color: #F7F7F7;
background: linear-gradient(90deg, #6a5acd, #00d4ff);
}
.classic-playlist-container .btn.play-pause:hover {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
}
.classic-playlist-container .volume-container {
display: flex;
align-items: center;
gap: 10px;
width: 200px;
}
.classic-playlist-container .volume-icon {
cursor: pointer;
font-size: 1.2rem;
color: #32364394;
transition: color 0.3s ease;
}
.classic-playlist-container .volume-icon:hover {
color: #00d4ff;
} .classic-playlist-container .volume-slider {
-webkit-appearance: none;
width: 120px;
height: 6px;
background: #32364394;
border-radius: 10px;
outline: none;
cursor: pointer;
}
.classic-playlist-container .volume-slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: 10px;
background: #32364394;
}
.classic-playlist-container .volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;  } .classic-playlist-container .volume-slider::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #6a5acd, #00d4ff) 0% 0% / 100% 100% no-repeat, #333;
background-size: var(--volume-percent, 100%) 100%;
background-position: left center;
} .classic-playlist-container .volume-slider::-moz-range-progress {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
border-radius: 10px 0 0 10px;
height: 6px;
}
.classic-playlist-container .volume-slider::-moz-range-track {
background: #32364394;
border-radius: 10px;
height: 6px;
}
.classic-playlist-container .volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: #00d4ff;
border-radius: 50%;
border: none;
}
.classic-playlist-container .playlist {
width: 100%;
max-height: 376px;
overflow-y: auto;
}
.classic-playlist-container .playlist-item {
display: flex;
align-items: center;
padding: 12px 14px;
gap: 15px;
cursor: pointer;
margin: 0;
transition: all 0.3s ease;
border-bottom: 1px solid #60647076;
}
.classic-playlist-container .playlist-item:first-child {
border-top: 1px solid #60647076;
}
.classic-playlist-container .playlist-item:hover {
background: rgba(96, 100, 112, 0.25);
}
.classic-playlist-container .playlist-item.active {
background: rgba(96, 100, 112, 0.25);
}
.classic-playlist-container .playlist-item img {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
}
.classic-playlist-container .playlist-item-info {
flex: 1;
}
.classic-playlist-container .playlist-item-info h4 {
font-size: 1rem;
margin-bottom: 4px;
color: #333;
}
.classic-playlist-container .playlist-item-info p {
font-size: 0.85rem;
color: #a0a0c0;
}
.classic-playlist-container .playlist-item-right {
display: flex;
align-items: center;
gap: 12px;
}
.classic-playlist-container .playlist-item-duration {
font-size: 0.9rem;
color: #a0a0c0;
min-width: 40px;
text-align: right;
}
.classic-playlist-container .playlist-sound-wave {
display: flex;
align-items: center;
gap: 3px;
height: 20px;
}
.classic-playlist-container .playlist-item .playlist-sound-wave span {
width: 3px;
background: #00d4ff;
border-radius: 2px;
animation: soundWave 1.2s infinite ease-in-out;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(1) {
height: 6px;
animation-delay: 0s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(2) {
height: 12px;
animation-delay: 0.1s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(3) {
height: 16px;
animation-delay: 0.2s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(4) {
height: 10px;
animation-delay: 0.3s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(5) {
height: 8px;
animation-delay: 0.4s;
}
@keyframes soundWave {
0%,
100% {
transform: scaleY(0.4);
opacity: 0.6;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
.classic-playlist-container .playlist::-webkit-scrollbar {
width: 6px;
}
.classic-playlist-container .playlist::-webkit-scrollbar-thumb {
background: #6a5acd;
border-radius: 10px;
}
.classic-playlist-container .player-container {
display: flex;
justify-content: space-between;
gap: 30px;
padding-bottom: 10px;
}
.classic-playlist-container .player-container .player-thumb {
max-width: 220px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.classic-playlist-container .player-container .player-thumb img {
width: 100%;
height: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 250px);
}
.classic-playlist-container .player-meta-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 200px;
width: 100%;
justify-content: flex-end;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 220px);
} .classic-playlist-container .progress-tooltip {
position: absolute;
bottom: 18px;
left: 0;
background: rgba(26, 26, 46, 0.9);
color: #e0e0e0;
padding: 6px 10px;
border-radius: 8px;
font-size: 0.85rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
transform: translateX(-50%);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.classic-playlist-container .progress-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: rgba(26, 26, 46, 0.9);
}
.classic-playlist-container .progress-container:hover .progress-tooltip {
opacity: 1;
}
@media (max-width: 768px) {
.classic-playlist-container .player-container .player-thumb {
max-width: 180px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 180px);
}
.classic-playlist-container .album-art {
width: 180px;
height: 180px;
}
.classic-playlist-container .volume-container {
width: 160px;
}
.classic-playlist-container .playlist-sound-wave span {
width: 2px;
}
.classic-playlist-container .progress-container {
margin: 16px 0;
}
.classic-playlist-container .controls {
margin-top: 18px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(1) {
height: 5px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(2) {
height: 10px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(3) {
height: 14px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(4) {
height: 9px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(5) {
height: 7px;
}
}
@media(max-width: 676px) {
.classic-playlist-container .player-container .player-thumb {
max-width: 150px;
width: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 150px);
}
.classic-playlist-container .album-art {
width: 150px;
height: 150px;
}
.classic-playlist-container .btn {
width: 40px;
height: 40px;
}
.classic-playlist-container .btn.play-pause {
width: 40px;
height: 40px;
}
.classic-playlist-container .controls {
gap: 8px;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 152px;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 172px);
}
.classic-playlist-container .player-container {
gap: 20px;
}
}
@media(max-width: 540px) {
.classic-playlist-container .player-container {
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: 100%;
}
.classic-playlist-container .album-art {
width: 100%;
}
.classic-playlist-container .player-container .player-thumb {
max-width: 100%;
width: 100%;
}
.classic-playlist-container .player-meta-header {
align-items: flex-start;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 152px;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 172px);
}
}
@media(max-width: 400px) {
.classic-playlist-container .player-meta-header .volume-container {
width: 110px;
}
.classic-playlist-container .player-meta-header .volume-container input {
width: 100%;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 120px);
}
}
.container-video-playlist {
max-width: 1200px;
margin: 0 auto;
display: flex;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
@media(max-width: 992px) {
.container-video-playlist {
flex-direction: column;
}
} .container-video-playlist .video-player {
position: relative;
flex: 2;
background: #000;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 340px;
max-height: 720px;
overflow: hidden;
}
.container-video-playlist #main-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: #111;
} .container-video-playlist .center-control {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(170, 0, 0, 1);
backdrop-filter: blur(8px);
border-radius: 50%; color: white;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.92;
transition: all 0.3s ease;
z-index: 25;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.container-video-playlist .center-control:hover {
transform: translate(-50%, -50%) scale(1.08);
background: rgba(170, 0, 0, 0.5); }
.container-video-playlist .center-control.hidden {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
pointer-events: none;
} .container-video-playlist .custom-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.65) 40%, transparent 100%);
backdrop-filter: blur(10px);
padding: 12px 16px 16px;
opacity: 0;
transition: opacity 0.35s ease;
z-index: 20;
}
.container-video-playlist .video-player:hover .custom-controls,
.container-video-playlist .video-player.playing .custom-controls,
.container-video-playlist .custom-controls:hover {
opacity: 1;
}
.container-video-playlist .controls-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.container-video-playlist .progress-row {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 500;
flex: 4;
}
.container-video-playlist .time-display {
min-width: 110px;
text-align: center;
letter-spacing: 0.5px;
}
.container-video-playlist .progress-container {
position: relative;
height: 8px;
background: rgba(255, 255, 255, 0.25);
border-radius: 4px;
cursor: pointer;
flex: 1;
width: 100%;
transition: height 0.2s;
}
.container-video-playlist .progress-container:hover {
height: 9px;
}
.container-video-playlist .progress-bar {
height: 100%;
width: 0;
background: linear-gradient(to right, #c00, #a00);
border-radius: 4px;
transition: width 0.08s linear;
box-shadow: 0 0 12px rgba(170, 0, 0, 0.6);
}
.container-video-playlist .progress-tooltip {
position: absolute;
bottom: 100%;
left: 0;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.88);
color: white;
padding: 6px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 30;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
min-width: 40px;
text-align: center;
}
.container-video-playlist .progress-container:hover .progress-tooltip {
opacity: 1;
}
.container-video-playlist .controls-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.container-video-playlist .btn {
background: none;
border: none;
color: white;
font-size: 18px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s ease;
}
.container-video-playlist .btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.12);
}
.container-video-playlist .btn:active {
transform: scale(0.96);
}
.container-video-playlist .play-pause {
font-size: 24px;
}
.container-video-playlist .volume-group {
display: flex;
align-items: center;
gap: 8px;
}
.container-video-playlist .volume-slider {
width: 100px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
cursor: pointer;
}
.container-video-playlist .volume-fill {
height: 100%;
width: 100%;
background: #c00;
border-radius: 3px;
}
.container-video-playlist .overlay {
position: absolute;
bottom: 24px;
left: 24px;
color: #00aaff;
font-size: 26px;
font-weight: bold;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
pointer-events: none;
max-width: 75%;
}
.container-video-playlist .more-videos {
position: absolute;
bottom: 8px;
left: 24px;
color: #ddd;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.8px;
pointer-events: none;
} .container-video-playlist .playlist {
flex: 1;
background: #f9f9f9;
border-left: 1px solid #e0e0e0;
overflow-y: auto;
max-height: calc(6 * 84px);
position: relative;
} .container-video-playlist .playlist::before {
content: "";
position: sticky;
top: 0;
left: 0;
right: 0;
height: 60px; background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
z-index: 5;
pointer-events: none;
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.container-video-playlist .header {
background: #c00;
color: white;
padding: 14px 18px;
font-weight: bold;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid #a00;
}
.container-video-playlist .header span {
font-size: 13px;
font-weight: normal;
}
.container-video-playlist ul {
list-style: none;
padding: 0;
margin: 0;
}
.container-video-playlist li {
height: 69px;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background 0.18s;
}
.container-video-playlist li:hover,
.container-video-playlist li.active {
background: #f0f0f0;
}
.container-video-playlist li.active {
font-weight: 600;
}
.container-video-playlist li img {
width: 80px;
height: 45px !important;
object-fit: cover;
border-radius: 4px !important;
margin-right: 14px;
flex-shrink: 0;
background: #222;
}
.container-video-playlist .title {
flex: 1;
font-size: 14px;
line-height: 1.35;
}
.container-video-playlist .duration {
font-size: 12.5px;
color: #666;
margin-left: 10px;
white-space: nowrap;
} .container-video-playlist .playlist::-webkit-scrollbar {
width: 6px;
}
.container-video-playlist .playlist::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 3px;
}
.container-video-playlist .playlist::-webkit-scrollbar-thumb:hover {
background: #999;
}
.container-video-playlist .playlist {
scrollbar-width: thin;
scrollbar-color: #bbb #f9f9f9;
}
.container-video-playlist .time-display {
color: #fff;
font-weight: 700;
}
.container-video-playlist .toggle-container {
position: relative;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.container-video-playlist .toggle-container:hover::after {
content: attr(data-tooltip); position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.88);
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
pointer-events: none;
z-index: 30;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.container-video-playlist .toggle-container:hover::after {
opacity: 1;
}
.container-video-playlist .switch {
position: relative;
display: inline-block;
width: 40px;
height: 18px;
}
.container-video-playlist .switch input {
opacity: 0;
width: 0;
height: 0;
}
.container-video-playlist .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
transition: .4s;
border-radius: 26px;
}
.container-video-playlist .slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
.container-video-playlist input:checked+.slider {
background-color: #a00;
}
.container-video-playlist input:checked+.slider:before {
transform: translateX(21px);
}