html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
html,
body {
height: 100%;
line-height: 1;
-webkit-backface-visibility: hidden;
background: #e4e9eb;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *::after, *::before {
box-sizing: border-box;
}
a {
text-decoration: none;
}
a.lago-link {
text-decoration: underline;
font-weight: bold;
color: #4b585e;
}
#main,
.main {
width: 100%;
height: 100%;
}
@font-face {
font-family:'Didot-Roman';
src: url(https://www.lagoliving.it/fonts/Didot-Roman.eot);
src: url(https://www.lagoliving.it/fonts/Didot-Roman.eot?#iefix) format('embedded-opentype'),
url(https://www.lagoliving.it/fonts/Didot-Roman.woff) format('woff'),
url(https://www.lagoliving.it/fonts/Didot-Roman.ttf) format('truetype'),
url(https://www.lagoliving.it/fonts/Didot-Roman.svg#Didot-Roman) format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Didot-Bold';
src: url(https://www.lagoliving.it/fonts/Didot-Bold.eot);
src: url(https://www.lagoliving.it/fonts/Didot-Bold.eot?#iefix) format("eot"),
url(https://www.lagoliving.it/fonts/Didot-Bold.woff) format("woff"),
url(https://www.lagoliving.it/fonts/Didot-Bold.ttf) format("truetype"),
url(https://www.lagoliving.it/fonts/Didot-Bold.svg#Didot-Bold) format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Proxima-Nova-Thin';
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Thin.eot);
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Thin.eot?#iefix) format("eot"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Thin.woff) format("woff"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Thin.ttf) format("truetype"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Thin.svg#Didot-Bold) format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Proxima-Nova-Regular';
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Regular.eot);
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Regular.eot?#iefix) format("eot"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Regular.woff) format("woff"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Regular.ttf) format("truetype"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Regular.svg#Didot-Bold) format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Proxima-Nova-Bold';
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Bold.eot);
src: url(https://www.lagoliving.it/fonts/Proxima-Nova-Bold.eot?#iefix) format("eot"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Bold.woff) format("woff"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Bold.ttf) format("truetype"),
url(https://www.lagoliving.it/fonts/Proxima-Nova-Bold.svg#Didot-Bold) format("svg");
font-weight: bold;
font-style: normal;
}
#iubenda-pp-overlay {
z-index: 99999 !important;
}
#iubenda-pp {
z-index: 100000 !important;
}
/* Preloader
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.m-scene .scene_element {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.m-scene .scene_element--fadein {
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
.m-scene .scene_element--delayed {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
.m-scene.is-exiting .scene_element {
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
.m-scene.is-exiting .scene_element--delayed {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.m-scene.is-exiting .scene_element--noexiting {
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
.is-loading,
.is-loading a {
cursor: progress;
}
.preloader {
width: 100%;
height: 100%;
background: #000;
top: 0;
left: 0;
z-index: 9;
position: fixed;
display: none;
}
.preloader .frame-top {
height: 18px !important;
}
.layer {
width: 100%;
height: 100%;
background: #000;
top: 0;
left: 0;
z-index: 8;
position: fixed;
display: none;
}
.preloader svg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
_-webkit-animation: spinning 4s infinite;
background: url(../img/lago-living-logo-spinner.svg) center center no-repeat;
}
.preloader path {
stroke-width: 4px;
stroke: rgba(255, 255, 255, 0.3);
fill: transparent;
}
.preloader line {
stroke: white;
stroke-width: 4px;
stroke-linecap: round;
}
@-moz-keyframes spinning {
0% {
-moz-transform: rotate(0turn);
}
100% {
-moz-transform: rotate(-1turn);
}
}
@-webkit-keyframes spinning {
0% {
-webkit-transform: rotate(0turn);
}
100% {
-webkit-transform: rotate(-1turn);
}
}
@keyframes spinning {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
/* Frames
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.frame {
position: fixed;
z-index: 6;
background: #fff;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.frame-top {
height: 18px;
width: 100%;
top: 0;
}
.frame-top-nav {
float: right;
height: 80px;
margin: -100px auto 0 25px;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.frame-top-nav a {
font-size: 15px;
line-height: 83px;
padding: 10px;
margin: 0 11px;
color: #252c2f;
text-align: left;
letter-spacing: 0,01em;
font-family: 'Proxima-Nova-Regular';
text-transform: uppercase;
}
.frame-top-nav a:hover {
color: #999;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
.frame-top-nav a.current:hover {
color: #252c2f;
cursor: default;
}
.frame-top-nav .current {
width: 20px;
height: 20px;
background: #a0adb3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
color: #FFF;
padding: 7px 5px 5px 6px;
margin: 0 11px;
font-family: 'Proxima-Nova-Regular';
text-transform: uppercase;
text-decoration: none;
}
.frame-top-nav .current-it {
padding: 7px 8px 4px 9px;
}
.frame-top-nav span {
color: #252c2f;
padding: 10px;
margin: 0 11px;
font-family: 'Proxima-Nova-Regular';
text-transform: uppercase
}
.frame-right {
height: 100%;
width: 18px;
right: 0;
top: 0;
}
.frame-bottom {
height: 18px;
width: 100%;
bottom: 0;
}
.frame-left {
height: 100%;
width: 18px;
left: 0;
top: 0;
}
.frame-logo {
float: left;
width: 225px;
margin: -100px auto 0 45px;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
@media screen and (max-width: 1100px) {
.frame-top-nav a {
margin: 0 7px;
}
}
@media screen and (max-width: 1024px) {
.frame-top-nav a {
margin: 0 3px;
}
}
@media screen and (max-width: 639px) {
.frame-logo,
.frame-top-nav {
display: none;
}
}
/* Social Icons
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.social-icons {
width: 200px;
float: right;
margin: -100px 20px 0 auto;
overflow: hidden;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.social-icon-item {
width: 45px;
float: left;
position: relative;
}
.social-icon-item img {
width: 41px;
}
.hover-effect {
display: none;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 1100px) {
.social-icons {
margin: -100px 0 0 auto;
}
}
@media screen and (max-width: 1023px) {
.social-icons {
display: none;
}
}
/* Slider
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.slider-item-container {
position: absolute;
top: 0;
left: 0;
}
.slider-item {
will-change: transform, opacity;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
background-size: cover !important;
}
.slider-item--active {
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
}
.slider-item:nth-child(1) {
background: url(../img/lago-living-home-01.jpg) center center;
}
.slider-item:nth-child(2) {
background: url(../img/lago-living-home-01.jpg) center center;
}
.slider-item:nth-child(3) {
background: url(../img/lago-living-home-02.jpg) center center;
}
.slider-item:nth-child(4) {
background: url(../img/lago-living-home-03.jpg) center center;
}
.slider-item:nth-child(5) {
background: url(../img/lago-living-home-04.jpg) center center;
}
.slider-item:nth-child(6) {
background: url(../img/lago-living-home-05.jpg) center center;
}
@media screen and (max-width: 767px) {
.slider-item-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.slider-item {
animation: none;
-webkit-transform: none;
transform: none;
background-position: center center;
animation: slideShow 30s linear infinite 0s;
-moz-animation: slideShow 30s linear infinite 0s;
-webkit-animation: slideShow 30s linear infinite 0s;
background-position: center center;
}
.slider-item--active,
.slider-item:nth-child(1) {
display: none;
}
.slider-item:nth-child(2) {
opacity: 0.8;
background: url(../img/lago-living-home-01.jpg) center center;
}
.slider-item:nth-child(3) {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(../img/lago-living-home-02.jpg) center center;
}
.slider-item:nth-child(4) {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(../img/lago-living-home-03.jpg) center center;
}
.slider-item:nth-child(5) {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(../img/lago-living-home-04.jpg) center center;
}
.slider-item:nth-child(6) {
animation-delay: 24s;
-o-animation-delay: 24s;
-moz--animation-delay: 24s;
-webkit-animation-delay: 24s;
background: url(../img/lago-living-home-05.jpg) center center;
}
@-moz-keyframes slideShow {
0% {
opacity: 0;
-moz-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transformm:scale(1);
}
}
@-webkit-keyframes slideShow {
0% {
opacity: 0;
-webkit-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
opacity: 0;
-webkit-transformm:scale(1);
}
}
@keyframes slideShow {
0% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
opacity: 0;
transform:scale(1);
-ms-transformm:scale(1);
}
}
}
/* Home Image Navigation
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.navigation-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
.header-logo {
display: block;
margin: 0 auto 50px auto;
}
.navigation {
position: absolute;
width: 1134px;
height: 156px;
left: 50%;
top: 50%;
margin: -110px 0 0 -567px;
z-index: 3;
}
.navigation-item {
-webkit-transform: translateZ(0);
letter-spacing: 3px;
transform: translateZ(0);
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Proxima-Nova-Bold';
color: #fff;
padding: 0px 45px;
text-transform: uppercase;
cursor: pointer;
}
@media screen and (min-width:0\0) {
.navigation-item {
padding: 0px 44px;
}
}
@-moz-document url-prefix() {
.navigation-item {
padding: 0px 44px;
}
}
.navigation-item-link {
will-change: opacity;
}
.navigation-item a {
color: white;
}
.navigation-text {
display: inline-block;
-webkit-transition: 250ms;
-moz-transition: 250ms;
transition: 250ms;
}
.navigation-line {
height: 4px;
width: 97%;
margin: 10px 0;
overflow: hidden;
}
.navigation-item .line {
position: relative;
width: 100%;
height: 100%;
display: block;
background: #fff;
-webkit-transform: translate(-120%, 0);
-moz-transform: translate(-120%, 0);
-ms-transform: translate(-120%, 0);
transform: translate(-120%, 0);
-webkit-transition: 250ms cubic-bezier(0, 0, 0.1, 1);
-moz-transition: 250ms cubic-bezier(0, 0, 0.1, 1);
transition: 250ms cubic-bezier(0, 0, 0.1, 1);
}
.navigation-item:hover .line {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.navigation-subitem {
display: none;
position: absolute;
margin-top: -25px;
top: 65px;
}
.navigation-subitem a {
font-family: 'Proxima-Nova-Regular';
letter-spacing: 0.035em;
margin: 5px 0;
display: block;
background: rgba(255, 255, 255, 0.8);
padding: 12px 10px 10px 10px;
width: 150px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
text-align: center;
font-size: 14px;
color: #000;
}
.navigation-item-philosophy .navigation-subitem a {
width: 150px;
}
.navigation-item-collections .navigation-subitem a {
width: 162px;
}
.navigation-item-experience .navigation-subitem a {
width: 145px;
}
.navigation-subitem a:hover {
background: #fff;
}
.navigation-item-collections a[title="Collezioni"] {
padding: 0 11px;
}
.navigation-item-philosophy a[title="Filosofia"] {
padding: 0 13px;
}
@media screen and (max-width: 1200px) {
.navigation {
width: 878px;
margin: -110px 0 0 -439px;
}
.navigation-item {
font-size: 18px;
padding: 0px 25px;
}
.navigation-subitem a {
padding: 12px 3px 10px 5px;
font-size: 13px;
}
.navigation-item-philosophy .navigation-subitem a {
width: 138px;
}
.navigation-item-collections .navigation-subitem a {
width: 150px;
}
.navigation-item-experience .navigation-subitem a {
width: 133px;
}
.navigation-item-collections a[title="Collezioni"] {
padding: 0 10px;
}
.navigation-item-philosophy a[title="Filosofia"] {
padding: 0 12px;
}
}
@media screen and (max-width: 1023px) {
.navigation {
width: 668px;
margin: -110px 0 0 -334px;
}
.navigation-subitem {
margin-top: -30px;
}
.navigation-item {
font-size: 14px;
padding: 0px 15px;
}
.navigation-subitem a {
font-size: 12px;
}
.navigation-item-philosophy .navigation-subitem a {
width: 114px;
}
.navigation-item-collections .navigation-subitem a {
width: 124px;
}
.navigation-item-experience .navigation-subitem a {
width: 111px;
}
.navigation-item-collections a[title="Collezioni"] {
padding: 0 8px;
}
.navigation-item-philosophy a[title="Filosofia"] {
padding: 0 11px;
}
}
@media screen and (max-width: 767px) {
.navigation {
height: auto;
margin: -50px 0 0 auto;
width: 100%;
left: auto;
}
.navigation-item {
display: none;
}
.header-logo {
width: 250px;
margin: 0 auto;
}
}
/* Main Navigation
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
#main-menu {
position: fixed;
display: table;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 8;
background: #FFF;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
font-family: 'Proxima-Nova-Thin';
text-transform: uppercase;
}
#main-menu.open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#main-menu .frame {
background: #252c2f;
}
#main-menu .frame-top {
height: 18px !important;
}
.menu-inner {
width: 100%;
display: table-cell;
vertical-align: middle;
padding-top: 80px;
}
.menu-logo {
display: block;
margin: 0 auto 25px auto;
width: 350px;
}
.site-nav {
display: inline-block;
width: 100%;
text-align: center;
}
.site-nav a,
.site-nav span {
font-size: 20px;
line-height: 20px;
margin: 15px 20px;
display: inline-block;
color: #4a4a4a;
text-align: center;
letter-spacing: 0,01em;
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
span.menu-colection-item,
a.menu-colection-item {
display: block;
font-family: 'Proxima-Nova-Regular';
}
.site-nav a:hover {
color: #999;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
.lineBreak {
margin: 0 auto;
overflow: hidden;
height: 1px;
width: 10%;
position: relative;
margin: 25px auto;
background: #fff;
}
.lineBreak div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
}
.page-collection-section .lineBreak,
.page-collection-section .lineBreak div {
background: #4b585e;
}
.site-nav a,
.site-nav span,
.social-list a,
.lineBreak,
.menu-logo {
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
transition: transform 0.6s, opacity 0.6s;
}
.menu-logo {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
#main-menu.open .site-nav a,
#main-menu.open .site-nav span,
#main-menu.open .social-list a,
#main-menu.open .lineBreak,
#main-menu.open .menu-logo {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
#main-menu.close .site-nav a,
#main-menu.close .site-nav span,
#main-menu.close .social-list a,
#main-menu.close .lineBreak {
-webkit-transform: translateY(100%) scale(1);
transform: translateY(100%) scale(1);
}
@media screen and (max-width: 1200px) {
.menu-logo {
display: none;
}
.site-nav a,
.site-nav span {
font-size: 18px;
line-height: 18px;
}
}
@media screen and (max-height: 870px) {
.menu-logo {
display: none;
}
.site-nav a,
.site-nav span {
font-size: 18px;
line-height: 18px;
margin: 12px 20px;
}
}
@media screen and (max-height: 720px) {
.site-nav a,
.site-nav span {
font-size: 16px;
line-height: 16px;
margin: 10px 20px;
}
}
@media screen and (max-width: 1023px) {
.site-nav a,
.site-nav span {
font-size: 15px;
line-height: 15px;
margin: 10px 15px;
}
}
@media screen and (max-width: 767px) {
#main-menu {
display: block;
}
.menu-inner {
padding: 0 0 200px 0;
height: 90vh;
margin-top: 130px;
overflow-y: scroll;
display: block;
}
.site-nav {
padding: 0 25px;
}
.site-nav a,
.site-nav span {
display: block;
margin: 15px 15px;
font-size: 18px;
line-height: 25px;
}
.lineBreak {
width: 150px;
margin: 25px auto;
}
.menu-logo {
display: none;
}
}
/* Main Navigation Social
================================================== */
.social-nav {
z-index: 208;
display: inline-block;
text-align: center;
width: 100%;
}
.social-list {
position: relative;
}
.social-list a,
.social-list span {
position: relative;
font-size: 18px;
margin: 20px;
display: inline-block;
color: #4a4a4a;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
.social-list:nth-of-type(2) a {
margin: 0 15px 0 15px;
}
.social-list a:hover {
color: #999;
}
span.current {
color: #b2b2b2;
cursor: default !important;
text-decoration: underline;
}
@media screen and (max-width: 1200px) {
.social-list a,
.social-list span {
font-size: 18px;
line-height: 18px;
margin: 12px 20px;
}
}
@media screen and (max-height: 720px) {
.social-list a,
.social-list span {
font-size: 16px;
line-height: 16px;
margin: 10px 20px;
}
}
@media screen and (max-width: 1023px) {
.social-list a,
.social-list span {
font-size: 15px;
line-height: 15px;
margin: 10px 15px;
}
}
@media screen and (max-width: 767px) {
.social-nav {
padding: 0 25px;
}
.social-list a,
.social-list span {
display: block;
margin: 15px 15px;
font-size: 18px;
line-height: 25px;
}
}
/* Main Navigation Open
================================================== */
#openMenu {
position: fixed;
display: inline-block;
z-index: 7;
top: 70px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 28px;
cursor: pointer;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#openMenu span {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
font-weight: bold;
top: -25px;
left: -13px;
position: absolute;
}
#openMenu .firstLine,
#openMenu .secondLine {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#openMenu .firstLine {
background: white;
}
#openMenu .secondLine {
background: white;
}
#openMenu .burger .line1 {
width: 30px;
height: 4px;
display: block;
position: absolute;
}
#openMenu .burger .line1 .firstLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
-webkit-transition: 300ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu .burger .line1 .secondLine {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
opacity: 0;
-webkit-transition: 300ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu .burger .line2 {
top: 8.8px;
width: 30px;
height: 4px;
display: block;
position: absolute;
}
#openMenu .burger .line2 .firstLine {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
-webkit-transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu .burger .line2 .secondLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
-webkit-transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms 50ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu .burger .line3 {
top: 17.6px;
widtH: 30px;
height: 4px;
display: block;
position: absolute;
}
#openMenu .burger .line3 .firstLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
-webkit-transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu .burger .line3 .secondLine {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
opacity: 0;
-webkit-transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
-moz-transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
transition: 300ms 100ms cubic-bezier(1, 0, 0, 0.7);
}
#openMenu:hover .burger .line1 .firstLine {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
}
#openMenu:hover .burger .line1 .secondLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
}
#openMenu:hover .burger .line2 .firstLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
}
#openMenu:hover .burger .line2 .secondLine {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
opacity: 0;
}
#openMenu:hover .burger .line3 .firstLine {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
}
#openMenu:hover .burger .line3 .secondLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
}
/* Main Navigation Open
================================================== */
#closeMenu {
position: fixed;
display: inline-block;
z-index: 99999;
top: 70px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 30px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#closeMenu span {
color: #252c2f;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
font-weight: bold;
top: -14px;
right: 2px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#closeMenu .firstLine,
#closeMenu .secondLine {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#closeMenu .firstLine {
background: #252c2f;
}
#closeMenu .secondLine {
background: #252c2f;
}
#closeMenu .burger .line1 {
width: 30px;
height: 4px;
top: 13px;
display: block;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#closeMenu .burger .line1 .firstLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
-webkit-transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
opacity: 1;
}
#closeMenu .burger .line1 .secondLine {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
opacity: 0;
-webkit-transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
}
#closeMenu .burger .line2 {
width: 30px;
height: 4px;
top: 50%;
margin-top: -2px;
display: block;
position: absolute;
}
#closeMenu .burger .line2 .firstLine {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
opacity: 0;
-webkit-transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
transition: 300ms 150ms cubic-bezier(1, 0, 0, 1);
}
#closeMenu .burger .line2 .secondLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
-webkit-transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
transition: 300ms 50ms cubic-bezier(1, 0, 0, 1);
}
#closeMenu:hover .burger .line1 .firstLine {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
}
#closeMenu:hover .burger .line1 .secondLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
}
#closeMenu:hover .burger .line2 .firstLine {
-webkit-transform: translate(0%, 0);
-moz-transform: translate(0%, 0);
-ms-transform: translate(0%, 0);
transform: translate(0%, 0);
opacity: 1;
}
#closeMenu:hover .burger .line2 .secondLine {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
}
/* Top
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.button {
width: 200px;
}
.button a {
float: left;
width: 200px;
height: 60px;
line-height: 60px;
background-color: #a0adb3;
color: #fff;
text-transform: uppercase;
font-size: 16px;
text-align: center;
font-family: 'Proxima-Nova-Regular';
text-decoration: none;
position: relative;
transition: 0.5s;
}
.button a:before {
content: '';
width: 0%;
height: 5px;
background-color: #a0adb3;
position: absolute;
top: -10px;
left: 0;
transition: 0.5s;
}
.button a:after {
content: '';
width: 0%;
height: 5px;
background-color: #a0adb3;
position: absolute;
bottom: -10px;
left: 100%;
transition: 0.5s;
}
.button a span:before {
content: '';
width: 5px;
height: 0%;
background-color: #a0adb3;
position: absolute;
bottom: 0;
left: -10px;
transition: 0.5s;
}
.button a span:after {
content: '';
width: 5px;
height: 0%;
background-color: #a0adb3;
position: absolute;
top: 0;
right: -10px;
transition: 0.5s;
}
.button a:hover {
background-color: #4b585e;
}
.button a:hover:before {
width: 100%;
left: 0;
}
.button a:hover:after {
width: 100%;
left: 0;
}
.button a:hover span:before {
height: 100%;
bottom: 0;
}
.button a:hover span:after {
height: 100%;
top: 0;
}
@media screen and (max-width: 767px) {
.button {
width: 150px;
}
.button a {
width: 150px;
height: 50px;
line-height: 50px;
font-size: 13px;
}
}
/* Top
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.top-section {
height: 100vh;
overflow:hidden;
position: relative;
text-align: center;
background: #e4e9eb;
}
.top-section-text-container {
height: 100vh;
width: 50%;
float: left;
display: table;
}
.top-section-text {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 30px;
}
.top-section-text h1 {
font-family: 'Didot-Bold';
font-size: 200px;
color: #fff;
position: absolute;
margin-left: -190px;
z-index: 1;
font-weight: 900;
letter-spacing: -5px;
}
h1.smaller {
font-size: 170px;
}
h1.smaller-smaller {
font-size: 115px;
letter-spacing: -5px;
}
.top-section-text h2 {
font-family: 'Proxima-Nova-Thin';
font-size: 35px;
text-transform: uppercase;
margin: 220px 0 0 0;
font-weight: bold;
line-height: 1.4;
color: #4b585e;
}
.top-section-text-pepe h2 {
text-transform: none;
margin: 240px 0 0 0;
}
.top-section-text-pepe h2 strong {
font-family: 'Didot-Bold';
}
h1.smaller-smaller + h2 {
margin: 150px 0 0 0;
}
.top-section-text p {
font-family: 'Proxima-Nova-Regular';
font-size: 18px;
text-transform: uppercase;
margin: 20px auto 50px auto;
line-height: 24px;
padding: 0;
width: 600px;
float: left;
letter-spacing: 0.035em;
color: #4b585e;
clear: both;
}
.top-section-address-text p {
text-transform: none;
}
.top-section-address-text a {
color: #4b585e;
text-decoration: none;
}
.top-section-address-text .button a {
color: #fff;
}
.top-section-address-text .button:nth-of-type(2) {
float: left;
}
.top-section-address-text .button:nth-of-type(2) a {
margin-left: 50px;
float: left;
}
.top-section-text .lineBreak {
width: 250px;
float: left;
margin: 25px 0 15px 0;
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none;
}
.top-section-text .lineBreak div {
background: #4b585e;
}
.top-image-container {
height: 100vh;
width: 50%;
float: left;
overflow: hidden;
}
.top-image-collection-container {
width: 100%;
}
.top-image-collection {
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
animation: collectionPageSlideShow 25s ease-out 0s;
-moz-animation: collectionPageSlideShow 25s ease-out 0s;
-webkit-animation: collectionPageSlideShow 25s ease-out 0s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.top-image-pepe-kitchen-collection-container {
background-image: url(../img/pepe-kitchen/lago-living-pepe-kitchen-collection.jpg);
}
.top-image-civico-12-collection-container {
background-image: url(../img/civico-12/lago-living-civico-12-collection.jpg);
}
.top-image-appunti-di-viaggio-collection-container {
background-image: url(../img/appunti-di-viaggio/lago-living-appunti-di-viaggio-collection.jpg);
}
@-moz-keyframes collectionPageSlideShow {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(1.2);
}
}
@-webkit-keyframes collectionPageSlideShow {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.2);
}
}
@keyframes collectionPageSlideShow {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
}
}
.top-image-collection-text {
width: 750px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -375px;
padding: 0 50px 50px 50px;
z-index: 2;
overflow: hidden;
}
.top-image-collection-text h1 {
font-family:'Didot-Roman';
font-size: 50px;
color: #4b585e;
text-align: center;
padding-top: 50px;
}
.top-image-collection-text h2 {
font-family: 'Proxima-Nova-Thin';
font-size: 25px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
padding-top: 15px;
}
.top-image-collection-text p {
font-family: 'Proxima-Nova-Thin';
font-size: 18px;
margin: 20px auto 0 auto;
line-height: 24px;
padding: 0 80px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
}
.top-image-collection-text span {
font-family: 'Proxima-Nova-Regular';
}
.top-image-collection-text .button {
margin: 30px auto 0 auto;
}
.top-image {
height: 100vh;
width: 130vh;
float: right;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
position: relative;
z-index: 1;
animation: collectionSlideShow 25s ease-out 0s;
-moz-animation: collectionSlideShow 25s ease-out 0s;
-webkit-animation: collectionSlideShow 25s ease-out 0s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.top-image-vaniglia {
background-image: url(../img/pepe-kitchen/vaniglia/lago-living-pepe-kitchen-vaniglia-01.jpg);
}
.top-image-zafferano {
background-image: url(../img/pepe-kitchen/zafferano/lago-living-pepe-kitchen-zafferano-01.jpg);
}
.top-image-ginepro {
background-image: url(../img/pepe-kitchen/ginepro/lago-living-pepe-kitchen-ginepro-01.jpg);
}
.top-image-liquirizia {
background-image: url(../img/pepe-kitchen/liquirizia/lago-living-pepe-kitchen-liquirizia-01.jpg);
}
.top-image-anice-stellato {
background-image: url(../img/pepe-kitchen/anice-stellato/lago-living-pepe-kitchen-anice-stellato-01.jpg);
}
.top-image-noce-moscata {
background-image: url(../img/pepe-kitchen/noce-moscata/lago-living-pepe-kitchen-noce-moscata-01.jpg);
}
.top-image-monday {
background-image: url(../img/civico-12/monday/lago-living-civico-12-monday-01.jpg);
}
.top-image-tuesday {
background-image: url(../img/civico-12/tuesday/lago-living-civico-12-tuesday-01.jpg);
}
.top-image-wednesday {
background-image: url(../img/civico-12/wednesday/lago-living-civico-12-wednesday-01.jpg);
}
.top-image-thursday {
background-image: url(../img/civico-12/thursday/lago-living-civico-12-thursday-01.jpg);
}
.top-image-friday {
background-image: url(../img/civico-12/friday/lago-living-civico-12-friday-01.jpg);
}
.top-image-saturday {
background-image: url(../img/civico-12/saturday/lago-living-civico-12-saturday-01.jpg);
}
.top-image-sunday {
background-image: url(../img/civico-12/sunday/lago-living-civico-12-sunday-01.jpg);
}
.top-image-technical-details {
background-image: url(../img/technical-details/lago-living-technical-details-01.jpg);
}
.top-image-download {
background-image: url(../img/lago-living-download-01.jpg);
}
.top-image-newsletter {
background-image: url(../img/lago-living-newsletter-01.jpg);
}
.top-image-brand {
background-image: url(../img/lago-living-brand-01.jpg);
}
.top-image-handcraft {
background-image: url(../img/lago-living-handcraft-01.jpg);
background-position: center left;
}
.top-image-design {
background-image: url(../img/lago-living-design-01.jpg);
}
.top-image-contacts {
background-image: url(../img/lago-living-contacts-map.jpg);
}
.top-image-territory {
background-image: url(../img/lago-living-territory-01.jpg);
}
.top-image-sole {
background-image: url(../img/appunti-di-viaggio/sole/lago-living-appunti-di-viaggio-sole-01.jpg);
}
.top-image-radici {
background-image: url(../img/appunti-di-viaggio/radici/lago-living-appunti-di-viaggio-radici-01.jpg);
}
.top-image-anima-mia {
background-image: url(../img/appunti-di-viaggio/anima-mia/lago-living-appunti-di-viaggio-anima-mia-01.jpg);
}
.top-image-radici {
background-image: url(../img/appunti-di-viaggio/radici/lago-living-appunti-di-viaggio-radici-01.jpg);
}
@-moz-keyframes collectionSlideShow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(200px);
}
}
@-webkit-keyframes collectionSlideShow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(200px);
}
}
@keyframes collectionSlideShow {
0% {
transform: translateX(0);
-ms-transform: translateX(0);
}
100% {
transform: translateX(200px);
-ms-transform: translateX(200px);
}
}
@media screen and (max-width: 1360px) {
.top-section-text h1 {
font-size: 170px;
letter-spacing: -5px;
}
h1.smaller {
font-size: 140px;
letter-spacing: -5px;
}
h1.smaller-smaller {
font-size: 95px;
letter-spacing: -5px;
}
.top-section-text h2 {
margin: 190px 80px 0 0;
font-size: 30px;
line-height: 1.1;
}
h1.smaller-smaller + h2 {
margin: 120px 0 0 0;
}
.top-section-text p {
margin: 20px 50px 50px auto;
width: auto;
font-size: 16px;
line-height: 22px;
}
}
@media screen and (max-width: 1140px) {
.top-section-text h1 {
font-size: 150px;
}
h1.smaller {
font-size: 120px;
}
h1.smaller-smaller {
font-size: 85px;
}
.top-section-text h2 {
margin: 170px 80px 0 0;
}
h1.smaller + h2 {
margin: 140px 80px 0 0;
}
h1.smaller-smaller + h2 {
margin: 100px 0 0 0;
}
.top-section-text p {
font-size: 14px;
line-height: 20px;
}
.top-image-collection-text {
width: 650px;
margin: -225px 0 0 -325px;
}
}
@media screen and (max-width: 1024px) {
.top-section-address-text .button:nth-of-type(1) {
display: none;
}
.top-section-address-text .button:nth-of-type(2) {
float: none;
}
.top-section-address-text .button:nth-of-type(2) a {
margin-left: 0;
}
}
@media screen and (max-width: 1023px) {
.top-image-container {
height: 100vh;
width: 100%;
float: left;
overflow: hidden;
}
.top-image {
width: 100%;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
-o-animation-fill-mode: none;
-moz-animation-fill-mode: none;
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
}
.top-section-text-container {
width: 100%;
position: absolute;
z-index: 1;
}
.top-section-text {
width: 100%;
padding-left: 0;
text-align: center;
}
.top-section-text h1 {
margin: 30px 0 0 0;
position: relative;
text-shadow: 0 0 5px rgba(0,0,0,0.1),
0 0 10px rgba(0,0,0,0.1),
0 0 15px rgba(0,0,0,0.1),
0 0 20px rgba(0,0,0,0.1),
0 0 30px rgba(0,0,0,0.1),
0 0 40px rgba(0,0,0,0.1),
0 0 50px rgba(0,0,0,0.1),
0 0 75px rgba(0,0,0,0.1);
}
.top-section-text h2 {
font-family: 'Proxima-Nova-Regular';
margin: 25px 0 0 0;
color: #fff;
text-shadow: 0 0 5px rgba(0,0,0,0.2),
0 0 10px rgba(0,0,0,0.2),
0 0 15px rgba(0,0,0,0.2),
0 0 20px rgba(0,0,0,0.2),
0 0 30px rgba(0,0,0,0.2),
0 0 40px rgba(0,0,0,0.2),
0 0 50px rgba(0,0,0,0.2),
0 0 75px rgba(0,0,0,0.2);
}
.top-section-text p {
margin: 20px 0 50px auto;
color: #fff;
font-size: 16px;
padding: 10px 100px;
overflow: hidden;
float: none;
text-shadow: 0 0 5px rgba(0,0,0,0.2),
0 0 10px rgba(0,0,0,0.2),
0 0 15px rgba(0,0,0,0.2),
0 0 20px rgba(0,0,0,0.2),
0 0 30px rgba(0,0,0,0.2),
0 0 40px rgba(0,0,0,0.2),
0 0 50px rgba(0,0,0,0.2),
0 0 75px rgba(0,0,0,0.2);
}
.top-section-text a {
color: #fff;
}
h1.smaller + h2,
h1.smaller-smaller + h2 {
margin: 25px auto 0 auto;
}
.top-section-text .lineBreak {
float: none;
margin: 25px auto 15px auto;
}
.top-section-text .lineBreak div {
background: #fff;
}
.top-section-text .button {
float: none;
margin: 0 auto;
}
.top-image-collection-text {
width: 500px;
margin: -175px 0 0 -250px;
padding: 25px;
height: auto;
}
.top-image-collection-text h1 {
padding-top: 0;
font-size: 35px;
}
.top-section-address-text .button:nth-of-type(2) {
display: none;
}
}
@media screen and (max-width: 767px) {
.top-section-text h1 {
font-size: 100px;
letter-spacing: -2px;
margin: 50px auto 0 auto;
}
.top-section-text p,
.top-section-text .lineBreak {
display: none;
}
.top-section-text .button {
float: none;
margin: 50px auto 0 auto;
}
.top-image-collection-text {
width: 400px;
margin: -155px 0 0 -200px;
}
.top-image-collection-text h1 {
font-size: 30px;
}
.top-image-collection-text p {
padding: 0;
}
.top-section-address-text p {
display: block;
padding: 10px 0;
}
}
@media screen and (max-width: 480px) {
.top-section-text h1 {
font-size: 60px;
padding: 0 25px;
}
.top-section-text h2 {
font-size: 25px;
padding: 13px 25px;
overflow: hidden;
}
.top-section-text .button {
margin: 25px auto 0 auto;
}
.top-image-collection-text {
width: 100%;
margin: -115px 0 0 -50%;
background: none;
}
.top-image-collection-text h1 {
color: #FFF;
font-size: 25px;
text-shadow: 0 0 5px rgba(0,0,0,0.1),
0 0 10px rgba(0,0,0,0.1),
0 0 15px rgba(0,0,0,0.1),
0 0 20px rgba(0,0,0,0.1),
0 0 30px rgba(0,0,0,0.1),
0 0 40px rgba(0,0,0,0.1),
0 0 50px rgba(0,0,0,0.1),
0 0 75px rgba(0,0,0,0.1);
}
.top-image-collection-text h2 {
font-family: 'Proxima-Nova-Regular';
color: #fff;
font-size: 20px;
overflow: hidden;
padding: 10px 0;
text-shadow: 0 0 5px rgba(0,0,0,0.2),
0 0 10px rgba(0,0,0,0.2),
0 0 15px rgba(0,0,0,0.2),
0 0 20px rgba(0,0,0,0.2),
0 0 30px rgba(0,0,0,0.2),
0 0 40px rgba(0,0,0,0.2),
0 0 50px rgba(0,0,0,0.2),
0 0 75px rgba(0,0,0,0.2);
}
.top-image-collection-text p {
display: none;
}
.top-section-address-text p {
display: block;
}
}
@media screen and (max-height: 550px) {
.top-image-collection-text {
width: 100%;
margin: -115px 0 0 -50%;
background: none;
}
.top-image-collection-text h1 {
color: #FFF;
font-size: 25px;
text-shadow: 0 0 5px rgba(0,0,0,0.1),
0 0 10px rgba(0,0,0,0.1),
0 0 15px rgba(0,0,0,0.1),
0 0 20px rgba(0,0,0,0.1),
0 0 30px rgba(0,0,0,0.1),
0 0 40px rgba(0,0,0,0.1),
0 0 50px rgba(0,0,0,0.1),
0 0 75px rgba(0,0,0,0.1);
}
.top-image-collection-text h2 {
font-family: 'Proxima-Nova-Regular';
color: #fff;
font-size: 20px;
overflow: hidden;
padding: 10px 0;
text-shadow: 0 0 5px rgba(0,0,0,0.2),
0 0 10px rgba(0,0,0,0.2),
0 0 15px rgba(0,0,0,0.2),
0 0 20px rgba(0,0,0,0.2),
0 0 30px rgba(0,0,0,0.2),
0 0 40px rgba(0,0,0,0.2),
0 0 50px rgba(0,0,0,0.2),
0 0 75px rgba(0,0,0,0.2);
}
}
@media screen and (max-width: 320px) {
.top-section-text h1 {
font-size: 40px;
}
.top-section-text h2 {
font-size: 20px;
margin: 25px auto 0 auto;
}
h1.smaller + h2,
h1.smaller-smaller + h2 {
margin: 25px auto 0 auto;
}
}
/* Pages
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.page-section {
width: 100%;
background: #e4e9eb;
overflow: hidden;
}
.page-section img {
display: block;
}
.page-section-left-50 {
float: left;
height: 600px;
width: 50%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.page-section-left-50-products {
background-size: contain;
}
.page-section-left-50-vaniglia {
background-image: url(../img/pepe-kitchen/vaniglia/lago-living-pepe-kitchen-vaniglia-03.jpg);
}
.page-section-left-50-zafferano {
background-image: url(../img/pepe-kitchen/zafferano/lago-living-pepe-kitchen-zafferano-03.jpg);
}
.page-section-left-50-liquirizia {
background-image: url(../img/pepe-kitchen/liquirizia/lago-living-pepe-kitchen-liquirizia-03.jpg);
}
.page-section-left-50-ginepro {
background-image: url(../img/pepe-kitchen/ginepro/lago-living-pepe-kitchen-ginepro-03.jpg);
}
.page-section-left-50-anice-stellato {
background-image: url(../img/pepe-kitchen/anice-stellato/lago-living-pepe-kitchen-anice-stellato-03.jpg);
}
.page-section-left-50-noce-moscata {
background-image: url(../img/pepe-kitchen/noce-moscata/lago-living-pepe-kitchen-noce-moscata-03.jpg);
}
.page-section-left-50-monday {
background-image: url(../img/civico-12/monday/lago-living-civico-12-monday-03.jpg);
}
.page-section-left-50-tuesday {
background-image: url(../img/civico-12/tuesday/lago-living-civico-12-tuesday-03.jpg);
}
.page-section-left-50-wednesday {
background-image: url(../img/civico-12/wednesday/lago-living-civico-12-wednesday-03.jpg);
}
.page-section-left-50-thursday {
background-image: url(../img/civico-12/thursday/lago-living-civico-12-thursday-03.jpg);
}
.page-section-left-50-friday {
background-image: url(../img/civico-12/friday/lago-living-civico-12-friday-03.jpg);
}
.page-section-right-50-saturday {
background-image: url(../img/civico-12/saturday/lago-living-civico-12-saturday-03.jpg);
}
.page-section-left-50-sunday {
background-image: url(../img/civico-12/sunday/lago-living-civico-12-sunday-03.jpg);
}
.page-section-left-50-handcraft-01 {
background-image: url(../img/lago-living-handcraft-03.jpg);
}
.page-section-left-50-handcraft-02 {
background-image: url(../img/lago-living-handcraft-05.jpg);
}
.page-section-left-50-design-01 {
background-image: url(../img/lago-living-design-03.jpg);
}
.page-section-left-50-design-02 {
background-image: url(../img/lago-living-design-04.jpg);
}
.page-section-left-50-territory-01 {
background-image: url(../img/lago-living-territory-03.jpg);
}
.page-section-left-50-territory-02 {
background-image: url(../img/lago-living-territory-04.jpg);
}
.page-section-left-50-sole {
background-image: url(../img/appunti-di-viaggio/sole/lago-living-appunti-di-viaggio-sole-03.jpg);
background-size: cover;
}
.page-section-left-50-anima-mia {
background-image: url(../img/appunti-di-viaggio/anima-mia/lago-living-appunti-di-viaggio-anima-mia-03.jpg);
background-size: cover;
}
.page-section-left-50-radici {
background-image: url(../img/appunti-di-viaggio/radici/lago-living-appunti-di-viaggio-radici-03.jpg);
background-size: cover;
}
.page-section-left-50-brand-01 {
background-image: url(../img/lago-living-brand-03.jpg);
}
.page-section-left-50-brand-02 {
background-image: url(../img/lago-living-brand-05.jpg);
}
.page-section-left-50 img {
width: 100%;
}
.page-section-right-50 {
float: left;
height: 600px;
width: 50%;
background: #fff;
display: table;
}
.page-section-text {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 0 100px 0 50px;
}
.page-section-text h1 {
font-family: 'Proxima-Nova-Thin';
font-size: 35px;
line-height: 40px;
color: #4b585e;
}
.page-section-text p {
font-family: 'Proxima-Nova-Regular';
font-size: 18px;
margin: 20px auto 0 auto;
line-height: 24px;
padding: 0;
letter-spacing: 0.035em;
color: #697b84;
}
.page-section-100 {
position: relative;
height: 100vh;
overflow: hidden;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.page-section-100-vaniglia {
background-image: url(../img/pepe-kitchen/vaniglia/lago-living-pepe-kitchen-vaniglia-02.jpg);
}
.page-section-100-zafferano {
background-image: url(../img/pepe-kitchen/zafferano/lago-living-pepe-kitchen-zafferano-02.jpg);
}
.page-section-100-ginepro {
background-image: url(../img/pepe-kitchen/ginepro/lago-living-pepe-kitchen-ginepro-02.jpg);
}
.page-section-100-liquirizia {
background-image: url(../img/pepe-kitchen/liquirizia/lago-living-pepe-kitchen-liquirizia-02.jpg);
}
.page-section-100-anice-stellato {
background-image: url(../img/pepe-kitchen/anice-stellato/lago-living-pepe-kitchen-anice-stellato-02.jpg);
}
.page-section-100-noce-moscata {
background-image: url(../img/pepe-kitchen/noce-moscata/lago-living-pepe-kitchen-noce-moscata-02.jpg);
}
.page-section-100-handcraft {
background-image: url(../img/lago-living-handcraft-02.jpg);
}
.page-section-100-territory {
background-image: url(../img/lago-living-territory-02.jpg);
overflow: hidden;
height: auto;
}
.page-section-100-design {
background-image: url(../img/lago-living-design-02.jpg);
}
.page-section-100-brand-01 {
background-image: url(../img/lago-living-brand-02.jpg);
}
.page-section-100-brand-02 {
background-image: url(../img/lago-living-brand-04.jpg);
}
.page-section-100-monday {
background-image: url(../img/civico-12/monday/lago-living-civico-12-monday-02.jpg);
}
.page-section-100-saturday {
background-image: url(../img/civico-12/saturday/lago-living-civico-12-saturday-02.jpg);
}
.page-section-100-sunday {
background-image: url(../img/civico-12/sunday/lago-living-civico-12-sunday-02.jpg);
}
.page-section-100-thursday {
background-image: url(../img/civico-12/thursday/lago-living-civico-12-thursday-02.jpg);
}
.page-section-100-tuesday {
background-image: url(../img/civico-12/tuesday/lago-living-civico-12-tuesday-02.jpg);
}
.page-section-100-wednesday {
background-image: url(../img/civico-12/wednesday/lago-living-civico-12-wednesday-02.jpg);
}
.page-section-100-friday {
background-image: url(../img/civico-12/friday/lago-living-civico-12-friday-02.jpg);
}
.page-section-100-sole {
background-image: url(../img/appunti-di-viaggio/sole/lago-living-appunti-di-viaggio-sole-02.jpg);
}
.page-section-100-radici {
background-image: url(../img/appunti-di-viaggio/radici/lago-living-appunti-di-viaggio-radici-02.jpg);
}
.page-section-100-anima-mia {
background-image: url(../img/appunti-di-viaggio/anima-mia/lago-living-appunti-di-viaggio-anima-mia-02.jpg);
}
.page-section-dark {
width: 100%;
height: 650px;
display: table;
}
.page-section-dark h1 {
font-family:'Didot-Roman';
font-size: 90px;
color: #fff;
display: table-cell;
vertical-align: middle;
padding-left: 100px;
opacity: 0.3;
}
.vaniglia-section-dark {
background: #303f4f url(../img/pepe-kitchen/vaniglia/lago-living-pepe-kitchen-vaniglia-dark.jpg) center right no-repeat;
background-size: contain;
}
.zafferano-section-dark {
background: #303f4f url(../img/pepe-kitchen/zafferano/lago-living-pepe-kitchen-zafferano-dark.jpg) center right no-repeat;
background-size: contain;
}
.ginepro-section-dark {
background: #303f4f url(../img/pepe-kitchen/ginepro/lago-living-pepe-kitchen-ginepro-dark.jpg) center right no-repeat;
background-size: contain;
}
.liquirizia-section-dark {
background: #303f4f url(../img/pepe-kitchen/liquirizia/lago-living-pepe-kitchen-liquirizia-dark.jpg) center right no-repeat;
background-size: contain;
}
.anice-stellato-section-dark {
background: #303f4f url(../img/pepe-kitchen/anice-stellato/lago-living-pepe-kitchen-anice-stellato-dark.jpg) center right no-repeat;
background-size: contain;
}
.noce-moscata-section-dark {
background: #303f4f url(../img/pepe-kitchen/noce-moscata/lago-living-pepe-kitchen-noce-moscata-dark.jpg) center right no-repeat;
background-size: contain;
}
.monday-section-dark {
background: #303f4f url(../img/civico-12/monday/lago-living-civico-12-monday-dark.jpg) center right no-repeat;
background-size: 50%;
}
.tuesday-section-dark {
background: #303f4f url(../img/civico-12/tuesday/lago-living-civico-12-tuesday-dark.jpg) center right no-repeat;
background-size: 50%;
}
.wednesday-section-dark {
background: #303f4f url(../img/civico-12/wednesday/lago-living-civico-12-wednesday-dark.jpg) center right no-repeat;
background-size: contain;
}
.thursday-section-dark {
background: #303f4f url(../img/civico-12/thursday/lago-living-civico-12-thursday-dark.jpg) center right no-repeat;
background-size: 50%;
}
.friday-section-dark {
background: #303f4f url(../img/civico-12/friday/lago-living-civico-12-friday-dark.jpg) center right no-repeat;
background-size: 52.05%;
}
.saturday-section-dark {
background: #303f4f url(../img/civico-12/saturday/lago-living-civico-12-saturday-dark.jpg) center right no-repeat;
background-size: 60%;
}
.sunday-section-dark {
background: #303f4f url(../img/civico-12/sunday/lago-living-civico-12-sunday-dark.jpg) center right no-repeat;
background-size: 55%;
}
.handcraft-section-dark {
background: #303f4f url(../img/lago-living-handcraft-04.jpg) center right no-repeat;
background-size: 55%;
}
.sole-section-dark {
background: #303f4f url(../img/appunti-di-viaggio/sole/lago-living-appunti-di-viaggio-sole-dark.jpg) center right no-repeat;
background-size: 50%;
}
.anima-mia-section-dark {
background: #303f4f url(../img/appunti-di-viaggio/anima-mia/lago-living-appunti-di-viaggio-anima-mia-dark.jpg) center right no-repeat;
background-size: contain;
}
.radici-section-dark {
background: #303f4f url(../img/appunti-di-viaggio/radici/lago-living-appunti-di-viaggio-radici-dark.jpg) center right no-repeat;
background-size: contain;
}
.page-section-100 img {
width: 100%;
}
.page-section-100-text {
position: absolute;
width: 500px;
padding: 50px;
right: 50px;
top: 50px;
background: rgba(0, 0, 0, 0.3);
}
.page-section-brand-text {
left: 80px;
top: 80px;
}
.page-section-100-territory .page-section-brand-text {
position: relative;
margin: 80px 0 80px 80px;
left: 0;
right: 0;
top: 0;
}
.page-section-100-text h1 {
font-family: 'Didot-Bold';
font-size: 26px;
font-weight: bold;
line-height: 35px;
color: #FFF;
text-align: center;
text-transform: uppercase;
font-weight: 900;
}
.page-section-100-text h2 {
font-family: 'Proxima-Nova-Regular';
font-size: 18px;
margin: 0 auto;
line-height: 24px;
padding-top: 5px;
letter-spacing: 0.035em;
color: #FFF;
text-align: center;
}
.page-section-brand-text h1,
.page-section-brand-text h2 {
text-align: left;
}
.page-section-subscribe {
width: 100%;
height: 650px;
background: #FFF;
display: table;
}
.page-section-subscribe-text {
width: 750px;
height: 450px;
margin: 100px auto 0 auto;
border: 10px solid #e4e9eb;
}
.page-section-subscribe h1 {
font-family:'Didot-Roman';
font-size: 50px;
color: #4b585e;
text-align: center;
padding: 50px 50px 0 50px;
}
.page-section-subscribe h2 {
font-family: 'Proxima-Nova-Thin';
font-size: 25px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
padding-top: 15px;
}
.page-section-subscribe p {
font-family: 'Proxima-Nova-Thin';
font-size: 18px;
margin: 20px auto 0 auto;
line-height: 24px;
padding: 0 80px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
}
.page-section-subscribe span {
font-family: 'Proxima-Nova-Regular';
}
.page-section-subscribe .button {
margin: 30px auto 0 auto;
}
.mobile-downloads .button {
margin: 125px auto 0 auto;
}
@media screen and (max-width: 1200px) {
.page-section-left-50,
.page-section-right-50 {
height: 500px;
}
.page-section-text {
padding: 0 50px 0 50px;
}
.page-section-text h1 {
font-size: 25px;
line-height: 30px;
}
.page-section-text p {
font-size: 16px;
line-height: 22px;
}
.page-section-dark {
height: 500px;
}
.page-section-dark h1 {
font-size: 70px;
}
}
@media screen and (max-width: 1024px) {
.page-section-dark h1 {
font-size: 60px;
}
}
@media screen and (max-width: 1023px) {
.page-section-left-50 {
height: 400px;
width: 100%;
background-size: contain;
}
.page-section-left-50-brand-01,
.page-section-left-50-handcraft-01,
.page-section-left-50-design-01,
.page-section-left-50-territory-01 {
display: none;
}
.page-section-left-50-brand-02,
.page-section-left-50-handcraft-02,
.page-section-left-50-design-02,
.page-section-left-50-territory-02 {
background-size: cover;
}
.page-section-right-50 {
width: 100%;
height: auto;
}
.page-section-left-50-sole,
.page-section-left-50-anima-mia,
.page-section-left-50-radici {
display: none;
}
.page-section-100 {
height: 500px;
}
.page-section-100-text {
width: 400px;
padding: 25px;
right: 50%;
margin-right: -200px;
top: 25px;
}
.page-section-text {
padding: 0;
width: 80%;
display: block;
float: none;
margin: 50px auto;
}
.page-section-dark {
height: 400px;
background-size: contain !important;
}
.page-section-dark h1 {
opacity: 0.5;
font-size: 50px;
text-align: center;
padding: 0 25px;
}
.page-section-subscribe {
height: auto;
}
.page-section-subscribe-text {
width: 80%;
height: auto;
overflow: hidden;
padding: 50px;
margin: 50px auto;
}
.page-section-subscribe h1 {
font-size: 35px;
padding: 0;
line-height: 40px;
}
.page-section-subscribe h2 {
font-size: 20px;
}
.page-section-subscribe p {
padding: 0;
font-size: 16px;
line-height: 22px;
}
.page-section-100-brand-01,
.page-section-100-brand-02,
.page-section-100-handcraft,
.page-section-100-territory,
.page-section-100-design {
overflow: hidden;
height: auto;
}
.page-section-100-text {
position: relative;
left: auto;
right: auto;
top: auto;
margin: 80px auto;
width: 80%;
float: none;
background: rgba(0, 0, 0, 0.5);
}
.page-section-100-territory .page-section-brand-text {
position: relative;
margin: 80px auto;
left: 0;
top: 0;
}
}
@media screen and (max-width: 767px) {
.page-section-100 {
height: 400px;
}
.page-section-100-text {
margin: 25px auto 0 auto;
}
.page-section-dark {
display: none;
}
.video-section {
display: block;
height: 400px;
}
.video-section-handcraft {
background: url(../video/lago-living-handcraft.jpg) !important;
background-size: cover !important;
background-position: 50% !important;
}
.video-section-design {
background: url(../video/lago-living-design.jpg) !important;
background-size: cover !important;
background-position: 50% !important;
}
.video-section-territory {
background: url(../video/lago-living-territory.jpg) !important;
background-size: cover !important;
background-position: 50% !important;
}
.video-section h1 {
position: relative;
}
.page-section-100-brand-01,
.page-section-100-brand-02,
.page-section-100-handcraft,
.page-section-100-territory,
.page-section-100-design {
background: #252c2f;
height: auto;
}
.page-section-100-text {
background: #252c2f;
}
.page-section-brand-text,
.page-section-100-territory .page-section-brand-text {
margin: 25px auto;
width: 85%;
}
.page-section-left-50-brand-01,
.page-section-left-50-handcraft-01,
.page-section-left-50-design-01,
.page-section-left-50-territory-01 {
display: block;
background-size: cover;
}
}
@media screen and (max-width: 480px) {
.page-section-100 {
height: 300px;
}
.page-section-100-brand-01,
.page-section-100-brand-02,
.page-section-100-handcraft,
.page-section-100-territory,
.page-section-100-design {
height: auto;
}
.page-section-100-text {
margin: 0 auto;
width: 100%;
}
.page-section-100-text h1 {
font-size: 20px;
line-height: 25px;
}
.page-section-100-text h2 {
font-size: 16px;
}
.page-section-brand-text {
margin: 25px auto;
width: 80%;
}
}
@media screen and (max-width: 479px) {
.page-section-left-50,
.video-section {
height: 300px;
}
.page-section-subscribe-text {
width: 90%;
padding: 25px;
}
.page-section-subscribe h1 {
text-align: left;
font-size: 25px;
line-height: 30px;
}
.page-section-subscribe h2 {
text-align: left;
}
.page-section-subscribe p {
text-align: left;
}
}
/* Video
================================================== */
.video-section {
width: 100%;
height: auto;
overflow: hidden;
}
.video-section video {
top: 40% !important;
}
.video-format {
width: 100%;
margin-top: -100px;
}
.video-section h1 {
display: inherit;
position: absolute;
top: 35%;
}
@media screen and (max-width: 1024px) {
.video-section {
height: 400px;
}
.video-section h1 {
display: inherit;
position: relative;
top: 35%;
}
}
@media screen and (max-width: 479px) {
.page-section-subscribe .wrapper-content {
text-align: left;
}
}
/* Responsive Grid
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
page-section-grid {
background: #e4e9eb;
overflow: hidden;
}
.page-section-technical-grid-container {
background: #FFF;
padding-top: 80px;
overflow: hidden;
}
.page-section-technical-grid-container h1 {
font-family:'Didot-Roman';
font-size: 50px;
color: #4b585e;
text-align: center;
}
.page-section-technical-grid-container h2 {
font-family: 'Proxima-Nova-Thin';
font-size: 25px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
padding-top: 15px;
text-align: center;
}
.page-section-technical-grid-container p {
font-family: 'Proxima-Nova-Regular';
font-size: 16px;
line-height: 20px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
padding-top: 15px;
width: 650px;
float: none;
margin: 0 auto;
}
.page-section-technical-grid {
width: 1200px;
margin: 25px auto 50px auto;
float: none;
height: 520px;
border-bottom: 1px solid #CCC;
position: relative;
}
.page-section-little-technical-grid {
height: 320px;
}
.page-section-little-technical-grid:last-of-type {
border-bottom: none;
}
.grid-item {
position: relative;
float: left;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
}
.page-section-technical-grid .grid-item,
.page-section-little-technical-grid .grid-item {
cursor: default;
}
.grid-item img {
position: relative;
float: left;
box-sizing: border-box;
cursor: pointer;
opacity: 1;
width: 100%;
overflow: hidden;
}
.page-section-technical-grid .grid-item img,
.page-section-little-technical-grid .grid-item img {
cursor: default;
}
.grid-item-shadow {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: rgba(0, 0, 0, 0.3);
display: table;
}
.page-section-technical-antiquing-grid .grid-item-shadow {
background: url(../img/technical-details/degree-of-antiquing/civico-12-degree-of-antiquing-shadow.png);
background-size: contain;
}
.technical-polishing-grid .grid-item-shadow {
background: url(../img/technical-details/degree-of-polishing/civico-12-degree-of-polishing-shadow.png);
background-size: contain;
}
.grid-item-shadow span {
font-family: 'Proxima-Nova-Regular';
font-size: 18px;
line-height: 10px;
letter-spacing: 0.035em;
color: #FFF;
text-align: center;
text-transform: uppercase;
display: table-cell;
vertical-align: middle;
}
.page-section-technical-grid .grid-item-shadow span {
padding: 10px;
}
.page-section-technical-grid .grid-item-shadow span {
line-height: 18px;
}
.grid-item-shadow span::after {
content: url(../img/icons/look.svg);
display: block;
margin: 50px auto 0 auto;
width: 55px;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.grid-item-shadow:hover {
opacity: 1;
}
.grid-item-shadow:hover span::after {
margin: 0 auto;
}
.monday-grid-item-01 {
width: 66.67%;
height: 40vh;
}
.monday-grid-item-02 {
width: 33.33%;
height: 40vh;
}
.monday-grid-item-03 {
width: 33.33%;
height: 60vh;
}
.monday-grid-item-04 {
width: 25%;
height: 60vh;
}
.monday-grid-item-05 {
width: 41.67%;
height: 30vh;
}
.monday-grid-item-06 {
width: 41.67%;
height: 30vh;
}
.technical-detail-grid-item {
width: 16.66%;
height: 197px;
border: 1px solid #FFF;
}
@media screen and (max-width: 1280px) {
.page-section-technical-grid {
width: 980px;
height: 400px;
}
.technical-detail-grid-item {
height: 161px;
}
..page-section-little-technical-grid {
height: 230px;
}
.page-section-technical-grid .grid-item-shadow span {
font-size: 16px;
}
.grid-item-shadow span::after {
content: url(../img/icons/look.svg);
display: block;
margin: 50px auto 0 auto;
width: 55px;
}
}
@media screen and (max-width: 1023px) {
.page-section-technical-grid {
width: 740px;
height: 320px;
}
.page-section-little-technical-grid {
height: 200px;
}
.technical-detail-grid-item {
height: 121px;
}
.page-section-technical-grid .grid-item-shadow span {
font-size: 12px;
padding: 10px 5px;
}
.page-section-technical-grid .grid-item-shadow span::after {
content: url(../img/icons/look-mobile.svg);
width: 35px;
}
.page-section-technical-grid-container h1 {
font-size: 35px;
}
}
@media screen and (max-width: 767px) {
.monday-grid-item-01,
.monday-grid-item-02,
.monday-grid-item-03,
.monday-grid-item-04 {
height: 160px;
}
.monday-grid-item-05,
.monday-grid-item-06 {
height: 80px;
}
.grid-item-shadow span::after {
content: url(../img/icons/look-mobile.svg);
width: 35px;
}
.page-section-technical-grid {
width: 90%;
height: auto;
overflow: hidden;
padding-bottom: 80px;
}
.page-section-little-technical-grid {
height: auto;
overflow: hidden;
}
.technical-detail-grid-item {
width: 50%;
height: 250px;
}
.page-section-technical-grid-container p {
width: 95%;
text-align: left;
}
.page-section-technical-grid-container h1 {
font-size: 25px;
padding: 0 25px;
}
.page-section-technical-grid-container h2 {
font-size: 20px;
padding:15px 25px 0 25px;
}
}
@media screen and (max-width: 480px) {
.technical-detail-grid-item {
height: 175px;
}
}
@media screen and (max-width: 320px) {
.technical-detail-grid-item {
height: 125px;
}
}
/* Appunti Collection
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.appunti-collection {
width: 1000px;
margin: 0 auto;
float: none;
overflow: hidden;
}
.appunti-collection-page {
width: 1100px;
}
.appunti-collection-item {
width: 500px;
float: left;
padding-bottom: 10px;
}
.appunti-collection-page .appunti-collection-item {
width: 33.333333%;
}
.appunti-collection-item img {
margin: 0 auto;
float: none;
display: block;
}
.appunti-collection-page .appunti-collection-item img {
width: 80%;
}
.owl-theme .appunti-collection-item .button {
margin: 25px auto 0 auto;
}
@media screen and (max-width: 1023px) {
.appunti-collection {
width: 80%;
}
.appunti-collection-item {
width: 50%;
}
.appunti-collection-item img {
width: 80%;
}
}
@media screen and (max-width: 767px) {
.appunti-collection {
width: 100%;
}
.appunti-collection-page .appunti-collection-item {
width: 50%;
float: none;
margin: 0 auto 80px auto;
}
.appunti-collection-item img {
width: 90%;
}
}
@media screen and (max-width: 480px) {
.appunti-collection-page .appunti-collection-item {
width: 80%;
}
}
/* Contacts
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
/* Contacts Map
================================================== */
#map-container {
position: relative;
}
#map-consent-container {
position: relative;
background: url(../img/lago-living-contacts-map-consent.jpg) center center no-repeat;
background-size: auto;
width: 100%;
height: 100vh;
float: left;
}
.map-consent-button {
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -100px;
}
#map {
position: relative;
width: 100%;
height: 100vh;
float: left;
}
#zoom-in, #zoom-out {
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 30px;
position: fixed;
bottom: 45px;
right: 25px;
background-color: #a0adb3;
background-repeat: no-repeat;
background-size: 32px 64px;
background-image: url("../img/icons/map-controller.svg");
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#zoom-in:hover, #zoom-out:hover,
.no-touch #zoom-in:hover, .no-touch #zoom-out:hover {
background-color: #4b585e;
}
#zoom-in {
background-position: 50% 0;
bottom: 78px;
margin-bottom: 5px;
}
#zoom-out {
background-position: 50% -32px;
}
.gmnoprint a, .gmnoprint span {
display:none;
}
.gmnoprint div {
background:none !important;
}
.gm-style-cc {
display: none !important;
}
@media screen and (max-width: 1023px) {
#map-container {
position: relative;
background: url(../img/lago-living-mobile-map.jpg) center center;
background-size: cover;
width: 100%;
height: 100%;
}
#map,
.map-consent-button {
display: none;
}
}
/* Contacts Form
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.contacts-form-section {
background: #eef1f2;
}
.form-container {
position: relative;
margin: 0 auto;
padding: 0 100px 50px 100px;
overflow: hidden;
width: 1170px;
font-family: 'Proxima-Nova-Regular';
text-align: center;
}
.newsletter-form-container {
position: relative;
margin: 0 auto;
padding: 50px 0 0 0;
float: none;
width: 550px;
font-family: 'Proxima-Nova-Regular';
}
.book-form-container {
background: #e4e9eb;
}
.form-container p {
width: 600px;
margin: 0 auto 50px auto;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.035em;
color: #4b585e;
}
.form {
position: relative;
width: 550px;
margin-right: 90px;
float: left;
box-sizing: border-box;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.contacts-form-section .form {
width: 440px;
}
.newsletter-form-container .form {
margin-right: 0;
width: 550px;
}
.form:nth-of-type(2) {
margin-right: 0;
}
.form .input-container {
position: relative;
margin: 0 0 50px 0;
}
.newsletter-form-container .form .input-container {
margin: 0 0 40px 0;
}
.form .textarea {
margin: 0 0 33px 0;
}
.form .input-container input,
.form .input-container textarea {
outline: none;
z-index: 1;
position: relative;
background: #f8f9f9;
width: 100%;
height: 60px;
border: 0;
color: #4b585e;
font-size: 20px;
padding-left: 15px;
}
.form .input-container textarea {
height: 210px;
padding-top: 15px;
}
.form .input-container input:focus ~ label,
.form .input-container textarea:focus ~ label {
-webkit-transform: translate(-12%, -70%) scale(0.75);
transform: translate(-12%, -70%) scale(0.75);
}
.form .input-container input:focus ~ .bar:before, .form .input-container input:focus ~ .bar:after,
.form .input-container textarea:focus ~ .bar:before, .form .input-container textarea:focus ~ .bar:after {
width: 50%;
}
.form .input-container input:valid ~ label,
.form .input-container textarea:valid ~ label {
-webkit-transform: translate(-12%, -70%) scale(0.75);
transform: translate(-12%, -70%) scale(0.75);
}
.form .input-container label {
position: absolute;
top: 0;
z-index: 1;
left: 15px;
color: #4b585e;
font-size: 20px;
line-height: 60px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-webkit-backface-visibility: hidden;
}
.form .textarea .bar:before, .form .textarea .bar:after {
margin-top: -3px;
}
.form .input-container .bar:before, .form .input-container .bar:after {
content: '';
position: absolute;
background: #4b585e;
width: 0;
height: 2px;
-webkit-transition: .2s ease;
transition: .2s ease;
}
.form .input-container .bar:before {
left: 50%;
}
.form .input-container .bar:after {
right: 50%;
}
.form .input-container textarea .bar:before,
.form .input-container textarea .bar:after {
margin-top: -4px;
}
.form .button-container {
margin: 0 60px;
text-align: center;
}
input[type="submit"] {
display: block;
outline: 0;
cursor: pointer;
border-radius: 0;
line-height: 1;
text-transform: uppercase;
overflow: hidden;
border: none;
width: 200px;
height: 60px;
line-height: 60px;
background-color: #a0adb3;
color: #fff;
text-transform: uppercase;
font-size: 16px;
text-align: center;
text-decoration: none;
position: relative;
transition: 0.5s;
margin-top: 0px;
}
.newsletter-form-container input[type="submit"] {
top: -64px;
}
.button input[type="submit"]:hover {
background-color: #4b585e;
}
.button div {
width: 200px;
height: 60px;
line-height: 60px;
background: none;
color: #fff;
text-transform: uppercase;
font-size: 16px;
text-align: center;
text-decoration: none;
position: relative;
transition: 0.5s;
margin: 115px 0 0 240px;
}
.newsletter-form-container .button div {
background: none;
margin: 63px 0 0 350px;
}
.button div:before {
content: '';
width: 0%;
height: 5px;
background-color: #a0adb3;
position: absolute;
top: -10px;
left: 0;
transition: 0.5s;
}
.button div:after {
content: '';
width: 0%;
height: 5px;
background-color: #a0adb3;
position: absolute;
bottom: -10px;
left: 100%;
transition: 0.5s;
}
.button div span:before {
content: '';
width: 5px;
height: 0%;
background-color: #a0adb3;
position: absolute;
bottom: 0;
left: -10px;
transition: 0.5s;
}
.button div span:after {
content: '';
width: 5px;
height: 0%;
background-color: #a0adb3;
position: absolute;
top: 0;
right: -10px;
transition: 0.5s;
}
.button div:hover:before {
width: 100%;
left: 0;
}
.button div:hover:after {
width: 100%;
left: 0;
}
.button div:hover span:before {
height: 100%;
bottom: 0;
}
.button div:hover span:after {
height: 100%;
top: 0;
}
/* Anti Spam Trick */
.as-trick {
display:none;
position: absolute;
top: 0;
left: -300px;
}
@media screen and (max-width: 1170px) {
.form-container {
padding: 0 0 50px 0;
width: 550px;
}
.form,
.contacts-form-section .form,
.form:nth-of-type(2) {
width: 100%;
margin: 0 auto;
float: none;
}
.form-container p {
width: 100%;
}
.contacts-form-section .form .button div {
margin: 115px 0 0 340px;
}
.page-section-subscribe .newsletter-form-container .button div {
margin: 63px 0 0 180px;
}
}
@media screen and (max-width: 639px) {
.form-container {
width: 90%;
}
.contacts-form-section .form:nth-of-type(2) {
padding-bottom: 135px;
}
.contacts-form-section .form .button div {
margin: 100px 0 0 -100px;
left: 50%;
position: absolute;
}
.form-container p {
font-size: 16px;
line-height: 20px;
}
.form .input-container label {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.form-container {
width: 100%;
padding: 0 25px;
}
.contacts-form-section .form .button div {
margin: 80px 0 0 -100px;
}
.contacts-form-section .form:nth-of-type(2) {
padding-bottom: 150px;
}
}
/* Newsletter Page
================================================== */
.page-section-subscribe .wrapper-content {
margin: 40px auto 0 auto;
overflow: hidden;
}
.page-section-subscribe .input-container + p {
text-align: left;
padding: 0;
margin: 20px auto 10px auto;
}
.page-section-subscribe .button + p {
text-align: left;
padding: 15px 0 0 0;
margin: 0 auto;
clear: both;
}
.page-section-subscribe .button + p span {
font-size: 25px;
}
.page-section-subscribe .button + p a {
text-decoration: underline;
cursor: pointer;
}
.page-section-subscribe .newsletter-form-container .button div {
margin: 63px 0 0 180px;
}
.mobile-downloads .newsletter-form-container .button div {
margin: 90px 0 0 165px;
}
@media screen and (max-width: 767px) {
.newsletter-form-container {
overflow: hidden;
width: 100%;
}
.newsletter-form-container .form {
overflow: hidden;
padding-bottom: 125px;
}
.page-section-subscribe .newsletter-form-container .button {
width: 200px;
margin: 65px auto 0 auto;
}
.page-section-subscribe .newsletter-form-container .button div {
margin: 190px 0 0 -100px;
left: 50%;
position: absolute;
}
}
/* Privacy Checkbox
================================================== */
.icheckbox_square-green {
display: inline-block;
*display: inline;
vertical-align: middle;
padding: 0;
width: 33px;
height: 33px;
background: url(../img/icons/checkbox-unchecked.svg) no-repeat;
border: none;
cursor: pointer;
margin: 0 !important;
float: left;
}
.newsletter-form-container .icheckbox_square-green {
margin: 5px 0 !important;
clear: both;
}
.icheckbox_square-green {
background-position: 0 0;
}
.icheckbox_square-green.hover {
background: url(../img/icons/checkbox-unchecked.svg) no-repeat;
}
.icheckbox_square-green.checked {
background: url(../img/icons/checkbox-checked.svg) no-repeat;
}
.checkbox label {
color: #4b585e;
font-size: 16px;
width: 380px;
text-align: left;
margin: 2px 0 0 10px;
float: left;
padding: 0;
}
.newsletter-form-container .checkbox label {
margin: 15px 0 0 10px;
}
.checkbox label.error {
display: none !important;
}
.checkbox label a {
color: #4b585e;
text-decoration: underline;
cursor: pointer;
}
@media screen and (max-width: 639px) {
.icheckbox_square-green {
float: none;
}
.checkbox label {
margin: 10px auto 0 auto;
width: 100%;
text-align: center;
}
.newsletter-form-container .icheckbox_square-green {
float: left;
}
.newsletter-form-container label {
margin: 2px 0 0 10px;
width: auto;
text-align: left;
}
}
/* Valid / Invalid Inputs
================================================== */
.form label.error {
color: #F00;
text-align: right;
float: right;
font-size: 16px;
line-height: 30px;
top: 58px;
right: 0;
}
.form .input-container input:focus ~ label.error,
.form .input-container input:valid ~ label.error,
.form .input-container textarea:focus ~ label.error,
.form .input-container textarea:valid ~ label.error {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
label[for="message"].error {
top: 208px !important;
}
.form input.valid,
.form textarea.valid {
background: #f8f9f9 url(../img/icons/input-checked.gif) no-repeat right center;
background-size: 30px auto;
}
@media only screen and (max-width: 479px) {
.form label.error {
font-size: 11px;
}
}
/* Form Response
================================================== */
.form-response {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: #fff;
z-index: 20000;
}
.response-message {
font-family: 'Proxima-Nova-Thin';
font-size: 30px;
line-height: 35px;
text-align: center;
width: 800px;
color: #4b585e;
margin: 17.5% auto 0 auto;
padding: 0 20px;
}
#success {
width: 200px;
height: 200px;
margin: 0 auto 25px auto;
float: none;
background-image: url(../img/icons/form-success.svg);
}
#fail {
width: 200px;
height: 200px;
margin: 0 auto 25px auto;
float: none;
background-image: url(../img/icons/form-fail.svg);
}
@media only screen and (max-width: 1024px) {
.response-message {
width: 80%;
}
.response-message {
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
.response-message {
font-family: 'Proxima-Nova-Regular';
width: 90%;
}
.response-message {
margin: 10% auto 0 auto;
font-size: 20px;
line-height: 24px;
}
}
/* Home Footer
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.home-footer {
font-family: 'Proxima-Nova-Regular';
position: absolute;
bottom: 15px;
height: 50px;
width: 100%;
z-index: 6;
padding: 0 40px;
color: #fff;
font-size: 13px;
line-height: 50px;
float: left;
}
.home-footer a {
color: #fff;
text-decoration: none;
}
.home-footer a:hover {
text-decoration: underline;
}
.home-footer-address {
float: left;
}
.home-footer-italian-address,
.home-footer-english-address {
margin-top: -50px;
line-height: 20px;
}
.iubenda-home-policies {
padding-top: 6px;
display: block;
}
.home-footer-credits {
text-align: right;
float: right;
}
.alemans-home-logo {
position: absolute;
display: inline-block;
width: 61px;
height: 70px;
margin: -13px 0 0 -48px;
background-image: url(../img/alemans-logo.svg);
background-size: 80% 80%;
background-repeat: no-repeat;
}
.home-footer-address-it-text-fix {
letter-spacing: 0.007em;
}
.home-footer-address-en-text-fix {
letter-spacing: 0.02em;
}
.home-footer-desktop-space {
display: inline;
}
.home-footer-mobile-space {
display: none;
}
@media screen and (max-width: 1100px) {
.home-footer {
width: 100%;
left: 0;
margin-left: 0;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.home-footer-address-it-text-fix {
letter-spacing: inherit;
}
.home-footer-address-en-text-fix {
letter-spacing: inherit;
}
.home-footer-english-address {
margin-top: -30px;
}
.home-footer-italian-address {
margin-top: -30px;
}
.home-footer-address {
float: none;
}
.home-footer-credits {
display: none;
}
.pages-footer .home-footer-credits {
display: block;
}
.home-footer-desktop-space {
display: none;
}
.home-footer-mobile-space {
display: inline;
}
}
@media screen and (max-width: 910px) {
.home-footer-italian-address {
margin-top: -50px;
}
}
@media screen and (max-width: 891px) {
.home-footer-english-address {
margin-top: -50px;
}
}
@media screen and (max-width: 643px) {
.home-footer-english-address,
.home-footer-italian-address {
margin-top: -70px;
}
}
@media screen and (max-width: 523px) {
.home-footer-italian-address {
margin-top: -90px;
}
}
@media screen and (max-width: 503px) {
.home-footer-english-address {
margin-top: -90px;
}
}
@media screen and (max-width: 418px) {
.home-footer-italian-address {
margin-top: -110px;
}
}
@media screen and (max-width: 413px) {
.home-footer-english-address {
margin-top: -110px;
}
}
@media screen and (max-width: 374px) {
.home-footer-english-address {
margin-top: -130px;
}
}
@media screen and (max-width: 368px) {
.home-footer-italian-address {
margin-top: -130px;
}
}
@media screen and (max-width: 338px) {
.home-footer-english-address {
margin-top: -150px;
}
}
@media screen and (max-width: 330px) {
.home-footer-italian-address {
margin-top: -150px;
}
}
@media screen and (max-width: 323px) {
.home-footer-italian-address {
margin-top: -170px;
}
}
/* Pages Footer
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.pages-footer {
width: 100%;
overflow: hidden;
background: #343d42;
position: relative;
}
.pages-footer h1 {
font-family: 'Didot-Bold';
font-size: 50px;
color: #e4e9eb;
text-align: center;
padding-top: 50px;
}
.pages-footer h1 a {
color: #e4e9eb;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.pages-footer h1 a:hover {
color: #a9b9c0;
}
.pages-footer .home-footer {
position: relative;
z-index: 1;
left: auto;
width: 100%;
margin: 25px auto 0 auto;
line-height: 25px;
overflow: hidden;
height: auto;
}
.pages-footer .home-footer-address,
.pages-footer .home-footer-credits {
float: none;
margin: auto;
text-align: center;
}
.pages-footer .home-footer-address span {
color: #96a4ac;
}
.pages-footer .home-footer-credits {
margin: 50px auto 25px auto;
color: #96a4ac;
}
.pages-footer .home-footer-credits a {
color: #96a4ac;
}
.pages-footer .alemans-home-logo {
background-image: url(../img/alemans-pages-logo.svg);
}
.footer-menu,
.footer-submenu {
background: #252c2f;
box-shadow: inset 0 15px 30px -15px rgba(0,0,0,1);
width: 100%;
height: 80px;
}
.footer-menu nav,
.footer-submenu nav {
width: auto;
margin: auto;
}
.footer-menu nav ul,
.footer-submenu nav ul {
text-align: center;
}
.footer-menu nav ul li,
.footer-submenu nav ul li {
display: inline-block;
}
.footer-menu nav ul li a,
.footer-submenu nav ul li a {
font-family: 'Proxima-Nova-Thin';
font-size: 22px;
line-height: 80px;
margin: 20px;
display: inline;
color: #ccc;
text-align: center;
letter-spacing: 0,01em;
}
.footer-menu nav ul li a:hover {
color: #fff;
}
.footer-menu nav ul li a.current {
color: #596971;
cursor: default;
}
.footer-submenu {
box-shadow: none;
height: 50px;
border-top: 1px solid #343e42;
}
.footer-submenu nav ul li a {
font-family: 'Proxima-Nova-Bold';
font-size: 14px;
line-height: 50px;
margin: 20px;
display: inline;
color: #fff;
text-transform: uppercase;
}
.footer-submenu nav ul li a:hover {
color: #ccc;
}
.footer-submenu nav ul li a.current {
color: #596971;
cursor: default;
}
.footer-social-icons {
width: 135px;
float: none;
margin: 50px auto 15px auto;
overflow: hidden;
}
.pages-footer .alemans-home-logo {
margin: -23px 0 0 -48px;
}
.fb-like-button {
width: 167px;
position: absolute;
bottom: 40px;
right: 45px;
z-index: 2;
}
@media screen and (max-width: 1023px) {
.footer-menu nav ul li a,
.footer-submenu nav ul li a {
font-size: 16px;
margin: 20px 10px;
}
.fb-like-button {
position: relative;
bottom: auto;
right: auto;
width: 167px;
float: none;
margin: 50px auto 0 auto;
}
.footer-social-icons {
margin: 25px auto 15px auto;
}
}
@media screen and (max-width: 767px) {
.footer-menu,
.footer-submenu {
padding: 25px;
height: auto;
}
.footer-menu nav ul li a,
.footer-submenu nav ul li a {
line-height: 30px;
}
.pages-footer h1 {
font-size: 30px;
padding: 50px 25px 0 25px;
}
.pages-footer .home-footer-address,
.pages-footer .home-footer-credits {
padding: 25px 0;
margin: 0 auto;
}
}
@media screen and (max-width: 480px) {
.footer-menu,
.footer-submenu {
padding: 25px;
height: auto;
}
.footer-menu nav ul li,
.footer-submenu nav ul li {
display: list-item;
}
}
@media screen and (max-width: 400px) {
.pages-footer .home-footer-credits {
font-size: 11px
}
.pages-footer .alemans-home-logo {
margin: -16px 0 0 -40px;
background-size: 65% 65%;
}
}
/* Cookies Banner
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
#cookie-banner {
background: #fff;
padding: 22px 25px;
display: none;
position:fixed;
width:100%;
margin:0;
left:0;
bottom:0;
z-index: 10000;
}
#cookie-banner-info {
font-family: 'Proxima-Nova-Regular';
width: 820px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #272727;
text-align: left;
}
#cookie-banner-actions {
font-family: 'Proxima-Nova-Thin';
font-size: 18px;
letter-spacing: 0.05em;
color: #272727;
text-decoration: none;
float: right;
right: 70px;
position: absolute;
top: 54px;
text-transform: uppercase;
}
#cookie-banner-actions a:nth-of-type(1) {
color: #6b6b6b;
right: 160px;
}
#cookie-banner-actions a:nth-of-type(2) {
color: #272727;
margin-left: 25px;
}
#cookie-banner-actions a {
text-decoration: none;
}
#cookie-banner-actions a:hover {
text-decoration: underline;
}
@media screen and (max-width: 1200px) {
#cookie-banner {
padding: 22px 0;
}
#cookie-banner-info {
float: none;
text-align: center;
margin: 0 auto 15px auto;
}
#cookie-banner-actions {
float: none;
margin: 0 auto;
display: block;
position: relative;
right: inherit;
width: 276px;
top: 0;
font-size: 16px;
}
}
@media screen and (max-width: 900px) {
#cookie-banner-info {
width: 90%;
font-size: 12px;
}
}
/* Privacy Policy / Cookie Policy / Subscribe Wrappers
================================================== */
.privacy-wrapper,
.cookies-wrapper,
.subscribe-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
background: #fff;
z-index: -1;
opacity: 0;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
overflow: scroll;
}
.privacy-wrapper .frame,
.cookies-wrapper .frame,
.subscribe-wrapper .frame {
background: #252c2f;
}
.privacy-wrapper .frame-top,
.cookies-wrapper .frame-top,
.subscribe-wrapper .frame-top {
height: 18px !important;
}
.privacy-wrapper-page,
.cookies-wrapper-page {
width: 100%;
height: 100%;
position: fixed;
background: #fff;
overflow: scroll;
}
.privacy-wrapper-page {
z-index: 1;
}
.cookies-wrapper-page {
z-index: 2;
}
.show-overlay {
opacity: 1;
z-index: 20000;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.show-subscribe-overlay {
opacity: 1;
z-index: 19000;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.hide-overlay {
opacity: 0;
z-index: -1;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.privacy-wrapper button,
.cookies-wrapper button,,
.subscribe-wrapper button,
.privacy-wrapper-page button,
.cookies-wrapper-page button {
position: fixed;
}
.wrapper-content {
width: 700px;
margin: 80px auto 0 auto;
float: none;
padding-bottom: 100px;
}
@media only screen and (max-width: 1024px) {
.wrapper-content {
margin: 50px auto 0 auto;
width: 600px;
}
}
@media only screen and (max-width: 767px) {
.wrapper-content {
width: 80%;
}
}
/* Privacy Policy
================================================== */
.privacy-block {
width: 100%;
padding: 30px 0;
text-align: left;
text-transform: none;
}
.privacy-block:last-of-type {
border-bottom: none;
}
.privacy h1 {
font-family: 'Proxima-Nova-Bold';
text-align: left;
font-size: 28px;
letter-spacing: 0.05em;
line-height: 33px;
padding-top: 0;
color: #4b585e;
margin-bottom: 10px;
}
.privacy span {
color: #F39;
}
.privacy h2 {
font-family: 'Proxima-Nova-Bold';
font-size: 28px;
color: #4b585e;
letter-spacing: 0.05em;
margin-bottom: 10px;
line-height: 33px;
}
.privacy h3 {
font-family: 'Proxima-Nova-Bold';
font-size: 23px;
letter-spacing: 0.05em;
color: #4b585e;
padding-top: 28px;
line-height: inherit;
margin-bottom: 10px;
}
.privacy p {
font-family: 'Proxima-Nova-Regular';
font-size: 16px;
line-height: 23px;
color: #4b585e;
font-weight: normal;
}
.privacy a {
text-decoration: underline;
color: #4b585e;
}
.privacy p.privacy-footer {
text-align: right;
margin-top: 50px;
}
.privacy-block .accordion h4 a {
font-family: 'Proxima-Nova-Bold';
background: #eef1f2 url(../img/icons/privacy-arrow-closed.svg) 20px 23px no-repeat;
display: block;
padding: 20px 0 20px 65px;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 16px;
color: #4b585e;
margin: 25px 0;
text-decoration: none;
line-height: 17px;
}
.privacy-block .accordion h4 a:hover {
color: #4b585e;
cursor: pointer;
background-color: #dbe1e3;
}
.privacy-block .accordion h4.open a {
color: #4b585e;
background: #dbe1e3 url(../img/icons/privacy-arrow-opened.svg) 20px 23px no-repeat;
}
.accordion span {
font-family: 'Proxima-Nova-Bold';
color: #4b585e;
letter-spacing: 0.05em;
font-weight: 600;
font-size: 20px;
}
.accordion a {
color: #4b585e;
text-decoration: underline;
}
.faq-container .accordion a {
text-decoration: none !important;
}
.accordion-content-inner a {
color: #4b585e !important;
text-decoration: !important;
}
@media only screen and (max-width: 767px) {
.privacy-block {
padding: 30px 0 0 0;
}
.privacy h1,
.privacy h2,
.privacy h3 {
font-size: 20px;
line-height: 25px;
}
.privacy p {
font-size: 14px;
line-height: 21px;
}
.privacy-block .accordion h4 a {
padding: 20px 0 20px 55px;
line-height: 16px;
background: #eef1f2 url(../img/icons/privacy-arrow-closed.svg) 15px 23px no-repeat;
}
}
/* Subscribe Wrapper
================================================== */
.subscribe-wrapper .wrapper-content {
width: 700px;
margin: 80px auto 0 auto;
padding-bottom: 0;
margin: 80px auto;
}
.subscribe-wrapper .wrapper-content h1 {
text-align: center;
font-family: 'Didot-Roman';
font-size: 50px;
line-height: 50px;
color: #4b585e;
text-align: center;
}
.subscribe-wrapper .wrapper-content p {
font-family: 'Proxima-Nova-Thin';
font-size: 18px;
margin: 20px auto 0 auto;
line-height: 24px;
padding: 0 80px;
letter-spacing: 0.035em;
color: #4b585e;
text-align: center;
}
.subscribe-wrapper .wrapper-content .form p {
padding: 0;
text-align: left;
margin: 0 auto 10px auto;
}
.subscribe-wrapper .wrapper-content span {
font-family: 'Proxima-Nova-Regular';
}
.subscribe-wrapper .wrapper-content .button + p {
margin: 50px auto 0 auto;
padding-bottom: 80px;
}
.subscribe-wrapper .wrapper-content .button + p span {
font-size: 25px;
}
.subscribe-wrapper .wrapper-content .button + p a {
text-decoration: underline;
cursor: pointer;
}
@media only screen and (max-width: 1023px) {
.privacy-block .accordion h4 a {
font-size: 14px;
}
}
/* Close Button
================================================== */
.close-overlay {
width: 80px;
height: 80px;
position: fixed;
margin: 0;
padding: 0;
right: 5%;
top: 5%;
overflow: hidden;
border: none;
background: url(../img/icons/close-overlay.svg) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 1000;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
}
.close-overlay:hover {
-webkit-transform: scale(0.6);
-moz-transition: scale(0.6);
-o-transition: scale(0.6);
transition: scale(0.6);
}
@media screen and (max-width: 767px) {
.close-overlay {
top: 3%;
}
}
/* Downloads Page
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/
.download-container {
width: 100%;
overflow: hidden;
margin: 80px auto 0 auto;
float: none;
}
.download-item {
width: 50%;
float: left;
padding-bottom: 50px;
}
.download-item-image {
width: 100%;
overflow: hidden;
}
.download-item-image img {
width: 250px;
float: none;
margin: 0 auto;
}
.download-item-text {
width: 100%;
padding-bottom: 20px;
overflow: hidden;
}
.download-item-text h2 {
font-size: 18px;
padding: 15px 0 0 0;
line-height: 24px;
font-family: 'Proxima-Nova-Regular';
}
.download-item-text .button {
margin: 20px auto 0 auto;
}
.download-item-text .button a {
width: 130px;
height: 45px;
line-height: 46px;
display: block;
margin: 0 auto;
float: none;
}
.download-form-container {
padding-bottom: 80px;
overflow: hidden;
}
.download-form-container .button div {
margin: 115px 0 0 340px;
}
.download-form-container input[type="submit"] {
top: 0;
}
.mobile-download-form-container {
padding-top: 80px;
}
@media only screen and (max-width: 767px) {
.mobile-download-form-container .download-form-container {
padding-bottom: 0;
}
.download-container {
margin: 50px auto 0 auto;
}
.contacts-form-section h1,
.contacts-form-section p {
text-align: center;
}
.download-item {
width: 90%;
float: none;
margin: 0 auto;
}
.download-item-image img {
width: 200px;
}
.download-item-text h2 {
text-align: center;
}
.page-section-subscribe .download-form-container .button div {
margin: 25px 0 0 -100px;
}
.download-form-container input[type="submit"] {
top: 0;
}
.download-form-container .icheckbox_square-green {
float: none;
margin: 0 auto !important;
display: block;
}
.checkbox label {
margin: 10px auto 0 auto;
width: 100%;
text-align: center;
}
.form .textarea label {
font-size: 14px;
line-height: 18px;
padding-top: 10px;
}
.form .input-container textarea:focus ~ label,
.form .input-container textarea:valid ~ label {
-webkit-transform: translate(-12%, -120%) scale(0.75);
transform: translate(-12%, -120%) scale(0.75);
padding-top: 0;
}
}