@media (max-width: 767px) {
                   .hidden-xs {
                      display: none !important;
                   }
                 }
              /* required style*/
              .none{display: none;}

              /* optional styles */
              table tr th, table tr td{font-size: 1.2rem;}
              .row{ margin:20px 20px 20px 20px;width: 100%;}
              .glyphicon{font-size: 20px;}
              .glyphicon-plus{float: right;}
              a.glyphicon{text-decoration: none;}
              a.glyphicon-trash{margin-left: 10px;}


            
            /* The switch - the box around the slider */
            .switch {
              position: relative;
              display: inline-block;
              width: 60px;
              height: 34px;
            }

            /* Hide default HTML checkbox */
            .switch input {display:none;}


            /* The slider CSS */
            .slider {
              position: absolute;
              cursor: pointer;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: #ccc;
              -webkit-transition: .4s;
              transition: .4s;
            }

            .slider:before {
              position: absolute;
              content: "";
              height: 26px;
              width: 26px;
              left: 4px;
              bottom: 4px;
              background-color: white;
              -webkit-transition: .4s;
              transition: .4s;
            }

            input:checked + .slider {
              background-color: #f34121;
            }

            input:focus + .slider {
              box-shadow: 0 0 1px #f34121;
            }

            input:checked + .slider:before {
              -webkit-transform: translateX(26px);
              -ms-transform: translateX(26px);
              transform: translateX(26px);
            }

            /* Rounded sliders */
            .slider.round {
              border-radius: 34px;
            }

            .slider.round:before {
              border-radius: 50%;
            }
            .visible-mobile {
              display: none !important;
            }
            /**
              End Slider CSS
            **/
 /* The glider CSS */
            .glider {
              position: absolute;
              cursor: pointer;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: #ccc;
              -webkit-transition: .4s;
              transition: .4s;
            }

            .glider:before {
              position: absolute;
              content: "";
              height: 26px;
              width: 26px;
              left: 4px;
              bottom: 4px;
              background-color: white;
              -webkit-transition: .4s;
              transition: .4s;
            }

            input:checked + .glider {
              background-color: #0000ff;
            }

            input:focus + .glider {
              box-shadow: 0 0 1px #0000ff;
            }

            input:checked + .glider:before {
              -webkit-transform: translateX(26px);
              -ms-transform: translateX(26px);
              transform: translateX(26px);
            }

            /* Rounded gliders */
            .glider.round {
              border-radius: 34px;
            }

            .glider.round:before {
              border-radius: 50%;
            }
            .visible-mobile {
              display: none !important;
            }
            /**
              End glider CSS
            **/

            /**
              mobile CSS
            **/
            @media (max-width: 600px) {
              .visible-mobile {
                display: inline !important;
              }

              .hidden-mobile {
                display: none !important;
              }
            }

            /**
              Card CSS
            **/
            * {
              box-sizing: border-box;
            }


            /* Float four columns side by side */
            .column {
              float: left;
              width: 25%;
              padding: 0 10px;
            }

            /* Remove extra left and right margins, due to padding */
            .row {margin: 0 -5px;}

            /* Clear floats after the columns */
            .row:after {
              content: "";
              display: table;
              clear: both;
            }

            /* Responsive columns */
            @media screen and (max-width: 900px) {
              .column {
                width: 100%;
                display: block;
                margin-bottom: 20px;
              }
            }

            /* Style the counter cards */
            .card {
              box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
              transition: 0.3s;
              padding: 20px;
              text-align: center;
              background-color: white;
              min-height: 170px;
              min-width: 150px;
              max-width: 300px;
              margin-bottom: 20px;
              font-size: 2.5rem;
            }

            .card:hover {
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }

            .userImages {
                width: 40%;
            }
     /** End Card CSS **/
    
    /**
       Banner CSS
    **/
            .siteNav {
                background-color:#003d73;width:100%; padding:5px; min-height:50px;
                margin-bottom: 20px;
            }
    
    /**End Banner CSS **/
    /** Footer CSS**/
            footer {position: fixed;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 3.0rem;
                    padding-top: 5px;
                    color: white;
                    background-color: #003d73;
                    border-top: solid gray 1 px;
            }
            footer a {color: white; font-weight: 700;}
            footer a:hover {color:burlywood; font-weight: 700;}
            
    /** End Footer CSS **/