/* 
 * Deprecated DNN CSS class names will remain available for some time
 * before being  permanently removed. Removal will occur according to
 * the  following process:
 *
 * 1. Removal will only occur with a major (x.y) release, never
 *    with a maintenance (x.y.z) release.
 * 2. Removal will not occur less than six months after the release
 *    when it was deprecated.
 * 3. Removal will not occur until after deprecation has been noted 
 *    in at least two major releases.
 *
 *                                              |        |Planned |
 *  Name                                        |Release |Removal |
 *----------------------------------------------+--------+--------+
 * Mod{NAME}C                                     5.6.2    6.2
 *   {NAME} = sanitized version of the DesktopModule Name 
 *   Used on <div> tag surrounding Module Content, inside container
 *----------------------------------------------+--------+--------+
 */  



/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
    color: #b50000;
}

.ControlPanel {
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  { 
}

.ContentPane  { 
}

.RightPane  { 
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:hover    {
}

A.SelectedTab:active   {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:hover    {
}

A.OtherTabs:active   {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
/* add color of red or #b50000 onto Filter module of the Archive webpage */
.Normal
{
    color: #b50000 !important;
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:hover    {
}
    
A.CommandButton:active   {
}

/* button style for standard HTML buttons */
.StandardButton     {
}

/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}

ul {
    list-style: none; /*alex edit*/
}

UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}
OL UL LI   {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

/* Login Styles */
.LoginPanel{
}

.LoginTabGroup{
}

.LoginTab {
}

.LoginTabSelected{
}

.LoginTabHover{
}

.LoginContainerGroup{
}

.LoginContainer{
}

/*unique*/

/*Homepage Hero Banner */
.heroBannerContainer{
    background-image: linear-gradient(45deg, rgba(108, 124, 0, .3) 12%,rgba(26, 132, 74, .3) 40%,rgba(26, 132, 74, .3) 40%,rgba(160, 32, 32, .4) 83%),url("/Portals/0/Images/wrCampus2.jpg?ver=TACxDGC_olKzzSNER_h9vQ%3d%3d");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 550px;
    border-bottom:1px solid #595959;
}
.leftSide{
    display: inline-block;
    float:left;
    position: relative;
    top:15%;
    width: 50%;
    height: 200px;
}
.leftSide img{
    float:right;
    width: 250px;
    height: 250px;
    object-fit: contain;
}
.rightSide{
    display: inline-block;
    float:right;
    position: relative;
    top:15%;
    width: 50%;
    height: 200px;
}

/*Navajo Government Row -3 logos*/
.navajo-nation-government-shadowInset{
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15) inset; 
    /* background: #E6E1D8; */
    background: rgba(230, 225, 216, 0.507);
    border-bottom: 1px solid #21480b15;
}
.government-title{
    padding-top:40px; 
    font-size:2.5rem; 
    box-shadow: 0px 200px 19px -199px rgba(0,0,0,0.5) inset;
    font-weight:bold;
}
a.noUnderline:hover{
    text-decoration: none;
}

/** START alternate **/
.government{
    width:100%;
}
.government .row .homepageGovtLogos
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
}
.government .row .homepageGovtLogos img
{
    width: 100%;
    max-width: 125px;
    height:auto;
}
.government .row .homepageGovtLogos .homepageGovtLogosTitle
{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 250px;
}
.government .row .homepageGovtLogos .homepageGovtLogosTitle h4
{
    padding: 0 15px;
    font-weight:bold;
}
/** END alternate **/

.container .row .homepageGovtLogos
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
}
.container .row .homepageGovtLogos img
{
    width: 100%;
    max-width: 125px;
    height:auto;
}
.container .row .homepageGovtLogos .homepageGovtLogosTitle
{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 250px;
}
.container .row .homepageGovtLogos .homepageGovtLogosTitle h4
{
    padding: 0 15px;
    font-weight:bold;
}
/*give default **UNOPENED** eds_btn a stronger border width*/
.EasyDNNSkin_Ozone2 .eds_btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-width:4px;
  }
/*revise drop down attribute*/
.dropdown-menu{
background-color:#b50000;
border-width:4px;
border-color: #21480b;
}
.dropdown-item a:link{
    color: #fff;
}
.dropdown-item a:visited{
    color: #fff;
}
.dropdown-item a:hover{
    color: #fff ;
    text-decoration:underline;
}
.dropdown-item:hover {
 background-color: rgb(202, 5, 5) ;
}

/*ID SECTION - ONE TIME USAGE */
#press-release-title{
    padding-top:50px; 
    font-size:2.5rem;
    font-weight:bold;
}


/*Font Awesome padding to the left and right*/
.font-awesome-paddingLeft
{
    padding-left:10px;
}
.font-awesome-paddingRight
{
    padding-right:10px;
}

