@charset "utf-8";
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; } img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; } .mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }@font-face {
font-family: swiper-icons;
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
font-weight: 400;
font-style: normal
}
:root {
--swiper-theme-color: #007aff
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0)
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap
}
.swiper-container-multirow-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform
}
.swiper-slide-invisible-blank {
visibility: hidden
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height
}
.swiper-container-3d {
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory
}
:root {
--swiper-navigation-size: 44px
}
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color))
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: 'prev'
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: 'next'
}
.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
--swiper-navigation-color: #ffffff
}
.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
--swiper-navigation-color: #000000
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: .3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(.33);
position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(.33)
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--swiper-pagination-color, var(--swiper-theme-color))
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0)
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: .2s transform, .2s top
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: .2s transform, .2s left
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: .2s transform, .2s right
}
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, .25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical > .swiper-pagination-progressbar {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff
}
.swiper-pagination-black {
--swiper-pagination-color: #000000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
max-width: 100%;
max-height: 100%;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg)
}
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next + .swiper-slide,
.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
 html {
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Molarum';
font-size: max(22px,.75rem);
color: var(--maincolor);
background-color: #101010;
}
body p {
font-family: 'Molarum';
font-size: max(22px,.75rem);
letter-spacing: 0.8px;
line-height: 1.4;
color: var(--maincolor);
}
@font-face {
font-family: 'Molarum';
src: url(//dive.it/wp-content/themes/dive/css/fonts/nf/Molarum.otf) format('opentype'),
url(//dive.it/wp-content/themes/dive/css/fonts/nf/Molarum.ttf) format('truetype');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Benrock';
src: url(//dive.it/wp-content/themes/dive/css/fonts/nf/Benrock-Regular.ttf) format('truetype'),
url(//dive.it/wp-content/themes/dive/css/fonts/nf/Benrock-Regular.otf) format('opentype'),
url(//dive.it/wp-content/themes/dive/css/fonts/nf/Benrock-Regular.woff2) format('woff2'),
url(//dive.it/wp-content/themes/dive/css/fonts/nf/Benrock-Regular.woff) format('woff');
font-weight: 400;
font-display: swap;
font-style: normal;
} canvas {
position: fixed;
top: 0;
}
a {
text-decoration: inherit;
color: inherit;
margin: 0;
padding: 0;
}
a:hover {
text-decoration: inherit;
color: inherit;
}
p {
font-size: 18px;
padding: 0;
margin: 0;
color: gray;
}
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
}
.bottone-popup {
cursor: pointer;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.16px;
text-align: center;
color: #ffffff !important;
padding: 8px 10px 8px 9px;
background-color: #f1891a;
text-transform: uppercase;
transform: translateY(0px);
-webkit-transition: all 0.35s;
transition: all 0.35s;
transition: 0.2s ease-in;
text-decoration: none !important;
}
.bottone-popup:hover {
box-shadow: 5px 5px 5px #f1891a !important;
color: #f1891a !important;
background-color: var(--maincolor) !important;
transform: translateY(-5px) !important;
transition: 0.2s ease-in;
transform: translateY(-3px);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.modal-body ul li {
color: black;
font-size: 13px;
} section {
width: 100%;
height: auto;
position: relative;
}
.container-100 {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
.container-80 {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
}
.container-60 {
width: 60%;
margin: 0 auto;
padding: 0;
position: relative;
} .padding-5 {
padding-top: 5px;
padding-bottom: 5px;
}
.padding-15 {
padding-top: 15px;
padding-bottom: 15px;
}
.padding-30 {
padding-top: 30px;
padding-bottom: 30px;
}
.padding-50 {
padding-top: 50px;
padding-bottom: 50px;
}
.padding-80 {
padding-top: 80px;
padding-bottom: 80px;
}
.padding-120 {
padding-top: 120px;
padding-bottom: 120px;
}
.padding-mid--vh {
padding: 5vh 0;
}
.padding--vh {
padding: 10vh 0;
}
.padding--vh-top {
padding: 10vh 0 0;
}
.padding-top--vh {
padding-top: 10vh;
}
.padding-bottom--vh {
padding-bottom: 10vh;
}
.padding-top-azienda {
padding-top: 18vh;
}
.padding--hero {
padding: 15vh 0;
}
.padding-top--vh {
padding-top: 7vh;
}
.text-align-center {
text-align: center;
}
.text-align-end {
text-align: end;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
transition: all 0.3s ease;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.z-1 {
z-index: 1;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.absolute {
position: absolute;
}
.mobile {
display: none;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgb(0 0 0 / 0%) 20%, #1b1b1b 100%);
background: -webkit-linear-gradient(180deg, rgb(0 0 0 / 0%) 20%, #1b1b1b 100%);
background: linear-gradient(180deg, rgb(0 0 0 / 0%) 20%, #1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
@media screen and (max-width:900px) {
.mobile {
display: block !important;
}
.desktop {
display: none !important;
}
body p {
font-size: max(16px,.75rem);
}
} .animazione--appare--up {
animation: animazione--appare--up 1.75s ease;
}
@keyframes animazione--appare--up {
0% {
opacity: 0;
transform: translateY(20px);
}
20% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animazione--appare {
animation: animazione--appare 1.75s ease;
}
@keyframes animazione--appare {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animazione--appare--slide {
animation: animazione--appare--slide 1.75s ease;
}
@keyframes animazione--appare--slide {
0% {
opacity: 0;
transform: translateX(30px);
}
20% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
h1 {
font-size: max(35px,.75rem);
line-height: 1.2;
font-weight: 500;
font-family: 'Benrock';
font-weight: normal;
color: var(--maincolor);
text-transform:uppercase;
letter-spacing:2px;
}
h2 {
font-size: 8rem;
font-weight: 700;
font-family: 'Benrock';
color: var(--maincolor);
margin-bottom: 50px;
line-height: 1.2em;
margin-bottom: 5vh;
text-transform:uppercase;
letter-spacing:2px;
}
h3 {
font-size: 2.5rem;
font-weight: 600; color: var(--maincolor);
}
h5 {
font-size: 1.2rem;
font-weight: 300;
}
h6 {
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 300;
} .colorwhite h2, .colorwhite h3, .colorwhite p, .colorwhite a {
color: var(--secondcolor) !important;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
padding: 0;
}
.current-menu-item a {}
.current-menu-item a:before {}
.sfondo-nero {
background-color: var(--secondcolor);
}
.sfondo-glass {
background-color: #d9d9d91a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.bianco {
color: white;
}
.nero {
color: black;
}
.intro {
letter-spacing: 2px;
display: block;
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
}
@media screen and (max-width:990px) {
.padding-150 {
padding-top: 8vh;
padding-bottom: 8vh;
}
.mt-nav {
margin-top: 0;
}
.current-menu-item a:before {
display: none;
}
}
@media screen and (min-width:991px) {
.padding-150 {
padding-top: 15vh;
padding-bottom: 15vh;
}
.mt-nav {
margin-top: 70px;
}
}
.padding-50 {
padding-top: 50px;
padding-bottom: 50px;
}
.no-padding {
padding-top: 0px;
padding-bottom: 0px;
}
.bottom-50 {
margin-bottom: 50px;
}
.bottom-30 {
margin-bottom: 30px;
}
.bottom-10 {
margin-bottom: 15px;
}
.bottom-15 {
margin-bottom: 15px;
} :root {
--maincolor: #ffff;
--secondcolor: #090909;
--orange: #f02310;
--light-dark: #4b4b4b;
--thirdcolor: #D9D9D9;
} .btn-site {
font-size: max(22px,.75rem);
font-weight: 400;
position: relative;
padding: 0.5rem 1.5rem;
z-index: 2;
border: 1px solid var(--light-dark);
border-radius: 20px;
color: var(--light-dark);
background-color: var(--thirdcolor);
transition: all 0.5s ease;
}
.btn-site:hover {
z-index: 2;
border: 1px solid var(--light-dark);
border-radius: 20px;
color: var(--maincolor);
background-color: var(--light-dark);
transition: all 0.5s ease;
}
.colorwhite .btn-site::before {
background-color: var(--secondcolor);
}
.colorwhite .btn-site:hover::before {
background-color: var(--secondcolor);
}
.white-theme .btn-site::before {
background-color: var(--secondcolor);
}
.white-theme .btn-site {
color: var(--secondcolor);
}
.white-theme .btn-site {
color: var(--secondcolor);
}
.white-theme .btn-site:hover::before {
background-color: var(--secondcolor);
}
.button-cta {
background-color: var(--thirdcolor);
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--thirdcolor);
border-radius: 30px;
color: var(--secondcolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.button-cta:hover {
background-color: transparent;
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--maincolor);
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.button-cta-page {
background-color: transparent;
padding: 0.5em 2em;
font-size: 1.2rem;
border: 1px solid #f0231061;
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
position: relative;
}
.button-cta-page:hover {
background-color: var(--orange);
border: 1px solid var(--orange);
color: var(--maincolor);
font-weight: 300;
padding: 0.5em 2em;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.button-cta-glass {
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 0.5em 2em;
font-size: 0.8rem;
border: 0px solid var(--thirdcolor);
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.button-cta-glass:hover {
background-color: var(--secondcolor);
padding: 0.5em 2em;
font-size: 0.8rem;
border: 0px solid var(--maincolor);
border-radius: 30px;
color: var(--light-dark);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
} .btn-arrow {
font-size: 1.2rem;
font-weight: 400;
position: relative;
color: var(--maincolor);
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
position: relative;
right: 30px;
}
.btn-arrow::after {
content: url(//dive.it/wp-content/themes/dive/img/svg/arrow_right.svg);
position: absolute;
height: 3px;
display: block;
width: 1.2rem;
height: auto;
top: -0.1rem;
right: -30px;
}
.btn-arrow:hover::after {
transform: rotate(330deg);
}
.portfolio-project .button-cta:hover {
background-color: var(--secondcolor);
border: 1px solid var(--secondcolor);
color: var(--maincolor) !important;
}
.btn-container {
margin-top: 5vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
position: relative;
left: 0%;
padding: 0px 2vw;
}
.btn-container h5 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 25px;
}
.btn-site-color {
font-size: max(22px,.75rem);
font-weight: 400;
position: relative;
padding: 0.2rem 0.5rem;
z-index: 2;
}
.btn-site-color:after {
content: '';
background-color: var(--orange);
display: inline-block;
height: 2px;
width: 100%;
border-radius: 0px;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
transition: 0.5s all ease;
}
.btn-site-color:hover:after  {
height: 100%;
width: 100%;
border-radius: 20px;
transition: 0.5s height ease, 0.5s border-radius ease 0.4s;
}  .parallax-wrap {
width: 60px;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10;
cursor: pointer;
}
.parallax-icon {
height: 30px;
width: 30px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 24px;
}
.text-animate {
margin-bottom: .5rem;
line-height: 1.5em !important;
} header {
max-width: calc(100% - 100px);
height: 95px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 201;
pointer-events: none;
mix-blend-mode: difference;
}
#header {
transition: all 0.3s linear;
}
#header.hide {
top: -95px;
transition: all 0.3s linear;
}
header .logo-container {
font-size: 28px;
font-weight: 800;
pointer-events: all;
width: 33.33%;
text-align: center;
}
header .contact {
pointer-events: all;
width: 33.33%;
text-align: end;
}
header .logo-container #logo img {
height: 90px;
}
.header-dark #logo img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.header-dark .menu-burger .burger-text .text-close,
.header-dark .menu-burger .burger-text .text-open,
.header-dark .menu-burger .burger-text .text-menu {
color: #000;
}
.header-dark .menu-burger .burger-inner,
.header-dark .burger-inner:after,
.header-dark .burger-inner:before {
background-color: #000;
}
.header-dark-open #logo img {
-webkit-filter: invert(0);
filter: invert(0);
}
.header-dark-open .menu-burger .burger-text .text-close,
.header-dark-open .menu-burger .burger-text .text-open,
.header-dark-open .menu-burger .burger-text .text-menu {
color: #fff;
}
.header-dark-open .menu-burger .burger-inner,
.header-dark-open .burger-inner:after,
.header-dark-open .burger-inner:before {
background-color: #fff;
}
header .menu-burger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
pointer-events: all;
width: 33.33%;
}
header .menu-burger .parallax-icon {
height: 22px;
}
header .menu-burger .burger-text {
position: relative;
color: #fff;
height: 18px;
width: 50px;
font-size: max(16px,.75rem);
}
header .menu-burger .text-menu,
header .menu-burger .text-open,
header .menu-burger .text-close {
position: absolute;
color: #fff;
top: 0;
left: 0;
opacity: 0;
}
header .menu-burger .text-menu {
opacity: 1;
}
.burger-box {
position: relative;
display: inline-block;
width: 30px;
height: 22px;
}
.burger-inner {
top: 50%;
display: block;
margin-top: -2px;
-webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-webkit-transition-duration: 75ms;
-o-transition-duration: 75ms;
transition-duration: 75ms;
}
.burger-inner,
.burger-inner:after,
.burger-inner:before {
position: absolute;
width: 30px;
height: 1.2px;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .15s;
-o-transition-duration: .15s;
transition-duration: .15s;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
border-radius: 4px;
background-color: #fff;
}
.burger-inner:after,
.burger-inner:before {
display: block;
content: "";
}
.burger-inner:before {
top: -10px;
-webkit-transition: top 75ms ease .12s, opacity 75ms ease;
-o-transition: top 75ms ease .12s, opacity 75ms ease;
transition: top 75ms ease .12s, opacity 75ms ease;
}
.burger-inner:after {
bottom: -10px;
-webkit-transition: bottom 75ms ease 0.12s, -webkit-transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 75ms ease 0.12s, -webkit-transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
-o-transition: bottom 75ms ease 0.12s, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 75ms ease 0.12s, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 75ms ease 0.12s, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-burger.is-active .burger-inner {
-webkit-transition-delay: .12s;
-o-transition-delay: .12s;
transition-delay: .12s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-burger.is-active .burger-inner:before {
top: 0;
-webkit-transition: top 75ms ease, opacity 75ms ease .12s;
-o-transition: top 75ms ease, opacity 75ms ease .12s;
transition: top 75ms ease, opacity 75ms ease .12s;
opacity: 0;
}
.menu-burger.is-active .burger-inner:after {
bottom: 0;
-webkit-transition: bottom 75ms ease, -webkit-transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
transition: bottom 75ms ease, -webkit-transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
-o-transition: bottom 75ms ease, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
transition: bottom 75ms ease, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
transition: bottom 75ms ease, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s, -webkit-transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.contact a {
text-transform: uppercase;
color: white;
font-size: max(16px,.75rem);
} #menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 200;
overflow: hidden;
background-color: #121212;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity ease 0.4s 0.6s;
-o-transition: opacity ease 0.4s 0.6s;
transition: opacity ease 0.4s 0.6s;
}
#menu-overlay.active {
opacity: 1;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
pointer-events: all;
}
#menu-overlay .container {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
#menu-overlay .content-wrapper {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.primary-nav {
height: 100vh;
width: 100%;
}
.primary-nav .nav-height {
overflow-y: scroll;
height: 100%;
}
.primary-nav .nav-height .outer {
display: table;
width: 100%;
height: 100%;
}
.outer .inner {
display: table-cell;
vertical-align: middle;
}
.nav-height {
-ms-overflow-style: none; scrollbar-width: none;
}
.nav-height::-webkit-scrollbar {
width: 0px;
background: transparent;  
}
.primary-nav ul {
padding: 70px 0;
margin: 0;
}
#menu-overlay .primary-nav li {
overflow: hidden;
}
#menu-overlay .primary-nav li a {
font-size: 64px;
color: rgba(255, 255, 255, 0.65);
font-weight: 700;
display: inline-block;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: color .2s ease-in-out, -webkit-transform ease 0.4s 0.0s;
transition: color .2s ease-in-out, -webkit-transform ease 0.4s 0.0s;
-o-transition: transform ease 0.4s 0.0s, color .2s ease-in-out;
transition: transform ease 0.4s 0.0s, color .2s ease-in-out;
transition: transform ease 0.4s 0.0s, color .2s ease-in-out, -webkit-transform ease 0.4s 0.0s;
}
#menu-overlay .primary-nav li a:hover {
color: white ;
}
#menu-overlay .primary-nav .sub-menu,
#menu-overlay .primary-nav .children {
padding: 0;
}
#menu-overlay .primary-nav .sub-menu li a,
#menu-overlay .primary-nav .children li a {
font-size: 34px;
font-weight: 600;
}
.sub-menu-open {
display: block !important;
}
#menu-overlay .company-info {
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
position: relative;
z-index: 22;
}
.company-info .sm-links {
margin: 0;
}
.company-info .info-email,
.company-info .info-tel,
.company-info .info-address,
.company-info .sm-links {
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
transform: translateY(25px);
opacity: 0;
-webkit-transition: all ease 0.4s 0.3s;
-o-transition: all ease 0.4s 0.3s;
transition: all ease 0.4s 0.3s;
}
.company-info .info-email, .company-info .info-tel {
display: inline-block;
color: #fff;
font-size: 16px;
margin-bottom: 10px;
text-decoration: revert;
text-decoration-color: var(--orange);
}
.company-info-mail{
display: inline;
width: 250px;
margin-bottom: 10px;
}
.company-info .info-address {
width: 250px;
margin-top: 20px;
}
.company-info .info-address p {
font-size: 16px;
}
.company-info .sm-links {
margin-top: 35px;
}
.company-info .sm-links li {
display: inline-block;
margin-right: 22px;
}
.company-info .sm-links li a {
color: rgba(255,255,255,.69);
font-size: 20px;
}
#menu-overlay.active .primary-nav li a {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform ease 0.7s 0.5s;
transition: -webkit-transform ease 0.7s 0.5s;
-o-transition: transform ease 0.7s 0.5s;
transition: transform ease 0.7s 0.5s;
transition: transform ease 0.7s 0.5s, -webkit-transform ease 0.7s 0.5s;
}
.menu-active {
overflow: hidden !important;
}
#menu-overlay.active .company-info .info-email {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all ease 0.7s 1.0s;
-o-transition: all ease 0.7s 1.0s;
transition: all ease 0.7s 1.0s;
}
#menu-overlay.active .company-info .info-tel {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all ease 0.7s 1.2s;
-o-transition: all ease 0.7s 1.2s;
transition: all ease 0.7s 1.2s;
}
.info-tel p {
font-size: 16px;
}
#menu-overlay.active .company-info .info-address {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all ease 0.7s 1.4s;
-o-transition: all ease 0.7s 1.4s;
transition: all ease 0.7s 1.4s;
}
#menu-overlay.active .company-info .sm-links {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all ease 0.7s 1.6s;
-o-transition: all ease 0.7s 1.6s;
transition: all ease 0.7s 1.6s;
}
.mfp-close {
background: none !important;
} .hero {
height: 100vh;
color: white;
position: relative;
width: 100%;
top: 0;
transition: all 0.5s ease;
}
.hero--scroll {
height: 100vh;
top: -100vh;
transition: all 0.5s ease;
}
.Quick-navigation {
opacity: 0;
transition: all 0.5s ease;
}
.Quick-navigation--scroll {
opacity: 1;
transition: all 0.5s ease;
}
#start-p {
max-width: 100%;
width: 100%;
max-height: 100vh;
z-index: 1;
}
.hero-text {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 110px;
color: #fff;
} .paragrafo p {
color: var(--maincolor);
font-weight: 300;
font-size: 16px;
line-height: 150%;
}
.paragrafo h1 {
font-size: 20vh;
font-weight: 400;
color: var(--maincolor);
margin-bottom: 0px;
font-family: 'Benrock';
text-transform: uppercase;
letter-spacing: 15px;
}
.title-move {
right: -150vw;
top: 10vh;
position: absolute;
z-index: 2;
font-size: 18rem;
color: #4b4b4b;
transition: all 1.5s ease;
}
.title-move:hover {
color: var(--maincolor);
transition: all 1.5s ease;
}
.paragrafo h2 {
font-size: max(25px,3.75rem);
font-weight: 400;
color: var(--maincolor);
margin-bottom: 30px;
}
.paragrafo h3 {
font-size: max(22px,2.6rem);
font-weight: 400;
color: var(--maincolor);
margin-bottom: 30px;
}
.pulsante-normale a {
background-color: var(--maincolor);
color: white;
padding: 20px 30px;
border: 1px solid var(--maincolor);
box-shadow: 0px 0px var(--maincolor);
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.pulsante-normale a:hover {
background-color: #fff;
color: var(--maincolor);
box-shadow: -10px -10px var(--maincolor);
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}
.reveal_show {
visibility: hidden;
position: relative;
width: 100%;
height: 80%;
max-width: 100%;
overflow: hidden;
border-radius: 20px;
}
@media screen and (max-width:900px) {
.paragrafo h2 {
font-size: 26px;
margin-bottom: 30px;
}
.paragrafo p {
color: var(--maincolor);
font-weight: 300;
font-size: 15px;
line-height: 150%;
}
}
@media screen and (max-width:990px) {
.hero {
min-height: 100vh;
padding: 10vh 0;
display: flex;
align-items: center;
}
} .flex-normale {
display: flex;
flex-wrap: nowrap;
}
.flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-align-center {
align-items: center;
align-content: center;
}
.flex-50 {
width: 50%;
position: relative;
}
.flex-65 {
width: 65%;
position: relative;
}
.flex-50 {
width: 50%;
position: relative;
}
.flex-35 {
width: 35%;
position: relative;
}
.gap-5 {
gap: 5vw;
}
.flex-normal-col-1 {
width: 40%;
}
.flex-normal-col-2 {
width: 50%;
}
.flex-normal-col-2 img {
height: auto;
width: 100%;
}
.flex-alternato {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
.flex-alternato-col-1 {
width: 60%;
}
.flex-alternato-col-2 {
width: 35%;
}
.flex-alternato-col-1 img {
width: 100%;
height: auto;
}
.flex-alternato-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
.flex-alternato-2-col-1 {
width: 35%;
}
.flex-alternato-2-col-2 {
width: 60%;
}
.flex-alternato-2-col-2 img {
width: 100%;
height: auto;
} .hero--page {
height: 100vh;
top: 0;
color: white;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: end;
overflow: hidden;
opacity: 1;
transition: all 1.5s ease;
}
.hero--page--scroll {
opacity: 0.4;
transition: all 1.5s ease;
}
.hero__content-page {
position: relative;
left: 5%;
bottom: 5%;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0px;
flex-direction: column;
mix-blend-mode: plus-lighter;
width: 90%;
}
.hero--page-portfolio {
height: 100vh;
color: white;
position: relative;
width: 100%;
}
.hero__content-page-portfolio {
position: absolute;
left: 5%;
bottom: 5%;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
flex-wrap: nowrap;
flex-direction: column;
width: 80%;
}
.hero__content-page-portfolio h1 {
position: relative;
line-height: 1.2em;
color: var(--orange);
font-size: 8rem;
font-weight: 700;
}
.scroll-down {
position: absolute;
bottom: 10%;
right: 5%;
z-index: 5;
}
.box span {
width: 20px;
height: 20px;
display: block;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.box span:nth-child(2) {
animation-delay: -0.2s;
}
.box span:nth-child(3) {
animation-delay: -0.4s;
}
@keyframes animate {
0% {
opacity: 0;
}
50% {
opacity: 1;
transform: rotate(45deg) translate(10px, 10px);
}
100% {
opacity: 0;
}
}
.portfolio-container {
width: 90%;
margin: 0 auto;
}
.portfolio-menu {
text-align:center;
position: sticky;
top: 0;
z-index: 100;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 0 0px 20px 20px;
margin: 0 auto;
width: 100%;
}
.portfolio-menu ul {
width: 80%;
margin: 0 auto;
}
.portfolio-menu ul li {
display:inline-block;
margin: 15px 10px;
list-style:none;
cursor:pointer;
-webkit-transition:all 05s ease;
-moz-transition:all 05s ease;
-ms-transition:all 05s ease;
-o-transition:all 05s ease;
transition:all .5s ease;
}
.portfolio-item {
width: 100%;
margin: 50px auto 24px;
margin-left: 1%;
}
.portfolio-item .item {
width: 30%;
height: 33vw;
margin-bottom: 1.5%;
display: flex;
justify-content: center;
align-items: baseline;
margin-left: 1.5%;
margin-right: 1.5%;
}
.portfolio-item video {
border-radius: 20px;
}
.button-cta-portfolio {
background-color: transparent;
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--maincolor);
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.active.button-cta-portfolio {
background-color: var(--thirdcolor);
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--thirdcolor);
border-radius: 30px;
color: var(--secondcolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.button-cta-portfolio:after{
width:0;
height:0;
content:"";
margin-left:0;
display:inline-block;
vertical-align:middle;
transition:all 100ms linear 0ms;
animation:spin 750ms ease-in-out 0ms infinite;
background-image:url(//dive.it/wp-content/themes/dive/img/loading_icon_black.svg);
background-repeat:no-repeat;
background-position:center;
background-size:0;
}
.button-cta-portfolio.loading:after{
width:18px;
height:18px;
margin-left:8px;
background-size:18px;
}
.button-cta-portfolio:hover {
background-color: var(--thirdcolor);
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--thirdcolor);
border-radius: 30px;
color: var(--secondcolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.single-project {
position: relative;
margin-top: 98vh;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 30px 30px 0px 0px;
}
.testo-page {
width: 50%;
text-align: right;
border-right: 4px solid #fff;
padding: 35px
}
.titolo-page {
width: 50%;
padding: 35px;
text-align: left;
}
.titolo-page h1 {
line-height: 120%;
font-size: 3rem;
font-weight: 900;
color: white;
margin-bottom: 0;
}
.first-section-project {
margin-top: -25vh;
}
.first-section-project-talent {
margin-top: -10vh;
}
.flex-project {
display: flex;
margin-bottom: 5vh;
}
.flex-project-column {
display: flex;
flex-direction: column;
margin-bottom: 5vh;
}
.flex-project-video-image {
display: flex;
justify-content: center;
gap: 20px;
}
@media screen and (min-width: 992px) {
.flex-project-column .second-column {
padding-left: calc(0vw);
}
.first-column {
min-width: calc(30vw);
padding-right: calc(1vw);
position: relative;
}
.column-three {
min-width: calc(30%);
position: relative;
}
.second-column {
padding-left: calc(1vw);
}
}
#executivesummary h2,
.single-project h2 {
font-weight: 700;
font-size: 3.75rem;
}
.wrap-color h4 {
color: #090909 !important;
}
.wrap-color h3 {
color: #090909 !important;
}
.wrap-color p {
color: #090909 !important;
}
.wrap-color h2 {
color: var(--orange) !important;
transition: all 0.5s ease;
transition-delay: 0.8s;
}
.project-image img {
width: 100%;
height: 35vw;
object-fit: cover;
border-radius: 20px;
}
.single-project h3 {
font-size: 2.5rem;
font-weight: 700;
font-family: 'Benrock';
color: var(--maincolor);
margin-bottom: 50px;
text-transform:uppercase;
letter-spacing:2px;
}
.contact-project h3 {
font-size: 2.5rem;
font-weight: 700;
font-family: 'Benrock';
color: var(--maincolor);
margin-bottom: 50px;
text-align: center;
text-transform:uppercase;
letter-spacing:2px;
}
.Quick-navigation {
position: sticky;
z-index: 0;
margin: 0;
top: 50%;
margin-right: 15px;
transform: translateY(-50%);
mix-blend-mode: exclusion;
}
.Quick-navigation-item {
color: rgb(255 255 255 / 40%);
text-decoration: none;
font-size: max(10px,0.55rem);
transition: color 0.3s;
padding-bottom: 4.5em;
display: block;
text-transform: uppercase;
text-align: end;
position: relative;
right: 20px;
}
.Quick-navigation-item:after {
content: '';
position: absolute;
display: inline-block;
right: -22px;
top: max(0px,-0.7rem);
height: max(16px,0.75rem);
width: max(16px,0.75rem);
border-radius: 50%;
border: 1px solid var(--maincolor);
background-color: transparent;
}
.Quick-navigation-item:before {
content: '';
position: absolute;
display: inline-block;
right: -15px;
top: max(16px,0.3rem);
height: 2.8rem;
width: 1.5px;
background-color: var(--maincolor);
}
.Quick-navigation-item:hover,
.Quick-navigation-item.current {
color: #fff;
}
.Quick-navigation-item.current:after {
background-color: var(--maincolor);
}
.last {
padding-bottom: 0em;
}
.last.Quick-navigation-item:before {
content: '';
position: absolute;
display: inline-block;
right: -13px;
top: max(16px,0.75rem);
height: 0;
width: 0;
background-color: var(--maincolor);
}
.Scroll-to-top {
position: fixed;
left: 50%;
top: 43%;
background-color: transparent;
border: none;
color: var(--maincolor);
border: 1px solid #f0231061;
border-radius: 80px;
font-size: 1.2rem;
cursor: pointer;
opacity: 0;
transform: translateY(100%);
transition: all 0.3s;
outline: none;
z-index: 2;
font-weight: 300;
padding: 0.5em 2em;
}
.Scroll-to-top.visible {
opacity: 1;
transform: translate(-50%, 50%);
}
.Scroll-to-top:hover {
background-color: var(--orange);
border: 1px solid var(--orange);
color: var(--maincolor);
font-weight: 300;
padding: 0.5em 2em;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.js-scroll-step {
padding: 10vh 0;
z-index: 0;
}
.single-project p {
font-size: max(18px,.75rem);
letter-spacing: 0.8px;
font-weight: 400;
line-height: 1.6;
color: var(--maincolor);
}
.contatori {
display: flex;
justify-content: center;
gap: 0vw;
align-content: center;
align-items: center;
flex-wrap: nowrap;
}
.page-template-talent .contatore{
width:20%;
}
.contatore {
text-align: left;
padding: 1em 1em 1em;
width: 100%;
height: auto;
}
.dati {
padding: 1em 0em 1em;
position: relative;
display: flex;
justify-content: flex-start;
}
.dati span {
font-size: 5rem;
font-weight: 700;
color: var(--orange);
}
.plus:before {
content: '+';
position: absolute;
left: auto;
display: contents;
font-size: 2.6rem;
font-weight: 700;
}
.K:after {
content: 'K';
position: absolute;
right: auto;
display: inline-block;
font-size: 5rem;
font-weight: 700;
}
.M:after {
content: 'M';
position: absolute;
right: auto;
display: inline-block;
font-size: 5rem;
font-weight: 700;
}
.backhead h4 {
font-weight: 300;
font-size: 1rem;
}
.testo-page h3 {
font-size: 1.5rem;
color: white;
font-weight: 100;
margin-bottom: 0;
}
.contact-project {
position: relative;
z-index: 2;
}
.talent-inproject {
display: flex;
justify-content: space-between;
align-items: baseline;
position: relative;
flex-wrap: wrap;
gap: 2vw;
}
.talent-inproject-column {
width: 10vw;
}
.talent-inproject a img {
width: 10vw;
height: 10vw;
object-fit: cover;
border-radius: 20px;
}
.talent-inproject-name h3 {
font-size: 1.2rem;
padding: 0.8rem 0rem;
margin-bottom: 0;
}
.talent-inproject-name-social {
display: inline-flex;
}
.talent-inproject-name-social li {
margin-right: 0.75rem;
}
.talent-inproject-name-social li i {
font-size: 1rem;
}
.talent-inproject-name-social li svg {
font-size: 1rem;
}
.hero__sfondo {
height: 100%;
top: 0;
left: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
position: relative;
overflow: hidden;
}
.similar-project h3 {
color: var(--light-dark);
}
#scSlideWrapper {
display: flex;
flex-direction: row;
width: 100%;
padding: 10vh 0;
}
#scSlideWrapper .portfolio-project {
flex: 1;
display: flex;
justify-content: center;
align-items: baseline;
overflow: hidden;
transition: all 0.8s ease;
position: relative;
border-radius: 20px;
}
#scSlideWrapper .portfolio-project:hover {
flex: 2;
transition: all 0.8s ease;
}
#scSlideWrapper .portfolio-project .button-cta {
opacity: 0;
transition: all 0.1s ease;
}
#scSlideWrapper .portfolio-project:hover .button-cta {
opacity: 1;
transition: all 1.2s ease;
}
.portfolio-project {
height: 35vw;
color: var(--maincolor);
position: relative;
margin-right: 10px;
}
.portfolio-project:last-child {
margin-right: 0px;
}
.hero__content-single-project {
z-index: 2;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.hero__content-single-project .button-cta {
font-size: 0.78rem;
font-weight: 400;
}
.title-portfolio-project {
width:100%;
position: relative;
z-index: 2;
text-align: left;
}
.title-portfolio-project h5 {
font-size: 1.5rem;
font-weight: 600;
color: var(--maincolor);
margin-bottom: 0;
transition: all 1.1s ease;
}
.sc-slide-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
opacity: 1;
transition: all 0.2s ease;
}
.item img {
border-radius: 20px;
}
.py-4 {
position: absolute;
bottom: 0;
width: 100%;
z-index: 10;
padding: 1rem;
border-radius: 0px 0px 20px 20px;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 1px 1px 0px var(--maincolor);
}
.py-4 h3 {
font-size: 1.75rem;
font-weight: 700;
}
.py-4 span {
font-size: 1rem;
}
.inline-flex {
display: inline-flex;
align-items: center;
}
.py-4 ul {
display: inline-flex;
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.py-4 ul li {
margin-right: 0.75rem;
}
.py-4 ul li i {
font-size: 20px;
}
.py-4 ul li svg {
font-size: 20px;
}
.sc-slide-section img:hover { 
transition: all 0.2s ease;
}
.link-portfolio {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
#scSlideWrapper h2 {
top: 5vh;
color: var(--secondcolor);
mix-blend-mode: revert;
}
.img-dive img {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 10px 10px 10px #101010;
}
.title-portfolio-project-single {
position: absolute;
z-index: 2;
text-align: center;
bottom: 0px;
width: 100%;
padding: 1rem;
border-radius: 0px 0px 20px 20px;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 1px 1px 0px var(--maincolor);
}
.single-portolio-project .hero__content-single-project {
margin-top: 20px;
opacity: 0;
transition: all 0.5s ease;
}
.item:hover .single-portolio-project .hero__content-single-project {
margin-top: 20px;
opacity: 1;
transition: all 0.5s ease;
}
.title-portfolio-project-single h5 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0;
}
.torna-al-portfolio {
background-color: var(--thirdcolor);
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}
.torna-al-portfolio h5 {
color: var(--secondcolor);
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}
.torna-al-portfolio:hover {
background-color: var(--orange);
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}
.torna-al-portfolio:hover h5 {
color: var(--maincolor);
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}
.torna-al-portfolio:hover .title-portfolio-project-single {
bottom: 50px;
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
} .hero__content-talent {
position: relative;
left: 5%;
bottom: 5%;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0px;
flex-direction: column;
mix-blend-mode: plus-lighter;
width: 90%;
}
.hero__content-talent h1 {
position: relative;
line-height: 1.2em;
color: var(--light-dark);
font-size: 8rem;
font-weight: 700;
}
.hero--page-talent img {
height: 100vh;
width: 100%;
position: absolute;
z-index: -1;
top: 0;
right: 0;
object-fit: cover;
}
.hero--page-talent {
height: 100vh;
top: 0;
color: white;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: end;
overflow: hidden;
opacity: 1;
transition: all 1.5s ease;
}
.button-cta-span {
background-color: transparent;
padding: 0.5em 2em;
font-size: 0.8rem;
border: 1px solid var(--maincolor);
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.hero--page-talent--scroll {
opacity: 0.4;
transition: all 1.5s ease;
}
.hero__content-page-talent {
position: absolute;
width: 85%;
left: 5%;
bottom: 5%;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: nowrap;
}
.hero__content-page-talent-social {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
}
.hero__content-page-talent-social h5 {
font-weight: 700;
}
.hero__content-page-talent-social p { font-size: max(18px,.75rem);
letter-spacing: 0.8px;
font-weight: 400;
line-height: 1.6;
color: var(--maincolor);
}
.single-talent main {
position: relative;
margin-top: 109vh;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 30px 30px 0px 0px;
}
.single-project-talent h2 {
font-size: 3.75rem;
text-transform: uppercase;
}
.single-project-talent h5 {
font-size: 3rem;
}
.single-project-talent p {
font-size: 1rem;
}
.single-project-talent h4 {
font-size: 1.2rem;
font-weight: 400;
}
.js-scroll-step .portfolio-sticky {
padding-left: 0;
padding-bottom: 14vh;
}
.js-scroll-step .portfolio-scroll {
margin-top: -32.5vh;
}
.js-scroll-step .portfolio-scroll .portfolio-scroll-project {
height: 25vw;
}
.single-project-talent h6 {
text-transform: none;
font-size: 1.8rem;
}
.js-scroll-step .portfolio-scroll-project {
position: relative;
right: 0%;
width: 55%;
}
.js-scroll-step .flex-project-title {
position: absolute;
}
.flex-talent {
display: flex;
margin-bottom: 5vh;
}
.flex-talent-column {
display: flex;
flex-direction: column;
margin-bottom: 5vh;
}
.flex-talent-video-image {
display: flex;
justify-content: center;
gap: 20px;
}
@media screen and (min-width: 992px) {
.flex-talent-column .second-column {
padding-left: calc(0vw);
}
.flex-talent-column {
min-width: calc(30vw);
padding-right: calc(1vw);
position: relative;
}
.column-three {
min-width: calc(30%);
position: relative;
}
.second-column {
padding-left: calc(1vw);
}
}
@media screen and (max-width: 991px) {
.portfolio-menu ul {
width: 95%;
margin: 0 auto;
}
.hero__content-page-portfolio h1 {
font-size: 4rem !important;
}
.hero__content-page-portfolio {
bottom: 10%;
}
.portfolio-item .item {
width: 47%;
height: 75vw;
margin-bottom: 5%;
}
.py-4 {
z-index: 10;
padding: 0.8rem 0.9rem !important;
}
.inline-flex {
flex-direction: column;
align-items: flex-start;
}
.py-4 ul {
margin-left: 0rem;
}
.py-4 ul li i {
font-size: 18px;
}
.py-4 ul li svg {
font-size: 18px;
}
.py-4 h3 {
font-size: 1.1rem;
margin-bottom: 0;
}
.py-4 span {
font-size: 0.8rem;
}
.contact-project h3 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.contact-project {
width: 80%;
margin: 0 auto;
}
.portfolio-menu ul li {
margin: 8px 10px;
}
.button-cta-portfolio {
font-size: 0.7rem;
}
.button-cta-portfolio:hover {
font-size: 0.7rem !important;
}
.active.button-cta-portfolio {
font-size: 0.7rem !important;
}
.button-cta-glass {
font-size: 0.6rem !important;
}
.accordion-content .button-cta-page {
font-size: 0.8rem !important;
}
.title-portfolio-project-single h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0;
}
.page-template-servizio .hero__content-page-portfolio {
position: relative;
width: 90% !important;
min-width: 90% !important;
bottom: 10% !important;
left: 0;
margin: 40vh auto 5vh !important;
}
.page-template-servizio .hero__content-page-portfolio h2 {
font-size: 1.2rem !important;
}
.hero__content-page-portfolio h1 {
font-size: 2.5rem !important;
}
.page-template-servizio .hero--page-portfolio {
flex-direction: column-reverse;
height: auto !important;
}
.page-template-servizio .float {
height: 25vh !important;
}
.spazio {
top: -30vh !important;
position: relative;
}
.page-template-servizio .comet-circle {
width: 75% !important;
height: 25vh !important;
top: 10vh !important;
}
.page-template-servizio .comet-planet {
width: 20.8vw !important;
height: 5.8vw !important;
top: -2vh;
left: 10vw;
}
.page-template-servizio .comet-circle .comet-orbit .comet-planet svg {
width: 5.2vw !important;
}
}
.flex-talent-single {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 5vh;
}
.flex-talent-single {
background-color: var(--thirdcolor);
border-radius: 20px;
padding: 1rem;
}
.flex-talent-single:last-child {
margin-bottom: 0vh;
}
.flex-talent-single img {
border-radius: 10px;
width: auto;
height: 8vw;
}
.flex-talent-single-name h4 {
font-weight: 700;
color: var(--secondcolor);
}
.flex-talent-single-name span {
font-size: 0.8rem;
color: var(--secondcolor);
}
.video-wrap {
width: 100%;
height: 35vw;
}
.video-wrap video {
border-radius: 20px;
}
.js-scroll-step .inline-flex {
margin-top: 5vh;
}
.js-scroll-step .sm-links {
display: inline-flex;
}
.js-scroll-step .sm-links li {
margin-right: 1.75rem;
}
.js-scroll-step .sm-links li i {
font-size: 35px;
}
.js-scroll-step .sm-links li svg {
font-size: 35px;
}
.js-scroll-step .button-cta-page {
color: var(--maincolor);
} .page-template-servizio .hero__content-page-portfolio h1 {
position: relative;
line-height: 1em;
color: var(--orange);
font-size: 4rem;
font-weight: 700;
}
.page-template-servizio .hero__content-page-portfolio h2 {
font-size: 1.5rem;
margin-bottom: 0;
color: var(--light-dark);
font-weight: 700;
}
.page-template-servizio .hero__content-page-portfolio p {
padding-right: 10vw;
margin-bottom: 20px;
}
.page-template-servizio .hero--page-portfolio {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-template-servizio .hero__content-page-portfolio {
position: relative;
width: 100%;
bottom: 0;
}
.page-template-servizio .spazio {
width: 80%;
}
.page-template-servizio .pianeta-1, .page-template-servizio .pianeta-2, .page-template-servizio .pianeta-3, .page-template-servizio .pianeta-4, .page-template-servizio .pianeta-5, .page-template-servizio .pianeta-6, .page-template-servizio .pianeta-7 {
display: flex;
justify-content: center;
align-items: baseline;
width: 100%;
height: 100%;
}
.page-template-servizio .float {
animation: hover 1.3s ease-in-out infinite alternate;
width: auto;
height: 55vh;
}
.page-template-servizio .comet-circle {
width: 75%;
height: 25vh;
top: -35vh;
}
.page-template-servizio .comet-planet {
width: 6.8vw;
height: 2.8vw;
top: -2vh;
left: 10vw;
}
.page-template-servizio .comet-circle .comet-orbit .comet-planet svg {
width: 3.2vw;
height: auto;
transform: rotate3d(0, 4, 0, 45deg) perspective(900px);
transition: 0.3s ease;
} .hero--page-about {
height: 100vh;
color: white;
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: end;
z-index: 10;
background-color: black;
}
.hero--page-about img {
height: 100vh;
width: 100%;
position: absolute;
z-index: 9;
top: 0;
right: 0;
object-fit: cover; }
.overlay-about {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10; }
.hero__content-page-about h1 {
position: relative;
line-height: 1em;
color: var(--light-dark);
font-size: 4rem;
font-weight: 700;
}
.hero__content-page-about h2 {
font-size: 1.5rem;
margin-bottom: 0;
color: var(--orange);
font-weight: 700;
}
.hero__content-page-about p {
padding-right: 10vw;
margin-bottom: 20px;
}
.hero__content-page-about {
position: relative;
width: 80%;
bottom: 50px;
z-index: 2;
margin: 0 auto;
} img.mfp-img {
max-height: 80vh !important;
}
.mfp-with-zoom .mfp-title, .touch .gallery-image figcaption, html:not(.touch) .gallery-image figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: rgba(255, 255, 255, 0);
padding: 1em;
transition: all 0.2s ease;
font-weight: 600;
max-width: calc(100% - 9em);
line-height: 1.25;
text-align: center;
box-sizing: border-box;
}
.mfp-with-zoom .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image figcaption:before, .mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
content: "";
position: absolute;
background: var(--maincolor);
width: 100%;
height: 100%;
padding: 1em;
transition: all 0.3s ease-in-out;
opacity: 0;
z-index: -1;
}
.mfp-with-zoom .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image figcaption:before, .mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
right: 100%;
bottom: 100%;
}
.mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
left: 100%;
top: 100%;
}
.mfp-with-zoom.mfp-ready .mfp-title, .touch .gallery-image figcaption, html:not(.touch) .gallery-image:hover figcaption {
color: white;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease 0.3s;
}
.mfp-with-zoom.mfp-ready .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image:hover figcaption:before, .mfp-with-zoom.mfp-ready .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image:hover figcaption:after {
opacity: 1;
}
.mfp-with-zoom.mfp-ready .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image:hover figcaption:before {
right: -1.5em;
bottom: -0.5em;
}
.mfp-with-zoom.mfp-ready .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image:hover figcaption:after {
left: -1.5em;
top: -0.5em;
}
.touch .gallery-image figcaption {
top: auto;
bottom: 2em;
}
.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-bg {
background-color: rgba(0, 0, 0, 0.9);
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 1;
}
.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
.mfp-with-zoom img.mfp-img {
padding: 0;
}
.mfp-with-zoom .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-with-zoom .mfp-container {
padding: 0;
}
.mfp-with-zoom .mfp-content {
overflow: hidden;
}
.mfp-with-zoom .mfp-bottom-bar {
top: auto;
bottom: 0;
margin-top: 0;
}
.mfp-with-zoom .mfp-title {
top: auto;
bottom: 2em;
}
.mfp-arrow {
opacity: 1;
margin-top: 0 !important;
width: 90%;
top: 80%;
height: 20%;
transform: translateY(-50%);
}
.mfp-arrow:before, .mfp-arrow:after {
margin: 0;
border: none;
width: 2rem;
height: 2rem;
transform: rotate(-45deg) translate(-50%, -100%);
opacity: 1;
top: 50%;
left: 50%;
transition: all 0.15s;
}
.mfp-arrow:active {
transform: translateY(-50%) scale(0.95);
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:before, .mfp-arrow-left:after {
border-top: 2px solid white;
border-left: 2px solid white;
}
.mfp-arrow-left:after {
margin-left: 2rem;
}
.mfp-arrow-left:hover:before, .mfp-arrow-left:active:before {
margin-left: 2rem;
}
.mfp-arrow-left:hover:after, .mfp-arrow-left:active:after {
margin-left: 0;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:before, .mfp-arrow-right:after {
border-right: 2px solid white;
border-bottom: 2px solid white;
}
.mfp-arrow-right:after {
margin-left: 2rem;
}
.mfp-arrow-right:hover:before {
margin-left: 2rem;
}
.mfp-arrow-right:hover:after {
margin-left: 0;
}
button.mfp-close {
opacity: 1;
margin-top: 0 !important;
width: 20% !important;
height: 0;
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
button.mfp-close:before, button.mfp-close:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: 0;
border: none;
width: 1rem;
height: 1rem;
opacity: 1;
transition: all 0.15s;
transform-origin: 0 0;
border-top: 2px solid white;
border-left: 2px solid white;
}
button.mfp-close:before {
transform: rotate(-45deg);
}
button.mfp-close:after {
transform: rotate(135deg);
}
button.mfp-close:hover:before {
transform: rotate(135deg);
}
button.mfp-close:hover:after {
transform: rotate(315deg);
}
button.mfp-close:active {
transform: scale(0.95);
} label {
display: inline-block;
margin-bottom: 1.5rem;
}
.wpcf7 input[type="text"] {
outline: none;
border-bottom: 1px solid var(--orange);
border-left: 0px;
border-right: 0px;
border-top: 0px;
height: 50px;
font-size: 16px;
padding: 20px;
border-radius: 2px;
background-color: #101010;
color: var(--maincolor);
text-align: left;
}
.wpcf7 input[type="email"] {
outline: none;
border-bottom: 1px solid var(--orange);
border-left: 0px;
border-right: 0px;
border-top: 0px;
height: 50px;
font-size: 16px;
padding: 20px;
border-radius: 2px;
background-color: #101010;
color: var(--maincolor);
text-align: left;
}
.wpcf7 input[type="submit"] {
background-color: transparent;
padding: 0.5em 2em;
font-size: 1.2rem;
border: 1px solid #f0231061;
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
}
.wpcf7 input[type=checkbox] {
margin-top: 0px;
}
.wpcf7 textarea {
outline: none;
border-bottom: 1px solid var(--orange);
border-left: 0px;
border-right: 0px;
border-top: 0px;
height: 150px;
font-size: 16px;
padding: 20px;
border-radius: 2px;
background-color: #101010;
color: var(--maincolor);
text-align: left;
}
.wpcf7 input[type="tel"] {
outline: none;
border-bottom: 1px solid var(--orange);
border-left: 0px;
border-right: 0px;
border-top: 0px;
height: 50px;
font-size: 16px;
padding: 20px;
border-radius: 2px;
background-color: #101010;
color: var(--maincolor);
text-align: left;
}
.wpcf7-list-item-label {
font-size: 14px;
}
.wpcf7::placeholder { color: var(--maincolor) !important;
opacity: 1;
}
::-webkit-input-placeholder { color: var(--maincolor) !important;
opacity: 1;
}
:-moz-placeholder { color: var(--maincolor) !important;
opacity: 1;
}
::-moz-placeholder { color: var(--maincolor) !important;
opacity: 1;
}
:-ms-input-placeholder { color: var(--maincolor) !important;
opacity: 1;
}
.flex-contact {
display: flex;
}
@media screen and (min-width: 992px) {
.flex-contact .second-column {
padding-left: calc(2%);
}
.flex-contact .first-column {
min-width: calc(45%);
padding-right: calc(1%);
position: relative;
}
}
.flex-contact .company-info {
margin-top: 50px;
}
.flex-contact .company-info .sm-links {
margin-top: 0px;
}
.button-margin {
margin-top: 55px;
}
.company-info-contact {
margin-top: 50px;
}
.company-info-contact .info-email {
display: inline-block;
color: #fff;
font-size: 16px;
margin-bottom: 10px;
text-decoration: revert;
text-decoration-color: var(--orange);
}
.company-info-contact .company-info .sm-links {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all ease 0.7s 1.6s;
-o-transition: all ease 0.7s 1.6s;
transition: all ease 0.7s 1.6s;
}
.company-info-contact .sm-links {
margin-top: 0px;
}
.company-info-contact .sm-links li {
display: inline-block;
margin-right: 22px;
}
.company-info-contact .sm-links li a {
color: rgba(255,255,255,.69);
font-size: 20px;
}
footer {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding: 10vh 0 0 0;
background-color: #101010;
border-top: 1px solid var(--light-dark);
}
.footer-1 {
padding-left: 10%;
}
.dati_contatto {
display: flex;
flex-direction: column;
}
.footer-social a {
border-bottom: 1px solid var(--orange);
font-size: 1.2rem;
font-weight: 300;
margin-bottom: 10px;
}
.dati_di_contatto_footer {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: center;
position: relative;
width: 40%;
gap: 2vw;
}
.dati_di_contatto_footer img {
width: auto;
height: 120px;
margin-bottom: 5vh;
margin-left: -17px;
}
@media (max-width: 991px){
.dati_di_contatto_footer img {
height: 80px;
margin-left: -11px;
}
}
.footer_col_1 {
width: 100%;
}
.footer_col_2 {
display: flex;
flex-direction: column;
width: 58%;
}
.footer_col_2 h5 {
color: var(--orange);
margin-bottom: 15px;
}
.footer_col_2 h6 {
margin-bottom: 5px;
} .footer-social {
width: 100%;
margin-top: 5vh;
}
.footer-social .sm-links {
display: flex;
justify-content: flex-start;
gap: 2vw;
}
.footer-social .sm-links li {
font-size: 1.5rem;
}
.copyright {
font-size: 0.8rem;
position: relative;
left: 5%;
margin-top: 5%;
}
.copyright a {
border-bottom: 1px solid var(--orange);
}
.map-google {
filter: invert(1);
}
.footer_col_2-dati {
display: flex;
justify-content: space-between;
margin-bottom: 5vh;
}
.map-footer {
position: relative;
pointer-events: none;
}
.map-footer iframe {
pointer-events: none;
} .search,
.cerca_lente {}
.search .search-field {
background-color: transparent;
border: none;
border-radius: 0;
border-bottom: 2px solid var(--maincolor);
color: var(--maincolor) !important;
font-size: 21px;
padding: 0;
margin: 0;
}
.search input placeholder {
color: var(--maincolor) !important;
font-size: 21px;
}
.search_row {
display: flex;
justify-content: flex-end;
}
.cerca_lente {
height: 100%;
width: 30px;
padding-bottom: 30px;
border: none;
border-bottom: 2px solid var(--maincolor);
display: flex;
flex-direction: column;
margin-top: auto;
}
.footer-menu{
display:block;
}
.footer-menu li{
margin:3px 0;
display:block;
}
.footer-menu li a{
font-size:18px;
font-weight:400;
}
@media screen and (max-width:990px) {
.socials--hero {
position: absolute;
display: flex;
justify-content: flex-start !important;
bottom: 15px;
left: 10%;
}
.socials--hero .socials__item img {
height: 30px;
width: auto;
}
.socials--hero .socials__item {
border-right: 2px solid var(--maincolor);
padding-right: 10px;
margin-right: 10px;
border-bottom: none;
}
.socials--hero .socials__item:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
.footer_col_1,
.footer_col_2 {
display: block;
width: 100%;
}
.dati_di_contatto_footer {
display: block;
width: 100%;
}
.total-footer {
flex-direction: column;
gap: 50px;
}
.footer-social {
width: 100%;
}
.socials--footer {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.dati_contatto p {
font-size: 18px;
}
.privacy p {
font-size: 18px;
}
.socials--footer .socials__item img {
height: 30px;
width: auto;
}
.footer-social .sm-links {
display: flex;
justify-content: flex-start;
gap: 30px;
}
.footer_logo img {
height: 50px;
width: auto;
margin-bottom: 10px;
}
.search_row {
display: flex;
justify-content: flex-start;
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}
.paragrafo h1 {
font-size: 10vh;
}
.title-move {
right: -250vw;
top: 4vh;
position: absolute;
z-index: 3;
}
.title-portfolio-project h5 {
font-size: 1.3rem !important;
}
.flex-project-title {
display: flex;
flex-wrap: wrap !important;
flex-direction: column !important;
position: relative;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0px !important;
bottom: -50px;
}
}
.total-footer {
padding: 6% 5% 2% 5%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.dots {
display: none;
}
@media screen and (max-width:990px) {
.footer_col_2 {
margin-top: 30px;
}
.dati_contatto p {
font-size: 15px;
}
.socials--footer {
justify-content: center;
}
.loghi-footer-col img {
width: auto;
height: 35px;
}
.loghi-footer {
padding: 0 0;
margin-bottom: 60px;
}
.socials--footer {
margin-top: 0px;
margin-bottom: 50px;
}
}
@media screen and (max-width: 991px) {
body {
overflow: hidden !important;
}
header {
max-width: calc(100% - 20px);
height: 70px;
}
header .menu-burger .burger-text {
position: relative;
color: #fff;
height: 16px;
width: 50px;
font-size: max(12px,.75rem);
}
.contact a {
font-size: max(13px,.75rem);
}
header .logo-container #logo img {
height: 75px;
}
header .logo-container {
font-size: 28px;
font-weight: 800;
pointer-events: all;
width: 33.33%;
display: flex;
justify-content: center;
align-items: center;
}
.contact {
width: 33.33%;
display: flex;
justify-content: center;
}
#menu-overlay .content-wrapper {
flex-direction: column;
}
.primary-nav {
height: auto;
width: 100%;
}
#menu-overlay .primary-nav li a {
font-size: 40px;
}
#menu-overlay .company-info {
z-index: 22;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
h2 {
font-size: 3.75rem;
}
#scSlideWrapper {
display: flex;
flex-direction: row;
display: flex;
grid-column-gap: 15px;
justify-content: space-between;
align-items: stretch;
overflow: scroll;
width: 112%;
}
#scSlideWrapper .portfolio-project {
flex: none;
display: block;
width: 70vw;
justify-content: center;
align-items: baseline;
overflow: hidden;
transition: all 0.8s ease;
}
#scSlideWrapper .portfolio-project:hover {
flex: none !important;
}
.portfolio-project {
height: 85vw;
color: var(--maincolor);
position: relative;
margin-right: 0px;
}
.sc-slide-section {
margin-top: 0vw;
}
.btn-site {
font-size: max(20px,.75rem);
}
#scSlideWrapper .portfolio-project .button-cta {
opacity: 1;
}
.hero__content-single-project {
z-index: 2;
margin-top: 2vh;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
text-align: center;
}
#scSlideWrapper .portfolio-project .title-portfolio-project h5 {
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
color: var(--maincolor);
opacity: 1;
transition: all 1.1s ease;
}
.flex-50 {
width: 100%;
position: relative;
}
.flex-65 {
width: 100%;
position: relative;
}
.about .orange {
mix-blend-mode: unset !important;
text-transform: uppercase;
font-size: max(22px,.75rem);
}
.about p {
font-size: max(22px,.75rem);
}
.marquee-items {
height: 100px !important;
}
.marquee-item {
display: flex;
align-items: center;
}
.header-text-service {
font-size: 16vw !important;
}
.header-text-wrapper {
padding-bottom: 0 !important;
}
.map-studio svg {
height: 400px !important;
margin-bottom: 15vh;
}
.port h4 {
font-size: 1.8rem !important;
}
.card img {
width: 100% !important;
height: auto !important;
}
.closex {
width: 20px !important;
height: 20px !important;
right: 10px !important;
}
.port .description {
float: left;
width: 90% !important;
max-height: 100%;
padding: 0px 30px 0px !important;
overflow: auto;
}
.port p {
font-size: max(12px,.75rem) !important;
font-weight: 300;
}
.card img {
min-height: 17vh !important;
}
.portfolio-scroll-project-mobile {
display: flex;
gap: 10px;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
margin-top: 50px;
position: relative;
z-index: 9;
}
.link-portfolio-scroll-project-mobile {
position: relative;
height: 50vw;
width: 100%;
}
.link-portfolio-scroll-project-mobile a {
height: 100%;
position: absolute;
width: 100%;
}
.flex-project-title-mobile {
margin-top: 20px;
}
.title-portfolio-project-mobile a h5 {
font-weight: 700;
font-size: 1.5rem;
}
.hero__content-single-project-mobile {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.hero__content-single-project-mobile .button-cta {
font-size: 0.65rem;
}
.portfolio-scroll-project-mobile:last-child {
display: flex;
justify-content: center;
}
.portfolio-scroll-project-mobile video {
border-radius: 20px;
}
.container-80 {
width: 90%;
}
.flex-contact {
display: flex;
flex-wrap: wrap;
gap: 50px;
}
.wpcf7 input[type=checkbox] {
margin-top: 0px;
width: 1.1rem;
height: 1.1rem;
flex: 0 0 2.1rem;
}
button, input, optgroup, select, textarea {
width: 100%;
}
.similar-project h3 {
font-size: 1.5rem;
}
.hero__content-talent h1 {
line-height: 0.9em;
font-size: 4rem;
margin-bottom: 0.5em;
}
.flex-project {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
.js-scroll-step {
padding: 5vh 0;
z-index: 0;
}
.single-project p {
font-size: max(16px,.75rem);
}
.single-project h2 {
font-weight: 700;
font-size: 3.75rem;
}
.single-project-talent h2 {
font-size: 3.75rem;
text-transform: uppercase;
}
.js-scroll-step .sm-links li i {
font-size: 25px;
}
.js-scroll-step .sm-links li svg {
font-size: 25px;
}
.project-image img {
height: 75vw;
}
.flex-project-video-image {
display: flex;
flex-direction: row;
display: flex;
grid-column-gap: 15px;
justify-content: space-between;
align-items: stretch;
overflow: scroll;
width: 112%;
}
.column-three {
flex: none;
display: block;
width: 70vw;
height: 100vw;
justify-content: center;
align-items: baseline;
overflow: hidden;
position: relative;
}
.column-three:last-child {
margin-right: 10vw;
}
.contatori {
flex-wrap: wrap !important;
}
.dati {
padding: 0.5em 0em 0.5em;
}
.dati span {
font-size: 3rem;
}
.K:after {
font-size: 3rem;
}
.plus:before {
font-size: 2rem;
}
.contatore {
width: 50%;
}
.M:after {
font-size: 3rem;
}
.first-column {
width: 100%;
}
.second-column {
width: 100%;
}
.talent-inproject {
gap: 0vw;
}
.talent-inproject-column {
width: 49%;
}
.talent-inproject a img {
width: 100%;
height: 50vw;
object-fit: cover;
border-radius: 20px;
}
.talent-inproject-name h3 {
font-size: 0.7em;
}
.Quick-navigation {
display: none;
}
.Scroll-progress-indicator {
display: block !important;
}
.single-project {
margin-top: 115vh;
}
.Scroll-progress-indicator {
will-change: opacity, transform;
transition: all 0.5s;
right: 10px;
border-radius: 2px;
position: fixed;
bottom: 10px;
opacity: 0;
padding: 0.5em 2em;
border-radius: 30px;
background-color: transparent;
color: var(--maincolor);
border: 1px solid var(--maincolor);
font-size: 0.8rem;
z-index: 9;
}
.Scroll-progress-indicator.visible {
transform: translateX(0) translateY(0%);
opacity: 1;
}
.flex-talent {
display: flex;
margin-bottom: 0vh;
flex-wrap: wrap;
}
.single-project-talent p {
font-size: max(16px,.75rem);
}
.js-scroll-step .portfolio-sticky {
padding-left: 0;
padding-bottom: 0vh;
}
.talent-template-default .portfolio-scroll-project-mobile:last-child {
display: flex;
justify-content: flex-start;
}
.single-talent main {
position: relative;
margin-top: 100vh;
background-color: rgb(9 9 9 / 50%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 30px 30px 0px 0px;
}
.hero__content-talent {
bottom: 15%;
}
.hero--page-about {
height: 35vh;
}
.hero--page-about img {
height: 100%;
}
.timeline .timeline-wrapper .timeline-item .timeline-left .timeline-date-icon img, .timeline .timeline-wrapper .timeline-item .timeline-right .timeline-date-icon img {
width: 110px !important;
}
.timeline .timeline-wrapper .timeline-item {
display: flex !important;
flex-wrap: wrap;
max-width: 100% !important;
padding-block: 50px !important;
}
.timeline .timeline-wrapper .timeline-item .timeline-center {
display: none !important;
}
.reverse {
flex-direction: column-reverse;
}
.timeline-text h3 {
font-size: 1.5rem !important;
}
.timeline .timeline-wrapper .timeline-item .timeline-right .timeline-text p, .timeline .timeline-wrapper .timeline-item .timeline-left .timeline-text p {
font: 400 max(16px,.75rem)/1.50 Montserrat !important;
}
h6 {
font-size: 0.9rem;
}
.wpcf7-list-item-label {
font-size: 0.8em;
}
.footer-social a {
font-size: 0.9rem;
}
.footer-social .sm-links li a i {
font-size: 1.2rem;
}
.footer_col_2-dati {
flex-wrap: wrap;
}
.footer_col_2-dati div:first-child {
width: 100%;
margin-bottom: 30px;
}
.footer_col_2-dati h6 {
font-size: 0.8rem !important;
}
.footer_col_2-dati div {
width: 50%;
}
.total-footer {
padding: 0vh 5% 10vh 5% !important;
}
.company-info .sm-links {
margin-top: 0;
}
.company-info .info-address {
width: 100%;
margin-top: 0px;
}
}
.Scroll-progress-indicator {
display: none;
}
@media screen and (max-width:600px) {
}
@media screen and (max-width:900px) {
.ball {
display: none !important;
}
.hero {
padding: 0 0;
min-height: 50vh;
height: 50vh;
}
.hero--page-portfolio {
height: 90vh;
}
.hero-testo {
flex-direction: column;
top: 90%;
}
.testo h2 {
font-size: 2rem;
}
.testo {
width: 60%;
text-align: right;
padding: 15px;
border-right: 0;
}
.paragrafo h3 {
font-size: 30px;
font-weight: 800;
}
.flex-normale {
flex-direction: column;
}
.flex-normal-col-1 {
width: 100%;
margin-bottom: 30px;
}
.flex-normal-col-2 {
width: 125%;
}
.flex-normal-col-2 img {
height: 100%;
width: auto;
}
.pulsante-normale a {
padding: 15px 20px;
}
.pulsante-normale {
margin-bottom: 50px;
}
.flex-alternato {
flex-direction: column;
}
.flex-alternato-col-1 {
width: 100%;
}
.flex-alternato-col-2 {
width: 100%;
}
.flex-alternato-col-1 img {
margin-bottom: 30px;
}
.flex-alternato-2 {
flex-direction: column-reverse;
}
.flex-alternato-2-col-1 {
width: 100%;
}
.flex-alternato-2-col-2 {
width: 100%;
}
.flex-alternato-2-col-2 img {
margin-bottom: 30px;
}
.hero-testo-page {
flex-direction: column;
top: 80%;
}
.testo-page {
width: 65%;
border-right: 0px;
border-bottom: 4px solid #fff;
}
.titolo-page {
width: 65%;
}
.titolo-page h1 {
font-size: 2rem;
}
.flex-column-product a {
width: 100%;
}
.mfp-img  {
max-height: 500px !important;
}
.mfp-bg {
background: var(--secondcolor);
}
.footer-1 {
padding-left: 10%;
padding-right: 10%;
}
.total-footer {
padding: 5vh 5% 10vh 5%;
}
} .reveal {
position: relative;
transform: translateY(40px);
opacity: 0;
transition: 1s all ease;
}
.reveal.active {
transform: translateY(0);
opacity: 1;
}
.linepage {
width: 0%;
margin: 0 auto;
position: relative;
top: 0em;
transition: 1s all ease;
}
.linepage.active {
width: 100%;
height: 2px;
background: #444545;
margin: 0 auto;
transition: 1s all ease;
top: 0em;
}
.opacity p {
color: var(--secondcolor);
transition: 2s all ease;
}
.opacity.active p {
color: var(--maincolor);
}
.opacity h2 {
color: var(--secondcolor);
transition: 2s all ease;
}
.opacity.active h2 {
color: var(--maincolor);
}
.opacity {
color: var(--secondcolor);
transition: 2s all ease;
}
.opacity.active {
color: var(--maincolor);
}
.invert-color {
position: fixed;
bottom: 0;
right: 0;
height: 10%;
max-width: 100%;
width: 100%;
backdrop-filter: blur(2px);
z-index: 0;
margin: 0;
}
.spacer {
padding-top: 15vh;
}
.work.spacer {
padding-top: 35vh;
} .client h2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 3.75rem;
font-weight: 700;
color: var(--maincolor);
margin-bottom: 0;
position: relative;
height: 150px;
} :root {
--size: clamp(5rem, 1rem + 15vmin, 15rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}
* {
box-sizing: border-box;
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
margin: 20px 0;
}
.marquee--reverse {
background-color: black;
padding: 50px;
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}
.marquee--vertical {
--mask-direction: to bottom;
}
.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}
.marquee--vertical .marquee__group {
animation-name: scroll-y;
}
.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}
@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}
@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
} .marquee img {
display: grid;
place-items: center;
width: auto;
aspect-ratio: 16/9;
filter: grayscale(1);
height: 70px;
margin: 0 20px;
transition: all 0.3s ease;
}
.marquee img:hover {
filter: grayscale(0);
transition: all 0.3s ease;
}
.marquee--vertical img {
aspect-ratio: 1;
width: calc(var(--size) / 1.5);
padding: calc(var(--size) / 6);
} .marquee-logo {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
background-color: #0c0b0c;
padding: 40px 0;
}
@keyframes fade {
to {
opacity: 0;
visibility: hidden;
}
} .marquee-carousel:before {
content: "";
display: block;
width: 100%;
height: 100%; 
position: absolute;
z-index: 1;
top: 0px;
background: #090909;
}
.marquee-carousel:nth-child(1):before {
background: #101010;   
}
.marquee-carousel:nth-child(3):before {
background: #101010;   
}
.marquee-content {
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
align-items: center;
padding: 33vh 0;
text-align: center;
}
.marquee-carousel.marquee-carousel-1 {
margin-right: -300px;
margin-bottom: 0px;
}
@media (min-width: 992px) {
.marquee-carousel.marquee-carousel-1 {
margin-bottom: 0px;
}
}
@media (min-width: 1600px) {
.marquee-carousel.marquee-carousel-1 {
margin-bottom: 0px;
}
}
.marquee-carousel.marquee-carousel-2 {
margin-left: -300px;
}
.marquee-items {
-webkit-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
-moz-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
-o-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
display: -webkit-box;
position: relative;
width: 100%;
height: 150px;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (min-width: 992px) {
.marquee-items {
height: 150px;
}
}
@media (min-width: 1600px) {
.marquee-items {
height: 150px;
}
}
.marquee-item {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
flex-shrink: 0;
overflow: hidden;
width: 150px;
height: 100%;
margin-right: 11px;
}
@media (min-width: 992px) {
.marquee-item {
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
width: 250px;
margin-right: 16px;
display: flex;
justify-content: center;
align-items: center;
}
}
@media (min-width: 1600px) {
.marquee-item {
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
width: 300px;
margin-right: 23px;
border-radius: 34px;
}
}
.marquee-item img {
width: auto;
height: 70px;
filter: grayscale(1);
transition: all 0.3s ease;
}
.marquee-item img:hover {
width: auto;
height: 70px;
filter: grayscale(0);
transition: all 0.3s ease;
cursor: grabbing;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.ball {
width: 20px;
height: 20px;
position: fixed;
top: 0;
left: 0;
background-color: var(--maincolor);
mix-blend-mode: difference;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.ball-active {
width: 40px;
height: 40px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.ball-portfolio-active {
width: 100px;
height: 100px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.ball-portfolio-active:after {
position: absolute;
content: 'Apri il Progetto';
font-size: max(15px,.75rem);
display: block;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9;
mix-blend-mode: difference;
}
.ball-home-active {
width: 70px;
height: 70px;
transition: width 0.3s ease, height 0.3s ease; }
.ball-home-active:after {
position: absolute;
content: url(https://dive.it/wp-content/themes/dive/img/svg/mute.svg); width: 98%;
height: 98%;
border-radius: 100%;
padding: 16px;
display: block;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9;
mix-blend-mode: difference;
background-color: white;
border: 1px solid white;
}
.ball-home-active.on::after {
content: url(https://dive.it/wp-content/themes/dive/img/svg/on.svg);
}
.home-ball.volume-icon {
width: 100%;
height: 100%;
bottom: 0 !important;
left: 0 !important;
cursor: pointer;
}
.home-ball.volume-icon img {
background-color: transparent;
}
.ball-talent-active {
width: 100px;
height: 100px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.ball-talent-active:after {
position: absolute;
content: 'Scopri il Talent';
font-size: max(15px,.75rem);
display: block;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9;
mix-blend-mode: difference;
}
.ball-accordion-active {
width: 35px;
height: 35px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.curosor-link-active {
width: 40px;
height: 40px;
background-color: transparent;
border: 2px solid var(--orange);
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.portfolio-ball-similar-active {
width: 100px;
height: 100px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.portfolio-ball-similar-active:after {
position: absolute;
content: 'Torna';
font-size: max(15px,.75rem);
display: block;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9;
mix-blend-mode: difference;
}
.ball-accordion-active:before {
mix-blend-mode: difference;
}
.ball-accordion-disactive {
width: 35px;
height: 35px;
transition: width 0.3s ease;
transition: height 0.3s ease;
}
.ball-accordion-disactive:before {
}
.desc-wrapper {
max-height: 120px;
overflow: hidden;
}
.more-info { display: none;
cursor: pointer;
} .more-info .less,
.more-info.expand .more {
display: none;
cursor: pointer;
}
.more-info.expand .less {
display: inline;
cursor: pointer;
} .greybox {
width: 100%;
margin: 0 auto;
border-radius: 0;
transition: all 0.5s ease;
background: transparent;
z-index: 1;
padding: 2em 1em;
}
.greybox.active  {
transition: all 0.5s ease;
border-radius: 20px;
background: var(--orange);
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 0;
color: var(--maincolor);
font-size: 1.50rem;
font-weight: 400;
border: none;
background: none;
outline: none;
transition: all 0.5s linear;
border-radius: 20px;
}
.accordion button:hover {
cursor: pointer;
opacity: 1;
transition: all 0.5s linear;
-webkit-transition: all 0.5s ease;
}
.accordion button .accordion-title {
padding: 0.5em 0.5em 0.5em 0.5em;
font-family: 'Benrock';
font-weight: 600;
text-transform: uppercase;
color: var(--maincolor);
font-size: 1.2rem;
opacity: 0.3;
margin-bottom: 0;
padding: 0.5em 1.5em 0.5em 1.5em;
letter-spacing:2px;
}
.accordion button .accordion-title:after {
position: absolute;
content: '';
border: solid var(--maincolor);
border-width: 0 2px 2px 0;
display: block;
padding: 5px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: block;
text-align: center;
right: 1.5em;
top: 0.6em;
z-index: 9;
mix-blend-mode: difference;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.accordion button[aria-expanded=true] .accordion-title:after {
rotate: 90deg;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.accordion button .accordion-title:hover {
cursor: pointer;
opacity: 1;
transition: all 0.5s linear;
-webkit-transition: all 0.5s ease;
}
.accordion-item button .accordion-title h3 {
font-size: 1.35rem;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: "";
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: "";
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded=true] {
opacity: 1;
color: var(--orange);
transition: all 0.5s linear;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
margin-top: 10px;
}
.accordion button[aria-expanded=true] .accordion-title {
color: var(--orange);
opacity: 1;
}
.accordion button[aria-expanded=true] .icon::after {
width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
opacity: 1;
max-height: 15rem;
height: auto;
will-change: opacity, max-height;
margin-bottom: 0.5em;
border-radius: 20px;
padding: 0.5em 1.5em 0.5em 1.5em;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
will-change: opacity, max-height;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.accordion .accordion-content p {
background-size: 200% auto;
font: 400 1rem/1.50 Montserrat;
opacity: 0;
text-align: left;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
margin: 0 0 1em 0;
padding: 0rem 0rem 1rem 0rem;
}
.accordion button[aria-expanded=true] + .accordion-content p {
position: relative;
bottom: 0;
opacity: 1;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
animation: move 2.5s ease;
background-image: linear-gradient(to left, #000, #000, #000, #ffffff, #ffffff,#ffffff, #ffffff, #ffffff, #ffffff);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.accordion .accordion-content a {
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 1em 0;
opacity: 0;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.accordion button[aria-expanded=true] + .accordion-content a {
opacity: 1;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
}
@keyframes move { from { background-position: 200% center; } } .list-titoli {
display: flex;
align-items: flex-start;
align-content: center;
justify-content: space-between;
flex-wrap: nowrap;
}
.servizi {
width: 100%;
}
.accordion {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 2%;
}
.accordion-item {
width: 49%;
margin-bottom: 50px;
background-color: #d9d9d91a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 20px;
}
.servizi h2 {
margin-bottom: 30px;
position: relative;
width: fit-content;
width: max-content;
line-height: 1.2em;
color: var(--light-dark);
}
.non-mostrare.spazio {
width: 60%;
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(10000px);
}
.spazio {
width: 60%;
height: 100%;
transition: all 0.5s ease;
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 0.2s linear 0.3s;
animation: Zoomin 0.2s linear 0.3s;
transition-delay: 3.5s;
}
.pianeti {
position: relative;
padding: 2%;
}
.pianeti svg {
height: 100%;
width: 100%;
padding: 1em;
z-index: 2;
}
.pianeti img {
height: 300px;
width: auto;
padding: 1em;
z-index: 1;
position: relative;
top: -2.5vh;
}
.pianeta-1 img {
top: 0vh;
position: relative;
}
.pianeta-1, .pianeta-2, .pianeta-3, .pianeta-4, .pianeta-5, .pianeta-6, .pianeta-7 {
position: absolute;
top: 0;
right: 0;
width: 75%;
height: 20vh;
scale: 0;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(10000px);
transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
}
.mostra.pianeta-1, .mostra.pianeta-2, .mostra.pianeta-3, .mostra.pianeta-4, .mostra.pianeta-5, .mostra.pianeta-6, .mostra.pianeta-7 {
scale: 1.6;
filter: brightness(1.5);
} .mostra.pianeta-1 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
@-webkit-keyframes Zoomin { 
0% { -webkit-transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(100000px); } 
100% { -webkit-transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);  } 
} 
@keyframes Zoomin { 
0% { 
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(100000px);
} 
100% { transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);} 
}
.show.pianeta-1 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
@-webkit-keyframes Zoomout { 
0% { -webkit-transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);  } 
90% { -webkit-transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px); opacity: 0; } 
} 
@keyframes Zoomout { 
0% { 
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
} 
100% { transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px); opacity: 0; } 
}
.mostra.pianeta-2 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-2 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.mostra.pianeta-3 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-3 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.mostra.pianeta-4 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-4 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.mostra.pianeta-5 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-5 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.mostra.pianeta-6 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-6 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.mostra.pianeta-7 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(0px);
-webkit-animation: Zoomin 1s linear 0.3s;
animation: Zoomin 1s linear 0.3s;
}
.show.pianeta-7 {
transform: translateY(15vh) translateX(0px) perspective(10000px) translateZ(-100000px);
-webkit-animation: Zoomout 1s linear, Zoomin 2s linear;
animation: Zoomout 1s linear, Zoomin 2s linear;
}
.float {
animation: hover 1.3s ease-in-out infinite alternate;
}
@keyframes hover {
from {
transform: translate3d(0,0,0);
}
to {
transform: translate3d(0,-6px,0);
}
}
@media (max-width: 991px) {
.list-titoli {
flex-wrap: wrap;
flex-direction: column;
}
.servizi {
width: 100%;
}
.accordion-item {
width: 100%;
}
.accordion button .accordion-title {
padding: 1em 1em 1em 1em;
font-size: 0.8rem;
}
.accordion button[aria-expanded=true] + .accordion-content {
padding: 0.5em 0.5em 0.5em 0.5em;
}
.accordion .accordion-content p {
font: 500 0.8rem/1.50 Montserrat !important;
margin: 0 !important;
}
.accordion button .accordion-title:after {
padding: 4px;
top: 1em;
}
h3 {
font-size: 0.8rem;
}
.pianeti {
height: 50vh;
}
.pianeta-1, .pianeta-2, .pianeta-3, .pianeta-4, .pianeta-5, .pianeta-6, .pianeta-7 {
height: 20vh;
width: 100%;
top: 0;
left: 0;
}
.mostra.pianeta-1 span, .mostra.pianeta-2 span, .mostra.pianeta-3 span, .mostra.pianeta-4 span, .mostra.pianeta-5 span, .mostra.pianeta-6 span, .mostra.pianeta-7 span {
font: 400 0.6rem/1 Space Grotesk;
}
.servizi h2 {
margin-bottom: 30px;
}
.comet-planet {
width: 20px;
height: 25px;
}
.comet-orbit .comet-planet svg {
width: 65px;
}
.comet-circle {
height: 20vh;
}
.dive-circle-wrap {
width: 400px!important;
height: 400px !important;
transform: translateX(-5vh) !important;
top: 20vh;
}
.dive-circle {
width: 100% !important;
height: 100% !important;
}
.dive-circle-wrap h4 {
font-size: 0.9rem;
}
.dive-planet {
width: 25px;
height: 25px;
}
.non-mostrare.dive-circle-wrap {
width: 100%;
opacity: 0;
z-index: -5;
transform: translateX(-80vh) !important;
}
.dive-orbit .dive-planet svg {
width: 55px !important;
}
.pianeti img {
height: 230px;
top: -1vh;
}
.portfolio-sticky {
width: 100% !important;
position: relative !important;
height: auto;
top: 0 !important;
padding-left: 5%;
gap: 0vh !important;
z-index: 2;
}
.title-sticky {
text-align: left;
color: var(--maincolor);
width: 100% !important;
font-size: 1.8rem !important;
}
.portfolio-container .load-more .load-more-button,
.button-cta-page {
font-size: 1rem !important;
}
.portfolio-scroll {
width: 100% !important;
gap: 20vh !important;
position: relative;
margin-top: 10vh !important;
}
.portfolio-scroll-project {
position: relative;
right: 5%;
width: 90% !important;
height: 50vw !important;
}
.btn-container h5 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 25px;
}
.area-line {
display: none;
}
.client h2 {
font-size: 1.8rem !important;
text-align: center;
padding: 1rem;
}
}
.dive-circle-wrap { 
width: 100%;
height: 400px;
position: absolute;
margin: 10px auto;
pointer-events: fill; 
cursor: pointer; 
-webkit-transform: perspective(900px);
transform: perspective(900px);
display: flex;
justify-content: center;
align-items: center;
transform: translateX(30vh);
}
.non-mostrare.dive-circle-wrap { 
width: 100%;
opacity: 0;
z-index: -1;
transition: 0.3s all ease;
transform: translateX(-80vh);
transition-delay: 3s;
}
.dive-circle-wrap h4 {
z-index: 2;
transition: all 0.3s ease-out;
color: var(--light-dark);
}
.non-mostrare.dive-circle-wrap h4 {
opacity: 0;
transition: all 0.5s ease-out;
transition-delay: 2.3s;
}
.dive-circle-wrap span {
color: var(--orange);
}
.dive-circle {
opacity: 1;
width: 400px;
height: 400px;
position: absolute;  
top:0;left:0;right:0;bottom:0;
margin: auto;
border-radius: 50%; 
transform: rotateY(45deg) rotateX(120deg);
transition: 3s all;
}  
.non-mostrare.dive-circle-wrap .dive-circle {
opacity: 0;
transform: rotateY(70deg) rotateX(320deg);
transition: all 3s forwards ease;
transition-delay: 0.8s;
}  
.dive-orbit { 
border: 1px solid var(--maincolor);
border-radius: 50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
position: absolute;  
top:0;left:0;right:0;bottom:0;
margin: auto;  
transition: 3s all;
transform: perspective(900px);
width: 100%; 
height: 100%; 
}
.dive-planet {
width: 30px;
height: 30px;
border-radius: 50%; 
position: absolute;
top:-15px;
left:0;right:0;
margin: 0 auto; 
font-weight: 100;
text-align: center; 
box-sizing:border-box;
-moz-box-sizing:border-box;
transition: 1s all;
}
.dive-planet svg {
display: block;
}
.dive-orbit .dive-planet svg {
width: 80px;
height: auto;
transform: rotate3d(0, 4, 0, 45deg) perspective(900px);
}
.dive-orbit .dive-planet svg:after {
content: 'ciao';
position: absolute;
top: 0;
left: 0;
}
.dive-orbit .dive-planet {
opacity: 1;
-webkit-animation: travelOrbit 10s infinite linear;
animation: travelOrbit 10s infinite linear;
-webkit-transform-origin: 50% 713%;
transform-origin: 50% 713%;
}
.non-mostrare.dive-circle-wrap .dive-orbit .dive-planet {
opacity: 0;
-webkit-animation: travelOrbit 10s infinite linear;
animation: travelOrbit 10s infinite linear;
-webkit-transform-origin: 50% 972%;
transform-origin: 50% 972%;
transition: all 2s forwards ease;
transition-delay: 0.2s;
}
@-webkit-keyframes travelOrbit { 
0% { -webkit-transform: rotate(0deg); } 
100% { -webkit-transform: rotate(360deg); } 
} 
@keyframes travelOrbit { 
0% { transform: rotate(0deg); } 
100% { transform: rotate(360deg); } 
}
@-webkit-keyframes unrotate { 
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); } 
}  
@keyframes unrotate { 
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); } 
}
#cometa_dive {
offset-path: path("M188.599 253.562C187.14 253.372 185.693 253.187 184.243 252.988C146.918 248.014 112.199 240.823 83.4366 232.12C81.3549 231.486 79.2995 230.856 77.2781 230.198C73.8414 229.097 70.4913 227.974 67.2453 226.831C49.5859 220.598 35.9503 214.111 26.7082 207.558C20.7391 203.312 13.7557 196.938 14.4209 190.682C15.0542 184.683 22.9461 178.844 36.6392 174.248C49.9377 169.777 68.5427 166.491 90.7437 164.682C92.8488 164.511 94.989 164.344 97.1663 164.204L96.6752 156.902C96.0866 156.937 95.4884 156.98 94.8901 157.023C62.3516 159.333 9.61051 166.659 7.13887 189.907C6.60989 194.925 8.53504 199.698 12.1648 204.191C22.0871 216.474 44.7458 226.655 64.811 233.724C69.0348 235.215 73.4219 236.669 77.9597 238.082C80.0356 238.728 82.1475 239.369 84.2787 239.995C112.908 248.444 147.056 255.424 183.621 260.291C185.063 260.48 186.514 260.67 187.974 260.86C193.985 261.628 200.059 262.344 206.189 262.992C213.506 263.77 220.772 264.445 227.959 265.032C229.422 265.147 230.89 265.259 232.341 265.369C264.525 267.807 295.149 268.254 322.065 266.689C324.285 266.561 326.48 266.422 328.649 266.272C336.289 265.724 343.61 265.009 350.546 264.116C379.376 260.428 414.154 252.104 416.139 233.391C417.171 223.721 409.139 213.957 392.274 204.383C377.363 195.929 355.562 187.683 329.153 180.515C328.89 180.447 328.624 180.366 328.352 180.297L326.448 187.37C328.222 187.851 329.975 188.326 331.704 188.82C355.517 195.521 375.128 203.069 388.667 210.757C402.361 218.527 409.542 226.295 408.866 232.617C408.2 238.874 400.033 243.637 393.3 246.529C382.895 251.001 368.196 254.472 349.617 256.848C343.706 257.602 337.506 258.236 331.059 258.734C328.944 258.913 326.802 259.057 324.638 259.195C297.348 260.95 266.008 260.569 232.957 258.07C231.51 257.974 230.047 257.849 228.58 257.729L188.595 253.558L188.599 253.562Z");
animation: follow 3.2s linear reverse infinite;
-webkit-animation: follow 3.2s linear reverse infinite;
}
@keyframes follow {
to {
motion-offset: 100%;
offset-distance: 100%;
}
}
.comet-circle {
opacity: 1;
width: 75%;
height: 25vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
transform: rotateY(120deg) rotateX(155deg);
transition: 3s all;
}
.mostra .comet-circle {
-webkit-animation: z-index 9s infinite 2.5s;
animation: z-index 9s infinite 2.5s;
}
.non-mostrare .comet-circle {
-webkit-animation: z-index 9s infinite 2.5s;
animation: z-index 9s infinite 2.5s;
}
@-webkit-keyframes z-index { 
0% { 
z-index: 4; } 
100% { 
z-index: -1; 
} 
} 
@keyframes z-index { 
0% { 
z-index: 4;
} 
100% { 
z-index: -1;
} 
}
.comet-orbit {
border-radius: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 3s all;
transform: perspective(900px);
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
.comet-planet {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: -2vh;
left: 0;
right: 0;
margin: 0 auto;
font-weight: 100;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
transition: 1s all;
}
.comet-orbit .comet-planet svg {
width: 3.5vw;
height: auto;
transform: rotate3d(0, 4, 0, 45deg) perspective(900px);
transition: 0.3s ease;
}
.comet-orbit .comet-planet {
opacity: 0;
}
@-webkit-keyframes Orbit { 
0% { -webkit-transform: rotate(0deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
z-index: -9; 
opacity: 1;  } 
100% { 
-webkit-transform: rotate(360deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
z-index: 1; 
opacity: 1; 
} 
} 
@keyframes Orbit { 
0% { 
transform: rotate(0deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
z-index: -9; 
opacity: 1;
} 
100% { transform: rotate(360deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
z-index: 1; 
opacity: 1;
} 
}
.mostra .comet-planet {
-webkit-animation: scale 4s linear 1.5s, Orbit 9s infinite linear 5.5s;
animation: scale 4s linear 1.5s, Orbit 9s infinite linear 5.5s;
-webkit-transform-origin: 50% 450%;
transform-origin: 50% 450%;
}
.non-mostrare .comet-planet {
-webkit-animation: scale 2.5s linear 4.5s, Orbit 9s infinite linear 7s;
animation: scale 2.5s linear 4.5s, Orbit 9s infinite linear 7s;
-webkit-transform-origin: 50% 450%;
transform-origin: 50% 450%;
}
@-webkit-keyframes scale { 
0% { 
-webkit-transform: rotate(-60deg) perspective(100000px) translateZ(-100px) translateX(50px) rotateZ(180deg) translateY(105px);
-webkit-transform-origin: 50% 820%;
opacity: 0;
scale: 0.5;
} 
10% { 
opacity: 0.8;
scale: 0.5;
} 
50% { 
scale: 1;
opacity: 1.2;
} 
100% {
-webkit-transform: rotate(0deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
-webkit-transform-origin: 50% 450%;
opacity: 1;
scale: 1;
} 
}
@keyframes scale { 
0% { 
transform: rotate(-60deg) perspective(100000px) translateZ(-100px) translateX(50px) rotateZ(180deg) translateY(105px);
transform-origin: 50% 820%;
opacity: 0;
scale: 0.5;
} 
10% { 
opacity: 0.8;
scale: 0.5;
} 
50% { 
scale: 1;
opacity: 1.2;
} 
100% {
transform: rotate(0deg) perspective(100000px) translateZ(10px) translateX(0px) rotateZ(360deg) translateY(5px); 
transform-origin: 50% 450%;
opacity: 1;
scale: 1;
} 
}  .show .comet-planet {
-webkit-animation: scale 3s linear 1s, Orbit 9s infinite linear 4s;
animation: scale 3s linear 1s, Orbit 9s infinite linear 4s;
-webkit-transform-origin: 50% 450%;
transform-origin: 50% 450%;
}
* {
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.about p {
text-transform: uppercase;
font-size: 3rem;
font-weight: 700;
mix-blend-mode: difference;
transform: translate3d(0,0,0);
}
.about .orange {
mix-blend-mode: unset !important;
text-transform: uppercase;
font-size: 3rem;
font-weight: 700;
transform: translate3d(0,0,0);
}
.underline-zig {
border-bottom: 1px dotted var(--maincolor);
}
.about svg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.model-container {
width: 400px;
height: 300px;
position: relative;
}
.model-canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.img-dive-box {
position: absolute;
width: 300px;
height: 150px;
background-color: #ffffff66;
top: -100px;
right: 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
#model1, #model2, #model3, #model4, #model5, #model6 {
width: 100%;
height: 100%;
position: relative;
}
.header-text-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 4em;
padding-bottom: 8em;
display: flex;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
margin-top: 0em;
} .header-text-parent,.header-text-move {
position: relative;
overflow: hidden
}
.section-sign-span {
padding: 75px;
}
.section-sign-span .button-cta-page {
font-size: 2.5rem;
border-radius: 80px;
}
.header-text-service {
color: var(--maincolor);
text-transform: uppercase;
font-size: 11vw;
line-height: .9;
font-weight: 700;
}
.header-text-service.italic {
font-style: italic
}
.sticky-parent {
width: 100%;
height: auto;
overflow: visible
}
.sticky-wrap {
height: auto;
position: relative;
top: 0;
overflow: hidden
}
.services-wrap {
width: 100%;
height: 100%
}
.service-intro-parent {
z-index: 3;
width: 50%;
height: 100%;
background-color: #151414;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 1.4em;
padding-bottom: 1.4em;
display: none;
position: absolute;
top: 0%;
bottom: auto;
left: 0%;
right: auto
}
.sticky-info-span {
text-transform: uppercase;
font-size: 2.875em
}
.info-sticky-span {
color: #444545;
text-align: center
}
.service-block-parent {
width: 100%;
height: 100%;
padding: 0;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%
}
.service-block-parent.move {
z-index: auto;
background-color: #151414;
display: flex;
position: relative;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%
}
.service-block-parent.hire {
z-index: auto;
background-color: #d9d9d9;
position: relative
}
.marquee__part {
flex-shrink: 0;
padding: 0 20vw;
font-smooth: always;
}
.marquee_work {
top: -1vh;
position: absolute;
z-index: 2;
font-size: 18rem;
font-weight: 700;
color: #4b4b4b;
transition: all 1.5s ease;
}
.marquee__inner {
-webkit-font-smoothing: antialiased;
width: fit-content;
display: flex;
flex: auto;
flex-direction: row;
}
.part_middle {
color: transparent;
-webkit-text-stroke: 2px var(--light-dark);
}
.about_us .reveal_show img {
width: 100%;
height: auto;
}
.overlay_top {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgb(19 18 18) 0%, #1b1b1b00 100%);
background: -webkit-linear-gradient(180deg, rgb(19 18 18) 0%, #1b1b1b00 100%);
background: linear-gradient(180deg, rgb(19 18 18) 0%, #1b1b1b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.overlay_bottom {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, #1b1b1b00 0%,  #0d0d0d 100%);
background: -webkit-linear-gradient(180deg, #1b1b1b00 0%,  #0d0d0d 100%);
background: linear-gradient(180deg, #1b1b1b00 0%,  #0d0d0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.scroll-line {
background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgb(16, 16, 16) 40%, #090909 40%);
background: -webkit-linear-gradient(90deg, rgb(16, 16, 16) 40%, #090909 40%);
background: linear-gradient(90deg, rgb(16, 16, 16) 40%, #090909 40%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#101010",GradientType=1);
}
.portfolio-sticky {
width: 40%;
position: sticky;
height: auto;
top: 25vh;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 5%;
gap: 25vh;
z-index: 2;
}
.portfolio-scroll {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: flex-end;
width: 100%;
gap: 20vh;
position: relative;
margin-top: -48.5vh;
}
.portfolio-scroll-project {
position: relative;
right: 5%;
width: 50%;
height: 30vw;
color: var(--maincolor);
display: flex;
flex-direction: column-reverse;
}
.portfolio-scroll-project video {
border-radius: 20px;
}
.portfolio-scroll-project:last-child {
display: flex;
justify-content: center;
}
.portfolio-scroll-project:last-child .button-cta-page {
font-size: 1.8rem;
border-radius: 80px;
}
.flex-project-title {
display: flex;
flex-wrap: nowrap;
position: relative;
align-items: center;
justify-content: flex-start;
gap: 25px;
bottom: -50px;
}
.title-sticky {
text-align: left;
font-size: 3.75rem;
color: var(--maincolor);
width: 100%;
}
.area-line {
width: 2px;
height: 100%;
background-color: #444545;
position: absolute;
top: 0%;
bottom: auto;
left: auto;
right: 60%;
}
.area-line-noanimation {
width: 2px;
height: 100%;
background-color: #444545;
position: absolute;
top: 0%;
bottom: auto;
left: auto;
right: 60%;
}
.map-studio {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.grey-box-about {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #d9d9d91a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 0;
border-radius: 40px 40px 0 0;
}
.about_us_sticky {
position: sticky;
top: 0;
}
.map-studio svg {
width: 100%;
height: 800px;
z-index: 1;
}
#_x31_:hover .st1 {
fill: var(--orange);
cursor: pointer;
transition: all 0.5s ease;
}
#_x32_:hover .st3, #_x32_:hover .st2 {
fill: var(--orange);
cursor: pointer;
transition: all 0.5s ease;
}
#_x33_:hover .st4, #_x33_:hover .st2, #_x33_:hover .st0 {
fill: var(--orange);
cursor: pointer;
transition: all 0.5s ease;
}
#_x34_:hover .st5, #_x34_:hover .st6 {
fill: var(--orange);
cursor: pointer;
transition: all 0.5s ease;
}
.port {
position: fixed;
width: 100%;
height: 100vh;
padding-top: 10vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: var(--secondcolor);
background-color: var(--secondcolor);
z-index: 103;
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.port img {
width: 50%;
}
.port .description {
float: left;
width: 90%;
max-height: 100%;
padding: 0 65px 40px;
overflow: auto;
}
.port h4 {
font-size: 2.5rem;
font-weight: 700;
line-height: 2.3;
padding: 0;
}
.port p {
font-size: max(16px,.75rem);
font-weight: 300;
}
.port > * {
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.port.item_open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.port > * {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.closex {
width: 40px;
height: 40px;
background: url(//dive.it/wp-content/themes/dive/img/svg/closex.svg) no-repeat;
position: fixed;
right: 30px;
top: 100px;
opacity: 0;
z-index: 1004;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.item_open .closex {
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.introcontainer {
width: 100%;
height: 100%;
margin: auto;
}
.introcontainer .swiper-container {
width: 100%;
height: 60vh;
background: rgb(10, 10, 11);
}
.introcontainer .swiper-slide {
width: 500px;
height: 100%;
display: flex;
margin: auto;
align-items: center;
justify-content: center;
background: rgb(10, 10, 11);
}
.cards {
width: 100%;
height: auto;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.card img {
object-fit: cover;
width: 600px;
border-radius: 5px;
max-width: 100%;
height: 35vh;
min-height: 35vh;
padding: 0;
margin: 0;
transition: all 0.5s ease;
}
.text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0px;
max-width: 100%;
width: 500px;
}
.title-box {
display: flex;
text-align: left;
max-width: 100%;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
top: 0;
left: 50%;
right: 0 !important;
bottom: 50px;
justify-content: center;
color: #fff;
opacity: 0;
z-index: 15;
}
.title-box h1 {
display: block;
font-family: "Futura";
font-weight: 700;
line-height: normal;
max-width: 100%;
font-size: 3vmin;
}
.title-box p {
font-family: "HelveticaNow";
font-size: 2vmin;
padding-top: 0;
margin: 0;
padding-left: 1%;
max-width: 100%;
}
.card .title-box .seperator {
height: 1px;
width:10%;
background: white;
position: absolute;
content: "";
left: -15%;
top: 50%;  
}
.swiper-slide .title-box{
transform: translateX(-50%);
transition: all .7s ease .3s;
}
.swiper-slide-active .title-box {
transform: translateX(0%);
opacity: 1;
transition: all .7s ease;
}
.swiper-scrollbar {
background: white;
}
.swiper-slide .card img {
transition: filter .7s ease;
filter: grayscale(100%);
}
.swiper-slide-active .card img {
filter: grayscale(0%) brightness(60%);
height: 50vh;
transition: all 0.5s ease;
}
.introcontainer .swiper-pagination-bullet-active {
background: white !important;
width: 25px !important;
height: 5px !important;
border-radius: 0 !important;
}
.introcontainer .swiper-pagination-bullet {
background: whitesmoke !important;
width: 25px !important;
height: 5px !important;
border-radius: 0!important;
}
.introcontainer .swiper-arrows {
width: 100%;
height: 80px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 50%;
}
.swiper-button-prev,
.swiper-button-next {
width: 80px !important;
height: 80px;
background-image: none !important;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
margin: 0;
border-radius: 5px;
transition: all 0.3s ease;
}
.introcontainer .swiper-button-prev {
left: 0px !important;
right: auto !important;
background-color: rgba(255, 255, 255, 0.7);
}
.introcontainer .swiper-button-next {
right: 0px !important;
background-color: rgba(255, 255, 255, 0.8);
}
.introcontainer .swiper-button-prev span,
.introcontainer .swiper-button-next span {
width: 10px;
height: 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
position: absolute;
border: solid 2px #666;
border-left: 0;
border-bottom: 0;
transition: all 0.1s ease;
}
.introcontainer .swiper-button-prev span {
transform: rotate(-135deg);
left: 49%;
}
.introcontainer .swiper-button-next span {
transform: rotate(45deg);
right: 49%;
}
.introcontainer .swiper-button-prev:hover span,
.introcontainer .swiper-button-next:hover span {
width: 5px;
height: 5px;
}
.introcontainer .swiper-button-prev:after,
.introcontainer .swiper-button-next:after {
width: 0px;
height: inherit;
content: "";
position: absolute;
border-radius: 5px;
background-color: white;
transition: all 0.4s ease-in-out;
z-index: -1;
opacity: 0.8;
}
.introcontainer .swiper-button-prev:after {
right: 0;
}
.introcontainer .swiper-button-next:after {
left: 0;
}
.introcontainer .swiper-button-prev:hover:after,
.introcontainer .swiper-button-next:hover:after {
width: inherit;
}
.introcontainer .swiper-button-disabled {
opacity: 1 !important;
}
.introcontainer .swiper-button-disabled.swiper-button-prev span,
.introcontainer .swiper-button-disabled.swiper-button-next span {
opacity: 0.2;
}
@media screen and (max-width: 991px) {
.introcontainer .swiper-button-prev,
.introcontainer .swiper-button-next {
display: none;
}
.introcontainer .swiper-arrows {
height: 60px;
}
.introcontainer .swiper-button-prev {
right: 60px;
}
.introcontainer .swiper-button-prev span {
left: 45%;
}
.introcontainer .swiper-button-next span {
right: 45%;
}
}
.introcontainer .swiper-button-next::after, .introcontainer .swiper-container-rtl .swiper-button-prev::after {
content: "attr" !important;
}
.introcontainer .swiper-button-prev::after, .introcontainer .swiper-container-rtl .swiper-button-prev::after {
content: "attr" !important;
} #info-box {
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background-color: transparent;
color: var(--maincolor);
}
#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
#black-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 1;
z-index: 9999;
}
#progress-bar {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 2px;
border-top: 2px dashed white;
transform-origin: left center;
border-spacing: 100px;
z-index: 10000;
}
#progress-number {
position: fixed;
bottom: 10px;
right: 10px;
color: white;
font-size: 5vw;
font-weight: 300;
z-index: 9999999;
}
#moving-image {
position: absolute;
top: 47%;
left: 0;
width: 50px; height: 50px; z-index: 10001; }
#text-animation {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
z-index: 10001;
opacity: 0;
}
.torna-al-portfolio a {
position: relative;
width: 100%;
height: 100%;
}
.timeline {
position: relative;
z-index: 0;
}
.timeline .timeline-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
position: relative;
}
.timeline .timeline-wrapper::before, .timeline .timeline-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
}
.timeline .timeline-wrapper::after {
top: auto;
bottom: 0;
}
.timeline .timeline-wrapper .timeline-progress {
width: 3px;
height: 100%;
position: absolute;
background: #3d3d3d;
z-index: -2;
}
.timeline .timeline-wrapper .timeline-progress-bar {
width: 3px;
height: 50vh;
position: fixed;
bottom: 50vh;
background: var(--orange);
z-index: -1;
}
.timeline .timeline-wrapper .timeline-item {
display: flex;
align-items: center;
grid-template-columns: 1fr 10rem 1fr;
color: #3d3d3d;
max-width: 1120px;
margin: 0 auto;
padding-block: 100px;
}
.timeline .timeline-wrapper .timeline-item:first-child {
padding-top: 0;
}
.timeline .timeline-wrapper .timeline-item > div {
padding: 2rem;
}
.timeline .timeline-wrapper .timeline-item .timeline-left {
text-align: left;
width: calc(50% - 5rem);
}
.timeline .timeline-wrapper .timeline-item .timeline-right {
width: calc(50% - 5rem);
}
.timeline .timeline-wrapper .timeline-item .timeline-left .timeline-date-icon img,
.timeline .timeline-wrapper .timeline-item .timeline-right .timeline-date-icon img {
width: 150px;
height: auto;
position: sticky;
top: 50vh;
transform: translateY(20px);
opacity: 0;
transition: all 0.7s ease-in-out;
}
.timeline .timeline-wrapper .timeline-item .glass-text {
background-color: transparent;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border-radius: 20px;
transition: all 0.7s ease-in-out;
}
.timeline .timeline-wrapper .timeline-item .timeline-center {
display: flex;
width: 10rem;
justify-content: center;
}
.timeline .timeline-wrapper .timeline-item .timeline-center .timeline-circle {
width: 15px;
height: 15px;
background: #3d3d3d;
border-radius: 50%;
outline: solid 8px #05071F;
position: sticky;
top: 50vh;
transition: all 0.3s ease-in-out;
}
.timeline .timeline-wrapper .timeline-item .timeline-right .timeline-text p,
.timeline .timeline-wrapper .timeline-item .timeline-left .timeline-text p{
font: 400 1rem/1.50 Montserrat;
transition: all 0.7s ease-in-out;
transform: translateY(20px);
opacity: 0;
}
.timeline .timeline-wrapper .timeline-item .timeline-right .timeline-text h3,
.timeline .timeline-wrapper .timeline-item .timeline-left .timeline-text h3 {
color: var(--orange);
transition: all 0.7s ease-in-out;
transform: translateY(20px);
opacity: 0;
}
.timeline .timeline-wrapper .timeline-item.reveal_item {
color: white;
}
.timeline .timeline-wrapper .timeline-item.reveal_item .timeline-circle {
background: var(--maincolor);
width: 30px;
height: 30px;
}
.timeline .timeline-wrapper .timeline-item.active .timeline-date-icon img,
.timeline .timeline-wrapper .timeline-item.active .timeline-text p,
.timeline .timeline-wrapper .timeline-item.active .timeline-text h3 {
transform: translateY(0);
opacity: 1;
}
.timeline .timeline-wrapper .timeline-item.active .glass-text {
width: calc(50% - 5rem);
background-color: #d9d9d91a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 20px;
transition: all 0.7s ease-in-out;
transition-delay: 0.5s;
}
.timeline .timeline-wrapper .timeline-item.active .timeline-text p,
.timeline .timeline-wrapper .timeline-item.active .timeline-text h3 {
transition-delay: 0.3s;
}
@media screen and (max-width: 991px){
.timeline .timeline-wrapper .timeline-item .timeline-center{
width:auto;
}
.timeline .timeline-wrapper .timeline-item.active .glass-text {
width: 100%;
}
.timeline .timeline-wrapper .timeline-item .timeline-left {
width: 100%;
}
.timeline .timeline-wrapper .timeline-item .timeline-right {
width: 100%;
}
}
.portfolio-container .load-more{
width:100%;
z-index:10;
display:block;
text-align:center;
position:relative;
margin-bottom:32px;
}
.portfolio-container .load-more.hide-btn{
display:none;
}
.portfolio-container .load-more .load-more-button{
background-color: transparent;
padding: 0.5em 2em;
font-size: 1.2rem;
cursor:pointer;
border: 1px solid #f0231061;
border-radius: 30px;
color: var(--maincolor);
font-weight: 300;
display:inline-block;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
position: relative;
}
.portfolio-container .load-more .load-more-button:hover{
background-color: var(--orange);
border: 1px solid var(--orange);
color: var(--maincolor);
font-weight: 300;
padding: 0.5em 2em;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
.portfolio-container .load-more .load-more-button:after{
width:0;
height:0;
content:"";
margin-left:0;
display:inline-block;
vertical-align:middle;
transition:all 100ms linear 0ms;
animation:spin 750ms ease-in-out 0ms infinite;
background-image:url(//dive.it/wp-content/themes/dive/img/loading_icon.svg);
background-repeat:no-repeat;
background-position:center;
background-size:0;
}
.portfolio-container .load-more .load-more-button.loading:after{
width:18px;
height:18px;
margin-left:8px;
background-size:18px;
}
@keyframes spin{
0%   {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}