body{
background-color:white;
margin:0px;
font-family: 'Abel', 'sans-serif';
}

iframe {
  border: none;
  width: 100%;
}

.flex {max-width: 100%}

.rwd-video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.rwd-video iframe,
.rwd-video object,
.rwd-video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

p {
text-align:justify;
font-size:1.1em;
color:gray;
}

#skills-section{
text-align: center; /*contenuto centrato*/
margin-top: 50px; /*spazio superiore*/
}
.skill{
/*larghezza dei div skill, in pagina ne abbiamo 3 quindi 100 / 3
lasciando un po' di spazio per i margini
*/
width: 28%;
height:400px;
display: inline-block; /*questi div saranno posti uno a fianco all'altro*/
margin: 2%; /*un po di spazio tra i div*/
background-color: #2d3e50;
}	

.skill img{

max-width:100%;
max-height:100%:
}


@media screen and (max-width:1600px){

.skill{
/*larghezza dei div skill, in pagina ne abbiamo 3 quindi 100 / 3
lasciando un po' di spazio per i margini
*/
width: 40%;
display: inline-block; /*questi div saranno posti uno a fianco all'altro*/
margin: 2%; /*un po di spazio tra i div*/
background-color: #2d3e50;
}	
}

.container{
margin: 0 auto;
width:90%;
}

a{
color:gray;
text-decoration:none;
}

a:hover{
text-decoration:underline;
background:#f1f1f1;
}

h1{
letter-spacing:0.2em;
font-size:1.5em;
color:gray;
font-weight: 100;
margin-block-end: 0em;
}

h2{
text-align:center;
font-size:1.2em;
color:gray;
font-weight: 100;
}

h3{
text-align:center;
letter-spacing:0.3em;
font-size:1.3em;
color:#e83e3e;
margin-block-start: 0em;
font-weight: 100;
}


h4{
text-align:center;
font-size:0.8em;
color:gray;
font-weight: 100;
}




/*** Header ***/
#header {
width:100%;
position:fixed;
z-index:5000;
background-color:white;
}

#titolo{
text-align:center;
margin-top:1.1em;
}


/*** Nav ***/
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}

#nav li{
position:relative;
display:inline;
}

#nav a{
display:inline-block;
padding:20px;
width:80px;
}

#nav ul{
position:absolute;
z-index:1000;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:center;
background:#f1f1f1;
}

#nav ul li{
display:block;
}

#nav li:hover ul{
left:0;
}

#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
color: gray;
}

#nav li:hover ul a{
text-decoration:none;
background:none;
}

#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}

#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}

nav.collapsible > h2 {
 background-color: #D8F3F9;
 color: #333;
 font-size: 1.0625em;
 line-height: 30px;
 width: 97%;
 height: 30px;
 margin: 0;
 border: 1px solid #D1D3D4;
 padding-left: 10px;
 cursor: pointer;
}
nav.collapsible > h2.minus {
 background-color: #333;
 color: #D8F3F9;
}


/*** Content ***/
#main{
width:90%;
margin: 0 auto;
position:absolute;
left: 5%;
top:200px;
}

.home{
overflow:auto;
}


.home img{
}


.home p {
font-size:1.6vh;
text-align:justify;
letter-spacing:0.2em;
padding:2%;
}

.home li{
font-size:1.6vh;
text-align:justify;
letter-spacing:0.15em;
color:gray;
}

.home h2{
font-size:1.8vh;
color:gray;
}

.home a:hover{
text-decoration:none;
}

.testohome{
font-size:1em;
float:left;
width:32%;
}

.offertahome{
overflow:auto;
width:32%;
background:rgba(232,62,62,0.2);
float:left;
height:400px;
max-height:1000px;
margin-left:2%;
margin-right:2%;
}



.Dhome h2{
font-family: 'Abel', 'sans-serif';
letter-spacing:0;
font-size:3em;
color:white;
text-align:center;
}



.Ehome h2{
font-family: 'Abel', 'sans-serif';
letter-spacing:0;
font-size:3em;
color:white;
text-align:center;
}

.Ehomevideo h2{
font-family: 'Abel', 'sans-serif';
letter-spacing:0;
font-size:8em;
color:white;
text-align:center;
}

.testo{
width:65%;
margin: 0 auto;
}

.testoprivacy {
width:65%;
margin: 0 auto;
}

.testoprivacy p{
text-align:justify;
}

.testoprivacy a{
text-decoration:underline;
}

.testoprivacy li{
font-size:1.1em;
color:gray;
}

.testo h2{
text-align:center;
font-weight:600;
}

.testo li{
text-align:left;
font-size:1.1em;
color:gray;
}

.imgpromo{
margin: 0 auto;
width:60%;
}


#copertina{
height:auto;
margin-bottom:30px;
}
#menusmart{
}


