.resource-library h2{font-size:2em; margin:10px 0 10px 0;}

.resource-library .left-sidebar{
    width:20%;
    float:left;
    margin-right:2%;
    display:block;
    margin-top:35px;
}
    @media screen and (max-width:900px) {
        .resource-library .left-sidebar{
        margin-top:auto;
        }
    }
    @media screen and (max-width:800px) {
        .resource-library .left-sidebar{
        
        }
    }
.resource-library .left-sidebar .dropdown{
    width:100%;
}
.resource-library select{
       -webkit-appearance: menulist !important;
}
.resource-library .right-content{
    width:78%;
    float:left;

}
.resource-library .right-content .content-item{
    border:1px solid #aaa;
    width:100%;
    border-radius:4px;
    margin:0 0px 20px 10px;
    padding: 8px;
    font-size:.9em;
    /*height:300px;*/
    float:left;
    text-align:left;
}
@media screen and (max-width: 1000px) {
        .resource-library .right-content .content-item{
            /*width:48%;
            margin:0 0px 20px 10px;
            overflow:scroll;*/
        }
    }
@media screen and (max-width: 700px) {
        .resource-library .right-content .content-item{
            /*width:100%;
            margin:10px auto;
            height:unset;*/
        }
    }
.resource-library .right-content .content-item:hover, .resource-library .right-content .content-item:focus{
    background-color:#e9e9e9;
}
.resource-library .right-content .content-item h3{
    font-size:1.15em !important; 
    margin:0 !important; 
    border-bottom:unset;
    font-weight:bold;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.resource-library .right-content .content-item .content-img{
    float:left;
    display: inline-block;
    width:20%;
    text-align:center;
    margin:1%;
}
@media screen and (max-width: 700px) {
    .resource-library .right-content .content-item .content-img {
        
    }
}
.resource-library .right-content .content-item .content-img img{
    margin:0 auto;
    max-height:150px;
    text-align:center;
}
.resource-library .right-content .content-item .content-text{
    margin:1%;
    float:none;
    display:inline-block;
    width:76%;
}
@media screen and (max-width: 700px) {
    .resource-library .right-content .content-item .content-text{

}
}
.resource-library .right-content .content-item .small-text, .resource-library .small-text{
    color:#595959 !important;
    font-size:.8em;
    border-top:1px solid #cecece;
    padding-top:5px;
    margin-top:5px;
}
.res-shareable-link{
    font-size:.9em;
    word-wrap:break-word;
    text-transform:uppercase;
    margin-top:15px;
}
/* OLD LAYOUT
    Teaching Resources TR

If you make a change here, also make the same change on screen.css so that we can eventually remove this stylesheet
2/3/2020

 */

@media (min-width: 620px) {
    .tr main {
        column-count: 2;
        column-gap: 8px;
    }

    .tr section {
        break-inside: avoid;
    }
}

@media (min-width: 960px) {
    .tr main {
        column-count: 3;
        column-gap: 8px;
    }
}

.tr-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

.tr-section {
    border: 1px solid #eda739;
    margin-bottom: 0px 5px 10px 0px;
    overflow: hidden;
    min-height: 480px;
    display: inline-block;
    width: 100%;
}

    .tr-section p {
        margin-bottom: 1em;
        font-size: 1em;
        padding: 0 10px;
    }

    .tr-section .tr-wistia {
        margin: 0px !important;
        display: block;
        max-width: 100%-20px;
    }

    .tr-section .tr-bigtop-link {
        background-color: #20282F;
        color: white;
        font-weight: bold;
        padding: 8px;
        display: block;
        /*text-decoration: none;*/
        display: block;
        min-height: 68px;
    }

.tr-section-img {
    display: block;
    padding: 8px;
    margin: 0 auto;
    max-height: 230px;
}

.tr-section-small-img {
    display: inline;
    padding: 6px;
    float: left;
}

.tr-icon {
    margin-right: 10px;
    float: left;
}

.tr-info-link {
    /*text-decoration: none;*/
    padding: 4px 10px;
    display: block;
    color: #e74c3c;
    margin: 0px;
}
.center-it, .centerit{
    text-align:center;
    margin: 0 auto;
}
/*---------------Teaching Resources---------------*/
.tr .three-columns{
    display:inline-block;
    width:32%;
    margin:0 0px 20px 10px;
    border:1px solid #145992;
    text-align:center;
    color:#ffffff;
}
@media screen and (max-width: 1000px) {
        .tr .three-columns{
            width:48%;
            margin:0 0px 20px 10px;
        }
    }
@media screen and (max-width: 700px) {
        .tr .three-columns{
            width:100%;
            margin:10px auto;
        }
    }
 .tr .column-wrapper{
    margin:0 auto;
    text-align:center;
    width:100%;
}
.tr .secondary-nav img {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    width:100%;
}
.tr .secondary-nav {
    position:relative;
}
.tr .secondary-nav img:hover, .tr .secondary-nav img:focus {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.tr .secondary-nav-label {
    padding: 10px;
    font-size: 1.25em;
    font-weight:700;
    color: #145992;
    background-color:#fff;
    text-decoration:none;
    margin-top:-6px;
}
.tr a:hover, .tr a:focus, .tr .secondary-nav-label:hover, .tr .secondary-nav-label:focus{
        text-decoration:underline;
        outline: 1px dotted #2c5999;
        outline-offset:-5px;
}
.tr-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}
h2.tr-main-h2 {
    margin:0;
}
.tr-section {
  border:1px solid #145992;
  margin-bottom: 0px 5px 10px 0px;
  overflow: hidden;
  min-height:480px;
  display:inline-block;
  width:100%;
}

.tr-section p {
  margin-bottom: 1em;
  font-size: 1em;
  padding: 0 10px;
}

.tr-section .tr-wistia {
  margin:0px !important;
  display:block;
  max-width: 100%-20px;
}

.tr-section .tr-bigtop-link {
  background-color:#e9e9e9;
  color: #145992;
  font-weight:bold;
  text-decoration: none;
  padding: 8px;
  display: block;
  text-decoration: none;
  display: block;
  min-height:68px;
}

.tr-section-img {
  display: block;
  padding: 8px;
  margin: 0 auto;
  max-height: 230px;
}

.tr-section-small-img {
  display: inline;
  padding: 6px;
  float:left;
}

.tr-icon{
    margin-right:10px;
    float:left;
    border:solid 1px #145992;
}

.tr-info-link {
  text-decoration: none;
  padding: 4px 10px;
  display: block;
  color: #e74c3c;
  margin:0px;
}
@media (min-width: 620px) {
.tr-main {
    column-count: 2;
    column-gap: 8px;
  }

.tr-section {
    break-inside: avoid;
  }
}

@media (min-width: 960px) {
.tr-main {
     column-count: 3;
    column-gap: 8px;
  }
}
/*-----------End Teaching Resources------------*/