@import url(https://fonts.googleapis.com/css?family=Milonga|Open+Sans|Krona+One|Ubuntu+Condensed&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Exo+2:ital,wght@0,700;1,800&display=swap);
@import url(https://fonts.googleapis.com/css?family=Baloo+Bhaijaan+2:wght@400..800&display=swap);

body {
    background: #f5f5f5;
    color: #797979
}

div {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
  text-wrap: balance;
  box-sizing: border-box;
}

h1 + h5 {
    margin: .2rem auto 1rem;
}
h1:has(+ h5) {
    margin-bottom: .2rem;
}

h2 {
    span {
        margin: .4rem auto;
    }
}


*:has(> [data-statusstep]) {
    display: inline-block;
    border: 1px solid #4444;
    box-sizing: content-box;
    font-size: 1.2rem;
    padding: 0 0 0 .5rem;
        color: white;

    [data-statusstep] {
        padding: .2rem .5rem;
        background: #333;
        color: white;
        max-height: 100%;
    }
}



.container {
    max-width: 80%!important;
    background: white!important;
}

.container.center .cn_title {
    text-align: center;
    img {
            max-width: 30%;
    }
}



figcaption {
    text-wrap: balance;
}

.cn_leadin {
    h3, h4 {
        font-size: 2.5rem;
        text-align: center!important;
        text-wrap: balance;
    }
    width: 70%;
    margin: 1rem auto;
    background: #fafafa;
    color: #444;
    padding: 2rem;
    p {
        text-align: justify;
        font-size: 2rem;
    }
}
section {
    .container {

        margin: 1rem auto;
        padding: 2rem;
        background: white!important;
        h1 {
            width: 80%!important;
            text-wrap: balance;
        }
        p {
            margin: 2rem;
            font-size: 1.8rem;
        }
    }
}



.nav {
    margin-top: 5rem
}


.nav.horizontal-align {
    margin-top: 2rem;
}

.nav-item a {
    color: #797979;
    text-decoration: none
}

[rel="navportal"] {
    width: 100%;
    background: #333;
    margin-top: 0!important;
    color: dodgerblue;
    text-align: center;
    strong {
        font-weight: 800;
        color: white;
    }
    a {
        font-weight: 300;
        color: #bbb!important;
        font-family: "Baloo Bhaijaan 2", sans-serif;
        text-decoration: none;
    }
    a:hover {
        color: white!important;
    }
    .active {
        color: white!important;
        font-weight: 600;
    }
    .active:hover {
       text-shadow: 0 1px 1px rgba(250, 250, 250, .82), 0 2px 2px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, .12), 0 8px 8px rgba(0, 0, 0, .12), 0 16px 16px rgba(0, 0, 0, .12)

    }
}

svg.w-5.h-5 {
    width: 1rem;
    height: 1rem
}

ul {
    li {
        text-indent: -2rem;
        margin-left: 2rem;
    }
}

.nav-item a:hover {
    cursor: pointer;
    color: #4d4a4a;
    border: none
}

.hero {
    color: #363636;
    height: 80vh
}

.hero div {
    margin-bottom: 5rem
}

.hero h3 {
    font-family: Edelsans, sans-serif;
    font-size: 3rem;
    margin-bottom: 0
}

.hero h5 {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 200
}

.grid-demo-col {
    background: #e4e4e4
}

.header {
    font-weight: 200
}

.content {
    font-size: 1.8rem
}

.card {
    background: #FAFAFA
}

.string {
    color: #02C1A7
}

.special {
    color: #AC2EC5
}

.global {
    color: #db9114
}

.method {
    color: #00A2CD
}

.comment {
    color: #989898
}

.mb_thumb {
    width: 24rem;
    max-width: 32rem !important;
    text-align: center
}

.mb_thumb a:not('.button') {
    color: #6a6 !important;
    text-align: center
}

.mb_thumb cite {
    font-family: "Krona One";
    text-align: center;
    display: block;
    width: 100%
}

.mb_thumb cite a {
    color: #6a6 !important
}

.mb_thumb p {
    font-family: "Exo 2";
    color: #666
}

.mb_thumb p em {
    font-family: "Exo 2" !important;
    color: #222 !important;
    font-weight: 700
}

.mb_thumb p cite {
    display: inline
}

.mb_thumb img {
    width: 70%;
    max-width: 70%;
    margin: .2rem auto;
    display: block;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, .12), 0 8px 8px rgba(0, 0, 0, .12), 0 16px 16px rgba(0, 0, 0, .12)
}

.mb_thumb>a {
    color: #6a6 !important
}

.mb_thumb .un_flex_even a.button {
    width: 80%;
    font-size: 80%
}

.mb_thumb_2 {
    width: 24rem;
    margin: .5rem;
    max-width: 32rem !important;
    text-align: center;
    border: 2px solid #888;
    a:not('.button') {
        /*color: #6a6 !important;*/
        color: dodgerblue !important;
        text-align: center
    }
    > a {
        color: #6a6 !important
    }

    .button {
        width: 80%;
        font-size: 1rem;
        border: 0
    }    
    cite {
        font-family: "Baloo Bhaijaan 2";
        font-weight: 600;
        font-style: italic;
        /*font-family: "Ubuntu Condensed";*/
        text-align: center;
        display: block;
        color: dodgerblue;
        width: 100%
            a {
            color: dodgerblue !important;
            /*color: #6a6 !important;*/
        }
    }
    p {
        font-family: "Exo 2";
        color: #666;
        font-size: .9rem;
        text-align: justify;
        font-size: 1.4rem;
        line-height: 120%;
        break-word: all: ;
        em {
            font-family: "Exo 2" !important;
            color: #222 !important;
            font-weight: 700
        }
        cite {
            display: inline
        }    
    }
    img {
        width: 70%;
        max-width: 100%;
        margin: .2rem auto;
        display: block;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, .12), 0 8px 8px rgba(0, 0, 0, .12), 0 16px 16px rgba(0, 0, 0, .12)
    }
}






[rel=pagination] ul.pagination {
    text-align: center;
    justify-content: center
}

.mb_ad_plate {
    margin: 1rem auto;
    width: 62rem;
    border: 2px solid dodgerblue;
    border-radius: 5px;
    background: #eee;
    color: #555;
}

     p {
        margin: .1rem auto !important;
        >div:last-of-type {
        padding: .3rem;
    }

     img {
        width: 12rem;
    }
}


.mb_ad_plate cite,
.mb_ad_plate h3 {
    font-family: "Baloo Bhaijaan 2";
    font-weight: 700;
    font-size: 2rem;
    color: #444;
    margin: .1rem auto
}