.rwd-video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.rwd-video iframe,
.rwd-video object,
.rwd-video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
/*** Footer ***/
/*===Navigation===*/
nav#navigation{
}

nav#navigation ul ul {}

nav#navigation ul li:hover > ul 	{ display: block; }

nav#navigation  ul 
{
}


nav#navigation ul:after 
{

}

nav#navigation ul li {	 }

nav#navigation ul li a 	
{ 

}

nav#navigation ul li a:hover {}

nav#navigation ul ul 
{
}


nav#navigation ul ul li {

}


nav#navigation ul ul li a	
{
}	

}

nav#navigation ul ul li a:hover{text-decoration: underline;}

/*===BUTTON FOR RESPONSIVE MENU===*/
.btn-responsive-menu{
display:                none;
padding:                0px;
cursor:                 pointer;
color:                  #fff;
background:             #fff;
-webkit-border-radius:  4px;
-moz-border-radius:     4px;
border-radius:          4px;
}

	
.icon-bar{
display:                 block;
width:                   28px;
height:                  3px;
margin:                  7px;
background-color:        #f4421a;
-webkit-border-radius:   2px;
-moz-border-radius:      2px;
border-radius:           2px;
}


.show{display:block!important;}

#social{
	text-align:center;
}

/*===SEZIONE BLOG===*/

.blog{
margin: 0 auto;
width:65%;
overflow: auto;
}

.datablog p{
text-align:left;
font-size:1.0em;
margin-block-start: 0.2em;
font-weight:700;
}
.titoloblog{
background-color:#f1f1f1;
}
.titoloblog h2{
text-align:left;
font-size:1.5em;
margin-block-end: 0em;
}

.eventoblog{
}

.eventoblog p{
text-align:justify;
font-size:1.1em;
}

.imgeventoblog{
float:left;
width:25%;
margin: 0px 60px 0px 0px
}
.imgeventoblogright{
float:right;
width:40%;
margin: 0px 60px 0px 0px
}

.imgeventoblogleft{
float:left;
width:40%;
margin: -20px 40px 0px 0px
}

.readmore{
text-align:left;
}
.readmore a{
font-weight:700;
font-size:0.9em;
}

.articoloblog p{
text-align:justify;
font-size:1.1em;
}

.articoloblog img{
margin-top:30px;
}

.articoloblog li{
font-size:1.1em;
color:gray;
}

.bloccoblog{
overflow:auto;
}

.bloccoblog p{ 
font-size:1.1em;
margin-top:30px;
}

/* contenitore base */
.image-container {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    -webkit-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
}
 
/* immagine al interno del contenitore */

/* contenitore con didascalia */
.image-container .image-caption {
    width: 100%;
	height: 100%;
    position: absolute;
	text-align:center;
    background: rgba(0,0,0, 0.2);

}
 
 .image-container h2{
 }
 
/* titolo */
.image-caption h2 {
}
 
/* descrizione dell'immagine  */
.image-caption p {

}
 
/* Tipi di animazioni apparizione didascalie */
 
/* animazione da sinistra*/
 
.image-container .caption-1 {
    left: -2600px;
    transition: all 0.5s;
}
.image-container:hover .caption-1 {
    left: 0;
    transition: all 0.5s;
}

/* animazione da destra */
.image-container .caption-4 {
    right: -2600px;
    transition: all 0.5s;
}
.image-container:hover .caption-4 {
    right: 0;
    transition: all 0.5s;
}

/* animazione da sopra */
.image-container .caption-2 {
    top: -2600px;
    transition: all 0.5s;
}
.image-container:hover .caption-2 {
    top: 0;
    transition: all 0.5s;
}

.image-container img {
    height: 100%;
    position: absolute;
}
.Dhome{
float:left;
width:32%;
overflow:hidden;
height:400px;
}

.Ehome{
width:32%;
height:400px;
overflow:hidden;
display:block;
float:left;
margin: 0 2% 2% 2%;
}

.Ehomevideo{
width:32%;
height:400px;
overflow:hidden;
display:block;
float:left;
margin: 0 2% 2% 2%;
}

/*===Media Queries===*/
@media all and (min-width: 1441px){
#copertinasmart{display:none;}
#menusmart{display:none;}
#home1920{}
#home1440{display:none;}
#home1024{display:none;}
#home799{display:none;}

nav#navigation{
margin:       0;
}

nav#navigation li#port{
background: url("../img/freccia.png") no-repeat 80% 100%;
background-size: 10% 10%;
}
#menusmart{
display: none;
}

.testohomesmart{
display:none;
}

.footercontent{
}

.footercontentsmart{
display:none;
}


.Ehomevideosmart{
display:none;
}

.caption{
display:none;
}

.testohome{
height:400px;
}
}

