html, body
{
	height: 100%;
}

body
{
	margin: 0px;
	padding: 0px;
	background: #FFFFFF url(images/circuits.png) repeat;  /* bg01.png */
	font-family: Arial; 
	font-size: 12pt;
	font-weight: 300;
	color: #363636;
}

h1, h2, h3
{
	margin: 0;
	padding: 0;
}

p, ol, ul
{
	margin-top: 0px;
}

p
{
	line-height: 150%;
}

strong
{
	font-weight: 600;
}

a
{
	color: #2C6503;
}

a:hover
{
	text-decoration: none;
}

a img
{
	border: none;
}

	.image
	{
		display: inline-block;
	}
	
		.image img
		{
			display: block;
			width: 100%;
		}

	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
		display: block;
		margin: 0 0 2em 0;
	}

		.image-centered img
		{
			margin: 0 auto;
			width: auto;
		}

hr
{
	/* display: none; */
}

/** WRAPPER */

#wrapper 
{
  	background: #FFFFFF url(images/circuits.png) repeat; 
}

.container
{
	width: 1010px;       /* 1350px;  larghezza complessiva */
	margin: 0px auto;
}

.clearfix
{
	clear: both;
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header
{
	position: relative;
	height: 75px;              /* 150px; altezza dell'Header */
}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		position: absolute;
		top: .9em;                         /* 3em  posizione verticale titolo */
		left: 0;
		width: 100%;
	}
	
	#logo h1
	{
		display: inline-block;
		font-size: 3.5em;                  /* 2.5em;  font size del titolo */
		/* text-transform: uppercase; */   /* eliminata */
		font-weight: 700;                  /* smagrisce il titolone */
		color: #FFF;
	}
	
	#logo a
	{
		text-decoration: none;
		color: #FFF;               /* #FFF; cambia il colore del font del titolo */
	}

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/

	#menu
	{
		position: absolute;
		right: 0;
		top: 4.8em                /* 0;  posizione vert del men  */
	}

	#menu ul
	{
		display: inline-block;
	}

	#menu li
	{
		display: block;
		float: left;
		text-align: center;
	}

	#menu li a, #menu li span
	{
		display: block;
		padding: 0em 1.1em;         /* 0em 1.5em pos vert e spazio horz tra le voci di men  */
		height:  2.1em;             /* 150px; altezza banda pi  scura su Home */
		letter-spacing: 0.14em;
		line-height: 2.0em;         /* 1.8em  150px; posizione linea del men  */
		text-decoration: none;
		font-size: 0.90em;          /* 0.90em;  */
		font-weight: 700;           /* 600 smagrisce il font del men  */
		text-transform: uppercase;
		outline: 0;
		background: rgba(0,0,0,0.5);
		color: #FFF;
	}

	#menu li:hover a, #menu li.active a, #menu li.active span
	{
	}

	#menu .current_page_item a
	{		
		background: rgba(0,0,0,1);
		color: #EFF;                 /* colore del testo evidenziato come "current page" */
	}

/*********************************************************************************/
/* Page                                                                          */
/*********************************************************************************/

	#page
	{
		position: relative;
    	overflow: hidden;
		padding: 0em 0em 3em 0em;    /* {6em 0em 5em 0em} 1: superiore 2: da destra 3: inferiore 4: da sinistra*/
	}

/*********************************************************************************/
/* Content                                                                       */
/*********************************************************************************/

	#content
	{
		float: right;
		width: 737px;         /* 790px */
	}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

	#sidebar
	{
		float: left;
		width: 263px;        /*  345px;  */
	}
	
	#sidebar .title h2
	{
		font-size: 1.6em;
	}
	
	#sidebar .box1
	{
		margin-top: .7em;
		margin-bottom: 3em;
	}

/*********************************************************************************/
    .imgright 
	{
        float: right;
        margin: 0 0 10px 10px;
    }
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

	#footer
	{
	}

/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

#header-wrapper
{
	overflow: hidden;
	height: 145px;                             /* 600px altezza del wrapper della intestazione */
	
 	background: url('images/CrinaleMarittime2.jpg') no-repeat top center; 


	
    /* background-size: 100%;  */              /* tolta: l'immagine dell'header non   pi  stretched */
}

#header-wrapper:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('images/circuits.png');
	opacity: .1;
}

