@charset "UTF-8";
/*
========================================================================================================================
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
WERSJA LAPTOP (BAZA NA WSZYSTKO)
LUBO GAZ Rybnik - Piechoczek Łukasz (http://lubo.rybnik.pl)
Test językowy: ęóąśłżźćń.
Pomysł na GRADIENT zaczerpnięty z http://www.colorzilla.com/gradient-editor/
======================================================================================================================== 
*/
header, section, footer, aside, nav, article, figure {display: block;} /* Dla starych przeglądarek bez html5 */

img {font-size: 7px; border: 0px;} /*potrzebne do opisów w alt="tekst" */

html {
    width: 100%; background-color: #74cdf7; /* Old browsers */
    background: -moz-linear-gradient(left, #74cdf7 0%, #FFFFFF 50%, #74cdf7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #74cdf7 0%,#FFFFFF 50%,#74cdf7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #74cdf7 0%,#FFFFFF 50%,#74cdf7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

body {
    width: 100%; font-size: 16px; color: navy; font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: url('../design/tlo_body_white.png') repeat top;
}

#box {
    max-width: 1020px; margin: auto; position: relative;
}

header {width: 100%; max-height: 172px; margin: auto; position: relative;}
header img.logo_napis {width: 95%; position: absolute; top: 0px; left: 0px;}
header img.logo_butle {height: 95%; position: absolute; top: 3px; right: 0px;}
header img.logo_linia {width: 100%; height: 100%; border-radius: 30px;}

nav {width: 100%; margin: auto; text-align: center; margin-top: -15px; margin-bottom: 10px;}

nav div {
    display: inline-block; margin: 10px 10px 10px 10px; padding: 10px 13px 10px 13px; 
    background-color: #74cdf7; border: 1px solid green; border-radius: 10px; box-shadow: 0px 0px 20px lime;
}
nav div:hover {background-color: #74cdf7; border: 1px solid blue; box-shadow: 0px 0px 20px navy;}

nav a {
    color: navy; text-shadow: 0 0 3px white, 0 0 5px white;
    font-size: 14px; font-weight: bold; letter-spacing: 2px; text-decoration: none;
}
nav a:hover {color: black; text-shadow: 0 0 3px white, 0 0 5px white;}

#kontener { 
    max-width: 98%; min-height: 370px; margin: auto; line-height: 130%;
    border: 3px double aqua; border-radius: 10px; background-color: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(left, #FFFFFF 0%, #D9E2E6 50%, #FFFFFF 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #FFFFFF 0%,#D9E2E6 50%,#FFFFFF 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #FFFFFF 0%,#D9E2E6 50%,#FFFFFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#kontener div.kolumna {
    display: inline-block; min-width: 240px; max-width: 97%;
    margin: auto; margin-bottom: 15px; padding: 10px 10px 10px 10px; text-align: center; vertical-align: top;
}
#kontener div.one	{width: 97%; margin: auto; text-align: center; clear: both;}
#kontener div.two   {width: 46%;} /* Nie dodawać MIN i MAX bo sypnie się w FF */
#kontener div.three {width: 30%;}

#kontener h2 {
    font-size: 16px; color: navy; font-weight: bold; letter-spacing: 16px;
    padding: 12px 0px 20px 0px; margin: auto; text-align: center; clear: both;
    text-shadow: -1px 0 lime, 0 1px white, 1px 0 white, 0 -1px lime;
}

#kontener h3 {font-weight: bold; padding-bottom: 20px; letter-spacing: 9px; text-shadow: -1px 0 aqua, 0 1px white, 1px 0 white, 0 -1px aqua;}
#kontener p {margin-bottom: 15px;}
#kontener .ramka {border: 2px solid aqua; border-radius: 10px; box-shadow: 0px 0px 20px lime;}

div.wizytowka {background: url('../design/logo_lubo.jpg') no-repeat top; height: 300px; max-width: 500px; overflow: hidden;}
#kontener .wizatlo {background: url('../design/logo_lubo.jpg') no-repeat top; height: 300px; max-width: 500px;}
#kontener .wizbtlo {height: 100%;} /* Można dać background-color: #40395b; */
#wizb img {max-width: 100%; border-radius: 10px;}
#kontener #wiza {position: relative; top: 0px; left: 0px; height: 300px; max-width: 500px; margin: auto;}
#konterer #wizb {position: relative; top: 0px; left: 0px; height: 300px; max-width: 500px; margin: auto;}

#kontener ul {text-align: left; padding-left: 30%; margin-bottom: 12px;}
#kontener li {padding: 0px 0px 14px 10px; font-size: 20px;}

/* EFEKT SPECJALNY (po najechaniu na IMG pojawia się opis) */
div.spec {position: relative; width: 97%; margin: auto; text-align: center;}
div.spec img {width: 100%; height: 100%; margin: auto;}
div.spec figcaption p {color: navy; padding-top: 5px; width: 97%; margin: auto; text-align: center; text-shadow: 1px 1px gold;}
div.spec figcaption p:first-child {font-size: 16px; font-weight: bold; border-bottom: 2px solid aqua; margin-right: 7%; padding-bottom: 3px;}
div.spec figure {max-height: 185px; min-width: 280px; position: relative; overflow: hidden; display: inline-block; 
    margin: 0px 10px 20px 10px; border: 1px solid aqua; background-color: white; box-shadow: 7px 7px 5px 0px rgba(0, 255, 255, 0.3);
}
div.spec figcaption {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); padding: 5px 5px 5px 5px;}
/* CSS3 ruch show/hide niczym jQuery */
div.spec figcaption {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 350ms; -moz-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms;}
div.spec > figure:hover figcaption {-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}

