@import 'https://fonts.googleapis.com/css?family=Lato';



@font-face {
    font-family: "perpetua Titling MT";
    src: url(./PERTILI.TTF);
}


body {
	background-color: #FFFFFF;
	margin: 0px;
	font-family: 'Lato', sans-serif, sans;
}
h1 {
	font-size: 24px; 
	color: #fff;
	letter-spacing:3px;
	font-weight: normal; 
	margin-bottom: 25px; 
}
.all {
	max-width: 1400px;
	margin:auto;
}
.green{
	background-color:#6F8771;
	border: 8px #fff solid;
}
.barn img {
	border-radius: 20px;
	width: 160px;
	height: 160px;
	border: 5px #aaa solid;
    animation: fadein 1.5s;
}
.barn {
	display: flex;
	justify-content: center;
	max-width: 1200px; 
	color: #fff; 
    flex-flow: row wrap; 
    margin: auto; 
}
.barn> div { 
 flex: 1 1 auto;
  width: 400px; 
  max-width: 800px;
  position:relative;
  text-align:center; 
  	padding: 30px; 
 }
 .roofing {
	font-size: 64px; 
	font-family: "perpetua Titling MT";
	animation: fadein 0.5s;
}
.barn a {
	color: #fff;
	text-decoration:none; 
}
.links{
	background-color: #444;
	line-height: 60px; 
	color: #fff;
	text-align:center;
	font-size: 16px; 
	border-right: 8px #fff solid;
	border-left: 8px #fff solid;
	border-bottom: 8px #fff solid;
}
.links a{
	padding: 20px 2vw; 
	color: #fff;
	text-decoration:none;
	white-space:nowrap; 
	transition: 1s;
}
.links a:hover{
	background-color:#000; 
}
.squares, .squares2 {
	display: block;
	margin:auto;
	}
.squares2 div{
	border: 2px solid #fff;
  box-sizing: border-box;
}

.squares > div {
	display: inline-block;
	width: calc( 50% - 4px );
	height:  calc( 30vh - 4px );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.squares2 div {
	display: inline-block;
	width: calc( 25% - 4px );
	height:  calc( 30vh - 4px );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.squares div img, .squares2 div img {
	width: 100%;
	height: 100%;
}

@supports (display: grid) {
.squares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	grid-auto-rows: 33vh;
	grid-auto-flow: row dense;
	border: 4px solid #fff;
}
.squares  > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  counter-increment: item-counter;
  border: 4px solid #fff;
	width: auto;
	height: auto;
	background-size: cover;
	background-position: center;
  }
  }



  @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.textsquare{
	background-color: #bcc6bd;
	padding: 50px 5vw;
	font-size: 16px;
	line-height: 180%;
	color: #222;
	border-right: 8px #fff solid;
	border-left: 8px #fff solid;
}
.textsquare div {
	max-width: 1000px;
	margin: auto; 
}
.footer {
	display: flex;
	justify-content: center;
	max-width: 1200px; 
	color: #fff; 
    flex-flow: row wrap; 
    margin: auto; 
    line-height: 180%; 
}
.footer> div { 
 flex: 1 1 auto;
  width: 200px; 
  max-width: 800px;
  position:relative;
  text-align:left; 
  	padding: 30px; 
 }
.footer a {
	color: #fff;
	text-decoration:none; 
}
.base {
	border-top: 0;
}
.iw {
	font-size: 10px;
	padding: 2px 5vw 10px 5vw;
	text-align: right;
} 
.iw a{
	color: #999;
	text-decoration: none;

}
#map{
	height: 700px;
	max-height: 100%; 
	border: 8px #fff solid;
}





@media only screen and ( max-width: 1100px ) {
body{
	background-attachment:scroll;
	background-size:  auto 100vh;
	background-position: left top;
}
}
@media only screen and ( max-width: 800px ) {
.squares, .squares2{
	display: block;
	margin:auto;
	}
.squares > div, .squares2 > div {
	display: inline-block;
	width: calc( 100% - 4px );
	height: 60vh;
}
.page{
	height: 60vh;
	background-attachment:scroll;
}
.textsquare{

	height: 100%;
}

}