/**
 * Theme Name: AR Judiciary
 * Author: April Davis, Website Developer
 * Description: Custom theme designed by April Davis, Website Developer
 */

/* ============================================================
	GLOBAL STYLES - MOBILE FIRST
============================================================ */
body{
    font-family: 'Nunito Sans', 'Roboto';
    font-size: 1.6em;
    color:#444444;
}
body.navbar-is-fixed-top{
    margin-top:0px;
}
h1, h2, h3, .h1, .h2, .h3 {
    font-family: 'Lora';
}
p{
    margin-bottom: 1.25em;
}
p:last-child{
    margin-bottom: 1.25em;
}
.well{
    background-color:#f8fafa;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.logo img{
  display:block;
  margin-left:auto;
  margin-right: auto;
}

.img-right {
    float: right;
    margin: 0 0 10px 10px;
}
.img-left {
    float: left;
    margin: 0 10px 10px 0;
}
p.drop-cap:first-letter {
    font-size: 4.5em;
    float: left;
    margin-top: .15em;
}
.drop-cap p:first-child:first-letter {
    color: #333333;
    float: left;
    font-family: Georgia;
    font-size: 46px;
    line-height: 25px;
    padding-left: 3px;
    padding-right: 6px;
    padding-top: 4px;
}

.file{
    margin:0;
    font-size:90%
}
.text-primary{
    color:#091379;
}
/* ============================================================
	BUTTONS
============================================================ */
.btn-primary {
    color: #304ffe;
    background-color: #D5DEFE;
    border-color: #304ffe;
  }
.btn-primary:hover, .btn-primary:active {
  /*(background-color: #2C3544;*/
  background-color: #00306d;
  border-color: #00306d;
  color:white;
}
.btn-primary:hover a{
 color:white;
}
.btn-info{
    background-color:#0277bd;
    border-color:#0277bd;
}
.btn-info:hover{
  background-color:#00306d;
  border-color:#00306d;
  color: white;
}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary{
    background-color: #091379;
    border-color:#091379;
}

.btn-info

/* ============================================================
	TABLE STYLES
============================================================ */
table {
    border: 1px solid #CCC;
    width: 100%;
}
td, th {
    padding: 4px 8px;
    vertical-align: middle;
}
tr {
    border-bottom: 1px solid #ccc;
}

thead th, th, tr.highlight td {
    background: /*#091379*/ #091379; ;
    color: #FFF;
}
table caption{
    
}
/* ============================================================
	MAIN LAYOUT
============================================================ */
.page-header {
    font-weight: 900;
}
.alert{
    margin-bottom: 0px;
}

.breadcrumb {
    background-color: #fff;
}

.search{
   padding-top:50px;
 }

.highlight{
    padding-left:20px;
    background-color:#091379;
}
.highlight h2{
    padding: 5px 0px;
    color:#f8fafa;
    text-transform:uppercase;
}
 #middle-page{
   padding-bottom:20px;
 }
 #front-page-main{
   padding-bottom: 20px;
   padding-top: 15px;
 }
 .main-container{
    clear:both;
 }

/* ============================================================
	HEADER STYLES - MOBILE FIRST
============================================================ */
/* ============================================================
	NAVIGATION - MOBILE FIRST
============================================================ */
.mm-listitem__text > .caret{
    display: none;
}
/*.mm-listitem .mm-listitem__btn {
    position: absolute;
    right: 0;
    top: 1em;
    width: 50px;
}*/
#block-header-menu-top-desktop-menu{   
 display: none;
}
.navbar-header a{
    color:white;
   }
   
#horizontal-menu li ul li a{
 color:#444444;
}
#block-headermenu{
 display: none;
}
.navbar-default{
   background-color: #091379;
   /* background-color: rgba(0,0,0,.5); */
   border-color: #091379;
   color: white;
 }
 #navbar-collapse{
   margin-left:auto;
   margin-right:auto;
 }
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li {
   color:white;
  }
 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
   color: white;
   background-color: #476EB5;
}

.horizontal-menu > li li > a {
    padding-top: .5em;

}

/*.menu--header-menu .dropdown{
    padding:10px 15px;
}*/

.navbar-default .navbar-text {
    color: #fff;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: transparent;
}

 .mm-panel .dropdown-menu {
   position: relative;
   top: 0;
   display: block;
   border: 0;
   width: 100%;
   box-shadow: 0 0 transparent;
   background: transparent;
 }
 .region-top-menu{
        display:none;
    }
  
