body
{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin: 0;
	

}

a
{
    text-decoration: none;
}

#container
{
	width: 100%;
	height: 705px;
}

#nav
{
	width: 25%;
	height: 705px;
	float: left;
}

#logo
{
	height: 45.6px;
	font-size: 40px;
	text-align: center;
	color: silver;
	background-color: grey;
	padding: 12px;
}

#nav_list
{
	height: 565.9px;
	background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png");
    background-size: 100%;
}

#zegar
{
	height: 45.9px;
	font-size: 45px;
	color: silver;
	text-align: center;
	background-color: grey;
	padding: 12px;
}

#content
{
	width: 75%;
	background-color: black;
	height: 100%;
	float: left;
}

#tiles
{
	/*padding: 10%;*/
	width: 100%;
	height: 100%;
}

ol{
	text-align: center;
    list-style-type: none;
    font-size: 20px;
    line-height: 200%;
    display: block;
    margin: 0;
    padding: 0;
}

ol a{
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: 0;
}

ol > li {
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 0;
}

ol > li:hover {
    color: #ffffff;
    background-color: black;
    display: block;
    padding-bottom: 120px;
    -webkit-animation-name: ul; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
    animation-name: ul;
    animation-duration: 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes ul {
    from {background-color: grey;}
    to {background-color: black;}
}


/* Standard syntax */
@keyframes ul {
    from {background-color: grey;}
    to {background-color: black;}
}

ol > li:hover > ul {
    color: #ffffff;
    background-color: #555555;
    display: block;
    -webkit-animation-name: ul; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
    animation-name: ul;
    animation-duration: 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes ul {
    from {background-color: grey;}
    to {background-color: #555555;}
}


/* Standard syntax */
@keyframes ul {
    from {background-color: grey;}
    to {background-color: #555555;}
}

ul{
    background-color: black;
    text-align: center;
    list-style-type: none;
    font-size: 20px;
    line-height: 200%;
    margin: 0;
    display: none;
    padding: 0;
}
ul > li:hover{
    background-color: grey;
    color: #ffffff;
    -webkit-animation-name: ol; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
    animation-name: ol;
    animation-duration: 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes ol {
    from {background-color: #555555;}
    to {background-color: grey;}
}


/* Standard syntax */
@keyframes ol {
    from {background-color: #555555;}
    to {background-color: grey;}
}





/*
.tile
{
	width: 23%;
	height: 142px;
	margin: 2%;
	background-color: grey;
	float: left;
}
*/

.tile
{
	width: 33.333333333333%;
	height: 33.33333333333%;
	float: left;
	cursor: pointer;
}

.tile:hover
{
	opacity: 0.85;

}

.tile1
{
	background-image: url("images/photo4.jpg");
	background-size: 100%;
}

.tile2
{
	background-image: url("images/photo5.jpg");
	background-size: 100%;
}

.tile3
{
	background-image: url("images/photo6.jpg");
	background-size: 100%;
}

.tile4
{
	background-image: url("images/photo7.jpg");
	background-size: 100%;
}

.tile5
{
	background-image: url("images/photo8.jpg");
	background-size: 100%;
}

.tile6
{
	background-image: url("images/photo9.jpg");
	background-size: 100%;
}

.tile7
{
	background-image: url("images/photo10.jpg");
	background-size: 100%;
}

.tile8
{
	background-image: url("images/photo11.jpg");
	background-size: 100%;
}

.tile9
{
	background-image: url("images/photo12.jpg");
	background-size: 100%;
}

.gtile1
{
	background-image: url("images/gsagradafamilia.jpg");
	background-size: 100%;
}

.gtile2
{
	background-image: url("images/photo5.jpg");
	background-size: 100%;
}

.gtile3
{
	background-image: url("images/photo6.jpg");
	background-size: 100%;
}

.gtile4
{
	background-image: url("images/photo7.jpg");
	background-size: 100%;
}

.gtile5
{
	background-image: url("images/gportret.jpg");
	background-size: 100%;
}

.gtile6
{
	background-image: url("images/photo9.jpg");
	background-size: 100%;
}

.gtile7
{
	background-image: url("images/photo10.jpg");
	background-size: 100%;
}

.gtile8
{
	background-image: url("images/photo11.jpg");
	background-size: 100%;
}

.gtile9
{
	background-image: url("images/photo12.jpg");
	background-size: 100%;
}