@media all and (min-width: 1025px) and (max-width: 1440px){
#copertinasmart{display:none;}
#menusmart{display:none;}
#home1440{}
#home1920{display:none;}
#home1024{display:none;}
#home799{display:none;}

#main{
width:90%;
}

.home h2{
 font-size:2.2vh;
}

.home p{
font-size:1.9vh;
}

.home li{
font-size:1.9vh;
}

.image-caption h2 {
font-size:3vw;
}
 
}



@media all and (min-width: 300px) and (max-width: 1024px) { 
#home1920{display:none;}
#home1440{display:none;}
#home1024{display:none;}
#home799{}
#copertina{}

.home h2{
font-size:2.2vh;
}

.home p{
font-size:1.9vh;
}

.home li{
font-size:1.9vh;
}

#copertinasmart{
height:auto;
}
#main{
top:110px;
}

h1{
letter-spacing:0em;
font-size:3.0vh;
color:gray;
font-weight: 100;
margin-block-end: 0em;
}

h2{
font-size:2.2vh;
}

h3{
font-size:2.5vh;
}

p{
font-size:2.15vh;
}


.scrollit{
height:450px;
overflow:auto;
}

nav#navigationsmart{
margin:       0;
display:      none;
}

nav#navigationsmart ul li {
float:        none; 
display:      block; 
width:        100%; 
}

nav#navigationsmart  ul li a 	
{ 
height:        45px;
line-height:   45px;
font-size:     1.1em;
padding:       10px;
}

nav#navigationsmart  ul li a:hover  	
{ 
color:           #f4421a;          
}

nav#navigationsmart ul ul {
width:         100%;
position:      relative;
display:       table;
}


nav#navigationsmart ul ul li a	
{	
font-size:     .85em;	
height:        40px;
line-height:   40px;
padding:       0 10px 0 30px;
}

nav#navigationsmart ul ul li a:hover 
{
color:           #f4421a;          
text-decoration: none; 
}


nav#navigationsmart ul ul ul 
{
width:         100%;
margin:        0 0 0 -100%;	
border:        0px solid #af3738;
}	


nav#navigationsmart ul ul li ul 
{
width:         100%;
position:      relative;
}


.btn-responsive-menu
{
display:      block;
position:     absolute; 
top:          15px; 
left:        3px; 
}
#menunorm{
display: none;
}
#menunorm{
display: none;
}

.blog{
margin: 0 auto;
width:100%;
}

.titoloblog h2{
font-size:2.8vh;
}

.datablog p{
font-size:2.4vh;
}

.eventoblog p{
font-size:2.2vh;
}

.articoloblog p{
font-size:2.2vh;
}

.articoloblog li{
font-size:2.2vh;
}

.imgeventoblog{
float:left;
width:40%;
margin: 0px 20px 0px 0px
}

.testoeventoblog{
float:left;
width:40%;
margin: 0px 20px 0px 0px
}

.testo{
width:100%;
}

.testoprivacy {
width:100%;
}

.bloccoblog p{ 
margin-top:10px;
}

.testohome{
display:none;
}

.footercontentsmart{
}

.footercontent{
display:none;
}

.Dhome{
width:100%;
margin-bottom:1%;
}

.Ehome{
width:100%;
margin-left:0%;
margin-right:0%;
margin-bottom:1%;
}

.Ehomevideo{
display:none;
}

.Ehomevideosmart{
margin-top:1%;
}


.testohome{
float:none;
width:100%;
margin-bottom:1%;
}

.image-container img{
max-width:100%;
max-height:100%:
}
.image-container{

}
 .image-container {
display:none;
 }
 
 .image-caption{
 display:none;
 }
 
 
 
 .caption {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.caption img {
 width:100%;
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
}
.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.2);
    position: absolute;
    left: 0;
    top: 0;
}
.caption span strong {
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}

 
 
 

}

@media all and (min-width: 300px) and (max-width: 900px) and (orientation:landscape){ 

h1{
letter-spacing:0.4vw;
font-size:3.0vw;
color:gray;
font-weight: 100;
margin-block-end: 0em;
}

h2{
font-size:2.5vw;
}

h3{
font-size:2.4vw;
}

p{
font-size:2.3vw;
}


.scrollit{
height:270px;
overflow:auto;
}

.home h2{
font-size:2.8vw;
}

.home p{
font-size:2.2vw;
}

.home li{
font-size:2.2vw;
}
#main{
top:80px;
}

.titoloblog h2{
font-size:2.8vw;
}

.datablog p{
font-size:2.4vw;
}

.eventoblog p{
font-size:2.2vw;
}

.articoloblog p{
font-size:2.2vw;
}

.articoloblog li{
font-size:2.2vw;
}

}

************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; }


.rwd-video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0px;
    position: relative;
}
.rwd-video iframe,
.rwd-video object,
.rwd-video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}