/**
 * Website swaruu.org CSS customizations. The site uses Materialize 1.0 front-end framework ()https://materializecss.com/)
 */

/*
 * Material icons
 */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(../iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(../iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/**
 * Fonts
 */
@font-face {
    font-family: Vollkorn-Regular;
    src: url('../fonts/Vollkorn/static/Vollkorn-Regular.ttf');
}
@font-face {
    font-family: Vollkorn-VariableFont;
    src: url('../fonts/Vollkorn/Vollkorn-VariableFont_wght.ttf');
}
@font-face {
    font-family: Cinzel-Regular;
    src: url('../fonts/Cinzel/Cinzel-Regular.ttf');
}

/**
 * Basic elements
 */
* {
    /* font-family: Cinzel-Regular, sans-serif, serif; */
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

/*
 * The page structure styling
 */
body {
    background-color: #000000;
}

.page-header {
    border-width: 1px;
    border-color: #ffffff;
    border-style: none none solid none;
}

.page-main {
    background: url(../background.jpg) rgba(93, 93, 93, 0.9);
    background-size: cover;
    background-blend-mode: multiply;
    position: relative;
}

.page-content {
    padding: 68px 10px 10px 10px;
}

.page-footer {
    text-align: center;
}

.nav-banner {
    position:relative;
    background-color: white;
}

.nav-banner img {
    border-style: none solid none solid;
    border-width: 1px;
    border-color: #000000;
}

.top-banner .heading1 {
    text-align: right;
    margin-top:50px;
}

.top-banner .heading2 {
    text-align: right;
}

.top-banner .col img {
    /*height: 122px;*/
}

.nav-banner .heading1 {
    background: rgba(255,255,255,0.5);
    padding: 0;
    margin:0;
    position: absolute;
    top: 33%;
    left: 50px;
}

/**
 * Header banner
 */
.header-banner-wrapper {
    text-align: center;
    background-color: #ffffff;
}
/*
 * Navigation bar
 */
nav {
    background-color: transparent;
    text-align: center
}

nav ul a {
    font-family: Cinzel-Regular, sans-serif, serif;
    font-size: 1.1rem;
    text-transform: uppercase;
}

/**
 * Navtools; search and language selection
 */
.nav-tools {
    border-width: 1px;
    border-color: #ffffff;
    border-style: none solid solid solid;
    border-radius: 0 0 21px 21px;
    background-color: #000000;
    height: 32px;
    position: absolute;
    left: 30%;
    right: 30%;
    z-index: 998;
}

.nav-tools * {
    color: #fff;
    font-size: 1.1rem;
}

.nav-tools .input-field {
    margin: 0;
    padding: 0;
}

.nav-tools .input-field i {
    font-size: 22px;
}

/**
 * Search components
 */
#search-progress {
    background-color: #000;
}

#search-container {
    position: absolute;
    top: 0; /* 38px; */
    left: 0;
    right: 0;
    height: 42px;
    padding: 30px 10% 0 10%;
    z-index: 997;
}
#search-container.showing {
    height: 100%; !important;
}

#search-results {
    background-color: rgba(255,255,255, 0.9);
}
#search-results em {
    background-color: greenyellow;
    color: black;
}

.input-field input[type="search"] + .label-icon {
    -webkit-transform: none;
    transform: none;
    left: 0;
}

#search-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: unset;
    z-index: 99;
    cursor: pointer;
}

#search-clear-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: unset;
    z-index: 99;
    color: #D50000;
    display: none;
    cursor: pointer;
}

.nav-tools .input-field input[type=search] {
    margin: 0 0 0 30px;
    padding: 0;
    height: auto;
    border:0;
}

/**
 * Navigation dropdown menu
 */
.dropdown-content {
    background-color: #000000;
    border: 1px solid #ffffff;
    z-index: 999;
}
.dropdown-content li {
    z-index: 999;
}
.dropdown-content li>a, .dropdown-content li>span {
    background-color: inherit;
    color: #fff;
    z-index: 999;
}

.dropdown-content li:hover,
.dropdown-content li.active,
.dropdown-content li.selected {
    background-color:#6a6a6a;
}
.dropdown-content li.active.selected {
    background-color:#6a6a6a;
}

.dropdown-trigger {
    z-index: 999;
}
.dropdown-trigger i.right {
    margin-left: 0;
}

/**
 * Flash messages
 */
