* {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* ::-webkit-scrollbar, scrollbar { display: none; } */

ul, ul li {
    padding: 0;
    list-style: none;
}

body {
    overflow-x: hidden;
    /* background-color: #eeeeee; */
    
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 300;
    -webkit-text-size-adjust: 100%; /* mobile iOS fix */
}

h1, h2 {
    font-size: 2.0em;
    font-weight: 900;
}

sub, sup {
    font-size: 0.7em;
}

.popup_container, .fake_cover, #mini_menu { display: none; }

.fake_cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    /* background-color: rgba(123,33,233,0.5); */
}

/* ================================== */
/*          Wait for images           */
/* ================================== */

#waiter {
    position: fixed;
    left: 110%;
    height: 100%;
    opacity: 0;
    z-index: -9999;
    overflow: hidden;
}

/* ================================== */
/*                Skew                */
/* ================================== */

.skew_left {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}

.skew_right {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

/* ================================== */
/*               Header               */
/* ================================== */

header {
    position: relative;
    overflow: hidden;
	background-color: #eeeeee;
}

nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
}

#logo {
    float: left;
    height: 100%;
    margin-left: -38px;
    padding: 0 36px 0 56px;
    overflow: hidden;
    background-color: #ffffff;
    cursor: pointer;
}

#logo:hover img { opacity: 0.6; }

#logo figure img {
    margin: 16px;
    height: 56px;
    transition: 0.5s;
}

/* ================================== */
/*             Background             */
/* ================================== */

#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

#gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-image: url("../media/images/black_gradient.png");
    background-size: 100% 100%;
    opacity: 0.5;
}

/* ================================== */
/*            Title & path            */
/* ================================== */

#header_title {
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -70px;
    padding: 20px 50px 20px 150px;
    max-width: 80%;
    color: #ffffff;
    background-color: #009076;
    background-color: rgba(0,144,118,0.9);
}

#path {
    font-size: 0.85em;
    margin-bottom: 5px;
}

#path li {
    float: left;
    cursor: pointer;
}
#path span:hover { text-decoration: underline; }
#path li::before { content: "/ "; padding-left: 5px; }
#path li:first-of-type:before { content: ""; padding-left: 0; }

h1 { clear: both; }

/* ================================== */
/*               Article              */
/* ================================== */

div.text_box, #shortcuts {
    padding: 80px;
}

article {
    color: #333333;
    background-color: #ffffff;
}

article section {
    position: relative;
    overflow: hidden;
    float: none;
}

section.blok-image, section.blog-image {
    min-height: 30vw;
}

div.text_box h2 {
    padding-bottom: 40px;
}

div.text_box h3 {
    font-size: 1.0em;
    opacity: 0.6;
    font-weight: inherit;
}

div.text_box p {
    line-height: 1.6;
    text-align: justify;
}

div.text_box p b {
    font-weight: 600;
}

div.text_box ul > li {
    list-style: disc;
    margin-left: 18px;
    margin-top: 5px;
    line-height: 1.5;
    text-align: justify;
}

div.text_box ul > li.sublist {
    list-style: none;  
}

section.header { clear: right; }
section.header h2 { display: none; }
section.header div.text_box { font-weight: 600; opacity: 0.85; }

section.header p b { font-size: 1.5em; font-weight: 900; };

section.akapit, section.table, section.blok-image, section.blok-gallery, section.blok-video {
    width: 100%;
    clear: both;
    float: none;
}

section.blok-none, section.non-text {
    width: 50%;
    float: left;
}

section.non-text {
	min-height: 30vw;
}

section.akapit {
    width: 100%;
}
section.header {
    width: auto;
}

section.non-text figure {
	position: inherit;
	float: left;
}

/* ================================== */
/*                Banner              */
/* ================================== */

section .akapit .banner {
    padding: 0 20%;
}
section .banner {
    margin-bottom: 20px;
}
section .banner img {
    width: 100%;
    height: auto;
}