/* ============================================================
	HERO 
============================================================ */
.hero{
    padding: 0;   
}
/* ============================================================
	QUICKLINKS 
============================================================ */


       
 #quick-links .material-symbols-rounded{
   font-size: xx-large;
   padding: 10px;
  
  }
  #quick-links a{
  text-transform: capitalize;
  display: block;
  font-weight: bold;;
  text-align: left;
  border-bottom: 3px solid transparent;
}
  #quick-links a:hover{
    border-bottom: 3px solid gold;
    text-decoration: none;
  }
/* ============================================================
	NEWS STYLES 
============================================================ */
#middle-page h2{
   /*color: #4472C4;*/
   padding-bottom: 15px;
   margin-top: 0px;
 }
 #block-views-block-news-block-1 h2:before{
  font-family: "Font Awesome 5 Free";
  content: "\f0f3";
  left: 0;
  padding-right: 15px;
 }
  #block-views-block-calendar-block-1 h2:before{
  font-family: "Font Awesome 5 Free";
  content: "\f073";
  left: 0;
  padding-right: 15px;
 }
 
 #middle-page .views-field-title a{
  font-weight:bold;
  color: black;
 }
 
 #middle-page .views-field-created{
  font-style: regular;
 }
 #middle-page .row-1, #middle-page .row-2, #middle-page .row-3, #middle-page .row-4{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
 }
 #middle-page .row-5{
    margin-bottom: 15px;
    padding-bottom: 15px;
 }
/* ============================================================
	SIDEBAR - PRIMARY 
============================================================ */
.col-sm-3:has(> .region-sidebar-first) h2{
  margin-top: 0px;
}  
@media (min-width: 1200px) {
  .col-sm-3:has(> .region-sidebar-first){
    max-width: 310px;
  }  
  .col-sm-9:has(> .region-content){
    width: calc(75% - 310px + 25%);
    padding-right: 30px;
  }
}
@media (min-width: 820px) {
  .region-sidebar-first{
    margin-top: -15px;
    margin-left: -15px;
    height: calc(100% + 15px);
    width: calc(100% + 15px);
    border: none !important;
    background-color: #FFFFFF !important;
    box-shadow: 7px 0px 6px -2px rgba(0, 0, 0, .12);
    max-width: 310px;
  }
  .row:has(> .col-sm-3){
    display: flex !important;
  }
  .col-sm-12:has(> .region-header){
    display:none;
  }
}

@media (max-width: 820px) {
  .region-sidebar-first{
    background-color: #FFFFFF !important;
    box-shadow: -0px 0px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    max-width: 300px;    
    overflow-y: scroll;
    max-height: 90vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .region-sidebar-first::-webkit-scrollbar {
    display: none;
  }
  .col-sm-3:has(> .region-sidebar-first){
    width: 300px;
    position: fixed;
    z-index: 1001;
    right: 50px;
    top: 50%;
    transform: translate(0, -50%);
  }  
  .col-sm-9:has(> .region-content){
    width: 100%;
  }
}

.region-sidebar-first .nav >li > a{
    padding:0;
    color: #444444;
}
.region-sidebar-first .nav >li{
    padding:10px;
}
.region-sidebar-first ul li ul{
    margin-left:25px;
    list-style: none;
}
/* ============================================================
	SIDEBAR - SECONDARY 
============================================================ */

/* ============================================================
  SLICK SLIDESHOW
============================================================ */
   
.slide
.slick-arrow::before {
    color: #4472c4;
    font-size:36px;
}
.slick-arrow:hover::before {
    color: #4471c4;
}
.slick-arrow::before {
    color: #ffdc47;
    font-size: 36px;
    font-size: 5rem;
}
.slick-next::before {
    content: '>';
    font-weight: bolder;
}
.slick-prev::before {
    content:'<';
    font-weight: bolder;
}

 
 /* ============================================================
  FOOTER
============================================================ */
 .footer_first{
   background-color: #091379;
   padding-top:25px;
   padding-bottom: 25px;
   
 }
 .footer_first h4, .footer_first ul li, .footer_first ul li a{
   color: white;
   list-style: none;
 }
 .footer_first ul{
    padding-left: 0px;
 }
 .footer_first h4 .fas{
    font-size: larger;
    padding-right: .25em;
 }
 
 .footer{
   background-color: #06002A;
   /* background-color: #4472c4; */
   color:white;
   margin-top:0px;
   border-top: none;
   padding-top: 10px;
   padding-bottom:0px;
 }
 .footer ul li a{
   color: white;
 }
 .footer a{
   color: white;
 }
 #block-footer span.ext{
    display: none;
 }
 #block-arjudiciary-footer{
    padding-top:15px;
    border-top: 1px solid #a4aeb9;
 }
 
.region-footer-first a, .region-footer-first a:hover{
    color:#efefef;
}

