/*------------------------------------------------------------------------------------------
 Name: universal.css
 Created by Jerry Tran on 7/7/2020 during the Covid-19 Pandemic.
 Purpose: Universal sitewide styles.

 Prefixer:
 http://pleeease.io/play/
------------------------------------------------------------------------------------------*/
html, body
   {
   color: black;
   }

html, body, a
   {
   font-family: 'Lato', Arial, Geneva, Helvetica;
	font-weight: 300;
   }

.content-wrapper
   {
   max-width: 1300px;
   margin: 0 auto;   
   }

.small-wrapper
   {
   max-width: 600px;
   margin: 0 auto;   
   }


/*------------------------------------------------------------------------------------------
 NAVBAR
------------------------------------------------------------------------------------------*/
.logo-wrapper
   {
   top: 1.4rem;      
   left: 50%;
   margin-left: -7rem;
   z-index: 1004;
   position: fixed;
   transition: top 0.4s ease;
   }   

.logo
   {
   width: 14rem;
   }

.navbar-top
   {
   position: fixed;
   z-index: 1000;
   top: 0;
   background-color: rgba(256,256,256,1);
   width: 100%;
   height: 7rem;
   line-height: 2.5rem;
   transition: opacity 1s ease;      
   }

.navbar-bottom
   {
   z-index: 1000;
   background-color: rgba(0,0,0,1);
   width: 100%;
   height: 2.5rem;
   line-height: 2.5rem !important;
   transition: opacity 0.5s ease;      
   }

.navbar-bottom a
   {
   color: white;
   }

.navbar-bottom a:visited
   {
   color: white;
   }

.navbar-bottom a:hover
   {
   color: white !important;
   text-decoration: underline;
   }

.navbar-up
   {
   opacity: 0.3;
   top: -10.5rem !important;
   }

.no-navbar-bottom .navbar-bottom  /* Primary pages do not have a black nav bar */
   {
   display: none !important;
   }



@media only screen and (min-width: 576px)
{ 
.logo-wrapper
   {
   position: absolute;     /* Logo is fixed on XS displays */
   top: 3.4rem;            /* Placement of logo on SM screens */
   margin-left: -10rem;    /* 1/2 of Logo Width */
   }   

.logo
   {
   width: 20rem;
   }

.navbar-top
   {
   position: absolute;     /* Navbar is fixed on XS displays */
   height: 10.5rem;
   }
}



/*------------------------------------------------------------------------------------------
 FOOTER
------------------------------------------------------------------------------------------*/
.footer-sticky
   {
   position: relative;
   min-height: 100%;
   }

.footer-sticky body
   {
   padding-top: 7rem;                  /* Height of Navbar on XS pages */
   padding-bottom: 20rem !important;   /* Height of footer */
   }

footer
   {
   width: 100%;
   height: 20rem;
   position: absolute;
   z-index: 900;
   bottom: 0;
   color: white;
   box-shadow: 0px 212px 0px 0px rgba(0,0,0,1);
   }

footer a
   {
   font-weight: normal;
   color: white;
   }

footer a:visited
   {
   color: white;
   }

footer a:hover
   {
   color: white !important;
   text-decoration: underline;
   }
   
@media only screen and (min-width: 576px)
{ 
.footer-sticky body  /* Default pages have a black nav bar.  Top body padding should be Navbar-top + Navbar-bottom */
   {
   padding-top: 10.5rem;
   }
}



/*------------------------------------------------------------------------------------------
MENU For small browsers.
------------------------------------------------------------------------------------------*/
.menu
   {
   position: fixed;
   height: 100%;
   width: 100%;
   top: -100%;
   z-index: 1003;
   opacity: 0;
   transition: all 0.6s ease;  
   }

.menu a
   {
   font-size: 1.8rem;
   font-weight: 900;
   line-height:  3.0rem !important;
   color: white;
   }

