@import url('../fonts/lobstertwo/stylesheet.css');
@import url('../fonts/roboto_regular/stylesheet.css');
html, body, .page { width: 100%; height: 100%; font-family: robotoregular; }
.page { position: relative; overflow: hidden; }
.bydgoska, .tile.bydgoska .info { background-color: rgba(255, 152, 0, 0.95); }
.nawojka, .tile.nawojka .info { background-color: rgba(0, 150, 136, 0.95); }
.piast, .tile.piast .info { background-color: rgba(96, 125, 139, 0.95); }
.zaczek, .tile.zaczek .info { background-color: rgba(63, 81, 181, 0.95); }
.tile { width: 50%; height: 50%; float: left; position: relative; overflow: hidden; }
.tile>a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.tile .img { position: relative; width: 100%; height: 100%; background: transparent none no-repeat center; background-size: cover; }
.tile.bydgoska .img { background-image: url('../img/bydgoska.jpg'); }
.tile.nawojka .img { background-image: url('../img/nawojka.jpg'); }
.tile.piast .img { background-image: url('../img/piast.jpg'); }
.tile.zaczek .img { background-image: url('../img/zaczek.jpg'); }
.tint { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.2); }
/*.bydgoska .tint { background-color: rgba(255, 152, 0, 0.4); }
.nawojka .tint { background-color: rgba(0, 150, 136, 0.4); }
.piast .tint { background-color: rgba(96, 125, 139, 0.4); }
.zaczek .tint { background-color: rgba(63, 81, 181, 0.4); }*/
.logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.logo>img { width: 400px; height: auto; }
.langnav { position: absolute; top: 20px; right: 20px; }
.langnav li { display: inline-block; margin-left: 4px; }
.langnav li>* { display: block; color: rgba(255,255,255,0.8); text-decoration: none; text-transform: uppercase; font-size: 14px; padding: 6px 5px; border: 1px solid transparent; }
.langnav li>a {
    transition: color 500ms ease-out, border-color 500ms ease-out;
}
.langnav li>a:hover { color: #ffffff; border-color: #ffffff; }
.langnav li>span { color: #ffffff; border-color: rgba(255,255,255,0.8); }
.caption { font-family: lobster_tworegular; color: #ffffff; position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 30px; /*text-shadow: 2px 2px rgba(0,0,0,0.5);*/
    transform: translateY(-50%);
    transition: top 500ms ease-out, font-size 500ms ease-out;
}
.tile:hover .caption { top: 40px; font-size: 40px; }
.tile .info { position: absolute; left: 0; right: 0; height: 100%; top: 100%; color: #ffffff; text-align: center; box-sizing: border-box; padding-top: 80px; line-height: 1.4em;
    transition: top 500ms ease-out;
}
.tile:hover .info { top: 0; }
.tile .info p { margin-bottom: 20px; }
.tile .map { width: 80%; height: 50%; margin: 0 auto; margin-bottom: 20px; }
.tile .info .link { display: inline-block; background-color: rgba(255,255,255,0.8); padding: 4px 7px; border-radius: 6px; font-size: 14px; text-transform: uppercase; text-decoration: none;
    transition: background-color .3s ease-out;
}
.tile.bydgoska .info .link { color: #ff9800; }
.tile.nawojka .info .link { color: #009688; }
.tile.piast .info .link { color: #607d8b; }
.tile.zaczek .info .link { color: #3f51b5; }
.tile .info .link:hover { background-color: #ffffff; }
.tile .caption a { color: #ffffff; text-decoration: none; }

@media (max-width: 1024px) {

    html, body, .page { height: auto; }
    .tile { float: none; width: 100%; height: 400px; }
    .logo { left: 0; top: 0; transform: none; }
    .logo>img { width: 200px; }
    .bydgoska, .tile.bydgoska .info { background-color: rgba(255, 152, 0, 0.6); }
    .nawojka, .tile.nawojka .info { background-color: rgba(0, 150, 136, 0.6); }
    .piast, .tile.piast .info { background-color: rgba(96, 125, 139, 0.6); }
    .zaczek, .tile.zaczek .info { background-color: rgba(63, 81, 181, 0.6); }
    .tile .info { top: 0; }
    .tile .caption { top: 40px; font-size: 40px; }
}

@media (max-width: 700px) {
    .logo { display: none; }
}