/***
* Miami University Canvas CSS V1.2.0
* Copyright 2021, Miami University
* Last revised 5/20/2021
***/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Layouts & Spacing
- Videos
- Lists
- Horizontal Rules
- Typography 
- Blockquotes
- Special-Emphasis Blocks
- Images
- Buttons
- Module Menus
- Homepage Headers
- Tables
*/


/* Layouts & Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Changing colors of Canvas interface to Miami brand */

#header {
    background-color: #231f20;
}

.ig-list .ig-row:hover {
    background-color: #F6FCFE;
}

.module-sequence-footer-content {
    border-top: 1px solid #ffffff !important;
}

.header-bar {
    border-bottom: #ffffff;
}


/* Styling an introduction section below a page title */

.intro {
    margin: 1.5rem auto ;
}

.intro p {
    margin: 0rem auto 1rem auto;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6rem;
    max-width: 80ch;
}


/* Limiting line length for readability */

.page {
	max-width: 968px;
    margin: 0 auto;
}


/* Creating a grid with rows and columns */

.row {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
    flex-direction: row;
    margin-left: -0.3rem;
}

.quarter {
    position: relative; 
	flex: 25%;
	max-width: 23%;
	margin: 0.5% 1% 0.5% 0;
}

.half {
	flex: 50%;
	max-width: 45%;
	padding: 2.5% 5% 2.5% 0;
}
.one-third {
	flex: 33.33%;
	max-width: 28.33%;
	padding: 2.5% 5% 2.5% 0;
}

.two-thirds {
	flex: 66.66%;
	max-width: 61.66%;
	padding: 2.5% 5% 2.5% 0;
}

@media (max-width: 1060px) {
	.half, .one-third, .two-thirds {
		flex: 100%; 
		max-width: 100% !important;
        padding: 0.5rem;
	}
    
    .quarter {
        flex: 50%;
        max-width: 45%;
        padding: 2.5% 5% 2.5% 0;
    }
    
    .row {
        margin-left: 0rem;
    }
}

@media screen and (max-width:700px) {
    .quarter {
        flex: 100%; 
		max-width: 100% !important;
    }
}


/* Content blocks that fit in vertical columns with a white background and light tan border */

.row-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-basis: 100%;
    flex: 1 1 380px;
}

.full-boxed {
    padding: 3% 5%;
    border: 3px solid #FAF9F7;
    background-color: #ffffff;
}

.half-boxed {
    flex: 50%;
    margin: 2%;
    padding: 4% 7%;
    border: 3px solid #FAF9F7;
    background-color: #ffffff;
}

.half-boxed h2, .half-boxed h3, .full-boxed h2, .full-boxed h3 {
    border-bottom: 3px solid #c41230;
    padding-bottom: 0.5rem;
}

.half-boxed h2, .full-boxed h2 {
    background-color: #c41230;
    color: #ffffff !important;
    margin-left: -4.5%;
    margin-right: -4.5%;
    margin-bottom: 4.5%;
    padding: 1% 4.5%;
}

.half-boxed h3, .full-boxed h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1060px) {
     .half-boxed {
        padding: 1% 3%;
        margin: 2% 0 4% 0;
    }
    
    .half-boxed h2 {
        margin-left: -4%;
        margin-right: -4%;
        padding: 1.5% 4%;
    }
    
    .half-boxed h3 {
        margin-top: 2rem;
    }
}


/* Videos
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Scale videos to resize -- media-wrapper is for YouTube and may work with some other players -- media-k is for Kaltura */

.media-wrapper {
    position: relative;
    overflow:hidden;
    padding-bottom: 56.25%;    
    height: 0 !important;
	margin: 2rem auto !important;
}

.media-k {
    position: relative;
    padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);     
	padding-top: 5rem;
	margin: 2rem auto; 
	height: 16rem;
}

.media-wrapper iframe, .media-k iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    max-width: 100% !important;
}

@media (min-width: 1200px) {
    .media-k {
        height: 17rem;
    }
}


/* Side-by-side layout for 2 videos */

.feature-row-video {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    margin: 1% auto;
  background-color: #edece2;
}

.feature-box-video {
  position: relative;
  flex: 100%;
  width: 100%;
  min-height: 300px;
  margin: 1%; 
}

@media screen and (min-width: 1060px) {
  .feature-box-video {
    flex: 50%;
    max-width: 48%;
  }
}
    
    
/* Accordion */

.page-accordion, .page-accordion-2 {
  outline: 0;
  box-sizing: border-box;
}

.page-accordion section, .page-accordion-2 section {
  margin: 2.5rem auto;
  width: 99%;
  color: #231f20;
}

.page-accordion summary, .page-accordion-2 summary {
  display: block;
  cursor: pointer;
  padding: 0.8rem;
  font-size: 1.6rem;
  line-height: 2rem;
  transition: .3s;
  user-select: none;
    border-bottom: 2px solid;
}

.page-accordion-2 summary {
  background-color: #edece2;
    border-bottom: 2px solid #FAF9F7;
}

