.hr-product-slider {
padding: 30px 0px !important;
}
.hr-slider-product {
width: 300px;
height: auto;
min-height: 300px;
margin-right: 35px;
margin-bottom: 40px;
position: relative !important;
float: left !important;
background-size: auto 120%;
background-position: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hr-product-slider-container {
-ms-overflow-style: none; scrollbar-width: none; }
.hr-product-slider-container::-webkit-scrollbar {
display: none;
}
.hr-slider-overlay {
height: 100%;
padding: 30px 40px 20px 40px;
width: 100%;
float: left;
position: absolute;
background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.45) 100%);
transition: .3s;
}
.hr-slider-overlay:hover {
backdrop-filter: blur( 5px ) !important;
background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 100%);
cursor: pointer;
}
.hr-slider-overlay:hover > .hr-slider-meta h5 {
transform: scale(1.1);
}
.hr-slider-meta h5 {
color: #fff !important;
font-size: 26px;
font-weight: 800;
line-height: 1.75em;
transition: .5s;
}
.lupo-col-4 {
grid-template-columns: repeat( 4, minmax(25%, 50%));
column-count: 4;
display: grid;
column-gap: 20px;
}
.hr-presentation-product {
width: 100% !important;
margin-bottom: 10px;
padding: 15px !important;
float: left;
}
.hr-presentation-product .product-thumbnail {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background-size: 100% auto !important;
background-position: center;
transition: 0.5s ease;
}
.hr-presentation-product .product-title {
font-size: 13px;
font-weight: 300;
text-align: center;
color: #fff;
transition: 0.2s ease;
}
.hr-presentation-product:hover {
cursor: pointer;
}
.hr-presentation-product:hover .product-thumbnail {
transform: scale(1.55) !important;
margin-bottom: -10px;
}
.hr-presentation-product:hover .product-title {
opacity: 0;
}
.hr-used-products {
padding-bottom: 25px !important;
}
.lp-flex-container {
display: flex;
flex-direction: column;
}
.hr-project {
max-width: 50% !important;
margin-left: auto;
margin-right: auto;
border-left: 5px solid #f2f2f2 !important;
}
.hr-project-base {
margin-bottom: 80px !important;
margin-left: 20px !important;
}
.hr-project-title {
padding-bottom: 40px !important;
}
.hr-project-title h2 {
text-align: left !important;
font-weight: 600 !important;
font-size: 34px !important;
}
.hr-project-content {
}
.hr-project-products {
padding: 20px 0 0 0 !important;
background: transparent !important;
}
@media screen and (max-width: 600px) {
.hr-project {
max-width: 100% !important;
}
.hr-project-title h2 {
line-height: 1.45em !important;
}
.lupo-col-4 {
grid-template-columns: repeat( 1, minmax(25%, 100%));
column-count: 1;
display: grid;
column-gap: 20px;
}
}
@media screen and (max-width: 600px) {
.hr-portfolio {
grid-template-columns: repeat(1, minmax(50%, 100%)) !important;
column-count: 2 !important;
row-gap: 20px !important;
column-gap: 0px !important;
}
.hr-portfolio-content h2 {
text-align: center !important;
font-size: 24px !important;
}
}
.hr-portfolio {
grid-template-columns: repeat(2, minmax(10%, 50%));
column-count: 2;
display: grid !important;
row-gap: 50px;
column-gap: 50px;
}
.hr-portfolio-item {
width: 100%;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.hr-portfolio-item img {
margin: 0 !important;
padding: 0 !important;
}
.hr-portfolio-content {
width: 100%;
height: calc( 100% - 5px );
top: 0;
left: 0;
}
.hr-portfolio-content {
opacity: 0;
width: 100%;
z-index: 999 !important;
position: absolute;
padding: 45px !important;
background: rgba(0,0,0,0.8);
backdrop-filter: blur( 5px );
transition: .5s ease;
overflow: auto;
}
.hr-portfolio-content:hover {
opacity: 1;
}
.hr-portfolio-content h2 {
text-align: left;
font-weight: 600 !important;
font-size: 34px;
color: #fff !important;
}
.lupo-woo-description-mini {
color: #f2f2f2 !important;
font-size: 10px !important;
}