#header-wrapper2
{
	background: rgba(0,0,0,.1);
	box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,.05);
}
	ul.style2
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style2 li
	{
		/*border-top: solid 1px #E5E5E5;*/
		padding: 0.15em 0;
	}
	
	ul.style2 li:first-child
	{
		border-top: 0;
		padding-top: 0.6em;
	}

	ul.style3
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style3 li
	{
		padding: 0.15em 2.0em;
	}
	
	ul.style3 li:first-child
	{
		border-top: 0;
		padding-top: 0.6em;
	}

	ol.style4
	{
		margin: 0;       
		padding: 20px;   
	}
	
	ol.style4 li
	{
		padding: 0.3em 0;
	}
	
	ol.style4 li:first-child
	{
		padding-top: 0; 
	} 

/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/

	#portfolio-wrapper
	{
  		background-color: #333330; /* #606058; */
		padding: 2em 0em; 
	}
	
	#portfolio
	{
		overflow: hidden;
		text-align: center;	
		color: #FFFFCC; 
	}
	
	#portfolio .title h2 
	{
		color: #FFF;    
	}

	#portfolio .title h3
	{
		color: #FFF;    
		margin-bottom: 0.6em;	
		letter-spacing: 0.06em;
		font-weight: 500;            
	}

	#portfolio .byline
	{
		color: #FFFFCC; /* #A3BD77; */
	}

	#portfolio .byline a
	{
		color: #F8F8F8;
		text-transform: none;
	}

	#portfolio a:hover
	{
		color: #FFFFFF;
	}
	
	#portfolio .byline a:hover
	{
		color: #FFCC00;
	}
	
	#column1,
	#column2,
	#column3,
	#column4
	{
  		background-color: #434340; /* #686860; */
		width: 24%; 
		float: left;
		margin-bottom: 1.5em;
		margin-right: 1%; 
		height: 11.5em; 
		overflow: hidden;
	}
	#column4
	{
		float: right;
	}
	


/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		overflow: hidden;
		padding: 2em 0em .5em;
	}

	#copyright p
	{
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: #6F6F6F;
	}
	
	#copyright a
	{
		text-decoration: none;
		color: #8C8C8C;
	}

