* {
box-sizing: border-box; }
html, body {
background: #FFFFF3;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 0;
}
img {
border-width: 0;
display: block;
margin: 0;
padding: 0;
vertical-align: bottom;
}
img:hover {
margin-bottom: 20px;
}
a {
text-decoration: none;
color: inherit; }
a:hover {
color: #e6282d;
text-decoration: underline; }
.red {
color: #e6282d; }
.upper {
text-transform: uppercase; }
.button {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
background: #e6282d;
border-radius: 6px;
color: white;
font-size: 14px;
font-style: italic;
font-weight: bold;
display: inline-block;
line-height: 14px;
margin: 4px 0;
padding: 6px 10px;
text-transform: uppercase;
-ms-transform: skewX(-7deg);
transform: skewX(-7deg);
vertical-align: top; }
.button:hover, .button a:hover {
background: #900;
color: white;
cursor: pointer;
text-decoration: none; }
header {
-webkit-box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.4);
align-items: center;
background: #083152;
bottom: 0;
display: flex;
flex-wrap: wrap;
left: 0;
padding: 5px 5px 5px 200px;
position: fixed;
width: 100%;
z-index: 3; }
header, header * {
transition: 300ms; }
header .logo img {
bottom: 20px;
left: 0;
position: absolute;
width: 350px;
}
header ul {
list-style: none none;
margin: 0;
padding: 0;
text-transform: uppercase; }
header > ul {
align-items: center;
display: flex;
flex: 1 1 auto;
height: 50px;
justify-content: center;
overflow: visible;
text-align: center;
-ms-transform: skewX(-7deg);
transform: skewX(-7deg); }
header > ul > li {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
align-items: center;
background: #C1111C;
border-radius: 4px;
color: white;
cursor: default;
display: inline-flex;
font-size: 20px;
font-weight: bold;
height: 30px;
margin: 5px;
padding: 0 10px;
position: relative;
transition: background 100ms;
vertical-align: middle; }
header > ul > li:hover {
height: 40px; }
header > ul > li.big {
font-size: 24px;
padding: 0 15px; }
header > ul > li.small {
font-size: 18px;
font-weight: normal; }
header > ul > li.drop:hover {
border-radius: 0 0 4px 4px; }
header > ul > li.drop:hover::before {
background: #e6282d;
bottom: 100%;
content: '';
height: 6px;
left: 0;
position: absolute;
width: 100%; }
header > ul > li.drop:hover ul {
max-height: 300px;
padding: 10px 0 6px; }
header > ul > li a:hover {
color: inherit;
text-decoration: inherit; }
header > ul > li ul {
background: #e6282d;
border-radius: 4px 4px 4px 0;
bottom: 100%;
font-size: 16px;
left: 0;
margin-bottom: 6px;
max-height: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
transition: none; }
header > ul > li ul a {
display: inline-block;
padding: 3px 15px 3px 10px;
transition: 100ms;
white-space: nowrap;
width: 100%; }
header > ul > li ul a:hover {
background: #900; }
header .contacts {
flex: 0 0 auto;
font-size: 12px;
font-style: italic;
margin: 0;
padding: 0;
text-align: right;
text-transform: uppercase; }
header .contacts a {
text-transform: none; }
header .contacts .show-sm {
display: none; }
header .aside-control {
border: 5px solid #e6282d;
border-left: none;
border-right: none;
cursor: pointer;
display: none;
height: 25px;
position: relative;
transition: 100ms;
width: 24px; }
header .aside-control::before, header .aside-control::after {
background: #e6282d;
content: '';
height: 5px;
left: 0;
position: absolute;
top: 5px;
transition: 100ms;
width: 100%; }
header .aside-control:hover {
border-color: #900; }
header .aside-control:hover::before, header .aside-control:hover::after {
background: #900; }
header .aside-control.opened {
border-color: transparent; }
header .aside-control.opened::before {
transform: rotate(45deg); }
header .aside-control.opened::after {
transform: rotate(-45deg); }
aside {
color: white;
background-color: rgba(0, 0, 0, 0.95);
font-size: 14px;
height: 100%;
max-height: 100%;
overflow: auto;
padding: 0 20px 45px;
position: fixed;
right: -210px;
top: 0;
transition: 300ms;
width: 210px;
z-index: 2; }
aside.opened {
right: 0; }
aside .wrap {
max-height: 100%;
overflow: auto; }
aside a {
display: block;
margin-bottom: 8px;
text-transform: uppercase; }
aside span {
color: #e6282d;
display: block;
margin: 15px auto 8px;
text-transform: uppercase; }
#siteby {
color: gray;
font-size: 10px;
margin: -8px auto 2px;
text-align: center;
width: 100%; }
#welcome-screen {
align-items: flex-start;
background: url("../divani-moderni/forma/divano-in-pelle-forma.jpg") center;
background-size: cover;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: 20px 0 140px;
position: relative;
width: 100%; }
#welcome-screen > * {
margin-left: 30px; }
#welcome-screen h1 {
font-size: 3em;
font-style: italic;
padding-bottom: 5px; }
#welcome-screen > img {
display: none;
margin: 10px 0;
width: 100%; }
#welcome-screen .subtitle {
color: #e6282d;
font-size: 0.8em;
font-style: italic;
letter-spacing: 12px;
margin-top: 0;
text-transform: uppercase; }
#welcome-screen .description {
flex-grow: 1; }
#welcome-screen .motto {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
background: #eae6e1 url(menu-bg-noise.jpg);
border-radius: 6px;
display: block;
margin-left: -25px;
opacity: 0.9;
padding: 15px 20px 15px 50px;
-ms-transform: skewX(-7deg);
transform: skewX(-7deg);
width: 550px;
word-spacing: 4px; }
#welcome-screen .motto strong {
color: #e6282d;
display: block;
font-size: 1.1em;
margin-bottom: 5px;
text-transform: uppercase; }
.margin-bottom {
margin-bottom: 20px; }
#divani-altri {
margin-bottom: 100px; }
.su-misura {
background: white;
border-radius: 6px;
bottom: 150px;
display: block;
opacity: 0.9;
overflow: hidden;
padding-right: 50px;
position: absolute;
right: -50px;
-ms-transform: skewX(-5deg);
transform: skewX(-5deg);
transition: 200ms; }
.su-misura:hover {
right: -20px;
opacity: 1; }
/*
.arrow-invite {
animation: bounce 900ms infinite;
background: $red;
bottom: 111px;
height: 80px;
opacity: 0.8;
position: absolute;
right: 500px;
transition: 50ms;
width: 30px;
&::after {
border: 30px solid transparent;
border-top-color: $red;
content: '';
display: block;
height: 0;
left: -15px;
position: absolute;
top: 100%;
width: 0;
}
}
@keyframes bounce {
0% { bottom: 100px; }
100% { bottom: 150px; }
}
*/
h1 {
color: #e6282d;
font-size: 40px;
line-height: 36px;
margin: 0 0 0 20px;
padding: 14px 0;
text-transform: uppercase; }
h2, h3 {
color: #e6282d;
font-size: 32px;
margin: 30px 0 10px 20px;
padding: 14px 0;
text-transform: uppercase; }
article {
margin: 20px 70px;
position: relative; }
article:last-of-type {
margin-bottom: 100px; }
article > p {
margin: 0 0 5px 0;
text-indent: 20px;
padding: 0; }
article p a {
text-decoration: underline; }
article img {
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px; }
[class|=tile] > div {
background: #eee url(menu-bg-noise.jpg);
display: inline-block;
height: auto;
margin: 5px 10px 8px 0;
max-width: 350px;
padding: 2px;
position: relative;
text-align: left;
vertical-align: top;
width: 350px;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
[class|=tile] > div:hover {
background: #fff none; }
[class|=tile] > div img {
height: auto;
width: 100%; }
[class|=tile] > div h2, [class|=tile] > div h3 {
color: black;
font-size: 18px;
line-height: 18px;
margin: 0;
padding: 7px 0 7px 5px; }
[class|=tile] > div p {
font-size: 12px;
line-height: 14px;
margin: 0;
padding: 0 5px 5px;
text-indent: 0; }
[class|=tile] > div p span {
font-weight: bold; }
.tile > div {
cursor: pointer; }
.note {
font-size: 20px;
color: #e6282d;
padding: 20px 0 10px;
text-transform: uppercase; }
.affare-del-mese::after {
background: #fcc url(button-bg-noise.jpg);
border-radius: 6px;
box-shadow: 2px 2px 5px #666666;
color: #900;
content: 'Affare del mese';
display: block;
font-size: 14px;
font-style: italic;
font-weight: bold;
right: 6px;
padding: 4px 10px;
position: absolute;
text-transform: uppercase;
top: 6px; }
#photo {
float: left;
font-size: 0;
max-width: 100%;
width: 720px; }
#photo .button {
margin: 20px 20px 20px 0; }
#photo > a {
display: inline-block;
margin: 0 10px 10px 0;
max-width: 100%;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
#photo > p {
font-size: 18px;
line-height: 1.8; }
section {
clear: none;
margin-left: 730px; }
section h1 {
font-size: 30px;
margin: 0; }
section h1 + p {
font-size: 18px;
margin-top: 0; }
section h2 {
font-size: 24px;
margin: 0; }
section h2 + p {
font-size: 14px;
font-style: italic;
margin-top: 0; }
#tabella-colori {
font-size: 0;
max-width: 710px; }
#tabella-colori img {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
display: inline-block;
margin: 0 6px 6px 0;
opacity: 1;
transition: 200ms;
width: 65px; }
#tabella-colori img:hover {
opacity: 0.8; }
#prezzi table {
background-color: white;
border-collapse: collapse;
border-radius: 8px;
font-size: 14px;
overflow: hidden;
max-width: 710px;
width: 100%;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
#prezzi table tr:nth-of-type(odd) {
background-color: #f0f0f0; }
#prezzi table tr:nth-of-type(n+2):hover {
text-decoration: underline; }
#prezzi table th {
font-style: italic; }
#prezzi table th, #prezzi table td {
padding: 3px 10px;
text-align: center; }
#prezzi table th:first-child, #prezzi table td:first-child {
text-align: left; }
#prezzi table th:last-child, #prezzi table td:last-child {
text-align: right; }
#prezzi table th img, #prezzi table td img {
display: inline-block; }
#prezzi table + p {
font-style: italic;
font-weight: bold; }
#prezzi table.white-lined tr:nth-of-type(odd) {
background-color: transparent; }
#prezzi table.white-lined tr:not(:last-child) {
border-bottom: 1px solid #d7d7d7; }
#prezzi .button {
margin: 5px 10px 5px 0;
max-width: 710px;
padding: 10px 20px;
text-align: center; }
#prezzi form {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
background-color: white;
border-radius: 8px;
display: inline-block;
max-width: 710px;
padding: 10px;
text-align: center; }
#prezzi form h3 {
padding: 5px; }
#prezzi form h3, #prezzi form p, #prezzi form label {
font-size: 14px;
margin: 5px 0; }
#prezzi form input:focus {
outline: none; }
#prezzi form input[type=image] {
display: block;
margin: 15px auto 10px; }
#prezzi form input[type=text] {
border: 1px solid black;
border-radius: 8px;
padding: 3px; }
@media screen\0 {
/*apply shadow to IE*/
#prezzi table {
display: block; }
#prezzi table th, #prezzi table td {
width: 50%; } }
article + h3 {
clear: both;
font-size: 24px;
margin-left: 40px; }
.custom-sofa-banner > div {
max-height: 0;
overflow: hidden;
transition: 200ms; }
.custom-sofa-banner:hover > div, .custom-sofa-banner input:checked ~ div {
margin-top: 5px;
max-height: 30px; }
.custom-sofa-banner label {
cursor: pointer;
display: block; }
.custom-sofa-banner input {
display: none; }
.custom-sofa-banner a {
display: inline-block;
margin: 0 5px; }
.custom-sofa-banner a:hover {
text-decoration: underline; }
.tile-offerta a img:hover {
cursor: pointer; }
.tile-offerta a + a {
border: 1px solid #b00;
height: 60px;
left: 5px;
position: absolute;
top: 168px; }
.tile-offerta a + a:hover {
border: 1px solid #fff; }
.tile-offerta a + a img {
height: 100%;
width: auto; }
.tile-offerta a + a + a {
left: 101px; }
.tile-offerta a + a + a + a {
left: 197px; }
.tile-offerta div > span {
color: #BB0000;
font-size: 22px;
font-style: italic;
font-weight: bold;
position: absolute;
right: 10px;
top: 235px; }
.tile-offerta p a {
text-decoration: underline;
text-transform: uppercase; }
.tile-offerta h3 {
color: black;
font-size: 18px;
line-height: 18px;
margin: 0;
padding: 7px 0 7px 5px;
text-align: center; }
.notice {
background: mistyrose;
margin: 20px 0;
padding: 10px 20px;
text-indent: 0; }
.tile-colori {
text-align: center; }
.tile-colori h1, .tile-colori h2 {
text-align: left; }
.tile-colori div + h2 {
margin-top: 40px; }
/* PER MODIFICARE LE DIMENSIONI DEL BOX-PELLI */
.tile-colori > div {
max-width: 200px;
width: 200px;}
.tile-colori > div p {
margin-top: 5px;
text-align: center; }
.tile-colori [src*="pelle-maya"], .tile-colori [src*="pelle-terra"], .tile-colori [src*="pelle-primo-fiore"] {
border-radius: 50% 50% 50% 50%; }
.sambox {
background: #eae6e1 url(menu-bg-noise.jpg);
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px; }
.sambox:hover {
color: inherit;
background: white none;
text-decoration: none; }
.sambox img {
max-width: 100%; }
.sambox p {
font-size: 14px;
margin: 0;
padding: 4px 8px 5px;
text-align: center; }
#samboxOuter {
background: rgba(40, 40, 40, 0.9);
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 10; }
#samboxInner {
background-color: white;
display: inline-block;
margin: auto;
max-height: 100%;
max-width: 100%;
position: relative;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
#samboxInner img {
max-width: 100%;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px; }
#samboxInner p {
font-size: 16px;
margin: 0;
padding: 6px 0 7px;
text-align: center; }
#samboxNext, #samboxPrev, #samboxClose, #samboxFull {
background-color: white;
border: 2px solid #484848;
border-radius: 20px 20px 20px 20px;
cursor: pointer;
font-size: 28px;
height: 36px;
opacity: 0.7;
position: absolute;
transition: all 500ms ease 0s;
width: 36px; }
#samboxNext:hover, #samboxPrev:hover, #samboxClose:hover, #samboxFull:hover, #samboxNextWrap:hover div, #samboxPrevWrap:hover div {
border: 2px solid white;
opacity: 1;
transform: rotate(360deg); }
#samboxClose {
line-height: 34px;
right: -2px;
top: -2px; }
#samboxFull {
font-size: 22px;
line-height: 34px;
left: -2px;
top: -2px; }
#samboxNextWrap, #samboxPrevWrap {
cursor: pointer;
height: 100%;
position: absolute;
top: 0;
width: 100px; }
#samboxNextWrap {
right: 0; }
#samboxPrevWrap {
left: 0; }
#samboxNext, #samboxPrev {
line-height: 30px;
margin-top: -20px;
top: 50%; }
#samboxNext {
right: -2px; }
#samboxPrev {
left: -2px; }
#samboxLoading {
border: 10px solid white;
border-right-color: #e6282d;
border-left-color: #e6282d;
border-radius: 50%;
height: 100px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: absolute;
top: 50%;
width: 100px;
-webkit-animation: spin 3s linear 0s infinite reverse;
animation: spin 3s linear 0s infinite reverse; }
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(360deg); }
to {
-webkit-transform: rotate(0deg); } }
@keyframes spin {
from {
transform: rotate(360deg); }
to {
transform: rotate(0deg); } }
@media (max-width: 480px) {
div#photo .sambox {
margin: 0 0 10px 0; } }
.atss {
z-index: 2 !important; }
#carousel {
margin-bottom: 90px;
overflow: hidden;
position: relative;
width: 100%;
z-index: 2;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
#carousel ul {
display: inline-block;
margin: 0;
padding: 0;
white-space: pre; }
#carousel ul li {
cursor: pointer;
display: inline-block;
height: 184px;
margin: 0;
overflow: hidden;
position: relative;
vertical-align: top;
width: 280px; }
#carousel ul li img {
width: 100%; }
#carousel ul li p {
background-color: rgba(255, 255, 255, 0.6);
bottom: 0;
color: black;
font-size: 14px;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
text-indent: 0;
text-transform: uppercase;
width: 100%; }
#carousel ul li:hover p {
background-color: rgba(255, 255, 255, 0.8); }
@media (min-width: 1600px) {
header {
padding-left: 282px; }
header .logo img:hover, header.welcome .logo img {
width: 282px; }
header.welcome {
opacity: 0.9; }
header.welcome > ul > li {
font-size: 22px;
height: 36px; }
header.welcome > ul > li:hover {
height: 46px; }
header.welcome > ul > li.big {
font-size: 27px; }
header.welcome > ul > li.small {
font-size: 19px; } }
@media (max-width: 1500px) {
section {
clear: both;
margin-left: 0; } }
@media (max-width: 1410px) {
header .contacts {
flex: 0 0 100%;
text-align: center; }
header .contacts .hide-md {
display: none; }
header .contacts div {
display: inline-block; } }
@media (max-width: 1250px) {
header > ul > li {
font-size: 20px; } }
@media (max-width: 1050px) {
article {
margin: 20px; }
article:last-of-type {
margin-bottom: 100px; } }
@media (max-width: 950px) {
header > ul > li {
font-size: 16px; }
header > ul > li.big {
font-size: 18px; }
header > ul > li.small {
display: none; }
header > ul > li.left ul {
border-radius: 4px 4px 0 4px;
left: auto;
right: 0;
text-align: right; }
#welcome-screen > * {
margin-left: 10px;
margin-right: 10px; }
#welcome-screen p {
text-align: left; }
#welcome-screen .description {
font-size: 16px; }
#welcome-screen .info {
font-size: 14px; }
.su-misura {
display: none; }
p {
padding: 0;
text-align: justify; }
#photo .button {
display: none; }
#info {
clear: both;
margin-left: 0; } }
@media (max-width: 670px) {
header {
height: 45px;
padding-left: 160px; }
header .logo img {
width: 160px; }
header .hide-sm {
display: none !important; }
header > ul {
display: none; }
header .contacts {
flex: 1 1 auto; }
header .contacts .show-sm {
display: block; }
header .aside-control {
display: block; }
#welcome-screen {
background: none;
display: block;
height: auto;
padding: 20px 0; }
#welcome-screen h1 {
font-size: 36px; }
#welcome-screen img {
display: block; }
#welcome-screen .subtitle {
letter-spacing: 7px; }
#welcome-screen .motto {
display: none; } }
@media (max-width: 480px) {
#siteby {
margin: 5px auto; }
article {
margin: 50px 5px auto; }
article > p {
text-indent: 10px; }
article p a {
display: inline-block;
margin-bottom: 8px; }
h1 {
font-size: 30px;
line-height: 30px;
margin: 0 0 0 20px;
padding: 14px 0; }
h2, h3 {
margin: 0 0 0 10px; }
[class|=tile] > div {
margin: 5px 0;
padding: 2px; } }
@media (max-width: 380px) {
header .contacts .show-sm {
display: none; } }
/*# sourceMappingURL=calia-maddalena-2017.css.map */