/*
===============================================================================================================================
Theme CSS.
===============================================================================================================================
*/

/* CSS to set NavBar items to white (place in custom.css and uncomment) */
/*
.bg-primary .navbar-nav .active>.nav-link
{
    color: #FFFFFF !important;
}
*/

/* CSS to better match font family with Canvas LMS (place in custom.css and uncomment) */
/*
@import url('https://fonts.googleapis.com/css?family=Lato');
body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
}
*/

/* CSS to better match link colors with Canvas LMS (place in custom.css and uncomment) */
/*
a:not(.btn):not(.badge):not(.navbar-brand) {
  color: #0374B5;
}
a:hover:not(.btn):not(.badge):not(.navbar-brand):not(.nav-link), a:focus:not(.btn):not(.badge):not(.navbar-brand):not(.nav-link) {
  color: #0374B5;
}
.btn-primary {
  color: #fff;
  background-color: #3a8ddc!important;
  border-color: #3a8ddc!important;
}
*/

a:not(.btn, .badge, .navbar-brand, .dropdown-item, .nav-link) {
  color: #1b6ec2;
  text-decoration: none;
}

.navbar-nav .logout {
    color: inherit;
    text-decoration: none;
}

a:hover:not(.btn, .badge, .navbar-brand, .nav-link), a:focus:not(.btn, .badge, .navbar-brand, .nav-link) {
  color: #0374B5;
}

.page-link {
    color: #1b6ec2;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff!important;
    background-color: #1b6ec2;
    border-color: #1b6ec2;
}

.badge-primary {
    color: #fff;
    background-color: #1b6ec2;
}

.btn-default {
    color: #fff;
    background-color: #495057;
    border-color: #3d4349;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-success {
    color: #fff;
    background-color: #396f3a;
    border-color: #305e31;
}

.btn-info {
    color: #fff;
    background-color: #0b7285;
    border-color: #095e6d;
}

.btn-warning {
    color: #fff;
    background-color: #b24d04;
    border-color: #994203;
}

.btn-danger {
    color: #fff;
    background-color: #c92a2a;
    border-color: #b42626;
}

.btn-link {
    color: #1b6ec2;
}

h1, .h1 {
  font-size: 1.75rem;
}

h2, .h2 {
  font-size: 1.50rem;
}

h3, .h3 {
  font-size: 1.30rem;
}

h4, .h4 {
  font-size: 1.20rem;
}
h5, .h5 {
  font-size: 1.10rem;
}

h6, .h6 {
  font-size: 1rem;
}

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.myheader {
  background-color: #222222;
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center;
  width: auto;
  height: 280px;
}

.card-deck > .card
{
    min-width: 30%;
    flex-wrap: wrap;
    flex: initial;
    margin-bottom: 30px;
}

