@import url('https://fonts.googleapis.com/css?family=Lato:300,700,900&subset=latin-ext');

html {font-size: 62.5%; height: 100%; min-height: 100vh}
body, .body  {font-size: 1.8rem; min-height: 100vh; font-family: Lato; font-weight: 300; position: relative}

body { background: url("../images/bg_dotted.png") center center repeat-x transparent; background-size: cover; background-attachment: fixed }
body.home { height: 100%; background: url("../images/bg_home.jpg") center center no-repeat transparent; background-size: cover}
body.home .body { min-height: 100%}

body.home .header_home { margin-top: 30px}

body#tinymce { color: #fff}

.body {  color: #fff; background: rgba(84,84,84,0.55);
background: -moz-linear-gradient(top, rgba(84,84,84,0.55) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(84,84,84,0.55)), color-stop(100%, rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(84,84,84,0.55) 0%, rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(top, rgba(84,84,84,0.55) 0%, rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(84,84,84,0.55) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(84,84,84,0.55) 0%, rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#000000', GradientType=0 ); 
background-position-y: -13rem; background-size: cover; background-repeat: no-repeat}

*:focus {outline: none}

h1,h2,h3,h4,h5, strong {font-weight: 700}
p {font-size: 1.4rem; text-align: justify}
 
a:hover, a:focus, a:active { outline: none}

a, a:hover, .fa, .btn, .trans, .trans:hover, a img, a:hover img  {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out}
a, a:hover, a:focus, a:active {color: inherit; text-decoration: none}

ul.nav li {display: inline-block; text-transform: uppercase; padding: 0; margin: 0 20px}
ul.nav li a { padding: 0; margin: 0}
ul.nav li a:hover, ul.nav li a:focus {background: none}

.header { color: #000; background: url("../images/ramka_pasek.jpg") center bottom no-repeat #fff; padding: 40px 0 35px; background-size: 100% 5px }
.header > .container > .pull-right { margin-top: 10px}

.header ul.nav li a { font-size: 1.6rem; line-height: 4rem}

.item-page img { max-width: 100%}

.item-page h3 { text-transform: uppercase; font-size: 1.8rem; font-weight: 900; margin: 0 0 2.8rem 0}
.item-page h4 { font-size: 1.8rem; font-weight: 900; margin: 0 0 2.8rem 0 }

.item-page p { margin-bottom: 2.8rem; font-size: 1.8rem}
.item-page p a, footer a { display: inline-block; border-bottom: 1px solid #fff}
.item-page p a:hover, footer a:hover { text-decoration: none; padding-bottom: 6px; margin-bottom: -6px} 
.item-page ul li { margin-bottom: 0.9rem}

footer a { border-color: #000}

.page-header { margin: 75px 0}
.page-header h2 { text-align: center; text-transform: uppercase; font-size: 3.2rem}

#content { padding-bottom: 20rem}

.home_table #content img { width: auto !important; height: auto !important}

.left {float: left} 
.lewa {text-align: left}
.right {float: right}
.prawa {text-align: right}
.center {float: none}
.srodek {text-align: center}
.nav-collapse {display: block}

blockquote { border: 1px solid #fff; padding: 5px 25px; font-style: italic; max-width: 66.6666%; margin: 45px auto}

ul {margin: 0}

.wrapper {height: 100%;position: absolute;top: 0; left: 0;width: 100%}
.table {display: table;height: 100%;width: 100%;margin-bottom: 0}
.table .table {background: inherit}
.tableCell {vertical-align: middle;display: table-cell}

.navbar {display: none; min-height: 0}

.menu_top_right { margin-left: 40px}
.menu_top_right li a img {margin-right: 10px}
.menu_top_right li.current { display: none}

footer { color: #000; background: #fff; font-size: 2.2rem; padding: 0 0 4rem; line-height: 3.5rem; position: absolute; left: 0; bottom: 0; width: 100%}
footer .brand { display: inline-block }
footer .brand img {max-height: 3.5rem;}
footer h4 { margin: 3rem 0 1rem; text-transform: uppercase}

footer ul { list-style: none; padding: 0; margin: 0;} 
footer ul li { width: 50%; display: inline-block; padding: 0 2.5rem; text-align: left; float: left}
footer ul li:first-child { text-align: right}

.home_table { height: 100%; display: table; width: 100%; text-align: center}
.home_table .home_table_cell { height: 100%; display: table-cell; vertical-align: middle }

.home_table .container { max-width: 850px}
.home_table .container .header_home { background: #fff; margin-bottom: 30px}
.home_table .container #content a.zdjecie { margin-bottom: 30px; font-weight: bold; display: block; padding: 10px 10px 40px; background: #fff; color: #000; font-size: 2.8rem; line-height: 2.8rem}
.home_table .container #content a.zdjecie:hover { }

.header_home .brand { display: block; padding: 20px; }
.header_home .brand:hover { }

a.zdjecie .over_img {  display: block; position: relative; overflow: hidden; margin-bottom: 36px}
a.zdjecie img { max-width: 100%}
a.zdjecie:hover img { transform: scale(1.2); }

a.zdjecie img, a.zdjecie:hover img {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out}

.over_formularz input, .over_formularz textarea { height: 4.8rem; padding: 1.5rem; margin-bottom: 1.8rem; width: 100%; border: 1px solid #000; background: #434343; }
.over_formularz textarea { height: 19.2rem; resize: none; line-height: 2.4rem;} 

.blog .page-header h1 { text-align: center; margin-bottom: -4rem}
.blog > .page-header > h2 { margin-bottom: -4rem}
.blog .item { border: 1px solid #707070; background: #fff; padding: 5px; color: #000; font-size: 1.6rem; font-weight: bold; text-transform: uppercase; text-align: center; margin: 4rem 0}
.blog .item .page-header { margin: 0; padding: 0}
.blog .item .page-header h3 { margin: 0; line-height: 2rem; height: 8rem; display: table; width: 100%}
.blog .item .page-header h3 a { display: table-cell; vertical-align: middle; text-align: center}
.blog .item a.zdjecie .over_img { margin: 0 0 5px}
.blog .item-image img { width: 100%;}

.blog .cols-3 { width: 60%; margin: 0 auto}

.blog .page-header a { display: block}

.galeria_zdjec { margin: 8rem -5px 4rem; text-align: center}
.galeria_zdjec > a { display: inline-block; vertical-align: middle; margin: 10px}

.btn { border-radius: 0; background: #fff; padding: 8px 20px; line-height: 30px; text-transform: uppercase; font-weight: bold; height: 46px; color: #000; margin-bottom: 45px}
.btn:hover { background: #ccc; color: #333}

.jeden { position: relative}
.jeden:before { content: "1"; font-size: 240px; font-weight: bold; position: absolute; top: 45px; left: 0}

.dwa { position: relative}
.dwa:before { content: "2"; font-size: 240px; font-weight: bold; position: absolute; top: 45px; left: 0}

.trzy { position: relative}
.trzy:before { content: "3"; font-size: 240px; font-weight: bold; position: absolute; top: 45px; left: 0}

.jeden, .dwa, .trzy { padding: 45px 15px}
.jeden:before, .dwa:before, .trzy:before { margin-left: -140px; line-height: 160px}


.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1430px) {
    .container { width: 1400px}
}


@media (max-width: 1920px) {
    
}

@media (max-width: 1600px) {
    .home_table .container { max-width: 640px}
	
}

@media (max-width: 1400px) {
    
}

@media (max-width: 1199px) {
    .header { padding: 20px 0 15px}

    .header ul.nav li { margin: 0 15px}
    .header ul.nav li a { line-height: 3.5rem; font-size: 1.4rem} 
    
    .blog .item .page-header h3 { line-height: 1.6rem; font-size: 1.4rem; height: 6.4rem}
	
	.jeden, .dwa, .trzy { padding-left: 120px}
	.jeden:before, .dwa:before, .trzy:before { font-size: 180px; margin-left: 0px}
    
}

@media (max-width: 991px) {
    .header > .container > .pull-right { margin-top: 5px; margin-right: -15px }
    .header > .container > .pull-right.menu_top_right { margin-top: -5px}
    .blog .item { padding: 3px; margin: 2rem 0}
    .blog .col-sm-5ths, .blog .col-sm-4 { padding: 3px}
    .blog .item .page-header h3 { font-size: 1.3rem; line-height: 1.4rem} 
    
    a.zdjecie .over_img { margin-bottom: 24px}
    .home_table .container #content a.zdjecie { font-size: 2rem; line-height: 2.2rem; padding-bottom: 24px}
    footer { font-size: 1.6rem}
}

@media (max-width: 767px) {
	.jeden, .dwa, .trzy { padding-left: 60px}
	.jeden:before, .dwa:before, .trzy:before { font-size: 90px; line-height: 70px; margin-left: 0px}
	
	.item-page ul { padding-left: 20px}
	
	blockquote { padding: 0px 10px; margin: 20px auto 45px; max-width: 100%} 
	.item-page blockquote p { margin: 10px 0}
	
    .navbar {display: block}
    
    .page-header { margin: 50px 0; }
    .blog > .page-header > h2 { font-size: 2.4rem; margin-bottom: -2rem}
    
    body.home .body { height: auto}
    body.home { height: auto; background-size: cover}
    
    #content { padding-bottom: 3rem}
    footer { position: relative; padding-top: 1rem}
    footer ul { display: inline-block}
    footer ul li { width: auto; display: block}
    
    .header > .container > .pull-right { float: none !important; text-align: center; margin: 10px 0 0}
    .header > .container > .pull-right.menu_top_right { margin: 10px 0 0}
    
    .header { text-align: center}
    .brand { display: block; float: none !important; margin-bottom: 20px}
    .brand img { max-width: 90%}
    
    .navigation .navbar { display: none}
}

@media (max-width: 599px) {
    
}