:root {
    --main-color: #4db6ac;
    --menu-color: #777;
    --parallax-color: rgba(255, 255, 255, .9);
    --parallax-background-color: rgba(77, 182, 172, 0.6);
    --off-black: rgba(0, 0, 0, 0.5);
    --expand_less: "\e5ce";
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: 'Montserrat', serif;
}

body {
    margin-top: 64px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 400;
    line-height: 1.3;
}

.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a {
    font-weight: inherit;
}

.h1 {
    font-size: 4.2rem;
    line-height: 110%;
    margin: 2.8rem 0 1.68rem 0;
}

.h2 {
    font-size: 3.56rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}

.h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
}

.h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 0.912rem 0;
}

.h5 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 0.656rem 0;
}

.h6 {
    font-size: 1.15rem;
    line-height: 110%;
    margin: 0.7666666667rem 0 0.46rem 0;
}

p {
    line-height: 2rem;
}

a {
    color: var(--main-color);
}

a:hover {
    opacity: 0.5;
}

blockquote {
    border-color: var(--main-color);
}

ul.wp-block-archives li,
ul.wp-block-categories li {
    list-style-position: inside;
    list-style-type: circle !important;
}

nav {
    background-color: var(--main-color);
}

nav.navbar-menu {
    background-color: var(--main-color);
    position: fixed;
    z-index: 999;
    top: 0;
}

.admin-bar nav.navbar-menu {
    top: 32px;
}

nav.navbar-menu .brand-logo {
    color: var(--main-color);
}

nav.navbar-menu ul a,
nav.navbar-menu .dropdown-content li>a,
nav.navbar-menu .dropdown-content li>span {
    color: var(--menu-color);
}

nav.navbar-menu ul li.current-menu-item>a,
nav.navbar-menu ul li.current-menu-ancestor>a,
nav.navbar-menu .dropdown-content li.current-menu-item>a,
nav.navbar-menu .dropdown-content li.current-menu-item>span {
    color: var(--main-color);
}

.sidenav-trigger {
    color: var(--main-color);
}

.sidenav .collapsible-header {
    padding: 0 32px;
}

.carousel.carousel-slider .carousel-item h2 {
    font-size: 4.2rem;
    line-height: 110%;
    font-weight: 400;
}

.carousel.carousel-slider .carousel-item.image {
    background-size: cover;
    background-position: center;
    background-color: var(--parallax-background-color);
}

.carousel.carousel-slider .carousel-item.image::before {
    z-index: -1;
}

.parallax-container {
    min-height: 380px;
    line-height: 0;
    height: auto;
    color: var(--parallax-color);
    background-color: var(--parallax-background-color);
    z-index: 0;
}

.parallax-container .section {
    width: 100%;
}

.carousel.carousel-slider .carousel-item.image::before,
.parallax-container .parallax::after {
    content: '';
    background-color: var(--off-black);
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.parallax-container.parallax-post {
    min-height: 250px;
    background-color: transparent;
}

footer.page-footer {
    margin: 0;
}

.back-top::before {
    font-family: "Material Icons";
    content: var(--expand_less);
    font-size: 2rem;
}

.post .chip a {
    color: white;
}

.wp-block-search__inside-wrapper {
    height: 46px;
}

.wp-block-group h2,
.wp-block-group h3,
.wp-block-group h4 .widget h2,
.widget h3,
.widget h4 {
    font-size: 1.64rem;
}

.container.container-fluid {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

p.attachment img {
    max-width: 100%;
    height: auto;
}

.admin-bar .menu-main-container ul.collapsible {
    padding-top: 32px;
}

p {
    margin-bottom: 15px;
}


/***
Sidebar
***/

#sidebar table {
    width: 100%;
}


/***
Search form
***/

.searchform input[type=text] {
    margin-bottom: 0;
}

.searchform button {
    width: 100%;
}


/***
Comments
***/

.comments {
    padding-top: 2%;
}

.comments img.avatar {
    width: auto;
    min-width: 4em;
    height: 4em;
}

.comments .children {
    margin-left: 4em;
}

.comments ul.comment-list {
    padding: 0.5rem;
    background-color: #f9f9f9;
    overflow-x: auto;
}

.comments .comment-author {
    display: flex;
    align-items: center;
}

.comments .comment-author .fn {
    margin: 0.5rem;
}

.form-wrapper {
    display: flex;
}

ul.dropdown-content {
  min-width: 200px !important;
}

@media screen and (forced-colors: active) {
    img {
        filter: grayscale(100%);
    }

    .carousel.carousel-slider .carousel-item.image {
        -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    }

    .carousel .indicators .indicator-item {
        background-color: CanvasText;
    }

    .carousel .indicators .indicator-item.active {
        background-color: LinkText;
    }
}

/* medium screens and up */

@media only screen and (min-width: 601px) {
    .container.container-fluid {
        width: 95%;
    }
}


/* large screens and up */

@media only screen and (min-width: 993px) {
    .container.container-fluid {
        width: 85%;
    }
}

/* extra large screens and up */

@media only screen and (min-width: 1201px) {}

/* small screens and down */

@media only screen and (max-width: 600px) {}

/* medium screens and down */

@media only screen and (max-width: 992px) {
}

/* medium screen */

@media only screen and (min-width: 601px) and (max-width: var(992px)) {}

@media only screen and (max-width: 782px) {
    .admin-bar .menu-main-container ul.collapsible {
        padding-top: 46px;
    }

    #index-banner .section {
        top: 10%;
    }

    .admin-bar nav.navbar-menu {
        top: 46px;
    }
}

@media only screen and (max-width: 600px) {
    #index-banner .section {
        top: 0;
    }

    body {
        margin-top: 0;
    }

    nav.navbar-menu,
    .admin-bar nav.navbar-menu {
        position: relative;
        top: 0;
    }
}