html {
  scroll-behavior: smooth;
}

:root {
  --skyBlue: #69B3E7; /* #56b8e7 */
  --litestGray: #f3f3f1;
  --liteGray: #E1E0DC;
  --mediumGray: #AEB2B4;
  --darkGray: #78808B;
  --brandBlue: #587ABC;
  --brandGreen: #A6BE4B;
  --brandYellow: #FFCC4E;
  --brandRed: #F05B72;
  --brandFireRed: #D12D33;
  --brandDarkRed: #9F2842;
  --brandOlive: #7A8C37;
  --brandDarkBlue: #293A5E;
  --brandPurple: #AF76B2;
  
}


body{ font-family: AvertaPE-Regular; }


.sky-blue-bg
{
 background-color: var(--skyBlue);
}

.sky-blue
{
 color: var(--skyBlue);
}

.lite-gray-bg
{
 background-color: var(--liteGray);
}

.medium-gray-bg
{
 background-color: var(--mediumGray);
}

.medium-gray-border
{
 border: 2px solid var(--darkGray);
}

.dark-gray-bg
{
 background-color: var(--darkGray);
}

.dark-gray-border
{
 border: 2px solid var(--darkGray);
}

.dark-gray
{
 color: var(--darkGray);
}

.brand-red
{
 color: #F05B72;
}

.brand-red-bg
{
 background-color: #F05B72;
}

.brand-purple-bg
{
 background-color: var(--brandPurple);
}

.brand-purple
{
 color: var(--brandPurple);
}

.brand-blue-bg
{
 background-color: var(--brandBlue);
}

.brand-blue
{
 color: var(--brandBlue);
}

.brand-green
{
 color: var(--brandGreen);
}

.brand-green-bg
{
 background-color: var(--brandGreen);
}

.brand-yellow-bg
{
 background-color: var(--brandYellow);
}

.brand-yellow
{
 color: var(--brandYellow);
}

.brand-fire-red
{
 color: var(--brandFireRed);
}

.brand-fire-red-bg
{
 background-color: var(--brandFireRed);
}

.brand-olive
{
 color: var(--brandOlive);
}

.brand-olive-bg
{
 background-color: var(--brandOlive);
}

.brand-dark-blue
{
 color: var(--brandDarkBlue);
}

.brand-dark-blue-bg
{
 background-color: var(--brandDarkBlue);
}



h1,h2,h3,h4, fibra-one
{ 
  font-family: FibraOne-Regular; 
  font-weight: normal; 
  font-style: normal; 
}

h1
{
 text-transform: uppercase;
 font-size: 2.25rem;
 margin-bottom: 2rem;
 text-align: center;
}

h2
{
 
 margin-bottom: 1.5rem !important;
 margin-top: 3.0rem !important;
 
}



h2.averta
{
  margin-bottom: 1.0rem !important;
}

h3
{
 margin-bottom: 1rem ;
 margin-top: 1.25rem ;
}

h3.averta
{
  text-transform: none;
}

.text-list-item h3
{
 margin-bottom: 4rem;
}

h4
{
 margin-bottom: 1rem;
 margin-top: 1rem;
}

.text-list-item h4
{
 margin-top: 2rem;
}

.field-value
{
 font-weight: bold;
 font-size: 130%;
 color: var(--darkGray);
 
}

.text-list-item
{
 margin-top: 2.5rem;
 margin-left: 1rem !important;
 
}

ul {list-style-type: circle;}


.grades
{
 font-style:italic;
 padding-bottom: 15px;
}

.text-transform-none
{
 text-transform: none;
}

/* LINKS */

a
{
 text-decoration: none;
 color: #000000;
 border-bottom: 2px solid var(--skyBlue);
 
}

a:hover

{
 text-decoration: none;
 color: #000000;

}

a.h2
{
 font-size: 2rem;
 
} 

.card-facet a, .breadcrumb-item a, .chevron-link a
{
 background: none;
 border-bottom: none;
 display: inline-block;
}

.card-facet a::after,  .chevron-list-item li a::after, .breadcrumb-item a::after, .chevron-link a::after
{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--skyBlue);
    transition: width .3s;
}

.card-facet a:hover::after, .chevron-list-item li a:hover::after, .breadcrumb-item a:hover::after, .chevron-link a:hover::after
{
    width: 100%;
    //transition: width .3s;
}

.chevron-list-item li a
{
 background: none;
 display: inline-block;
 padding-top: 4px;
 margin-left: 15px;
 border-bottom: none;
}


.link-box:hover
{
 background-color: yellow;
}


/* https://css-tricks.com/having-fun-with-link-hover-effects/ */

