.full-width {
   width: 100%;
}

.custom-navbar {
   padding-top: 20px;
   padding-bottom: 20px;
}
a.navbar-brand {
   font-family: Roboto Mono;
   font-size: 12pt !important;
   font-weight: bold;
}
a.navbar-brand img, .banner img {
   width: 75px; height: 75px;
}

.section {
   padding: 0;
}
.banner {
   background-color: #ccc;
   background-image: url(../images/banner-bg.jpg);
   background-position-x: center;
   border-radius: 20px;
   min-height: 250px;
}

.bad-json {
   background-color: #fcc;
}
.file-save-success, .file-save-error {
   color: #fff;
   font-family: Arial;
   font-size: 18pt;
   margin-top: 20px;
   margin-bottom: 10px;
   padding: 10px;
   width: 100%;
}
.file-save-success {
   background-color: #090;
}
.file-save-error {
   background-color: #900;
}

hr {
   border: #000 1px dashed;
   width: 80%;
}

ul {
   margin-top: 30px;
}
ul li {
   font-size: 18pt;
   line-height: 30px;
   margin-left: auto; margin-right: auto;
   margin-bottom: 20px;
   width: 500px;
   max-width: 75%;
}

p.social-media {
   font-size: 18pt;
   margin-top: 30px;
   text-align: right;
}

.clickable {
   cursor: pointer;
}

.youtube-wrapper {
   height: 0;
   position: relative;
   padding-top: 25px;
   padding-bottom: 56.25%; /* 16:9 */
}
.youtube-wrapper iframe {
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
}
.youtube-header {
   background-color: #eee;
   border: #ccc 3px solid;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   font-family: Arial;
   height: 100px;
   padding: 10px;
}
.youtube-header div {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.youtube-thumbnail img {
   border: #ccc 3px solid;
   border-top-width: 0px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   width: 100%;
}
.item:hover .youtube-header {
   background-color: #cfc;
   border-color: #9f9;
}

.video-error {
   background-color: #d83e4d;
   color: #fff;
   font-family: arial;
   font-size: 18pt;
   padding: 10px;
   text-align: center;
}

button {
   font-family: Arial;
}
.filter-element {
   border: transparent 3px solid;
   font-family: Arial;
   line-height: 100%;
   margin-bottom: 3px;
   padding-top: 3px;
}
.filter-element.active, .filter-element-major.active-major {
   border-color: #000;
}
.filter-element:before {
   background-color: transparent !important;
}
#filter-ot-tags, #filter-nt-tags {
   display: none;
}
#filters hr {
   border: #f0f0f0 1px solid;
}
#portfolio-grid {
   padding-top: 20px;
}

.filter-all-text { background-color: #eee; }
.filter-ot0-text { background-color: #ffa; }
.filter-ot1-text { background-color: #ffa; }
.filter-ot2-text { background-color: #fda; }
.filter-ot3-text { background-color: #ffa; }
.filter-ot4-text { background-color: #fda; }
.filter-ot5-text { background-color: #ffa; }
.filter-nt0-text { background-color: #acf; }
.filter-nt1-text { background-color: #acf; }
.filter-nt2-text { background-color: #cec; }
.filter-nt3-text { background-color: #acf; }
.filter-nt4-text { background-color: #cec; }

.filter-all-ovvw { background-color: #eee; }
.filter-ot0-ovvw { background-color: #ffa; }
.filter-ot1-ovvw { background-color: #CC8888; }
.filter-ot2-ovvw { background-color: #E5CCB7; }
.filter-ot3-ovvw { background-color: #D6B7ED; }
.filter-ot4-ovvw { background-color: #9AADE2; }
.filter-ot5-ovvw { background-color: #9AADE2; }
.filter-nt0-ovvw { background-color: #acf; }
.filter-nt1-ovvw { background-color: #FFCC44; }
.filter-nt2-ovvw { background-color: #E5A173; }
.filter-nt3-ovvw { background-color: #A1CDA1; }
.filter-nt4-ovvw { background-color: #A2CCC5; }
.filter-nt5-ovvw { background-color: #8FB5CC; }

form label, .header label {
   display: block;
   float: left;
   font-weight: bold;
   width: 75px;
}
.form-field {
   display: block;
   margin-bottom: 10px;
}
.form-field input, .form-field textarea {
   width: 100%;
}
.form-block {
   font-family: "Raleway", sans-serif;
   margin-left: auto; margin-right: auto;
}
.form-block input, .form-block textarea {
   border: #000 2px solid;
   border-radius: 5px;
}

.form-check-validated-yes {
   border-color: #090 !important;
}
.form-check-validated-no {
   background-color: #fcc;
   border-color: #900 !important;
}

.g-recaptcha {
   margin-top: 20px;
   margin-bottom: 20px;
}

.nav-content div.logo-white {
   margin-bottom: 20px;
}
div.logo-white {
   width: 75px;
}
div.logo-white img {
   width: 75px; height: 75px;
}
.dbl-description {
   position: relative;
   top: 5px;
}
.dbl-verse div span {
   font-size: 20px;
}
.footer div.logo-white {
   margin-left: auto; margin-right: auto;
}

.footer {
   background-color: #0d1e2d;
   border-top: #ccc 1px solid;
   font-size: 1rem;
   padding-top: 20px;
   padding-bottom: 20px;
}
.footer a {
   color: #fff;
}
a.back-to-top {
   background-color: #fff;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   color: #000;
   border: #000 1px solid;
   border-bottom-width: 0px;
   margin-left: 90%;
   padding: 5px;
   text-decoration: none;
}
a.back-to-top:hover {
   background-color: #000;
   color: #fff;
}

#admin-nav {
   background-color: #fc0;
   border-bottom: #003 1px solid;
   font-family: Roboto;
   font-size: 18pt;
   margin: 0px
   min-height: 50px;
   padding: 20px;
   width: 100%;
}
.admin-block {
   background-color: #ccc;
   border: #000 1px solid;
   border-radius: 5px;
   margin-top: 50px;
   margin-bottom: 50px;
   padding: 20px;
}
#admin-nav a.big-link, .admin-block a.big-link {
   color: #009;
   font-family: Roboto;
   font-size: 18pt;
}
.admin-block textarea {
   font-family: Courier New;
   font-size: 12pt;
   font-weight: bold;
   min-height: 300px;
}

@media (max-width: 768px) {
   .nav-content, .dbl-description {
      margin-top: 50px;
   }
}

@media (max-width: 480px) {
   .dbl-description {
      top: -50px;
   }
   .justify-responsively ul li {
      font-size: 12pt;
      line-height: 20px;
      margin-left: 0px; margin-right: 0px;
      max-width: 95%; width: 95%;
      text-align: left;
   }
}

@media (max-width: 375px) {
   .dbl-description {
      padding-left: 50px;
   }
   .dbl-description h3, .dbl-description p {
      font-size: 10pt;
   }
}

@media (max-width: 320px) {
   .filter-element {
      font-size: 0.8rem;
   }
}

@media (min-width: 375px) and (max-width: 768px) {
   .dbl-description {
      top: -50px;
   }
   .dbl-verse {
      margin-top: 20px;
   }
}

@media (min-width: 768px) and (max-width: 990px) {
   .dbl-description {
      padding-left: 50px;
   }
}