/*Announcements & Press Room Section*/
img.announcementsPressRoom-section{
    width:100%;
    max-width:90px;
    height:auto;
}
 .announcementsPressRoom-ctaBtn-Txt a:link{
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
}
 .announcementsPressRoom-ctaBtn-Txt a:visited{
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
}
 .announcementsPressRoom-ctaBtn-Txt a:hover{
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
}
 .announcementsPressRoom-ctaBtn-Txt a:focus{
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
}
 .announcementsPressRoom-ctaBtn-Txt a:active{
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
}


/*Public Services section */
.Public-Services-section h5{
    font-weight:bold;
}
.Public-Services-section p{
    padding-left:20px;
}


/*give default eds_btn a stronger border width*/
.EasyDNNSkin_Ozone2 .eds_btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-width:medium;
}

/* Press Releases Archive */
.edn_widget_filtermenu_box > h2.edn_module_title span {
  font-family: Nunito !important;
}
.edn_widget_filtermenu_box h3.edn_optionsTitle {
  font-family: Nunito !important;
}
.edn_widget_filtermenu_box > div.edn_styledSelect select {
  font-family: Nunito !important;
}

/* all webpages-except HOMEPAGE- Hero Header Banner Image */
.header-hero-img{
height: 50vh;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
#header-hero-img-executiveBranch{
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("/Portals/0/Images/executiveBranch-banner-img.jpg?ver=hEmrTeDceAOofoCGZGFWYA%3d%3d");
}
#header-hero-img-history{
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("/Portals/0/Images/History-Header-Banner-Img.jpg?ver=tocw8WqYpshoW_ZWV4ghiA%3d%3d");
}
#header-hero-img-faqs{
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("/Portals/0/Images/Faqs-header-banner-img.jpg?ver=DyfGU-2MVYl-u7bo0jinDg%3d%3d");
}
.header-hero-img-center-dimensions{
display: flex; 
align-items: center; 
justify-content: center; 
width: 100%; 
height: 50vh;
}
.header-hero-img-center-dimensions h1{
    color: white; 
    font-size: 6vh; 
    font-weight: 600; 
    padding:0 1rem;
}
#textShadow_1{
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 15px 15px 11px rgba(255,255,255,0.06);
color: #FFFFFF;
}


/*Executive Branch (webpages) - attributes */
.executiveBranch-division-title{
    padding-bottom:30px;
    font-size:2.5rem;
    font-weight:bold;
}
/*division, office, department cards css style*/
.office-card{
    width: 100%;
    height: 400px;
    border: 1px solid #c9c8c8;
    box-shadow: -3px -1px 25px 0px rgba(0,0,0,0.11);
    -webkit-box-shadow: -3px -1px 25px 0px rgba(0,0,0,0.11);
    -moz-box-shadow: -3px -1px 25px 0px rgba(0,0,0,0.11);
    border-radius: 15px;
    text-align: center;
}
.office-card img{
    width:100%;
    max-width: 175px;
    height: auto;
    padding:13px;
}
.line-top-bottom{
    margin:0 auto;
    width:50%;
    height:2px;
    background-color: #b500007e;
}
.logo-content h1, .logo-content h2, .logo-content h3,.logo-content h4, .logo-content h5, .logo-content h6 {
padding:2px 13px;
font-weight: bold;
}
.logo-content p {
    padding:2px 13px;
}
.row .col-sm-3:not(:first-child){
    margin-bottom:20px;
}

/*history webpage - double box shadow effect */
.outerBox{
    padding:20px; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
    border-top: 
    2px solid #479b18; 
    -webkit-box-shadow: 5px 5px 20px 3px; rgba(0,0,0,0.2); 
    box-shadow: 5px 5px 20px 3px rgba(0,0,0,0.2);
}
#navajoMapImg{
    max-width:349px;
}
#councilChambersImg{
    max-width:206px;
}
#navajoCodeTalkersImg{
    max-width:141px;
}
#flagImg{
    max-width:226px;
}
#wrTribalParkImg{
    max-width:141px;
}
#veteransMemorialImg{
    max-width:148px;
}
#navajoNationMuseumImg{
    max-width:141px;
}
.BoxShadowEffect1
{
    -webkit-box-shadow: 5px 5px 20px 3px; rgba(0,0,0,0.2); 
    box-shadow: 5px 5px 20px 3px rgba(0,0,0,0.2);
}


/*Faqs webpage - elements on the this webpage are featured here */
/*CLASS with list elements, that does not affect the 
first child element */
 div  ul.everythingExceptFirstChild li:not(:first-child)   {
    /* background-color: #900; */
    padding-top:15px;
}
.question-in-quotes{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
#how-can-i-become-an-enrolled-member{
    height: 380px;
}
#more-info-about-navajo-arts-crafts{
    height: 150px;
}
#navajo-language-who-do-i-talk-to{
    height: 250px;
}
#travelling-to-the-navajo-reservation{
    height: 250px;
}
#download-an-employment-application{
    height: 250px;
}
.question-in-quotes h2{
    text-transform: capitalize;
    text-align: center; 
    padding:0 10px;
    line-height: 2.2rem; 
    color: #21480B; 
}
.response-from-quotes {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto; 
}

