/* Extra small devices (default styles, portrait phones, less than 576px) */


body { background:#f4f4f4; }

/* Modular components #################################################################### */

  /* Accordion */
  .accordion button.btn-link { color:#333; }
  .accordion button.btn-link:hover { color:#c95100; }
  .accordion button.btn {padding:0; font-size:inherit; cursor: pointer; text-align:left }

  /* Accessibility */
  a:focus { outline:6px solid #e87500; outline-offset:3px; }
  #skip-to-content a { padding:6px 12px; position:absolute; top:-40px; left:0px; color:#000; background:#5fe0b7; -webkit-transition: top 1s ease-out; transition: top 1s ease-out; z-index: 100; font-weight:bold; font-family:din-2014, sans-serif; }
   #skip-to-content a:focus { position:absolute; left:0px; top:0px; outline-color:transparent; -webkit-transition: top .1s ease-in; transition: top .1s ease-in; }

  /* Buttons & Icons */
  .btn { font-family:din-2014, sans-serif; padding: .375rem .75rem .5rem .75rem}
  .btn-green { border: 1px solid transparent !important; color:#fff !important; background: #154734; }
    .btn-green:hover { background:#333; }
  .btn-orange { border: 1px solid transparent !important; font-size: 18pt; color:#fff !important; background: #e87500; }
    .btn-orange:hover { background:#c95100; }
  .btn-outline-green { border:1px solid #154734 !important; color:#154734 !important; background: none; }
    .btn-outline-green:hover { border:1px solid #eee !important; background:#f4f4f4; }
  .btn-outline-orange { border:1px solid #e87500 !important; font-size: 18pt; color:#e87500 !important; background: none; }
    .btn-outline-orange:hover { border:1px solid #eee !important; color:#c95100 !important; background:#f4f4f4; }
  .btn-simple-icon { width:1.25em; height:1.25em; padding:.05em .05em .25em .3em; }
  .magnifying-glass { background: url(https://www.utdallas.edu/websvcs/shared/svg/magnifying-glass-orange.svg) no-repeat; border:none; float:right; height:22px; width:22px; margin:-30px 5px 20px 0; }
  .social-media-icons img { width:30px; height:30px; }
  .social-media-icons a:hover img { filter: contrast(150%); }
  
  /* Tables */
  .table-orange, .table-orange>td, .table-orange>th { background:#e87500; font-size:18pt; color:#fff; }
  .table-green, .table-green>td, .table-green>th { background:#154734; color:#fff; }
  .table-silverleaf, .table-silverleaf>td, .table-silverleaf>th { background:#5fe0b7; }
  
  /* Forms */
  input[type=text] { font-family:din-2014, sans-serif; border:1px solid #ddd !important; }
  
  /* Code Snippets */
  code { color:#154734; background:#f4f4f4; padding:1px 4px; border-radius:3px; }

/* Header & Main Menu #################################################################### */

  /* Mobile Menu */
  #mobile-menu-wrapper { background-color:rgba(0,0,0,.7); color:white; width:100%; height:100vh; position:fixed; z-index:1500; left:100%; }
  #mobile-menu-container { text-align:left; width:75%; position: absolute; right:0; background-color:#222; height: 100vh; padding:10px 20px 0 20px; }
  #mobile-menu-wrapper a { color:white; text-align:left !important; }
  #negative-area { width:25%; position:absolute; left:0; background-color: rgba(0,0,0,.1); height:100vh;}
  #negative-area img { width:60px; height:60px; float:right; padding:10px;}

  /* Green Top Bar */
  .top-bar {  font-family:din-2014, sans-serif; text-align:center; display:block; height:36px; margin:0; padding:3px 0 0 0; width:100%; 
    background: #154734;
    background: -moz-linear-gradient(top, #136d4b 1%, #154734 100%);
    background: -webkit-linear-gradient(top, #136d4b 1%, #154734 100%);
    background: linear-gradient(to bottom, #136d4b 1%, #154734 100%); }
  .utd-wordmark a, .utd-wordmark a:visited { color:#fff; font-size:19px; text-decoration:none; }
  .utd-wordmark a:hover { text-decoration:underline; }
  .utility-links { margin:70px auto 0 auto; font-size:15px; text-transform:uppercase; }
  .utility-links ul { padding:0; }
  .utility-links li { list-style: none; display:inline-block; }
  .utility-links a, .utility-links a:visited { color:#555; padding:0 5px; }
  .utility-links a:hover { color:#fff; } 
  
  /* Monogram, Site Name, Search Bar, Main Menu */
  header { font-family:din-2014, sans-serif; background:#fff; }
  header .container { height:108px; }
  header a, header a:visited { color:#555; }
  header a:hover { color:#c95100;  text-decoration:underline !important; }
  .utd-monogram { width:40px; height:40px; margin:10px 5px; display:block; float:left; }
  .site-name { display:block; }
  .site-name h2 { margin:10px 10px 40px 10px; color:#fff; font-size:1.1rem; display:block; float:left; width:180px; }
  .hamburger { width:30px; height:30px; float:right; margin:14px 0 0 0; }
  header .search-bar input[type=text] { display:block; padding:5px 10px; width:100%; }
  nav { background:#f4f4f4; text-align:center; clear:both; padding:10px 0; }
  /* Jerry-rigged styles when using the JS-dependent mobile nav */
    .utility-links, header .search-bar, nav { display:none; } /* Hide default nav elements on mobile */
    .site-name h2 { margin:10px 10px 0 10px; } /* adjust margins after hiding nav elements */
    header .container { height:66px; } /* adjust height after hiding nav elements */
  
  /* Subpage h1 & Breadcrumbs */
  .subpage-title h1, .breadcrumb { font-family:din-2014, sans-serif; }
  .subpage-title { background: url(/websvcs/templates/titan/img/ti-plaza-01.jpg) #555; color:#fff; text-shadow: 0 0 5px #000; display:block; padding:20px 0 15px 0; }
  .subpage-title h1 { font-size:2em; margin:0 16px .5rem 16px; font-weight: normal; }
  .breadcrumb { display:none; }
  
/* Main Container #################################################################### */

  .main { font-family:din-2014, sans-serif; font-size:1.15rem; }
  .main h1, .main .h1, .main h2, .main .h2, .main h3, .main .h3, .main h4, .main .h4, .main h5, .main .h5, .main h6, .main .h6, .main .lead, .breadcrumb, .submenu { font-family:din-2014, sans-serif; }
  .main h3 { font-size: 1.6rem; }
  .main h4 { font-size: 1.2rem; }
  .main .lead { color:#666; font-size: 1.3rem; }
  .main a, .main a:visited { color:#c95100; border-bottom:1px solid #ddd; }
  .main a:hover { color: #154734; text-decoration:none; border-bottom:1px solid #5fe0b7; }

  /* Styled Boxes */
  .box-light, .box-dark, .box-featured, .submenu { margin:0 0 16px 0; padding:18px; }
  .box-light, .submenu { background: #fff; }
  .box-dark p, .box-featured p, .box-dark td, .box-featured td { color:#fff; }
  .box-dark a, .box-dark a:visited { color:#fff; border-bottom:1px solid #e98300 }
  .box-dark a:hover { color:#eee; border-bottom:1px solid #fff }
  .box-dark { background:#444; color:#fff; background: linear-gradient(to bottom, #444 1%,#222 100%); }
  .box-dark .table td, .box-dark .table th { border-top:1px solid #666;}
  .box-featured a, .box-featured a:visited { color:#fff; border-bottom:1px solid #fff }
  .box-featured a:hover { color:#fff; border-bottom:1px solid #e87500 }
  .box-featured { background: #154734;  color:#fff; background: linear-gradient(45deg, #154734 0%,#136d4b 100%); }
  
  /* Sidebar Menu */
  .submenu ul {list-style: none; padding-inline-start: 0;}
  .submenu h2 a, .submenu h3 a { color: #153734 !important; border-bottom:none !important; }
  .submenu h2 a::after, .submenu h3 a::after { content: " »"; opacity: .4; } 
  .submenu h2 a:hover::after, .submenu h3 a:hover::after { color:#e87500; content: " »"; opacity: 1; } 
  .submenu li a { display:block; padding:10px 0; }
  .submenu li .nested-list { margin-left:12px; font-size:.9em; }
  
/* Footer #################################################################### */

  footer { background:#fff; padding:30px 0; border-top:3px solid #e87500; font-family:din-2014, sans-serif; }
  footer h3 { font-family:din-2014, sans-serif; }
  footer p, footer ul { font-size:1.15rem; }
  footer ul { list-style:none; padding:0 0 0 .2rem; }
  footer a, footer a:visited { color:#c95100 }
  footer a:hover { color:#c95100; text-decoration:underline; }




@media (min-width: 576px) { /* Small devices (landscape phones, 576px and up) */
  .utd-monogram { width:42px; height:42px; }
  .subpage-title h1 { margin:0 30px .5rem 30px; }
  .box-light, .box-dark, .box-featured, .submenu, .blockquote { margin:0 0 30px 0; padding:25px 30px; }
}




@media (min-width: 768px) { /* Medium devices (tablets, 768px and up) */
  #mobile-menu-wrapper { display:none; }
  .utility-links, header .search-bar, nav { display:block; }
  .top-bar, header, nav { font-family:din-2014, sans-serif; text-align:left; }
  .utility-links { float:right; width:320px; text-align: right; line-height:0; margin:-15px 0 0 0; }
  .utility-links li { list-style: none; display:inline-block; }
  .utility-links a, .utility-links a:visited { color:#fff; text-decoration: none; font-family:din-2014, sans-serif; padding:0 0 0 10px; font-size:15px; text-transform:uppercase;  line-height:2px; }
  .utility-links a:hover { text-decoration:underline; }
  .hamburger { display:none; }
  header .container { height:70px; }
  nav { padding:0; }
  .site-name h2 { font-size:1.3rem; width: 330px; margin:19px 10px 0 10px; }
  header form { float:right; }
  header .search-bar input[type=text] { width:244px; margin: 17px 0 0 0; }
  .subpage-title { padding: 24px 0; margin:0 0 10px 0; }
  .subpage-title h1 { font-size:2.5rem; }
  .breadcrumb { display: flex; background:none; margin:0; padding:0 30px 10px 30px; font-size:.9rem; }
  .breadcrumb a { color: #154734; }
  .breadcrumb-item+.breadcrumb-item::before { content: "»"; }
}




@media (min-width: 992px) { /* Large devices (desktops, 992px and up) */
  header .container { height:80px; }
  .utd-monogram { margin:16px 5px 0 0;}
  .site-name h2 { font-size:1.5rem; width: 360px; margin:23px 10px 0 10px; }
  header .search-bar input[type=text] { margin: 21px 0 0 0; }
}




@media (min-width: 1200px) { /* Extra large devices (large desktops, 1200px and up) */
  .nav-link { padding: .5rem 51px; }
}