/* Description: Blocks Version: 1.0 Author: BeeSoft - Web & Mobile Solutions Author URI: http://www.beesoft.it /* ============================================================================================== BLOCKS ============================================================================================== */ .block-title-hover { position: relative; margin-top: 3rem; .image { position: relative; z-index: 4; @include transition(.8s cubic-bezier(.71, .72, 0, .9)) } .label { position: absolute; bottom: 0; left: 0; z-index: 1; width: calc( 100% - 1rem); line-height: 2rem; color: $color-palette1; letter-spacing: 1px; font-size: 1rem; } &:hover { .image { @include translateY(-2rem); -webkit-box-shadow: 1px 1px 10px rgba(55, 55, 55, 0.3); -moz-box-shadow: 1px 1px 10px rgba(55, 55, 55, 0.3); box-shadow: 1px 1px 10px rgba(55, 55, 55, 0.3); } } // Smartphone Portrait @media only screen and (max-width: 767px) { margin-top: 1.5rem; .image { @include translateY(-2rem); box-shadow: none; } &:hover { .image { box-shadow: none; } } } } .block-text { .area-icon { i { width: 40px; height: 40px; line-height: 40px; background: $color-palette1; color: $color-white-text; text-align: center; @include border-radius(50%); @include transition(0.6s ease-in-out); } } .area-link { .simple-link { &.color-palette4-text { color: $color-palette4; &:hover { color: $color-palette1; } } } } &.block-text-hover-deco { padding: 0 1.5rem 0 0; min-height: 590px; .area-image { width: 100%; } &:hover { .area-link { .simple-link { color: $color-palette1 !important; } } } } &.block-text-deco { position: relative; min-height: 490px; &:before { content: ''; width: 112%; height: 112%; position: absolute; top: -6%; left: -6%; background: $color-white; @include transition(0.6s ease-in-out); -webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); transform: skewX(-10deg); } .area-image, .area-text, .area-link { position: relative; z-index: 2; } .area-image{ margin-left: 70px; } @media only screen and (max-width: 767px) { .area-image{ margin-left: 10px; } } &:hover { &:before { box-shadow: 2px 2px 20px rgba(35, 35, 35, 0.2); } .area-link { .simple-link { color: $color-palette1 !important; } } } } &.block-text-deco2 { position: relative; min-height: 490px; &:before { content: ''; width: 100%; height: 100%; position: absolute; top: -6%; left: 6%; background: $color-white; @include transition(0.6s ease-in-out); -webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); transform: skewX(-10deg); } .area-image, .area-text, .area-link { position: relative; z-index: 2; margin-left: 10px; } &:hover { &:before { box-shadow: 2px 2px 20px rgba(35, 35, 35, 0.2); } .area-link { .simple-link { color: $color-palette1 !important; } } } } &.block-text-cta { box-shadow: 2px 2px 20px rgba(35, 35, 35, 0.2); border: 1px solid $color-grey3; @include border-radius(9px); &:hover { .area-icon { i { background: $color-palette4; @include translateX(1rem); } } } } // Wide Screen @media only screen and (min-width: 1280px) { &.block-text-hover-deco { padding: 7rem 2rem 7rem 5rem; padding: 4rem 2rem 5rem 5rem; .area-image { width: calc(100% - 3rem); } &:before { content: ''; width: calc(100% - 5.5rem); height: calc(100% - 3rem); position: absolute; top: 1.5rem; left: 2.5rem; z-index: -1; background: $color-white; box-shadow: 2px 2px 20px rgba(35, 35, 35, 0.2); @include opacity(0); @include transition(0.6s ease-in-out); -webkit-transform: skewX(-5deg); -moz-transform: skewX(-5deg); transform: skewX(-5deg); } &:hover { &:before { @include opacity(1); } .area-link { .simple-link { &.color-palette4-text { color: $color-palette4; &:hover { color: $color-palette1 !important; } } } } } } &.block-text-deco { min-height: 590px; } } // Smartphone Portrait @media only screen and (max-width: 767px) { &.block-text-hover-deco { padding: 1.5rem; .area-image { width: 100%; } &:before { content: ''; display: none; } } } } .block-image-logo { img { width: 92.5%; -webkit-filter: grayscale(1); -moz-filter: grayscale(1); filter: grayscale(1); @include opacity(0.8); @include transition(0.4s ease-in-out); } &:hover { img { @include opacity(1); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); } } } .block-review { .area-image { img { width: 60px; } } } .block-cta { padding: 4rem 6rem; .area-link { .simple-link { &.color-palette4-text { color: $color-palette4; i { background: $color-palette4; color: $color-white-text !important; margin-left: 1rem; } &:hover { color: $color-white-text; i { background: $color-white-text; color: $color-palette4 !important; } } } } } // Wide Screen @media only screen and (min-width: 1280px) { padding: 6rem 8rem; } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { padding: 4rem 6rem; } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { } // Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { padding: 4rem 0rem; } // Smartphone Portrait @media only screen and (max-width: 767px) { padding: 4rem 0rem; } // Smartphone Landscape @media only screen and (min-width: 480px) and (max-width: 767px) { } } .block-video-fancy { width: 75%; .area-icon { width: 60px; height: 60px; line-height: 60px; text-align: center; background: $color-white; color: $color-palette4; @include border-radius(50%); position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); @include transition(0.6s ease-in-out); i { color: inherit; } } &:hover { .area-icon { background: $color-palette4; color: $color-white-text; } } /*.area-image-deco { position: absolute; z-index: -1; width: 45vw; height: calc(100vh + 30vh); top: -30vh; left: 10vw; }*/ &.block-video-fancy-right { margin-left: 5%; width: 95%; } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { &.block-video-fancy-right { margin-left: 5%; width: 85%; } } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { width: 100%; height: 40vh !important; margin-bottom: 5.5rem; /*.area-image-deco { !*height: calc(40vh + 8rem); top: -4rem; left: 3rem;*! position: absolute; z-index: -1; width: 100%; height: calc(100vh + 10rem); top: -3rem; left: 10rem; }*/ &.block-video-fancy-right { margin-left: 0; width: 100%; margin-bottom: 0; margin-top: 5.5rem; } } } .row div:nth-child(even) .block-video-fancy { .area-image-deco { position: absolute; z-index: -1; /*width: 100%; height: calc(100% + 10rem); top: -5rem; left: 5rem;*/ width: 45vw; height: calc(100vh + 35vh); top: -35vh; left: 10vw; } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { .area-image-deco{ display: none; } } } .row div:nth-child(odd) .block-video-fancy { .area-image-deco { position: absolute; z-index: -1; /*width: 100%; height: calc(100% + 10rem); top: -5rem; left: 5rem;*/ width: 45vw; height: calc(100vh + 35vh); top: -35vh; left: -15vw; } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { .area-image-deco{ display: none; } } //Full HD resolution 3440x1440 (di Daniele) @media only screen and (min-width: 1981px) and (max-width: 2400px){ .area-image-deco { left: -20vw; } } //Full HD resolution 3440x1440 (di Daniele) @media only screen and (min-width: 2401px) and (max-width: 3500px){ .area-image-deco { left: -30vw; } } } .block-showprod { position: relative; .area-triggers { width: 100%; height: 100%; position: absolute; top: 0; left: 0; .trigger { width: 40px; height: 40px; line-height: 40px; background: $color-palette1; color: $color-white-text; box-shadow: none; outline: none; border: none; @include border-radius(50%); @include transition(0.4s ease-in-out); position: absolute; i { font-size: 1rem; } &:hover { background: $color-palette4; } } } .modal-dialog { max-width: 60% !important; } .modal-header { border-bottom: none; justify-content: flex-end; .close { width: 40px; height: 40px; line-height: 40px; @include border-radius(50%); background: $color-palette4; color: $color-white-text; border: none; padding: 0; margin: 0; text-align: center; font-size: 2rem; font-weight: 400; @include transition(0.4s); &:hover { background: $color-palette1; } } } .modal-body { padding-left: 3rem; padding-right: 3rem; padding-bottom: 3rem; padding-top: 3rem; .area-image { width: 250px; float: left; margin-right: 2.5rem; } .area-text { h4 { font-size: 1.4rem; font-weight: 400; letter-spacing: 3px; line-height: 140%; strong { font-weight: 700; } } p { line-height: 140%; } } } // Wide Screen @media only screen and (min-width: 1280px) { .area-triggers { .trigger { width: 30px; height: 30px; line-height: 30px; } } } // Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { .area-triggers { .trigger { width: 50px; height: 50px; line-height: 50px; i { font-size: 1.4rem; } } } .modal-dialog { max-width: 75% !important; } } // Smartphone Portrait @media only screen and (max-width: 767px) { .modal-dialog { max-width: 100% !important; } } } .block-timeline { margin-bottom: 30px; .area-icon { position: relative; width: 140px; height: 140px; &:before { content: ''; width: 140px; height: 140px; position: absolute; top: 0; left: 0; z-index: 0; @include border-radius(50%); background: $color-grey3; } &:after { content: ''; position: absolute; top: -20px; right: -20px; width: 180px; height: 180px; border: 10px solid $color-palette4; border-radius: 50%; @include rotate(45); } img { width: 60%; position: absolute; } } .area-text-smaller { max-height: 140px; overflow: hidden; h4 { color: $color-palette1; } p { color: $color-dark-text; margin: 0; line-height: 160%; } } &.block-timeline-right-text { .area-icon { &:after { border-bottom-color: transparent; border-left-color: transparent; left: auto; right: -25px; } } } &.block-timeline-left-text { .area-icon { &:after { border-top-color: transparent; border-right-color: transparent; right: auto; left: -25px; } } } // Smartphone Portrait @media only screen and (max-width: 767px) { .area-icon { width: 100px; height: 100px; &:before { content: ''; width: 100px; height: 100px; } &:after { display: none; } } .area-text-smaller { max-height: none; p { font-size: 1.066rem; line-height: 140%; } } } } .e-logo{ max-width: 140px; } .timeline-container{ background-image: linear-gradient(#ccc 33%, rgba(255,255,255,0) 0%); background-position: 50%; background-size: 3px 10px; background-repeat: repeat-y; padding-top: 10rem; } .timeline-item{ min-height: 230px; .year-wrapper{ height: 3rem; position: relative; .year{ font-size: 2rem; font-weight: 600; line-height: 1; } } .item-bottom{ .rte{ font-size: 1.5rem; line-height: 1.4; p{ line-height: unset; } } } &.odd{ .timeline-item-ui-wrapper{ @include media-breakpoint-up(lg){ margin-left: calc(100% / 8); } } .year-wrapper{ background-color: #b8b5b5; transform-origin: left bottom; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); } .item-top{ .column{ border-bottom: solid 3px #b8b5b5; } } } &.even{ .timeline-item-ui-wrapper{ @include media-breakpoint-up(lg){ margin-left: calc(50% - ( 100% / 8 )); } } .year-wrapper{ background-color: var(--primary); color: #fff; transform-origin: right top; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%); } .item-top{ .column{ border-bottom: solid 3px var(--primary); } } } } @media (max-width: 767px) { .page-heading{ &.page-heading-video{ height: 100vw; } .area-text h1 { font-size: 2.5rem; } } } @media (min-width: 768px) and (max-width: 991px) { .page-heading{ &.page-heading-video{ height: 75vw; } } } #dslMenu{ ul{ li.wpml-ls-item{ display: flex; align-items: center; a{ margin: 0; padding: 0; } img{ width: 16px; display: block; } ul.dropdown-menu{ position: static; margin: 0 0 0 .5rem; padding: 0; li{ margin-left: 0; } } } } } .homepage-video-block{ height: 100vh; .vid-caption{ padding-top: 50vh; a.simple-link{ text-decoration: none; border: solid 2px #ffad10; padding: 0.5rem; margin: 0.5rem 0; display: inline-block; font-size: 1rem; } } video.videoBG{ width: 100% !important; height: 100% !important; object-fit: cover; } }