html{
font-size: 100%;
}
body{
margin:0;
padding:0;
background:#ffc140;
font-family: "Lucida Grande", Arial, sans-serif;
line-height:1.5em;
}
#container {
width: 95%;
height: 100%;
}
header{
text-align:center;
padding-top:1em;
}
h1{
display:none;
}
img{
padding-bottom:1em;
}
/* MENU PRINCIPALE */
nav {
margin-top: 280px;
margin-left: 15px;
font-size: 1.0625em;
font-weight: 500;
padding: 0.625em 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
background-color: #D8F3F9;
margin: 0;
padding: 0;
list-style-type: none;
border-top: 1px solid #D1D3D4;
border-left: 1px solid #D1D3D4;
border-right: 1px solid #D1D3D4;
}
nav ul li:last-child {
border-bottom: 1px solid #D1D3D4;
}
nav ul li a {
display: block;
padding: 5px;
background-color: green;
color: gold;
line-height: 1.8;
text-decoration: none;
padding-left: 4%;
}
nav ul li a:hover {
color: #3AC3E0;
background-color: coral;
color: darkblue;
border-radius: .7em;
text-decoration: none;
}
nav ul li ul{
padding-left:20px;
display: none;
}
/* qui nascondo il sottomenų */
#menu li ul {
display: none;
}
/* per mostrare il menų quando passo con il mouse */
#menu li:hover ul {
display: block;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 70px;
background: white;
}
/* Fine Sezione Menų */
#content{
margin: auto;
}
img.title{
float:left;
margin-left: 15px;
width: 95%;
height: 78%;
}
img.s-network {
width: 55px;
height: 55px;
position: relative;
margin-top: 5px;
margin-left: 5px;
}
img.volantino{
padding-top: 1.5em;
}
img.vignetta {
margin-left: -1.7em;
width: 370px;
height: 360px;
}
h3.cane{
position: relative;
margin-top: -350px;
margin-left: 135px;
font-family: Arial Black;
font-size: 11px;
text-transform: uppercase;
color: #ff0000;
}
#presentazione {
height: 255px;
width: 295px;
background-color: #C7F83E;
margin: 30px 10px 75px 10px;
overflow:auto;
}
h2 {
font-family: Arial Black;
font-size: 1,05em;
text-transform: uppercase;
text-align: center;
color: red;
}
u.maiuscola {
text-transform: capitalize;
text-decoration: none;
}
h2.orario {
color: #0000ff;
}
div#orari {
margin-left: 30px;
text-align: justify;
}
footer {
font-weight: bold;
}
li {
list-style-type:none;
margin:0;
padding:0;
}
img.mail {
width: 230px;
}
p.miosito {
margin-left: 15px;
}
a.sito:hover {
background-color: lightblue;
color: #000000;
text-transform: uppercase;
font-family: Arial Unicode MS;
font-size: 0.75em;
font-weight: bold;
}
/* Inizio pag dove-siamo */
body#color {
background-color: #4ae83a;
}
.mappa {
margin: 15px 0 0 15px;
width: 270px;
height: 450px;
}
.didascalia {
color: #4671d5;
margin-left: 0.25em;
}
#negozio {
width: 184px;
height: 236px;
margin-top: -265px;
margin-left: 92px;
display:block;
float:left;
background:url(../img/negozio.png) top left;
position: absolute;
z-index: 1;
}
#negozio:hover {
background:url(../img/negozio.png) top right;
}
img.dove-siamo {
margin-left: -75px;
width: 445px;
height: 300px;
}
div#raggiungimi {
margin: -255px 0 0 35px;
}
h4 {
font-weight: bold;
font-family: Aria Unicode MS;
font-size: 1.15em;
text-align: justify;
margin-left: 1em;
}
p.homepage {
font-family: Arial;
font-size: 20px;
margin: 85px 0 20px 40px;
}
a.effetto {
text-decoration: none;
}
a.effetto:hover {
font-size: 24px;
text-transform: uppercase;
background-color: beige;
color: orange;
}
/* Fine pag dove siamo */
/* Inizio pag contatti */
img.contatti {
margin-left: -115px;
width: 550px;
height: 750px;
}
table#form {
margin: -595px 0 0 20px;
}
p.home {
font-family: Arial;
font-size: 20px;
margin: 250px 0 0 50px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 20px 0 0 80px;
}
td.colonne {
font-family: Times New Roman;
font-size: 1.24em;
font-weight: bold;
text-transform: capitalize;
text-align: center;
padding-bottom: 4em;
}
td.spazio {
width: 10px;
}
td.grassetto {
font-weight: bold;
font-family: Arial Black;
font-size: 15px;
}
img.foto {
padding-top: 15px;
width: 75px;
height: 100px;
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-property: transform;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
overflow:hidden;
cursor: pointer;
}
img.foto:hover {
-ms-transform: scale(3,3);
-webkit-transform: scale(3,3);
-moz-transform: scale(3,3);
-o-transform: scale(3,3);
}
p.hpage {
margin: 80px 0 20px 75px;
}
/* Fine pag prodotti */
/* Primo Breack Point per rendere il sito responsive design */
@media only screen and (min-width: 480px) {
#container{
margin: 0 0 0 -0.60em;
}
img.title {
margin-left: 1.5em;
width: 65%;
height: 70%;
}
img.s-network {
float: left;
margin-top: 55px;
margin-left: 40px;
}
img.volantino {
height: 100%;
width: 90%;
}
img.vignetta {
width: 510px;
height: 385px;
}
h3.cane{
position: relative;
margin-top: -370px;
margin-left: 195px;
font-family: Arial Black;
font-size: 15px;
text-transform: uppercase;
color: #ff0000;
}
nav {
margin-top: 275px;
}
#presentazione{
margin-top: 50px;
margin-left: 18px;
width: 427px;
height: 280px;
padding-left: 10px;
}
div#orari {
margin-left: 115px;
}
div#footer {
margin-top: 25px;
}
li.tel{
position: absolute;
}
li.cell{
position: absolute;
margin-left: 165px;
}
li.copy{
position: absolute;
margin-top: 45px;
margin-left: 285px;
}
img.mail{
margin-top: 20px;
}
#menu li:hover ul {
margin: 0 0 0 150px;
}
p.miosito {
margin-left: 100px;
}
a.sito:hover {
font-size: 1em;
}
/* Breakpoint x la pag dove siamo */
.mappa {
width: 448px;
height: 415px;
padding-bottom: 1.2em;
}
.didascalia {
background-color: white;
margin-left: 5.15em;
}
#negozio {
margin-left: 180px;
}
img.dove-siamo {
margin-left: -45px;
width: 575px;
height: 280px;
}
div#raggiungimi {
margin: -260px 0 0 -145px;
}
h4 {
margin-left: 11.2em;
font-size: 1.45em;
padding-top: 0.785em;
}
p.homepage {
margin: 70px 0 35px 135px;
}
/* Fine break pag dove-siamo */
/* Inizio pag contatti */
img.contatti {
width: 700px;
height: 800px;
}
table#form {
margin: -615px 0 0 85px;
}
p.home {
margin: 270px 0 0 120px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 35px 0 0 90px;
}
td.colonne {
font-size: 1.45em;
}
td.spazio {
width: 30px;
}
td.grassetto {
font-size: 20px;
}
img.foto {
padding-top: 10px;
padding-left: 15px;
}
img.foto:hover {
-ms-transform: scale(4,3);
-webkit-transform: scale(4,3);
-moz-transform: scale(4,3);
-o-transform: scale(4,3);
}
p.hpage {
margin: 80px 0 20px 165px;
}
/* Fine pag prodotti */
/*FINE PRIMO BREAKPOINT */}
@media only screen and (min-width: 600px) {
img.title {
margin-left: 3.5em;
}
img.s-network {
margin-left: 3.41em;
}
img.vignetta {
width: 530px;
height: 345px;
}
h3.cane{
position: relative;
margin-top: -340px;
margin-left: 180px;
}
#menu li:hover ul {
margin: 0 0 0 205px;
}
#presentazione{
width: 550px;
height: 260px;
}
div#orari {
margin-left: 175px;
padding-bottom: 15px;
}
div#footer {
margin-top: 15px;
margin-left: 70px;
}
p.miosito {
margin-left: 150px;
}
/* Breakpoint x la pag dove siamo */
.mappa {
margin-left: 2em;
width: 540px;
}
.didascalia {
background-color: transparent;
margin-left: 9.25em;
}
.didascalia:hover {
color: darkblue;
background-color: red;
}
#negozio {
margin-left: 245px;
}
img.dove-siamo {
margin-top: -25px;
margin-left: -10px;
width: 610px;
height: 350px;
}
div#raggiungimi {
margin: -320px 0 0 -125px;
}
h4 {
padding-top: 1.82em;
font-size: 1.55em;
margin-left: 11.95em;
}
p.homepage {
margin: 95px 0 40px 185px;
}
/* Fine break pag dove-siamo */
/* Inizio pag contatti */
img.contatti {
margin-left: -75px;
width: 750px;
}
table#form {
margin: -615px 0 0 145px;
}
p.home {
margin: 270px 0 0 190px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 35px 0 0 90px;
}
td.colonne {
font-size: 1.45em;
}
td.spazio {
width: 110px;
}
td.grassetto {
font-size: 20px;
}
img.foto {
padding-top: 10px;
padding-left: 15px;
}
img.foto:hover {
-ms-transform: scale(4,3);
-webkit-transform: scale(4,3);
-moz-transform: scale(4,3);
-o-transform: scale(4,3);
}
p.hpage {
margin: 80px 0 20px 215px;
}
/* Fine pag prodotti */
/*FINE SECONDO BREAKPOINT */}
@media only screen and (min-width: 768px) {
#container{
margin: 0 0 0 0.90em;
}
img.title{
margin-left: 1.187em;
width: 50%;
height: 50%;
}
img.volantino {
width: 300px;
height: 255px;
margin-top: 12.115em;
margin-left: -39.3em;
}
img.vignetta{
margin-top: -25em;
margin-left: 16em;
}
h3.cane{
margin-left: 33.475em;
}
img.s-network {
margin-left: 75px;
}
#presentazione{
clear: both;
margin-left: 105px;
margin-top: 105px;
}
div#orari {
margin-left: 150px;
}
p.centrato {
margin-left: 110px;
}
p.allineato {
margin-left: 110px;
}
p.a-capo {
margin-left: 110px;
}
nav ul li{
display: inline;
float: left !important;
margin: 20px 15px 5px 60px;
background-color: #fff;
width: auto;
height: auto;
border: none;
}
#menu li:hover ul {
margin: 0 0 0 -20px;
}
li.tel{
position: absolute;
margin-top: -5px;
margin-left: -90px;
}
li.cell{
position: absolute;
margin-top: -5px;
margin-left: 80px;
}
img.mail{
position: absolute;
margin-top: -30px;
margin-left: 255px;
}
li.copy{
position: absolute;
margin-top: -5px;
margin-left: 515px;
}
p.miosito {
margin-left: 260px;
margin-top: -85px;
}
div#footer {
margin-top: 25px;
}
/* Breakpoint x la pag dove siamo */
.mappa {
margin-left: 7.5em;
width: 550px;
}
.didascalia {
margin-left: 15.45em;
}
#negozio {
margin-left: 335px;
}
img.dove-siamo {
margin-top: -15px;
margin-left: 95px;
}
div#raggiungimi {
margin: -320px 0 0 5px;
}
h4 {
font-size: 1.75em;
padding-top: 1.12em;
margin-left: 8.9725em;
}
p.homepage {
margin: 95px 0 35px 270px;
}
/* Fine break pag dove-siamo */
/* Inizio pag contatti */
img.contatti {
margin-left: -55px;
width: 800px;
}
table#form {
margin: -615px 0 0 200px;
}
p.home {
margin: 280px 0 0 250px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 55px 0 0 150px;
}
td.colonne {
font-size: 1.45em;
padding-bottom: 5em;
}
td.spazio {
width: 150px;
}
td.grassetto {
font-size: 20px;
}
img.foto {
padding-top: 10px;
padding-left: 15px;
}
img.foto:hover {
-ms-transform: scale(4,3);
-webkit-transform: scale(4,3);
-moz-transform: scale(4,3);
-o-transform: scale(4,3);
}
p.hpage {
margin: 80px 0 20px 295px;
}
/* Fine pag prodotti */
/*FINE TERZO BREAKPOINT */}
@media only screen and (min-width: 1024px) {
#container{
margin-left: 0.25em;
}
img.title {
margin-left: 5em;
padding-right: 8em;
width: 45%;
height: 47%;
}
img.s-network {
float: left;
margin-top: 5.05em;
margin-left: 8.950em;
}
img.volantino {
margin-top: 5.3em;
margin-right: 32em;
height: 30%;
width: 35%;
}
img.vignetta{
margin-top: -30em;
margin-left: 30em;
}
h3.cane{
margin-left: 47.985em;
}
nav ul li{
margin: 5px 15px 5px 125px;
}
#menu li:hover ul {
margin: 0 0 0 -85px;
width: 230px;
}
#presentazione{
height: 260px;
width: 625px;
margin-left: 70px;
}
h2.orario {
position: absolute;
margin-left: 695px;
margin-top: -450px;
}
div#orari {
position: absolute;
margin-left: 275px;
margin-top: -410px;
}
p.centrato {
margin-left: 115px;
}
div#footer {
margin-left: 170px;
}
p.centrato {
margin-left: 450px;
margin-top: 55px;
}
p.allineato {
margin-left: 450px;
margin-top: 5px;
}
p.a-capo {
margin-left: 450px;
margin-top: 20px;
}
div#footer {
margin-top: 100px;
margin-left: 95px;
}
p.miosito {
margin-top: -240px;
margin-left: 725px;
}
/* Breakpoint x la pag dove siamo */
.mappa {
margin-left: 8.975em;
width: 750px;
height: 500px;
}
.didascalia {
margin-left: 24.724em;
}
#negozio {
margin-top: -303px;
margin-left: 460px;
}
img.dove-siamo {
width: 55em;
height: 25em;
margin-top: -15px;
margin-left: 105px;
}
div#raggiungimi {
margin: -315px 0 0 -65px;
}
h4 {
font-size: 2em;
margin: -2em 0 0 14em;
}
p.homepage {
margin: 115px 0 30px 390px;
}
/* Fine break pag dove-siamo */
/* Inizio pag contatti */
img.contatti {
margin-left: 50px;
width: 850px;
}
table#form {
margin: -615px 0 0 330px;
}
p.home {
margin: 280px 0 0 310px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 55px 0 0 270px;
}
td.colonne {
font-size: 1.45em;
padding-bottom: 5em;
}
td.spazio {
width: 185px;
}
td.grassetto {
font-size: 20px;
}
img.foto {
padding-top: 10px;
padding-left: 15px;
}
img.foto:hover {
-ms-transform: scale(5,3);
-webkit-transform: scale(5,3);
-moz-transform: scale(5,3);
-o-transform: scale(5,3);
}
p.hpage {
margin: 80px 0 20px 425px;
}
/* Fine pag prodotti */
/*FINE QUARTO BREAKPOINT */}
@media only screen and (min-width: 1215px) {
img.volantino{
margin-top: 7.5em;
margin-right: 40em;
}
img.vignetta{
margin-top: -27em;
margin-left: 41.175em;
}
h3.cane{
margin-left: 58.10em;
}
nav ul li{
margin: 5px 5px 5px 155px;
}
a.position {
margin-left: -55px;
}
#menu li:hover ul {
margin: 0 0 0 -95px;
width: 270px;
}
#presentazione{
height: 275px;
width: 765px;
margin-left: 120px;
}
h2.orario {
margin-left: 870px;
}
p.centrato {
margin-left: 610px;
}
p.allineato {
margin-left: 610px;
}
p.a-capo {
margin-left: 610px;
}
div#footer {
margin-left: 130px;
}
p.miosito {
margin-top: -45px;
margin-left: 810px;
}
/* Breakpoint x la pag dove siamo */
.mappa {
margin-left: 14.975em;
width: 750px;
height: 500px;
}
.didascalia {
margin-left: 30.75em;
}
#negozio {
margin-top: -305px;
margin-left: 557px;
}
img.dove-siamo {
margin-top: -20px;
margin-left: 175px;
}
div#raggiungimi {
margin: -315px 0 0 -145px;
}
h4 {
font-size: 1.99em;
margin: -1.275em 0 0 18.5em;
}
p.homepage {
margin: 115px 0 35px 510px;
}
/* Fine break pag dove-siamo */
/* Inizio pag contatti */
img.contatti {
margin-left: 175px;
width: 900px;
height: 850px;
}
table#form {
margin: -645px 0 0 465px;
}
p.home {
margin: 300px 0 0 475px;
}
/* Fine pag contatti */
/* Inizio pag prodotti */
table {
margin: 60px 0 0 350px;
}
td.colonne {
font-size: 1.45em;
padding-bottom: 5em;
}
td.spazio {
width: 275px;
}
td.grassetto {
font-size: 20px;
}
img.foto {
padding-top: 10px;
padding-left: 15px;
}
img.foto:hover {
-ms-transform: scale(7,5);
-webkit-transform: scale(7,5);
-moz-transform: scale(7,5);
-o-transform: scale(7,5);
}
p.hpage {
margin: 165px 0 30px 510px;
}
/* Fine pag prodotti */
/*FINE QUINTO E ULTIMO BREAKPOINT */}
/* Inserimento Galeria */
.flexslider a:active {
outline: none;
}
.slides,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider {
width: 60%;
margin: 0 0 3.125em 4.5em;
padding: 0;
}
.flexslider .slides > li {display: none;}
.flexslider .slides img {
max-width: 100%;
display: block;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {
display: block;
}
.flexslider {
background: #lightblue;
position: relative;
zoom: 1;
}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
p.flex-caption a {color: #fff;}
p.flex-caption a:hover {color: #fff, text-decoration: none;}
.flex-direction-nav li a {
position: absolute;
/*14px / 700px*/
width: 80px; /*29px / 700px*/
height: 30px; /*29px / 248px */
max-width: 100px;
max-height: 60px;
display: block;
background-color: rgba(114, 211, 233, 0.5);
color:darkblue;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 1000;
}
.flex-direction-nav li a:hover {background-color: #72D3E9;}
.flex-direction-nav li .next {
right: 0.1%;
text-align:center;
bottom: 205px; /* 0.1% */
background-color: #E0FEAD;
}
.flex-direction-nav li .prev {
left: 0.1%;
text-align:center;
bottom: 205px; /* 0.1% */
background-color: #E0FEAD;
}
.flex-direction-nav li .disabled {
opacity: .3;
filter:alpha(opacity=30);
cursor: default;
}
.flex-control-nav {width: 100%; position: absolute; bottom: -35px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 10px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 10px; height: 10px; display: block; background: url(http://petsinthecity.it/css/img/galleria/pagination-dots.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -10px;}
.flex-control-nav li a.active {background-position: 0 -20px; cursor: default;}
/* Fine Galleria */