/**
 * CSS for App renataszypryt.pl
 *
 * @package	renataszypryt.pl
 * @author	Wojciech Sobczak (wsobczak@gmail.com)
 * @copyright	Copyright (c) Renata Szypryt Tłumaczenia (https://renataszypryt.pl)
 * @since	Version 1.1
 */

/**
 * General
 */
a {
    color: #006fba;
}

a:hover {
    color: #ed0000;
    text-decoration: underline;
}

header>.container,
main>.container,
footer>.container {
    background-image: url('../img/bg_page.png');
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% 100%;
}

/**
 * Header
 */
h1,
h2,
h3,
h4,
blockquote p,
footer p {
    font-family: 'Palatino Linotype', Georgia, Times, sans-serif;
}

header h1,
header h3 {
    text-align: center;
}

header h1 {
    border-top: 3px double #dadada;
    color: #777;
    font-size: 2.5rem;
    font-variant: small-caps;
    text-transform: capitalize;
    letter-spacing: 6px;
}

header h2 {
    margin-bottom: 0.2rem;
    color: #006fba;
    font-size: 1rem;
    text-align: right;
}
header h2>strong {
    font-size: 1.2rem;
}

header h3 {
    border-bottom: 3px double #dadada;
    color: #666;
    font-size: 1.16rem;
    text-transform: uppercase;
    letter-spacing: 3.6px;
}

@media (max-width: 400px) {
    header h1 {
        font-size: 1.5rem;
    }

    header h2 {
        font-size: .7rem;
        text-align: center;
    }
    header h2>strong {
        font-size: .9rem;
    }

    header h3 {
        font-size: 1.0rem;
    }
}

header .navbar {
    padding-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dadada;
}

header .navbar-light .navbar-nav .nav-link {
    margin: 0 .5rem;
    padding: .5rem 1rem;
    color: #006fba;
    font-size: 1.3rem;
    font-variant: small-caps;
    text-transform: capitalize;
    font-family: 'Palatino Linotype', Georgia, Times, sans-serif;
}

header .navbar-light .navbar-nav .nav-link:hover {
    color: #ed0000;
    text-decoration: underline;
}

header .navbar-light .navbar-nav .active .nav-link {
    background-color: #f4f4f4;
}


/**
 * Main / Content
 */
main h1 {
    text-transform:capitalize;
    font-variant:small-caps;
}

main .section {
    margin-bottom: 2rem;
}

main .section h2 {
    margin-bottom: 1rem;
    color: #777;
}

main .section p,
main .section li {
    color: #444;
    font-size: 1.1rem;
}

main .section p {
    text-align: justify;
}

main .section li>.fa-file-o {
    color: #006fba;
}

main .section blockquote {
    background-color: #f4f4f4;
}

main .section blockquote>.img {
    display: block;
    float: left;
    margin-right: 1rem;
}

main .section blockquote>p {
    padding: 1rem 1.6rem;
    font-size: 1.16rem;
    font-style: italic;
}

main .section table {
    border-bottom: 1px solid #dee2e6;
}

main .section table,
main .section table th,
main .section table td {
    border-color: #006fba;
}

main .section table th.text-right {
    padding-right: 1rem;
}

main .section table td>h3,
main .section table td>p {
    margin: 0;
}

main .section table td>h3 {
    color: #777;
}

main .section table td>p {
    font-size: 1.4rem;
}

main .section #map {
    width: 100%;
    height: 440px;
}

.mapboxgl-popup {
    opacity: .9;
}

#map-popup {
    padding: .5rem;
}

#map-popup h2 {
    margin-bottom: 0;
    font-size: 1.6rem;
    letter-spacing: 9px;
}

#map-popup h3 {
    margin-bottom: 0;
    font-size: 1.4rem;
    letter-spacing: 7px;
}

#map-popup h4 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

#map-popup h2,
#map-popup h3,
#map-popup h4 {
    color: #777;
    font-variant: small-caps;
    text-transform: capitalize;
    text-align: center;
}

#map-popup p {
    margin-bottom: .5rem;
    color: #444;
    text-align: center;
}

#map-popup p>i {
    color: #777;
}


@media (max-width: 767.98px) {
    main .section blockquote>.img {
        float: none;
        margin: 0 auto;
    }
    main .section blockquote>.img>img {
        display: block;
        margin: 0 auto;
    }
    main .section blockquote>p {
        padding: 1rem;
        font-size: 1rem;
        font-style: italic;
    }
}

/**
 * Footer
 */
footer {
    margin-bottom: 1rem;
}

footer>.container {
    border-top: 3px double #dadada;
    border-bottom: 1px solid #006fba;
}

footer p {
    margin: 0;
    line-height: 1.6rem;
    color: #777;
    font-size: .96rem;
    font-variant: small-caps;
    text-transform: capitalize;
}

footer .copyright>p {
    text-align: left;
}

footer .design-code>p {
    text-align: right;
}

@media (max-width: 991.98px) {
    footer .copyright>p,
    footer .design-code>p {
        text-align: center;
    }
}

/**
 For XDebug
 */

.xdebug-var-dump {
    position: absolute;
    bottom: 3%;
    left: 5%;
    width: 90%;
    max-height: 400px;
    padding: 2.9rem 1% 1%;
    border: 2px solid #f2275a;
    background-color: #fff;
    font-size: 1.04rem;
    opacity: .86;
    z-index: 999999;
}

.xdebug-var-dump>.xdebug-close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.xdebug-var-dump>.xdebug-close:focus,
.xdebug-var-dump>.xdebug-close:hover {
    color: #f2275a;
    text-decoration: none;
}

.xdebug-var-dump>button.xdebug-close {
    background-color: #fff;
    color: #000;
    border: 0;
    font-size: 1.4rem;
}

.xdebug-var-dump>.xdebug-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .3rem .9rem .3rem 1rem;
    color: inherit;
}

.xdebug-var-dump>p.xdebug-title {
    background-color: #f2275a;
    color: #fff;
    border: 0;
}

.xdebug-var-dump>.xdebug-title {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: .5rem 1rem .6rem 1rem;
    color: inherit;
}

.xdebug-var-dump>small:first-child {
    display: block;
    margin: -.2rem -1.2% .4rem -1.2%;
    padding: .5rem;
    background-color: #f2275a;
    color: #fff;
    text-align: center;
}