.flash {
    font-family: Vollkorn, sans-serif, serif;
    text-transform: uppercase;
}

@supports (font-variation-settings: 'wdth' 115) {
    .flash {
        font-family: Vollkorn-VariableFont, sans-serif, serif;
    }
}

/**
 * Cards
 */
.card {
    border-radius: 21px 21px 0 0;
    background-color: rgba(255,255,255,0.7);
}
.card .card-image img {
    border-radius: 21px 21px 0 0;
}
.card .card-title {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2rem;
}
.card .card-content {
    background-color: rgba(255, 255, 255, 0.5); /* white */
}
.card .card-content p {
    margin-bottom: 12px;
}

.card .btn-floating.halfway-fab {
    right: 54px;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: #0E47A2;
    font-weight: bold;
}

/**
 * Sidebar filter for transcripts and videos pages
 */
#sidebar-filter {
    z-index: 9;
    padding-top: 20px;
}
#sidebar-filter.pin-top, #sidebar-filter.pin-bottom {
    float: right !important;
}
#sidebar-filter.pinned {
    right: 20px;!important;
}

/**
 * Pagination
 */
.pagination {
    margin: 0;
    background-color: white;
}

/**
 * Help pages
 */
.help {
    background-color: white;
}

/**
 * Transcripts section
 */
.toc-wrapper {
    position: fixed;
    right: 7%;
}

#tocList li a {
    text-decoration: none;
    color: black;
}

.transcripts, .transcript-view, .blog, .blog-view {
    background-color: white;
}

.transcript-content, .blog-content {
    border-width: 2px;
    border-color: #000;
    border-style: none none solid solid;
    padding-left: 10px;
}

.display-card {
}

.display-list .author, .display-list .published {
    font-size: 0.9em;
    padding: 2px 0 0 4px;
    display: inline-block;
}

.display-list .read-link {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.legal-notice .card {
    border-radius: 21px 21px 0 0;
    background-color: rgba(14, 71, 162, 1);
}

.legal-notice .card .card-content {
    background-color:  unset;
    color: #fff;
}

/**
 * Videos section
 */
.videos {
    background-color: white;
    padding: 10px;
}

.video-card-container, .video-list-container {
    margin-right: 20%;
}

.video-card-container .card {
    display:inline-block;
    vertical-align: top;
    width: 33%;
}

.video-card-container .card .card-title {
    font-size: 1.0em;
}

/**
 * Screen size related adjustments
 */

/* Size s mobile devices <= 600px */
@media only screen and (max-width : 600px) {
    nav {
        text-align: inherit;
    }

    .nav-tools {
        left: 10%;
        right: 10%;
    }

    .nav-banner .heading1 {
        top: 1px;
    }

    .top-banner .heading1, .top-banner .heading2 {
        text-align: center;
        margin-top:10px;
    }

    .top-banner .col img {
        height: 128px; !important;
    }

    .video-card-container .card {
        width: 100%;
    }
}

/* Size m tablet devices > 600px */
@media only screen and (min-width : 600px) and (max-width : 992px) {
    nav {
        text-align: inherit;
    }

    .nav-tools {
        left: 20%;
        right: 20%;
    }

    .nav-banner .heading1 {
        top: 1px;
    }

    .video-card-container .card {
        width: 49%;
    }
}

/* Size l desktop devices > 992px */
@media only screen and (min-width : 992px) and (max-width : 1200px) {
    .nav-tools {
        left: 30%;
        right: 30%;
    }
}

/* Size xl large desktop devices > 1200px */
@media only screen and (min-width : 1200px) {
    .nav-tools {
        left: 35%;
        right: 35%;
    }
}

/**
 * Video containers
 */
.video-container {
    z-index: 99;
}

.btn-play {
    z-index: 99;
}

/**
 * Images, photos, artwork
 */
img.person-portrait {
    max-width: 370px;
    border-radius: 30px;
}

/**
 * Buttons, checkboxes, etc
 */
.btn, .btn-large, .btn-small, .btn-flat {
    background-color: #0E47A2; /* Lighter blue */
}
.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #020B51; /* Darker blue */
}

[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::after {
    background-color: #0E47A2;
}

[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::before, [type="radio"].with-gap:checked + span::after {
    border: 2px solid #000;
}

/**
 * Helpers
 */
.underline {
    text-decoration: underline;
}

.bold {
    font-weight: bold;
    font-size: 1.2rem;
}