.page-accordion summary:before, .page-accordion-2 summary:before {
    content: "\002B";
    font-size: 1.6rem;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding-right: 0.5rem;
}

.page-accordion details, .page-accordion-2 details {
  overflow: auto;
  height: 100%;
  user-select: none;
  padding: 0.5rem 1rem;
}

.page-accordion details:focus, .page-accordion-2 details:focus {
    outline: 0;
}

.page-accordion details[open] > summary, .page-accordion-2 details[open] > summary {
   color: #C41230;
    margin-bottom: 1.5rem;
}

.page-accordion details[open] > summary:before, .page-accordion-2 details[open] > summary:before {
   content: "\2212";
}


@media (min-width: 768px) {
  .page-accordion details[open] > p, .page-accordion-2 details[open] > p {
    opacity: 0;
    animation-name: accOpen;
    animation-duration: 0.6s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
  }

  .page-accordion details[open] > div,  .page-accordion-2 details[open] > div {
    animation-name: accSlide;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }
}

@keyframes accSlide {
  from {
    opacity: 0;
    height: 0;
    padding: 0;
  }

  to {
    opacity: 1;
    height: var(--contentHeight);
    padding: 20px;
  }
}

@keyframes accOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Adding spacing to standard lists */

ul, ol {
	margin-top: 0.7rem;
	margin-bottom: 0.7rem;
}

ul li, ol li {
	margin-bottom: 0.5rem;
}


/* Adding square or circle backgrounds to ordered lists */

ol.squares-list, ol.circles-list {
    list-style-type: none;
    margin: 0;
    margin-left: 2.2rem;
    margin-top: 1rem;
    padding: 0;
    counter-reset: li-counter;
}

ol.squares-list > li, ol.circles-list > li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-top: 0.4rem;
	padding-left: 1.2rem;
  min-height: 2.5rem;
  font-size: 1.15rem;
}

ol.squares-list > li:before, ol.circles-list > li:before {
  position: absolute;
  top: -0.1rem;
  left: -2rem;
  width: 2rem;
  height: 2rem;
    font-family: "Lucida Console", Monaco, monospace;
  font-size: 1.5rem;
  text-align: center;
	padding: 0.2rem 0.2rem 0.4rem 0.2rem;
  color: #ffffff;
  border: 0.1rem solid rgba(195, 20, 45, 0.5);
  background-color: #C41230;
  content: counter(li-counter);
  counter-increment: li-counter;
}

ol.circles-list > li {
  	padding-left: 0.8rem;
}

ol.circles-list > li:before {
  top: -0.1rem;
  border-radius: 100%;
  left: -2.4rem;
  width: 1.9rem;
  height: 1.9rem;
}

@media screen and (min-width: 1200px) {
    ol.squares-list, ol.circles-list {
     margin-left: 2.5rem;
}
}


/* Creating an ordered list with big numbers */

.big-list {
	list-style-type: none;
	margin: 0;
	margin-left: 2rem; 
	margin-bottom: 1.2rem;
	margin-top:1.4rem;
	padding: 0;
	counter-reset: li-counter;
}

.big-list > li {
	position: relative;
	margin-bottom: 0.9rem;
	border-radius: 5px;
	padding-left: 0.5rem;
	min-height: 2rem;
	line-height: 1.5;
	border-left: 2.5px solid #edece2;
    max-width: 800px;
}

.big-list > li:before {
	position: absolute;
	top: -0.85rem;
	left: -1.9rem;
	width: 1.4rem;
	font-size: 1.7rem;
	font-family: Georgia,"Times New Roman",serif !important;
	font-weight: 700;
	line-height: 2;
	text-align: right;
	color: #504446;
	content: counter(li-counter);
	counter-increment: li-counter;
}

.big-list li:nth-child(10):before { 
    left: -2.5rem;
    width: 2.1rem;
}

.big-list li:nth-child(11):before { 
    left: -2.4rem;
    width: 1.9rem;
}

.big-list li:nth-child(n+12):before { 
    left: -2.6rem;
    width: 2.1rem;
}

.big-list li:nth-child(20):before, .big-list li:nth-child(30):before {
    left: -2.7rem;
}

.big-list li:nth-child(21):before { 
    left: -2.3rem;
}

.big-list li:nth-child(n+22):before { 
    left: -2.6rem;
}


/* Creating an ordered list with big letters */

.big-list-A {
	list-style-type: none;
	margin: 0;
	margin-left: 2.2rem; 
	margin-bottom: 1.2rem;
	margin-top:1.4rem;
	padding: 0;
	counter-reset: li-counter;
}

.big-list-A > li {
	position: relative;
	margin-bottom: 0.9rem;
	border-radius: 5px;
	padding-left: 0.5rem;
	min-height: 2rem;
	line-height: 1.5;
	border-left: 2.5px solid #edece2;
}

.big-list-A > li:before {
	position: absolute;
	top: -0.7rem;
	left: -1.9rem;
	width: 1.4rem;
	font-size: 1.7rem;
	font-family: Georgia,"Times New Roman",serif !important; 
	font-weight:700;
	line-height: 2;
	text-align: right;
	color: #504446;
	content: counter(li-counter, upper-alpha);
	counter-increment: li-counter;
}

