<style>
html *{
    scrollbar-width: thin;
}



.font-impact{
    font-family: impact;
}

.btn-border{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.font-roman{
    font-family: 'Times New Roman'
}

.Sofia{
    font-family: 'Times New Roman';
}

.text-custom{
    color: #990033
}

.text-muted{
    color: black !important;
}

.benefits td{
    padding: 5px;
}

.autoplay img{
    width: 100%;
    padding: 7.5px;
}

body{
    background-color: #669ACC;
	margin: 0px auto;
}

header{
    background-image: url("images/banner.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 175px;
    max-height: 175px;
    width: 100%;
} 

#member{
    height: 426.113px;
    overflow: scroll;
    overflow-x: hidden;
}

.active {
  background-color: #4CAF50;
  color: white;
  border: 2px solid black;
}

#text-bottom{
	background-color: rgb(255,255,255); /*The Fallback */
	background-color: rgba(255,255,255,0.9);
	-o-transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
	-moz-transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
	-webkit-transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
	transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
	-webkit-transition-property: background-color, -webkit-backdrop-filter;
	-moz-transition-property: background-color, -webkit-backdrop-filter;
	-o-transition-property: background-color, -webkit-backdrop-filter;
	/* transition-property: background-color, -webkit-backdrop-filter; */
	/* transition-property: background-color, backdrop-filter; */
	transition-property: background-color, backdrop-filter, -webkit-backdrop-filter;
}

.caption{
    font-family: Courier;
    color: white;
    font-size: 20px;
}
.charter{
    font-family: impact;
    color: white;
    text-shadow: 2px 2px black;
}

.charter-invert{
    font-family: Sofia;
    color: grey;
    text-shadow: 2px 2px white;
}

.events{
    background: rgb(240,240,240);
background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(251,251,251,1) 47%, rgba(255,255,255,1) 49%, rgba(240,240,240,1) 50%, rgba(255,255,255,1) 51%, rgba(251,251,251,1) 53%, rgba(240,240,240,1) 100%);
}

.outline
{
    color: rgb(0,185,242);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

#mid-tab{
    border-left: 1px solid black; 
    border-right: 1px solid black;
}

/*Sectional Tabs on Home Page*/

.tab-pane{background-color: white}
.tab-pane p{color: black;}
.tab-pane a:hover{text-decoration: none}

#nav-profile{
    background-image: url('images/screenmem.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 500px;
    overflow: hidden;
}

#article-left a{
    transition: 0.5s
}

#article-left a:hover{
    background-color: lightgray;
}

#article-list li:hover{
    color: blue;
    list-style: none;
}

/*End Sectional Tabbing*/

tbody{background-color: white;}

#shop_table table, #hearing_table table{
    font-size: 25px;
}

#shop_table td:nth-child(2n+1){
    background-color: lightgray;
    font-weight: bold ;
}

#hearing_table tr:nth-child(2n+1){
    background-color: lightgray;
}
#hearing_table th{
    background-color: white
}

#shop_table td, #shop_table tr, #hearing_table td, #hearing_table tr{
    border: 2px solid black;
    vertical-align: middle;
    font-size: 20px
}

#sh_shadow{
    text-shadow: 2px 2px 2px red, 4px 4px 4px blue;
}

/*Navigation Menu*/

#navbar{
    width: 100%;
}

#navbar a:hover{
    text-decoration: none;
}

.btn-primary:hover{border: 1px solid black;}

.topnav a:hover {background-color: #4286f4;}

.btn-primary{
}

/*End Navigation Menu*/

.doc_list:nth-child(n+2){background-color: white;}

.doc_list:nth-child(2n+1){background-color: #CCCCCC;}

.nalc{
    background-size: 175px 175px;
    background-repeat: no-repeat;
    height: 175px;
}

.clear{clear:both;}

/*index page Branch Member List*/
  
/*Not a member of navigation menu*/
  .grievance table{
        width: 100%;
        text-align: center;
        padding: 0px
    }


/*End Navigation Menu*/
@media only screen and (max-width: 1000px){
    #pocketstretch img{
        height: 150%;
    }
    #nav-home{
    max-height: 500px;
}
    
}

@media (min-width: 940px){
    .flex{display: flex;}
    .flex_center{justify-content: center;}
    
}

@media only screen and (max-width: 775px){
    .slick-list{
    height: intrinsic;
}
#pocketstretch img{
        height: 150%;
    }

    header{
        height: 50%;
        width: 100%;
    }

    .full_screen{
        width: 100%;
        text-align: center;
        clear: both;
    }
    
#nav-home{
    max-height: 500px;
}
}
@media only screen and (max-width: 767px){
    .nalc{display: none;}
    #nav-home{
    max-height: 500px;
}
.events{
        background: white;
    }
}

</style>