/* ================================== */
/*          Textarea Banners          */
/* ================================== */

section .text_box .banner, section .text_box .button {
    position: relative;
    display: block;
    clear: both;
    margin: 0;

    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

section .text_box .banner {
	margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    min-height: 100px;
}

section .text_box .button { text-align: center; }

section .text_box .button img {
    margin: 3px 5%;
    height: 100px;
    width: auto;
}

section .text_box .size_1 img { height: 50px; }
section .text_box .size_2 img { height: 100px; }
section .text_box .size_3 img { height: 200px; }

section .text_box .figure {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section .text_box .text_right .figure { left: 0; }
section .text_box .text_right { padding-left: 25%; }
section .text_box .text_right p { padding-left: 20px; }

section .text_box .text_left .figure { right: 0; }
section .text_box .text_left { padding-right: 25%; }
section .text_box .text_left p { padding-right: 20px; }

section .text_box a > img, section .text_box a > .figure { transition: 0.5s; }
section .text_box a > img:hover, section .text_box a > .figure:hover { opacity: 0.6; }

section .text_box .hr {
	padding: 10px 0;
}
section .text_box hr {
    border: none;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0));
}

/* ================================== */
/*               Table                */
/* ================================== */

article table {
	table-layout: fixed;
	width: 100%;
}

article table tr td {
	padding: 3px 10px;
	background-color: #f4f4f4;
}

article table tr.empty td { background-color: transparent; }

article table.headers_kolumn tr:first-of-type { font-weight: 600; }
/* article table.headers_kolumn .row_0 td  { background-color: #888888; color: #ffffff; } */
article table.headers_wierszy tr td:first-of-type { font-weight: 600; }

/* ================================== */
/*               Media                */
/* ================================== */

article a, article a > i {
    color: #0a9a80;
}

section.blok-mediabox div.text_box {
    width: 50%;
    float: left;
    clear: left;
}

section.blok-mediabox figure, section.akapit-mediabox figure {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.blok-mediabox figure {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

section.non-text figure {
    width: 100%;
}

section.akapit-mediabox figure {
    width: 100%;
    height: 60vw;
}

/* File */

section div.text_box .file, section div.text_box .files {
    margin-top: 2em;
}

section .file i, section .files i {
    margin-right: 5px;
    font-size: 1.5em;
}
section .file .size, section .files .size {
    margin-left: 5px;
    font-size: 0.85em;
    opacity: 0.5;
}

/* Media */

section figure.image {
    cursor: zoom-in;
}

section figure.link_image {
    cursor: pointer;
}

figure.video { position: relative; }

figure .video_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
}

/* ====== DISABLED CROPPING ====== */
article .no_cropping figure {
    background-size: contain;
    background-color: #ffffff;
}

/* ================================== */
/*             Media Popup            */
/* ================================== */

section figure {
    position: relative;
    overflow: hidden;
}

section figure .icon {
    position: absolute;
    display: table-cell;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    color: rgba(255,255,255,0.75);
    font-size: 4em;
    text-shadow: 0 0 10px #444;
    border: none;
    opacity: 0;
    transition: 0.5s;
    cursor: pointer;
}
section figure:hover .icon {
    opacity: 1;
    
}

section figure .icon i {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-size: 0.33em;
    vertical-align: bottom;
    margin-left: 5px;
}

section.blog figure.image, section figure.gallery {
    cursor: pointer;
}

.media_fader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.75);
}