.mb_ad_plate a i {
    margin-left: -2.8rem !important
}

footer {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 2rem;
    margin: 0 !important;
    background: #333;
    /*background: #2d694bff;*/
    color: #fefefe;
    >h2 {
        color: #fefefe;
    }
    h4 {
        font-size: 2rem;
        font-family: "Baloo Bhaijaan 2";
        font-weight: 700;
        margin-bottom: 2rem!important;
    }    
    >div {
        /*background: #2d694bff;*/
        background: #444;
        max-width: 90%;
        width: 90%
    }
    .un_flex > div {
        background: #444;
        text-align: left;
    }  
    >p {
        font-size: 2rem;
        text-align: center;
        margin: .2rem auto;
        width: 90%;
    }      
    #copyright {
        background: #444;
        max-width: 90%;
        text-align: center;
        font-family: "Baloo Bhaijaan 2";
    }    
    a {
        display: block;
        text-decoration: none;
        /*color: #555;*/
    }
}


footer


#footer-link {
    font-size: 16px;
    color: #111;
    text-decoration: none
}

#footer-logo,
#footer-made,
#footer-name {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle
}

#footer-name {
    font-weight: 700
}

#footer-logo {
    height: 25px;
    width: 25px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 3px
}

.pagination {
    display: flex;
    flex-direction: row
}

.pagination>* {
    display: inline-block;
    margin: .5rem;
    padding: .3rem .6rem;
    border: 2px solid rgba(153, 153, 153, .51);
    border-radius: 3px
}
.btn-group, .btn_checkboxes {
    box-shadow: 2px 2px 3px 1px rgba(18, 11, 11, .3);
    /*background: red;*/
    > *  {
        align-content: center;
    }
    label {
        margin: .2rem 1rem;
        padding: .3rem .6rem;
        background: #aaa;
        color: #ddd
    }

    input {
        display: none
    }
    input + label, label:has(input) {
        font-size: 1.2rem;
        max-height: 2rem;
        margin: .4rem;
        display: block;
    }

    input:checked + label, label:has(input:checked) {
        background: dodgerblue!important;
        /*background: #6a6;*/
        color: #fff;
    }
}


[rel=mybooks] {
    width: 100%;
    display: flex;
    background: #ddd
}

.gv_book,
[rel=mybooks]>* {
    display: inline-block;
    background: rgba(153, 153, 153, .4);
    margin: 1rem;
    border-radius: 5px;
    width: 26rem;
    max-width: 36rem;
    flex: 1 1 32rem
}

.gv_book img,
[rel=mybooks]>* img {
    width: 5rem;
    height: 10rem
}

.gv_book>div,
[rel=mybooks]>*>div {
    padding: .5rem
}

.gv_book p,
[rel=mybooks]>* p {
    margin: .3rem 1rem
}

.gv_book p em,
[rel=mybooks]>* p em {
    color: #444;
    font-family: Montserrat
}

.gv_book quote,
.gv_book quote attribution,
.gv_book quote circumstances,
[rel=mybooks]>* quote,
[rel=mybooks]>* quote attribution,
[rel=mybooks]>* quote circumstances {
    font-size: .9rem;
    padding: 1.3rem 2rem .5rem
}

.gv_book quote attribution,
.gv_book quote circumstances,
[rel=mybooks]>* quote attribution,
[rel=mybooks]>* quote circumstances {
    padding: .5rem
}

.gv_book div>cite,
[rel=mybooks]>* div>cite {
    font: italic normal 800 1.6rem/120% Montserrat, sans-serif;
    color: rgba(0, 84, 204, .8)
}

.gv_book quote:before,
[rel=mybooks]>* quote:before {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 2px;
    font-size: .7rem;
    padding: .15rem;
    color: #888;
    content: "Motto książki:"
}

.gv_book a,
[rel=mybooks]>* a {
    margin: .1rem;
    display: inline-block;
    text-decoration: none
}

.gv_book span[rel=year],
[rel=mybooks]>* span[rel=year] {
    width: 100%;
    display: block;
    padding: .3rem;
    font: italic normal 400 1rem Montserrat, sans-serif;
    color: #888
}

.gv_unpublished cite {
    font-size: 1.4rem;
    color: #0d3333
}

.cn_minigallery>* {
    text-align: center;
    margin: 1rem
}

.cn_minigallery img {
    width: 70%;
    max-width: 100%;
    margin: .4rem
}

.d-block {
    display: block
}

.csch_subtle_3 {
    background: rgba(147, 128, 108, .1)
}

.un_wide8 {
    width: 8rem !important;
    max-width: 8rem !important;
    min-width: 8rem !important
}

.un_wide12 {
    width: 12rem !important;
    max-width: 12rem !important;
    min-width: 12rem !important
}

.un_wide16 {
    width: 16rem !important;
    max-width: 16rem !important;
    min-width: 16rem !important
}

.un_wide18 {
    width: 18rem !important;
    max-width: 18rem !important;
    min-width: 18rem !important
}

.un_wide20 {
    width: 20rem !important;
    max-width: 20rem !important;
    min-width: 20rem !important
}

.un_wide24 {
    width: 24rem !important;
    max-width: 24rem !important;
    min-width: 24rem !important
}

.un_wide16>img,
.un_wide24>img {
    width: 24rem !important;
    max-width: 24rem !important
}

.un_wide16>a,
.un_wide16>button {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: .3rem auto
}

.un_widefull {
    width: 100%;
    max-width: 100%
}

.un_widehalf>div {
    min-width: 45%;
    max-width: 50% margin:0;
    padding: 1rem
}

.un_feedback,
.un_meta {
    padding: .3rem;
    margin: 3rem auto;
    display: block;
    width: 50%;
    min-width: 30rem;
    border: 2px dashed #36f;
    border-left: 6px solid #36f;
    color: #fff !important;
    background: #444
}

.un_feedback em,
.un_feedback span,
.un_meta em,
.un_meta span {
    font: italic 700 1.3rem 'Open Sans' !important
}

.un_feedback:before,
.un_meta:before {
    display: inline-block;
    content: "Komunikat: "
}

.un_feedback.needrefine {
    border: 2px dashed #ff0;
    border-left: 6px solid #ff0
}

.un_feedback.admin,
.un_meta {
    color: #f90;
    border: 2px dashed #f90;
    border-left: 6px solid #f90
}

.un_feedback.error {
    border: 2px dashed #f30;
    border-left: 6px solid #ff3700
}

.un_feedback.welldone {
    border: 2px dashed #00b400;
    border-left: 6px solid #00b400
}

