/* start of root css */
        :root {
            --primary:  #fcf9f9;
            --dark: #8A3860;
            --light: #fff;
            --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
        }
        /* end of root css */

        #logo a {
            border: 0;
            color: #34587F;
            font-size: 3.0em;
            background: #fff;
            /* padding: 0 0.5em 0 0.5em; */
            outline: 0;
        }

        /* Start of boxes css  */
        .boxes {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            margin-bottom: 0.5rem;
        }
        /* End of boxes css  */
		
		#sidebar .button {
		margin: 1em 0em 1em 0em;
		}
		
		section, article{
		margin-bottom: 2px; 
		}

        /* Start of box css  */
        .box {
            background:  #fcf9f9; 
            text-align: left;
            padding: 1.5rem 2rem;
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
        }

         /* Start of box2 css  */
         .box2 {
            background: #fcf9f9;
            text-align: left;
            /* padding: 1.5rem 2rem; */
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
            font-size: 13px; 
            height: auto; 
          }


         .box2 img {
                padding: 1rem; 
                width: 50%; 
            }

        /* End of box and box2 css  */

        /* Start of btn css  */
        .btn {
            background: #8A3860;
            color:  #fff;
            padding: 0.6rem 1.3rem;
            text-decoration: none;
            border: 0;

        }
        /* End of btn css  */

        .button2 {
            background: #8A3860;
            color: #fff;
            padding: 0.4rem 1rem;
            text-decoration: none;
            border: 0;
        }

        /* Start of Info CSS */
        /*   grid-template-columns: repeat(2, 1fr) are 2 columns 1 fractionals  */
        .info {
            background:  #fcf9f9;
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
            display: grid;
            grid-gap: 30px;
            grid-template-columns: repeat(1, 2fr);
            padding: .4rem;
            font-size: 13px; 
        }

         .one-half-bumper-container {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
            margin-bottom: 1rem;
            font-size: 13px; 
        }

        .info2 {
            background: var(--primary);
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
            grid-gap: 10px;
            padding: 1rem;
        }

        .info .btn {
            display: block;
            text-align: center;
            margin: auto;
        }
        /* End of Info CSS */

        /* Start CSS for Small */
        .small ul {
            display: grid;
            grid-gap: 20px;
            padding: 0px;
            list-style: none;
            grid-template-columns: repeat(4, 1fr);
        }

        .small a {
            background: #8A3860;
            color: #fff;
            display: block;
            text-decoration: none;
            padding: 0.4rem;
            text-align: center;
            text-transform: uppercase;
            font-size: 1rem;
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
        }

        .small a:hover {
                background: #fff;
                color: #8A3860;
            }
        /* End CSS for Small */

        /* .right{
         margin-top: 50px;
        }

        #wrap{
            width:100%;
            margin:0 auto;
        } */


		/* button for more events */
        .button {
            padding: 0.5rem; 
            width: 100%; 
            height: auto; 
            text-align: center;
            /* margin-right: 3rem;  */
        }


        .director{
            width: 50px important!; 
            height: 50% important!; 
        }

       

        /* Start CSS for dark */
        .dark {
            padding: 15px;
            background: #35424a;
            color: #ffffff;
            margin-top: 10px;
            margin-bottom: 10px;
        }

            .dark a:link {
                color: yellow;
            }

            .dark a:hover {
                color: white;
            }
        /* End CSS for dark */

          .white {
            background: #fff;
            padding: 1rem;
            border-radius: 25px;
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.9);
        }

        /*Media Queries for the page */
        @media(max-width: 700px) {
            .info {
                background: #fcf9f9;
                box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
                display: grid;
                grid-gap: 20px;
                grid-template-columns: repeat(1, 1fr);
                padding: 1rem;
            }
        }
        /* Media Queries end for the page */

        .caption{
		  font-size: 14px; 
		}
		
	    .contact{
		  font-size: 12px; 
		}

        /*CSS for carousel 5/15/2019 */
        /* Make the image fully responsive */
        .carousel-inner img {
                width: 92%; 
                top: 0;
                left: 0;
        }

        .carousel {
            max-height: 380px;
        }

        /*.carousel-caption {
            background: rgba(184, 61, 0, 0.5);
        }*/
        /* End of CSS for carousel 5/15/2019 */


        /* Start for buttons for modal slider 5/15/2019 */

        .button2 {
            background: rgba(65, 94, 38, 0.6); /* Green */
            border: none;
            color: white;
            padding: 5px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px 40px 0px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
        }

            .button2:hover {
                box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
            }
        /* End for buttons for modal slider 5/15/2019 */

        /* image hover effect 5/15/2019 */

        .middle {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .img-red :hover .image {
            opacity: 0.3;
        }

        .img-red :hover .middle {
            opacity: 1;
        }

        .text {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            padding: 16px 32px;
        }
        /* End of image hover effect 5/15/2019 */
        /* image responsive  5/16/2019 */

        .img-reponsive {
            width: 100%;
        }
        /* End of image responsive  5/16/2019 */
        /* Our mission css 5/16/2019 */
        .white {
            background: #fff;
            padding: 1rem;
            border-radius: 25px;
            box-shadow: 0 1px 5px rgba(104, 104, 104, 0.9);
        }
        /* End of our mission css 5/16/2019 */


      /* CSS for object on modal slider 2 5/29/2019 */

      .modal-header2{
          padding: 20px; 
      }

      object{
          width: 100%; 
          margin: auto;
          height: 100vh; 
      }

      .carousel-indicators li {

            background-color: var(--dark);
  
        }
        .carousel-indicators .active {

            background-color: var(--light);
        }

      /* CSS for department calendar 6/19/2019 */
	  
	  .post{
	  margin: 15px; 
	  padding: 20px; 
	  box-shadow: 1px 2px 0px rgba(89,89,89,0.5)
	  }
	  
	   .post p{
	  pading-bottom: 1rem; 
	  }
	  
	 .postDate h2{
	    border-bottom: none;	
        text-align: center; 		
	  }
	  
	  .postDate h1{
		text-align: center; 
	  }
	  
		img {
			vertical-align: 0px;
			border-style: none;
		}
			
		body {
			 padding: 0 !important 

		}
		.row {
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			margin-right: -20px;
			margin-left: -40px;
		}
        
        .hidden {
            visibility: hidden;
          }

          @charset "utf-8";
          /* CSS Document */
          
          
          /***************************************/
          /***** Created by Matthew Johnson *****/
          /*** matthew.johnson@houstontx.gov ***/
          /************************************/
          
          
      
      
         
          #hcddNav {
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
          }
          
          
          a {
            color: #2152BA;
            text-decoration: none;
          }
          a:hover {
            color: #595959;
            text-decoration: none;
          }
          
          a:not([href]) {
              color: #2152BA;
          }
          
          button:focus {
              outline: 0px solid;
          }
          .bullets a:link {
            font-size: inherit;
          }
          #mainNav .dropdown-toggle::after {
            display: none;
          }
          .leftMain .nav-item, .rightMain .nav-item {
            font-size: .90em;
            font-weight: 600;
            text-transform: uppercase;
          }
          
          .img-fluid {
              width: 100% \9;
          }
          
          .h-100 { 
              height: 100% !important; 
              min-height: 1rem;
          }
          
          
          
          
          .row {
              display: -ms-flexbox;
              display: flex;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap;
              margin-top: 0;
              margin-bottom: 0;
              padding-top: 0;
          }
          
          .row > * {
              padding-top: 0;
              padding-bottom: 0;
          }
          
          .breadcrumb {
            background-color: transparent !important;
            padding: 0; 
          }
          .breadcrumb > li + li:before {
            content: ">"!important;
          }
          .breadcrumb-item+.breadcrumb-item {
            line-height: 3.5em;
          }
          
          /* Buttons */
          
          .btn-group-sm>.btn, .btn-sm, .btn-group-lg>.btn, .btn-lg {
              border-radius: 0;
          }
          
          
          .table {
            padding: 0px;
            text-align: left;
          }
          th {
            font-weight: bold;
          }
          
          .sidebarExtraContent h2 {
            text-align: left;
            font-size: 1.5em!important;
            color: #525252;
            border-bottom: 1px solid #525252;
          }
          
          
          /*Colors*/
          
          /* HCDD Colors */
          /* Text Colors */
          .text-hcdd {
            color: #34587F;
          }
          
          /* BG Colors */
          
          .bg-hcdd-gray {
            background-color: #E0E1DD;
          }
          .bg-hcdd-blue {
            background-color: #00558C;
          }
          .bg-hcdd-green {
            background-color: #64A70B;
          }
          .bg-hcdd-lightBlue {
            background-color: #00A3E0;
          }
          .bg-hcdd-red {
            background-color: #DA291C;
          }
          .bg-hcdd-orange {
            background-color: #D45D00;
          }
          .bg-hcdd-lightOrange {
            background-color: #DE7C00;
          }
          .bg-hcdd-yellow {
            background-color: #F1C400;
          }
          .bg-hcdd-darkYellow {
            background-color: #FFCD00;
          }
          .bg-hcdd-purple {
            background-color: #9B26B6;
          }
          
          
          
          /* City Colors */
          /* Text Colors */
          
          .text-city-blue {
            color: #2F5074;
          }
          .text-city-subBlue {
            color: #43419F;
          }
          .text-city-gray {
            color: #525252; 
          }
          .text-city-gold {
            color: #694A2B; 
          }
          .text-city-green {
            color: #3A5322; 
          }
          .text-city-red {
            background-color: #A30000; 
          }
          .text-city-magenta {
            color: #7F3458; 
          }
          
          /* City Colors - White BG */
          
          .bg-city-blue {
            background-color: #34587F;
          }
          .bg-city-subBlue {
            background-color: #4846AA;
          }
          .bg-city-gray {
            background-color: #525252; 
          }
          .bg-city-gold {
            background-color: #74522F; 
          }
          .bg-city-green {
            background-color: #415E26; 
          }
          .bg-city-red {
            background-color: #B30000; 
          }
          .bg-city-magenta {
            background-color: #8A3860; 
          }
          
          /* City Colors - Gray BG */
          
          .bg-city-gray-blue {
            background-color: #2F5074;
          }
          .bg-city-gray-subBlue {
            background-color: #43419F;
          }
          .bg-city-gray-gray {
            background-color: #525252; 
          }
          .bg-city-gray-gold {
            background-color: #694A2B; 
          }
          .bg-city-gray-green {
            background-color: #3A5322; 
          }
          .bg-city-gray-red {
            background-color: #A30000; 
          }
          .bg-city-gray-magenta {
            background-color: #7F3458; 
          }
          
          
          /* Borders */
          .border-3 {
            border-width:10px !important;
            border-color: #005A8B !important;
          }
          
          
          /* Fontawesome Icons */
          .fa-file-pdf-o, a > .fa-file-pdf-o, .fa-file-pdf, a > .fa-file-pdf {
            color: #D52B1E;
          }
          .fa-file-word-o, a > .fa-file-word-o, .fa-file-word, a > .fa-file-word {
            color: #009FDA;
          }
          .fa-file-excel-o, a > .fa-file-excel-o, .fa-file-excel, a > .fa-file-excel {
            color: #69BE28;
          }
          .fa-file-powerpoint-o, a > .fa-file-powerpoint-o, .fa-file-powerpoint, a > .fa-file-powerpoint {
            color: #B32B1D;
          }
          a:hover .fa {
            color: #595959;
          }
          .fa-check-circle-o, .fa-check-circle {
            color: #415E26;
          }
          
          .fa-ul {
              margin-left: 1.5em !important;
          }
          /*
          .fa-li {
              top: .5em;
          }
          */
          
          /* Search Bar Styles */
          
          .gsc-control-cse {
              border-color: transparent !important;
              background-color: transparent !important;
          }
          .gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
              border-color: none !important;
              background-color: #005A8B !important;
          }
          
          /* Carousel Styles */
          .carousel-indicators li {
              background-color: #525252;
          }
          
          .owl-carousel .owl-video-wrapper {
               background: #f3f3f3; 
          }
          
          .html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-showing, .html5-video-player.ended-mode, .html5-video-player.ytp-fullscreen {
              background-color: #f3f3f3;
          }
          
          .owl-carousel .owl-video-wrapper {
              background: #f3f3f3;
          }
          
          .owl-carousel .owl-video-tn {
              background-size: cover;
              min-height: 280px;
          }
          
          
          /* dataTables styles */ 
          
          .dataTables_wrapper {
            padding: 2em;
            background-color: rgba(225,244,253,.1);
            border: 1px solid rgba(0,0,0,.1);
          }
          
          table.dataTable td {
            font-size: .9em;
          }  
          
          
          .page-item.active .page-link {
            background-color: transparent;
            color: #2152BA;
            text-decoration: underline;
            border: none;
            font-size: .8em;
          }
          
          .page-item .page-link {
            border: none;
            background-color: transparent;
            color: #2152BA;
            font-size: .8em;
          
          }
          
          .page-link:hover {
              border: none;
              background-color: transparent;
              color: #595959;
              text-decoration: underline;
          }
          
          div.dataTables_wrapper div.dataTables_paginate {
            font-weight: bold;
          }
          
          .page-item.disabled .page-link {
            border: none;
            background-color: transparent;
            font-size: .8em;
          }
          
          div.dataTables_info {
            font-size: .8em;
            font-weight: bold;
          }
          /* Return to Top Arrow */
          #return-to-top {
              position: fixed;
              bottom: 20px;
              right: 20px;
              background: rgba(0, 0, 0, 0.7);
              width: 50px;
              height: 50px;
              text-decoration: none;
              -webkit-border-radius: 35px;
              -moz-border-radius: 35px;
              border-radius: 35px;
              display: none;
              -webkit-transition: all 0.3s linear;
              -moz-transition: all 0.3s ease;
              -ms-transition: all 0.3s ease;
              -o-transition: all 0.3s ease;
              transition: all 0.3s ease;
          }
          
          #return-to-top i {
              color: #fff;
              margin: 0;
              position: relative;
              left: 10px;
              top: 8px;
              font-size: 30px;
              -webkit-transition: all 0.3s ease;
              -moz-transition: all 0.3s ease;
              -ms-transition: all 0.3s ease;
              -o-transition: all 0.3s ease;
              transition: all 0.3s ease;
          }
          
          /* Placeholder content */ 
          
          svg.placeholder {
            max-width: 100%;
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSI+CiAgPHBhdGggZD0iTTAgNCBMMCAyOCBMMzIgMjggTDMyIDQgeiBNNCAyNCBMMTAgMTAgTDE1IDE4IEwxOCAxNCBMMjQgMjR6IE0yNSA3IEE0IDQgMCAwIDEgMjUgMTUgQTQgNCAwIDAgMSAyNSA3Ij48L3BhdGg+Cjwvc3ZnPg==") no-repeat center hsl(0, 0%, 80%);
            background-size: calc(100%/3);
          }
          
          span.placeholder,
          span.placeholder a {
            background: hsl(0, 0%, 80%);
            color: hsl(0, 0%, 80%);
          }   
          
          /* General styles */ 
          
          /* Timeline */
          
          .timeline {
              list-style: none;
              padding: 20px 0 20px;
              position: relative;
          }
          
          .timeline:before {
              top: 0;
              bottom: 0;
              position: absolute;
              content: " ";
              width: 3px;
              background-color: #eeeeee;
              left: 50%;
              margin-left: -1.5px;
          }
          
          .timeline > li {
              margin-bottom: 10px;
              position: relative;
          }
          
          .timeline > li:before,
          .timeline > li:after {
              content: " ";
              display: table;
          }
          
          .timeline > li:after {
              clear: both;
          }
          
          .timeline > li:before,
          .timeline > li:after {
              content: " ";
              display: table;
          }
          
          .timeline > li:after {
              clear: both;
          }
          
          .timeline > li > .timeline-panel {
              width: 46%;
              float: left;
              border: 1px solid #d4d4d4;
              border-radius: 2px;
              padding: 10px;
              position: relative;
          /*
              -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
              box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
          */
          }
          
          .timeline > li > .timeline-panel:before {
              position: absolute;
              top: 26px;
              right: -15px;
              display: inline-block;
              border-top: 15px solid transparent;
              border-left: 15px solid #ccc;
              border-right: 0 solid #ccc;
              border-bottom: 15px solid transparent;
              content: " ";
          }
          
          .timeline > li > .timeline-panel:after {
              position: absolute;
              top: 27px;
              right: -14px;
              display: inline-block;
              border-top: 14px solid transparent;
              border-left: 14px solid transparent;
              border-right: 0 solid transparent;
              border-bottom: 14px solid transparent;
              content: " ";
          }
          
          .timeline > li > .timeline-badge {
              color: #fff;
              width: 50px;
              height: 50px;
              line-height: 50px;
              font-size: 1.4em;
              text-align: center;
              position: absolute;
              top: 16px;
              left: 50%;
              margin-left: -25px;
              background-color: #999999;
              z-index: 100;
              border-top-right-radius: 50%;
              border-top-left-radius: 50%;
              border-bottom-right-radius: 50%;
              border-bottom-left-radius: 50%;
          }
          
          .timeline > li.timeline-inverted > .timeline-panel {
              float: right;
          }
          
          .timeline > li.timeline-inverted > .timeline-panel:before {
              border-left-width: 0;
              border-right-width: 15px;
              left: -15px;
              right: auto;
          }
          
          .timeline > li.timeline-inverted > .timeline-panel:after {
              border-left-width: 0;
              border-right-width: 14px;
              left: -14px;
              right: auto;
          }
          
          .timeline-title {
              margin-top: 0;
          /*	color: inherit;*/
          }
          
          .timeline-body > p,
          .timeline-body > ul {
              margin-bottom: 0;
          }
          
          .timeline-body > p + p {
              margin-top: 5px;
          }
          
          @media (max-width: 767px) {
              ul.timeline:before {
                  left: 40px;
              }
          
              ul.timeline > li > .timeline-panel {
                  width: calc(100% - 90px);
                  width: -moz-calc(100% - 90px);
                  width: -webkit-calc(100% - 90px);
              }
          
              ul.timeline > li > .timeline-badge {
                  left: 15px;
                  margin-left: 0;
                  top: 16px;
              }
          
              ul.timeline > li > .timeline-panel {
                  float: right;
              }
          
              ul.timeline > li > .timeline-panel:before {
                  border-left-width: 0;
                  border-right-width: 15px;
                  left: -15px;
                  right: auto;
              }
          
              ul.timeline > li > .timeline-panel:after {
                  border-left-width: 0;
                  border-right-width: 14px;
                  left: -14px;
                  right: auto;
              }
          }
          /* End Timeline */
          
          /* Responsive Styles */ 
          
          @media screen and (max-width: 768px) {
            #header {
              padding: 0 !important;
            }
            
            #navMobile .nav-item a, #subNavMobile .nav-item a {
              display: block;
              color: #888;
              text-decoration: none;
              height: 44px;
              line-height: 44px;
              border-top: solid 1px rgba(255, 255, 255, 0.05);
              padding: 0 1em 0 1em;
              text-transform: uppercase;
            }
          }