/*
Theme Name: ColorMag Child
Theme URI: https://themegrill.com/themes/colormag/
Template: colormag
Author: ThemeGrill
Author URI: https://themegrill.com
Description: ColorMag is always the best choice when it comes to magazine, news, and blog WordPress themes. You can create elegant and modern websites for news portals, online magazines, and publishing sites. With ColorMag’s 8 and counting free starter demos for health, food, entertainment, sports, and fashion industries, building a magazine style website is super easy. Best of all, the ColorMag WordPress theme offers multiple ad spaces in its layout. So, you can monetize your website by displaying ads in these slots without any fuss. And if you plan to sell products and services online, you can rely on the theme’s compatibility with WooCommerce. Some of its key features are: >> SEO Optimized >> Translation & RTL Ready >> Cross-browser Compatible >> Custom Widgets >> Responsive Design >> Sticky Menu. So, download the free ColorMag theme and create professional magazine websites quickly. You can get free support for ColorMag at https://themegrill.com/contact/ and check our demos at https://themegrilldemos.com/colormag/
Tags: one-column,two-columns,right-sidebar,left-sidebar,flexible-header,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,featured-images,theme-options,post-formats,footer-widgets,blog,e-commerce,news,rtl-language-support
Version: 3.0.1.1688298273
Updated: 2023-07-02 11:44:33
*/
/* -----------------------------------------------------------------------------
0. szerokość strony
1. fonts family
2. fonts size
3. fonts color
4. ogólne
5. header 
6. main menu 
7. nagłówki 
8. bloki
9. właściwości wspólne 
10. #cm-primary.cm-primary
11. strona inna planeta 
12. strona matrix, transform translate, scale, rotate, skew  
13. strona perspective 
14. strona origin 
15. strona transform 3d
16. strona transition wprowadzenie 
17. strona transition przykłady 
18. strona transition & transform 
19. strona animation przykłady 
20. strona hover 
21. strona grid podstawy 
23. strona grid-auto-flow
24. strona grid układ siatki
25. strona grid layout
26. strona grid span 
27. strona grid minmax 
28. strona wyrównywanie ścieżek siatki
29. strona wyrównywanie elementów siatki
30. strona grid jednostki
31. strona grid gotowce
32. strona border
33. strona hr 
34. strona shortcodes 
35. strona kolory 
36. komentarze pod wpisami 
37. #cm-footer.cm-footer 
38. cm-footer-bar
39. accordion
--------------------------------------------
kolory:
------

#f4f4f5  -  prawie biały
#e3e2e2  -  jasny szary, oryginalny kolor treści p
#b1b6b6  -  ciemny szary, treść
#27272a  -  tło ciemne
#f78da7  -  różowy
#50C8FF  -  niebieski - background item z opacity

#8ed1fc  -  oryginalny niebieski kolor tekst w wp-block-preformatted,

od najjaśniejszego
1. #6BC1E2
2. #4BB0D6
3. #289DCC  - podświetlenie w menu, przycisków kategorii, ramka niebieska, podkreślenia tytułów h4, tekst z klasą .columns-linki, prev next, podświetlenie linków we footer i blokach LINKI, 
4. #078FC2

wolny numer: lp009

 -----------------------------------------------------------------------------*/

/*******************************************************************************/
/****************************** 0. szerokość strony ****************************/
/*******************************************************************************/
.cm-container {
    max-width: 1280px;
}
.dark-skin .cm-posts .post {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/* Autoprefixer CSS online */
a.autoprefixer {
    position: fixed;
    bottom: 45%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 2;
    color: #ccc;
    display: block;
    line-height: 100%;
}
a.autoprefixer:hover {
    color: white;
}
@media screen and (max-width: 1399px) {
    a.autoprefixer {
        right: -80px;    
    }
}
@media screen and (min-width: 1400px) {
    a.autoprefixer {
        right: -60px;    
    }
}

/* copy to clipboard */
.shcb-language {
    display: none !important;
}
.btn-clipboard {
    top: 15px;
    right: 15px;
    display: inline-block;
    position: absolute;
    background: #000;
    min-width: 60px;
    width: auto;
    padding: 5px 8px 7px 8px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    line-height: 100%;
}
/*******************************************************************************/
/******************************** 1. fonts family ******************************/
/*******************************************************************************/
@font-face {
    font-family: 'latoregular';
    src: url('fonts/lato-regular-webfont.woff2') format('woff2'),
        url('fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
h1,
h2 {
    font-family: 'latoregular' !important;
}
/*******************************************************************************/
/********************************* 2. fonts size *******************************/
/*******************************************************************************/
.tlo-ciemne p {
    line-height: 160%;
    font-family: 'Open Sans', serif;
    font-size: 16px;
}
.item-opacity {
    font-size: 15px;
}
.matrix-blok h3 {
    font-size: 18px !important;
}
.blok3d .h3-3d {
    font-size: 18px !important;
}
.blok3d .h3-3d span {
    font-size: 24px;
}
.transition1-blok .star-five p {
    font-size: 13px;
}
.hover4-blok .btn,
.hover5-blok .glow-on-hover,
.hover6-blok .ddle,
.hover7-blok .learn {
    font-family: 'Open Sans', serif !important;
    font-size: 14px;
}
footer#cm-footer ul li a {
    font-size: 13px;
}
.cm-post-categories a {
    font-size: 18px;
}
/*******************************************************************************/
/********************************* 3. fonts color ******************************/
/*******************************************************************************/
/* jasny szary */
.tlo-ciemne {
    color: #e3e2e2;
}
.dark-skin .cm-entry-summary p {
    /* z szablonu dark */
    color: #e3e2e2;
}
/* ciemny szary */
ul.menuinpost li a span,
.wp-classic-menu-block ul.menu li a span,
.modal pre .s2,
footer#cm-footer ul li a span,
#stopka-copy a {
    color: #b1b6b6;
}
.has-cyan-bluish-gray-color {
    /* wstępne formatowanie */
    color: #b1b6b6 !important;
}
/* jasno niebieski */
a,
.kolor,
.ramka-niebieska h4 a,
.modal pre .s1,
ul.menuinpost li a:hover,
.wp-classic-menu-block ul.menu li a:hover,
.wp-block-columns.columns-linki a,
ul.default-wp-page li.previous a,
ul.default-wp-page li.next a,
.matrix-blok h3 span.kolor,
.blok3d figure.wp-block-table.table3d td:first-child,
.tableAlign td:first-child,
footer#cm-footer a:hover {
    color: #289dcc;
}
.ramka-niebieska h4 a:hover,
.wp-block-columns.columns-linki a:hover {
    color: white;
}
/*******************************************************************************/
/********************************** 4. ogólne **********************************/
/*******************************************************************************/
p,
.cm-entry-summary p {
    margin-top: 0;
    margin-bottom: 25px;
    padding-top: 0;
    padding-bottom: 0;
}
p:last-child {
    padding-bottom: 0;
}
/* linki a */
a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a:hover, 
a:focus,
a:active {
    text-decoration: none;
}
a:focus,
a.skip-link:focus {
	outline: thin dotted;
}
a:hover,
a:active {
	outline: 0;
}
.skip-link {
    display: none !important;
}
/*******************************************************************************/
/********************************** 5. header **********************************/
/*******************************************************************************/
a.custom-logo-link {
    padding: 28px 5px;
}
p.cm-site-description {
    display: none;
}
h1.cm-site-title,
h3.cm-site-title {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
h1.cm-site-title a,
h3.cm-site-title a {
    margin-left: 50px;
    color: white;
    font-family: 'Lato', sans-serif !important;
    font-size: 18px;
    letter-spacing: 3px;
    font-style: italic;
    text-transform: lowercase;
}
@media screen and (min-width: 48em) {
    .cm-header-1 .cm-row {
        display: block;
    }
    .cm-header-col-1 {
        width: 100%;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 338px 250px;
        grid-template-columns: 338px 250px;
    }
}
.cm-header-col-2 {
    display: none;
}
/*******************************************************************************/
/********************************* 6. main menu ********************************/
/*******************************************************************************/
.cm-primary-nav ul li ul {
    white-space: nowrap;
    background: #4A4A4A !important;
    width: auto;
}
.cm-primary-nav ul ul li a {
    width: 100%;
}
.cm-primary-nav ul ul li a:hover {
    background: none !important;
}
/*******************************************************************************/
/********************************* 7. nagłówki *********************************/
/*******************************************************************************/
h1,
h2,
h3,
h4 {
    font-weight: normal;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 26px;
}
h3 {
    font-size: 22px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
/* h1, h2 */
.cm-entry-title {
    font-size: 30px !important;
    text-transform: uppercase;
    line-height: 140%;
}
.cm-entry-title a {
    color: #ffffff;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.cm-entry-title a:hover {
    text-decoration: none;
}
/* bloki */
.ramka-niebieska h4 {
    border-bottom: 3px solid #289dcc;
    text-align: center;
    line-height: 130% !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px;
}
body.page header.cm-entry-header {
    margin-bottom: 40px;
}
body.single .cm-below-entry-meta {
    margin-bottom: 40px;
}
/*******************************************************************************/
/*********************************** 8. bloki **********************************/
/*******************************************************************************/
.odstep {
    margin-bottom: 20px !important;
}
.bez-odstepu {
    margin-bottom: 0 !important;
}
/* wp-block-group */
.wp-block-group {
    padding: 0;
}
/* ramka-niebieska */
.ramka-niebieska {
    border: 1px solid #289dcc;
    padding: 15px !important;
    margin-bottom: 100px;
}
.ramka-niebieska.perspective-blok {
    margin-bottom: 100px;
}
.ramka-niebieska:last-child {
    margin-bottom: 30px;
}
.ramka-niebieska h3 {
    margin-bottom: 15px;
}
/* tlo-ciemne */
.tlo-ciemne {
    background: #27272a;
    border: none;
    -webkit-box-shadow: 5px 5px 10px #000;
    box-shadow: 5px 5px 10px #000;
    margin-top: 0 !important;
    margin-bottom: 15px;
    padding: 20px;
}
.tlo-ciemne10 {
    padding: 20px 20px 10px 20px;    
}
/* strona shortcodes */
article#post-1882 .tlo-ciemne {
    margin-bottom: 0px !important;
}
/* wp-block-separator */
.wp-block-separator {
    margin-top: 0;
    margin-bottom: 25px !important;
}

/* wp-block-columns */
@media only screen and (max-width: 1023px) {
    .wp-block-columns {
        display: block !important;
    }
    .wp-block-column:first-child {
        margin: 0 0 35px 0;
    }
}
.wp-block-columns.columns-linki {
    /* linki validation na dole bloków */
    margin-top: 15px;
}
.wp-block-columns.columns-linki .wp-block-column:first-child {
    text-align: left;
}
.wp-block-columns.columns-linki .wp-block-column:last-child {
    text-align: right;
}
.wp-block-columns.columns-linki .wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}
/* wp-block-preformatted */
pre.wp-block-preformatted {
    background: #1D1D1F;
    border: none !important;
    outline: none !important;
    padding: 15px !important;
    margin: 0 0 10px 0 !important;
    
    width: auto;
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    line-height: 20px;
}
pre.marginleft50-html mark.has-cyan-bluish-gray-color:nth-child(even) {
    margin-left: 40px !important;
}
pre.marginleft50-css mark.has-cyan-bluish-gray-color {
    margin-left: 40px !important;
}
/* wp-block-code */
pre.wp-block-code {
    background: #1D1D1F;
    border: 0 !important;
    outline: none !important;
    padding: 15px !important;  
    margin: 0 0 10px 0 !important;
    width: auto;  
}

pre.wp-block-code code {
    white-space: pre-wrap !important;
    padding: 0 !important;
}

/* Syntax-highlighting Code Block (with Server-side Rendering) */
/* plugins\syntax-highlighting-code-block\vendor\scrivo\highlight-php\styles\dark.css */
.hljs {
    background: none !important; 
}