footer {
    width: 100%; min-height: 70px; max-height: 200px; position: relative; margin: 15px 0px 0px 0px;
    border: 0px solid green; border-radius: 10px; background-color: aqua; /* Old browsers */
    background: -moz-linear-gradient(top, #74cdf7 0%, aqua 50%, #D9E2E6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #74cdf7 0%, aqua 50%, #D9E2E6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #74cdf7 0%, aqua 50%, #D9E2E6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

footer div {margin-left: 20%; padding-top: 10px;}
footer p {text-align: center; font-size: 10px; line-height: 120%;}
footer .stopka {max-height: 200%; position: absolute; bottom: 0px;}

iframe.mapa {
    margin-top: 20px; width: 100%; height: 300px;
    border: 1px solid aqua; border-radius: 10px; box-shadow: 0px 0px 20px lime;
}

    

/*
========================================================================================================================
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
WERSJA MOBILE
LUBO GAZ Rybnik - Piechoczek Łukasz (http://lubo.rybnik.pl)
Test językowy: ęóąśłżźćń.
======================================================================================================================== 
*/
@media screen and (max-width: 767px)
{
    #box {max-width: 767px;}
    nav li {min-width: 200px;}
    /* USUNIĘCIE EFEKTÓW SPECJALNYCH - ZAWSZE WIDOCZNY OPIS */
    div.spec figcaption {-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
    div.spec > figure:hover figcaption {-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}   
    footer div {margin-left: 10%;}
}

/*
========================================================================================================================
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
WERSJA MOBILE (DO JEDNEJ KOLUMNY WSZYSTKO)
LUBO GAZ Rybnik - Piechoczek Łukasz (http://lubo.rybnik.pl)
Test językowy: ęóąśłżźćń.
======================================================================================================================== 
*/
@media screen and (max-width: 656px)
{
    #box {max-width: 656px;}
    #kontener div.one, #kontener div.two, #kontener div.three {width: 93%; margin: auto; text-align: center; clear: both;}
    footer div {margin-left: 20%; padding-top: 10px;}
    footer p {text-align: center; font-size: 10px; line-height: 120%;}
    footer .stopka {max-height: 110%; position: absolute; bottom: 0px;}
}