.section-varia-front-page-slider {
max-width: 1920px;
margin: 0 auto;
} .section-varia-front-page-slider .varia-silder-container {
margin: 0 auto;
display: flex !important;
position: relative;
transition: all ease-in 300ms;
}
.slick-arrows {
display: inline-flex;
align-items: center;
gap: 65px;
position: relative;
margin-top: 60px;
margin-right: 150px;
float: right;
}
.slick-arrows::after {
content: "";
display: block;
width: 50px;
height: 1px;
background-color: var(--color-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section-varia-front-page-slider .varia-silder-container .slick-arrow img {
width: unset !important;
cursor: pointer;
}
.varia-silder-container-left-col {
flex: 1;
}
.varia-silder-container .varia-silder--wrapper-black {
background-color: var(--color-primary);
padding-left: 180px;
padding-bottom: 26px;
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--title {
font-size: 140px;
font-weight: 200;
color: var(--color-white);
line-height: 1.1em;
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--sub-title {
font-size: var(--text-xxl);
font-weight: 200;
line-height: 1.5em;
color: var(--color-white);
position: relative;
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--sub-title::after {
content: "";
display: inline-block;
width: 120px;
height: 2px;
background-color: var(--color-secondary);
}
.varia-silder-container .varia-silder--wrapper-gray {
background-color: #ece9e4;
padding-left: 180px;
min-height: 550px;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--description {
max-width: 350px;
padding-top: var(--space-12);
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--description h3 {
font-size: var(--text-xxl);
font-weight: var(--font-normal);
letter-spacing: 5px;
padding-bottom: 20px;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--description p {
line-height: 1.9em;
} .varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn,
.varia-kuhinje-container .varia-kuhinje--btn {
display: flex;
align-items: center;
gap: 12px;
max-width: 210px;
width: 100%;
text-decoration: none;
padding: 13px 0 13px 26px;
font-size: var(--text-sm);
color: var(--color-text);
background-color: #fff;
border: 1px solid #000;
border-radius: 2px;
transition: all ease-in 250ms;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn .varia-silder--btn-arrow,
.varia-kuhinje-container .varia-kuhinje--btn .varia-silder--btn-arrow {
display: flex;
align-items: center;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn .line,
.varia-kuhinje-container .varia-kuhinje--btn .line {
display: inline-block;
width: 20px;
height: 1px;
background-color: var(--color-text);
transition: all ease-in 250ms;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn .arrow,
.varia-kuhinje-container .varia-kuhinje--btn .arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid var(--color-text);
transition: all ease-in 250ms;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn:hover .line,
.varia-kuhinje-container .varia-kuhinje--btn:hover .line {
width: 70px;
background-color: var(--color-secondary);
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn:hover .arrow,
.varia-kuhinje-container .varia-kuhinje--btn:hover .arrow {
border-left-color: var(--color-secondary);
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn:hover,
.varia-kuhinje-container .varia-kuhinje--btn:hover {
color: var(--color-secondary);
box-shadow: 0px 5px 30px 0px rgb(0 0 0 / 10%);
} .varia-silder-container .varia-silder--wrapper-gray .varia-silder--btn .varia-silder-container-right-col {
flex: 1;
position: relative;
} .varia-silder--badge-position-absolute {
position: absolute;
top: 29%;
left: 50%;
transform: translate(-50%, -50%);
}
.varia-silder-container-right-col::after {
content: "";
width: 100%;
height: 50%;
background-color: #000;
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.varia-silder-container-right-col img {
margin-left: -60px;
}
.varia--slika--wrapper {
position: relative;
}
.varia-kuhinje--slika--wrapper::before {
content: "";
display: inline-block;
width: 100px;
height: 5px;
background-color: var(--color-secondary);
position: absolute;
bottom: 0px;
left: -10px;
}
.varia-kuhinje--slika--wrapper::after {
content: "";
display: inline-block;
width: 100px;
height: 5px;
background-color: var(--color-secondary);
position: absolute;
bottom: -2px;
left: -8px;
transform-origin: left;
transform: rotate(-90deg);
}
.varia-silder--badge--wrapper {
display: grid;
place-items: center;
width: 183px;
height: 183px;
font-size: var(--text-sm);
color: var(--color-secondary);
background: var(--color-primary);
border-radius: 50%;
border: 2px solid var(--color-secondary);
outline: 10px solid var(--color-primary);
position: relative;
}
.varia-silder--badge--wrapper::after {
content: " ";
width: 100%;
height: 100%;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background-image: url(//www.varia.si/wp-content/themes/Varia-theme/assets/img/studi-varia.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: 60px;
}
.varia-silder--badge {
display: flex;
flex-direction: column;
align-items: center;
transform: rotate(10deg);
margin-left: -10px;
margin-top: -25px;
}
.varia-silder--badge small {
font-size: 14px !important;
}
.varia-silder--badge span {
font-size: var(--text-3xl);
font-weight: 700;
padding-left: 36px;
} @media screen and (max-width: 1640px) {
.varia-silder-container-right-col img {
margin-left: 0;
margin-right: 20px;
}
.varia--slika--wrapper::after {
bottom: -25px !important;
right: 8px !important;
}
.varia--slika--wrapper::before {
bottom: -20px !important;
right: 5px !important;
}
.varia-silder-container .varia-silder--wrapper-black,
.varia-silder-container .varia-silder--wrapper-gray {
padding-left: 60px;
}
}
@media screen and (max-width: 1500px) {
.varia-silder-container-left-col {
width: 40%;
}
.varia-silder-container-right-col {
width: 60%;
}
.varia-silder-container .varia-silder--wrapper-gray {
min-height: 464px;
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--title {
font-size: var(--text-6xl);
}
.varia-silder-container .varia-silder--wrapper-black,
.varia-silder-container .varia-silder--wrapper-gray {
padding-left: 20px;
}
.varia--slika--wrapper::after,
.varia--slika--wrapper::before {
visibility: hidden;
}
.varia-silder--badge--wrapper {
width: 150px;
height: 150px;
}
}
@media screen and (max-width: 1024px) {
.section-varia-front-page-slider .varia-silder-container {
flex-direction: column-reverse !important;
}
.varia-silder-container-left-col,
.varia-silder-container-right-col {
width: 100%;
}
.varia-silder-container-right-col img {
margin-right: 0 !important;
max-height: 480px;
width: 100%;
object-fit: cover;
}
.varia-silder--badge-position-absolute {
top: 40%;
left: unset;
right: 0;
}
.varia-silder-container-left-col {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.varia-silder-container .varia-silder--wrapper-black {
padding: 16px 20px;
max-width: 50%;
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--title {
font-size: var(--text-2xl);
}
.varia-silder-container .varia-silder--wrapper-black .varia-silder--sub-title {
font-size: var(--text-lg);
}
.varia-silder-container .varia-silder--wrapper-gray {
min-height: 381px;
max-width: 50%;
padding: var(--space-6) 20px;
}
.varia-silder-container .varia-silder--wrapper-gray .varia-silder--description {
padding-top: 0 !important;
}
.slick-arrows {
margin-top: 30px;
margin-right: 10px;
}
}
@media screen and (max-width: 767px) {
.varia-silder-container-left-col {
position: static;
}
.varia-silder-container .varia-silder--wrapper-black,
.varia-silder-container .varia-silder--wrapper-gray {
max-width: 100%;
}
.varia-silder-container-right-col img {
max-height: 260px;
}
.varia-silder--badge-position-absolute {
top: 38%;
}
.varia-silder--badge--wrapper {
width: 90px;
height: 90px;
}
.varia-silder--badge span {
font-size: 18px;
padding-left: 0;
}
.varia-silder--badge--wrapper::after {
background-image: none;
}
.varia-silder--badge {
margin-left: 5px;
margin-top: 0px;
}
.varia-silder--badge-position-absolute {
z-index: 2;
}
}  .varia-kuhinje-a-wrapper {
text-decoration: none !important;
}
.varia-front-page--kitchen {
padding: var(--space-16) 20px;
}
.varia-front-page--kitchen .title {
font-size: var(--text-5xl);
font-weight: 200;
letter-spacing: 5px;
line-height: 1.3em;
text-align: center;
position: relative;
}
.varia-front-page--kitchen .title::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
max-width: 200px;
width: 100%;
height: 2px;
background-color: var(--color-secondary);
}
.varia-front-page--kitchen .description {
max-width: 700px;
margin: 16px auto 45px auto;
text-align: center;
font-size: var(--text-xxl);
font-weight: 200;
}
.varia-front-page--kitchen .description p {
font-size: var(--text-lg);
line-height: 1.5em;
font-weight: 300;
margin-bottom: 0 !important;
}
.varia-front-page--kitchen .kuhinje-varia-grid {
display: flex;
flex-wrap: wrap;
gap: 26px;
}
.varia-kuhinje-container {
flex: 1;
}
.varia-kuhinje--slika--wrapper {
position: relative;
}
@media screen and (min-width: 1024px) {
.varia-kuhinje--slika-zoomin {
display: inline-block; overflow: hidden; width: 100%;
height: 100%;
max-height: 600px;
}
.varia-kuhinje-a-wrapper:hover img {
transform: scale(1.08);
}
}
.varia--slika--wrapper::before {
content: "";
display: inline-block;
width: 200px;
height: 10px;
background-color: var(--color-secondary);
position: absolute;
bottom: -25px;
right: 35px;
}
.varia--slika--wrapper::after {
content: "";
display: inline-block;
width: 200px;
height: 10px;
background-color: var(--color-secondary);
position: absolute;
bottom: -20px;
right: 40px;
transform-origin: right;
transform: rotate(90deg);
}
@media screen and (max-width: 600px) {
.varia-kuhinje--slika--wrapper::after {
bottom: -12px;
left: -8px;
}
.varia-kuhinje--slika--wrapper::before {
bottom: -10px;
left: -10px;
}
}
.varia-front-page--kitchen .kuhinje-varia-grid img {
min-height: 600px;
object-fit: cover;
transition: all linear 400ms;
}
.varia-kuhinje-content--wrapper {
margin-top: 26px;
margin-left: 24px;
}
.varia-front-page--kitchen .kuhinje-varia-grid .varia-kuhinje--badge {
font-size: var(--text-sm);
font-weight: var(--font-light);
line-height: 1.3em;
}
.varia-front-page--kitchen .kuhinje-varia-grid .varia-kuhinje--title {
font-size: var(--text-2xl);
font-weight: var(--font-light);
line-height: 1.3em;
}
.varia-front-page--kitchen .kuhinje-varia-grid .varia-kuhinje--description {
margin: 16px 0;
}
.varia-front-page--kitchen .kuhinje-varia-grid .varia-kuhinje--description p {
max-width: 320px;
font-size: var(--text-base);
line-height: 1.5em;
font-weight: var(--font-light);
margin-bottom: 0 !important;
}
.varia-kuhinje-container .varia-kuhinje--btn {
padding: 7px 0 7px 26px;
}
@media screen and (max-width: 1024px) {
.varia-front-page--kitchen .kuhinje-varia-grid {
gap: 48px;
}
.varia-kuhinje-container {
flex: 0;
flex-basis: 46%;
}
.varia-front-page--kitchen .kuhinje-varia-grid img {
min-height: 430px;
}
.varia-kuhinje-content--wrapper {
margin-left: 0;
}
}
@media screen and (max-width: 767px) {
.varia-kuhinje-container {
flex-basis: 100%;
}
.varia-front-page--kitchen .kuhinje-varia-grid img {
min-height: 320px;
max-height: 320px;
}
}