/*
Author: Clarice Armotrading - www.dryink.co.uk
Project: Erna Corbetta - http://www.ernacorbetta.it/
Date: November 2013
Credit: Clarice Armotrading - www.dryink.co.uk
Programmer: Matteo 'the Guru' Benetti
*/

@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Muli:400,300);

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
	
html, body
{
	font-family: 'Muli', sans-serif;
	background: #fff;
}

body
{
	font-size: 2em;
	color:#9e9e9e;
}

a
{
	color: #9e9e9e;
	text-decoration:none;
}

a:hover
{
	color: #197246;
}

a:active
{ 
	color:#197246;
}

h1{
	position:absolute;
	/*top:-5000em;
	left:-5000em;
	text-indent:-5000em;*/
	font-size: 2em;
	margin:0px;
	padding:0px;
	color: #197246;
}

h2{
	position:absolute;
	top:-5000em;
	left:-5000em;
	text-indent:-5000em;
	font-size: 2em;
	margin:0px;
	padding:0px;
	color: #197246;
}

/*************************************************** Layout Divs ***************************************************/

.container {
	width: 100%;
	position: relative;
        height: auto !important;
       
}

.container > header {
	width: 90%;
	max-width: 123px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px 50px 30px;
}

.container > header {
	padding: 60px 30px 50px;
	text-align: center;
}


.container > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}

.main > p {
	text-align: center;
	padding: 50px 20px;
	font-size: 0.5em;
	text-align:justify;
}

/*************************************************** text area ***************************************************/
.container > .main{
    position: relative;
    height: auto !important;
    
  
}


.main > .text-area {
    position: relative;
	width: 100%;
	/*min-height: 450px;*/
	/*height: auto !important;*/
        height: auto !important;
	margin-right: 50px;
	/*margin-top: 5%;*/
	text-align: justify;
        display:block;
        
}

.main > .text-area .text-areaSx
{
    position: relative;
    min-width: 250px;
	width: 45%;
	padding: 50px;
	margin-left: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: left;
	color: #fff;
	font-size: 0.4em;
	text-align: justify;	
	line-height: 24px;
	background: #000;
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*old school versions of the Mozilla browsers like Netscape Navigator.*/
	-khtml-opacity: 0.8; /*This is for way old versions of Safari (1.x)*/
	opacity: 0.8; /*Firefox, Safari, and Opera*/
        display: block;
}

.main > .text-area .text-areaSx h1{
	font-size: 1em;
	font-weight: 400;
	color: #197246;
	margin-bottom: 2px;
}

.main > .text-area .text-areaDx
{
    position: relative;
    min-width: 250px;
	width: 45%;
	padding: 50px;
	margin-right: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: right;
	color: #fff;
	font-size: 0.4em;
	text-align: justify;
	line-height: 24px;
	background: #000;
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*old school versions of the Mozilla browsers like Netscape Navigator.*/
	-khtml-opacity: 0.8; /*This is for way old versions of Safari (1.x)*/
	opacity: 0.8; /*Firefox, Safari, and Opera*/
        display: block;
}

.main > .text-area .text-areaDx img
{
	/*width: 45%;
	font-size: 0.4em;
	text-align: justify;*/
	margin-right: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: right;
	color: #fff;
	line-height: 24px
}

.text-areaCol1
{
	width: 30%;
	margin-left: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: left;
	color: #fff;
	font-size: 0.4em;
	font-weight: 300;
	text-align: justify;	
	line-height: 24px
}

.text-areaCol1 h3{
	font-size: 1em;
	font-weight: 400;
	color: #197246;
	margin-bottom: 2px;
}

.text-areaCol1 h3 a
{
	color: #197246;
	text-decoration:none;
}

.text-areaCol1 h3 a:hover
{
	color: #9e9e9e;
}

.text-areaCol1 p{
	margin-bottom: 20px;
}

.text-areaCol2
{
	width: 30%;
	margin-left: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: left;
	color: #fff;
	font-size: 0.4em;
	font-weight: 300;
	text-align: justify;	
	line-height: 24px
}