.menu a:visited
   {
   color: white;
   }

.menu a:hover
   {
   color: white !important;
   text-decoration: underline;
   }
   
.menu-is-active
   {
   top: 0;
   opacity: 1;
   }



/*------------------------------------------------------------------------------------------
HAMBURGER TOGGLE For small browsers.
------------------------------------------------------------------------------------------*/
.menu-toggle
   {
   right: 0;
   position: fixed;
   top: 0;
   z-index: 1004;
   transition: opacity 0.3s ease;      
   }



/*------------------------------------------------------------------------------------------
PARALLAX
------------------------------------------------------------------------------------------*/
.parallax-window
   {
   background: transparent;
   }
  


/*------------------------------------------------------------------------------------------
LIST STYLES
------------------------------------------------------------------------------------------*/
.list-noindent
   {
   list-style-position: inside;
   margin: 0;
   padding: 0;
   }
   
.list-nobullets
   {
   list-style-type: none;
   }

.list-nobullets li
   {
   list-style: none;
   }

.list-columns
   {
   -webkit-column-gap: 3rem;
   -moz-column-gap: 3rem;
   column-gap: 3rem;
   padding: 0;
   margin: 0;
   }

.list-columns a
   {
   cursor: pointer !important;
   }

.list-columns li
   {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
   }

.list-columns-2
   {
   -webkit-columns: 2 175px;
   -moz-columns: 2 175px;
   columns: 2 175px;
   }

.list-columns-3
   {
   -webkit-columns: 3 175px;
   -moz-columns: 3 175px;
   columns: 3 175px;
   }

.list-columns-4
   {
   -webkit-columns: 4 175px;
   -moz-columns: 4 175px;
   columns: 4 175px;
   }

.list-columns-5
   {
   -webkit-columns: 5 175px;
   -moz-columns: 5 175px;
   columns: 5 175px;
   }

.list-columns label
   {
   font-weight: normal;
   }



   
/*------------------------------------------------------------------------------------------
 FORMS
------------------------------------------------------------------------------------------*/
textarea
   {
   resize: none;
   }
   
   
   
/*------------------------------------------------------------------------------------------
 BACKGROUND COLORS
------------------------------------------------------------------------------------------*/
.bg-white
   {
   background-color: white;
   }

.bg-black
   {
   background-color: black;
   }

.bg-trans-white
   {
   background: rgba(255, 255, 255, 0.3);
   }

.bg-trans-black
   {
   background: rgba(0, 0, 0, 0.3);
   }

.bg-dark-90
   {
   background-color: #484d53 !important;
   }

.bg-dark-80
   {
   background-color: #5d6166 !important;
   }

.bg-dark-70
   {
   background-color: #717579 !important;
   }

.bg-dark-60
   {
   background-color: #85898c !important;
   }

.bg-dark-50
   {
   background-color: #999c9f !important;
   }

.bg-dark-40
   {
   background-color: #aeb0b3 !important;
   }

.bg-dark-30
   {
   background-color: #c2c4c5 !important;
   }

.bg-dark-20
   {
   background-color: #d6d8d9 !important;
   }

.bg-dark-10
   {
   background-color: #eaebec !important;
   }





/*------------------------------------------------------------------------------------------
 TEXT, FONTS AND LINKS
------------------------------------------------------------------------------------------*/
.text-rotate
   {
   transform: rotate(-90deg);
   }

.text-huge
   {
   font-size: 1.5rem !important;
   line-height:  2.0rem !important;
   }

.text-giant
   {
   font-size: 3rem;
   font-family: 'Lato', Arial, Geneva, Helvetica;
   font-weight: 900;
   text-transform: uppercase;
   line-height:  3rem !important;
   }
   
.text-small
   {
   font-size: 0.7rem;
   line-height: 0.9rem;
   }

.text-shadow-black
   {
   text-shadow: 1px 1px #000000 !important;
   }

