8101 lines
144 KiB
SCSS
8101 lines
144 KiB
SCSS
// out: ../style-css/style.css, compress: true, sourceMap: true
|
|
@import '_mixins';
|
|
@import '_variables';
|
|
|
|
.alert {
|
|
border-radius: 0;
|
|
margin: 25px 0;
|
|
border: 0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
|
|
&.alert-success {
|
|
background: $cGrayBg;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
body {
|
|
&.nowebp {
|
|
.carousel-banner {
|
|
background: url('/upload/filemanager/images/banner-bg.jpg') no-repeat center;
|
|
}
|
|
|
|
.item-01 {
|
|
background: url(/upload/filemanager/images/banner-01.jpg) no-repeat center;
|
|
}
|
|
|
|
.item-02 {
|
|
background: url('/upload/filemanager/images/banner-02.jpg') no-repeat center left;
|
|
|
|
@include respond-below(sm) {
|
|
background: url('/upload/filemanager/images/banner-02-mobile.jpg') no-repeat center;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
background: url('/upload/filemanager/images/banner-01.jpg') no-repeat center;
|
|
}
|
|
|
|
.technology {
|
|
background: url(/upload/filemanager/images/technology-bg.png) no-repeat center left;
|
|
}
|
|
|
|
.modernita-e-design {
|
|
background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.png) no-repeat right;
|
|
|
|
@include respond-below(sm) {
|
|
background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.png) no-repeat center;
|
|
}
|
|
}
|
|
|
|
.garanzia-di-soddisfazione {
|
|
background: url(/upload/filemanager/images/garanzia-di-soddisfazione2.png) no-repeat center;
|
|
}
|
|
|
|
.banner-mini {
|
|
background: url(/upload/filemanager/images/subpage/banner-mini.png) no-repeat center;
|
|
}
|
|
|
|
.tipi-di-montaggio {
|
|
background: url(/upload/filemanager/images/persiane-in-legno/persiane-in-legno-bg.png) no-repeat center;
|
|
}
|
|
|
|
.tapparelle-controllo-separato {
|
|
background: url(/upload/filemanager/images/tapparelle/tapparelle-bg.png) no-repeat center;
|
|
}
|
|
|
|
.links {
|
|
background: url(/upload/filemanager/images/subpage/links-bg.png) no-repeat center;
|
|
}
|
|
|
|
.dettagli-box-bg {
|
|
background: url(/upload/filemanager/images/dettagli-pvc/design-moderno/guarnizioni-bg.png) no-repeat center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-below-xs {
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hidden-above-xs {
|
|
@include respond-above(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
a {
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-family: $font-2;
|
|
font-weight: 400;
|
|
font-size: 60px;
|
|
line-height: 73px;
|
|
letter-spacing: 0.1em;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 52px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 45px;
|
|
line-height: 53px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 39px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
|
|
a {
|
|
color: $cBlackText;
|
|
|
|
&:hover {
|
|
color: #ffcc00;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-family: $font-2;
|
|
font-weight: 400;
|
|
font-size: 40px;
|
|
line-height: 48px;
|
|
color: #000;
|
|
|
|
@include respond-below(sm) {
|
|
font-size: 37px;
|
|
}
|
|
|
|
a {
|
|
color: $cBlackText;
|
|
|
|
&:hover {
|
|
color: #ffcc00;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subtitle-line {
|
|
@extend .subtitle;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.subtitle-level-3 {
|
|
font-family: $font-3;
|
|
font-weight: 300;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
letter-spacing: 0.055em;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 17px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: 0;
|
|
background: #000;
|
|
height: 2px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
font-family: $font-3;
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
color: #000000;
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.text20 {
|
|
font-family: $font-3;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
line-height: 24px;
|
|
letter-spacing: 0.055em;
|
|
text-align: left;
|
|
}
|
|
|
|
.text16 {
|
|
font-family: $font-3;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
}
|
|
|
|
.btn {
|
|
font-family: $font-1;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
border: 1px solid #000000;
|
|
border-radius: 0;
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
background: transparent;
|
|
transition: all 0.3s ease;
|
|
|
|
img {
|
|
margin: 0 0 0 10px;
|
|
width: 40px !important;
|
|
height: 7px;
|
|
margin-bottom: 2px;
|
|
filter: invert(0%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: #000;
|
|
|
|
img {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-yellow {
|
|
color: #000000;
|
|
font-family: $font-1;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
padding: 8px 20px;
|
|
background-color: #fff200;
|
|
display: inline-flex;
|
|
margin-left: 20px;
|
|
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.btn-black {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: #000;
|
|
color: #fff;
|
|
font-family: $font-1;
|
|
padding: 8px 20px;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tab {
|
|
font-family: $font-1;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
|
|
span {
|
|
font-family: Alegreya Sans;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
line-height: 21px;
|
|
letter-spacing: 0.135em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.tab-content-title {
|
|
font-family: $font-1;
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
line-height: 41px;
|
|
letter-spacing: 0em;
|
|
text-align: right;
|
|
color: #fff;
|
|
background: #000;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.box50 {
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.box-text-right {
|
|
@extend .box;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: right;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
div {
|
|
width: 400px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-text-left {
|
|
@extend .box;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
div {
|
|
width: 400px;
|
|
}
|
|
|
|
&:first-child {
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#main-menu {
|
|
@include respond-below(xs) {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 10;
|
|
background: #fff;
|
|
display: none;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
&.visible {
|
|
@include flexbox;
|
|
}
|
|
}
|
|
|
|
div[id^='menu-container-'] {
|
|
@include respond-below(xs) {
|
|
width: 100%;
|
|
@include flexbox;
|
|
@include align-items(center);
|
|
@include justify-content(center);
|
|
}
|
|
|
|
>ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
flex-wrap: wrap;
|
|
|
|
@include respond-above(xs) {
|
|
@include flexbox;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 100%;
|
|
}
|
|
|
|
>li {
|
|
position: relative;
|
|
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
|
|
>a {
|
|
font-family: $font-1;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
color: #000;
|
|
padding: 10px 7px;
|
|
display: block;
|
|
text-transform: uppercase;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 10px 6px;
|
|
}
|
|
|
|
@include respond-between(xs, md) {
|
|
padding: 10px 4px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.fa-caret-down {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.parent {
|
|
>a {
|
|
@include respond-above(xs) {
|
|
// pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
>ul {
|
|
position: absolute;
|
|
display: none;
|
|
list-style-type: none;
|
|
padding-inline-start: 0;
|
|
background: #fff;
|
|
padding: 18px 24px;
|
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
|
|
z-index: 999;
|
|
|
|
@include respond-above(lg) {
|
|
left: 12px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
left: 7px;
|
|
}
|
|
|
|
@include respond-between(xs, md) {
|
|
left: 4px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
position: static;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
li {
|
|
a {
|
|
font-family: $font-1;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: $cGrayText;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
padding: 6px 0;
|
|
display: block;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
|
|
@include respond-above(xs) {
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 50px;
|
|
height: 1px;
|
|
background: #939393;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-above(xs) {
|
|
&:hover {
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#main-menu-btn {
|
|
height: 50px;
|
|
width: 50px;
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #fff;
|
|
background: #000;
|
|
display: none;
|
|
z-index: 9999;
|
|
line-height: 50px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
cursor: pointer;
|
|
@include border-radius(50%);
|
|
|
|
img {
|
|
width: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
background: #fff;
|
|
|
|
div[class^='col-']:first-child {
|
|
@include respond-between(sm, md) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
|
|
img {
|
|
width: 145px;
|
|
height: 47px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>div {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.social {
|
|
a {
|
|
display: block;
|
|
border: 1px solid #000;
|
|
height: 33px;
|
|
width: 33px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-between(sm, lg) {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: center;
|
|
}
|
|
|
|
>div {
|
|
&:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include respond-between(sm, md) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include respond-between(sm, lg) {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn {
|
|
margin-left: 25px;
|
|
padding: 3px 6px;
|
|
|
|
@include respond-between(xs, lg) {
|
|
margin-bottom: 10px;
|
|
margin-top: -32px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
min-height: 737px;
|
|
}
|
|
|
|
.banner,
|
|
.carousel-banner {
|
|
background: url('/images/banner-bg.jpg') no-repeat bottom left;
|
|
text-align: center;
|
|
|
|
// @include respond-below(sm) {
|
|
// background: url('/upload/filemanager/images/banner-sm.webp') no-repeat center;
|
|
// min-height: 0;
|
|
// background-size: cover;
|
|
// }
|
|
|
|
h1 {
|
|
font-size: 100px;
|
|
color: #fff;
|
|
font-family: $font-2;
|
|
font-weight: 400;
|
|
line-height: 121px;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 80px;
|
|
line-height: 100px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 80px;
|
|
line-height: 100px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 40px;
|
|
line-height: 47px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-family: $font-1;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
font-size: 40px;
|
|
line-height: 54px;
|
|
letter-spacing: 0.055em;
|
|
position: relative;
|
|
padding-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 348px;
|
|
left: calc(50% - 174px);
|
|
background: #fff;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 32px;
|
|
line-height: 42px;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 28px;
|
|
line-height: 38px;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
&:before {
|
|
width: 145px;
|
|
left: calc(50% - 72px);
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: $font-3;
|
|
font-weight: 300;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 19px;
|
|
line-height: 27px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-banner {
|
|
text-align: center;
|
|
padding-left: 80px;
|
|
padding-right: 80px;
|
|
padding-bottom: 150px;
|
|
|
|
#scontainer-1 {
|
|
max-width: 1467px;
|
|
margin: auto;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
min-height: 45vw;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
padding-bottom: 0;
|
|
background: none;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-bottom: 0;
|
|
background: none;
|
|
}
|
|
|
|
.owl-item,
|
|
.item {
|
|
min-height: 37vw;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
@include respond-below(lg) {
|
|
min-height: 42vw;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
min-height: 45vw;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
min-height: 45vw;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
min-height: 44vw;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
min-height: 325px;
|
|
}
|
|
}
|
|
|
|
.item-01 {
|
|
background: url('/upload/filemanager/images/banner-01.webp') no-repeat center;
|
|
background-size: cover;
|
|
width: 100vw;
|
|
|
|
@include respond-above(xs) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 144%;
|
|
position: relative;
|
|
}
|
|
|
|
#scontainer-1 {
|
|
width: 90%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width: 1140px;
|
|
|
|
@include respond-below(sm) {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-02 {
|
|
background: url('/upload/filemanager/images/banner-02.webp') no-repeat center left;
|
|
background-size: cover;
|
|
width: 100vw;
|
|
|
|
@include respond-below(sm) {
|
|
background: url('/upload/filemanager/images/banner-02-mobile.webp') no-repeat center;
|
|
background-size: cover;
|
|
padding-top: 144%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.benefits {
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.benefits-content {
|
|
background: #fff;
|
|
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
|
|
width: calc(20% - 26px);
|
|
text-align: center;
|
|
padding: 35px 20px;
|
|
margin: 0 13px;
|
|
|
|
@include respond-between(sm, md) {
|
|
width: calc(20% - 7px);
|
|
padding: 35px 10px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: calc(33% - 20px);
|
|
margin: 0 10px 20px 10px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: calc(50% - 10px);
|
|
margin: 0 5px 20px 5px;
|
|
padding: 25px 10px;
|
|
}
|
|
|
|
p {
|
|
color: $cBlackText;
|
|
margin-bottom: 0;
|
|
font-family: $font-1;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 65px;
|
|
height: 65px;
|
|
margin-bottom: 15px;
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
@include respond-between(sm, md) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-between(sm, md) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-3,
|
|
#scontainer-6,
|
|
#scontainer-8,
|
|
#scontainer-11 {
|
|
text-align: center;
|
|
@extend .box;
|
|
|
|
div[class^='col-']:last-child {
|
|
p {
|
|
max-width: 650px;
|
|
margin: 0 auto 40px auto;
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
>img {
|
|
width: 515px;
|
|
height: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 40px;
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 440px;
|
|
height: auto;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 350px;
|
|
height: auto;
|
|
margin-top: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 350px;
|
|
height: auto;
|
|
margin-top: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
margin-top: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
@extend .title;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
padding: 6px 10px;
|
|
|
|
img {
|
|
margin-left: 10px;
|
|
width: 40px;
|
|
height: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-6 {
|
|
div[class^='col-'] {
|
|
>img {
|
|
@include respond-above(lg) {
|
|
width: 515px;
|
|
height: 584px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 306px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-8 {
|
|
border-top: 1px solid #000;
|
|
margin-top: 100px;
|
|
padding-top: 80px;
|
|
|
|
div[class^='col-'] {
|
|
>img {
|
|
@include respond-above(lg) {
|
|
width: 448px;
|
|
height: 561px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 338px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-11 {
|
|
padding-top: 80px;
|
|
margin-top: 100px;
|
|
border-top: 1px solid #000;
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
>img {
|
|
@include respond-above(md) {
|
|
width: 403px;
|
|
height: 647px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 433px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
@include respond-above(xs) {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
@include respond-below(xs) {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-3 {
|
|
div[class^='col-'] {
|
|
>img {
|
|
@include respond-above(lg) {
|
|
width: 503px;
|
|
height: 603px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 440px;
|
|
height: auto;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 323px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.technology {
|
|
min-height: 497px;
|
|
background: url(/upload/filemanager/images/technology-bg.webp) no-repeat center left;
|
|
background-size: cover;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@include respond-between(md, lg) {
|
|
background-position: -54px center;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
background-position: -60px center;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
background-position: -157px -43px;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
min-height: 600px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
background-position: center;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
min-height: 475px;
|
|
}
|
|
|
|
#scontainer-4 {
|
|
div[class^='col-'] {
|
|
div {
|
|
@include respond-between(xs, sm) {
|
|
max-width: 247px;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
color: #fff;
|
|
}
|
|
|
|
h4 {
|
|
color: #fff;
|
|
@extend .subtitle-level-3;
|
|
|
|
&:before {
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
color: #fff;
|
|
|
|
@include respond-below(xs) {
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-5 {
|
|
margin-top: -280px;
|
|
padding-bottom: 100px;
|
|
border-bottom: 1px solid #000;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: -230px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: -278px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: -167px;
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
div {
|
|
margin: 0 20px;
|
|
|
|
&:first-child {
|
|
@include respond-below(lg) {
|
|
margin: 0 20px 0 0;
|
|
width: calc(50% - 10px);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(lg) {
|
|
margin: 0;
|
|
width: calc(50% - 10px);
|
|
}
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 234px;
|
|
}
|
|
|
|
img {
|
|
width: 260px;
|
|
height: 330px;
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 234px;
|
|
height: auto;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
|
|
@include respond-between(xs, lg) {
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
min-height: 63px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.la-bellezza {
|
|
text-align: right;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#scontainer-7 {
|
|
div[class^='col-']:first-child {
|
|
div {
|
|
background: $cGrayBg;
|
|
padding: 50px 90px 50px 60px;
|
|
width: 518px;
|
|
height: 378px;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 50px 45px 50px 40px;
|
|
width: 432px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 35px 36px 35px 25px;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 100%;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 50px 20px 50px 20px;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
@include respond-between(xs, sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.la-bellezza-img {
|
|
margin-top: -278px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: -214px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
img {
|
|
margin-left: 100px;
|
|
width: calc(100% - 100px);
|
|
|
|
@include respond-above(lg) {
|
|
width: 1010px;
|
|
height: 574px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 830px;
|
|
height: 472px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 590px;
|
|
height: 335px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 510px;
|
|
height: 290px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-9 {
|
|
.row {
|
|
&:first-child {
|
|
text-align: center;
|
|
|
|
h2 {
|
|
@extend .title;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 650px;
|
|
margin: 0 auto 0px auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modernita-e-design {
|
|
margin-top: 40px;
|
|
background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.webp) no-repeat right;
|
|
background-size: 58% 100%;
|
|
|
|
@include respond-between(md, lg) {
|
|
background-size: 72% 100%;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
background-size: 73% 100%;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
background-size: cover;
|
|
background: url(/upload/filemanager/images/sistemi-scorrevoli-bg2.webp) no-repeat center;
|
|
margin-top: 140px;
|
|
}
|
|
|
|
#scontainer-10 {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
>img {
|
|
width: 100%;
|
|
|
|
@include respond-above(lg) {
|
|
width: 608px;
|
|
height: 439px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 370px;
|
|
height: 267px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 270px;
|
|
height: 194px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 510px;
|
|
height: 368px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 194px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: -100px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
color: #fff;
|
|
position: relative;
|
|
padding-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: 0;
|
|
background: #fff;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
color: #fff;
|
|
text-align: justify;
|
|
}
|
|
|
|
.btn {
|
|
color: #fff;
|
|
border-color: #fff;
|
|
|
|
&:first-child {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
@include respond-between(sm, lg) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
@include respond-above(lg) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
>div {
|
|
max-width: 330px;
|
|
|
|
@include respond-above(lg) {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
max-width: 303px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-12 {
|
|
img {
|
|
max-width: 100%;
|
|
margin-top: 40px;
|
|
|
|
@include respond-above(lg) {
|
|
width: 1110px;
|
|
height: 452px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 930px;
|
|
height: 378px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 690px;
|
|
height: 280px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 510px;
|
|
height: 207px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
height: 109px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
@extend .title;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
text-align: center;
|
|
margin-right: 150px;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-right: 65px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: 90px;
|
|
font-weight: 700;
|
|
line-height: 90px;
|
|
text-align: center;
|
|
margin-left: 150px;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 40px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 110px;
|
|
font-size: 55px;
|
|
line-height: 60px;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
font-family: $font-3;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
line-height: 31px;
|
|
letter-spacing: 0em;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:last-child {
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.persiane-in-legno,
|
|
.tapparelle-box-01 {
|
|
padding-top: 100px;
|
|
|
|
@include respond-above(md) {
|
|
padding-top: 200px;
|
|
}
|
|
|
|
#scontainer-13,
|
|
#scontainer-27 {
|
|
h3 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -80px;
|
|
top: -140px;
|
|
content: '';
|
|
height: 340px;
|
|
width: 1px;
|
|
background: $cGrayText;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: -45px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -40px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: -30px;
|
|
top: -75px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 150px 80px 190px;
|
|
text-align: justify;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 80px 108px 80px 90px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 80px 30px 80px 80px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
padding: 50px 15px 50px 60px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 50px 15px 50px 15px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:nth-child(2) {
|
|
position: relative;
|
|
background: $cGrayBg;
|
|
|
|
@include respond-between(xs, md) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-right: 0;
|
|
}
|
|
|
|
img {
|
|
@include respond-above(md) {
|
|
top: -100px;
|
|
position: absolute;
|
|
right: -60px;
|
|
}
|
|
|
|
@include respond-above(lg) {
|
|
width: 500px;
|
|
height: 500px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 430px;
|
|
height: 430px;
|
|
object-fit: cover;
|
|
top: -50px;
|
|
}
|
|
|
|
@include respond-between(xs, md) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:nth-child(3) {}
|
|
}
|
|
|
|
#scontainer-27 {
|
|
p:first-child {
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -80px;
|
|
top: -180px;
|
|
content: '';
|
|
height: 340px;
|
|
width: 1px;
|
|
background: $cGrayText;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: -45px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -40px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: -30px;
|
|
top: -75px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:nth-child(2) {
|
|
img {
|
|
@include respond-above(lg) {
|
|
width: 448px;
|
|
height: 385px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sistemi-di-oscuramento {
|
|
@extend .box;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
|
|
@include respond-below(sm) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
img {
|
|
width: 100%;
|
|
|
|
@include respond-above(lg) {
|
|
width: 540px;
|
|
height: 499px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 450px;
|
|
height: 415px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 270px;
|
|
height: 249px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 510px;
|
|
height: 471px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 100%;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 80px 80px 110px;
|
|
text-align: justify;
|
|
|
|
@include respond-above(lg) {
|
|
padding: 80px 90px 80px 50px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 0px 85px 0px 15px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding: 0px 15px 50px 15px;
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.garanzia-di-soddisfazione {
|
|
margin-left: 80px;
|
|
margin-right: 80px;
|
|
background: url(/upload/filemanager/images/garanzia-di-soddisfazione2.webp) no-repeat center;
|
|
background-size: cover;
|
|
|
|
@include respond-between(xs, lg) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#scontainer-15 {
|
|
h2 {
|
|
@extend .title;
|
|
color: #fff;
|
|
padding-bottom: 0;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: center;
|
|
color: #fff;
|
|
position: relative;
|
|
padding-bottom: 40px;
|
|
|
|
@include respond-above(lg) {
|
|
max-width: 820px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {}
|
|
|
|
@include respond-between(sm, md) {}
|
|
|
|
@include respond-below(sm) {}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #fff;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 500px;
|
|
|
|
@include respond-between(md, lg) {
|
|
height: 450px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.brands {
|
|
@extend .box;
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-below(xs) {
|
|
max-width: 120px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
@include respond-below(xs) {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
@include respond-below(xs) {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vi-invitiamo-a-collaborare {
|
|
h3 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 20px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: 0;
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
|
|
@include respond-below(xs) {
|
|
left: calc(50% - 71px);
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#scontainer-17-content {
|
|
>.row {
|
|
>div[class^='col-']:first-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
a {
|
|
color: #000;
|
|
|
|
&:hover {
|
|
color: $cGrayDarkBg;
|
|
}
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.row {
|
|
div[class^='col-'] {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
>div[class^='col-']:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-end;
|
|
margin-top: -223px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: center;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-above(lg) {
|
|
width: 175px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 175px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 175px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 175px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 175px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-17 {
|
|
.tiles {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
column-gap: 50px;
|
|
margin-top: 30px;
|
|
|
|
.tile {
|
|
display: flex;
|
|
column-gap: 10px;
|
|
flex-direction: row-reverse;
|
|
|
|
.tile-data {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
@include respond-below(lg) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
row-gap: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrivici {
|
|
@extend .box;
|
|
|
|
.alert {
|
|
max-width: 828px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
@extend .subtitle;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 30px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
form {
|
|
max-width: 828px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
.form-group {
|
|
margin-bottom: 10px;
|
|
|
|
.form-control {
|
|
@extend .text;
|
|
border-radius: 0;
|
|
padding: 8px 12px;
|
|
height: 100%;
|
|
min-height: 40px;
|
|
border-color: #cacaca;
|
|
|
|
&::placeholder {
|
|
@extend .text;
|
|
color: $cGrayText;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
border-color: #cacaca;
|
|
}
|
|
}
|
|
|
|
.form-check-label {
|
|
@extend .text;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 200px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.form-check {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-check>input {
|
|
height: 15px;
|
|
width: 15px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
border: 1px solid $cGrayText;
|
|
border-radius: 0px;
|
|
outline: none;
|
|
transition-duration: 0.3s;
|
|
background-color: transparent;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.form-check>.form-check-label {
|
|
@extend .text;
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
}
|
|
|
|
.form-check>input:checked {
|
|
border: 1px solid $cGrayText;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.form-check>input:checked+label::before {
|
|
content: '\2713';
|
|
display: block;
|
|
text-align: center;
|
|
color: #000;
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 0px;
|
|
|
|
@include respond-below(xs) {
|
|
top: 4px;
|
|
}
|
|
}
|
|
|
|
.form-check>input:active {
|
|
border: 1px solid $cGrayText;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: #000;
|
|
text-align: center;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
|
|
img {
|
|
@include respond-above(md) {
|
|
width: 172px;
|
|
height: 56px;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
width: 130px;
|
|
height: 42px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#cookie-information {
|
|
@extend .text;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
a {
|
|
@extend .text;
|
|
font-size: 11px;
|
|
line-height: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.banner-mini {
|
|
text-align: center;
|
|
background: url(/upload/filemanager/images/subpage/banner-mini.webp) no-repeat center;
|
|
background-size: cover;
|
|
margin-left: 80px;
|
|
margin-right: 80px;
|
|
padding-top: 90px;
|
|
padding-bottom: 90px;
|
|
|
|
@include respond-below(md) {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
h1 {
|
|
@extend .subtitle;
|
|
color: #fff;
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle-level-3;
|
|
color: #fff;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-container {
|
|
.nav-tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 0;
|
|
gap: 10px;
|
|
|
|
|
|
@extend .box;
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 60px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
li {
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-right: 2px;
|
|
margin-left: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
a {
|
|
@extend .tab;
|
|
background: #fff;
|
|
width: 150px;
|
|
height: 60px;
|
|
display: block;
|
|
padding: 5px;
|
|
border: 1px solid $cGrayBorder;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 146px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 105px;
|
|
padding: 10px;
|
|
min-height: 86px;
|
|
height: auto;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
width: 150px;
|
|
}
|
|
|
|
&.active {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content1 {
|
|
.row {
|
|
&:first-child {
|
|
>div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
@include respond-below(sm) {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
h4 {
|
|
@extend .tab-content-title;
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
@extend .subtitle-level-3;
|
|
text-align: right;
|
|
padding-bottom: 10px;
|
|
|
|
@include respond-below(sm) {
|
|
text-align: left;
|
|
}
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
width: 35px;
|
|
|
|
@include respond-below(sm) {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
text-align: right;
|
|
|
|
@include respond-below(sm) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
>div {
|
|
width: 100%;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content2 {
|
|
.row {
|
|
&:first-child {
|
|
>div[class^='col-'] {
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
h4 {
|
|
@extend .tab-content-title;
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
h5 {
|
|
@extend .subtitle-level-3;
|
|
text-align: left;
|
|
padding-bottom: 10px;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
width: 35px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
text-align: left;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content1,
|
|
.tab-content2 {
|
|
.row {
|
|
&.details {
|
|
>div[class^='col-'] {
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-bottom: 25px;
|
|
margin-top: 50px;
|
|
|
|
@include respond-below(sm) {
|
|
display: block;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
font-size: 14px;
|
|
font-family: $font-3;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin-right: 14px;
|
|
margin-left: 65px;
|
|
width: 30px;
|
|
height: auto;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-left: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.content-schema {
|
|
margin-bottom: 60px;
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
p {
|
|
@extend .text;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
|
|
@include respond-below(md) {
|
|
min-height: 42px;
|
|
}
|
|
}
|
|
|
|
.schema {
|
|
text-align: center;
|
|
margin-left: 10px;
|
|
|
|
p {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 150px;
|
|
min-height: 42px;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
img {
|
|
height: 70px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding-top: 80px;
|
|
border-top: 1px solid #979797;
|
|
margin-top: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.more-schema {
|
|
margin-bottom: 100px;
|
|
|
|
.row {
|
|
&:first-child {
|
|
>div[class^='col-']:last-child {
|
|
img {
|
|
margin-top: 0;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
p {
|
|
font-family: $font-3;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
margin-bottom: 25px;
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: block;
|
|
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
text-align: left;
|
|
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
@extend .text16;
|
|
line-height: 15px;
|
|
position: absolute;
|
|
|
|
&:nth-child(2) {
|
|
top: 67px;
|
|
left: 167px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 64px;
|
|
left: 137px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 99px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 77px;
|
|
left: 108px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 12px;
|
|
left: 45%;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: 135px;
|
|
left: 228px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 136px;
|
|
left: 195px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 123px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 143px;
|
|
left: 143px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 81px;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
top: 282px;
|
|
left: 167px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 273px;
|
|
left: 167px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 97px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 287px;
|
|
left: 110px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 232px;
|
|
left: 48%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
>div[class^='col-'] {
|
|
p {
|
|
@extend .text;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.tab-img {
|
|
margin-bottom: 80px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-long {
|
|
.nav-tabs {
|
|
li {
|
|
a {
|
|
width: 350px;
|
|
height: 60px;
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 290px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 210px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 165px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 230px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-4 {
|
|
.nav-tabs {
|
|
li {
|
|
a {
|
|
width: 250px;
|
|
height: 60px;
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 212px;
|
|
height: 83px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 165px;
|
|
height: 87px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 245px;
|
|
height: 62px;
|
|
}
|
|
|
|
@include respond-below(xs) {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.more {
|
|
background: $cGrayBg;
|
|
margin-left: 100px;
|
|
margin-right: 100px;
|
|
margin-top: 180px;
|
|
padding-bottom: 100px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin-left: 50px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
padding-left: 50px;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
@include respond-between(sm, md) {
|
|
padding-right: 7px;
|
|
padding-left: 7px;
|
|
}
|
|
|
|
&:first-child {
|
|
@include respond-below(sm) {
|
|
div {
|
|
margin-top: -100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
div {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div {
|
|
background: #fff;
|
|
position: relative;
|
|
min-height: 550px;
|
|
margin-top: -100px;
|
|
|
|
@include respond-between(sm, md) {
|
|
min-height: 485px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
min-height: 1px;
|
|
margin-top: 0;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
min-height: 1px;
|
|
margin-top: 0;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
>img {
|
|
width: 100%;
|
|
}
|
|
|
|
h3 {
|
|
color: #101010;
|
|
font-family: $font-2;
|
|
font-size: 23px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
margin: 40px 40px 15px 40px;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin: 40px 25px 15px 25px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin: 30px 15px 15px 15px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin: 30px 25px 15px 25px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
margin: 0px 40px 20px 40px;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin: 0px 25px 20px 25px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin: 0px 15px 20px 15px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin: 0px 25px 20px 25px;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin: 0px 0px 40px 40px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin: 0px 250px 40px 25px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin: 0px 15px 30px 15px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
position: relative;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin: 0px 25px 30px 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.porte-porte-in-pvc {
|
|
#scontainer-21 {
|
|
@extend .box;
|
|
padding-bottom: 0;
|
|
|
|
.row {
|
|
|
|
/* &:first-child{
|
|
h2{
|
|
@extend .title;
|
|
text-align: center;
|
|
}
|
|
p{
|
|
@extend .text;
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
}*/
|
|
&:nth-child(2) {
|
|
div[class^='col-'] {
|
|
&:nth-child(1) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
@include respond-below(sm) {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
>img {
|
|
width: 92%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*&:nth-child(3){
|
|
div[class^="col-"]{
|
|
text-align: center;
|
|
@extend .box;
|
|
@include respond-below( sm ) {
|
|
padding-top: 60px;
|
|
}
|
|
img{
|
|
max-width: 900px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}*/
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-21,
|
|
#scontainer-22,
|
|
#scontainer-23 {
|
|
.row {
|
|
&:nth-child(1) {
|
|
h2 {
|
|
@extend .title;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
|
|
@include respond-below(xs) {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
@include respond-between(xs, sm) {
|
|
width: 100%;
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
th {
|
|
font-family: Alegreya Sans;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: #000;
|
|
text-transform: uppercase;
|
|
padding: 8px 15px;
|
|
|
|
&:empty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:blank {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:first-child {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 8px 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
border: 1px solid #000;
|
|
padding-left: 20px;
|
|
|
|
tr {
|
|
&:first-child {
|
|
td {
|
|
padding-top: 100px;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
td {
|
|
padding-bottom: 100px;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
|
|
@include respond-below(xs) {
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
text-align: center;
|
|
|
|
&:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-22 {
|
|
.row {
|
|
&:nth-child(2) {
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
@extend .box;
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 60px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
width: 420px;
|
|
height: 627px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
height: 500px;
|
|
width: 335px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 235px;
|
|
height: 350px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 200px;
|
|
height: 298px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
left: 442px;
|
|
@extend .text;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 19px;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: 356px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 251px;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
left: 215px;
|
|
line-height: 14px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
top: 100px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 80px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 61px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {}
|
|
|
|
@include respond-below(xs) {
|
|
top: 42px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: 186px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 152px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 114px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {}
|
|
|
|
@include respond-below(xs) {
|
|
top: 89px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
top: 254px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 200px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 152px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {}
|
|
|
|
@include respond-below(xs) {
|
|
top: 114px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
top: 337px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 260px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 193px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {}
|
|
|
|
@include respond-below(xs) {
|
|
top: 156px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
top: 401px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 316px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 231px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {}
|
|
|
|
@include respond-below(xs) {
|
|
top: 188px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(7) {
|
|
top: 486px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 384px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 277px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 476px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 233px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 20px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: 0;
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
div {
|
|
margin-left: 50px;
|
|
padding: 80px;
|
|
background: $cGrayBg;
|
|
|
|
@include respond-between(xs, md) {
|
|
margin-left: 0px;
|
|
padding: 50px 30px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0px;
|
|
padding: 50px 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-23 {
|
|
padding-bottom: 100px;
|
|
|
|
.row {
|
|
&:nth-child(2) {
|
|
div[class^='col-'] {
|
|
&:nth-child(1) {
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-24 {
|
|
@extend .box;
|
|
|
|
div[class^='col-'] {
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle;
|
|
text-align: center;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text20;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin-bottom: 20px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tipi-di-montaggio {
|
|
background: url(/upload/filemanager/images/persiane-in-legno/persiane-in-legno-bg.webp) no-repeat center;
|
|
background-size: cover;
|
|
margin-left: 80px;
|
|
margin-right: 80px;
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
|
|
@include respond-between(xs, md) {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
text-align: center;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text20;
|
|
color: #fff;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle;
|
|
color: #fff;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #fff;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
#scontainer-26 {
|
|
margin-top: 80px;
|
|
text-align: center;
|
|
|
|
h2 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text20;
|
|
font-size: 19px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin-bottom: 80px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin-bottom: 20px;
|
|
max-height: 300px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tapparelle-img {
|
|
.box {
|
|
@include respond-below(xs) {
|
|
padding-bottom: 64px;
|
|
}
|
|
}
|
|
|
|
#scontainer-44 {
|
|
@include respond-below(xs) {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.scontainer-content {}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
margin-bottom: 38px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: center;
|
|
}
|
|
|
|
img {
|
|
height: 98px;
|
|
margin-left: 40px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-left: 5px;
|
|
height: 80px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-left: 2px;
|
|
height: 60px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
// font-weight: 500;
|
|
margin-bottom: 0;
|
|
width: 170px;
|
|
text-align: right;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 95px;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row:last-child {
|
|
p {
|
|
@extend .text20;
|
|
background: $cGrayDarkBg;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #fff;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
padding: 5px 20px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-above-xs {
|
|
text-align: center;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
overflow: hidden;
|
|
/* &:last-child{
|
|
img{
|
|
@include respond-below( xs ) {
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
}*/
|
|
}
|
|
|
|
img {
|
|
height: 490px;
|
|
|
|
@include respond-between(sm, md) {
|
|
height: 350px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
height: 250px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
height: auto;
|
|
width: 230px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
#scontainer-42 {
|
|
@include respond-below(xs) {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: $cGrayBg;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
// font-weight: 500;
|
|
margin-bottom: 0;
|
|
|
|
@include respond-above(md) {
|
|
left: 409px;
|
|
}
|
|
|
|
@include respond-above(xs) {
|
|
position: absolute;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 296px;
|
|
// font-size: 15px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
left: 215px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
line-height: 16px;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: 'a';
|
|
left: 10px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
@include respond-above(xs) {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '1';
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
@include respond-above(md) {
|
|
top: 30px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 19px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 15px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '2';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
@include respond-above(md) {
|
|
top: 57px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 36px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 29px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '3';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
@include respond-above(md) {
|
|
top: 167px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 116px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 84px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '4';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
@include respond-above(md) {
|
|
top: 247px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 173px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 125px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '5';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
@include respond-above(md) {
|
|
top: 290px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 205px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 146px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '6';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(7) {
|
|
@include respond-above(md) {
|
|
top: 326px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 230px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 165px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '7';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(8) {
|
|
@include respond-above(md) {
|
|
top: 361px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 256px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 184px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '8';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(9) {
|
|
@include respond-above(md) {
|
|
top: 400px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 283px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 202px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '9';
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(10) {
|
|
@include respond-above(md) {
|
|
top: 427px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 303px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 216px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
&:before {
|
|
content: '10';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-43 {
|
|
p {
|
|
position: absolute;
|
|
@extend .text16;
|
|
font-weight: 500;
|
|
margin-bottom: 0;
|
|
top: 0;
|
|
|
|
@include respond-below(xs) {
|
|
left: calc(50% + 118px);
|
|
}
|
|
|
|
&:first-child {
|
|
top: 0;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
@include respond-below(xs) {
|
|
top: 20px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
@include respond-below(xs) {
|
|
top: 39px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
@include respond-below(xs) {
|
|
top: 124px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
@include respond-below(xs) {
|
|
top: 185px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
@include respond-below(xs) {
|
|
top: 219px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(7) {
|
|
@include respond-below(xs) {
|
|
top: 246px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(8) {
|
|
@include respond-below(xs) {
|
|
top: 274px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(9) {
|
|
@include respond-below(xs) {
|
|
top: 304px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(10) {
|
|
@include respond-below(xs) {
|
|
top: 325px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-28 {
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
h3 {
|
|
font-family: $font-2;
|
|
font-weight: 400;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
color: #000;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 111px;
|
|
min-height: 50px;
|
|
margin-bottom: 0;
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
padding: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
img {
|
|
width: 110px;
|
|
height: 103px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
div.row {
|
|
&:not(:first-child, :last-child) {
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
div.col-12 {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-33,
|
|
#scontainer-34,
|
|
#scontainer-37,
|
|
#scontainer-38,
|
|
#scontainer-39,
|
|
#scontainer-60 {
|
|
margin-top: 80px;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
text-transform: none;
|
|
margin-bottom: 20px;
|
|
|
|
&:before {
|
|
width: 90px;
|
|
}
|
|
|
|
span {
|
|
font-size: 30px;
|
|
font-family: $font-1;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
&:first-child {
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 111px;
|
|
min-height: 67px;
|
|
margin-bottom: 0;
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
padding: 2px;
|
|
margin-bottom: 20px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
img {
|
|
width: 110px;
|
|
height: 103px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-33,
|
|
#scontainer-37 {
|
|
margin-top: 100px;
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: 70px;
|
|
}
|
|
}
|
|
|
|
#scontainer-39 {
|
|
h4 {
|
|
@include respond-below(xs) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
span {
|
|
@include respond-below(xs) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-29 {
|
|
padding-top: 80px;
|
|
|
|
div[class^='col-']:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: center;
|
|
}
|
|
|
|
div {
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text16;
|
|
text-align: right;
|
|
margin-bottom: 50px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tapparelle-controllo-separato {
|
|
background: url(/upload/filemanager/images/tapparelle/tapparelle-bg.webp) no-repeat center;
|
|
background-size: cover;
|
|
height: 500px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 100px;
|
|
margin-top: -120px;
|
|
|
|
@include respond-between(xs, sm) {
|
|
padding-top: 0px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
margin-top: -80px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
height: 720px;
|
|
padding-top: 80px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: left;
|
|
color: #fff;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
color: #fff;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-bottom: 30px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
order: 2;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@include respond-below(xs) {
|
|
order: 1;
|
|
}
|
|
|
|
justify-content: center;
|
|
|
|
div {
|
|
max-width: 473px;
|
|
margin-left: 68px;
|
|
|
|
@include respond-between(sm, md) {
|
|
max-width: 320px;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
max-width: 225px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-31 {
|
|
margin-bottom: 100px;
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
}
|
|
|
|
p {
|
|
@extend .text16;
|
|
}
|
|
|
|
.row {
|
|
padding-top: 80px;
|
|
|
|
&:last-child {
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
|
|
img {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&:first-child {
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: center;
|
|
}
|
|
|
|
h3,
|
|
p {
|
|
text-align: right;
|
|
|
|
&:before {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
div {
|
|
max-width: 300px;
|
|
margin-left: auto;
|
|
margin-right: 50px;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin-right: 40px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-right: 25px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
text-align: left;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: center;
|
|
}
|
|
|
|
h3,
|
|
p {
|
|
text-align: left;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
div {
|
|
max-width: 350px;
|
|
margin-left: 50px;
|
|
margin-right: auto;
|
|
|
|
@include respond-between(md, lg) {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-left: 25px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-contact {
|
|
.modal-lg {
|
|
@include respond-above(lg) {
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 0;
|
|
|
|
.modal-header {
|
|
border-bottom: none;
|
|
padding: 0;
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 6px;
|
|
z-index: 500;
|
|
|
|
span {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px 168px 20px;
|
|
|
|
h5 {
|
|
font-family: $font-1;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.btn-black {
|
|
margin-top: 10px;
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.btn-yellow {
|
|
@include respond-below(xs) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
form {
|
|
|
|
.form-row>.col,
|
|
.form-row>[class*='col-'] {
|
|
padding-right: 3px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.form-row {
|
|
&:last-child {
|
|
.form-group {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 10px;
|
|
|
|
.form-check {
|
|
.form-check-label {
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
font-family: $font-3;
|
|
line-height: 15px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
font-family: $font-3;
|
|
line-height: 15px;
|
|
margin-bottom: 5px;
|
|
maegin-top: 5px;
|
|
}
|
|
|
|
.form-control {
|
|
@extend .text16;
|
|
font-family: $font-1;
|
|
border: 1px solid #000;
|
|
border-radius: 0;
|
|
padding: 8px;
|
|
height: auto;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.file {
|
|
border: 2px dashed #c5c5c5;
|
|
border-radius: 5px;
|
|
margin-bottom: 0px;
|
|
padding: 10px 15px;
|
|
|
|
@include respond-above(xs) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
max-width: 50px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
font-family: $font-1;
|
|
margin-bottom: 0;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include respond-above(xs) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-32,
|
|
#scontainer-36 {
|
|
.row {
|
|
&:first-child {
|
|
div[class^='col-'] {
|
|
text-align: right;
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 30px;
|
|
font-family: $font-1;
|
|
font-weight: 400;
|
|
line-height: 41px;
|
|
letter-spacing: 0em;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
div[class^='col-'] {
|
|
text-align: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-between(md, lg) {
|
|
height: 234px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
height: 167px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-transform: uppercase;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.links {
|
|
background: url(/upload/filemanager/images/subpage/links-bg.webp) no-repeat center;
|
|
background-size: cover;
|
|
margin-left: 80px;
|
|
margin-right: 80px;
|
|
text-align: center;
|
|
@extend .box;
|
|
|
|
@include respond-between(xs, lg) {
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
#scontainer-35 {
|
|
@include respond-above(lg) {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.row {
|
|
div[class^='col-'] {
|
|
div {
|
|
background: rgba(255, 255, 255, 0.75);
|
|
padding: 40px 33px;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 40px 23px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 20px 10px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
>img {
|
|
margin-bottom: 30px;
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
@include respond-above(lg) {
|
|
height: 270px;
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
height: 256px;
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
height: 207px;
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: auto;
|
|
height: 270px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: auto;
|
|
height: 254px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 15px 10px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
max-width: 350px;
|
|
margin: 0 auto 30px auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-pvc-verto {
|
|
background: $cGrayBg;
|
|
margin-top: 80px;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
margin-top: -100px;
|
|
|
|
@include respond-above(lg) {
|
|
width: 509px;
|
|
height: 382px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 450px;
|
|
height: 338px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 330px;
|
|
height: 247px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
height: 217px;
|
|
width: 290px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
max-width: 509px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
text-align: right;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
|
|
@include respond-between(xs, sm) {
|
|
text-align: right;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
right: -80px;
|
|
top: -250px;
|
|
content: '';
|
|
height: 350px;
|
|
width: 1px;
|
|
background: $cGrayText;
|
|
|
|
@include respond-between(md, lg) {
|
|
height: 298px;
|
|
top: -244px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
right: -10px;
|
|
height: 217px;
|
|
top: -196px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include respond-above(lg) {
|
|
padding-right: 70px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-end;
|
|
margin-top: 50px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
div {
|
|
max-width: 250px;
|
|
|
|
@include respond-between(sm, md) {
|
|
max-width: 300px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-right: 50px;
|
|
max-width: 300px;
|
|
margin-top: -39px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.verto-1-2-3 {
|
|
@extend .box;
|
|
|
|
h2 {
|
|
font-family: $font-4;
|
|
font-size: 40px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 53px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
border: 1px solid $cGrayBorder;
|
|
display: inline-block;
|
|
padding: 4px 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h3 {
|
|
font-family: $font-4;
|
|
font-size: 23px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
margin-bottom: 20px;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
border-right: 1px solid #d9d9d9;
|
|
|
|
@include respond-above(md) {
|
|
padding-right: 40px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
border-right: none;
|
|
|
|
p {
|
|
border-bottom: 1px solid #d9d9d9;
|
|
padding-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
border-right: 1px solid #d9d9d9;
|
|
|
|
@include respond-above(md) {
|
|
padding-right: 40px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
border-right: none;
|
|
|
|
p {
|
|
border-bottom: 1px solid #d9d9d9;
|
|
padding-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-above(md) {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-pvc-ferramenta {
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: right;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: right;
|
|
max-width: 250px;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-right: 60px;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding-right: 37px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-right: 25px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-right: 0;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2),
|
|
&:nth-child(3) {
|
|
text-align: center;
|
|
|
|
p {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-pvc-maniglia {
|
|
padding-top: 100px;
|
|
|
|
@include respond-below(xs) {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: right;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
max-width: 320px;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
right: -40px;
|
|
top: -122px;
|
|
content: '';
|
|
height: 350px;
|
|
width: 1px;
|
|
background: $cGrayText;
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: -230px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
>div[class^='col-']:last-child {
|
|
background: $cGrayBg;
|
|
padding: 80px 130px;
|
|
z-index: 9;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 45px 78px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 40px 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-pvc-maniglia-img {
|
|
margin-top: -320px;
|
|
z-index: -1;
|
|
margin-bottom: 0px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: -274px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.ricevi-box {
|
|
text-align: center;
|
|
padding-top: 50px;
|
|
padding-bottom: 100px;
|
|
|
|
&.funzionale {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.a-risparmio-energetico-verto {
|
|
background: $cGrayBg;
|
|
margin-top: 80px;
|
|
padding-top: 40px;
|
|
padding-bottom: 50px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: right;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
div {
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(xs) {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin-top: -100px;
|
|
width: 100%;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 55px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 270px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text16;
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
top: 0;
|
|
line-height: 18px;
|
|
|
|
@include respond-between(md, lg) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
left: 0;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
top: -109px;
|
|
left: 289px;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: 242px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 176px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 44px;
|
|
left: 241px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 49px;
|
|
left: calc(50% - 33px);
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: 58px;
|
|
left: -33px;
|
|
text-align: right;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 29px;
|
|
left: -29px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
max-width: 87px;
|
|
top: -6px;
|
|
left: -8px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 169px;
|
|
left: 13px;
|
|
max-width: 86px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 114px;
|
|
left: calc(50% - 170px);
|
|
max-width: 92px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
top: -8px;
|
|
left: 525px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: -47px;
|
|
left: 444px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: -45px;
|
|
left: 330px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 130px;
|
|
left: 430px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 79px;
|
|
left: calc(50% + 68px);
|
|
max-width: 79px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
top: 132px;
|
|
left: 525px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 93px;
|
|
left: 437px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 45px;
|
|
left: 326px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 242px;
|
|
left: 420px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 151px;
|
|
left: calc(50% + 81px);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
top: 253px;
|
|
left: 472px;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 193px;
|
|
left: 398px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 118px;
|
|
left: 292px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 338px;
|
|
left: 380px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 204px;
|
|
left: calc(50% + 67px);
|
|
}
|
|
}
|
|
|
|
&:nth-child(7) {
|
|
top: 234px;
|
|
text-align: right;
|
|
left: 0;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: 177px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 109px;
|
|
left: 9px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 320px;
|
|
left: 12px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 197px;
|
|
left: calc(50% - 148px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vetri-selettivi {
|
|
@extend .box;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: left;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-line;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
|
|
@include respond-below(md) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 325px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.canalina-calda {
|
|
background: $cGrayBg;
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: right;
|
|
margin-top: 60px;
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: 72px;
|
|
}
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: right;
|
|
max-width: 300px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
padding-right: 83px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
padding-right: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-legno-canalina-calda {
|
|
margin-bottom: 0px;
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: left;
|
|
margin-top: 60px;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: left;
|
|
max-width: 300px;
|
|
margin-bottom: 60px;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -70px;
|
|
top: -86px;
|
|
content: '';
|
|
height: 350px;
|
|
width: 1px;
|
|
background: #bebebe;
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -27px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
left: -17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 140px;
|
|
background: $cGrayBg;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding-left: 52px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
padding-right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
img {
|
|
@include respond-below(xs) {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.profili-slim {
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: right;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
text-align: right;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: right;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
background: $cGrayBg;
|
|
padding: 50px 60px;
|
|
z-index: 2;
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 50px 30px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 45px 30px;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.profili-slim-img {
|
|
img {
|
|
width: 100%;
|
|
margin-top: -195px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: -25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.porte-dettagli {
|
|
@extend .box;
|
|
padding-top: 136px;
|
|
|
|
#scontainer-41 {
|
|
@include respond-above(md) {
|
|
padding-right: 70px;
|
|
}
|
|
|
|
.row {
|
|
&:first-child {
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
img {
|
|
z-index: 5;
|
|
margin-right: 40px;
|
|
width: 134px;
|
|
height: 184px;
|
|
|
|
&:last-child {
|
|
width: 136px;
|
|
height: 185px;
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
margin-right: 0px;
|
|
|
|
&:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 170px;
|
|
@extend .text;
|
|
font-weight: 500;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: 83px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 55px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: 14px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
left: 16px;
|
|
top: -26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: -155px;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-end;
|
|
margin-top: -33px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: -12px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
|
|
@include respond-above(lg) {
|
|
width: 422px;
|
|
height: 292px;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 415px;
|
|
height: 287px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
width: 330px;
|
|
height: 228px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
width: 345px;
|
|
height: 238px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 280px;
|
|
height: 186px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 78px;
|
|
@extend .text;
|
|
font-weight: 500;
|
|
|
|
@include respond-between(sm, md) {
|
|
left: 53px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: 226px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 7px;
|
|
left: auto;
|
|
right: 0;
|
|
max-width: 258px;
|
|
line-height: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
@include respond-between(xs, sm) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
img {
|
|
margin-top: -97px;
|
|
width: 145px;
|
|
height: 215px;
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: -70px;
|
|
margin-left: 88px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
margin-top: -6px;
|
|
margin-left: 126px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
transform: rotate(-90deg);
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 90px;
|
|
@extend .text;
|
|
font-weight: 500;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: 30px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
top: 28px;
|
|
left: -31px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
top: 5px;
|
|
left: -5px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
top: 82px;
|
|
left: 40px;
|
|
line-height: 13px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
h2 {
|
|
font-family: $font-3;
|
|
font-size: 100px;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
line-height: 120px;
|
|
letter-spacing: 0.05em;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
color: #e1e1e1;
|
|
margin-bottom: 0;
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 78px;
|
|
line-height: 78px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
font-size: 72px;
|
|
line-height: 72px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 70px;
|
|
line-height: 70px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.una-marea-img {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.una-marea {
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
right: -40px;
|
|
top: -10px;
|
|
content: '';
|
|
height: 350px;
|
|
width: 1px;
|
|
background: #bebebe;
|
|
|
|
@include respond-between(md, lg) {
|
|
top: -72px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
right: -21px;
|
|
top: -107px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
right: -14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
&:first-child {
|
|
height: 1px;
|
|
}
|
|
|
|
div {
|
|
margin-top: -682px;
|
|
background: $cGrayBg;
|
|
padding: 130px 90px;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 40px 90px;
|
|
margin-top: -560px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
margin-top: -412px;
|
|
padding: 25px 40px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
margin-top: -25px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 70px 25px;
|
|
margin-top: -25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-maniglia,
|
|
.dettagli-legno-maniglia {
|
|
@extend .box;
|
|
padding-bottom: 0;
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
max-width: 400px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
div {}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-colori-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
div {
|
|
display: block;
|
|
width: 17%;
|
|
text-align: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
p {
|
|
@extend .text20;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
|
|
@include respond-below(lg) {
|
|
min-height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-legno-maniglia {
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-box-bg {
|
|
margin-top: 120px;
|
|
background: url(/upload/filemanager/images/dettagli-pvc/design-moderno/guarnizioni-bg.webp) no-repeat center;
|
|
background-size: cover;
|
|
|
|
@include respond-below(xs) {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
div {
|
|
margin-top: 80px;
|
|
margin-bottom: 80px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle-line;
|
|
color: #fff;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
background: #fff;
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
color: #fff;
|
|
padding-bottom: 0;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
color: #fff;
|
|
max-width: 400px;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -637px;
|
|
top: -248px;
|
|
content: '';
|
|
height: 340px;
|
|
width: 1px;
|
|
background: #bebebe;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: -540px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -407px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: -32px;
|
|
top: -486px;
|
|
height: 565px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
left: 9px;
|
|
top: -369px;
|
|
height: 243px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.freno {
|
|
p {
|
|
&:before {
|
|
left: -558px;
|
|
top: -256px;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: -441px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -298px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: -8px;
|
|
top: -678px;
|
|
height: 424px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
@include respond-between(xs, sm) {
|
|
padding-top: 80px;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-3-box {
|
|
padding-top: 100px;
|
|
padding-bottom: 60px;
|
|
|
|
@include respond-below(sm) {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
margin-top: 20px;
|
|
|
|
@include respond-between(md, lg) {
|
|
font-size: 34px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
font-size: 24px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: justify;
|
|
margin-bottom: 40px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@extend .text20;
|
|
color: #000;
|
|
letter-spacing: 0;
|
|
|
|
@include respond-above(sm) {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
display: block;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-finitura-ultra-opaca {
|
|
padding-bottom: 100px;
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-align: center;
|
|
max-width: 750px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
div[class^='col-']:nth-child(2) {
|
|
padding-top: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 50px;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
display: block;
|
|
|
|
img {
|
|
width: 105px;
|
|
}
|
|
|
|
p {
|
|
text-transform: uppercase;
|
|
margin-top: 20px;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.soglia-bassa {
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
z-index: 5;
|
|
|
|
div {
|
|
background: $cGrayBg;
|
|
padding: 50px 60px;
|
|
|
|
@include respond-below(xs) {
|
|
padding: 50px 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.soglia-bassa-img {
|
|
img {
|
|
width: 100%;
|
|
margin-top: -195px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
height: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.salatura {
|
|
@extend .box-text-left;
|
|
padding-bottom: 0;
|
|
|
|
div[class^='col-'] {
|
|
&:first-child {
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@include respond-below(sm) {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-right {
|
|
@extend .box-text-right;
|
|
padding-top: 100px;
|
|
padding-bottom: 0;
|
|
|
|
@include respond-below(xs) {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
p {
|
|
@include respond-below(sm) {
|
|
margin-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@include respond-below(sm) {
|
|
font-size: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-left {
|
|
@extend .box-text-left;
|
|
padding-top: 100px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dettagli-legno-legno {
|
|
h3 {
|
|
@extend .subtitle;
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
|
|
@include respond-below(sm) {
|
|
&:before {
|
|
left: calc(50% - 71px);
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 260px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 30px;
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
div[class^='col-']:last-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 50px;
|
|
|
|
@include respond-below(sm) {
|
|
order: 1;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
@include respond-below(sm) {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.colori-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 520px;
|
|
padding-left: 50px;
|
|
|
|
@include respond-between(md, lg) {
|
|
max-width: 435px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
max-width: 326px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
div {
|
|
display: block;
|
|
width: 17%;
|
|
text-align: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
margin-left: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dettagli-pvc {
|
|
.dettagli-pvc-maniglia-img {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.no-touchevents {
|
|
div[id^='menu-container-'] {
|
|
>ul {
|
|
>li {
|
|
&.parent {
|
|
>a {
|
|
@include respond-above(xs) {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.touchevents {
|
|
.top {
|
|
#main-menu {
|
|
div[id^='menu-container-'] {
|
|
>ul {
|
|
>li:hover {
|
|
ul {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
>li {
|
|
&.open-menu {
|
|
ul {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.files {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.file-cover {
|
|
background: #fff;
|
|
height: 30px;
|
|
margin-top: -30px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.captcha.error {
|
|
.check {
|
|
border: 2px solid #cc0000;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
@include respond-below(xs) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
&:first-child {
|
|
margin-right: 10px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-right: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttons2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
.btn {
|
|
&:first-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#fancybox-buttons.top {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.color-container {
|
|
position: relative;
|
|
// padding-top: 90px;
|
|
width: 115px;
|
|
@include transition;
|
|
|
|
&:hover {
|
|
p {
|
|
background: #000 !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
|
|
img {
|
|
height: 90px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.map-adres {
|
|
iframe {
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
.footer-big {
|
|
background: #231f20;
|
|
@extend .box;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
|
|
@include respond-below(md) {
|
|
padding-top: 75px;
|
|
padding-bottom: 75px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.column-right {
|
|
@include respond-above(sm) {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
font-weight: 200;
|
|
}
|
|
}
|
|
|
|
.column-left {
|
|
font-weight: 200;
|
|
|
|
@include respond-above(sm) {
|
|
padding-right: 50px;
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
img {
|
|
max-width: 200px !important;
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer_top_box {
|
|
padding-bottom: 80px;
|
|
|
|
.footer_top_box__wrapper {
|
|
.footer_top_data {
|
|
.footer_top_title {
|
|
text-align: center;
|
|
|
|
h2 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 30px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 142px;
|
|
left: calc(50% - 71px);
|
|
background: #000;
|
|
height: 1px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer_top_tiles {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
column-gap: 100px;
|
|
row-gap: 40px;
|
|
|
|
.tile {
|
|
display: block;
|
|
|
|
a {
|
|
color: #000;
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
padding: 15px;
|
|
background-color: #ebebeb;
|
|
width: 360px;
|
|
text-transform: uppercase;
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-LightItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-LightItalic.woff') format('woff');
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-ExtraLightItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-ExtraLightItalic.woff') format('woff');
|
|
font-weight: 200;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Medium.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-MediumItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-MediumItalic.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form Demi';
|
|
src: url('/layout/fonts/URWForm-Demi.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Demi.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Italic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Italic.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Light.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Light.woff') format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-ThinItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-ThinItalic.woff') format('woff');
|
|
font-weight: 100;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Bold.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Bold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-BoldItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-BoldItalic.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Thin.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Thin.woff') format('woff');
|
|
font-weight: 100;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form';
|
|
src: url('/layout/fonts/URWForm-Regular.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-Regular.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form Extra';
|
|
src: url('/layout/fonts/URWForm-ExtraBoldItalic.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-ExtraBoldItalic.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'URW Form Extra';
|
|
src: url('/layout/fonts/URWForm-ExtraBold.woff2') format('woff2'),
|
|
url('/layout/fonts/URWForm-ExtraBold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
.footer-big * {
|
|
font-family: 'URW Form';
|
|
}
|
|
|
|
#scontainer-47 {
|
|
height: 630px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 100px;
|
|
margin-bottom: 100px;
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
margin-bottom: 40px;
|
|
|
|
&::before {
|
|
width: 80%;
|
|
left: 0;
|
|
height: 2px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .subtitle;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -80px;
|
|
top: -140px;
|
|
content: '';
|
|
height: 340px;
|
|
width: 1px;
|
|
background: $cGrayText;
|
|
|
|
@include respond-between(md, lg) {
|
|
left: -45px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
left: -40px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
left: -30px;
|
|
top: -75px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
@extend .subtitle-level-3;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
div[class^='col-']:first-child {
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 150px 80px 60px;
|
|
text-align: justify;
|
|
|
|
@include respond-between(md, lg) {
|
|
padding: 80px 108px 80px 90px;
|
|
}
|
|
|
|
@include respond-between(sm, md) {
|
|
padding: 80px 30px 80px 80px;
|
|
}
|
|
|
|
@include respond-between(xs, sm) {
|
|
padding: 50px 15px 50px 60px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 50px 15px 50px 15px;
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:nth-child(2) {
|
|
position: relative;
|
|
background: $cGrayBg;
|
|
|
|
@include respond-between(xs, md) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-right: 0;
|
|
}
|
|
|
|
img {
|
|
@include respond-above(md) {
|
|
top: 50%;
|
|
position: absolute;
|
|
right: -60px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
@include respond-above(lg) {
|
|
width: 500px;
|
|
height: 630px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@include respond-between(md, lg) {
|
|
width: 430px;
|
|
height: 530px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@include respond-between(xs, md) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: contain;
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div[class^='col-']:nth-child(3) {}
|
|
}
|
|
|
|
#scontainer-48 {
|
|
margin-bottom: 100px;
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
img {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.single-col {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
#scontainer-49,
|
|
#scontainer-50 {
|
|
margin-bottom: 100px;
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.single-col {
|
|
a {
|
|
display: block;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
opacity: 0;
|
|
transition: all 250ms ease-in-out;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 55px;
|
|
height: 55px;
|
|
background: url('/upload/filemanager/images/cassonetto/material-symbols_search.png');
|
|
opacity: 0;
|
|
transition: all 250ms ease-in-out;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
&:not(:last-child) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-51 {
|
|
padding: 100px 70px;
|
|
margin-bottom: 100px;
|
|
background: #fafafa;
|
|
|
|
@include respond-below(md) {
|
|
padding: 50px 40px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
}
|
|
|
|
.row {
|
|
align-items: center;
|
|
}
|
|
|
|
.single-col-1 {
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
.single-col-2 {
|
|
position: relative;
|
|
padding-bottom: 50px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15px;
|
|
width: 100%;
|
|
max-width: 190px;
|
|
height: 1px;
|
|
background: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-52 {
|
|
margin-bottom: 100px;
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.row {
|
|
align-items: center;
|
|
}
|
|
|
|
.single-col {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include respond-below(md) {
|
|
&:not(:last-child) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-53 {
|
|
margin-bottom: 100px;
|
|
|
|
h2 {
|
|
@extend .subtitle-line;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
div[class^='col-'] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
p {
|
|
@extend .text;
|
|
max-width: 106px;
|
|
min-height: 50px;
|
|
margin-bottom: 0;
|
|
background: $cGrayBg;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
padding: 2px;
|
|
margin-bottom: 20px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
img {
|
|
width: 106px;
|
|
height: 106px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.color-container {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.home_slider {
|
|
.swiper-slide {
|
|
overflow: hidden;
|
|
|
|
.slide-data {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.slide-text {
|
|
position: absolute;
|
|
max-width: 1100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-pagination {
|
|
position: absolute;
|
|
right: 70px;
|
|
bottom: 25px;
|
|
width: auto;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 15px;
|
|
|
|
.swiper-pagination-bullet {
|
|
color: #fff;
|
|
background: transparent !important;
|
|
position: relative;
|
|
display: block;
|
|
height: 30px;
|
|
width: 30px;
|
|
opacity: 1 !important;
|
|
|
|
&::before {
|
|
display: block;
|
|
height: 30px;
|
|
width: 30px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
&:first-child::before {
|
|
content: '01';
|
|
}
|
|
|
|
&:nth-child(2)::before {
|
|
content: '02';
|
|
}
|
|
|
|
&:nth-child(3)::before {
|
|
content: '03';
|
|
}
|
|
|
|
&:nth-child(4)::before {
|
|
content: '04';
|
|
}
|
|
|
|
&:nth-child(5)::before {
|
|
content: '05';
|
|
}
|
|
|
|
&.swiper-pagination-bullet-active {
|
|
margin-right: 55px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 1px;
|
|
width: 50px;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -60px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 55px;
|
|
// margin-right: 4px;
|
|
|
|
&::after {
|
|
// display: none;
|
|
right: auto;
|
|
left: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
#nav_tabs {
|
|
max-width: 980px;
|
|
// padding-bottom: 120px;
|
|
margin-bottom: 90px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
// &::before {
|
|
// content: '';
|
|
// position: absolute;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// height: 1px;
|
|
// width: 100vw;
|
|
// background-color: $cBlack;
|
|
// }
|
|
}
|
|
|
|
#nav_tabs,
|
|
#nav_tabs_colors {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 17px;
|
|
list-style: none;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
// width: fit-content;
|
|
|
|
li {
|
|
position: relative;
|
|
min-width: fit-content;
|
|
width: 200px;
|
|
border: 1px solid $cBlack;
|
|
background: $cWhite;
|
|
transition: background 250ms ease;
|
|
|
|
&.new {
|
|
&::before {
|
|
content: url('/upload/filemanager/Icons/new-icon.png');
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -15px;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background: $cBlack;
|
|
|
|
a {
|
|
color: $cTxtWhite;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
row-gap: 3px;
|
|
|
|
color: $cTxtBlack;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
margin-bottom: 0;
|
|
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: color 250ms ease;
|
|
|
|
u {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
margin-bottom: 0;
|
|
letter-spacing: 0.05em;
|
|
text-decoration: none;
|
|
|
|
span {
|
|
margin-top: -4px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#product-preview-box {
|
|
margin-bottom: 100px;
|
|
|
|
.product-preview-box {
|
|
.scontainer-content {
|
|
// padding-left: 250px;
|
|
|
|
.product-preview {
|
|
display: none;
|
|
// padding-left: 250px;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
.product_info_img {
|
|
padding-top: 15px;
|
|
|
|
.product-emblem {
|
|
position: absolute;
|
|
left: 0;
|
|
transform: translateX(-95%);
|
|
z-index: 3;
|
|
|
|
width: 240px;
|
|
height: 240px;
|
|
text-align: center;
|
|
padding: 15px;
|
|
background: $cWhite;
|
|
border: 5px solid #d8d8d8;
|
|
border-radius: 100%;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10px;
|
|
border: 5px solid #e6e6e6;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -15px;
|
|
border: 5px solid #f4f4f4;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 0px 5px #fbfbfb;
|
|
}
|
|
|
|
img {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
p {
|
|
font-weight: 300;
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0;
|
|
|
|
strong {
|
|
display: block;
|
|
position: relative;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: $cTxtLightBlue;
|
|
margin-bottom: 14px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
height: 1px;
|
|
width: 100%;
|
|
max-width: 110px;
|
|
background: $cLightBlue;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
transform: translateX(0);
|
|
left: 15px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.illustration_product_slider {
|
|
.swiper-wrapper {
|
|
.swiper-slide {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.swiper-navigation {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
|
|
.swiper-button-disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.swiper-slide-next {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: opacity 250ms ease-in;
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
.swiper-slide-prev {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: opacity 250ms ease-in;
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
.product_info_text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
h3 {
|
|
font-weight: 700;
|
|
font-size: 35px;
|
|
line-height: 37px;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
ul {
|
|
border: 1px solid #f4f4f4;
|
|
padding: 15px 20px;
|
|
|
|
/* width */
|
|
&::-webkit-scrollbar {
|
|
width: 3px;
|
|
}
|
|
|
|
/* Handle */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #dadada;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* Track */
|
|
&::-webkit-scrollbar-track {
|
|
box-shadow: inset 0 0 5px rgba(grey, 0.1);
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: #000000;
|
|
}
|
|
|
|
li {
|
|
&:not(:last-child) {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
column-gap: 55px;
|
|
row-gap: 15px;
|
|
padding-top: 45px;
|
|
padding-left: 20px;
|
|
|
|
.btn8 {}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: fit-content;
|
|
}
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
text-align: center;
|
|
|
|
.btn8 {
|
|
margin-top: 40px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
margin-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
#product-colors-preview-box {
|
|
margin-bottom: 70px;
|
|
|
|
.scontainer-content {
|
|
.colors-box-header {
|
|
margin-bottom: 50px;
|
|
|
|
h2 {
|
|
font-size: 30px;
|
|
font-weight: 300;
|
|
line-height: 25px;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
p {
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
line-height: 25px;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.c-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: 40px;
|
|
justify-content: center;
|
|
|
|
.c-col {
|
|
&-2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.colors-preview {
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
.color-tiles-rows {
|
|
.color-tiles {
|
|
&:not(:last-child) {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.color-tiles-title {
|
|
margin-bottom: 30px;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.color-tiles-data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
column-gap: 23px;
|
|
row-gap: 15px;
|
|
align-items: flex-start;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
|
|
li {
|
|
list-style: none;
|
|
flex: 0 0 97px;
|
|
|
|
@include respond-below(md) {
|
|
&.empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-65,
|
|
#scontainer-67 {
|
|
margin-bottom: 120px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 50px;
|
|
font-weight: 250;
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
font-family: $font-3;
|
|
|
|
text-transform: uppercase;
|
|
margin-bottom: 48px;
|
|
padding-bottom: 48px;
|
|
border-bottom: 1px solid #000000;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 34px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 34px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
font-family: $font-3;
|
|
color: #1d1d1e;
|
|
|
|
text-transform: uppercase;
|
|
margin-bottom: 0;
|
|
|
|
@include respond-below(xs) {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.col-left {
|
|
max-width: 560px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-66,
|
|
#scontainer-68 {
|
|
margin-bottom: 120px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
p {
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
margin-bottom: 40px;
|
|
|
|
@include respond-below(xs) {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
&-1 {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
margin-bottom: 40px;
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
|
|
li {
|
|
a {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 18px 35px;
|
|
background: #1d1d1e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-2 {
|
|
justify-content: center;
|
|
|
|
>div {
|
|
margin-bottom: 20px;
|
|
padding: 0 10px;
|
|
|
|
>div {
|
|
padding: 70px 40px;
|
|
background: #1d1d1e;
|
|
height: 100%;
|
|
|
|
@include respond-below(xs) {
|
|
padding: 40px 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
|
|
li {
|
|
&:nth-child(1) {
|
|
a {
|
|
background: #dfdfdf;
|
|
|
|
&::after {
|
|
content: url('/upload/filemanager/icon/Vidok-Icon.svg');
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
a {
|
|
background: #fff;
|
|
|
|
&::after {
|
|
content: url('/upload/filemanager/icon/See-Icon.svg');
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: #1d1d1e;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
position: relative;
|
|
padding: 18px 20px;
|
|
|
|
&::after {
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
&:hover {
|
|
color: #1d1d1e;
|
|
}
|
|
|
|
@include respond-below(xs) {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.article {
|
|
.slider {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
} |