/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/

	.title
	{
		margin-bottom: 3em;  /* 3em */
	}

	.title h1
	{
		letter-spacing: 0.09em;
		font-weight: 800;            /* smagrisce il titolo, nel "corpo" */
		font-size: 4em;
		color: #b78707;
	}

	.title h2
	{
		letter-spacing: 0.11em;
		font-weight: 700;            /* smagrisce il titolo, nel "corpo" */
		font-size: 2em;
		color: #171717;
	}

	.title h3
	{
		letter-spacing: 0.11em;
		font-weight: 700;            /* smagrisce il titolo, nel "corpo" */
		font-size: 1.4em;
		color: #171717;
	}

	.title h4
	{
		letter-spacing: 0.1em;
		font-weight: 400;            /* smagrisce il titolo, nel "corpo" */
		font-size: 1em;
		color: #171717;
	}

	.title .byline
	{
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;            /* smagrisce il sotto-titolo, nel "corpo" */
		font-size: 0.90em;
		color: #6F6F6F;
	}

	.title .bylineRight
	{
		letter-spacing: 0.15em;
		font-weight: 400;            /* smagrisce il sotto-titolo, nel "corpo" */
		font-size: 0.90em;
		color: #6F6F6F;
		float:right
	}

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button                                       /* i grossi buttons in basso*/
	{
		display: inline-block;
		margin-left: 0.2em;
		margin-top: .1em;		/* 2em; */
		padding: .25em 1em;
		background: #FFFFE8; /*= giallo pallido;  verde = #5F9703 */;
		border-radius: 6px;
		border: 1px solid #B07000;   
		-moz-transition: opacity 0.25s ease-in-out;
		-webkit-transition: opacity 0.25s ease-in-out;
		-o-transition: opacity 0.25s ease-in-out;
		-ms-transition: opacity 0.25s ease-in-out;
		transition: opacity 0.25s ease-in-out;
		letter-spacing: 0.20em;
		text-decoration: none;
		/*text-transform: uppercase;*/
		font-weight: 500;
		font-size: 0.90em;
		color: #000;		/* #FFF;  */
	}

		.button:hover
		{
			background-color: #FFFFCC;  
		}
		
		.button:active
		{
			/* background-color: #b78707; */
		}
			
    	.disabled 
		{
            opacity: 0.6;
            cursor: not-allowed;
        }
		
	.buttonWide
	{
		margin-left: 0em;
		padding: 1em 3em;
		text-transform: uppercase;
		font-weight: 600;
	}
	.buttonWideBook
	{
		margin-left: 0em;
		padding: 0.05em 3em;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.0em;
	}
	.buttonBookTitle
	{
		margin-left: 0em;
		padding: 1em 1em;
		/*text-transform: uppercase;*/
		letter-spacing: 0.11em;
		font-weight: 600;            /* smagrisce il titolo, nel "corpo" */
		font-size: 1.5em;
		
		
	}
    /* 
	.buttonPortfolio
	{
  		height: 1.6em; 
		width: 70%;
		margin-left: 0em;
		margin-bottom: 2em;
		padding: 1.8em 1em;
		font-weight: 600;
		color: #808080;
		text-transform: uppercase;
		border-radius: 2px;
		border: 0;   
    	-webkit-transition-duration: 0.4s; 
    	transition-duration: 0.4s;	}
		
	.buttonPortfolio:hover
	{
		background-color: #B0B0B0; 
    	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	}
	*/
	
	.buttonSub 
	{
		margin-left: 0.2em;
		margin-top: 0em;
		padding: .05em .3em;
		background: #FFFFFF; 
		border-radius: 3px;
		border: 1px solid #5F9703;
		font-weight: 500;
		font-size: 0.90em;		
	}

	.buttonFixes 
	{
		padding: .05em .3em;
		background: #E0F0FF;        /* #96F9FE; */
		border-radius: 3px;
		border: 1px solid #5F9703;
		font-weight: 500;
		font-size: 0.90em;		
	}
		.buttonFixes:hover
		{
			background-color: #B0C0DF; /*#CFCFC8; /*#96F9FE; /* #CFCFB8; */
		}

	.buttonFixItem
	{
		padding: .05em .3em;
		background: #FFFFE8; /*= giallo molto pallido */;
		border-radius: 3px;
		border: 1px solid #5F9703;
		letter-spacing: 0.05em;
		font-weight: 500;
		font-size: 0.90em;		
	}
		.buttonFixItem:hover
		{
			background-color: #FFEFA8; 		}

		
/*********************************************************************************/
/*  Version Note Sub-Titles                                                      */
/*********************************************************************************/
    .DeedsSubTitle
	{   background-color: #E6F5FF; 
	    border: ridge; 
		padding: 0.2em; 
		margin-left: -0.3em; 
		margin-top: 4.1em;
		margin-bottom: 1.5em;
	}
		
/*********************************************************************************/
/*  Version Note Topic-Title                                                     */
/*********************************************************************************/
    .DeedsTopicTitle
	{   background-color: #FFFFE8;
	    border: none;
		margin-bottom: 0.5em;
	}

/*********************************************************************************/
/* Two Column                                                                    */
/*********************************************************************************/

	#two-column
	{
		padding-top: 1em;         /* 3em;  vspace della parte a due colonne */
	}
	
	#two-column .title h2
	{
		font-size: 1.6em;         /* vert. size del titolo delle due colonne  */
	}
	
	#two-column #tbox1
	{
		float: left;
		width: 360px;             /* 370px;  ampiezza della colonna di sinistra */
		/*background-color: rgba(0,0,0,0.05);*/
	}

	#two-column #tbox2
	{
		float: right;
		width: 360px;             /* 370px;  ampiezza della colonna di destra */
	}

	#two-column #tbox2 ul.style2
	{
		margin-top: 0.9em;        /* 2.2em;  vert space sopra le voci nelle due colonne */
	}

/*********************************************************************************/
/* Scroll Back To Top Button                                                     */
/*            Source: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
/*********************************************************************************/
#BackToTopBtn {  
    display: none;
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
 	border: 1px solid #B07000;     /*#4CAF50 = Green */	
    outline: none; 
    background-color: #B07000;  /* #FFFFE8;  */
    color: white;               /* 	color: black; */
    cursor: pointer; 
    padding: .6em .6em;
    border-radius: 6px; 
	text-decoration: none;
	text-transform: uppercase;
}
#BackToTopBtn:hover {
	background-color: #CFCFB8; 
	color: black;
}