@media screen and (min-width: 1060px) {
    .big-list {
        margin-left: 3rem;
    }
}


/* Horizontal Rules
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr.left {
	margin: 3.5rem 0;
	width: 90;
	border-top: 2px solid #edece2;
}

hr.centered {
	margin: 0.5rem auto 3rem auto;
	width: 50%;
	border-top: 3px solid #edece2;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h2.course-title {
	font-weight: 700 !important;
    color: #231f20 !important;
}

h1.page-title {
    font-weight: 700 !important;
    color: #231f20 !important;
    line-height: 2.8rem;
    text-align: center;
    margin: 2rem 0 1rem 0;
}

h2 {
    font-weight: 700 !important;
}

h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}


/* Fixes issues with assignment link color in Speedgrader */

h2.assignmentDetails__Title {
    color: #ffffff !important;
}


/* Fixes issues with headings in decpreciated Canvas class */

h2.content-box, h2.pad-box-mini {
    color: #ffffff !important;
}


/* Blockquotes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Simple bar formatting */

blockquote {
    font-size: 1.2rem;
    line-height: 1.7rem;
    margin: 2rem 1rem;
	padding: 0.8rem 2rem 0.8rem 1.3rem; 
	border-left: 0.4rem solid #ecede2;
	border-radius: 10px;
    max-width: 600px;
}


/* Pull quote with a big red opening quotation mark */

.pullquote {
  margin: 2rem 1rem;
  background: #edece2;
  padding: 10% 7% 10% 4%;
}

.pullquote blockquote {
  font-size: 1.1em;
  line-height: 1.6rem;
    margin: 0;
    border-left: none;
    padding: 0.5rem;
}

.dropcase-top {
    font-family: "Lucida Console", Monaco, monospace;
    float: left;
    margin-right: 1rem;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    padding: 0.25rem;
    font-size: 7rem;
    line-height: 75%;
    color: #c41230;
}

.pullquote p {
  font-size: 0.95rem;
  line-height: 1.4rem;
    margin-left: 7.3rem;
}

 .pullquote p:first-letter {
    margin-left: -1rem;
}

@media screen and (min-width: 800px) {
  .pullquote {
    max-width: 600px;
}
    
    .pullquote {
      margin: 2.5rem auto;
      padding: 5% 5% 5% 3%;
}
  
  .pullquote blockquote {
    font-size: 1.4em;
    line-height: 1.9rem;
  }
  
  .pullquote p {
    font-size: 1.1rem;
    line-height: 1.5rem;
    margin-left: 10rem;
  }
    
    .pullquote p:first-letter {
        margin-left: -1.1rem;
}
    
    .dropcase-top {
        margin-right: 1.4rem;
        margin-bottom: 2.5rem;
        margin-top: 0.6rem;
        padding: 0.25rem;
        font-size: 11rem;
        line-height: 75%;
}
}


/* Big  pull quote with top and bottom borders */

.pullquote2-wrapper {
   display: flex;
   padding: 0 1rem;
}

.pullquote2 {
  position: relative;
  font-weight: 800;
  color: #504446;
  padding: 2rem 0.5rem;
  width: 100%;
  max-width: 590px;
  z-index: 1;
  margin: 2.5rem auto;
  align-self: center;
  border-top: solid 3px #ecede2;
  border-bottom: solid 3px #ecede2;
}

.pullquote2 blockquote {
  position: relative;
  color: #504446;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.7rem;
  margin: 0;
  border-left: none;
  border-radius: 0;
}

.pullquote2 p {
  position: relative;
  color: #2d3b45;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5rem;
  margin: 0.5rem 0rem;
  z-index: 1;
  padding-left: 2.6rem;
  text-indent: -1rem;
}

