/*
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:0px;
  background-color: #fff;
/*  background-image: url("../images/bg-sequence.jpg");
  background-repeat: no-repeat;
  background-position: 50% 100%;*/
  height: 610px; border-bottom:0px solid #e1e1e1;
 
}
#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 {
  cursor: pointer;
  display: none;
  font-weight: bold;
  padding: 0px 0px;
  position: absolute;
  top: 80%;
  z-index: 1000;
  height: 75px;
  margin-top: -47.5px;
  font-size:30px; 
  color:#333;
}

.sequence-pause {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1000;
}

.sequence-paused {
  opacity: 0.3;
}

.sequence-prev {
  left: 0%;
}

.sequence-next {
  right: 0%;
}

.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:#333;
}


.sequence-next,
.sequence-prev {
  position: absolute;
  opacity: 0.8;
}

.sequence-next:hover,
.sequence-prev:hover {
  opacity: 1;
}

/*STILI SPECIFICI PER LE SLIDE*/
#sequence .sequence-canvas > li .container{ position:relative; width:100%; min-height:300px; height:100%; padding:0; box-sizing:border-box;  opacity:0; 
margin:0% 0% 0 30%}

#sequence .foto-fissa{ position:absolute; top:0px; z-index:-1; left:0; width:100%; height:350px; background-repeat:no-repeat; background-size:cover; 
background-position:center center; opacity:0;
right:0; left:auto}

.slider .text-container{ position:absolute; top:300px; height:300px; width:90%; left:5%; background:#fff601}
.slider .title {
	 font-weight:600;font-size:3.5em; color:#333; line-height:1.2em; 
	margin:0em 0 0em 0; padding:20px 0 5px 0; text-align:center; font-family:'Merriweather', serif;
}
.slider .title span{ color:#e4126f}

.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; padding:30px 0 0 0;}
.testo{ font-weight:100; font-size:1.1em; line-height:1.4em; padding:0em 20px;   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; 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; margin-left:0

}

#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;
}



/*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{}
	.slider .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:500px}
#sequence .foto-fissa{ height:250px }
.slider .text-container{ height:300px; width:100%; left:0; right:0; top:250px}
.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}
.slider .text-container{ height:310px;  top:210px}


#sequence .pul{ text-align:center}
	#sequence .testo{width:100%; box-sizing:border-box; padding:0 30px; }
	#sequence .title{ font-size:1.8em; margin-bottom:0em}

}

