/* Site CSS */
/* Site CSS */
/* Site CSS */
/* Site CSS */
 img {
     display: block;
}
 img.wrap {
     max-width: 60%;
     margin: 30px 0px;
}
 img.align-right {
     float: right;
     margin-left: 25px;
}
 img.align-left {
     float: left;
     margin-right: 30px;
}
 * {
     box-sizing: border-box;
}
 h1 {
     margin-top: 20px;
     font-weight: 300;
     font-size: 20px;
}
 h1, .h1 {
     font-size: 20px;
}
 #dictionary{
     margin-top: 50px;
     border-collapse: separate;
     border-spacing: 5px;
     width: 100%;
     height: 100px;
}
 #myInput {
     font-size: 16px;
     width: 50%;
     height: 50px;
}
 #dictionary{
     border-collapse: collapse;
     width: 100%;
     height: 100px;
     border: 1px solid #ddd;
     font-size: 16px;
     margin-top: 50px;
     border-collapse: separate;
     border-spacing: 5px;
}
 #dictionary th, #dictionary td {
     text-align: left;
     padding: 12px;
}
 #dictionary tr {
     border-bottom: 1px solid #000;
}
 #dictionary tr.header, #dictionary tr:hover {
     background-color: #ed8b00;
}
 .circle-fixed {
     position: relative;
     display: inline-block;
     width: 120px;
     height: 0;
     padding: 40px 0px;
     border-radius: 60px;
     overflow: hidden;
    /* Just making it pretty */
     @shadow: rgba(0, 0, 0, .1);
     @shadow-length: 4px;
     -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
     box-shadow: 0 @shadow-length 0 0 @shadow;
     text-shadow: 0 @shadow-length 0 @shadow;
    /*background: #c10037;
     */
     color: #fff;
     font-size: 48px;
     text-align: center;
}
 .circle-fixed a {
     color:#fff;
     text-decoration:none;
}
 .circle-fixed h4 {
     line-height:0;
     margin-top:0;
}
 .circle-fixed .fa {
     line-height:0;
     margin-top:0;
}
 .circle-text {
     display: table-cell;
     height: 170px;
    /*change this and the width for the size of your initial circle*/
     width: 170px;
     text-align: center;
     vertical-align: middle;
     border-radius: 50%;
    /*make it pretty*/
     background: #8a387c;
     color: #fff;
     font: 18px "josefin sans", arial;
    /*change this for font-size and font-family*/
}
 .circle-text a {
     color:#ba0c2f;
}
 #box {
     background-color: #dcdee2;
     width: 200px;
     height: 500px;
     border-radius: 15px;
}
 #btn-circle.btn-xl {
     width: 100px;
     height: 100px;
     padding: 10px 16px;
     font-size: 24px;
     line-height: 1.33;
     border-radius: 50px;
}
 #bythenumbers-header-new {
     background: #fff;
     background: linear-gradient(45deg, #a7a8aa 40%, #c10037 60%);
     background-color: transparent;
     background-image: linear-gradient(45deg, rgb(255, 255, 255) 70%, rgb(193, 0, 55) 30%);
     background-repeat: repeat;
     background-attachment: scroll;
     background-clip: border-box;
     background-origin: padding-box;
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto auto;
}
 #bythenumbers-header-new2 {
     background: #fff;
     background: linear-gradient(45deg, #a7a8aa 50%, #c10037 50%);
     background-color: transparent;
     background-image: linear-gradient(45deg, rgb(255, 255, 255) 30%, rgb(193, 0, 55) 70%);
     background-repeat: repeat;
     background-attachment: scroll;
     background-clip: border-box;
     background-origin: padding-box;
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto auto;
}
 #bythenumbers-header2 {
     background: linear-gradient(90deg, #fff 50%, #ba0c2f 50%);
     background-color: transparent;
     background-image: linear-gradient(315deg, rgb(255, 255, 255) 50%, rgb(193, 0, 55) 50%);
     background-repeat: repeat;
     background-attachment: scroll;
     background-clip: border-box;
     background-origin: padding-box;
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto auto;
}
 .triangle {
     height: 0;
     width: 0;
     border-left: 40px solid transparent;
     border-right: 40px solid transparent;
     border-bottom: 0px solid transparent;
     border-top: 40px solid #a7a8aa;
}
 .triangle2 {
     height: 0;
     width: 0;
     border-left: 40px solid transparent;
     border-right: 40px solid transparent;
     border-bottom: 40px solid #a7a8aa;
     border-top: 0px solid transparent;
}
 .triangle3 {
     height: 0;
     width: 0;
     border-left: 40px solid transparent;
     border-right: 40px solid transparent;
     border-bottom: 0px solid transparent;
     border-top: 40px solid #ba0c2f;
}
/* Homepage Feature Carousel */
 #home .carousel-caption {
     position: absolute;
     bottom: 50px;
     left:auto;
     right:80px;
     text-align:left;
     z-index: 10;
     color: #ffffff;
     background-color: #c10037;
     background-color: rgba(193,0,55,.85);
     border: 2px solid #fff;
     padding: 20px;
     max-width: 50%;
}
 #home .item {
     max-height: 600px;
}
 @media (min-width:1600px) {
     #home .item {
         max-height: 800px;
    }
}
 @media (max-width: 992px) {
     #home .item {
         max-height: 700px;
    }
     #home .carousel-caption {
         -moz-border-bottom-colors: none;
         -moz-border-left-colors: none;
         -moz-border-right-colors: none;
         -moz-border-top-colors: none;
         background-color: #c10037;
         border-color: -moz-use-text-color -moz-use-text-color #fff;
         border-image: none;
         border-style: none none solid;
         border-width: 0 0 2px;
         bottom: 0;
         min-height: 20px;
         left: 0;
         max-width: 100%;
         position: relative;
         right: 0;
         top: 0px;
         width: 100%;
    }
     #homepage-carousel .carousel-control .fa {
         left: 25%;
         position: absolute;
         right: 25%;
         top: 30%;
    }
}
 @media (max-width: 768px) {
     #home .carousel-caption {
         min-height: 20px;
    }
     #home .carousel-caption h1 {
         font-size: 18px;
    }
     #home .bythenumbers-header-new {
         background: #fff;
         background: linear-gradient(45deg, #a7a8aa 40%, #c10037 60%);
         background-color: transparent;
         background-image: linear-gradient(45deg, rgb(255, 255, 255) 100%, rgb(193, 0, 55) 0%);
         background-repeat: repeat;
         background-attachment: scroll;
         background-clip: border-box;
         background-origin: padding-box;
         background-position-x: 0%;
         background-position-y: 0%;
         background-size: auto auto;
    }
}
 @media (max-width:380px) {
     .navbar-unm .navbar-brand {
         max-width:100%;
         left:0;
    }
}
 #newsslider {
     background: #c10037;
     background: linear-gradient(90deg, #c10037 50%, #fff 50%);
}
 #newsslider h2 {
     margin: 0;
     padding: 10px 0;
     color: #fff;
     z-index: 0;
     position: relative;
     width: 100%;
}
 #newsslider h2:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(45deg,#c10037 60%,#ffffff 60%);
     z-index: -1;
}
 #newsslider .row.multicarousel {
     border-top: 3px solid #c10037;
}
 #bythenumbers-header {
     background: #fff;
     background: linear-gradient(90deg, #fff 50%, #c10037 50%);
}
 #bythenumbers-header h3 {
     margin: 0;
     padding: 10px 0;
     color: initial;
     z-index: 0;
     position: relative;
     width: 100%;
}
 #bythenumbers-header h3:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(45deg,#fff 85%,#c10037 85%);
     z-index: -1;
}
 #octagon {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
}
 #octagon:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     border-bottom: 29px solid red;
     border-left: 29px solid #eee;
     border-right: 29px solid #eee;
     width: 42px;
     height: 0;
}
 #octagon:after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     border-top: 29px solid red;
     border-left: 29px solid #eee;
     border-right: 29px solid #eee;
     width: 42px;
     height: 0;
}
/* end homepage carousel */
 div.polaroid {
     width: 100%;
     background-color: red;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 div.container2 {
     text-align: center;
     padding: 10px 20px;
}
 #nav {
     background-color: #f2f2f2;
     font-family: "Vitesse Light","Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 19px;
     line-height: 1.5;
     color: #222;
}
 .bound {
     overflow: hidden;
     padding: 50px;
     background-color: #007a86;
}
 #header {
     padding: 30px 0 0px 0px;
    /*position: absolute;
    */
     width: 100%;
     background-color: rgba(255,255,255,0.5);
     z-index: 50;
}
 #hero-people {
     background: silver url(../img/banner30.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-research {
     background: silver url(../img/banner31.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-training {
     background: silver url(../img/banner32.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-tools {
     background: silver url(../img/banner33.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-facilities {
     background: silver url(../img/banner40.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-help {
     background: silver url(../img/banner34.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-participate {
     background: silver url(../img/banner35.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-services {
     background: silver url(../img/banner37.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-news {
     background: silver url(../img/banner38.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 #hero-events {
     background: silver url(../img/banner39.jpg) center center no-repeat;
     background-size: cover;
     height: 295px;
}
 .button {
     background-color: #000000;
     border: none;
     border-radius: 12px;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
}
 .timer {
     display: inline-block;
     padding: 10px;
     background-color: #333;
     color: #fff;
     border-radius: 5px;
     margin: 0 10px;
}
 .timer-label {
     font-size: 14px;
     margin-bottom: 5px;
}
 @media (max-width: 600px) {
     #header h1 {
         margin-top: 0px;
         font-size: 22px;
    }
     #header {
         padding-top: 10px;
    }
}
 div.row.splash {
     width: 100%;
     height: auto;
     transform: rotate(-2deg);
     margin-left: 0px;
     margin-right: 0px;
     border-radius: 12px;
}
 div.row.splash.alt {
     transform: rotate(2deg);
     margin-top: 50px;
     margin-bottom: 50px;
     background-color: #efefef;
}
 div.row.splash.alt2 {
     transform: rotate(-2deg);
     margin-top: 50px;
     margin-bottom: 50px;
     background-color: #007a86;
}
 div.row.splash.alt3 {
     transform: rotate(-2deg);
     margin-top: 50px;
     margin-bottom: 50px;
     background-color: #d6a461;
}
 div.row.splash.unm-mesa a {
     color: #222;
}
 div.splash-body {
     padding: 15px 30px;
}
 div.splash-img {
     text-align: center;
}
 div.row.splash .col-sm-12 {
     margin-bottom: 20px;
}
 div.row.splash.splash-color {
}
 div.row.splash.splash-color a {
     color: #fff;
     text-decoration: underline;
}
 div.row.splash.unm-mesa a {
     color: #222;
}
 .faculty-row {
     display: flex;
     flex-wrap: wrap;
}
 .faculty-row > [class*="col-"] {
     display: flex;
     margin-bottom: 20px;
}
 .faculty-card {
     display: flex;
     flex-direction: column;
     width: 100%;
}
 .faculty-card h4 {
     margin-bottom: 4px;
}
 .faculty-title {
     flex: 1 0 auto;
     margin-bottom: 10px;
}
 .faculty-email {
     margin-top: auto;
     margin-bottom: 10px;
}
 .faculty-divider {
     background: #c10037;
     height: 3px;
     margin: 10px 0 0 0;
}
 .directory .row {
     display: flex;
     flex-wrap: wrap;
}
 .directory .row > [class*="col-"] {
     display: flex;
     margin-bottom: 20px;
}
 .directory-card {
     display: flex;
     flex-direction: column;
     width: 100%;
}
 .directory-card h4 {
     margin-bottom: 4px;
}
 .directory-card .directory-email {
     flex: 1 0 auto;
     margin-bottom: 6px;
}
 .directory-card .directory-divider {
     background: #c10037;
     height: 2px;
     margin: 6px 0 0;
}

/*Callout Cards*/
 .callout {
     display: block;
     padding: 10px 20px;
     margin-bottom: 15px;
     position: relative;
     height: 133px;
     padding-top: 35px;
}
 .callout-section-bg {
     background-color: #f5f5f5;
     width: 100%;
     padding-top: 40px;
     padding-bottom: 30px;
     padding-right: 0px;
     padding-left: 0px;
}
 .callout:hover {
     cursor: pointer;
}
 .callout h3, .callout p {
     margin: 0;
}
 .callout a {
     color: #fff !important;
     text-decoration: none;
}
 .callout a:hover {
     text-decoration: underline !important;
}
 .textshadow {
     text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
 .unm-terra {
     background-color: #B84E35;
}
 .unm-greenchile {
     background-color: #A6B300;
}
 .unm-turquoise {
     background-color: #007D8A;
}
 .unm-deepdusk {
     background-color: #7A2E76;
}
 .unm-cherry {
     background-color: #ba0c2f;
}
 .unm-lobogray{
     background-color: #63666a;
}
 .unm-sandia{
     background-color: #ed8b00;
}

 .unm-cherry .textshadow {
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
 .unm-turquoise .textshadow {
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
 .callout::after {
     position: absolute;
     font-family: FontAwesome;
     opacity: .1;
     font-size: 250px;
     bottom: 0;
     right: 20px;
     line-height: 270px;
}
 .lgc-card1::after {
     content: "\f0e3";
    /* user */
}
 .lgc-card2::after {
     content: "\f1da";
    /* users */
}
/*Callout Cards End*/

 .ovpr-news-header {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     gap: 16px;
     border-bottom: 1px solid #010101;
}
 .ovpr-news-header h2 {
     margin: 0;
     padding-bottom: 8px;
     text-align: left;
     font-size: clamp(24px, 3.2vw, 32px);
     line-height: 1.15;
}
 .ovpr-news-header .ovpr-news-more, .ovpr-news-header .ovpr-news-more:link, .ovpr-news-header .ovpr-news-more:visited {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     background: #ba0c2f;
     color: #ffffff;
     font-family: "Vitesse", "Gotham", "Gotham SSm", Arial, sans-serif;
     font-size: clamp(14px, 1.8vw, 18px);
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     white-space: nowrap;
     padding: 15px 45px 15px 170px;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%);
}
 .ovpr-news-header .ovpr-news-more:hover, .ovpr-news-header .ovpr-news-more:focus {
     background: #8f1b2d;
     color: #ffffff;
}
 @media (max-width: 480px) {
     .ovpr-news-header .ovpr-news-more {
         padding: 0 14px 0 44px;
         clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%);
    }
}