@media screen and (min-width: 540px) {
  .pullquote2 blockquote {
     font-size: 2.2rem;
     line-height: 2.6rem;
   }
  
  .pullquote2 p {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
}


/* Special-Emphasis Blocks
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Image card and text boxes -- can add two side by side per row */

.image-card-container {
  margin-right: auto;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.image-card {
    position: relative;
  flex: 88%;
  max-width: 88%;
  min-width: 0;
  padding: 1rem 0rem;
  margin: 0% 9% 0% 3%;
}

@media (min-width: 1060px) {
.image-card {
    flex: 38%;
    max-width: 38%;
    margin: 0% 6% 0% 3%;
    padding-bottom: 40px;
}
  
  .image-card:first-child {
    margin-right: 7%;
  }
}

.image-card img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
    max-width: 100% !important;
}

@media screen and (min-width: 425px) {
  .image-card img {
      height: 250px;
  }
}
  
  @media screen and (min-width: 1060px) {
  .image-card img {
      height: 313px;
}
}

.image-card-caption {
    background-color: #faf9f7;
    width: 88%;
    position: relative;
    top: -25px;
    left: calc(5% + 1px);
    border-bottom: 5px solid #edece2;
    padding: 2rem 2.2rem;
}

.image-card-caption h3 {
    font-weight: 700;
    padding-top: 0rem;
    margin-top: 0rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

  @media screen and (min-width: 1060px) {
    .image-card-caption h3 {
        padding-top: 0;
        margin-top: 0.5rem;
    }
    
    .image-card-caption {
        width: 85%;
        top: -60px;
    }
}

/* Small box for a list of resource links */

.resource-links {
    margin: 0.75rem 0rem;
    padding: 1rem 2rem 2rem 3rem;
    background-color: #edece2;
    border: 1px solid #faf9f7;
    min-width: 240px;
}

.resource-links h3 {
  color: #c41230 !important;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 700;
  padding-bottom: 0.5rem;
  letter-spacing: 0.09375rem;
}

.resource-links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0.03375rem;
}

.resource-links ul li {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.resource-links ul li a {
    text-decoration: none !important;
    color: #231f20;
}

.resource-links ul li a:hover, .resource-links ul li a:focus {
    border-bottom: 1px solid #231f20;
}

@media screen and (min-width: 900px) {
    .resource-links ul li {
      font-weight: 700;
}
}


/* Tan container with text and feature image */

.tan-box {
  background-color: #edece2;
  margin: 2rem auto;
  padding: 1rem;
}

.tan-box-inner {
    background-color: #ffffff;
    border: 3px solid #c41320;
    display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

.tan-box-text {
	flex: 100%;
	max-width: 90%;
	padding: 3% 5%;
}

.tan-box-image {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.tan-box-image img {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 470px;
    max-width: 100% !important;
    object-fit: cover;
}

@media screen and (min-width:1060px) {
  .tan-box-image {
	  flex: 50%;
	  max-width: 50%;
}
  
  .tan-box-text {
	  flex: 50%;
	  max-width: 42%;
	  padding: 3% 4%;
}
    
    .tan-box {
        margin: 3rem auto;
        padding: 4rem;
}
}


/* Side-by-side feature boxes with image backgrounds */

.feature-row {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    margin: 2rem auto;
}

.feature-box {
  position: relative;
  flex: 100%;
  width: 100%;
  min-height: 300px;
  margin: 0.5rem 0rem; 
  padding: 0;
}

.feature-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  outline: 1px solid #fff;
  outline-offset: -1rem;
}

.feature-box-content {
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 4rem;
}

.feature-box-content h2 {
  font-size: 3rem;
  line-height: 3.5rem;
  color: #ffffff !important;
  padding-bottom: 1.5rem;
}

.feature-box-content p {
  font-size: 1.1rem;
  line-height: 1.6rem;
  color: #fff !important;
  font-weight: 500;
  padding-bottom: 1.5rem;
}

@media screen and (min-width: 1060px) {
  .feature-box {
    flex: 50%;
    width: 50%;
  }
  
  .feature-box-content {
    padding: 4rem 6rem;
  }
  
  .feature-box-content p {
    padding-bottom: 3rem;
  }
}


/* Creating a section with a red campus graphic background and centered white text -- red-dot is a depreciated style updated to this newer one */

.red-dot, .red-campus-graphic {
    background-color: #fff;
    background: url(https://miamioh.edu/_hannonhill/_files/images/illustrations/illustration-duotone-red.png);
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -10px;
	margin: 3rem auto;
    padding: 3rem;
    }

.red-dot p, .red-campus-graphic p {
	font-size: 1.1rem;
	line-height: 1.6rem;
    color: #ffffff;
    font-weight: 500;
    max-width: 80ch;
    margin: 1.5em 0rem;
}

.red-dot h2, .red-campus-graphic h2 {
    font-size: 2.6rem;
    line-height: 3.1rem;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 1rem auto 0.5 auto;
    text-shadow: 0.4px 0.4px 0.8px #c41230;
    max-width: 80ch;
}

@media screen and (min-width: 800px) {
    .red-campus-graphic {
        padding: 4rem 8rem;
}
}


/* Creating a section with a gray campus graphic background */

.gray-campus-graphic {
    margin: 2rem auto;
    background: #fff url(https://miamioh.edu/_files/images/patterns/white-map-whole.png);
    padding: 2.5rem 2rem;
    background-size: cover;
    border: 4px solid #f1f1f1;
}

@media screen and (min-width: 800px) {
    .gray-campus-graphic {
        padding: 5rem 4rem;
        margin: 0 auto;
}
}


/* Creating a section with a red or tan background and a white or red Miami badge image */

.red-icon-container {
    background-color: #c41230;
    margin: 2rem -2rem;
    padding: 2rem 3rem 3.5rem 3rem;
}

.tan-icon-container {
    background-color: #edece2;
    margin: 2rem -2rem;
    padding: 2rem 3rem 3.5rem 3rem;
}

.miami-badge {
    width: 45px;
    height: 45px;
    margin-right: 1.5rem;
    margin-bottom: 0.35rem;
}

.red-icon-container h2 {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 1.6rem;
    line-height: 1.4rem;
    margin-bottom: 1.5rem;
    text-indent: -4.4rem;
    padding-left: 4.4rem;
}

.tan-icon-container h2 {
    font-weight: 500 !important;
    font-size: 1.6rem;
    line-height: 1.4rem;
    margin-bottom: 1.5rem;
    text-indent: -4.4rem;
    padding-left: 4.4rem;
}

.red-icon-container p {
    color: #ffffff;
    margin-left: 1.3rem;
    margin-bottom: -12px;
    border-left: 1px solid #ffffff;
    padding: 0.5rem 3rem 0.5rem 2.9rem;
}

.tan-icon-container p {
	margin-left: 1.3rem;
    border-left: 1px solid #c41230;
    padding: 0.5rem 3rem 0.5rem 2.9rem;
    margin-bottom: -12px;
   }


@media screen and (min-width: 800px) {
    .miami-badge {
        width: 55px;
        height: 55px;
        margin-right: 2.35rem;
}
    
.red-icon-container, .tan-icon-container {
    margin: 2rem auto;
    padding: 2rem 4rem 3.5rem 4rem;
    }
    
.red-icon-container h2, .tan-icon-container h2 {
    font-size: 2.2rem;
    line-height: 2.7rem;
}
    
.red-icon-container p, .tan-icon-container p {
    margin-left: 1.7rem;
    padding-left: 4.2rem;
    }
}


/* Creating information box for short blocks of text */

.special-info {
    background-color: #edece2;
    padding: 2rem 3rem;
	border: 8px solid #c41230;
	margin: 2rem auto;
	position: relative;
	max-width:700px;
}

.special-info h2 {
    color: #c41230 !important;
    text-align: center;
}

.special-info p {
    text-align: center;
}

@media screen and (min-width: 1060px) {
    .special-info {
        margin: 3rem auto;
        padding: 3rem 4rem;
    }
}


/* Buttons & Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* White button with red text & borders */

.white-button {
    display: inline-block;
    background-color:#ffffff;
    border: none;
    font-size: 0.9rem !important;
    font-weight: 700!important;
    color: #c41230 !important;
    outline: 2px solid #fff;
    outline-offset: 4px;
    padding: 10px 15px;
    margin: 1.5rem 0.25rem;
    text-decoration: none !important;
}

.white-button:hover, .white-button:focus {
    outline: 3px solid #A8102A;
    outline-offset: 0px;
    transition: all 0.5s;
}


/* Red button with white text & borders */

.red-button {
    display: inline-block;
    background-color:#c41230;
    border: none;
    font-size: 1rem !important;
    font-weight: 700!important;
    color: #ffffff !important;
    outline: 2px solid #c41230;
    outline-offset: 4px;
    padding: 10px 15px;
    margin: 1.5rem 0.25rem;
    text-decoration: none !important;
}

.red-button:hover, .red-button:focus {
    background-color: #A8102A;
    outline-offset: 0px;
    transition: all 0.5s;
}


/* Red, one-line links */

.assignment-link {
    color: #c41230;
    font-size: 1.1rem;
    text-decoration: none !important;
    font-weight:700;
}

.assignment-link:after {
    color: #c41230;
    content: ' \00BB';
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0 .25rem;
}

.assignment-link:hover, .assignment-link:focus { 
    margin-left: 0.5rem;
    transition: 0.2s;
    color: #AD102A;
}


/* links hidden behind blocks of content or images */

.hidden-link {
    text-decoration: none !important;
}


/* Hiding Canvas's external link icon */

.ui-icon-extlink {
    visibility: hidden !important;
    display: none !important;
}



/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Half-width floating images */

div.left-image, div.left-cap {
	float: left;
    margin-right: 2.5rem;
	margin-bottom: 1.5rem;
    width: 50%;
}

div.right-image, div.right-cap {
    float: right;
    margin-left: 2.5rem;
    margin-bottom: 1.5rem;
	width: 50%;
}

div.left-cap, div.right-cap {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    border: 1px solid #f9f8f6;
    background-color: #faf9f7;
    text-align: center;
}

div.left-image img, div.right-image img, div.left-cap img, div.right-cap img {
    width: 100%;
    max-width: 100% !important;
}

div.right-cap p, div.left-cap p {
  font-size: 0.85rem;
  margin: 0.5rem 1.25rem;
  font-weight: 300;
}

/* Half-width floating images placed in columns */

div.half div.left-cap, div.half div.right-cap, div.half div.left-image, div.half div.right-image {
    width: 100% !important;
    max-width: 100% !important;
}

div.half div.left-cap, div.half div.left-image {
    margin-right: 0.5rem;
}

div.half div.right-cap, div.half div.right-image {
    margin-left: 0.5rem;
}

div.half div.left-cap img, div.half div.right-cap img, div.half div.left-image img, div.half div.right-image img {
    width: 100% !important;
    max-width: 100% !important;
}


/* Small right-floating image */

img.right-small {
	float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
	margin-top: 0.25rem;
    padding: 0;
	max-width: 150px !important;
	min-width: 80px;
}

/* Small left-floating image */

img.left-small {
	float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
	margin-top: 0.25rem;
	max-width: 150px !important;
	min-width: 80px;
}


/* Styling images for mobile */

@media screen and (max-width: 600px){
  div.left, div.right, div.left-cap, div.right-cap {
    float: none;
    width: 96%;
    margin: 1.5rem auto;
  }
  
  img.right-small, img.left-small {
    margin-top: 0.5rem; 
  }
}


/* Images with pop-out captions -- must be full width or within a column */

figure {
  display: block;
  position: relative;
  margin: 2rem 0 3rem 0;
}

figure img {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

figcaption { 
    position: absolute;
    background: black;
    color: white;
    opacity: 0;
    bottom: 0;
    left: -20%;
 	margin: 3rem 1rem 1.5rem 1rem; 
	padding: 1rem;
	width: inherit !important;
	border-radius: 5px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

figure:hover figcaption, figure:focus figcaption {
  opacity: 0.8;
  left: 0;
}

figure:before {
    content: "?"; 
    position: absolute;
    background: rgba(255,255,255,0.75);
    color: black;
    width: 1.8rem;
    height: 1.8rem;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 15px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    bottom: 0px;
	opacity: 0.8;
 	margin: 3rem 1rem 1.25rem 1rem; 
	padding: 0.7rem;
	font-weight: 900;
}

figure:hover:before, figure:focus:before {
    opacity: 0;
}


/* Styling an image that's used as an icon next to an H2 */

.icon {
	position: relative;
	height: 26px;
	border: none;
	float: left;
	margin-right: 0.6rem;
    margin-top: 0.5rem;
	vertical-align: text-bottom;
}


/* Module Menus
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Homepage versions 1, 4 and 5 -- images that go from grayscale to full color on hover */

/* Version 1, create a row with 3 tiles */

.gallery-tile-1 {
	position: relative; 
	flex: 33.33%;
	max-width: 32.22%;
	margin: 0.5%;
}

/* Version 4, create a grid with 2 tiles */

.gallery-tile-4 {
	position: relative; 
	flex: 50%;
	max-width: 49%;
	margin: 0.5%;
}

/* Version 5, create a row with 4 tiles */

.gallery-tile-5 {
	position: relative; 
	flex: 25%;
	max-width: 24%;
	margin: 0.5%;
}


.gallery-tile-1 img, .gallery-tile-4 img, .gallery-tile-5 img {
	display: block;
	object-fit: cover;
	width: 100% !important;
	height: auto !important;
	margin:0;
	padding:0;
  	transition: transform .5s, filter 1.5s ease-in-out;
  	filter: grayscale(100%);
}

.gallery-tile-1:hover img, .gallery-tile-4:hover img, .gallery-tile-5:hover img {
  	filter: grayscale(0);
	transition: all .3s
}

.gallery-title-1, .gallery-title-4, .gallery-title-5 {
	position: absolute;
	top: auto;
    bottom: 10%;
    left: 0;
    right:0;
	background: rgba(0,0,0, 0.6);
	text-shadow: 0 0 6px rgba(0,0,0,.9);
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.gallery-title-1 h3, .gallery-title-4 h3 {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500 !important;
	font-size: 1.1rem !important;
    line-height: 1.5rem;
	text-transform: uppercase;
	color: #ffffff !important;
	text-align: center;
	margin: 0.5em 0.5em 0.3em 0.5em;
    padding-top:0.5em;
}

.gallery-title-5 h3 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500 !important;
	font-size: 0.95rem;
    line-height: 1.4rem;
	text-transform: uppercase;
	color: #ffffff !important;
	text-align: center;
	margin: 0.5em 0.5em 0.35em 0.5em;
    padding-top:0.5em;
}

.gallery-title-1 h4, .gallery-title-4 h4 {
	font-weight: 700;
    font-family: Georgia,"Times New Roman",serif !important;
	font-size: 1.6rem;
	line-height: 2rem;
	letter-spacing: 0.01rem;
	color: #ffffff !important;
	text-align: center;
	margin: 0rem 0.5rem 0.75rem 0.5rem;
    text-overflow: ellipsis;
}
.gallery-title-5 h4 {
    font-weight: 700;
    font-family: Georgia,"Times New Roman",serif !important;
	font-size: 1.4rem;
	line-height: 1.8rem;
	letter-spacing: 0.01rem;
	color: #ffffff !important;
	text-align: center;
	margin: 0rem 0.5rem 0.8rem 0.5rem;
    text-overflow: ellipsis;
}

.gallery-title-1 a, .gallery-title-4 a, .gallery-title-5 a {
	color: #fff !important;
	text-decoration: none !important;
}


/* Homepage version 2, colorblocks with left-aligned titles and separate links to module pages */

.gallery-tile-2-squares {
	position: relative; 
	flex: 33.33%;
	max-width: 32.33%;
	margin: 0.5%;
	background-color: #c41230;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image:url("https://jjkeplinger.com/wp-content/uploads/grid3.png");
	min-height: 250px;
}

.gallery-tile-2-dots {
	position: relative; 
	flex: 33.33%;
	max-width: 32.33%;
	margin: 0.5%;
	background-color: #c41230;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image:url("https://jjkeplinger.com/wp-content/uploads/dots.png");
	min-height: 250px;
}

.gallery-tile-2-lines {
	position: relative; 
	flex: 33.33%;
	max-width: 32.33%;
	margin: 0.5%;
	background-color: #c41230;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image:url("https://jjkeplinger.com/wp-content/uploads/diagonals.png");
	min-height: 250px;
}

.gallery-tile-2-lines h3, .gallery-tile-2-squares h3, .gallery-tile-2-dots h3 {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500 !important;
	font-size: 1.1rem !important;
    line-height: 1.3rem;
	text-transform: uppercase;
	color: #ffffff !important;
	text-align: left;
	margin: 2rem 1.5rem 0.5rem 1.5rem;
}

.gallery-tile-2-lines h4, .gallery-tile-2-squares h4, .gallery-tile-2-dots h4 {
	font-weight: 700 !important;
    font-family: Georgia,"Times New Roman",serif !important;
	font-size: 1.7rem !important;
	line-height: 2rem;
	letter-spacing: 0.01rem;
	color: #ffffff !important;
	text-align: left;
	margin: 0.2rem 1.5rem 1.5rem 1.5rem;
    text-overflow: ellipsis !important;
}

.module-footer {
	bottom: 0;
    line-height: 2;
    display: inline-block;
    position: absolute; 
	width: 100%;
	background-color: #A8102A;
	text-align: right;
	padding: 0.7rem 0rem;
}

.module-footer a {
	font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700 !important;
    color: #fff !important;
	text-decoration: none !important;
	font-family: "Arial", sans-serif;
	padding-right: 2rem;
}

.module-footer a:after {
	content: ' \00BB';
}

.gallery-tile-2-squares:hover, .gallery-tile-2-squares:focus, .gallery-tile-2-lines:hover, .gallery-tile-2-lines:focus, .gallery-tile-2-dots:hover, .gallery-tile-2-dots:focus {
	background-color: #A8102A;
	transition: .6s ease;
}

.module-footer a:hover, .module-footer a:focus {
	padding-right: 1rem;
	transition: .3s ease;
}


/* Resizing all module menus for mobile */

@media screen and (max-width: 1600px) {
	.gallery-tile-2-lines, .gallery-tile-2-squares, .gallery-tile-2-dots {
		flex: 50%;
		max-width: 49%;
		margin: 0.5%;
	}
}

@media screen and (max-width: 1460px) {
	.gallery-tile-1, .gallery-tile-2-lines, .gallery-tile-2-squares, .gallery-tile-2-dots {
		flex: 50%;
		max-width: 49%;
		margin: 0.5%;
	}
}

@media screen and (max-width: 1240px) {
	.gallery-tile-2-lines, .gallery-tile-2-squares, .gallery-tile-2-dots {
		min-height: 260px;
	}
}

@media screen and (max-width: 1000px) {
    
	.gallery-tile-2-lines, .gallery-tile-2-squares, .gallery-tile-2-dots, .gallery-tile-1, .gallery-tile-4 {
		flex: 100%;
		max-width: 99%;
		margin: 0.5%;
		min-height: 200px;
	}
    
    .gallery-title-1 h3, .gallery-title-4 h3 {
		text-align: left;
		font-size: 0.93rem !important;
		margin-left: 1.55rem;
		margin-right: 1rem;
		padding-bottom: 0.3rem;
	}
	
    .gallery-title-1 h4, .gallery-title-4 h4 {
		text-align: left;
		line-height: 1.2rem;
		font-size: 1.3rem;
		margin-left: 1.1rem;
		margin-right: 1rem;
	}

    .gallery-title-5 h3 {
        font-size: 0.8rem;
        line-height: 1rem;
    }
    
    .gallery-title-5 h4 {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }
}

@media screen and (max-width: 700px) {
	.gallery-tile-1, .gallery-tile-4, .gallery-tile-2-lines, .gallery-tile-2-squares, .gallery-tile-2-dots {
		flex: 100%;
		max-width: 99%;
		margin: 0.5%;
        min-height: 230px;
	}

    .gallery-tile-5 {
		flex: 50%;
		max-width: 49%;
		margin: 0.5%;
	}
}


/* Homepage headers
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Header with top menu and hero image */

.red-nav {
  display: block;
  box-sizing: border-box;
  background: #840a1c;
  float: left;
  width: 100%;
  margin: 0rem auto 3rem auto;
  border-top: 3px solid #c41230;
}

.red-nav img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.menu-container {
  margin: 0rem auto;
  padding: 0.25rem 0.5rem;
}

.menu-row {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.red-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
}

.red-nav ul li {
  display: inline-block;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.red-nav ul li a {
  margin: 0 0.25rem;
  color: #fff;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  text-decoration: none !important;
  transition: color 250ms ease, background 500ms ease;
}

.red-nav ul li a:hover, .red-nav ul li a:focus {
  background-color: #c41230;
}

.red-nav ul li a:active {
  background-color: #ffffff;
  color: #c41230;
}

@media screen and (min-width: 700px) {
    .red-nav ul li {
        font-size: 1.1rem;
}
    
    .menu-container {
  padding: 0.25rem 1.5rem;
}

    .menu-row {
  margin: 0 1.5rem;
}
}


/* Header with hero image, description and call-to-action button */

.header-hero {
    position: relative;
    margin: 0rem 0rem 3rem 0rem;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px;
}

.header-hero img {
    object-fit: cover;
    min-height: 500px;
    width: 100% !important;
	height: auto !important;
    margin: 0;
    padding: 0;
}

.hero-text {
    align-content: center;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem 3rem;
    width: inherit;
    min-width: 70%;
    max-width: 80%;
    margin: 0.5rem auto;
}

.hero-text-2, .hero-text-3 {
    align-content: left;
    position: absolute;
    left: 0;
    margin: 2rem;
    width: inherit;
    max-width: 95%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1.5rem 2.5rem;
}

.hero-text-2 {
    top: 0;
}

.hero-text-3 {
    bottom: 0;
}

.hero-text h2, .hero-text-2 h2, .hero-text-3 h2 {
  color: #ffffff !important;
  font-size: 2rem;
  line-height: 2.5rem;
}

.hero-text p, .hero-text-2 p, .hero-text-3 p {
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #ffffff !important;
  margin-bottom: 0.75rem;
}

.hero-text-2 p, .hero-text-3 p {
    text-align: left;
    margin: 1rem 0rem;
}

.hero-text h2, .hero-text p {
    text-align: center;
    margin: 1rem auto;
}

@media screen and (min-width: 1080px) {
  .hero-text h2, .hero-text-2 h2, .hero-text-3 h2 {
    font-size: 2.6rem;
    line-height: 3rem;
}
  
  .hero-text p, hero-text-2 p, .hero-text-3 p {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
  
  .hero-text, .hero-text-2, .hero-text-3 {
    width: 65%;
    padding: 2rem 3rem;
  }
    
    .hero-text {
        margin: 0;
    }
}


/* Content/module pages
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Creating sections with alternating colors */

.section-white, .section-tan {
    margin: 2rem auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 1060px) {
    .section-white {
        padding: 1.5rem 4rem;
    }
    
    .section-tan {
        padding: 3rem 4rem;
    }
}

.section-tan {
    background-color: #edece2;
    border: 2px solid #FAF9F7;
}

.section-tan > .row, .section-white > row {
    margin-left: -5px;
}

.section-white h2, .section-tan h2 {
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 2.4rem;
}

.section-white h3, .section-tan h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin: 1.5rem 0 -0.3rem 0;
}

.section-white h4, .section-tan h4 {
    font-weight: 700;
}


/* Creating sections with top-center icons - module overview page v1 */

.icon-section-tan, .icon-section-white {
  position: relative;
  border-top: 4px solid #edece2;
}

.icon-section-tan {
    background-color: #FAF9F7;
    margin: 3rem auto 6rem auto;
}

.icon-section-white {
    margin: 0rem auto 3rem auto;
    padding-bottom: 1rem;
}

img.icon-box {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  padding: 10px;
  margin: -32px auto 0 auto;
  width: 38px;
  height: 38px;
}

.icon-feature-content {
  padding: 0rem 1rem 2rem 1rem;
  margin-top: 32px;
}

.icon-feature-content h2 {
  text-align: center;
  margin: 0rem auto 1.5rem auto;
}


@media (min-width: 1060px) {
    img.icon-box {
        width: 48px;
        height: 48px;
        margin: -37px auto 0 auto;
    }
    
    .icon-feature-content {
        margin-top: 27px;
        padding: 0rem 3rem 3.5rem 3rem;
    }
}


/* Creating boxed intro section - module overview page v3 */

.tan-intro {
    background-color: #edece2;
    margin-top: 1rem;
    margin: 3rem auto 2rem auto;
    padding: 1.5rem;
}

@media screen and (min-width:1060px) {
    .tan-intro {
        padding: 1.5rem 4rem;
    }
}



/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.styled {
    overflow-x:auto;
}

.styled table {
	border-collapse: collapse;
	display: block;
    margin: 2rem auto;
}

.styled tr:nth-child(even) {
    background-color: #faf9f7;
}


.styled td {
  	text-align: left;
	vertical-align: top;
	padding: 10px !important;
	border-bottom: 0.15rem solid #edece2;
    color: #504445;
    font-family: 'Raleway', sans-serif; 
} 

.styled th {
	border-bottom: 0.15rem solid #edece2;
	padding: 10px !important;
    color: #231f20;
    vertical-align: top;
    text-align: left;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.styled th[scope=col] {
	border-bottom: 0.25rem solid #edece2;
    vertical-align: bottom;
}

.styled th:first-child,
.styled td:first-child {
  padding-left: 20px; }

.styled th:last-child,
.styled td:last-child {
  padding-right: 20px; }
	
.styled tr:last-child {
border-bottom: 0.25rem solid #edece2;
	}