<link href="https://fonts.googleapis.com/css?family=Karla:700&display=swap" rel="stylesheet">


body {
	background-color: #fff;
	font-family: 'Karla', sans-serif;
}

a {
	color:#990300;
}

a:hover {
	text-decoration:none;
}

.max100 {
	max-width: 100%;
}

.home img {
	max-width: 100%;
	opacity: 0.8;
	padding-top: 10px;	
}
.home img:hover {
	opacity: 1;
}

.bgstrip {
	background-color: #F2F2F2;
}

footer {
	background-color: #cccccc;
}

footer img {
	max-height: 120px;
}

.gplay {
	max-height: 33px;
	opacity: 0.5;
}

blockquote {
border:none;
margin-bottom:-30px;
position: relative; 
max-width: 90%; 
    margin: 0 auto; 
    padding-left: 0.4em; 
}

blockquote small{
	float:right;
}


blockquote h3 {
    font-size:18px;	
}

blockquote h3:before { 
    content: "\201C";
    font-weight: bold;
    font-size:70px;
    color:#e4e4e4;
    position: absolute; 
    top: -0.2em;
    left: -0.5em; 
} 
blockquote h3:after { 
    content: "\201D";
    font-weight: bold;
    font-size:70px;
    color:#e4e4e4;
    position: absolute; 
    bottom: -0.6em;
    right: 0; 
}

.tipoh1 {
	font-size:1.5em;
}

.tipoh2 {
	font-size:1.5em;
}


.racconto {
	padding:20px;
	font-size: 1.4em;
}


#main {
	text-align: center;
}

/**
 * Grid container
 */
#tiles {
	list-style-type: none;
	position: relative; /** Needed to ensure items are laid out relative to this container **/
	margin: 0;
}

/**
 * Grid items
 */
#tiles li {
	width: 200px;
	background-color: #ffffff;
	border-bottom: 3px solid #dedede;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	display: none; /** Hide items initially to avoid a flicker effect **/
	/*  cursor: pointer; */
	padding: 24px;
	  -webkit-transition: all 0.3s ease-out;
		 -moz-transition: all 0.3s ease-out;
		   -o-transition: all 0.3s ease-out;
			  transition: all 0.3s ease-out;
}
#tiles li:hover {
	background-color: #dedede;
}

#tiles li.inactive {
	opacity: 0;
}

#tiles li img {
	display: block;
	opacity:.8;
	max-width:100%;
}

#tiles li img:hover {
	opacity: 1;
}


#filters {
	list-style-type: none;
	text-align: center;
	height: 50px;
	margin: 0 5% 0 5%;
}

#filters li {
	/*	font-size: 12px; */
	float: left; 
	padding: 6px 0 4px 0;
	cursor: pointer;
	  -webkit-transition: all 0.15s ease-out;
		 -moz-transition: all 0.15s ease-out;
		   -o-transition: all 0.15s ease-out;
			  transition: all 0.15s ease-out;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin: 0 1% 0 1%;
/*	width: 8%; */
}

#filters li:hover {
	background: #dedede;
}

#filters li.active {
	background: #3d3d3d;
	color: #ffffff;
}

.title-header-short {
	display:none;
}

@media all and (max-width: 480px) { 
	.title-header-full {
		display:none;
	}
	.title-header-short {
		display:block;
	}
}