.region-footer svg.mailto{
fill: #fff; }



/********************************************************
 *SOCIAL MEDIA ICONS
 ********************************************************/
.fa-facebook-f, .fa-twitter{
  padding: 10px;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa-facebook-f:hover, .fa-twitter:hover{
    opacity: 0.7;
}

/********************************************************
 *MATERIAL UI ICONS
 ********************************************************/

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48 !important;
}

 /* ============================================================
  VIEWS
============================================================ */
.view-supreme-court-justices table>tbody>tr>td, .view-supreme-court-justices table>thead>tr>th{
    vertical-align: middle;
    text-align: center;
}

.field--name-field-supreme-court-justice-phot{
        float: left;
    padding-right: 15px;
}
.field--name-field-date-elected-or-appointed, .field-date-elected-or-appointed-, .field--name-field-date-elected-or-appointed-{
    padding-bottom: 15px;
}

 /* ============================================================
  SCREEN WIDTH 768PX OR LARGER
============================================================ */
@media (min-width: 768px) {
  /* ============================================================
  NAVIGATION
============================================================ */
 body.navbar-is-fixed-top{
    margin-top:65px;
}
#navbar{
    /*top:172px;*/
    margin-bottom: 0px;
  }
  .navbar-header{
    float:none;
  }
  .navbar .logo{
    padding-right:15px;
    padding-left:15px;
  }
  .mega-dropdown-menu a{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
  }

  #block-headermenu-2{
   /* display: none;*/
  }
  #block-header-menu-top-desktop-menu{
    display: block;
}
  .horizontal-menu, .menu--header-menu, .menu--footer, .menu--main{
    display:flex;
    /*justify-content: space-evenly;*/
  }
  #horizontal-menu .menu-item--expanded span{display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
    display: block;
    padding-top: 15px;
    padding-right: 1em;
    padding-bottom: 15px;
    padding-left: 1em;
  }
  .menu--header-menu .open>a,.menu--header-menu .open>a:focus, .menu--header-menu .open>a:hover{
    background-color:#091379;
    border-color:#091379;
}
  #block-headermenu{
    display: flex;
    float:right;
  }
  .last .dropdown-menu{
    right:0;
    left:auto;
  }
  .horizontal-menu > li{
    padding: 25px 0px !important;
    text-transform: uppercase;
  }
  
  #block-horizontalmenu{
    float:left;
  }
  .menu--header-menu{
   float:right;
   background-color: #476EB5;
  }
  .menu--header-menu .dropdown-menu{
    z-index: 1200;
  }
  
  .horizontal-menu > li > a, .menu--main > li > a {
    display: block;
    padding-top: 15px;
    padding-right: 1em;
    padding-bottom: 15px;
    padding-left: 1em;
    color: white;
    font-size: medium;
}

.horizontal-menu > li > a:hover, .horizontal-menu > li > a:focus{
    color: white;
    border-bottom:3px solid #ffdc47;
    text-decoration: none;
}
.horizontal-menu > li ul , .menu--main > li ul{
    background-color: whitesmoke;
	-webkit-box-shadow: 3px 8px 6px -6px black;
   -moz-box-shadow: 3px 8px 6px -6px black;
     box-shadow: 3px 8px 6px -6px black;
}
.horizontal-menu> li ul li{
    color:#444;
}
  /* ============================================================
  SIDEBAR PRIMARY
============================================================ */
 .region-sidebar-first h2{
    font-weight: 700;
    text-transform: uppercase;
 }
 .region-sidebar-second .menu, .region-sidebar-first .menu{
   display: block;
 }
  
  .main-container{
   min-height:345px;
  }
  .main-container.front-main{
    min-height:270px;
   }
  .menu--footer{
    justify-content:space-evenly;
  }

  .hero{
    padding: 0;
   margin-top: 0px;
  }
  
 .region-search{
    margin-top: -40px;
 }
  
  .main-container{
    margin-top: 15px;
  }
  
  .logo img{
    display:inherit;
  }

  #block-quicklinks{
    margin-top:-83px;
    background-color: rgba(221, 222, 224, 0.85);
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  
#quick-links h2{
  margin-top: 0px;
}
#quick-links a{
  height: 3.1em;
  padding-top: 10px;
  font-size: xx-large;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#quick-links span{
  margin-right: 3px;
}


#front-page-main {
   padding-top: 30px;
}


}


@media (min-width: 1200px){
.horizontal-menu > li{
        padding: 25px 8px !important;
  }
  #navbar{
    /*top:172px;*/
    margin-bottom: 0px;
    /* position: absolute; */
  }
}
.navbar-default{
  /* background-color: #091379; */
  background-color: #091379;
  /* border-color: #091379; */
  color: white;
}

.aactive{
  background-color:#304ffe24;
}

.navbar .logo{
  margin: 0 !important;
  padding: 0 0 0 5px !important;
}