/*blockquote settings*/
blockquote, blockquote p {
    color: #595959;
}
blockquote {
    border-left: 1px solid #b50000;
}

/* List w/bullet */
 ul.listBullet li
 {
    list-style-type: disc;
 }








/* MEDIA QUERIES */
/* Mobile first, we start from the smallest viewport width */

/* From 320px and up */
@media (min-width: 320px) {
    .leftSide{
    display: none;
    }
    .rightSide{
    width: 100%;
    display: block;
    top:18%;
    }
    .rightSide h1{
    font-size: 3.1rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    /* padding:10px 10px; */
    padding: 0rem 1rem 1rem 1rem;
    }
    .rightSide h3{
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    padding: 0rem 2rem 0rem 2rem;

    /* padding:10px 10px; */
    }
}

/* From 481px and up */
@media (min-width: 481px) {
    .leftSide{
    display: inline-block;
    padding-right: 0rem;
    width: 55%;
    top:9%;
    }
    .leftSide img{
    width: 250px;
    height: 250px;
    object-fit: contain;
    }
    .rightSide{
    padding-left: 0rem;
    padding-right: 0rem;
    width: 45%;
    top: 16%;
    }
    .rightSide h1{
    font-size: 2.3rem;
    color: #ffffff;
    }
    .rightSide h3{
    font-size: 1.3rem;
    color: #ffffff;
    }
}

/* From 769px and up */
@media (min-width: 769px) {
    .leftSide{
    padding-right: 0rem;
    width: 50%;
    top: 3%;
    }
    .leftSide img{
    width: 350px;
    height: 350px;
    object-fit: contain;
    }
    .rightSide{
    padding-left: 2.1rem;
    padding-right: 1rem;
    width: 50%;
    }
    .rightSide h1{
    font-size: 3.3rem;
    color: #ffffff;
    }
    .rightSide h3{
    font-size: 1.5rem;
    color: #ffffff;
    }
}

/* From 1025px and up */
@media (min-width: 1025px) {
    .leftSide{
    padding-right: 0rem;
    width: 40%;
    }
    .leftSide img{
    width: 325px;
    height: 325px;
    object-fit: contain;
    }
    .rightSide{
    padding-left: 0rem;
    padding-right: 1rem;
    width: 60%;
    }
    .rightSide h1{
    font-size: 3.5rem;
    color: #ffffff;
    }
    .rightSide h3{
    font-size: 2rem;
    color: #ffffff;
    }
}

/* From 1201px and up */
@media (min-width: 1201px) {
    .leftSide{
    padding-right: 0rem;
    width: 50%;
    top:0%;
    }
    .leftSide img{
    width: 500px;
    height: 500px;
    object-fit: contain;
    }
    .rightSide{
    padding-left: 0rem;
    padding-right: 1rem;
    width: 50%;
    top: 21%;
    }
    .rightSide h1{
    font-size: 4.2rem;
    color: #ffffff;
    }
    .rightSide h3{
    font-size: 2.5rem;
    padding: 10px;
    color: #ffffff;
    }
}

/* From 2560px and up */
@media (min-width: 2560px) {
    .heroBannerContainer{
    background-position: 50% 55%;
    }
    .leftSide{
    padding-right: 0rem;
    /* background-color: brown; */
    width: 45%;
    top:0%;
    }
    .leftSide img{
    width: 500px;
    height: 500px;
    object-fit: contain;
    padding-left: 6rem;
    }
    .rightSide{
    padding-left: 0rem;
    padding-right: 0rem;
    width: 55%;
    }
    .rightSide h1{
    font-size: 5rem;
    color: #ffffff;
    /* background-color: green; */
    padding-right: 40rem;
    }
    .rightSide h3{
    font-size: 3rem;
    color: #ffffff;
    padding: .6rem 40rem .6rem .6rem;

    }
}

/* From 3840px and up */
@media (min-width: 3840px) {
    .heroBannerContainer{
    background-position: 50% 58%;
    }
    .leftSide{
    padding-right: 0rem;
    /* background-color: maroon; */
    width: 45%;
    top: 0%;
    }
    .leftSide img{
    width: 575px;
    height: 575px;
    object-fit: contain;
    
    }
    .rightSide{
    padding-left: 0rem;
    padding-right: 1rem;
    /* background-color: blue; */
    width: 55%;
    top: 20%;
    }
    .rightSide h1{
    font-size: 6rem;
    color: #ffffff;
    padding-right: 75rem;
    }
    .rightSide h3{
    font-size: 4rem;
    color: #ffffff;
    padding: .6rem 75rem .6rem .6rem;
    }
}

/* Mobile first, we start from the smallest viewport width */






































































