/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

 @font-face {     
    font-family: Lora;
    src: url(../fonts/Lora.ttf);
 }

 @font-face {     
    font-family: BigShoulders;
    src: url(../fonts/BigShoulders.ttf);
 }

 @font-face {     
    font-family: BigShouldersInline;
    src: url(../fonts/BigShouldersInline.ttf);
 }
* { 
margin: 0;
padding: 0; 
}

.area-filter {
font-family: 'BigShoulders'; 
font-size: 18px;
margin-left:25%;
margin-right:25%;
background-color: #000;
}

article, aside, figure, footer, header, hgroup,
menu, nav, section { 
display: block; 
}	

#page-wrap { 
width: 960px;
margin: 60px auto auto 20px; 
}

h1{
font-family: 'BigShouldersInline';
font-size: 40px; 
letter-spacing: -1px; 
}

h3 {
font-family: 'BigShoulders';
font-size: 18px;
}

.area-filter button {
text-decoration: none;
color: #000;
background-color: #f4d940;
padding: 18px 58px 18px 58px;
border-radius: 7px;
border-color: #034B2F;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}

.btn a:hover{
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.8);
}

.area-filter form .select {
margin-bottom: 30px;
}

/* HOME */

#home_wrapper{
	display: flex;
	flex-direction: column;
	background-color: #dee6fd;
	padding: 0 0 20px 50px;
}

#border_wrapper {
	padding-left: 10px;
  	border-style: solid;
  	border-color: #dee6fd;
  	padding-right: 10px;
  	border-width: 0 2px;
}

#header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#home_title {
margin-top: 20px;
}

#home_title h1{
	margin-bottom: 2px;
}

#home_logo_header {
	padding-right:8%;
	animation: pianeta_frizzante 5s;
}

@keyframes pianeta_frizzante {
  50% {transform: rotate(180deg);}
}

#home_centrale{
	display: flex;
	flex-direction:row;
	padding-top: 5%;
  	padding-bottom: 5%;
	justify-content: space-around;
	width: 89%;
}

#home_btn_sx{
}

#home_btn_dx{
}

#home_footer{
	display: flex;
	padding-top: 7%;
}

#home_footer img{
animation: delfino_frizzante 0.2s ;
animation-delay: 5s;
animation-iteration-count: 2;
}


@keyframes delfino_frizzante {
	0% {transform: rotate(0deg);}
  	50% {transform: rotate(10deg);}
  	100% {transform: rotate(0deg);}
}