.un_feedback:before {
    display: inline-block;
    background: #777;
    padding: .1rem .3rem;
    font-family: "Ubuntu Condensed";
    content: "Feedback: "
}

.un_feedback.admin:before {
    color: #f90;
    border: 2px dashed;
    content: "Okienko Admina: "
}

.corner {
    display: block;
    position: absolute;
    top: .3rem;
    left: .3rem;
    background: #777;
    color: #fff;
    padding: .1rem .3rem;
    font-family: "Ubuntu Condensed";
    content: "Treść twojej wiadomości: "
}

.un_plate {
    position: relative;
    z-index: 6;
    width: 80%;
    min-height: 240px;
    padding: 3rem 1rem 0;
    font-size: 1rem
}

.un_plate .un_title {
    display: block;
    font: 400 2.8rem Dosis, sans-serif;
    margin: .3rem auto;
    text-align: center;
    text-decoration: none;
    color: rgba(235, 103, 91, .94)
}

.un_plate .un_title:hover {
    color: rgba(243, 49, 49, .89)
}

.un_plate img {
    width: 8rem;
    float: left;
    margin: 1rem
}

.un_flex {
    display: flex !important;
    flex-wrap: nowrap
}

.un_flex_vt {
    flex-direction: column;
    justify-content: flex-start;
    align-self: start
}

