@media screen and (max-width: 600px) { html { font-size: 12px; } }
@media screen and (max-width: 300px) { html { font-size: 8px; } }

body { text-align: justify; }

.dark a > i.fa, .dark a > i.fab { color: #FFF; position: absolute; font-size: 300%; }
.dark a:hover > i.fa, .dark a:hover > i.fab { color: #DDD; }

.dark { background-color: #222; color: #DDD; }
.bottom-line { border-bottom: 3px solid #AAA; padding-bottom: 8px; }
.left-line { border-left: 3px solid #AAA; padding-left: 10px; }

span.caption {
    background-color: #0006;
    color: #FFF;
    padding: 4px 12px;
    position: absolute;
}

.carousel-item img { height: 33%; padding-left: 0px; padding-right: 0px; }
.carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { display: flex; }
.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33%); }
.carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33%); }
.carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { transform: translateX(0); }


.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.black { color: #000; }