@import url('http://fonts.googleapis.com/css?family=Roboto|Lato|Work+Sans:100,200,300,400,500');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

body
 {
    line-height: 1;
    margin: 0; padding: 0;
    
}
ol,
ul 
{
    list-style: square;
    color:#2980b9;   
    
}



strong 
{
	
	    color:#2980b9;    
}

a 
{   
    text-decoration: none;
    color: #2980b9;
}
a:hover
{   
    text-decoration: underline;
}


em 
{
    font-style: italic
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
:focus {
    outline: none
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section 
{
    display: block
}
html {
    box-sizing: border-box
}
*,
*:before,
*:after {
    box-sizing: inherit
}
_:-ms-fullscreen,
:root .page {
    display: block;
    -webkit-box-orient: none;
    -moz-box-orient: none;
    box-orient: none;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: none;
    -moz-flex-direction: none;
    flex-direction: none;
    -ms-flex-direction: none
}
.page {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    min-height: 100vh
}



.site-nav
 {
    margin: auto;
    max-width: 960px;
    background-color:#fff; 
}

@media (max-width: 900px) 
{
    .site-nav 
    {
        height: 60px;
        overflow: hidden;
        padding: 0px 0px;
        -webkit-transition: height 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -moz-transition: height 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: height 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    }
}
@media (min-width: 900px)
 {
    .site-nav 
    {
        margin-bottom: 10px;
        overflow: visible;
  
    }
}

.site-nav__logo
 {
    display: block;
    position: absolute;
    margin: 10px;
}
.site-nav__toggle
 {
    border-radius: 3px;
    cursor: pointer;
    height: 36px;
    position: absolute;
    right: 10px;
    top: 12px;
    width: 40px;    
	 background-color:#8CC63E;
    
}
.site-nav__toggle:after,
.site-nav__toggle:before
 {
    border-bottom: 2px solid #FFF;
    box-sizing: content-box;
    content: "";
    left: 10px;
    position: absolute;
    width: 20px;
    background: #8CC63E;
}
.site-nav__toggle:after 
{
    top: 19px;
    height: 4px;
     content: "";
     background: #8CC63E;
}
.site-nav__toggle:before {
    top: 11px;
    height: 4px;
    border-top: 2px solid #fff;
    background: #8CC63E;
}
@media (min-width: 900px)
 {
    .site-nav__toggle 
    {
        display: none
    }
}

@media (max-width: 900px) 
{
    .site-nav__items 
    {
        background: #fff;
        height: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 30px;
    }
}
@media (min-width: 900px) 
{
    .site-nav__items 
    {
        float: right;  
        /*border : 1px solid #000000;   */     
    }
}
.site-nav__item 
{
    height: 24px;
    margin: 6px;   
    list-style: none; 
}


@media (max-width: 900px) 
{
    .site-nav__item:first-child
     {
        margin-top: 12px
     }
}
@media (min-width: 900px) 
{
    .site-nav__item 
    {
        float: left
    }
}


.site-nav__link 
{
    color: #04AEDA;
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 15px;
    line-height: 36px;
    text-decoration: none
}
@media (max-width: 900px) {
    .site-nav__link 
    {
        display: block;
        padding: 0 10px
    }
    .site-nav__link:hover 
    {
        background: rgba(41, 128, 185, 0.1)
    }
}
@media (min-width: 900px) {
    .site-nav__link
     {
        color: #04AEDA;
        margin-left: 10px;
    }
    .site-nav__link:hover
     {
        color: #222222;
    }
}
.site-nav__link--you-are-here
 {
    font-weight: 500
}

@media (max-width: 900px) {
    .site-nav--open 
    {
        height: 200px;
        overflow: visible;
        -webkit-transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -moz-transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }
    .site-nav--open .site-nav__toggle {
        background: rgba(255, 255, 255, 0.1)
    }
    .site-nav--open .site-nav__items {
        -webkit-transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -moz-transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       height: 200px;
    }
}


.page__header 
{
    background: #2980b9;
}


.page__content 
{
    margin: 36px 0;
}

/* for big images */

h1
{    
    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 32px;
    font-weight: 200;
    margin: 36px 0 24px 0;
    line-height: 120%;
    text-align: left;

}

h2
{    
    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 200;
    margin: 36px 0 24px 0;
    line-height: 120%;
    text-align: left;
}

@media (min-width: 1024px) 
{
    h1
    {
        font-size: 40px;
    }
    
}

@media (min-width: 1024px) 
{
    h1 {
        margin: 72px 0 36px 0
    }
}




h3 {
    color: #3D4448;
    margin: 36px 0 12px 0;
    font-family: "Lato", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 20px;
    font-weight: 200;
    line-height: 30px;
}


@media (min-width: 1024px) 
{
    h2 
    {
        font-size: 32px;
        line-height: 40px;

    }
}
@media (min-width: 1024px)
{
    h2
    {
        margin: 48px 0 12px 0
    }
}

h3
{
    margin: 24px 0 12px 0;
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 300
}

@media (min-width: 1024px)
{
    h3
    {
        font-size: 22px;
        line-height: 28px
    }
}

@media (min-width: 1024px) {
    h3
    {
        margin: 36px 0 12px 0
    }
}


.page__container 
{
    margin: auto;
    max-width: 960px;
    padding: 0px 10px 18px 10px;
   /* border: 1px solid #00FF00;    */
}
.page__container::after 
{
    clear: both;
    content: "";
    display: table
}
@media (min-width: 900px) 
{
    .page__container 
    {
        padding: 0px 45px 45px 45px; 
    }
}
@media (min-width: 1024px) 
{
    .page__container 
    {
        padding: 0px 90px 45px 90px;
    }
}

.red
{
    background-color: red;    
    color: #ffffff;
}

.blue
{
    background-color: #0064c8;    
    color: #ffffff;
}


.page__context
{
    margin: auto;
    width: 100%;
    padding: 0px 10px 18px 10px;
    /*border: 1px solid #00FF00;*/
    background-color: #222222;    
    color: #ffffff;
}

.page__context::after 
{
    clear: both;
    content: "";
    display: table
}
@media (min-width: 900px) 
{
    .page__context 
    {
        padding: 0px 45px 45px 45px; 
    }
}
@media (min-width: 1024px) 
{
    .page__context 
    {
        padding: 0px 90px 45px 90px;
    }
}

.page__footer
{
    margin: auto;
    width: 100%;
    padding: 0px 10px 18px 10px;
    /*border: 1px solid #00FF00;*/
    background-color: #1c1c1c;    
    color: #ffffff;
}


.formatted 
{
    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 22px;
   /* border: 1px solid #0000FF;  */
}

.formatted.middle
{
    width: 80%;
    display: block;
    margin: auto;   
}


@media (min-width: 900px) 
{
    .formatted 
    {
        font-size: 100%;
        font-weight: 100;
        line-height: 200%;
    }
}

   

.formatted h1
{   
    
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom:4px solid red;
    /*display:inline-block;*/  
     border-bottom-width: 4px; border-bottom-style: solid; 
}

.formatted h2
{   
    padding-top: 10px;
    font-size: 32px;      
    line-height: 200%;
    padding-bottom: 20px;

    border-bottom:4px solid gray;
    
    /*width: 100%;*/
}



.formatted p 
{   
    /*width: 100%;*/
      font-size: 120%;  
    
}

.formatted blockquote 
{   
    margin: 32px 0; background:#eaf3f8;color:#2980b9;padding:16px 16px;width: 100%;
}




.formatted img
{   
    display: block;
    margin: 0 auto;   
    	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.formatted img:hover
{
	opacity: .8;
}


.formatted video
{   
  
    display: block;
    width: 80%;
    margin: auto;

   /* padding: 64px 0;*/
  
}



@media (min-width: 1024px) 
{
    .formatted p 
    {
        margin-top: 18px;
    }
}


.footer 
{
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    width: 960px;
    margin: auto;
    color: #888888;
      overflow: auto;
   /* border: 1px solid #0000FF;  */
}

@media (min-width: 900px) 
{
    .footer 
    {
        font-size: 15px;
        line-height: 24px;
    }
}
@media (max-width: 1024px) {.footer{width: 100%;} }



.footer h2 
{   
    font-size: 200%;
     color: #a5a5a5;
}

a.footer
{   
    text-decoration: none;
}
a.footer:hover
{   
    color: #ffffff;
}


.footer p 
{   
    /*width: 100%;*/    
}

@media (min-width: 1024px) 
{
    .footer p 
    {
        margin-top: 32px;
    }
}

.title
{
    color: #3D4448;
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    padding : 0px;     
}

a.title
{
    text-decoration:none;      
    
}
a.title:hover
{
    /*text-decoration:underline;  */
    color: #3295af;  
}

.row
{   
   width: 100%;	  
   overflow: auto;
    /*
   margin: 0px 0 ;
   padding: 0px 0;  
    */
}
.row:after
{
    content: "";
    display: table;
    clear: both;
}
/* media render */
@media (max-width: 900px) { .row{margin: 6px 0;padding: 6px 0;} }



/* context & parent */

.context
{   
   width: 100%;	  
   overflow: auto;
   margin: 16px 0;    
   padding: 10px 0; 
}

.context:after
{
    content: "";
    display: table;
    clear: both;
}
/* media render */
@media (max-width: 900px) { .context{margin: 6px 0;padding: 6px 0;border:0px;} }

.context.cell
{
   float: left;
   width: 60.99999%;
   font-size:90%;
   border: 0px;
   padding: 0px 16px;     
}  
@media (max-width: 900px) { .context.cell{margin: 6px 0;padding: 6px 0; width: 100%;} }

.context.image
{
    width: 240px;
    height: auto;
    overflow: hidden;
    position: relative;
    margin 0 auto;
    border: 0px;
    float: left;
}  
.context.image.media
{
    width: 100%;
    margin: 0 auto;

}
@media (max-width: 900px) { .context.image{margin:0 auto;padding:0 auto; width: 100%;} }




.parent
{   
   width: 100%;	  
   overflow: auto;
   margin: 16px 0;    
   padding: 10px 0; 
   border-top: 1px solid #e7e7e7;
}

.parent:after
{
    content: "";
    display: table;
    clear: both;
}
/* media render */
@media (max-width: 900px) { .parent{margin: 6px 0;padding: 6px 0;border:0px;} }

.parent.cell
{
   float: left;
   width: 60.99999%;
   font-size:90%;
   border: 0px;
   padding: 0px 16px;     
}  
@media (max-width: 900px) { .parent.cell{margin: 6px 0;padding: 6px 0; width: 100%;} }

.parent.image
{
    width: 240px;
    height: auto;
    overflow: hidden;
    position: relative;
    margin 0 auto;
    border: 0px;
    float: left;
}
@media (max-width: 900px) { .parent.image{margin:0 auto;padding:0 auto; width: 100%;} }

.parent.image.media
{
    width: 100%;
    margin: 0 auto;
}




.split 
{
    /*display: block;*/
   padding-right: 36px;
   float: left;
   width: 49.99999%;	   
   margin: 32px 0;
   /*padding: 16px;*/
   /*border: 1px solid #FF0000;*/
 
   clear: right;
}
/* media render */
@media (max-width: 900px) { .split{width: 100%; margin: 6px 0;padding: 0px;} }


.split.center
{
   align-content: center;
}



.split > h2
{     

    /*margin: auto;  */
   
   /*border: 1px solid #d4d4d4*/
}

.split > p
{     
    display: block;
    margin: 16px 0;  
    width: 100%;     
   /*border: 1px solid #d4d4d4*/
}

.split > img
{ 
    /*width: 80%;*/
    display: block;
    margin: auto;
    /*height: 100%;*/
   /*border: 1px solid #d4d4d4*/
}

.split > video
{
 
    width: 100%;
    display: block;
    margin: 0 auto;   
    border: 1px solid #777777;
        	/*box-shadow: 0px 2px 6px #121212;*/
}
@media (max-width: 900px) { .split > video{width: 100%;} }


.split.small 
{
   padding-right: 10px;
   float: left;
   width: 24.99999%;	   
   margin: 16px 0;
   padding: 16px; 
       overflow: auto;
    
}
@media (max-width: 1024px) { .split.small {width: 50%;} }
@media (max-width: 900px) { .split.small {width: 94%;   padding: 0px;   margin: 16px 0; } }


.split.small > p
{
    width: 80%;
    font-size: 80%;
}
.split.small > img
{
  width: 80%;  
}

.split.media 
{
   padding-right: 10px;
   float: left;
   width: 24.99999%;	   
   margin: 0px 0;
   padding: 16px;
   border: 1px solid #bebebe;
   background-position: center center;
   background-repeat: no-repeat;
   overflow: hidden; 
   
}
@media (max-width: 1024px) {.split.media  > video{width: 48%;} }
@media (max-width: 900px) { .split.media  > video{width: 100%;} }

.split.box 
{
        
}

.split.box > h2
{
         margin: auto;   
}






.review
{
   
    color: #909da5;
    margin: 18px 0;
    padding-left: 10px;
    position: relative;
    font-family: "Noto Serif", "Georgia", "Cambria", "Times New Roman", "Times", serif, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 28px;
}


.linkbutton
{
    font-family: "Roboto", "Georgia", "Cambria", "Times New Roman", "Times", serif, serif;
   
	border-radius: 5px;
    background-color: #CCC;
	/*box-shadow: inset 0px 2px 8px #888888;*/
    border: 1px solid #ffffff;
    color: white; 
	padding: 12px 20px;
	margin:0 auto;
	margin-top:20px;
    display: inline-block;
	font-size: 16px;
	min-width: 200px;
	text-align: center;
	cursor: pointer;	
	   -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}
@media (max-width: 900px) { .linkbutton{margin: 6px 0; width: 100%;} }








A.linkbutton
{
       
    text-decoration:none;
}

A.linkbutton:hover
{
   background-color: #ABABAB;   
	text-decoration:none; 
	color: white;
}


.linkbutton.blue
{
    background-color:#04AEDA;
}

.linkbutton.redborder
{
    background-color:white;
    border: 1px solid red;
    color: red;
}
.linkbutton.redborder:hover
{
    background-color:red;
    border: 1px solid red;
    color: white;
}



.linkbutton.red
{
    background-color:red;
}


.linkbutton.orange
{
    background-color:#ffa300;
}

.linkbutton.green
{
    background-color:#8CC63E;
}




.linkbutton.bgray
{
   background-color:#F7f7f7;
	color: #444444;
	box-shadow: none;
	border: 1px solid #A9A9A9;	
}


.cover
{       
    color: #ffffff;    
    font-family: "Lato", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
        line-height: 300%;
}
@media (max-width: 900px) { .cover{margin: 0 ; visibility: hidden;  display: none;} }

.cover > h1
{ 
    font-size: 48px;
    font-weight: 200;
    margin: 20px 0 ;
    line-height: 100%;
    text-align: left;   
}
.cover > h2
{ 
    font-size: 32px;
    font-weight: 200;
    margin: 20px 0 ;
    line-height: 100%;
    text-align: left;   
}





.column
{
      margin: 32px 0 ;
	  -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-width: 100%; /* Chrome, Safari, Opera */
    -moz-column-width: 100%; /* Firefox */
    column-width: 100%;    
}

@media (max-width: 900px) { .column { column-count: 1; -moz-column-count: 1;   -webkit-column-count: 1;} }

.column > img
{ 
   margin: 10px;
   width: 100%;    
}


/* for big images */

.imagefit
{

    clear: both;
    display: block;
 
    width: 100%;
}

/* stile per le note interessante */


p.note{  border-radius: 4px; ; background:#eaf3f8;color:#2980b9;padding:12px 20px;width: 100%;}
/*p.note{background:#2980b9;color:#ffffff;padding:24px 20px;	border-radius: 5px;width: 100%;}*/
p.note:before{content:;font-weight:500}
p.note a{text-decoration:underline}







.footer-social-icons
 {
 	   padding: 12px;
 	
}


 /* Style all font awesome icons */
.fa {
    padding: 12px;
    font-size: 24px;
    width: 48px;
    height: 48px;
    text-align: center;
    text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook 
{
    background: #3B5998;
    color: white;
}

/* Twitter */
.fa-twitter {
    background: #55ACEE;
    color: white;
} 


/* Twitter */
.fa-youtube 
{
    background: #ff0000;
    color: white;
} 


.fa-youtube-play 
{
    color: white;
    padding: 12px;
    font-size: 32px;

} 


/* Twitter */
.fa-clock-o{ color: #cccccc; font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:10px;} 
.fa-clock-o.orange
{ 
color: #ffa300; 
    padding: 12px;
    font-size: 16px;
 } 
.fa-video-camera{ color: #cccccc; font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:10px;} 
.fa-clock-o{ color: #cccccc; font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:10px;} 
.fa-google-plus{    background: #ff0000;    color: white;} 
.fa-phone{  color:   #a8a8a8;font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:16px; } 
.fa-skype{  color:   #a8a8a8;font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:16px; } 
.fa-envelope-o{  color:   #a8a8a8;font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:16px;} 
.fa-phone-square{  color: #cccccc;font-size: 16px;padding: 4px;width: 16px; height: 16px;margin-right:16px;}