p a
{
 background:
     linear-gradient(
       to bottom, var(--skyBlue) 0%,
       var(--skyBlue) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 2px 2px;

  border-bottom: none; 
 color: #000000;
 padding-bottom: 2px; 
 transition: background-size .5s;
}

p a:hover

{
 text-decoration: none;

  color: #000000;
 background-size: 4px 1.5rem;
}




/* END LINKs */




.badge
{
 border-radius: 0px;
}



.lead
{
 font-family: AvertaPE-Light;
 font-weight: normal; 
 font-style: normal; 

}

.averta-light
{

 font-family: AvertaPE-Light;
 font-weight: normal; 
 font-style: normal; 


}



.blockquote
{
 border-top: 7px solid var(--skyBlue);
 
 
}

hr{
    border-color: var(--mediumGray);
    margin-top: 2rem;
}

#rothko /* separator */
{
 margin-bottom: 4rem;
}

hr.dashed
{
 border-top: 1px dotted var(--liteGray);
}

.averta{
 font-family: AvertaPE-Regular;
}


.form-control
{
 border-radius: 0px;
 
 border: 1px solid  var(--darkGray);
}


.alertbox
{
background-color: #E1E0DC;
padding: 3rem!important;
margin-bottom: 3rem!important;
}

/* Main Menu */

.navbar
{
 padding-left: 0px;
 
 
 padding-left:0px;
 padding-right:0px;

 
}

#main-nav
{
 
 border-bottom: 1px solid var(--mediumGray); 
 margin-bottom: 1rem;
 background-color: #ffffff;
}

.navbar-light .navbar-brand
{
 border: 0px; 
 color: var(--skyBlue);
 padding: 0px;
}

.dropdown-menu.active-dd  
{
  
}

.dropdown-menu
{
   -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 0px;
    margin-top:-2px;
    border-top: 1px solid var(--mediumGray);
    background-color: var(--litestGray);
}

a.dropdown-item.active {
  color: black;
  background-color: transparent;
  background-image: url('https://upmaa-pennmuseum.netdna-ssl.com/img/brand/svg/chevron-right1.svg');
  background-position: 10px 8px;
  background-repeat: no-repeat;
}

.dropdown-item:hover
{
 background-color: var(--liteGray);
}

.dropdown-divider {
    border-top: 1px solid var(--mediumGray);
}

.navbar-light .navbar-toggler
{
 color: #000000;
 border: 0px;
 border-radius: 0px;
 outline: 0;
}

.navbar-toggler::before {
  content:"MENU";
  position: absolute;
  
  left: -50px;
  display: flex;
  align-items: center;
  top:0;
  height: 100%;
}

    .navbar-toggler span {
   display: block;
   background-color: var(--skyBlue);
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}


.navbar-light .navbar-nav .nav-link 
{
 color: var(--darkGray);
 font-size: 110%;
 border-bottom: none;
 background: none;
}

.nav-link:hover
{
 background-color: #ffffff;
}


a.dropdown-item
{
 font-size: 115%;
 background: none;
}

#main-nav li.active a.nav-link
{
 border-bottom: 2px solid var(--skyBlue);
}

/* END MAIN MENU */


.table
{
 color: #000000;
margin-bottom: 1.5rem !important;
 margin-top: 1.5rem !important;
}

.table td, .table th
{
 border-top: 1px solid #000;
}

.table-compare td
{
 padding: 1.5rem;
 vertical-align: middle !important;
 
}

.table td
{
 padding: 1rem;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 3px solid #000;
    border-top: 0px;
    
    }
    
    thead {
    color: #000;
    font-weight: bold;
    
    
    }
    
    thead th{
     border: none;
    }
    
    .table-hover> tbody> tr:hover{
    background-color:var(--liteGray);
}

th{
 font-size: 115%;
 font-family: FibraOne-Regular; 
}

.no-lines td, .no-lines th
{
 border-top:0px;
}


.horizontal-table th
{
 vertical-align: middle !important;
}

/* END TABLES */


.btn
{
 border-radius: 0px;
 background:none;
}

.btn-primary
{
 color: #000000;
 background:none;
 background-color: var(--skyBlue);
 border-color: var(--skyBlue);
}

.btn-primary:hover
{
 background-color: #000000;
 border-color: #000000;
}

.btn-outline-dark
{
 background-color: var(--liteGray);
 border: none;
}

/* END BUTTONS */

#main-breadcrumb
{
 margin-bottom: 2rem;
 padding-left: .5rem;
}

.breadcrumb
{
 background-color: #ffffff;
 border-radius: 0px;
 padding-left: 0px;
}


.website-footer
{
 background-color: #ffffff;
 color: #000000;
}


.dropdown-toggle::after 
{
    display:none;
}



/*

.navbar-light .navbar-toggler-icon
{
 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(86, 184, 231, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

*/


#search
{
 width: 100%;
 border: 1px solid var(--mediumGray);
 

}

.event-button
{
 text-align: left;
}



.card
{
 border: 1px solid var(--liteGray);
 border-radius: 0px;
 margin-bottom: 1.5rem;
}

.card-header
{
 background-color: var(--liteGray);
}

.card-header:first-child{
 border-radius: 0px;
}

.btn-link
{
 color: #ffffff;
}





/* https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border 
 Facet links and Chevron Links used generally with the above .cool-link

*/





.chevron-list-item
{
  padding-left: 0rem;
  list-style-type: none;
}

.chevron-list-item li
{
  margin-bottom:.75rem;
  background-image: url('https://www.penn.museum/img/brand/svg/chevron-right1.svg');
  background-position: 0px;
  background-repeat: no-repeat;
  padding-left: 30px;
  line-height: 30px;
}

.search-icon
{
  background-image: url('https://www.penn.museum/img/brand/svg/search.svg');
  width: 24px;
  height: 24px;
  color: var(--mediumGray);
}



.bottom
{
 bottom: 0;
}

.cta
{

 margin-top: 3rem;
 margin-bottom: 3rem;
 text-align: center;

}

.full
{
 margin-bottom: 3rem;
}

.btn-secondary
{
 
 text-transform: uppercase;
 
 background-color: #f2f1eb;
 border: none;
 color: var(--darkGray);
 
}


.highlight
{
     position: relative;
     overflow: hidden;
     
     
     
}

.highlight::before,
.highlight::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.highlight::after {
    
    border-width: 4rem;
    border-right-color: var(--skyBlue);
    border-top-color: var(--skyBlue)
}

.dark
{
 background-color: #000000;
     color: #ffffff;
}

  .triangle-left {
  
  background-image: url('/img/brand/triange/triangle-top-left.svg');
  background-size: contain;
  min-height: 555px;
   background-repeat: no-repeat;

}

  .triangle-left-sm {
  
  background-image: url('/img/brand/triange/triangle-top-left.svg');
  background-size: contain;
  min-height: 30px;
   background-repeat: no-repeat;

}
  
  
    .triangle-right {
  
  background-image: url('/img/brand/triange/triangle-top-right.svg');
   background-size: 20%; 
  min-height: 150px;
   background-repeat: no-repeat;
   background-position: right top;
   position: relative;

}


summary::marker 
{
 /* list-style-image: url('https://www.penn.museum/img/brand/svg/chevron-right1.svg');*/
 color: var(--skyBlue);
}


#main-content ul li
{
 padding: .5rem  ;
}

ul.chevron-list-item li
{
 padding: 0px !important;
}

/* pagination */

ul.pagination li
{
 padding: 0px !important;
}



dd
{
 margin-left: 1rem;
 margin-top: 1rem;
 
}

dt
{
 margin-bottom: 1rem;
 margin-top: 1rem;
 font-size: 1.5rem;
 font-family: FibraOne-Regular; 
  font-weight: normal; 
 
}

dd .btn
{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* collections */

.extra_facet{
 display: none;
}

.toggle_me, .more_info, .toggle_map{
 cursor: pointer;
 
}

.facet_header{
 font-weight: bold;
 
}

/* Popover */
.popover {
   
}

/* Popover Header */
.popover-title {
    background-color: #d2CBBf;
    color:  #ed5100;
    font-size: 14px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: #f2f1e6;
    color: #000000;
    
}

/* End COLLECTIONS */



.figcaption{
 font-style: italic;
 color: var(--darkGray);
}


/* added to provide backwards compatibility for bootstrap 3 code */
.img-responsive { 
    max-width: 100%;
    height: auto;
}

.half-size-right
{
  width: 50%;
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}



.no-decoration 
{
 background: none;
 border-bottom: none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--darkGray);
    background-color: #fff;
    border-color: var(--liteGray) var(--liteGray) #fff; 
    
}

.nav-tabs {
    border-bottom: 1px solid var(--liteGray);
}

.page-link
{

 color: var(--brandBlue);
}

a.page-link:hover
{

 background-color: var(--liteGray);
}

a.page-link:active 
{
  color: var(--skyBlue);
}



.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--brandBlue);
    border-color: var(--brandBlue);
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(86, 184, 231, 0.5);
  background-color: var(--skyBlue);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
 
  background-color: var(--brandBlue);
 
}

.article-subheading
{
 margin-top: -1.25rem;
}

.contact
{
 text-align: center;
 margin-top: 3rem;
 margin-bottom: 3rem;
 
}

.contact h5
{
 font-family: AvertaPE-Regular;
}

.contact-email, .contact-phone
{
 font-family: AvertaPE-Light;
 margin-bottom: 1rem;
 font-size: 125%
}

section
  {
   
    margin-bottom: 3rem;
  
  }


  .half-full
  {
   width: 100%;
   margin-left: auto;
  margin-right: auto;
  }



/* Small Devices, Tablets */
@media only screen and (max-width : 768px)
{
   .half-size-right
  {
    width: 100%;
    margin-left: 0px;
  }
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) 
{ 
  /* Main Menu */
  
  .dropdown-menu  
  {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      border: 0px;
      
     
      background-color: var(--litestGray);
      margin-top:8px;
  }
  
  .dropdown-menu.active-dd
  {
       border-top: 1px solid var(--mediumGray);
  }
  
  #search
  {
    
    
  }
  
  .event-button
  {
   text-align: right;
  }
  
  .half-full
  {
   width: 50%;
  }
  
  section
  {
    margin-left:3rem;
    margin-right: 3rem;
  
  
  }
  
}