.text-areaCol2 h3{
	font-size: 1em;
	font-weight: 400;
	color: #197246;
	margin-bottom: 2px;
}

.text-areaCol2 h3 a
{
	color: #197246;
	text-decoration:none;
}

.text-areaCol2 h3 a:hover
{
	color: #9e9e9e;
}

.text-areaCol2 p{
	margin-bottom: 20px;
}

.text-areaCol3
{
	width: 30%;
	margin-left: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: left;
	color: #fff;
	font-size: 0.4em;
	font-weight: 300;
	text-align: justify;	
	line-height: 24px
}

.text-areaCol3 h3{
	font-size: 1em;
	font-weight: 400;
	color: #197246;
	margin-bottom: 2px;
}

.text-areaCol3 h3 a
{
	color: #197246;
	text-decoration:none;
}

.text-areaCol3 h3 a:hover
{
	color: #9e9e9e;
}

.text-areaCol3 p{
	margin-bottom: 20px;
}



/*************************************************** news ***************************************************/

.main > .text-area-news {
	width: 100%;
	min-height: 450px;
	height: auto !important;
	margin-right: 50px;
	margin-top: 10%;
	text-align: justify;
	background: #000;
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*old school versions of the Mozilla browsers like Netscape Navigator.*/
	-khtml-opacity: 0.8; /*This is for way old versions of Safari (1.x)*/
	opacity: 0.8; /*Firefox, Safari, and Opera*/
}

.main > .news-area {
	width: 100%;
	min-height: 600px;
	height: auto !important;
	margin-right: auto;
	margin-top: 5%;
	text-align: justify;
}

.text-news
{
	width: 100%;
        
	/*margin-left: 20px;
	margin-top: 5%;
	margin-bottom: 5%;
	float: left;
	color: #9e9e9e;
	font-size: 0.4em;
	text-align: justify;	
	line-height: 24px*/
}

.text-news h3{
	font-size: 0.5em;
	font-weight: 400;
	color: #197246;
	margin-left: 20px;
	margin-bottom: 2px;
	line-height: 20px;
}

.text-news .news-content{
    display: inline-block;
        vertical-align: top;
	margin-top: 20px;
	width: 400px;
	margin-left: 20px;
	margin-bottom: 20px;
	
	color: #9e9e9e;
	font-size: 0.4em;
	text-align: justify;	
	line-height: 24px;
            
}

.text-news .news-img
	{display: inline-block;

            max-width: 600px;
	
	margin-left: 20px;
        
	}
	.text-news .news-img img
	{
            margin:0;padding:0;
            height:auto!important; 
            width: 100%!important;

            -webkit-background-size: cover!important;
            -moz-background-size: cover!important;
            -o-background-size: cover!important;
            background-size: cover!important;
        }
	.text-news iframe
	{
	display: inline-block;
	margin-left: 20px;
	}

/*************************************************** contact ***************************************************/

.main > .contact {
    position: relative;
	width: 100%;
	/*min-height: 450px;*/
        
	height: auto !important;
	margin-right: 50px;
	margin-top: 100px;
	text-align: justify;
        display: block;
}

.contactSx
{
   height: auto !important;
    display: block;
	padding: 50px;
	margin-left: 20px;
	/*margin-top: 5%;*/
	margin-bottom: 5%;
	float: left;
	color: #fff;
	font-size: 0.4em;
	text-align: justify;	
	line-height: 24px;
	background: #000;
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*old school versions of the Mozilla browsers like Netscape Navigator.*/
	-khtml-opacity: 0.8; /*This is for way old versions of Safari (1.x)*/
	opacity: 0.8; /*Firefox, Safari, and Opera*/
}

.contactSx h1{
	font-size: 1em;
	font-weight: 400;
	color: #197246;
	margin-bottom: 20px;
}


@media screen and (max-width: 500px) {
    .contactSx{
        width: 300px !important;
        padding: 20px !important;
    }
    
    .contactSx iframe{
        width: 260px !important;
    }
   
}