.un_flex_vc {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.un_flex_vs {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch
}

.un_flex_hc {
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center
}

.un_flex_ht {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start
}

.un_flex_hs {
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    align-content: flex-start
}

.un_flex_even>* {
    width: 0;
    flex: 1 1 auto
}

.un_flex_even {
    justify-content: spaced-between;
    width: 100%
}

.un_flex_wrap {
    flex-wrap: wrap
}

.un_flex_sc {
    align-self: center
}

.un_flex>div {
    flex: 1 1 auto;
    max-width: 90%
}

.un_flex>img {
    flex: 1 1 16rem
}

.un_flex>h2,
.un_flex>h3 {
    width: 100%;
    text-align: center;
    padding: 1rem
}

.un_flex_c20>* {
    flex: 1 1 20rem !important
}

.un_flex>.un_presenter_2 {
    flex: 1 2 42rem
}

.un_flex>.un_presenter_3 {
    flex: 1 1 20rem
}

.un_flex>i {
    flex: 1 1 16rem;
    font-size: 3rem;
    align-self: center;
    color: #fff;
    text-align: center;
    text-indent: 0;
    text-shadow: 4px 5px 5px rgba(111, 103, 103, .56)
}

.flex_cent {
    display: flex;
    position: relative;
    margin: 0 auto !important;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.flex_cent>* {
    display: block;
    width: 70vw;
    font-weight: 700
}

.m0 {
    margin: 0
}

.mt0 {
    margin-top: 0
}

.mr0 {
    margin-right: 0
}

.mb0 {
    margin-bottom: 0
}

.ml0,
.mx0 {
    margin-left: 0
}

.mx0 {
    margin-right: 0
}

.my0 {
    margin-top: 0;
    margin-bottom: 0
}

.m1 {
    margin: .5rem
}

.mt1 {
    margin-top: .5rem
}

.mr1 {
    margin-right: .5rem
}

.mb1 {
    margin-bottom: .5rem
}

.ml1,
.mx1 {
    margin-left: .5rem
}

.mx1 {
    margin-right: .5rem
}

.my1 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.m2 {
    margin: 1rem
}

.mt2 {
    margin-top: 1rem
}

.mr2 {
    margin-right: 1rem
}

.mb2 {
    margin-bottom: 1rem
}

.ml2,
.mx2 {
    margin-left: 1rem
}

.mx2 {
    margin-right: 1rem
}

.my2 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.m3 {
    margin: 2rem
}

.mt3 {
    margin-top: 2rem
}

.mr3 {
    margin-right: 2rem
}

.mb3 {
    margin-bottom: 2rem
}

.ml3,
.mx3 {
    margin-left: 2rem
}

.mx3 {
    margin-right: 2rem
}

.my3 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.m4 {
    margin: 4rem
}

.mt4 {
    margin-top: 4rem
}

.mr4 {
    margin-right: 4rem
}

.mb4 {
    margin-bottom: 4rem
}

.ml4,
.mx4 {
    margin-left: 4rem
}

.mx4 {
    margin-right: 4rem
}

.my4 {
    margin-top: 4rem;
    margin-bottom: 4rem
}

.mxn1 {
    margin-left: -.5rem;
    margin-right: -.5rem
}

.mxn2 {
    margin-left: -1rem;
    margin-right: -1rem
}

.mxn3 {
    margin-left: -2rem;
    margin-right: -2rem
}

.mxn4 {
    margin-left: -4rem;
    margin-right: -4rem
}

.ml-auto {
    margin-left: auto
}

.mr-auto,
.mx-auto {
    margin-right: auto
}

.mx-auto {
    margin-left: auto
}

.p0 {
    padding: 0
}

.pt0 {
    padding-top: 0
}

.pr0 {
    padding-right: 0
}

.pb0 {
    padding-bottom: 0
}

.pl0,
.px0 {
    padding-left: 0
}

.px0 {
    padding-right: 0
}

.py0 {
    padding-top: 0;
    padding-bottom: 0
}

.p1 {
    padding: .5rem
}

.pt1 {
    padding-top: .5rem
}

.pr1 {
    padding-right: .5rem
}

.pb1 {
    padding-bottom: .5rem
}

.pl1 {
    padding-left: .5rem
}

.py1 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.px1 {
    padding-left: .5rem;
    padding-right: .5rem
}

.p2 {
    padding: 1rem
}

.pt2 {
    padding-top: 1rem
}

.pr2 {
    padding-right: 1rem
}

.pb2 {
    padding-bottom: 1rem
}

.pl2 {
    padding-left: 1rem
}

.py2 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.px2 {
    padding-left: 1rem;
    padding-right: 1rem
}

.p3 {
    padding: 2rem
}

.pt3 {
    padding-top: 2rem
}

.pr3 {
    padding-right: 2rem
}

.pb3 {
    padding-bottom: 2rem
}

.pl3 {
    padding-left: 2rem
}

.py3 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.px3 {
    padding-left: 2rem;
    padding-right: 2rem
}

.p4 {
    padding: 4rem
}

.pt4 {
    padding-top: 4rem
}

.pr4 {
    padding-right: 4rem
}

.pb4 {
    padding-bottom: 4rem
}

.pl4 {
    padding-left: 4rem
}

.py4 {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.px4 {
    padding-left: 4rem;
    padding-right: 4rem
}

.centered {
    text-align: center
}

h1,
h2 {
    /*color: #6a6;*/
    color: dodgerblue;
    font: normal normal 700 4rem/140% "Baloo Bhaijaan 2", cursive, serif;
    letter-spacing: .3px;
    text-align: center
}

h2 {
    font-size: 3rem
}

h3 {
    /*color: #6a6;*/
    color: dodgerblue;
    font: normal normal 400 2rem/120% "Exo 2", cursive, serif
}

[rel=navigate]+h3 {
    margin: 1rem auto;
    font-size: 3rem !important
}

h1 {
    margin: 0 auto;
}

h4 {
    /*color: #6a6;*/
    color: dodgerblue;
    font: normal normal 400 2rem/120% "Exo 2", cursive, serif
}

h4 a {
    /*color: #6a6; */
    color: dodgerblue;
}

h5 {
    font: normal normal 400 1.4rem/120% "Ubuntu Condensed", cursive, serif;
    color: rgba(102, 102, 102, .8);
    font-size: 80%
}

[rel=title] span,
h1 span {
    display: block;
    font-size: 60%
}

.cn_nav {
    color: #999;
    font: normal normal 400 1.3rem/120% "Ubuntu Condensed", sans-serif
}

.cn_nav {
    a {
        color: #777;
        padding: .2rem .6rem!important;
        text-decoration: none;
        box-sizing: content-box;
        border: 2px solid #4440;
    }
     a:hover {
        border-bottom: 2px solid dodgerblue;
        i {
            color: dodgerblue;
        }
    }
}

h1[rel=title] {
    margin-bottom: .5rem !important;
    text-align: center !important
}

[rel=object] strong {
    color: #444
}

[rel=object] strong.muted {
    color: #777
}

a[href="#top"] {
    display: block;
    margin: 1rem auto;
    text-align: center
}

a[href="#top"] jpg {
    text-align: center;
    margin: .2rem auto
}

nav[rel=metainfo] {
    text-align: center;
    color: #999
}

nav[rel=metainfo] * {
    color: #888
}

nav[rel=metainfo] :hover {
    color: #444
}

nav[rel=metainfo] a+a {
    margin-left: 1rem
}

nav[rel=navigate] {
    font: normal normal 400 1.3rem/120% "Ubuntu Condensed", sans-serif;
    color: #888
}

nav[rel=navigate] a {
    color: #888;
    text-decoration: none
}

nav[rel=navigate] a+a {
    margin-left: 1rem
}

nav[rel=navigate] a+a:nth-of-type(odd) {
    color: #222
}

nav[rel="secondary"] {
    text-align: center;
    > a {
        font-size: 1.4rem;
    }
}

.cn_adaside {
    text-align: center
}

.cn_adaside>div {
    max-width: 100%
}

.cn_nav a,
.nav-item a {
    font: normal normal 400 1.6rem/120% "Baloo Bhaijaan 2", sans-serif;
    span {
        text-transform: capitalize;

    } 
}

.nav-item a.red {
    color: dodgerblue !important;
    /*color: red !important*/
}

.minisection {
    display: block;
    background: #aaa
}

[rel=admin] {
    color: #f88 !important;
}

[rel=admin]:before {
    content: "Adm: "
}


.mb_box_1 {
    padding: 2rem!important;
    h4 {
        letter-spacing: .5px; 
        color: dodgerblue;
        margin: .2rem auto!important;
        font-family: "Baloo Bhaijaan 2";
        font-weight: 700;
        font-size: 2rem!important;
        text-wrap: balance!important;
        cite {
            color: dodgerblue;

        }
    }
    p {
        font-size: 1.6rem!important;
    }
}

article {
    margin-bottom: 15rem!important;
    max-width: 100%!important;
    pre {
        max-width: 100%;
    }
    > .un_flex, > div, .csch_subtle_3 {
        width: 80%;
        margin: 1rem auto 2rem;
    }
    .un_quote.csch_bright2 {
        flex-direction: column!important;
        div {
            width: 100%;
            color: #555;
            text-align: center;
            img {
                width: 100%;
            }
        }
    }
    .mb_box_1 {
        font-size: 2rem;
        width: 80% auto;
        padding: 2rem 4rem;
    }
    h2 {
        background: none!important;
        margin: 5rem auto 2rem!important;
        padding: .5rem!important;
        color: #555!important; 
        letter-spacing: .lni-500px;
        > * {
            color: #777!important;
        }
    }
    h3 {
        font-size: 2rem!important;
        text-align: left;
        color: #444;
        margin: 3rem auto 1rem!important;
        width: 70%;
        font-weight: 700;
        letter-spacing: .5px;
    }    
    h4, h5 {
        font: normal normal 600 1.7rem/120% "Baloo Bhaijaan 2", sans-serif;
        color: #555;
        margin: 2rem auto!important;
        text-align: center;
        width: 70%;
    }
    ul {
        width: 70%;
        margin: 2rem auto;
        li {
            font-size: 1.8rem!important;
            text-wrap: auto!important;
            text-indent: -3.5rem;
            margin-left: 2rem;
        }

    }
    p {
        font: normal normal 400 2rem/140% "Open Sans", sans-serif;
        text-indent: 2rem;

        width: 80%;
        margin: .5rem auto!important;
        img {
            width: 100%;
        }
        a {
            color: dodgerblue;
            /*color: #6a6*/
        }
    }

    p.cf, p:has(img) {
        font-size: 80%;
        border: :2px solid ivory;
        background: #eee;
        padding: 2rem;
        width: 80%;
        text-align: center;
        img {
            display: block;
            width: auto;
            height: 18rem;
            margin: 1rem auto!important;
            max-height: 20rem;
        }
    }   
    p.csch_subtle_3 {
        padding: 2rem;
        margin: 2rem auto 4rem;
    } 
    iframe {
        margin: 1rem auto;
        width: 70%;
        max-width: 70%;
        /*height: auto!important;*/
        display: block;
    } 
    figure {
        background: #eee;
        background-image: none !important;
        width: 60%;
        max-width: 60%;

         .un_fullwide {
            display: block;
            float: none;
            margin: 2rem auto;
            max-height: auto !important;
            height: auto !important;
            width: 100% !important
        }

        .un_flex_hs {
            display: block;
            float: none;
            margin: 2rem auto;
            max-height: auto !important;
            height: auto !important;
            width: 100% !important;
            max-width: 70% !important
        }

        .un_flex_hs figcaption {
            align-self: center;
            text-align: left;
            padding: 1rem
        }


    }       
    figure[data-illu], [data-char], [data-widgt], .box_item, .un_quote {
        border: 2px solid dodgerblue;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        width: 70%;
        margin: 1rem auto;
        background: white;
        color: #fefefe;
        >img {
            max-height: 16rem;
            margin: 1rem;
        }
        figcaption {
            text-wrap: balance;
            align-content: center;
            padding: 1rem;
        }
        p {
            display: inline-block;

        }

    }
    figure[data-illu]:has(img), [data-char]:has(img), [data-widgt]:has(img) {
        color: #555;
    }
    figure[data-illu]:hover, [data-char]:hover, [data-widgt]:hover {
        color: #aaa;
    }
    
    figure[data-illu]:has(img):hover, [data-char]:has(img):hover, [data-widgt]:has(img):hover {
        color: #555;
    }
    figure.widefull {
        flex-direction: column;
        figcaption {
            display: block;
        }
    }
    table {
        width: 70%!important;
        max-width: 70%;
        min-width: 400px;
        margin: 2rem auto 4rem;
        border-collapse: collapse; /* Collapses borders into a single line */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for depth */
        border-radius: 5px; /* Optional: adds rounded corners to the table */
        overflow: hidden;
        th, td {
              padding: .8rem; /* Ample padding for spacing */
              text-align: left; /* Aligns text consistently */
              border-bottom: 1px solid #ddd; /* Subtle horizontal dividers */
        }

        thead tr {
          background-color: #009879; /* Distinct color for the header row */
          color: #ffffff;
          text-align: center;
        }

         tr:nth-of-type(even) {
          background-color: #fefefe; /* Zebra striping for even rows */
        }

         tr:hover {
          background-color: #eaeaea; /* Hover effect for interactivity */
          cursor: pointer;
        }

         tr:last-of-type {
          border-bottom: 2px solid #009879; /* Thicker bottom border for the last row */
        }
        p {
            margin: 0;
            font-size: 1rem!important;
            width: 100%!important;

        }

    }

    .ltable {
        display: table;
        max-width: 80%;
        margin: 2rem auto;
        border: 2px solid #009879;
        figure[data-illu] {
            flex-direction: column!important;
            img {
                max-width: 90%!important;
                height: auto!important;
            }
        }
        > .lhead {
            display: table-row;  
            /*background:  rgba(211, 208, 193, .06); */
            background-color: #009879!important; /* Distinct color for the header row */
            color: ivory;
            text-align: center;
        }


         > div {
          display: table-row;
        }
         > div:hover {
          background: #eaeaea!important;
          border-bottom: 1px solid #009879!important;
        }


         > div:nth-of-type(odd) {
          background: #eee!important;
        }

         > div > div {
          display: table-cell;
        }
    }


    >p:last-of-type:after {
        display: block;
        margin-top: 2rem;
        color: dodgerblue;
        /*color: #6a6;*/
        text-indent: 0;
        font-size: 3rem;
        content: "■"
    }    
    blockquote {
        width: 70%;
        margin: 2rem auto 4rem;
        p {
        display: block;
        margin-bottom: .5rem;
            .source,.attr {
                text-align: right!important;
                style: italic;
            }
        }
        p:first-of-type {
            margin-top: 2rem!important;
        }
        p:last-of-type {
            margin-bottom: 2rem!important;
        }
        a {
            display: inline-block;
        }
    }
    blockquote:before {
        color: #ccc;
        content: open-quote;
        line-height: .1em;
        margin-right: .25em;
        vertical-align: -.4em;

    }
    img {
        max-width: 100%!important;
    }

    ul.list, ol {
        width: 70%;
        margin: 2rem auto;
        li {
            font-size: 100%;
            line-height: 105%;
            p {
                display: inline;
            }
        }
        li:nth-of-type(even) {
            /*background: #eaeaea;*/
        }
    }
    div:has(>.ext_link_2) {
        padding: 2rem;
        line-height: 150%;
        text-align: left;
        font-size: 1.3rem;
        .ext_link_2 {
            padding: .3rem 1rem;
            display: inline-block;
        }
    }
    .mb_ad_plate {
        width: 100%!important;
        margin: 1rem auto;
        padding: 0;
        h3 {
            margin: .4rem auto!important;
        }
        >div {
            margin: 0!important;
            padding: 0!important;
            text-align: center;
            align-content: center;
        }
        >div:has(img) {
            width: 25%;
            max-width: 25%;
            img {
                width: 90%;
                height: auto;
            }
        }
        .button {
            background: #666;
            min-width: 18rem;
            text-align: center;
            text-indent: 0;
        }
    }
    .un_flex figure {
        margin: 1rem;
    }
}



blockquote pre {
    margin-left: 2rem;
    text-indent: -4rem!important;
    white-space: pre-wrap;      /* Standard property */
    overflow-wrap: break-word;  /* Standard property name */
    font-size: 1.4rem;

}



blockquote.elegant1, blockquote.poem{
  font-size: 1.4em;
  width:60%;
  margin:50px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote.elegant1::before, blockquote.poem::before {
  font-family:Arial;
  line-height: inherit!important;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote.elegant1::after, blockquote.poem::after {
  content: '';
}

blockquote.elegant1 span blockquote.poem span {
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}




.summary,
article p:first-of-type {
    font: bold normal 600 1.5rem/120% "Josefin Sans", sans-serif
}

.summary {
    width: 70%;
    font: normal normal 600 1.7rem/120% "Josefin Sans", sans-serif;
    margin: 1rem auto;
    background: white;
    padding: 1rem;
}

[data-widgt="chengyu"] + p, [data-widgt="chengyu"]:has(p) {
    border: 2px solid dodgerblue;
    margin: 4rem auto!important;
    padding: 2rem 3rem;
    width: 70%;
}

[data-widgt="chengyu"] {
        border: 2px solid dodgerblue;
    margin: 4rem auto!important;
    padding: 2rem 3rem;
    width: 70%;
}


article,
article>p {
    font-size: 1.7rem !important;
    text-align: justify !important
}


article {
    background: white;
    padding: 3rem;
    margin: 2rem auto;
    div:has(> a.ext_link_3) {
        background: fefefe!important;
        padding: 2rem;
        margin: 2rem auto;
        a.ext_link_3 {
            display: block;
            text-align: left;
            margin: .5rem auto;
        }        
    }
}



    cite {
        color: #558a9b;
        text-align: justify
    }

    blockquote {
        background: #f9f9f9;
        border-left: 10px solid #ccc;
        margin: 1.5em 10px;
        padding: .5em 10px;
        quotes: "\201C" "\201D" "\2018" "\2019";
        font-size: 1.4rem
    }



.block {
    display: block;
    margin: 2rem auto
}

figure {
    text-align: center
}

figure img {
    margin: 1rem auto
}

.cn_quote {
    padding: 1rem;
    font: normal 300 1.4rem 'Exo 2', sans-serif
}

.cn_quote p {
    font: normal 300 1.4rem 'Exo 2', sans-serif;
    width: 80%;
    margin: .4rem auto !important
}

.cn_quote attribution {
    display: block;
    color: #555;
    font-size: 80%;
    text-align: right;
    margin-right: 1rem
}



.cn_widgetpresenter {
    display: block;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    background: rgba(251, 251, 251, .95);
    margin: 4rem auto;
    box-shadow: 2px 2px 3px 1px rgba(18, 11, 11, .3);

    .cn_title {
        height: 16rem;
        max-height: 16rem;
        width: 100%!important;
        max-width: 100%;
        .un_flex_vc {
            height: 16rem;
        }
        > * {
            max-height: 16rem!important;
            background: none!important;

        }
        a:has(img), > a {
            height: 16rem;
            /*width: 30%;*/
            max-width: 30%;
            align-self: stretch;
            padding: 0!important;
            img {

                max-height: 100%;
            }
        }
        > div {
            align-self: stretch;
            align-content: center;
            h4 {
                text-align: center;
            }

        }
    }
    h3 {
        display: block!important;
        margin: .3rem auto;
        text-align: center;
        letter-spacing: .4px;
        font-size: 2rem;
        line-height: 105%;
        a {
            display: block!important;
        }
    }
    > div:has(img) {
        min-width: 25%;
        max-width: 25%;
        width: 25%!important;
        background: none!important;
        img {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
    }
        img {
        max-height: 100%;
    }
    div:has(>h3) {
        margin: 0;
        align-content: inherit;
    }    
    .sample, p {
        font-size: 1.6rem;
        text-indent: 0!important;
        line-height: 1.3;
        text-align: justify;
        color: #444;
        font-family: "Open Sans"
    }
    em {
        display: inline;
    }
    .sample {
        padding: 2rem;
    }
    .meta {
        color: #eee;
    }
    .meta:hover {
        color: #777;
    }
}
.cn_widgetpresenter + .cn_widgetpresenter {
    margin-top: 1rem!important;
}


.cn_widgetpresenter .cn_title > div {
    max-height: 12rem;
    background-color: #c9c9c9
}

.cn_widgetpresenter > .csch_subtle_3 {
    padding: 2rem
}

.cn_widgetpresenter h3 a {
    color: dodgerblue;
    /*color: #6a6;*/
    font-size: 2rem;
    font-family: "Baloo Bhaijaan 2";
    font-weight: 700
}

.cn_widgetpresenter h3 span {
    display: block;
    font-size: 70%;
    color: #888
}

.cn_widgetpresenter a {
    text-decoration: none
}

.cn_widgetpresenter h4 {
    font-size: 2rem;
    margin: 0;
    color: #676 !important
}




.un_flex_vt:has(>.cn_widgetpresenter) {
    padding: 2rem;
}

.cn_pp_1 {
    width: 100%;
    background: #ccc
}

.cn_ip_1 {
    width: 100%;
    background: #fefefe;
    padding: 1rem;
    margin: 2rem auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     > div:nth-of-type(2) {
        padding: 1rem
    }

     h4 {
        color: #6a6;
        margin: 1rem auto .5rem
    }
    [rel="title"] {
        font-size: 3rem;
        padding: 2rem;
    }
     img {
        width: 12rem;
        max-width: 100%
    }
}


.un_plate {
    display: block;
    margin: 1rem auto;
    background: rgba(204, 204, 204, .9)
}

.un_entry, .cn_pp_1 {
    display: block;
    width: 100%;
    margin: .5rem auto;
    background: rgba(170, 170, 170, .5);
    justify-content: center;
    align-items: stretch;
    h2 {
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 10%;
        margin-top: 0;
        align-content: center;
        a {
            text-decoration: none;
        }
        .text-info, em {
            display: inline-block;
            text-align: left!important;
            /*border: 1px solid red;*/
        }
    }
    a.un_wide12:has(img) {
        margin: .2rem;

    }
    div:has(img) {
        /*background: red;*/
        text-align: center;
        align-content: top;
        align-items: stretch;
        width: 40%;
        max-width: 40%;
        min-width: 40%;
        img {
            margin-top: 4rem;
            width: 100%;
        }
    }
    div:has(description) {
        background: #fefefe;
        h5 {
            font-size: 1.5rem;
        }
    }
    .un_wide32 {
        min-width: 30%!important;
        max-width: 30%!important;
    }
}

h5:has(+ .cn_pp_1) {
    margin-top: 3rem;
    background: none;
    text-align: center;

}
.container:has(.cn_pp_1) {
    /*margin-top: 3rem;*/
    background: #f5f5f5!important;

}
h5 + .cn_pp_1 {
    margin-bottom: 3rem;
    /*background: none;*/  
}
.cn_pp_1:has(.un_wide32) {
    background: white!important;
}



.un_entry .un_wide16 {
    width: 16rem;
    max-width: 16rem;
    text-align: center
}

.un_entry h2 {
    font: normal normal 700 3rem/120% "Exo 2", sans-serif
}

.un_entry h3 {
    color: #333;
    font: normal normal 400 2rem/120% "Josefin Sans", sans-serif
}

.un_entry h3 a {
    color: #6a6;
    font-size: 3rem !important;
    text-decoration: none
}

.un_entry p span {
    color: rgba(70, 70, 70, .6)
}

.h-bar {
    background-color: #34c2e3;
    height: 25px;
    padding: 5px;
    width: 350px;
    margin: 50px 0;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444
}

.h-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease-in-out;
    box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
    animation: animate-glow 1s ease-out infinite
}

@keyframes animate-glow {
    0% {
        box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset
    }
    50% {
        box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset
    }
    100% {
        box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset
    }
}

.un_flxpg>div:first-of-type,
[rel=main]>div:first-of-type {
    padding: 1rem
}

.un_flxpg .aside,
.un_flxpg>aside,
.un_flxpg>div:nth-of-type(2),
[rel=main] .aside,
[rel=main]>aside,
[rel=main]>div:nth-of-type(2) {
    background: rgba(170, 170, 170, .6);
    padding: 1rem
}

.un_flxpg h4,
[rel=main] h4 {
    display: block;
    margin: .2rem auto;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-family: 'Baloo Bhaijaan 2', cursive;
    font-weight: 700;
    color: rgba(41, 122, 169, .8)
}

.un_flxpg h4 span,
[rel=main] h4 span {
    display: block;
    font-size: 90%
}

.un_flxpg p,
[rel=main] p {
    text-decoration: none
}

.un_dialog {
    box-sizing: content-box;
    display: block;
    position: relative;
    width: 80%;
    margin: 1rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 2px 2px 3px 1px rgba(18, 11, 11, .3);
    h3, h4 {
        text-align: center;
        font-size: 2rem
    }
}
.container.un_flex > .un_dialog {
    max-width: 50%;
}


.un_dialog div.content,
.un_dialog p {
    font-size: 3.5rem
}

.cn_adaside img {
    max-width: 100%
}

.cn_adaside a {
    text-decoration: none !important
}

.cn_adaside p {
    color: rgba(0, 84, 204, .8)
}

.cn_adaside>div {
    width: 100%
}

.cn_list a {
    font-size: 2rem;
    text-decoration: none
}

.chinese {
    font-size: 2rem;
    color: #777;
    p {
        font-size: 80%;
    }
}

.un_entry:has(.chinese) {
    h3 {
        font-size: 120%;
        letter-spacing: .5px;
        background: none!important;
    }
}

.button {
    display: inline-block;
    padding: .3rem .6rem !important;
    margin: .6rem !important;
    min-width: 15%;
    text-align: center;
    text-decoration: none;
    background: rgba(85, 85, 85, .6);
    border: 2px solid rgba(85, 85, 85, .6);
    border-radius: 3px;
    color: rgba(255, 255, 255, .81)
}

.button i {
    color: #fff
}

.button.secondary {
    background: rgba(170, 170, 170, .6);
    border: 2px solid rgba(170, 170, 170, .6)
}

.button.act {
    display: inline-block
}

.button.mini {
    display: inline-block;
    border: 1px solid #eee !important;
    padding: .2rem .4rem !important;
    font-size: .9rem !important;
    font: normal normal 600 1.2rem/120% "Open Sans", sans-serif
}

.button:hover {
    color: #fff;
    background: #797979
}


<!-- HTML !-->
<button class="button-55" role="button">Button 55</button>

/* CSS */
.button-55 {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}


.un_object, .textfield_5  {
    padding: 2rem;
    h3, h4  {
        font-size: 2rem;
    }
}

.m-1 {
    margin: .5rem
}

.m-2 {
    margin: 1rem
}

.p-1 {
    padding: .5rem
}

.p-2 {
    padding: 1rem
}

.cn_choicecontainer>div {
    flex: 1 1 auto;
    font-family: "Open Sans", sans-serif;
    padding: 0;
    margin: 1rem;
    background: #fff;
    box-shadow: 4px 4px 10px 2px rgba(18, 11, 11, .3);
    border-radius: 5px;
    overflow: hidden
}

.cn_choicecontainer {
    box-sizing: content-box;
    /*box-sizing: border-box;*/
    >div {
        box-sizing: content-box;
        width: 30%;
        padding: 0!important;
        h2 {
            box-sizing: border-box;
            height: 7rem;
            font-family: "Open Sans", sans-serif !important;
            font-weight: 700 !important;
            font-size: 2rem;
            align-content: center;
            margin: 0 !important;
            background: rgba(17, 19, 39, .72)!important;
            color: #fff;
            max-width: 100%;
            overflow: hidden
        }
        h2:last-of-type {
            font-weight: 700;
            font-size: 90%;
            padding: 1rem;
            background: rgba(65, 63, 61, .84);
            color: #fff;
            border-radius: 0 0 5px 5px
        }
        h3 {
            text-align: center;
            margin-top: 3rem;
            font-size: 2rem;
        }
        p {
            text-indent: 0;
            font-size: 1.4rem;
            text-align: justify;
            hyphens: auto; /* Automatically adds hyphens where appropriate */
            overflow-wrap: break-word;
        }
        ul p {
            text-align: justify;
            width: 80%;
            margin: .2rem auto;

        }
    }
    
}


.cn_choicecontainer ul {
    width: 95%;
    margin: .5rem auto;
}

ul.list {
    width: 60%;
    margin: .5rem auto;
    font-size: 2rem;
}

.cn_choicecontainer ul p {
    font-size: 80%;
    text-align: left;
}

.cn_choicecontainer ul li,
ul.list li {
    font-size: 100% !important;
    color: #555;
    font-family: "Exo 2";
    text-align: left;

}

.un_box.m-x-auto,
nav.m-1 {
    text-align: center
}


.un_flex > .un_box {
    width: 30%;
    max-width: 30%;
    > a {
        margin-top: .5rem;
        width: 100%!important;
    }
}

nav a {
    color: rgba(41, 122, 169, .8)
}

[rel="navigate"] {
    text-align: center;
    text-wrap: balance;
    a:hover {
        color: dodgerblue!important;
    }
}

.un_nav2,
.un_plate .un_attitude_icons2 {
    background: red;
    display: none !important
}

.nav_emp {
    background: #666;
    color: #fff !important;
    border-radius: 5px;
    border: 1px solid dodgerblue;
    a {
        color: #fff !important;
        i {
            color: dodgerblue;
        }
    }
}
.nav_emp:hover {
    background: #0d6efd;
    color: #fff !important;
    a {
        color: #ddd!important;
        i {
            color: #fff;
        }
    }
}




#chiny-scroll {
  width: 20rem;
  max-width: 20rem;
  box-sizing: initial;
}
#chiny-scroll > * {
  width: 20rem;
  max-width: 20rem;
}


.presenter_mybook_1 {

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    div:has(img) {
        min-width: 12rem;
        max-width: 12rem;
        width: 12rem;
    }
    img {
        max-width: 100%;
        width: 100%;
    }
    h4 {
        text-align: left;
        font-family: "Rowdies", sans-serif;
        letter-spacing: .5px;
    }
    p {
        text-indent: 0;
    }
}


















@media screen and (max-width: 55.5em) {


body > .un_flex {
    width: 100%!important;
    min-width: 100%!important;
}

    .him {
        display: none;
    }


[rel="navportal"] {
    width: 90%;
    margin: 0 auto!important;
    padding: .3rem;
}

    [rel="topmenu"] {
        flex-direction: row;
        > div {
            width: 40%;
        }
        > .nav_emp  {
            width: 100%;
        }
    }


    h1,h2 {
        font: normal normal 700 3rem/120% "Exo 2", cursive, serif;
        span {
            font: normal normal 700 2rem/110% "Exo 2", cursive, serif;

        }
    }
    [rel="title"] {
        font-size: 2.5rem;
    }

    [rel="topmenu"] {
        margin-top: .2rem!important;
        padding: .3rem;
        .nav-item {
            padding: .4rem!important;

            a {
            padding: .4rem!important;
            text-transform: capitalize;
        }
        }
    }
    .summary {
        width: 95%;
        margin: .3rem auto;
        padding: .3rem 0;
        text-align: justify;
        font-size: 90%;
    }

    .nav_emp  {
        background: #444;
        color: dodgerblue;
        border: 2px solid dodgerblue;
        border-radius: 5px;
    }
    .nav_emp:hover {
        background: dodgerblue;
        color: white;
        i {
            color: #555;
        }

    }


	[rel="main"] {
		flex-direction: column;
		width: 100%!important;
		max-width: 100%!important;
/*		background: red;*/
	}
	.cn_title {
		flex-direction: column;
		text-align: center;
		margin: 2rem auto!important;

		> div {
			width: 95%;
            margin: 0!important;
		}
	}

    .un_plate {
    	margin: .2rem 0;
    	width: 100%;
    }
    #list_articles {
    	width: 95%!important;
    	min-width: 100%;
    	max-width: 100%;
    	margin: 0;
    	padding: 0;
    }


article {
	max-width: 100%!important;
	width: 95%;
	margin: 1rem auto!important;
	padding: 0!important;
	overflow: hidden;
    h4, h3 {
        text-align: center;
        width: 95%;
    }
    div {
        margin: .2rem auto!important;
        text-align: center;
        > p {
            text-align: justify;
        }
    }
    > p, div > p {
    max-width: 95%;
    width: 95%!important;
    margin: .5rem auto;
    font-size: 90%!important;
    }
    > .un_flex_hs {
        width: 100%;
        flex-direction: column;
        margin: .2rem auto;
        > div {
            width: 100%!important;
            margin: .2rem auto;
            p {

                width: 100%;
                margin: .2rem auto;
            }
        }
    }
    > .un_flex {
        width: 100%!important;
        min-width: 100%!important; 
        > div {
            width: 100%!important;
        }
    }
    .un_plate {
        max-width: 100%!important;
    }
    .un_box.m-x-auto {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        > * {
            width: auto!important;
        }
    }
    ul.list {
        width: 100%!important;
        margin: .2rem auto;
        li {
            font-size: 1.1rem;
            line-height: 105%;
        }
        li:nth-of-type(even) {
            /*background: #eaeaea;*/
        }
    }
    ul {
        width: 95%;
        margin: 1rem auto;
        li {
            /*margin: .2rem auto;*/
            font-size: 1.1rem;
            line-height: 105%;
            text-indent: -1.7rem!important;
        }
    }
    blockquote, ol, ul {
        width: 100%;
    }
    div.csch_subtle_3 {
        width: 100%;
        h2 {
            margin: .4rem auto .8rem!important;
        }
    }   
    figure[data-illu] {
        flex-direction: column!important;
        > * {
            box-sizing: border-box;
        }
        img {
            width: 90%!important;
            max-width: 90%!important;
            margin: .2rem auto;
            height: auto!important;
        }
        figcaption {
            padding: 1rem 0!important;
        } 
    }
}
 

.mb_thumb_2.csch_subtle_3 > .un_flex {
    background: none!important;
    div {
        background: none!important;

    }
    img {
        /*width: 35%;*/
        width: 7rem;
    }
}

p.wing {
	width: 95%;
}


.cn_title {
	width: 100%;
	max-width: 100%;
	a {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	a img {
		width: 40%;
	max-width: 100%;
	margin: 1rem;
	}
	> div {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

}


footer {
	width: 100%;
	max-width: 100%;
	padding: 0;
	> p {
/*	background: red;		*/
    text-align: center;
	}	
}
footer .un_flex_hs {
	max-width: 90%;
	margin: 0;
	flex-direction: column;
	> div {
		width: 100%;
	}

}

    #copyright {
    	width: 90%;
    }

    .cn_widgetpresenter {
    	max-width: 100%;
    	width: 100%;
        flex-direction: column;
        margin: .2rem auto!important;
        > div {
            width: 100%;
            margin: .2rem auto;
            padding: .2rem!important;
        }
        .cn_title {
            margin: 0!important;
            width: 100%!important;
            max-width: 100%!important;
            
            height: auto;
            max-height: 100%;
            a {
                max-width: 100%!important;
                width: 100%;
                img {
                    max-width: 100%!important;
                    width: 100%!important;
                    margin: 0!important;

                }
            }
        }
        h3 {
            margin: .2rem auto;
            padding: .2rem;
            width: 100%!important;
        }
        .un_flex_vc {
            width: 100%;
            max-width: 100%;
            text-align: center;
        }
        .meta {
            text-align: center;
        }
    }


    [rel="search"] {
    	max-width: 100%;
    	width: 95%;
    }

    #chiny-scroll {
    	width: 100%;
    	max-width: 100%;
    	padding: 0;
    	> div {
    		width: 90%;
    		margin: 1rem auto;
    	}
    }


    .btn-group.btn-toggle {
        margin: .2rem auto;
        label.btn {
            text-align: center;
        }
    }



    .nav.horizontal-align {
        flex-wrap: wrap;
    }


    .container {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
        padding: 0!important;
    }

    .container:has(> .cn_ip_1) {
        width: 100%;
        margin: 1rem auto;
        padding: 0!important;
    }
    .container.un_flex {
        width: 100%;
        min-width: 100%;
        margin: 1rem auto;
        padding: .2rem;
        flex-direction: column;
        .un_dialog {
            box-sizing: border-box;
            margin: 0;
            padding: .4rem;
        }
        > div {
            width: 100%;
            min-width: 100%;
        }
    }
    .un_entry, .cn_ip_1 {
        flex-direction: column;
        width: 100%;
        .summary {
            width: 90%;
            margin: .3rem auto;
            text-align: justify;
        }
        .un_flex_vt {
            max-width: 100%;
            width: 100%;

        }
        img {
            max-width: 100%;
        }
        a.un_wide12:has(img) {
            margin: .3rem auto;

        }
        .title {
            width: 100%!important;
            text-align: center;
        }
        p {
            text-align: justify;
            font-size: 90%;
            width: 100%!important;
            margin: .2rem!important;
        }
    }



    [rel="secondary"] {
        > a {
            margin: .2rem;
        }
    }


    .cn_choicecontainer {
        > div {
            margin-bottom: 2rem!important;
        }
    }
}