.media_popup {
    position: relative;
    top: 2%;
    left: 2%;
    height: 96%;
    width: 96%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.media_fader i {
    color: #ffffff;
}

.media_fader .close {
    position: fixed;
    right: 2%;
    top: 2%;
    background-color: transparent;
    border: none;
    font-size: 40px;
    cursor: pointer;
    transition: 0.5s;
}
.media_fader .close:hover {
    opacity: 0.6;
}

.media_fader .prev, .media_fader .next {
    position: fixed;
    top: 40%;
    height: 20%;
    background-color: rgba(0,0,0,0);
    border: 0;
    font-size: 60px;
    cursor: pointer;
}
.media_fader .prev:hover > i, .media_fader .next:hover > i {
    background-color: rgba(0,0,0,0.25);
    opacity: 1;
}
.media_fader .prev i, .media_fader .next i {
    padding: 20px 50px;
    border-radius: 10px;
    text-shadow: 0 0 5px #222222;
    opacity: 0.75;
    transition: 0.5s;
}

.media_fader .prev { left: 2%; }
.media_fader .next { right: 2%; }

.media_fader .info {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    
    color: #ffffff;
    text-shadow: 0 0 5px #222222;
    text-align: center;
    font-size: 1.2em;
}

/* ================================== */
/*              Shorctuts             */
/* ================================== */

#shortcuts {
    width: 33%;
    min-width: 400px;
    float: left;
    padding-right: 0;
    color: #888888;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

#shortcuts select {
    display: block;
	margin-bottom: 3px;
    padding: 0 15px;
    height: 28px;
	width: 100%;
    border: 1px solid #cccccc;
	font-size: inherit;
    background-color: transparent;
    outline: 0;
    border-radius: 7px;
    /*
    color: #ffffff;
    background-color: #009076;
    border: none;
    */
}

#shortcuts select:active {
    outline: none;
    border: none;
}

#shortcuts li {
    padding: 12px 20px;
    cursor: pointer;
    transition: 0.5s;
}
#shortcuts li i {
    display: block;
	padding-right: 30px;
    height: 36px; /* fix for text indent */
    float: left;
    overflow: hidden;
}

#shortcuts .href { border-bottom: 1px #dddddd solid; }
#shortcuts .href:last-of-type { border-bottom: none; }

#shortcuts .href:nth-of-type(3n - 1) i { color: #F6CB3B; }
#shortcuts .href:nth-of-type(3n) i { color: #00B976; }
#shortcuts .href:nth-of-type(3n + 1) i { color: #29BBDD; }

#shortcuts .href:hover {
    text-decoration: underline;
	background-color: #efefef;
}

#shortcuts dd {
    padding: 10px 20px;
}

/* ================================== */
/*        Categories menu boxes       */
/* ================================== */

#categories_menu {
    box-shadow: 0 0 20px #aaaaaa;
	clear: left;
}

#categories_menu .box {
    position: relative;
    top: 0;
    padding: 40px;
    width: 25%;
    height: 25vw;
    float: left;
    cursor: pointer;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
    
#categories_menu .box > div {
    width: 100%;
    height: 100%;
    transition: 1s;
}

#categories_menu .double > div  { width: 45%; }
#categories_menu .triple > div { width: 29%; }

#categories_menu div.box:hover > div {
    -ms-transform: scale(1.10,1.10); /* IE 9 */
    -webkit-transform: scale(1.10,1.10); /* Safari */
    transform: scale(1.10,1.10);
}

#categories_menu .group {
	opacity: 0.75;
}

#categories_menu h2 {
    padding: 0;
    margin-top: 10px;
}

#categories_menu button {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 1px solid #333333;
    font-size: inherit;
    opacity: 0.75;
}

#categories_menu button i {
    position: relative;
    font-size: 1.75em;
}

#categories_menu div.double { width: 50%; height: 25vw; }
#categories_menu div.triple { width: 75%; height: 25vw; }

.double figure, .triple figure {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    opacity: 0.3;
}
.double figure { width: 50%; background-size: cover; background-position: right; }
.triple figure { width: 66.66%; background-size: 115%; background-position: right; }

#categories_menu div.double:hover > figure {
    background-position: center;
    opacity: 1;
}
#categories_menu div.triple:hover > figure {
	background-position: left;
    opacity: 1;
}