/*************************************************** bkg rotate ***************************************************/

/*************************************************** bkg rotate ***************************************************/
#img1,#img2,#img3,#img4,#img5,#img6,#img7,#img8{
    width:auto!important;
    height: auto !important;
    min-height:100% !important;
    text-align:left;
    background:#fff url(../img/index-bkg.jpg) no-repeat top; 
    margin:0;
    padding:0;
   
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 
}

@media screen and (max-width: 600px) {
    #content-area{
        height: 100% !important;
        width: auto!important;
    }
   
}



#img1{
background-image:url(../img/index-bkg1.jpg);
}

#img2{
background-image:url(../img/index-bkg2.jpg);
}

#img3{
background-image:url(../img/index-bkg3.jpg);
}

#img4{
background-image:url(../img/index-bkg4.jpg);
}

#img5{
background-image:url(../img/index-bkg5.jpg);
}
#img6{
background-image:url(../img/index-bkg6.jpg);
}

#img7{
background-image:url(../img/index-bkg7.jpg);
}
#img8{
background-image:url(../img/index-bkg8.jpg);
}

/*************************************************** Top Bar ***************************************************/
.ib-top{
    background: #fff;
    position: fixed;
    top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    z-index: 200;
    height: 40px;
}

.ib-top a{
    color: #9e9e9e;
    
}
.ib-top h1{
    color: #197246;
    font-size: 0.5em;
	font-weight:300;
    line-height: 40px;
    padding: 0 10px;
	position: fixed;
	font-weight:550;
	/*letter-spacing:0.3em;*/
}
.ib-top h1 span{
    color: #9e9e9e;
    font-size: 12px;
}

.ib-top h1 a{
    z-index: 10;
	color: #197246;
}

.ib-top h1 .architetto
{
	font-size: 0.7em !important;
	color:#197246 !important;
	letter-spacing:0.2em;
	font-weight:350;
}

/*************************************************** menu ***************************************************/
.ib-top .menu 
{
	float: right;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 900px;
	z-index: 200;
    
}

.ib-top .menu ul
{
	margin-left: auto;
	margin-right: 10px;
	width: 800px;
	z-index: 10;
    height: 30px;
}

.ib-top .menu ul li
{
	float: right;
	padding: 0 10px;
	display: list-item;
	list-style-type: none;
}
.ib-top .menu  ul li a{
    letter-spacing:1px;
    color: #9e9e9e;
    right:150px; 
    z-index:9999999;
	font-size:12px;
}

.ib-top .menu a:hover
{
	color: #197246;
}

.ib-top .menu a:active
{
	color: #197246;
}

ib-top .menu .last{
	margin:0;
	}
	
	
/*************************************************** menu select ***************************************************/
 
	a.selected	
{
    color: #197246 !important;
    font-weight:550 !important;
}


/****************************************************menu mobile****************************************************/
header nav 
{
	float: right;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: 10px;
	margin-top: 13px;
	width: 900px;
	z-index: 200;
    
}

header nav ul
{
	margin-left: auto;
	margin-right: 10px;
	width: 800px;
	z-index: 10;
    height: 40px;
}

header nav ul li
{
	float: right;
	padding: 0 0px;
	display: list-item;
	list-style-type: none;
}
header nav ul li a{
    letter-spacing:1px;
    color: #9e9e9e;
    right:150px; 
    z-index:9999999;
	font-size:0.3em;
}

header nav a:hover
{
	color: #197246;
}

header nav .last{
	margin-right: 5px;
	}




/*************************************************** footer ***************************************************/

#footer
{
        width:100%;
	text-align:center;
	font-size: 0.3em;
	color: #9e9e9e;
	padding-top:5px;
	height: 10px;
	background: #fff;
	position: absolute;
}


#footer p
{
	width: 100%;
	display: block;
	text-align:center;
	line-height: 15px;
}

@media only screen and (max-device-width: 550px) {
        
    #footer {
        margin: -10px 3px !important;
    }
    
}

.clr,.clear{
clear:both;
margin:0;
padding:0;
}