/* 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 */

        /* 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: 450px; 
          }


         .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;
			margin-left: 3px; 

        }
        /* 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: 100%; 
                object-fit: contain;
                top: 0;
                left: 0;
                max-height: 250px;
        }

        .carousel {
            max-height: 250px;
        }

        /*.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 16px 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; 
	  }

      .contItalic {
        font-size: 12px;
        font-style: italic;
      }

      .row2 {
        display: flex;
      }
      
    /* Create two equal columns that floats next to each other */
        .column {
            float: left;
            width: 50%;
            padding: 10px;
            height: 300px; 
            /* Should be removed. Only for demonstration */
        }
  
        
      /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 400px) {
            .column {
            width: 100%;
            }
        }

        ul.b {
            list-style-position: inside;
          }
          
            .carousel-inner img {
              width: 100%;
              height: 100%;
            }
            
                .gallery {
              -webkit-column-count: 3;
              -moz-column-count: 3;
              column-count: 3;
              -webkit-column-width: 33%;
              -moz-column-width: 33%;
              column-width: 33%; }
              .gallery .pics {
              -webkit-transition: all 350ms ease;
              transition: all 350ms ease; }
              .gallery .animation {
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1); }
          
              @media (max-width: 450px) {
              .gallery {
              -webkit-column-count: 1;
              -moz-column-count: 1;
              column-count: 1;
              -webkit-column-width: 100%;
              -moz-column-width: 100%;
              column-width: 100%;
              }
              }
          
              @media (max-width: 400px) {
              .btn.filter {
              padding-left: 1.1rem;
              padding-right: 1.1rem;
              }
              }
              .newspaper {
                -webkit-column-count: 2; /* Old Chrome, Safari and Opera */
                -moz-column-count: 2; /* Old Firefox */
                column-count: 2;
              }
           
              /* Button collapsible */
          
              :root {
              --primary: #fcf9f9;
              --dark: #8A3860;
              --light: #fff;
              --black: #000000; 
              --shadow: 0 1px 5px rgba(104, 104, 104, 0.9);
                  }
          
              .collapsible {
              background: var(--dark);
              color: var(--light);
              cursor: pointer;
              padding: 18px;
              width: 100%;
              text-align: left;
              outline: none;
              font-size: 16px;
              border: ridge border;
              }
          
              .active, .collapsible:hover {
              background-color: var(--primary);
              color: var(--black); 
              }
          
              .content {
              padding: 0 18px;
              display: none;
              overflow: hidden;
              color: var(--light);
              }
          
              /* Three image containers (use 25% for four, and 50% for two, etc) */
          .column2 {
            float: left;
            width: 33.33%;
            padding: 5px;
          }
          
          /* Clear floats after image containers */
          .row2::after {
            content: "";
            clear: both;
            display: table;
          }
          
          .column2-image {
            transition: 0.4s;
          }
          
          .column2-image:hover {
            box-shadow: 0 10px 6px -6px #777;
          }
          
          /* On screens that are 970px or less */
          @media screen and (max-width:970px) {
           .walking {
              width: 100%;
            }
          }
          
          /* On screens that are 600px or less */
          @media screen and (max-width: 600px) {
            .walking  {
              width: 100%; 
            }
          }
          
          .color{
              text-indent: 30px;
              color: #2152BA;
              font-weight: bold;
          }