/* highlighted lines */
.hljs > mark.shcb-loc {
    background: none !important;
}
.hljs > mark.shcb-loc * {
    color: #f78da7 !important;    
}
.hljs > mark.shcb-loc .hljs-attribute {
    color: #f78da7 !important;   
} 

/* html */
.hljs.language-xml {
    color: white;
}
.hljs.language-xml .hljs-tag {
    color: #b1b6b6; /*jasno-szary*/
}
.hljs.language-javascript,
.hljs.language-xml .hljs-attr {
    color: #8C9393; /*ciemno-szary*/
}
.hljs.language-javascript .hljs-string,
.hljs.language-xml .hljs-string {
    color: #8ed1fc; /*jasno-niebieski oryginalny szablonowy*/
}

/* css */
.hljs.language-css {
    color: white;    
}
.hljs.language-css  .hljs-selector-tag,
.hljs.language-css  .hljs-selector-id,
.hljs.language-css .hljs-selector-class {
    color: #8ed1fc;    
}
.hljs.language-css .hljs-attribute {
    color: #b1b6b6 !important;
}
.hljs.language-css .hljs-number,
.hljs.language-css .hljs-built_in {
    color: white;
}
.hljs.language-css .hljs-selector-pseudo,
.hljs.language-css .hljs-string {
    color: white;
}
/* Shortcodes & codes dla wordpressa */
.shortcode-white code,
.shortcode-white code span {
    color: #e3e2e2 !important;  
}
/*******************************************************************************/
/**************************** 9. właściwości wspólne ***************************/
/*******************************************************************************/
.hold {
    border: 1px dashed white;
    width: 262px;
    height: 132px;
    margin: 0 auto;
}
.item {
    background: #289dcc;
    width: 260px;
    height: 130px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center;
}
.item-opacity {
    background: #50C8FF;
    color: black;
    opacity: 0.8;
}
@media only screen and (min-width: 1024px) {
    .short {
        margin-left: 30%;
    }
}
/*******************************************************************************/
/************************** 10. #cm-primary.cm-primary *************************/
/*******************************************************************************/
#cm-content.cm-content {
    padding-top: 90px;
    padding-bottom: 30px;
}
.cm-posts article.post {
    overflow: visible;
}
.cm-posts article.post:after {
    content: "";
    clear: both;
    display: block;
}
.cm-post-content {
    padding: 0;
}
body.home .cm-post-content,
body.archive .cm-post-content {
    margin-bottom: 100px;
}
.cm-entry-summary ul {
    list-style: square;
    font-size: 15px;
    margin: 0;
    padding: 0 0 0 20px;
}
.cm-entry-summary ul li {
    line-height: 130%;
}
/* meta */
.cm-entry-header-meta {
    margin-top: 15px;
}
.cm-entry-button {
    float: right;
}
.cm-entry-button:after {
    content: "";
    clear: both;
}
.cm-below-entry-meta a {
    text-decoration: none !important;
}
.cm-below-entry-meta a:hover {
    color: white !important;
}
.cm-below-entry-meta .cm-author,
.cm-below-entry-meta .cm-edit-link {
    display: none;
}
/* prev next */
ul.default-wp-page li.previous a,
ul.default-wp-page li.next a {
    text-decoration: none;
}
/* menu wstawione do postu - funcions & shortcode */
ul.menuinpost {
    margin: 0;
    padding: 0;
}
ul.menuinpost li {
    display: block;
    background: url(images/kropka-ikona.png) 0px 8px no-repeat;
    padding-left: 30px;
    line-height: 130%;
}
ul.menuinpost li a {
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    color: white;
    text-decoration: none;
}
ul.menuinpost li a:hover {
    text-decoration: none !important;
}
/* wp-classic-menu-block */
.wp-classic-menu-block ul.menu {
    margin-left: 7px;
}
.wp-classic-menu-block ul.menu li {
    display: block;
    background: url(images/kropka-ikona.png) 0px 8px no-repeat;
    padding-left: 30px;
}
.wp-classic-menu-block ul.menu li a {
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    color: white;
    text-decoration: none;
}
.wp-classic-menu-block ul.menu li a:hover {
    text-decoration: none !important;
}
/* home */
.cm-posts.col-2 {
    grid-template-columns: 100% !important;
}
.cm-featured-image {
    padding-bottom: 10px;
    text-align: center;
    background: #BFBFBF;
    border: 3px solid #6A6A6A;
    padding: 3px;
}
.cm-featured-image:hover {
    background: white;
}
.cm-featured-image img {
    width: 100%;
    height: auto;
}
/*******************************************************************************/
/*************************** 11. strona inna planeta ***************************/
/*******************************************************************************/
.wp-block-group.motto-ja {
    text-align: justify;
}
.wp-block-group.motto-ja p {
    line-height: 200%;
}
/*******************************************************************************/
/******** 12. strona matrix, transform, translate, scale, rotate, skew *********/
/*******************************************************************************/
.matrix-lista mark.has-inline-color {
    display: inline-block;
    width: 130px;
}
.matrix-blok .item-1 {
    -webkit-transform: translate(150px, -40px);
    transform: translate(150px, -40px);
}
.matrix-blok .item-2 {
    -webkit-transform: scale(0.5, 2.5);
    transform: scale(0.5, 2.5);
}
.matrix-blok .item-3 {
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
}
.matrix-blok .item-4 {
    -webkit-transform: skew(50deg, 50deg);
    transform: skew(50deg, 50deg);
}
.matrix-blok .item-5 {
    -webkit-transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
    transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
}
/*** accordion ***/
.matrix-blok h3 {
    text-align: center;
    padding-bottom: 40px;
    font-weight: normal;
}
.content-accord .boks {
    margin-bottom: 80px;
}
@media only screen and (max-width: 1023px) {
    #content1-accord .hold {
        margin: 0 auto 70px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content1-accord .boks {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
        grid-gap: 100px 0px;
    }
}
/* translate() */
#content1-accord .item-1 {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
}
#content1-accord .item-2 {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}
#content1-accord .item-3 {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}
#content1-accord .item-4 {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}
#content1-accord .item-5 {
    -webkit-transform: translate(30px, 30px);
    transform: translate(30px, 30px);
}
#content1-accord .item-6 {
    -webkit-transform: translate(-30px, -30px);
    transform: translate(-30px, -30px);
}
#content1-accord .item-7 {
    -webkit-transform: translate(30px);
    transform: translate(30px);
}
#content1-accord .item-8 {
    -webkit-transform: translate(-30px);
    transform: translate(-30px);
}
#content1-accord .item-9 {
    -webkit-transform: perspective(100px) translateZ(30px);
    transform: perspective(100px) translateZ(30px);
}
#content1-accord .item-10 {
    -webkit-transform: perspective(400px) translateZ(30px);
    transform: perspective(400px) translateZ(30px);
}
#content1-accord .item-11 {
    -webkit-transform: perspective(200px) translateZ(30px);
    transform: perspective(200px) translateZ(30px);
}
#content1-accord .item-12 {
    -webkit-transform: perspective(400px) translateZ(60px);
    transform: perspective(400px) translateZ(60px);
}
#content1-accord .item-13 {
    -webkit-transform: perspective(300px) translateZ(30px);
    transform: perspective(300px) translateZ(30px);
}
#content1-accord .item-14 {
    -webkit-transform: perspective(400px) translateZ(90px);
    transform: perspective(400px) translateZ(90px);
}
#content1-accord .item-15 {
    -webkit-transform: perspective(400px) translateZ(30px);
    transform: perspective(400px) translateZ(30px);
}
#content1-accord .item-16 {
    -webkit-transform: perspective(400px) translateZ(120px);
    transform: perspective(400px) translateZ(120px);
}
#content1-accord .item-17 {
    -webkit-transform: perspective(300px) translate3d(50px, 75px, 40px);
    transform: perspective(300px) translate3d(50px, 75px, 40px);
}
#content1-accord .item-18 {
    -webkit-transform: perspective(300px) translate3d(10px, 10px, 10px);
    transform: perspective(300px) translate3d(10px, 10px, 10px);
}
/* scale() */
@media only screen and (max-width: 1023px) {
    #content2-accord .hold {
        margin: 0 auto 70px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content2-accord .boks {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto auto;
        grid-template-columns: auto auto auto;
        grid-gap: 100px 0px;
    }
}
#content2-accord .item-1 {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
#content2-accord .item-2 {
    -webkit-transform: scaleX(1.4);
    transform: scaleX(1.4);
}
#content2-accord .item-3 {
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
#content2-accord .item-4 {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#content2-accord .item-5 {
    -webkit-transform: scaleY(1.4);
    transform: scaleY(1.4);
}
#content2-accord .item-6 {
    -webkit-transform: scaleY(0.8);
    transform: scaleY(0.8);
}
#content2-accord .item-7 {
    -webkit-transform: scale(1, 1.4);
    transform: scale(1, 1.4);
}
#content2-accord .item-8 {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}
#content2-accord .item-9 {
    -webkit-transform: scale(-1.4);
    transform: scale(-1.4);
}
#content2-accord .item-10 {
    -webkit-transform: perspective(300px) scale3d(1, 1, 1) translateZ(100px);
    transform: perspective(300px) scale3d(1, 1, 1) translateZ(100px);
}
#content2-accord .item-11 {
    -webkit-transform: perspective(300px) scale3d(0.5, 0.5, 0.5) translateZ(200px);
    transform: perspective(300px) scale3d(0.5, 0.5, 0.5) translateZ(200px);
}
#content2-accord .item-12 {
    -webkit-transform: perspective(300px) scale3d(0.75, 1.25, 0.5) translateZ(300px);
    transform: perspective(300px) scale3d(0.75, 1.25, 0.5) translateZ(300px);
}
/* rotate() */
@media only screen and (max-width: 1023px) {
    #content3-accord .hold {
        margin: 0 auto 70px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content3-accord .boks {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
        grid-gap: 100px 0px;
    }
}
#content3-accord .p1 {
    margin-top: -20px;
    margin-bottom: 20px;
    text-align: center;
}
#content3-accord .item-1 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
#content3-accord .item-2 {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
#content3-accord .item-3 {
    -webkit-transform: perspective(300px) rotateX(45deg);
    transform: perspective(300px) rotateX(45deg);
}
#content3-accord .item-4 {
    -webkit-transform: perspective(300px) rotateX(-45deg);
    transform: perspective(300px) rotateX(-45deg);
}
#content3-accord .item-5 {
    -webkit-transform: perspective(300px) rotateY(45deg);
    transform: perspective(300px) rotateY(45deg);
}
#content3-accord .item-6 {
    -webkit-transform: perspective(300px) rotateY(-45deg);
    transform: perspective(300px) rotateY(-45deg);
}
#content3-accord .item-7 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
#content3-accord .item-8 {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
#content3-accord .item-9 {
    -webkit-transform: perspective(300px) rotate3d(1, 1, 1, 45deg);
    transform: perspective(300px) rotate3d(1, 1, 1, 45deg);
}
#content3-accord .item-10 {
    -webkit-transform: perspective(300px) rotate3d(1, 1, 1, -45deg);
    transform: perspective(300px) rotate3d(1, 1, 1, -45deg);
}
/* skew() */
@media only screen and (max-width: 1023px) {
    #content4-accord .hold {
        margin: 0 auto 70px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content4-accord .boks {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
        grid-gap: 100px 0px;
    }
}
#content4-accord .item-1 {
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}
#content4-accord .item-2 {
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
}
#content4-accord .item-3 {
    -webkit-transform: skewY(30deg);
    transform: skewY(30deg);
}
#content4-accord .item-4 {
    -webkit-transform: skewY(-30deg);
    transform: skewY(-30deg);
}
#content4-accord .item-5 {
    -webkit-transform: skew(30deg, 20deg);
    transform: skew(30deg, 20deg);
}
#content4-accord .item-6 {
    -webkit-transform: skew(-30deg, -20deg);
    transform: skew(-30deg, -20deg);
}
#content4-accord .item-7 {
    -webkit-transform: skew(-30deg, 20deg);
    transform: skew(-30deg, 20deg);
}
#content4-accord .item-8 {
    -webkit-transform: skew(30deg, -20deg);
    transform: skew(30deg, -20deg);
}
/* matrix3d */
@media only screen and (max-width: 1023px) {
    #content5-accord .hold {
        margin: 0 auto 70px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content5-accord .boks {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
        grid-gap: 150px 0;
    }
}
#content5-accord .item-1 {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
}
#content5-accord .item-3 {
    -webkit-transform: matrix(1, 1, 0, 1, 0, 0);
    transform: matrix(1, 1, 0, 1, 0, 0);
}
#content5-accord .item-5 {
    -webkit-transform: matrix(1, 0, 1, 1, 0, 0);
    transform: matrix(1, 0, 1, 1, 0, 0);
}
#content5-accord .item-2 {
    -webkit-transform: matrix(1, 0, 0, 1, 50, 0);
    transform: matrix(1, 0, 0, 1, 50, 0);
}
#content5-accord .item-4 {
    -webkit-transform: matrix(1, 1, 0, 1, 0, 50);
    transform: matrix(1, 1, 0, 1, 0, 50);
}
#content5-accord .item-6 {
    -webkit-transform: matrix(1, 0, 1, 1, 50, 50);
    transform: matrix(1, 0, 1, 1, 50, 50);
}
/* matrix3d( */
#content5-accord .boks .item {
    padding: 10px;
    display: -ms-grid;
    display: grid;
    place-content: center;
}
#content5-accord .boks1 {
    margin-bottom: 80px;
}
@media only screen and (max-width: 1023px) {
    #content5-accord .hold {
        margin: 0 auto 70px auto;
    }
    #content5-accord .boks2 table {
        margin: 0 auto 100px auto;
    }
}
@media only screen and (min-width: 1024px) {
    #content5-accord .boks2 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 54% 46%;
        grid-template-columns: 54% 46%;
        grid-gap: 150px 35px;
    }
}
#content5-accord .boks2 {
    margin-top: 30px;
    margin-bottom: 140px;
}
#content5-accord .boks2 table {
    width: 350px;
}
#content5-accord .boks2 td {
    border: 1px solid silver;
    width: 70px !important;
    padding: 5px 20px;
    text-align: right;
}
#content5-accord .item-1 {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
}
#content5-accord .item-3 {
    -webkit-transform: matrix(1, 1, 0, 1, 0, 0);
    transform: matrix(1, 1, 0, 1, 0, 0);
}
#content5-accord .item-5 {
    -webkit-transform: matrix(1, 0, 1, 1, 0, 0);
    transform: matrix(1, 0, 1, 1, 0, 0);
}
#content5-accord .item-2 {
    -webkit-transform: matrix(1, 0, 0, 1, 50, 0);
    transform: matrix(1, 0, 0, 1, 50, 0);
}
#content5-accord .item-4 {
    -webkit-transform: matrix(1, 1, 0, 1, 0, 50);
    transform: matrix(1, 1, 0, 1, 0, 50);
}
#content5-accord .item-6 {
    -webkit-transform: matrix(1, 0, 1, 1, 50, 50);
    transform: matrix(1, 0, 1, 1, 50, 50);
}
#content5-accord .item-7 {
    -webkit-transform: perspective(300px) matrix3d(1, 0, 1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
    transform: perspective(300px) matrix3d(1, 0, 1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
}
#content5-accord .item-8 {
    -webkit-transform: perspective(300px) matrix3d(1, 0, -1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
    transform: perspective(300px) matrix3d(1, 0, -1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
}
#content5-accord .item-9 {
    -webkit-transform: perspective(300px) matrix3d(1, 1, -1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
    transform: perspective(300px) matrix3d(1, 1, -1, 0,
            0, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
}
#content5-accord .item-10 {
    -webkit-transform: perspective(300px) matrix3d(1, 0, -1, 0,
            1, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
    transform: perspective(300px) matrix3d(1, 0, -1, 0,
            1, 1, 0, 0,
            1, 0, 0, 0,
            0, 0, 0, 1);
}
/*******************************************************************************/
/**************************** 13. strona perspective ***************************/
/*******************************************************************************/
@media only screen and (max-width: 1023px) {
    .perspective-img {
        width: 50%;
        max-width: 450px;
        height: auto;
        margin: 0 auto;
    }
}
.perspective-blok .item-1 {
    -webkit-transform: perspective(300px) rotateX(50deg);
    transform: perspective(300px) rotateX(50deg);
}
.perspective-blok .item-2 {
    -webkit-transform: perspective(300px) rotateY(50deg);
    transform: perspective(300px) rotateY(50deg);
}
.perspective-blok .item-3 {
    -webkit-transform: perspective(300px) rotateX(50deg) rotateY(50deg);
    transform: perspective(300px) rotateX(50deg) rotateY(50deg);
}
.perspective-blok .rodzic-1,
.perspective-blok .rodzic-2 {
    -webkit-perspective: 300px;
    perspective: 300px;
}
.perspective-blok .item.dziecko-1 {
    -webkit-transform: rotateX(50deg);
    transform: rotateX(50deg);
}
.perspective-blok .item.dziecko-2 {
    -webkit-transform: rotateY(50deg);
    transform: rotateY(50deg);
}
/*******************************************************************************/
/****************************** 14. strona origin ******************************/
/*******************************************************************************/
/* lp034, lp035, lp036 */
.origin-blok.ramka-niebieska .wp-block-column {
    padding-bottom: 100px;
    margin: 0 !important;   
}
@media only screen and (max-width: 479px) {
    .hold {
        width: 202px;
        height: 102px;
    } 
    .item {
        width: 200px;
        height: 100px;        
    }
}
@media only screen and (max-width: 1023px) {
    .origin-blok.ramka-niebieska .wp-block-column.last2 {
        padding-bottom: 0 !important;
    }
}
@media only screen and (min-width: 1024px) {
    .origin-blok.ramka-niebieska .wp-block-column.last1,
    .origin-blok.ramka-niebieska .wp-block-column.last2 {
        padding-bottom: 0 !important;
    }
}
.origin-blok.ramka-niebieska .wp-block-group.tlo-ciemne {
    padding: 30px;
}
.origin-blok.ramka-niebieska pre.wp-block-code {
    height: 205px;
}
.origin-blok .hold .item-1-1 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.origin-blok .hold .item-1-2 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.origin-blok .hold .item-1-3 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.origin-blok .hold .item-1-4 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.origin-blok .hold .item-1-5 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.origin-blok .hold .item-1-6 {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.origin-blok .hold .item-2-1 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.origin-blok .hold .item-2-2 {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.origin-blok .hold .item-2-3 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.origin-blok .hold .item-2-4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.origin-blok .hold .item-2-5 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.origin-blok .hold .item-2-6 {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
/*******************************************************************************/
/*************************** 15. strona transform 3d ***************************/
/*******************************************************************************/
/* definicja */
.blok3d figure.wp-block-table.table3d {
    margin: 0;
}
.blok3d figure.wp-block-table.table3d table,
.blok3d figure.wp-block-table.table3d td {
    border: none;
}
.blok3d figure.wp-block-table.table3d td {
    padding: 10px 20px;
    text-align: left;
}
.blok3d figure.wp-block-table.table3d td:first-child {
    font-weight: bold;
}
/* przykłady z perspective i bez */
@media only screen and (max-width: 1023px) {
    .blok3d .example-columns .hold {
        margin-bottom: 60px;
    }
}
.blok3d .example-columns .hold {
    margin-bottom: 10px;
}
.blok3d .ex1-1 .item {
    -webkit-transform: perspective(400px) translateZ(80px);
    transform: perspective(400px) translateZ(80px);
}
.blok3d .ex1-2 .item {
    -webkit-transform: translateZ(80px);
    transform: translateZ(80px);
}
.blok3d .ex2-1 .item {
    -webkit-transform: perspective(400px) scaleZ(1.5) rotateX(45deg);
    transform: perspective(400px) scaleZ(1.5) rotateX(45deg);
}
.blok3d .ex2-2 .item {
    -webkit-transform: scaleZ(1.5) rotateX(45deg);
    transform: scaleZ(1.5) rotateX(45deg);
}
.blok3d .ex3-1 .item {
    -webkit-transform: perspective(400px) rotateX(45deg) translateZ(80px);
    transform: perspective(400px) rotateX(45deg) translateZ(80px);
}
.blok3d .ex3-2 .item {
    -webkit-transform: rotateX(45deg) translateZ(80px);
    transform: rotateX(45deg) translateZ(80px);
}
/* dalsze przykłady */
.blok3d .h3-3d {
    font-weight: normal;
    text-align: center;
    padding-bottom: 50px;
}
.blok3d .h3-3d span {
    color: #f78da7
}
.holdTransform3d .hold {
    width: 102px;
    height: 102px;
    margin-bottom: 60px;
}
.holdTransform3d .item {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center;
}
.holdTransform3d {
    margin-bottom: 60px;
}
@media only screen and (max-width: 799px) {
    .holdTransform3d {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto 30px auto;
        grid-template-columns: auto auto;
        grid-gap: 100px 30px;
    }
    .blok3d .h3-3d.spec {
        padding-bottom: 80px !important;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1023px) {
    .holdTransform3d {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto 30px auto 30px auto;
        grid-template-columns: auto auto auto;
        grid-gap: 100px 30px;
    }
    .blok3d .h3-3d.spec {
        padding-bottom: 70px !important;
    }
}
@media only screen and (min-width: 1024px) {
    .holdTransform3d {
        display: -ms-grid;
        display: grid;
        grid-auto-flow: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .blok3d .h3-3d.spec {
        padding-bottom: 70px !important;
    }
}
.holdTransform3d .item-1 {
    -webkit-transform: perspective(300px) translateZ(50px);
    transform: perspective(300px) translateZ(50px);
}
.holdTransform3d .item-2 {
    -webkit-transform: perspective(300px) translateZ(30px);
    transform: perspective(300px) translateZ(30px);
}
.holdTransform3d .item-3 {
    -webkit-transform: perspective(300px) translateZ(10px);
    transform: perspective(300px) translateZ(10px);
}
.holdTransform3d .item-4 {
    -webkit-transform: perspective(300px) translateZ(0);
    transform: perspective(300px) translateZ(0);
}
.holdTransform3d .item-5 {
    -webkit-transform: perspective(300px) translateZ(-10px);
    transform: perspective(300px) translateZ(-10px);
}
.holdTransform3d .item-6 {
    -webkit-transform: perspective(300px) translateZ(-30px);
    transform: perspective(300px) translateZ(-30px);
}
.holdTransform3d .item-7 {
    -webkit-transform: perspective(300px) translateZ(-50px);
    transform: perspective(300px) translateZ(-50px);
}
.holdTransform3d .item-8 {
    -webkit-transform: perspective(50px) translateZ(30px);
    transform: perspective(50px) translateZ(30px);
}
.holdTransform3d .item-9 {
    -webkit-transform: perspective(100px) translateZ(30px);
    transform: perspective(100px) translateZ(30px);
}
.holdTransform3d .item-10 {
    -webkit-transform: perspective(200px) translateZ(30px);
    transform: perspective(200px) translateZ(30px);
}
.holdTransform3d .item-11 {
    -webkit-transform: perspective(400px) translateZ(30px);
    transform: perspective(400px) translateZ(30px);
}
.holdTransform3d .item-12 {
    -webkit-transform: perspective(800px) translateZ(30px);
    transform: perspective(800px) translateZ(30px);
}
.holdTransform3d .item-13 {
    -webkit-transform: perspective(1600px) translateZ(30px);
    transform: perspective(1600px) translateZ(30px);
}
.holdTransform3d .item-14 {
    -webkit-transform: perspective(50px) translateZ(-30px);
    transform: perspective(50px) translateZ(-30px);
}
.holdTransform3d .item-15 {
    -webkit-transform: perspective(100px) translateZ(-30px);
    transform: perspective(100px) translateZ(-30px);
}
.holdTransform3d .item-16 {
    -webkit-transform: perspective(200px) translateZ(-30px);
    transform: perspective(200px) translateZ(-30px);
}
.holdTransform3d .item-17 {
    -webkit-transform: perspective(400px) translateZ(-30px);
    transform: perspective(400px) translateZ(-30px);
}
.holdTransform3d .item-18 {
    -webkit-transform: perspective(800px) translateZ(-30px);
    transform: perspective(800px) translateZ(-30px);
}
.holdTransform3d .item-19 {
    -webkit-transform: perspective(1600px) translateZ(-30px);
    transform: perspective(1600px) translateZ(-30px);
}
.holdTransform3d .item-20 {
    -webkit-transform: perspective(50px) rotateY(25deg);
    transform: perspective(50px) rotateY(25deg);
}
.holdTransform3d .item-21 {
    -webkit-transform: perspective(100px) rotateY(25deg);
    transform: perspective(100px) rotateY(25deg);
}
.holdTransform3d .item-22 {
    -webkit-transform: perspective(200px) rotateY(25deg);
    transform: perspective(200px) rotateY(25deg);
}
.holdTransform3d .item-23 {
    -webkit-transform: perspective(300px) rotateY(25deg);
    transform: perspective(300px) rotateY(25deg);
}
.holdTransform3d .item-24 {
    -webkit-transform: perspective(400px) rotateY(25deg);
    transform: perspective(400px) rotateY(25deg);
}
.holdTransform3d .item-25 {
    -webkit-transform: perspective(500px) rotateY(25deg);
    transform: perspective(500px) rotateY(25deg);
}
/*******************************************************************************/
/********************** 16. strona transition wprowadzenie *********************/
/*******************************************************************************/
/* gwiazda */
.transition1-blok .star-five {
    border-right: 100px solid transparent;
    border-bottom: 70px solid #289dcc;
    border-left: 100px solid transparent;
    position: relative;
    left: -1px;
    margin: 100px auto 0 auto;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    z-index: 1;
}
.transition1-blok .star-five:before {
    border-right: 30px solid transparent;
    border-bottom: 80px solid #289dcc;
    border-left: 30px solid transparent;
    content: '';
    display: block;
    position: absolute;
    top: -45px;
    left: -65px;
    width: 0;
    height: 0;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    z-index: 1;
}
.transition1-blok .star-five:after {
    border-right: 100px solid transparent;
    border-bottom: 70px solid #289dcc;
    border-left: 100px solid transparent;
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    z-index: 1;
}
.transition1-blok .star-five:hover {
    border-bottom: 70px solid #f78de7;
    color: black;
}
.transition1-blok .star-five:hover:before {
    border-bottom: 80px solid #f78de7;
    color: black;
}
.transition1-blok .star-five:hover:after {
    border-bottom: 70px solid #f78de7;
    color: black;
}
.transition1-blok .star-five p {
    width: 100px;
    position: absolute;
    left: -55px;
    top: 13px;
    text-align: center;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    z-index: 10;
}
.transition1-blok .star-five2 {
    border-right: 100px solid transparent;
    border-bottom: 70px solid white;
    border-left: 100px solid transparent;
    display: block;
    position: relative;
    margin: -70px auto 0 auto;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg) scale(1.2, 1.2);
    z-index: 0;
}
.transition1-blok .star-five2:before {
    border-right: 30px solid transparent;
    border-bottom: 80px solid white;
    border-left: 30px solid transparent;
    content: '';
    display: block;
    position: absolute;
    top: -45px;
    left: -65px;
    width: 0;
    height: 0;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    z-index: 0;
}
.transition1-blok .star-five2:after {
    border-right: 100px solid transparent;
    border-bottom: 70px solid white;
    border-left: 100px solid transparent;
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    z-index: 0;
}
/*******************************************************************************/
/*********************** 17. strona transition przykłady ***********************/
/*******************************************************************************/
/* przyklad 1 */
.transition2-blok {
    color: white;
}
.transition2-blok .square {
    background: #289dcc;
    border-radius: 8px;
    width: 150px;
    max-height: 100px;
    margin: 0 auto 5px auto;
    padding: 8px;
    text-align: center;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.transition2-blok .square.s-linear {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
.transition2-blok .square.s-ease {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.transition2-blok .square.s-ease-in {
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}
.transition2-blok .square.s-ease-out {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.transition2-blok .square.s-ease-in-out {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.transition2-blok .square.s-steps {
    -webkit-transition-timing-function: steps(3);
    transition-timing-function: steps(3);
}
.transition2-blok .square.s-cubic {
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.transition2-blok .square:is(:hover, :focus) {
    width: 50%;
}
/* przykład 2 - 4 */
.transition2-blok .item-1,
.transition2-blok .item-2,
.transition2-blok .item-3 {
    text-align: justify;
    width: 50%;
    height: 150px;
    margin: 0 auto;
    padding: 0 50px;
}
.transition2-blok .item-1 p,
.transition2-blok .item-2 p,
.transition2-blok .item-3 p {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* przyklad 2 */
.transition2-blok .item-1 {
    -webkit-transition: background 1000ms linear, color 700ms linear;
    transition: background 1000ms linear, color 700ms linear;
}
.transition2-blok .item-1:hover {
    background: orangered;
    color: black;
}
/* przyklad 3 */
.transition2-blok .item-2 {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.transition2-blok .item-2:hover {
    -webkit-box-shadow: inset 0 0 0 25px #f78de7;
    box-shadow: inset 0 0 0 25px #f78de7;
}
/* przyklad 4 */
.transition2-blok .item-3 {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.transition2-blok .item-3:hover {
    border-radius: 50%;
}
/*******************************************************************************/
/********************** 18. strona transition & transform **********************/
/*******************************************************************************/
/* transition & transform blok */
.ttHold {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 45px auto 45px auto 45px auto;
    grid-template-columns: auto auto auto auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    grid-gap: 45px;
}
.ttHold .hold {
    background: white;
    width: 180px !important;
    cursor: pointer;
}
.ttHold .item {
    opacity: 0.7;
    width: 180px !important;
}
.ttHold .translateX {
    -webkit-transform: translateX(1);
    transform: translateX(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .translateX {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
}
.ttHold .translateY {
    -webkit-transform: translateY(1);
    transform: translateY(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .translateY {
    -webkit-transform: translateY(32px);
    transform: translateY(32px);
}
.ttHold .translateZ {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .translateZ {
    -webkit-transform: rotate3d(3, 2, 2, 90deg) translateZ(50px);
    transform: rotate3d(3, 2, 2, 90deg) translateZ(50px);
}
.ttHold .translate {
    -webkit-transform: translate(1, 1);
    transform: translate(1, 1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .translate {
    -webkit-transform: translate(32px, 32px);
    transform: translate(32px, 32px);
}
.ttHold .scaleX {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .scaleX {
    -webkit-transform: scaleX(2);
    transform: scaleX(2)
}
.ttHold .scaleY {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .scaleY {
    -webkit-transform: scaleY(2);
    transform: scaleY(2);
}
.ttHold .scale {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .scale {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
}
.ttHold .matrix {
    -webkit-transform: matrix(1, 1, 1, 1);
    transform: matrix(1, 1, 1, 1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .matrix {
    -webkit-transform: matrix(1, -1, 0, 1, 0, 0);
    transform: matrix(1, -1, 0, 1, 0, 0);
}
.ttHold .skewX {
    -webkit-transform: skewX(1);
    transform: skewX(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .skewX {
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}
.ttHold .skewY {
    -webkit-transform: skewY(1);
    transform: skewY(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .skewY {
    -webkit-transform: skewY(30deg);
    transform: skewY(30deg);
}
.ttHold .skew {
    -webkit-transform: skew(1, 1);
    transform: skew(1, 1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .skew {
    -webkit-transform: skew(30deg, 20deg);
    transform: skew(30deg, 20deg);
}
.ttHold .translate3d {
    -webkit-transform: translate3d(1px, 1px, 1);
    transform: translate3d(1px, 1px, 1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .translate3d {
    -webkit-transform: translate3d(1px, 1px, 50px) rotate3d(3, 2, 2, 90deg);
    transform: translate3d(1px, 1px, 50px) rotate3d(3, 2, 2, 90deg);
}
.ttHold .rotateX {
    -webkit-transform: scaleZ(1) rotateX(0deg);
    transform: scaleZ(1) rotateX(0deg);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .rotateX {
    -webkit-transform: scaleZ(2) rotateX(45deg);
    transform: scaleZ(2) rotateX(45deg);
}
.ttHold .rotateY {
    -webkit-transform: scaleZ(1) rotateY(0deg);
    transform: scaleZ(1) rotateY(0deg);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .rotateY {
    -webkit-transform: scaleZ(2) rotateY(45deg);
    transform: scaleZ(2) rotateY(45deg);
}
.ttHold .rotate {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .rotate {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
.ttHold .matrix3d {
    -webkit-transform: matrix3d(1);
    transform: matrix3d(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ttHold .hold:hover .matrix3d {
    -webkit-transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1);
    transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)
}
/* przyklad 1 */
.transition3-blok {
    color: white;
}
.transition3-blok .item1-hold {
    height: 210px;
    display: -ms-grid;
    display: grid;
    place-content: center;
}
.transition3-blok .item-1 {
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background: #289dcc;
    -webkit-transition: width 2s, height 2s, background 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background 2s, transform 2s;
    transition: width 2s, height 2s, background 2s, transform 2s, -webkit-transform 2s;
}
.transition3-blok .item-1:hover {
    background: #f78de7;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* przykład 2 */
.transition3-blok .item-2 {
    background: #289dcc;
    width: 90%;
    margin: 0 auto;
    padding: 10px 30px 15px 30px;
    text-align: justify;
    position: relative;
    z-index: 2;
}
.transition3-blok .item-2 p {
    margin-bottom: 0;
    padding-bottom: 0;
}
.transition3-blok .item-2 {
    -webkit-transition: all 1.3s ease-in-out;
    transition: all 1.3s ease-in-out;
}
.transition3-blok .item-2:hover {
    background: #000000;
    -webkit-transform: rotate(360deg) scale(1.3);
    transform: rotate(360deg) scale(1.3);
}
/* przykład 3 */
#kropeczkiHold {
    position: relative;
    width: 500px;
    height: 400px;
    margin: 0 auto 10px;
    padding: 10px;
}
#kropeczki1,
#kropeczki2,
#kropeczki3,
#kropeczki4,
#kropeczki5,
#kropeczki6,
#kropeczki7,
#kropeczki8 {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    top: 200px;
    left: 250px;
    background: blue;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#kropeczki1 {
    background: red;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
#kropeczki2 {
    background: yellow;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
#kropeczki3 {
    background: lime;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
#kropeczki4 {
    background: orange;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
#kropeczki5 {
    background: pink;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
#kropeczki6 {
    background: blueviolet;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
#kropeczki7 {
    background: magenta;
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
#kropeczki8 {
    background: #289dcc;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}
#kropeczkiHold:hover #kropeczki1 {
    -webkit-transform: translate(-250px, -200px);
    transform: translate(-250px, -200px);
}
#kropeczkiHold:hover #kropeczki2 {
    -webkit-transform: translate(0, -200px);
    transform: translate(0, -200px);
}
#kropeczkiHold:hover #kropeczki3 {
    -webkit-transform: translate(250px, -200px);
    transform: translate(250px, -200px);
}
#kropeczkiHold:hover #kropeczki4 {
    -webkit-transform: translate(250px, 0);
    transform: translate(250px, 0);
}
#kropeczkiHold:hover #kropeczki5 {
    -webkit-transform: translate(250px, 200px);
    transform: translate(250px, 200px);
}
#kropeczkiHold:hover #kropeczki6 {
    -webkit-transform: translate(0, 200px);
    transform: translate(0, 200px);
}
#kropeczkiHold:hover #kropeczki7 {
    -webkit-transform: translate(-250px, 200px);
    transform: translate(-250px, 200px);
}
#kropeczkiHold:hover #kropeczki8 {
    -webkit-transform: translate(-250px, 0);
    transform: translate(-250px, 0);
}
/*******************************************************************************/
/*********************** 19. strona animation przykłady ************************/
/*******************************************************************************/
/* lp037, lp038, lp039, lp040, lp041, lp042, lp043, lp044 */

.lp037 .htmlDiv, 
.lp038 .htmlDiv, 
.lp039 .htmlDiv, 
.lp040 .htmlDiv, 
.lp041 .htmlDiv, 
.lp042 .htmlDiv, 
.lp043 .htmlDiv, 
.lp044 .htmlDiv {
    color: white;  
}

/* przykład 1 */
.lp044 .disappearWrap {
    height: 75px;
}
.lp044 img.disappear {
    display: block;
    margin: 0 auto;

    -webkit-animation-name: disappearAnimation;
    animation-name: disappearAnimation;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes disappearAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        display: none;
        opacity: 0;
    }
}
@keyframes disappearAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        display: none;
        opacity: 0;
    }
}

/* przykład 2 */
.lp037 .item-1 {
    width: 90%;
    margin: 0 auto;
    padding: 10px 30px;
    -webkit-animation: ex1 5s infinite alternate;
    animation: anim2item1 5s infinite alternate;
}
.lp037 .item-1 p {
    margin-bottom: 0;
    padding-bottom: 0;
}
@-webkit-keyframes anim2item1 {
    0% {
        background: #289dcc;
    }
    50% {
        background: #000000;
    }
    100% {
        background: #FB0101;
    }
}
@keyframes anim2item1 {
    0% {
        background: #289dcc;
    }
    50% {
        background: #000000;
    }
    100% {
        background: #FB0101;
    }
}
/* przykład 3 */
.lp038 .item-2 {
    background: #289dcc;
    width: 140px;
    height: 70px;
    padding: 10px;
    margin-bottom: 5px;
    position: relative;
    -webkit-animation: ex2 5s infinite alternate;
    animation: anim2item2 5s infinite alternate;
}
.lp038 #div1 {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.lp038 #div2 {
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}
.lp038 #div3 {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.lp038 #div4 {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
.lp038 #div5 {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes anim2item2 {
    from {
        left: 0px;
    }
    to {
        left: 85%;
    }
}
@keyframes anim2item2 {
    from {
        left: 0px;
    }
    to {
        left: 85%;
    }
}
/* przykład 4 */
.lp039 .item-3 {
    background: #289dcc;
    width: 140px;
    height: 70px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    -webkit-animation-name: anim2item3;
    animation-name: anim2item3;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes anim2item3 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 300px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 300px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
@keyframes anim2item3 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 300px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 300px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
/* przykład  5 */
.lp040 .item-4 {
    background: #289dcc;
    width: 140px;
    height: 70px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    -webkit-animation-name: anim2item4;
    animation-name: anim2item4;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes anim2item4 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 200px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 200px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
@keyframes anim2item4 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 200px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 200px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
/* przykład 6 */
.lp041 .item-5 {
    background: #289dcc;
    width: 140px;
    height: 70px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    -webkit-animation-name: anim2item5;
    animation-name: anim2item5;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes anim2item5 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 200px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 200px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
@keyframes anim2item5 {
    0% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
    25% {
        background: Gold;
        left: 200px;
        top: 0px;
    }
    50% {
        background: DeepSkyBlue;
        left: 200px;
        top: -200px;
    }
    75% {
        background: LimeGreen;
        left: 0px;
        top: -200px;
    }
    100% {
        background: OrangeRed;
        left: 0px;
        top: 0px;
    }
}
/* przykład 7 */
.lp042 .item-6 {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
    -webkit-animation: anim2item6 2s infinite linear;
    animation: anim2item6 2s infinite linear;
}
@-webkit-keyframes anim2item6 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes anim2item6 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
/* przykład 8 */
@media only screen and (max-width: 1399px) {
    .lp043 {
        display: none;
    }
}
.lp043 .item7-hold {
    max-width: 1280px;
    overflow: hidden;
}
.lp043 .item-7 {
    background: url(images/auto.png) repeat-x;
    height: 79px;
    width: 2000px;
    margin: 0 auto;
    -webkit-animation: anim2item7 1s linear infinite;
    animation: anim2item7 1s linear infinite;
}
@-webkit-keyframes anim2item7 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
}
@keyframes anim2item7 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
}

/*******************************************************************************/
/****************************** 20. strona hover *******************************/
/*******************************************************************************/
/**/
/*** hover1-blok ***/
/* webdesignerdepot.com */
.hover1-blok .wrap {    
    text-align: center;
}
.hover1-blok .wrap a {
    display: inline-block;
    margin: 10px;
    padding-top: 50px;
    -webkit-transition: all 0.9s ease;
    transition: all 0.9s ease;
    color: black;
}
.hover1-blok .item-1:hover {
    -webkit-box-shadow: inset 0 0 0 15px white;
    box-shadow: inset 0 0 0 15px white;
}
.hover1-blok .item-2:hover {
    background: white;
}
.hover1-blok .item-3:hover {
    opacity: 0.5;
}
.hover1-blok .item-4:hover {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
.hover1-blok .item-5:hover {
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.hover1-blok .item-6:hover {
    -webkit-box-shadow:
        1px 1px white,
        2px 2px white,
        3px 3px white;
    box-shadow:
        1px 1px white,
        2px 2px white,
        3px 3px white;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}
.hover1-blok .item-7:hover {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
.hover1-blok .item-8:hover {
    -webkit-animation: swingWOW 1s ease;
    animation: swingWOW 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@-webkit-keyframes swingWOW {
    15% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swingWOW {
    15% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.hover1-blok .item-9:hover {
    border-radius: 50%;
}
/*** hover2-blok ***/
/* Na podstawie html5canvastutorials.com */
.wp-block-group.hover2-blok .wp-block-columns,
.wp-block-group.hover2-blok .wp-block-column,
.wp-block-group.hover2-blok .wp-block-pb-accordion-item h3,
.wp-block-group.hover2-blok .wp-block-column .ab-pre {
    margin: 0 !important;
}
.wp-block-group.hover2-blok .wp-block-column {
    padding: 10px;
}
.wp-block-group.hover2-blok .wp-block-pb-accordion-item {
    clear: both;
    margin-bottom: 100px;
}
.wp-block-columns.ab .wp-block-column {
    padding-bottom: 60px;
}
@media only screen and (max-width: 1023px) {
    .wp-block-group.hover2-blok .wp-block-columns.ab a {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 1024px) {
    .wp-block-group.hover2-blok .wp-block-columns.ab a {
        width: 25%;
        float: left;
    }
    .wp-block-group.hover2-blok .ab-pre {
        width: 70%;
        height: 200px;
        float: right;
    }
}
.hover2-blok a.ex {
    width: 120px;
    height: 52px;
    color: black;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
}
.hover2-blok a.ex span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-grid;
    display: grid;
    place-content: center;
    z-index: 1;
}
/* ex 1 */
.hover2-blok .ex-1 {
    background: #289dcc;
}
.hover2-blok .ex-1 span {
    background: #289dcc;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.hover2-blok .ex-1 span:last-of-type {
    background: #aaa;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.hover2-blok .ex-1:hover span:last-of-type {
    background: #ffffff;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.hover2-blok .ex-1:hover span:first-of-type {
    background: #289dcc;
}
/* ex 2 */
.hover2-blok .ex-2 {
    background: #289dcc;
}
.hover2-blok .ex-2 span {
    opacity: 1;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.hover2-blok .ex-2 span:nth-of-type(2),
.hover2-blok .ex-2 span:nth-of-type(3) {
    background: #ffffff;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    clip: rect(0, 60px, 9999px, 0);
}
.hover2-blok .ex-2 span:nth-of-type(3) {
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    clip: rect(0, 9999px, 9999px, 60px);
}
.hover2-blok .ex-2:hover span:nth-of-type(2),
.hover2-blok .ex-2:hover span:nth-of-type(3) {
    background: #ffffff;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
.hover2-blok .ex-2:hover span:nth-of-type(2),
.hover2-blok .ex-2:hover span:nth-of-type(3) {
    background: #ffffff;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
.hover2-blok .ex-2:hover span:first-of-type {
    background: #289dcc;
}
.hover2-blok .ex-2 span:last-of-type {
    background: #ffffff;
    opacity: 0;
    -webkit-transition: none;
    transition: none;
}
.hover2-blok .ex-2:hover span:last-of-type {
    -webkit-transition: all 0.05s linear 0.3s;
    transition: all 0.05s linear 0.3s;
}
/* ex 3 */
.hover2-blok .ex-3 {
    background: #ffffff;
    -webkit-transition: background 0.3s linear 0.3s, -webkit-transform 0.3s linear;
    transition: background 0.3s linear 0.3s, -webkit-transform 0.3s linear;
    transition: transform 0.3s linear, background 0.3s linear 0.3s;
    transition: transform 0.3s linear, background 0.3s linear 0.3s, -webkit-transform 0.3s linear;
}
.hover2-blok .ex-3 span {
    -webkit-transition: all 0.3s linear 0.3s;
    transition: all 0.3s linear 0.3s;
}
.hover2-blok .ex-3:hover {
    background: #ffffff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
.hover2-blok .ex-3 span:nth-of-type(2),
.hover2-blok .ex-3 span:nth-of-type(3) {
    background: #289dcc;
    clip: rect(0px, 9999px, 26px, 0px);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.hover2-blok .ex-3 span:nth-of-type(3) {
    clip: rect(26px, 9999px, 52px, 0px);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.hover2-blok .ex-3:hover span:nth-of-type(2),
.hover2-blok .ex-3:hover span:nth-of-type(3) {
    background: #289dcc;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
/* ex 4 */
.hover2-blok .ex-4 > span > span {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.hover2-blok .ex-4 > span > span span {
    background: #289dcc;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: background 0.3s linear, -webkit-transform 0.3s linear;
    transition: background 0.3s linear, -webkit-transform 0.3s linear;
    transition: transform 0.3s linear, background 0.3s linear;
    transition: transform 0.3s linear, background 0.3s linear, -webkit-transform 0.3s linear;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.hover2-blok .ex-4:hover > span > span span:first-of-type {
    background: #289dcc;
}
.hover2-blok .ex-4 > span > span span:nth-of-type(2) {
    background: #ffffff;
    -webkit-transform: rotateX(-90deg) translateZ(52px);
    transform: rotateX(-90deg) translateZ(52px);
}
.hover2-blok .ex-4:hover > span > span span:nth-of-type(2) {
    background: #ffffff;
}
.hover2-blok .ex-4:hover > span > span {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
/* ex 5 */
.hover2-blok .ex-5 span {
    background: #289dcc;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
.hover2-blok .ex-5 span:nth-of-type(1) {
    z-index: 99999;
}
.hover2-blok .ex-5:hover span:nth-of-type(5) {
    left: 40px;
}
.hover2-blok .ex-5 span:nth-of-type(2),
.hover2-blok .ex-5 span:nth-of-type(3),
.hover2-blok .ex-5 span:nth-of-type(4) {
    background: none;
}
.hover2-blok .ex-5 span:nth-of-type(2):after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-width: 28px 0 0 28px;
    border-color: transparent transparent transparent #289dcc;
}
.hover2-blok .ex-5 span:nth-of-type(3):after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 28px 28px 0 0;
    border-color: #289dcc transparent transparent #289dcc;
}
.hover2-blok .ex-5 span:nth-of-type(4):after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 26px 0 26px 23px;
    border-color: transparent transparent transparent #289dcc;
}
.hover2-blok .ex-5:hover span:nth-of-type(2) {
    top: -28px;
    left: 40px;
}
.hover2-blok .ex-5:hover span:nth-of-type(3) {
    top: 28px;
    left: 40px;
}
.hover2-blok .ex-5:hover span:nth-of-type(4) {
    right: -23px;
    left: 63px;
}
/* ex 6 */
.hover2-blok .ex-6 {
    background: #289dcc;
    overflow: hidden;
}
.hover2-blok .ex-6 span {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
    transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}
.hover2-blok .ex-6 span:first-of-type {
    z-index: 99999;
}
.hover2-blok .ex-6 span:last-of-type {
    background: #ffffff;
    left: -100%;
}
.hover2-blok .ex-6:hover span {
    left: 0;
}
/*** hover4-blok ***/
/* Na podstawie tympanus.net */
/* własności wspólne */
.hover4-blok .holdButtons {
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 399px) {
    .hover4-blok .holdButtons {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
        grid-gap: 40px;
    }
}
@media only screen and (min-width: 400px) {
    .hover4-blok .holdButtons {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto auto auto;
        grid-template-columns: auto auto auto;
        grid-gap: 40px;
    }
}
.hover4-blok .btn {
    background: none;
    border: none;
    outline: none;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    cursor: pointer;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.hover4-blok .btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
/* Button 1 */
.hover4-blok .btn-1 {
    border: 3px solid #289dcc;
    color: #ffffff;
}
/* Button 1a */
.hover4-blok .btn-1a:hover,
.hover4-blok .btn-1a:active {
    color: #27272a;
    background: #ffffff;
}
/* Button 1b */
.hover4-blok .btn-1b:after {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #ffffff;
}
.hover4-blok .btn-1b:hover,
.hover4-blok .btn-1b:active {
    color: #27272a;
}
.hover4-blok .btn-1b:hover:after,
.hover4-blok .btn-1b:active:after {
    height: 100%;
}
/* Button 1c */
.hover4-blok .btn-1c:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffff;
}
.hover4-blok .btn-1c:hover,
.hover4-blok .btn-1c:active {
    color: #27272a;
}
.hover4-blok .btn-1c:hover:after,
.hover4-blok .btn-1c:active:after {
    width: 100%;
}
/* Button 1d */
.hover4-blok .modal pre {
    max-width: 1000px;
}
.hover4-blok .btn-1d {
    overflow: hidden;
}
.hover4-blok .btn-1d:after {
    width: 0;
    height: 103%;
    top: 50%;
    left: 50%;
    background: #ffffff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.hover4-blok .btn-1d:hover,
.hover4-blok .btn-1d:active {
    color: #27272a;
}
.hover4-blok .btn-1d:hover:after {
    width: 90%;
    opacity: 1;
}
.hover4-blok .btn-1d:active:after {
    width: 101%;
    opacity: 1;
}
/* Button 1e */
.hover4-blok .btn-1e {
    overflow: hidden;
}
.hover4-blok .btn-1e:after {
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    background: #ffffff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hover4-blok .btn-1e:hover,
.hover4-blok .btn-1e:active {
    color: #27272a;
}
.hover4-blok .btn-1e:hover:after {
    height: 260%;
    opacity: 1;
}
.hover4-blok .btn-1e:active:after {
    height: 400%;
    opacity: 1;
}
/* Button 1f */
.hover4-blok .btn-1f {
    overflow: hidden;
}
.hover4-blok .btn-1f:after {
    width: 101%;
    height: 0;
    top: 50%;
    left: 50%;
    background: #ffffff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.hover4-blok .btn-1f:hover,
.hover4-blok .btn-1f:active {
    color: #27272a;
}
.hover4-blok .btn-1f:hover:after {
    height: 75%;
    opacity: 1;
}
.hover4-blok .btn-1f:active:after {
    height: 130%;
    opacity: 1;
}
/*** hover5-blok ***/
.modal.gl {
    max-width: 1900px !important;
}
.modal.gl pre {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.hover5-blok .glow-on-hover {
    background: #111;
    border: none;
    outline: none;
    text-align: center;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    padding: 20px 50px;
    width: 300px;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    line-height: 150%;
    text-decoration: none !important;
}
.hover5-blok .glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    position: absolute;
    border-radius: 10px;
    top: -2px;
    left: -2px;
    z-index: -1;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    -webkit-animation: glowing 20s linear infinite;
    animation: glowing 20s linear infinite;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.hover5-blok .glow-on-hover:active {
    color: #000
}
.hover5-blok .glow-on-hover:active:after {
    background: transparent;
}
.hover5-blok .glow-on-hover:hover:before {
    opacity: 1;
}
.hover5-blok .glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}
@-webkit-keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
/*** hover6-block ***/
.hover6-blok .ddle {
    background: #111;
    position: relative;
    overflow: hidden;
    color: white;
    text-transform: uppercase;
    margin: 0 auto;
    padding: 20px 50px;
    width: 180px;
    text-align: center;
    display: block;
    border-radius: 5px;
    text-decoration: none !important;
    text-align: center;
    line-height: 150%;
}
.hover6-blok .ddle:after {
    content: "";
    position: absolute;
    top: -330%;
    left: -210%;
    width: 200%;
    height: 300%;
    opacity: 0;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: -webkit-gradient(linear,
            left top, right top,
            from(rgba(255, 255, 255, 0.13)),
            color-stop(77%, rgba(255, 255, 255, 0.13)),
            color-stop(92%, rgba(255, 255, 255, 0.5)),
            to(rgba(255, 255, 255, 0.0)));
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%);
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
}
.hover6-blok .ddle:hover:after {
    opacity: 1;
    top: -30%;
    left: -30%;
    -webkit-transition-property: left, top, opacity;
    transition-property: left, top, opacity;
    -webkit-transition-duration: 0.7s, 0.7s, 0.15s;
    transition-duration: 0.7s, 0.7s, 0.15s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.hover6-blok .ddle:active:after {
    opacity: 0;
}
/*** .hover7-blok ***/
.hover7-blok .learn {
    background: #111;
    border: 0;
    -webkit-box-shadow: 0 5px 0 #616161;
    box-shadow: 0 5px 0 #616161;
    color: white;
    cursor: pointer;
    width: 180px;
    margin: 0 auto;
    padding: 20px 50px;
    text-align: center;
    text-decoration: none !important;
    display: block;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}
.hover7-blok .learn:hover,
.hover7-blok .learn:active {
    -webkit-box-shadow: 0 2px 0 #616161;
    box-shadow: 0 2px 0 #616161;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
/*******************************************************************************/
/*************************** 21. strona grid podstawy **************************/
/*******************************************************************************/
/* info */
.lp001 .wp-block-column {
    overflow: hidden;  
    color: white;
    font-size: 17px;
}
@media only screen and (max-width: 1023px) {
    .lp001 figure {
        margin: 0 auto !important;
        float: none !important;
    }    
}
@media only screen and (min-width: 1024px) {
    .lp001 .info-left p {
        display: table-cell;
        height: 285px;
        vertical-align: middle;
    }
}

/* lp002, lp003, lp004, lp005, lp004-a, lp005-a / lp008 */
.lp002 .grid,
.lp003 .grid,
.lp004 .grid,
.lp004-a .grid,
.lp005 .grid,
.lp005-a .grid,
.lp006 .grid, /* grid-auto-flow */
.lp007 .grid, /* grid-auto-flow */
.lp008 .grid,
.lp010 .grid {
    color: black;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.lp002 .grid-1,
.lp003 .grid-1,
.lp004 .grid-1,
.lp004-a .grid-1,
.lp005 .grid-1,
.lp005-a .grid-1,
.lp006 .grid-1, /* grid-auto-flow */
.lp007 .grid-1, /* grid-auto-flow */
.lp008 .grid-1,
.lp010 .grid-1 {
    background: #6BC1E2;    
}
.lp002 .grid-2,
.lp003 .grid-2,
.lp004 .grid-2,
.lp004-a .grid-2,
.lp005 .grid-2,
.lp005-a .grid-2,
.lp006 .grid-2, /* grid-auto-flow */
.lp007 .grid-2, /* grid-auto-flow */
.lp008 .grid-2,
.lp010 .grid-2 {
    background: #4BB0D6;    
}
.lp002 .grid-3,
.lp003 .grid-3,
.lp004 .grid-3,
.lp004-a .grid-3,
.lp005 .grid-3,
.lp005-a .grid-3,
.lp006 .grid-3, /* grid-auto-flow */
.lp007 .grid-3, /* grid-auto-flow */
.lp008 .grid-3,
.lp010 .grid-3 {
    background: #289dcc;    
}
.lp002 .grid-4,
.lp003 .grid-4,
.lp004 .grid-4,
.lp004-a .grid-4,
.lp005 .grid-4,
.lp005-a .grid-4,
.lp006 .grid-4, /* grid-auto-flow */
.lp007 .grid-4, /* grid-auto-flow */
.lp008 .grid-4,
.lp010 .grid-4 {
    background: #078FC2;    
}
.lp002 .wrap {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
}
.lp003 .wrap {
    border: 1px dashed white;
    display: -ms-inline-grid;
    display: inline-grid;
}
.lp004 .wrap {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto auto auto;
    grid-template-columns: auto auto auto auto;
}
.lp004-a .wrap {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.lp005 .wrap {
    border: 1px dashed white;
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto auto auto;
    grid-template-columns: auto auto auto auto;
}
.lp005-a .wrap {
    border: 1px dashed white;
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* przykład - kolejność */
.lp008 .wrap {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto auto auto;
    grid-template-columns: auto auto auto auto;
}
.lp008 .wrap .grid-1:nth-of-type(1) {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}
.lp008 .wrap .grid-2:nth-of-type(2) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
.lp008 .wrap .grid-3:nth-of-type(3) {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}
.lp008 .wrap .grid-4:nth-of-type(4) {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}
/*******************************************************************************/
/************************** 23. strona grid-auto-flow **************************/
/*******************************************************************************/
.lp033 .wrap {
    border: 1px dashed white;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;   
}
.lp033 .wrap > div {
    background: #289dcc;
    color: black;
    text-align: center;
    padding: 20px 0;
}

.lp006 .wrap {
    border: 1px dashed white;
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: column;
}
.lp007 .wrap {
    border: 1px dashed white;
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: row;
}
.lp010 .wrap {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/*******************************************************************************/
/************************* 24. strona grid układ siatki ************************/
/*******************************************************************************/
.lp011 .wrap {
    border: 1px dashed white;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    gap: 3px;
}
.lp011 .grid {
    background: #289dcc;
    text-align: center;
    color: white;
}
.lp012 .wrap {
    border: 1px dashed white;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}
.lp012 .grid {
    background: #289dcc;
    line-height: 65px;
    text-align: center;
    color: white;
}
.lp013 .wrap {
    border: 1px dashed white;
    width: 400px;
    height: 200px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}
.lp013 .grid {
    background: #289dcc;
    line-height: 65px;
    text-align: center;
    color: white;
}
.lp014 .wrap {
    border: 1px dashed white;
    width: 400px;
    height: 200px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}
.lp014 .grid {
    background: #289dcc;
    width: 50px;
    height: 50px;
    line-height: 46px;
    text-align: center;
    color: white;
}
/*******************************************************************************/
/**************************** 25. strona grid layout ***************************/
/*******************************************************************************/
.lp015 .grid,
.lp016 .grid,
.lp017 .grid,
.lp018 .grid {
    color: black;
    text-transform: uppercase;
    padding: 5px 10px;
    display: -ms-grid;
    display: grid;
    place-content: center;    
}
/* layout 1 */
.lp015 .wrap-1 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 1fr 5px 1fr 5px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 50px 5px 50px 5px 50px;
    grid-template-rows: 50px 50px 50px;
    grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
    grid-gap: 5px;
}
.lp015 .wrap-1 .grid-1 {
    grid-area: head;
    background: #289dcc;
}
.lp015 .wrap-1 .grid-1-2 {
    grid-area: head2;
    background: #6BC1E2;
}
.lp015 .wrap-1 .grid-2 {
    grid-area: main;
    background: #6BC1E2;
}
.lp015 .wrap-1 .grid-2-2 {
    grid-area: main2;
    background: #289dcc;
}
.lp015 .wrap-1 .grid-3 {
    grid-area: side;
    background: #289dcc;
}
.lp015 .wrap-1 .grid-4 {
    grid-area: footer;
    background: #289dcc;
}
/* layout 2 */
.lp016 .wrap-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 5px 2fr 5px 1fr 5px 2fr;
    grid-template-columns: 2fr 2fr 1fr 2fr;
    -ms-grid-rows: 50px 5px 50px 5px 50px;
    grid-template-rows: 50px 50px 50px;
    grid-template-areas:
        "head head . side"
        "main main . side"
        "footer footer footer footer";
    grid-gap: 5px;
}
.lp016 .wrap-2 .grid-1 {
    grid-area: head;
    background: #289dcc;
}
.lp016 .wrap-2 .grid-2 {
    grid-area: main;
    background: #6BC1E2;
}
.lp016 .wrap-2 .grid-3 {
    grid-area: side;
    background: #289dcc;
}
.lp016 .wrap-2 .grid-4 {
    grid-area: footer;
    background: #289dcc;
}
/* layout 3 */
.lp017 .wrap-3 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 3fr 5px 1fr 5px 1fr 5px 1fr;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    -ms-grid-rows: 50px;
    grid-template-rows: 50px;
    grid-gap: 5px;
}
.lp017 .wrap-3 .grid-1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    background: #289dcc;
}
.lp017 .wrap-3 .grid-2 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    background: #6BC1E2;
}
.lp017 .wrap-3 .grid-3 {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
    background: #4BB0D6;
}
.lp017 .wrap-3 .grid-4 {
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    grid-column: 4 / 5;
    background: #078FC2;
}
.lp017 .wrap-3 .grid-5 {
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
    grid-column: 5 / 6;
    background: #04678D;
}
/* layout 4 */
.lp018 .wrap-4 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 3fr 5px 1fr 5px 1fr 5px 1fr;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    -ms-grid-rows: 50px 5px 50px 5px 50px 5px 50px 5px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px;
    grid-gap: 5px;
}
.lp018 .wrap-4 .grid-1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    background: #289dcc;
}
.lp018 .wrap-4 .grid-2 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    background: #6BC1E2;
}
.lp018 .wrap-4 .grid-3 {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    background: #4BB0D6;
}
.lp018 .wrap-4 .grid-4 {
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    grid-column: 4 / 5;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / 5;
    background: #078FC2;
}
.lp018 .wrap-4 .grid-5 {
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
    grid-column: 5 / 6;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / 6;
    background: #04678D;
}
/*******************************************************************************/
/**************************** 26. strona grid span *****************************/
/*******************************************************************************/
.lp020 .grid,
.lp021 .grid {
    color: black;
    text-transform: uppercase;
    padding: 5px 10px;
    display: -ms-grid;
    display: grid;
    place-content: center;    
}
.lp020 .grid-1,
.lp021 .grid-1 {
    background: #289dcc;    
}
.lp020 .grid-2,
.lp021 .grid-2 {
    background: #6BC1E2;    
}
.lp020 .grid-3,
.lp021 .grid-3 {
    background: #078FC2;    
}
/* grid-column */
.lp020 .wrap-1,
.lp020 .wrap-2 {
    display: grid;
    grid-template-columns: repeat(6, 50px);
    grid-template-rows: 50px;
    border: 1px dashed white;
    width: 302px;
}
.lp020 .wrap-1 .grid-1,
.lp020 .wrap-2 .grid-1 {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
}
.lp020 .wrap-1 .grid-2,
.lp020 .wrap-2 .grid-2 {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 2;
    grid-column-end: 4;
}
.lp020 .wrap-1 .grid-3 {
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: NaN;
    grid-column-end: 7;
}
.lp020 .wrap-2 .grid-3 {
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: NaN;
    grid-column-end: 6;
}
/* grid-row */
.lp021 .wrap-3,
.lp021 .wrap-4 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50px;
    grid-template-columns: 50px;
    grid-template-rows: repeat(6, 50px);
    border: 1px dashed white;
    width: 52px;
}
.lp021 .wrap-3 .grid-1,
.lp021 .wrap-4 .grid-1 {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
}
.lp021 .wrap-3 .grid-2,
.lp021 .wrap-4 .grid-2 {
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4;
}
.lp021 .wrap-3 .grid-3 {
    -ms-grid-row: span 2;
    grid-row-start: span 2;
    -ms-grid-row-span: NaN;
    grid-row-end: 7;
}
.lp021 .wrap-4 .grid-3 {
    -ms-grid-row: span 2;
    grid-row-start: span 2;
    -ms-grid-row-span: NaN;
    grid-row-end: 6;
}
@media only screen and (max-width: 1023px) {
    .lp020 .wrap-1,
    .lp020 .wrap-2 {
        margin-bottom: 70px;
    }
}
@media only screen and (min-width: 1024px) { 
    .lp020 .wrap-1 {
        margin-bottom: 120px;
    }
}
@media only screen and (max-width: 479px) {
   .lp021 .col {
        margin-bottom: 70px;
    }
    .lp021 .wrap-3,
    .lp021 .wrap-4 {
        margin-bottom: 20px;    
    }  
    .lp021 .wrap-4 {
        margin-top: 70px;
    }
}
@media only screen and (min-width: 480px) {
    .lp021 .col {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 100px auto;
        grid-template-columns: 100px auto;
        -ms-grid-rows: 1fr 60px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-row-gap: 60px;
    }
}
/*******************************************************************************/
/**************************** 27. strona grid minmax ***************************/
/*******************************************************************************/
.lp022 .grid,
.lp023 .grid {
    color: black;
    text-transform: uppercase;
    display: -ms-grid;
    display: grid;
    place-content: center;
}
.lp022 .grid-1,
.lp023 .grid-1 {
    background: #289dcc;
}
.lp022 .grid-2,
.lp023 .grid-2 {
    background: #6BC1E2;
}
.lp022 .grid-3,
.lp023 .grid-3 {
    background: #078FC2;
}
/* przykład 1 */
.lp022 .wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(100px, 500px) 1fr 1fr;
        grid-template-columns: minmax(100px, 500px) 1fr 1fr;
    -ms-grid-rows: 70px;
        grid-template-rows: 70px;
    grid-gap: 5px;
}
/* przykład 2 */
.lp023 .wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
        grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
    -ms-grid-rows: 70px;
        grid-template-rows: 70px;
    grid-gap: 5px;
}
/*******************************************************************************/
/******************** 28. strona wyrównywanie ścieżek siatki *******************/
/*******************************************************************************/
/* info */
.lp024 table,
.lp024 td {
    border: none !important;
    text-align: left;
}
.lp024 td:first-child {
    width: 200px;
    font-weight: bold;
}
.lp024 td {
    padding: 4px 0;
}
.lp024 p {
    margin-bottom: 15px;
}
/* koniec info */
.lp026 .wp-block-columns.columns-3 .wp-block-column,
.lp027 .wp-block-columns.columns-3 .wp-block-column {
    margin-bottom: 0;
    padding-bottom: 70px;
}
.lp026 .wp-block-preformatted.mini,
.lp027 .wp-block-preformatted.mini {
    font-size: 14px !important;
    line-height: 150%;
    margin: 0 auto 15px auto !important;
    width: 360px; 
    height: 140px;
}
.lp026 .wrap,
.lp027 .wrap {
    border: 1px dashed white;
    width: 360px;
    height: 360px;
    margin: 0 auto !important;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, 40px);
    grid-template-rows: repeat(4, 40px);
    grid-gap: 5px;
}
.lp026 .grid,
.lp027 .grid {
    background: #289dcc;
    color: black;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
/* align-content */
.lp026 .wrap-1 {
    -ms-flex-line-pack: start;
    align-content: start;
}
.lp026 .wrap-2 {
    -ms-flex-line-pack: end;
    align-content: end;
}
.lp026 .wrap-3 {
    -ms-flex-line-pack: center;
    align-content: center;
}
.lp026 .wrap-4 {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}
.lp026 .wrap-5 {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.lp026 .wrap-6 {
    -ms-flex-line-pack: space-evenly;
    align-content: space-evenly;
}
/* justify-content */
.lp027 .wrap-7 {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}
.lp027 .wrap-8 {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}
.lp027 .wrap-9 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.lp027 .wrap-10 {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.lp027 .wrap-11 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.lp027 .wrap-12 {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}
/*******************************************************************************/
/******************* 29. strona wyrównywanie elementów siatki ******************/
/*******************************************************************************/
/* info */
.lp028 table,
.lp028 td {
    border: none !important;
    text-align: left;
}
.lp028 td:first-child {
    width: 200px;
    font-weight: bold;
}
.lp028 td {
    padding: 4px 0;
}
.lp028 p {
    margin-bottom: 15px;
}
/* koniec info */
.lp030 .wp-block-columns.columns-3 .wp-block-column,
.lp031 .wp-block-columns.columns-3 .wp-block-column {
    margin-bottom: 0;
    padding-bottom: 70px;
}
.lp030 .wp-block-preformatted.mini,
.lp031 .wp-block-preformatted.mini {
    font-size: 14px !important;
    line-height: 150%;
    margin: 0 auto 15px auto !important;
    width: 360px; 
    height: 140px;
}
.lp030 .wrap,
.lp031 .wrap {
    border: 1px dashed white;
    width: 360px;
    height: 360px;
    margin: 0 auto !important;
    display: -ms-grid;
    display: grid;
/*    grid-template-columns: 358px;
    grid-template-rows: 358px;*/
}
.lp030 .grid,
.lp031 .grid {
    background: #289dcc;
    color: black;
    padding: 5px;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
/* align-items */
.lp030 .wrap13 {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.lp030 .wrap14 {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}
.lp030 .wrap15 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.lp030 .wrap16 {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.lp030 .wrap17 {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}
.lp030 .wrap18 {
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3px;
}
/* justify-items */
.lp031 .wrap19 {
    justify-items: start;
}
.lp031 .wrap20 {
    justify-items: end;
}
.lp031 .wrap21 {
    justify-items: center;
}
.lp031 .wrap22 {
    justify-items: stretch;
}
/*******************************************************************************/
/*************************** 30. strona grid jednostki *************************/
/*******************************************************************************/

.lp045 table {
    border: none;
    margin: 20px 0 0 0;
}
.lp045 table td {
    text-align: left;
    background: #1D1D1F;
    border-bottom: 6px solid #27272A;
    border-top: none;
    padding: 8px 20px;
}
.lp045 .has-pale-pink-color {
    font-size: 20px;
    font-weight: bold;
}

.lp045 table td:first-child {
    border-right: 6px solid #27272A;
    border-left: none;
}
.lp045 table td:last-child {
    border-left: 6px solid #27272A;
    border-right: none;
}

.lp032 .grid {
    color: black;
    padding: 20px 0;
    display: -ms-grid;
    display: grid;
    place-content: center;
}
.lp032 .grid-1 {
    background: #289dcc;
}
.lp032 .grid-2 {
    background: #6BC1E2;
}
.lp032 .grid-3 {
    background: #4BB0D6;
}
.lp032 .grid-4 {
    background: #078FC2;
}
.lp032 .wrap-px {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 90px 90px 90px 90px;
    grid-template-columns: 90px 90px 90px 90px;
}
.lp032 .wrap-percent {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
}
.lp032 .wrap-fr {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.lp032 .wrap-auto {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto auto auto;
    grid-template-columns: auto auto auto auto;
}
.lp032 .wrap-auto-fr {
    border: 1px dashed white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr 1fr 1fr;
    grid-template-columns: auto 1fr 1fr 1fr;
}
/*******************************************************************************/
/**************************** 31. strona grid gotowce **************************/
/*******************************************************************************/
/* CodePen – CSS Grid Evenly Distributed, As Many As Needed */
.grid10-blok .grid-6 {
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 16px;
}
.grid10-blok .grid-6 .module {
    background: #289dcc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/* CodePen - Responsive grid layout */
.grid11-blok ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.grid11-blok .auto-grid {
    --auto-grid-min-size: 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
    grid-gap: 1rem;   
}
.grid11-blok .auto-grid li {
    padding: 5rem 1rem;
    text-align: center;
    font-size: 1.2rem;
    background: #289dcc;
}
/*******************************************************************************/
/***************************** 32. strona border *******************************/
/*******************************************************************************/
/* przyklad 1 */
.border1 p {
    border-color: white;
    border-width: 6px;
    padding: 20px !important;
    margin-bottom: 25px;
    text-align: center;
}
.border1 p.dotted {
    border-style: dotted;
}
.border1 p.dashed {
    border-style: dashed;
}
.border1 p.solid {
    border-style: solid;
}
.border1 p.double {
    border-style: double;
}
.border1 p.groove {
    border-style: groove;
}
.border1 p.ridge {
    border-style: ridge;
}
.border1 p.inset {
    border-style: inset;
}
.border1 p.outset {
    border-style: outset;
}
.border1 p.none {
    border-style: none;
}
.border1 p.hidden {
    border-style: hidden;
}
.border1 p.mix {
    border-style: dotted dashed solid double;
}
/* przyklad 2 */
.border2 .border {
    border: none;
    margin: 0 auto 30px auto;
    text-align: center;
    color: black;
    text-align: center;
    display: -ms-grid;
    display: grid;
    place-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.border2 .border-1,
.border2 .border-2,
.border2 .border-3,
.border2 .border-4,
.border2 .border-5,
.border2 .border-7,
.border2 .border-8 {
    width: 90%;
    padding: 20px;
}
.border2 .border-1,
.border2 .border-2,
.border2 .border-3,
.border2 .border-4,
.border2 .border-5,
.border2 .border-6 {
    background: #289dcc;
}
.border2 .border-1 {
    border-radius: 20px;
}
.border2 .border-2 {
    border-radius: 20%;
}
.border2 .border-3 {
    border-radius: 5px 10px 15px 20px;
}
.border2 .border-4 {
    border-radius: 0 20px 0 0;
}
.border2 .border-5 {
    border-radius: 30px / 10px;
}
.border2 .border-6 {
    border-radius: 50%;
    width: 180px;
    height: 180px;
    padding: 20px;
}
.border2 .border-7 {
    border: 20px double #289dcc;
    border-radius: 10px;
    color: #e1e1e1;
}
.border2 .border-8 {
    border: 20px double;
    border-color: OrangeRed LimeGreen BlueViolet Gold;
    border-radius: 10px;
    color: #e1e1e1;
}
.border2 .border-9 {
    border: 20px double;
    border-color: OrangeRed LimeGreen BlueViolet Gold;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    padding: 10px;
    color: #e1e1e1;
}
/*******************************************************************************/
/********************************* 33. strona hr *******************************/
/*******************************************************************************/
.tlo-ciemne.hr0 hr {
    border-width: 40px !important;
}
.tlo-ciemne.hr00 hr {
    height: 40px;
}
/* przykłady hr */
.tlo-ciemne.hr1 hr {
    height: 15px;
    border: 1px solid #ffffff;
}
.tlo-ciemne.hr2 hr {
    height: 15px;
    border: 3px solid #289dcc;
}
.tlo-ciemne.hr3 hr {
    height: 15px;
    background: #289dcc;
    border: none;
}
.tlo-ciemne.hr4 hr {
    height: 15px;
    background: #289dcc;
    border: 3px solid #ffffff;
}
.tlo-ciemne.hr5 hr {
    height: 35px;
    background: url(images/bg.jpg) repeat-x;
    border: 3px solid #ffffff;
}
/* przykłady hr class */
hr.style1 {
    border-top: 10px solid #8c8b8b;
    border-bottom: none;
}
hr.style2 {
    border-top: 10px dashed #8c8b8b;
    border-bottom: none;
}
hr.style3 {
    border-top: 10px dotted #8c8b8b;
    border-bottom: none;
}
hr.style4 {
    border-top: 10px double #8c8b8b;
    border-bottom: none;
}
hr.style5 {
    border-top: 10px solid #8c8b8b;
    border-bottom: 10px solid #ffffff;
}
hr.style6 {
    border-top: 10px dashed #8c8b8b;
    border-bottom: 10px dashed #ffffff;
}
hr.style7 {
    border-top: 10px dotted #8c8b8b;
    border-bottom: 10px dotted #ffffff;
    /*	background: none;*/
}
hr.style8 {
    border-top: 10px double #8c8b8b;
    border-bottom: 10px double #ffffff;
}
/* ciekawe przykłady */
.tlo-ciemne.hr6 hr {
    background: none;
    border: none;
    border-top: 10px double #ffffff;
    overflow: visible;
    text-align: center;
}
.tlo-ciemne.hr6 hr:after {
    background: #27272a;
    content: '§';
    padding: 0 10px;
    position: relative;
    top: -30px;
    font-size: 60px;
    line-height: 100%;
}
/*******************************************************************************/
/**************************** 34. strona shortcodes ****************************/
/*******************************************************************************/
.h3-podkreslone {
    border-bottom: 3px solid #289dcc;
    margin-bottom: 20px;
}
.filterDiv {
    width: 100%;
    display: none;
}
.filterDiv.show {
    display: block;
}
/* Style the buttons */
#myBtnContainer .btn {
    background: #f1f1f1;
    border: none;
    outline: none;
    padding: 12px 16px;
    cursor: pointer;
    color: #121212;
    margin-bottom: 5px;
}
#myBtnContainer .btn:hover {
    background: #ddd;
}
#myBtnContainer .btn.active {
    background: #666;
    color: white;
}
/*******************************************************************************/
/****************************** 35. strona kolory **********^^******************/
/*******************************************************************************/
article#post-2194 td {
    border: none !important;
}
/*******************************************************************************/
/************************** 36. komentarze pod wpisami *************************/
/*******************************************************************************/
#comments {
    border-top: 4px solid #289dcc !important;
    padding-bottom: 50px;
}
/*******************************************************************************/
/************************** 37. #cm-footer.cm-footer ***************************/
/*******************************************************************************/
footer#cm-footer {
    border-top: 4px solid #289dcc;
}
footer#cm-footer ul {
    margin: 0 !important;
}
footer#cm-footer ul li {
    background: url(images/kropka-ikona.png) 0 14px no-repeat;
    padding: 8px 0px 8px 24px;
}
.cm-lower-footer-cols {
    gap: 0 !important;
}
footer#cm-footer aside {
    margin-bottom: 60px !important;
}
footer#cm-footer aside:first-child {
    margin-bottom: 20px;
}
footer#cm-footer .footer-widgets-area {
    width: 100%;
}
@media only screen and (min-width: 992px) {
    footer#cm-footer .cm-lower-footer-cols {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 30% 30% 30%;
        grid-template-columns: 30% 30% 30%;
        grid-gap: 5%;
    }
}
.cm-lower-footer-col--4 {
    display: none;
}
/* footer menu */
footer#cm-footer ul {
    margin-left: 20px;
}
footer#cm-footer a:hover {
    text-decoration: none;
}
/*******************************************************************************/
/******************************* 38. cm-footer-bar *****************************/
/*******************************************************************************/
#stopka-copy {
    border-top: 4px solid #289dcc;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
#stopka-copy a:hover {
    color: white !important;
}
.cm-footer-bar {
    display: none;
}
/*******************************************************************************/
/******************************** 39. accordion ********************************/
/*******************************************************************************/
.lightweight-accordion .lightweight-accordion-title {
    background: none !important;
    color: white;
}
.lightweight-accordion.titleBg .lightweight-accordion-title {
    background: #121212 !important;
} 
.lightweight-accordion-title,
.c-accordion__title {
    font-size: 17px;
    color: #ffffff;
    line-height: 110%;
    display: inline;
    padding-right: 30px;
}
.c-accordion__title:hover {
    text-decoration: underline;
}
.c-accordion__title:after {
    font-size: 30px;
    color: #ffffff;
}
.accordion-title-center .lightweight-accordion-title {   
    text-align: center;
}
.accordion-title-center .c-accordion__title {
    margin-left: 47%;
}
.c-accordion__content {
    background: #27272a;
    border: 1px solid black;
    padding: 20px;
}
/*** str translate, scale, rotate, skew, matrix ***/
@media only screen and (max-width: 1023px) {
    .matrix-blok .c-accordion__item {
        margin-top: 40px;
    }
}
@media only screen and (min-width: 1024px) {
    .matrix-blok .c-accordion__item {
        margin-top: 20px;
    }
}
.matrix-blok .c-accordion__content {
    border: none;
    -webkit-box-shadow: 5px 5px 10px #000;
    box-shadow: 5px 5px 10px #000;
}
/*** str hover i grid ***/
.hover1-blok .c-accordion__title,
.hover2-blok .c-accordion__title,
.hover3-blok .c-accordion__title,
.hover4-blok .c-accordion__title,
.grid7-blok .c-accordion__title,
.grid8-blok .c-accordion__title,
.grid9-blok .c-accordion__title {
    padding-top: 5px;
    padding-bottom: 7px;
    margin-top: 20px;
    text-align: center;
}
.hover1-blok .lightweight-accordion-title,
.hover2-blok .lightweight-accordion-title,
.hover3-blok .lightweight-accordion-title,
.hover4-blok .lightweight-accordion-title,
.grid7-blok .lightweight-accordion-title,
.grid8-blok .lightweight-accordion-title,
.grid9-blok .lightweight-accordion-title {
}
.hover1-blok .c-accordion__title,
.hover2-blok .c-accordion__title,
.hover3-blok .c-accordion__title,
.hover4-blok .c-accordion__title,
.grid7-blok .c-accordion__title,
.grid8-blok .c-accordion__title,
.grid9-blok .c-accordion__title {
    background: #121212;
    display: block;
}
.hover1-blok .c-accordion__title:after,
.hover2-blok .c-accordion__title:after,
.hover3-blok .c-accordion__title:after,
.hover4-blok .c-accordion__title:after,
.grid7-blok .c-accordion__title:after,
.grid8-blok .c-accordion__title:after,
.grid9-blok .c-accordion__title:after {
    right: 10%;
}
.grid7-blok-accordion h2.c-accordion__title {
    margin-left: 43%
}
/* znaczniki wpisy */
#cm-content.cm-content {}
.cm-container {}
.cm-row {}
#cm-primary.cm-primary {}
.cm-posts.clearfix {}
article.post {}
.cm-post-content {}
.cm-entry-header-meta {}
/* kategorie */
.cm-post-categories {}
header.cm-entry-header {}
h1.cm-entry-title {}
.cm-below-entry-meta {}
/* autor, data */
span.cm-author.cm-vcard {}
span.cm-post-date {}
.cm-entry-summary {}
ul.default-wp-page {}
ul.default-wp-page li.previous {}
ul.default-wp-page li.next {}