@media only screen and (min-width: 960px) and (max-width: 1140px) {
  .myheader {
      height: 250px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
  .myheader {
      height: 220px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .myheader {
      height: 180px;
  }
  .container {
      max-width:720px;
  }
}

@media only screen and (max-width: 576px) {
  .myheader {
      height: 130px;
  }
}

body {
    margin-bottom: 0;
    background-color: #f5f5f5;
}

.main-content {
    min-height: 85%;
    min-height: 85vh;
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 5rem;
    background-color: #ffffff;
}

.fa {
  padding-right: 5px;
}

.header {
    background-color: #222222!important;
}

.alert-secondary {
    background-color: #f5f5f5;
    border-color: #e3e3e3;
}

.alert {
    padding: .75rem 1.25rem .25rem 1.25rem!important;
}

/* Reminders boxes (such as "What's Happening This Week", in any Alert Style colour) with even padding, as their last
   line adds no space of its own, and the same space below them as below an announcement above them */
.listbullet.alert {
    padding-bottom: .75rem!important;
    margin-bottom: 1.5rem;
}

.list-item {
    margin: -1px 0 0px!important;
}

ol.breadcrumb {
    margin: -12px 0 0px;
}

.listbullet ul {
  list-style: none;
  margin-top: .8em;
}

.listbullet ul li {
  margin: 2px 0;
}

.listbullet ul li:before {
  position: absolute;
  content: '\2713';
  margin-left: -18px;
}

.image-credit-wrapper {
overflow: hidden;
position: relative;
max-width: 1200px;
}

.image-credit-wrapper .image-credit {
position: absolute;
right: 0px;
bottom: 0px;
}

.image-credit {
background: rgba(0,0,0,.66);
border-top-left-radius:3px;
color: #ccc;
display: inline-block;
font-size: 11px;
font-family: helvetica;
font-weight: 300;
padding: 5px 8px;
position: absolute;
bottom: 0;
right: 0;
}

.image-credit a {
  color: #ccc;
  text-decoration: none;
}

.image-credit a:hover {
  color: #ccc;
}

#accordion h2, #accordion .h2 {
    font-size: 1.00rem;
}

h4, .h4, h5, .h5 {
    margin-top: 15.5px;
    margin-bottom: 5.5px;
}

.header h1 {
  text-shadow: 1px 1px 4px rgba(34,34,34,0.6);
}

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(-180deg);
}

.card-img-top {
    width: 100%;
    height: 14vw;
    object-fit: cover;
}

.blog-sidebar .nav-link {
    display: block;
    padding: .5rem 0rem;
}

.blog-sidebar .active {
   font-weight: bold;
}

img.left {
  display:inline;
  float:left;
  margin:1rem 15px 5px 0;
  max-width: 50%;
}

img.right {
  float:right;
  margin:1rem 0 5px 15px;
  max-width: 50%;
}

img.center {
  display:block;
  margin:10px auto;
}

figure.image-caption {
    text-align: center;
    margin: 1rem;
}

figure.image-caption figcaption {
    opacity: 0.7;
    font-size: 90%;
}

figure.figure-right {
    float:right;
    margin:1rem 0 5px 15px;
    max-width: 50%;
}

figure.figure-left {
    float: left;
    margin:1rem 15px 5px 0;
    max-width: 50%;
}

figure.caption-left figcaption {
    text-align: left;
}

figure.caption-right figcaption {
    text-align: right;
}

.pagination {
    color: #767676!important;
}

.up-arrow {
  text-align: center;
  font-size: 4em;
  margin-top: -10px;
  margin-bottom: -20px;
}

.text-muted {
    color: #666666!important;
}

.footer {
  position: relative;
  height: auto!important;
  padding: 1em;
}

body.chromeless {
  background-color: transparent;
}

.topics h3,
.topics-letter {
    width: 2.5em;
    color: white;
    font-weight: 600;
    text-align: left;
    margin-top: 1.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    background: #666666;
}

.topics .anchorjs-link {
    display: none;
}

div.keeptogether {
   display: inline-block;
   width: 100%;
}

.chromeless-show {
    display: none;
}

.chromeless-hide {
    display: block;
}

/* GitHub-style alerts (see github-alerts.css) - even padding, as the .alert rule above leaves room for list items */
.alert.md-alert {
    padding-bottom: .75rem!important;
}

/* [topics] shortcode - letter headings sized like the earlier ### letters, clear of the top of the window when jumped to */
.topics-letter {
    font-size: 1.75rem;
    scroll-margin-top: 1rem;
}

/* [topics] shortcode - A-Z index as separate rounded letters */
.topics-index {
    gap: 0.25rem;
}

.topics-index .page-link {
    min-width: 2rem;
    text-align: center;
    margin-left: 0;
    border-radius: 4px !important;
}

/* Corner size for the [topics] letter headings */
h2.topics-letter {
    border-radius: 4px;
}

/* the "All Courses" link above the page (Link to Course List): square corners, like the page */
.course-list-bar {
    border-radius: 0;
}