/*
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;
 
  height: 800px;  border-bottom:0px solid #e1e1e1;
 font-family: 'Merriweather', serif;
 
}
#sequence > .sequence-canvas {
  height: 100%; padding-top:60px;
  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; opacity:0;
}
#sequence > .sequence-canvas > li.animate-in { opacity:1}
#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: 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; position:absolute; bottom:0; width:100%;
}
.sequence-pagination {  }
.sequence-pagination li {
}
#sequence .sequence-pagination li{}

.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:#fff;
}


.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:''; width:5px; background:rgba(0,0,0,0.05); top:0; bottom:0; right:0; display:block; z-index:100; position:absolute}
#sequence .sequence-canvas > li .container{ position:relative; width:100%; min-height:300px; height:100%; padding:0em 0em 0 0em; box-sizing:border-box;  opacity:0; 
margin:0% 0% 0 0%}
.text-container{ display:table; width:100%; height:100%; font-family: 'Merriweather', serif;}
.text-container .clm{ display:table-cell; vertical-align:middle}
.text-container .clm.image-container{ text-align:center}
.text-container .clm img{ max-width:300px; display:inline-block}
.side-slider{ width:35%; background:rgba(0,0,0,0.1); position:relative; padding-right:0}
.autore .side-slider{ background:none }
.title, #article h2.title {
	 font-weight:800;font-size: 2em;color:#fdf101; line-height:1.2em;  max-width:600px; text-transform:none; 
	margin:0em 0 0.5em 0; padding:0em; padding-top:15px;text-align:left !important; position:relative
}

.title a{ color:#fff}
#sequence > .sequence-canvas li .title a i, .title i{ color:#c0b08b; opacity:0.8}
.titoletto{ font-size:19px; letter-spacing:0.5px; font-weight:600;color:#c0b08b;  padding:10px 0 0 0; margin:0; font-weight:100; font-style:normal; text-align:center}
.titoletto span{ display:block; font-size:0.7em; color:#fff; padding:5px 0 0 0; font-style:normal;}
.testo, #article p.testo{ font-weight:100; font-size:1.1em; line-height:1.4em; padding:0.5em 100px 0.5em 0 !important; max-width:600px;  margin:0 0 1em 0 !important; font-weight:200; color:#fff; 
  text-align:left !important }
.testo strong{ color:#FFFFFF}
.barra{ margin:1.5em auto; height:6px; width:200px; background:#FFF}



#sequence .pul a{ display:inline-block; padding:10px 15px; letter-spacing:0.4px; font-weight:100; text-transform:uppercase; color:#666; background:#67a6d3; background:#fff;  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:#333 }
#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:100%; height:100%; background-repeat:no-repeat; background-size:cover; 
background-position:30% 0; opacity:0;
right:0; left:auto}
#sequence .foto-fissaxxxx::before{ content:''; position:absolute; width:
100%; height:100%; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.4+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */

}



/*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 0em 0.7em 0em;}
#sequence .animate-in .foto-prodotto{margin-top:0em; opacity:1}
#sequence .animate-in .foto-autore{margin-top:0em; opacity:1}

/* Middle Desktop Layout: 1100px */
@media only screen and (max-width: 1200px) {

}
/* Tablet Layout: 900px */
@media only screen and (max-width: 1030px) {
/*Stili per coda slider*/
#sequence{ width:100%; min-width:300px}
#sequence .sequence-canvas > li .container{  padding-top:2em}
.text-container .clm.side-slider{ display:none}
.title{ font-size:22px}

#sequence .sequence-canvas > li .container{ }
#sequence .sequence-canvas > li.internal .container{}

}

/* Tablet Layout: 768px */
@media only screen and (max-width: 790px) {
#sequence .sequence-canvas > li .container{ padding-top:1em}
#sequence.autore .sequence-canvas > li .container{ padding-top:0em}
.testo{}
.titoletto{ font-size:13px; }
.title{ font-size:2em}
.place{ font-size:15px}
.pul-vai{ text-align:center}
.pul-vai a{ font-size:1.2em}
.icon-slider{ padding:1em 0 0 0}
.icon-slider img{}
.evento .categoria{ font-size:15px}
#sequence .sequence-canvas > li img{}
#sequence{ height:350px; height:700px}
#sequence.autore{}
.foto-fissa{ }

	
}

/* Tablet Layout: 550px */
@media only screen and (max-width: 550px) {
	#box-portfolio{ display:inline-block; width:100%}
	/*Stili per coda slider*/
	.slider{ overflow:visible}
	#sequence{ overflow:visible}
#sequence .sequence-canvas > li.internal .container{  padding:0 15px; height:auto;  padding-top:0%; width:100%; margin:0; box-sizing:border-box}
#sequence .sequence-canvas > li .container{ width:100%; margin-left:0}
#container.home #sequence .text-container .clm{ vertical-align:bottom; display:block; width:100% !important;  height:auto}
.text-container .clm.image-container, #container.home #sequence .text-container .clm.image-container{ padding:100px 0 20px 0}
.spinner.top{ top:50px; height:30px}
.spinner.top li{ height:30px}
.spinner.top li a{ line-height:30px; font-size:15px}
.spinner.top ul{ padding:0 40px}
.spinner.top ul:before, .spinner.top ol:before{ width:40px; height:30px}
.arrow-up, .arrow-down, .arrow-left, .arrow-right{ width:40px}
.arrow-up a, .arrow-down a, .arrow-left a, .arrow-right a{ font-size:30px}

.text-container .clm img{ height:150px; width:auto}
.testo, #article p.testo{ padding:5px 20px 20px 20px !important}
.title, #article h2.title{ margin:0; padding:0 20px; font-size:20px}
.slider .gallery{ padding:0; display:none}
.sequence-pagination{ padding:0 0 7px 0}
.sequence-pagination li{ font-size:7px}


#sequence .animate-in .foto-fissa{ top:-30px}
#sequence .foto-fissa::before{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.clm.col-sx{ height:400px}
#sequence .pul{ text-align:center}
#sequence .testo{width:100%; box-sizing:border-box; padding:0 5em;}
#sequence .title{ font-size:16px; margin-bottom:10px; margin-right:0}
#sequence .categoria{ font-size:13px}
#stage .title{ font-size:20px; padding:0 0.5em}
.testata .foto-fissa{ background-position:40% 50%}

/*evento*/
#sequence .evento .title{ font-size:16px; padding-top:20px; text-align:center}
.evento .titoletto{ text-align:center; font-size:12px}
.place{ text-align:left; font-size:12px; display:none}
#sequence .evento .pul{ text-align:center}
.evento .title:before{ left:50%; margin-left:-50px}

.evento .foto-prodotto, #sequence > .sequence-canvas li.evento .foto-prodotto,  #sequence > .sequence-canvas li .foto-autore{ height:230px}

}