/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Modern Slide In
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/modern-slide-in/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/
/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
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: inherit;*/
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  /*line-height: 1;*/
}

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;
}

/* !CSS RESET */
/* prefix declarations */
/* THEME STYLES */
.sequence-theme {
  /* this container is just to ensure the background color stretches all the way across on bigger screens */
  background: transparent; 
}
#sequence *{ box-sizing:border-box}
#sequence { box-sizing:border-box;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%; 
  max-width: 2000px;
  min-width:600px;
  background-color: #fff;
/*  background-image: url("../images/bg-sequence.jpg");
  background-repeat: no-repeat;
  background-position: 50% 100%;*/
  height: 450px; border-bottom:0px solid #e1e1e1;
  font-family: 'PT Sans Narrow', sans-serif;
 
}
#sequence > .sequence-canvas {
  height: 100%;
  width: 100%; box-sizing:border-box; padding:0em; 
}
#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1; box-sizing:border-box;
  top: -50%; top:0;
}
#sequence > .sequence-canvas > li img {

}

#sequence > .sequence-canvas li > * {
  position: absolute;
}

.sequence-next,
.sequence-prev {
  color: white;
  cursor: pointer;
  display: none;
  font-weight: bold;
  padding: 10px 15px;
  position: absolute;
  top: 50%;
  z-index: 1000;
  height: 75px;
  margin-top: -47.5px;
}

.sequence-pause {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1000;
}

.sequence-paused {
  opacity: 0.3;
}

.sequence-prev {
  left: 1%;
}

.sequence-next {
  right: 1%;
}

.sequence-prev img,
.sequence-next img {
  height: 100%;
  width: auto;
}

#sequence-preloader {
  background: #d9d9d9;
}

.sequence-pagination {
  display: none; 
  z-index: 10;
}
.sequence-pagination { padding:10px 0; padding:0.5em 0 1em 0; text-align:center;}
.sequence-pagination li {
  display: inline-block; font-size:12px; cursor:pointer;
  *display: inline;
  /* Hack for IE7 and below as they don't support inline-block */
  height: 12px; margin:0 5px
}
#sequence .sequence-pagination li{ background:none; margin:0 5px 0 0}

.sequence-pagination li i {
  cursor: pointer; color:#4a83aa; color:#999;
  opacity: 1;
}
.sequence-pagination li img:hover {
  margin-bottom: 0px;
}
.sequence-pagination li.current i {
  opacity: 1;color:#4a83aa;
}


.sequence-next,
.sequence-prev {
  position: absolute;
  opacity: 0.8;
}

.sequence-next:hover,
.sequence-prev:hover {
  opacity: 1;
}