.arrow {
	display: none;
    position: absolute;
    top: 25%;
    margin-top: -50px;
    width: 0; 
    height: 0;
    border-color: green;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid white;
}

#categories_menu div.double .arrow { display: block; left: 50%; }
#categories_menu div.triple .arrow { display: block; left: 33.33%; }

#categories_menu div.box figure, #categories_menu div.box .arrow { transition: 1s; }

#categories_menu > a, #path a {
    color: inherit;
    text-decoration: none;
}

/* ================================== */
/*           Category popup           */
/* ================================== */

.category_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
}

.category_container .category_popup {
    display: none;
    position: relative;
    margin: 5% auto;
    width: 60%;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 0 50px #222222;
    cursor: pointer;
}

.category_container .close {
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: transparent;
    border: none;
    font-size: 2em;
	cursor: pointer;
	transition: 0.5s;
}
.category_container .close:hover {
	opacity: 0.6;
}

/* ================================== */
/*               Footer               */
/* ================================== */

footer {
    position: relative;
	width: 100%;
    padding: 45px 30px;
    padding-bottom: 60px;
    color: #cccccc;
    background-color: #101010;
    overflow: hidden;
	clear: both;
}

footer .ukryj, footer .language_menu { display: none; }
footer i { /* display none not working on font icons */
    position: fixed;
    bottom: -100%;
    opacity: 0;
    z-index: -99;
}

footer dl {
    position: relative;
    float: left;
    padding: 1px 20px;
    /* min-height: 100px; */
    border-right: 1px dashed #424242;
}
footer dl:last-of-type { border: none }
footer dt, footer dd { cursor: pointer; }
footer dt { font-weight: 600; margin-bottom: 15px; }
footer .glowne dd { opacity: 0.75; font-size: 0.9em; }
footer .drugie dd { font-weight: 600; }

nav .icon, footer .icon { height: 60px; margin-bottom: 4px; }

footer dt:hover, footer dd:hover { text-decoration: underline; }
footer dd .icon:hover { opacity: 0.6; }

footer dl dd {
    margin-top: 5px;
}

footer .glowne dd {
    white-space: nowrap;
    overflow: hidden;
}

/* ================================== */
/*            Scroll down             */
/* ================================== */

#scroll_down {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}

#scroll_down div {
    width: 60px;
    height: 60px;
    color: #ffffff;
    /* background-color: rgba(0,0,0,0.25); */
    border-radius: 50px;
    margin: 0 auto;
}

#scroll_down i {
    text-shadow: 0 0 10px #777777;
    position: relative;
    top: 5px;
    font-size: 60px;
}

/* ================================== */
/*             Info Popup             */
/* ================================== */

.info_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.info_popup  .popup {
	position: relative;
	margin: 100px auto;
	width: 60%;
	padding: 30px 40px;
	color: #ffffff;
	background-color: #111111;
	border-radius: 20px;
	box-shadow: 0 0 100px #ffffff;
	overflow: hidden;
	opacity: 0.9;
}

.info_popup .popup button {
	position: absolute;
	top: 15px;
	right: 15px;
	background-color: transparent;
	border: none;
	font-size: 1.5em;
	color: #ffffff;
	opacity: 0.5;
	transition: 0.5s;
	cursor: pointer;
}

.info_popup .popup button:hover { opacity: 1; }
.info_popup .popup p { margin: 10px 0; }

.info_popup .popup .title {
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.0;
}

.info_popup .popup a {
	color: #00B976;
	text-decoration: none;
}
.info_popup .popup a:hover {
	text-decoration: underline;
}

/* ================================== */
/*          Imbir copyrights          */
/* ================================== */

#imbir {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    opacity: 0.4;
    transition: 0.5s;
}
#imbir:hover { opacity: 0.8; }
#imbir a {
    color: inherit;
    text-decoration: none;
}
#imbir a:hover { text-decoration: underline; }