.text-red
   {
   color: #b2473e;
   }

.text-ltgray
   {
   color: #ebebeb;
   }

.text-gray
   {
   color: #333333;
   }

a
   {
   color: #464646;
	text-decoration: none;
   }

a:visited
   {
	text-decoration: none;
   }

a:hover, a:active, a:focus
   {
   outline: none;
   color: #959595;
	text-decoration: none;
   }

a:focus
   {
   color: #666666;
   }



/*------------------------------------------------------------------------------------------
 UTILITIES
------------------------------------------------------------------------------------------*/
.display-none
   {
   display: none;   
   }
   
.border-thick
   {
   border-width: thick !important;   
   }

.border-medium
   {
   border-width: medium !important;   
   }

.opacity-10
   {
   opacity: 0.1;
   }

.opacity-20
   {
   opacity: 0.2;
   }

.opacity-30
   {
   opacity: 0.3;
   }

.opacity-40
   {
   opacity: 0.4;
   }

.opacity-50
   {
   opacity: 0.5;
   }

.opacity-60
   {
   opacity: 0.6;
   }

.opacity-70
   {
   opacity: 0.7;
   }

.opacity-80
   {
   opacity: 0.8;
   }

.opacity-90
   {
   opacity: 0.9;
   }
.index-1000
   {
   z-index: 1000 !important;
   }

.index-3000
   {
   z-index: 3000 !important;
   }


/*------------------------------------------------------------------------------------------
 OVERIDING BOOTSTRAP DEFAULTS
------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
   {
   font-family: 'Lato', Arial, Geneva, Helvetica;
   font-weight: 900;
   }

h1, .h1
   {
   font-size: 2.4rem;
   }

h2, .h2
   {
   font-size: 1.8rem;
   }

h3, .h3
   {
   font-size: 1.4rem;
   }
   
h4, .h4
   {
   font-size: 1.2rem;
   }
   
h5, .h5
   {
   font-size: 1rem;
   }

h6, .h6
   {
   font-size: 0.8rem;
   }

.modal
   {
	z-index: 4000;
   }
   
.modal.fade .modal-dialog
   {
   -webkit-transform: translate(0, 0);
   transform: translate(0,0);
   -webkit-transition: -webkit-transform 0.3s ease-out;
   transition: -webkit-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
   transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
   }
	
.popover
   {
   font-family: 'Lato', Arial, Geneva, Helvetica;
   font-weight: 300;
   }	
 

/* Overide Bootstrap Active Pills Color */
.nav-pills .nav-link.active
   {
   background-color: #999c9f;
   } 




/*------------------------------------------------------------------------------------------
 BLACK AND WHITE IMAGES
------------------------------------------------------------------------------------------*/
.img-bw
   {
   -webkit-filter: gray;
           filter: gray; /* IE6-9 */
   filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   }

.img-bw-hover:hover 
   {
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none; 
   }



/*------------------------------------------------------------------------------------------
 MEDIA SIZING: X-SMALL (DEFAULT)
------------------------------------------------------------------------------------------*/
html, body
   {
   font-size: 14px !important;
   line-height: 20px;
   }


/*------------------------------------------------------------------------------------------
 MEDIA SIZING: SMALL, TABLET 
------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 576px)
{ 
html, body
   {
   font-size: 15px !important;
   line-height: 20px;
   }
}


/*------------------------------------------------------------------------------------------
 MEDIA SIZING: MD
------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px)
{ 
html, body
   {
   font-size: 17px !important;
   line-height: 22px;
   }
}


/*------------------------------------------------------------------------------------------
 MEDIA SIZING: LG, SMALL DESKTOP 
------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 992px)
{      
html, body
   {
   font-size: 18px !important;
   line-height: 23px;
   }
}


/*------------------------------------------------------------------------------------------
 MEDIA SIZING: XLG, LARGE DESKTOP 
------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1200px)
{
}