/*STILI SPECIFICI PER LE SLIDE*/
#sequence:before{ content:''; height:5px; background:rgba(0,0,0,0.05); left:0; right:0; display:block; z-index:100; position:absolute}
#sequence .sequence-canvas > li .container{ position:relative; width:50%; min-height:300px; height:100%; padding:4.2em 2em 0 2em; box-sizing:border-box;  opacity:0; 
margin:0% 0% 0 50%}
.title {
	 font-weight:600;font-size: 2.6em; color:#0069b4; line-height:1.2em; 
	margin:0em 0 0em 0; padding:0 0 0.1em 0; max-width:600px; text-align:center;
}
.title a{ color:#333}
.scadenza{color:#4f86ac; text-transform:uppercase; font-size:0.9em}
.posizioni ul{ overflow:hidden; margin:0; width:100%; padding:0}
.posizioni li{ float:left; width:50%; color:#666; font-size:1.3em; color:#4f86ac; padding:0.5em 0 }
.prezzo{ font-size:1.8em; text-align:center; margin:15px 0 0 0; font-weight:600; color:#333}
.prezzo .sconto{ padding:0 5px; font-size:0.8em; color:#999999; text-decoration:line-through; font-weight:100}
#sequence > .sequence-canvas li i{ position:relative; color:#d7cdba} 

.titoletto{ font-size:18px; font-weight:600;color:#fff; text-transform:uppercase;max-width:600px; padding:30px 0 0 0;}
.testo{ font-weight:100; font-size:1.1em; line-height:1.4em; padding:0.5em 0; max-width:600px;  margin:0 0 1em 0; font-weight:200; color:#999; 
 /*background:rgba(0,0,0,0.4);*/ opacity:0; text-align:center }
.barra{ margin:1.5em auto; height:6px; width:200px; background:#FFF}

#sequence ul li{ background:transparent; background:#fff}
#sequence .pul{  padding:15px 0 10px 0; text-align:center; font-family: 'Cabin', sans-serif; max-width:600px }
#sequence .pul a{ display:inline-block; padding:10px 15px; letter-spacing:0.4px; font-weight:100; text-transform:uppercase; color:#fff; background:#fff; background:#67a6d3; border:0; border-bottom:3px solid rgba(0,0,0,0.05); border-radius:5px;   font-size:12px;}
#sequence .pul a:hover{ color:#FFF;  text-decoration:none; background:#4d84a9 }
#sequence .sequence-canvas > li.animate-in .container {
  opacity: 1;

}

#sequence .sequence-canvas > li.animate-out .container {
  opacity: 0;
  margin:0px auto 0 auto;
}

.background{ height:100%; width:100%; opacity:0}
.animate-in .background {
  opacity: 1;
}
#sequence .foto-fissa{ position:absolute; top:20px; z-index:-1; left:0; width:60%; height:100%; background-repeat:no-repeat; background-size:cover; 
background-position:center center; opacity:0;
right:0; left:auto}
#sequence .foto-fissa::before{ content:''; position:absolute; width:
100%; height:100%; background:#fff;background: rgba(277,277,277,0);
background: -moz-linear-gradient(left, rgba(277,277,277,1) 0%, rgba(277,277,277,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(277,277,277,1)), color-stop(100%, rgba(277,277,277,0)));
background: -webkit-linear-gradient(left, rgba(277,277,277,1) 0%, rgba(277,277,277,0) 100%);
background: -o-linear-gradient(left, rgba(277,277,277,1) 0%, rgba(277,277,277,0) 100%);
background: -ms-linear-gradient(left, rgba(277,277,277,1) 0%, rgba(277,277,277,0) 100%);
background: linear-gradient(to right, rgba(277,277,277,1) 0%, rgba(277,277,277,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );}

/*STILI FOTO PRODOTTO*/
.foto-prodotto{ height:100%; width:40%; display:table; }
#sequence .foto-prodotto{opacity:0; margin-top:-2em}
.foto-prodotto figure{ width:100%; height:100%; text-align:center; padding:10px; box-sizing:border-box; display:table-cell; vertical-align:middle}
.foto-prodotto figure img{ max-height:400px; max-width:100%}
.foto-prodotto .discount{ width:3em; height:3em; line-height:3em; border-radius:50%; position:absolute; top:2em; right:2em; 
background:#00e0a2; text-align:center; color:#fff; font-size:20px; -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);}
/*CSS PER ANIMAZIONI*/
.animate-in .icon-slider{ padding:8em 0 0 0; opacity:1}
#sequence .animate-in .foto-fissa{opacity:1; top:0}
.animate-in .testo{ opacity:1}
.animate-in .title{margin:0em 0 0em 0;}
#sequence .animate-in .foto-prodotto{margin-top:0em; opacity:1}

/* Middle Desktop Layout: 1100px */
@media only screen and (max-width: 1100px) {
	#sequence .sequence-canvas > li .container{width:60%; margin-left:40%; padding-right:10%;}
	.title{ font-size:2.2em}
}
/* Tablet Layout: 900px */
@media only screen and (max-width: 1000px) {
/*Stili per coda slider*/
#sequence{ width:100%; min-width:300px}
#sequence .sequence-canvas > li .container{  padding-top:2em}

}

/* Tablet Layout: 768px */
@media only screen and (max-width: 790px) {
#sequence .sequence-canvas > li .container{ padding-top:1em}
.testo{ max-width:400px; margin-bottom:0}
.titoletto{ padding-right:0px; padding:30px 0 0 20px}
.title{ font-size:2em}
.pul-vai{ text-align:center}
.pul-vai a{ font-size:1.2em}
.icon-slider{ padding:1em 0 0 0}
.icon-slider img{}
#sequence .sequence-canvas > li img{ height:200px; width:auto; padding:2em 0 0 0}
#sequence{ height:300px}
.foto-fissa{ }
.sequence-canvas{ background:#000 url(elementi/bg-slide.jpg) no-repeat center center}
.sequence-next,.sequence-prev{ padding-left:0; padding-right:0}
	
}

/* Tablet Layout: 550px */
@media only screen and (max-width: 550px) {
	#box-portfolio{ display:inline-block; width:100%}
	/*Stili per coda slider*/
#sequence .sequence-canvas > li img{ height:200px; width:auto; padding:0em 0 0 0}
#sequence .sequence-canvas > li .container{ padding:0 15px;  padding-top:0%; width:100%; margin:0; box-sizing:border-box}
#sequence{ height:450px}
#sequence .foto-prodotto figure{ padding:0}
#sequence .foto-fissa, #sequence .animate-in .foto-fissa{ width:100%; opacity:0.5}
#sequence .foto-fissa::before{ content:''; position:absolute; width:
100%; height:100%; background:#fff;background: rgba(277,277,277,0);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+43,ffffff+100&1+43,0+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 43%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 43%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

#sequence .pul{ text-align:center}
	#sequence .testo{width:100%; box-sizing:border-box; padding:0 5em;}
	#sequence .title{ font-size:1.8em; margin-bottom:0em}
.title{ font-size:3em}
.titoletto, .title, .testo, .categoria{ text-align:center; padding:5px 0}
.categoria, .scadenza{ /*display:none;*/ text-align:left;}
.foto-prodotto, #sequence > .sequence-canvas li .foto-prodotto{ position:relative; width:100%; height:240px; top:auto; left:auto; bottom:auto}

}