@import url(medium-screen.css);
@import url(small-screen.css);

body{
    background-color:#fdf6f6;
    /*font: 300 20px/24px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight, font-size, line-height, font family*/
    }

    .sect {
      box-shadow: 5px;
    }

    span{
      color: #FFF;
    }

    .textstyle {
      border-bottom: 2px solid #648880;
        margin-top: 15px;
        text-align: center;
        }

        .styling {
          background-color: #022c4d;
          padding: 10px 0px;
          border-color: #05243b;
          border-radius: 15px;
          color:rgb(241, 241, 241);
          font-weight: bold;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          margin-top: 50px;
        }
      
        h2{
          margin-top: 50px;
        }
        .text-blue{
          color:#293f50;
        }

      .logo {
      border-top: 2px solid #648880;
        border-bottom: 2px solid #648880;
      padding:5px;
      line-height: 3px;
      font-weight: 300;
      letter-spacing: .5px;
      text-transform: uppercase;
      }
     
      .school{
        /*font-family: 'Roboto Serif', sans-serif;*/
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
      }

      .school-2{
      /*font-family: 'Roboto Serif', sans-serif;*/
      font-family: 'Times New Roman', Times, serif;
      font-weight: bold;
      border-top: 2px solid #648880;
      border-bottom: 2px solid #648880;
    padding:5px;
      }
      
      .dept{
     /* font-family: 'Roboto Condensed', sans-serif;*/
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: bold;
      }
      .news{
        margin: 10px;
        box-shadow: 5px;
        background: #293f50;
        color: #f9f9f9;
        }
    
        .newsfeed a {
          text-decoration: none;
          color: #192c3b;
          font-weight: bold;
        }
    
        .newsfeed a:hover {
          text-decoration: underline;
          color: #f73737;
          background-color: #f1f1f1; 
        }

        .card-image{
          border-radius: 5px;
        }
  
      .inline {
      display: inline-block;
      margin: 0 10px;
      vertical-align: top;
      }
      
      dd{
        margin-bottom: 22px;
        }
        
        li {
        margin-bottom: 22px;
        }
        
        .spacing {
          margin-bottom: 50px!important;
          margin-top: 50px;
        }
       
          footer {
            margin-top: 25px;
          }   
       
     
/*====================================
    Containers
  ====================================*/
  .capture-con {
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
  }

  .capture-con-staff {
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    padding: 10px 5px;
  }

  .capture-con-mech {
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 50px;
  }

  .container-fluid img {
    Width: 120px;
    height: 90px;
  }

  .container-gen {
    margin: 0 auto;
    padding-top: 10px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgb(241, 241, 241);
    color: #192c3b;
    }
    
  .container-sec {
    background-color: #fff;
    box-shadow:#111 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 25px;
    }

/* End of Containers
  ====================================*/

/*====================================
    Navigations
  ====================================*/
  .navbar{
    z-index:2;
    }
  
  .navbar-mine{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding-top:.5rem;
  padding-bottom:.5rem;
  }

  .navbar-mine li{
      padding-left: 10px;
  }

    .navbar-mine a:hover {
        position:relative;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        padding-top:.5rem;
        padding-bottom:.5rem;
    text-decoration:none;
    font-weight:bold;
    border-radius: 2px;
    background-color: #fff;/*#800000*/
    }
    
                       
  .navbar-list{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding-top:.1rem;
    padding-bottom:.1rem;
    }
  
  .navbar-light {
  background: #293f50;
  color: #fff;
  }

  /*End of Navigations
  ====================================*/
   
  
/*====================================
    Colomns
  ====================================*/
    
    .body-col,
    .footer-col {
      display:inline-block;
      width: 33%; /*one-third Colomn of the overall parent width*/
    	border-bottom: 15px;
      }


      .body-col {
      border-bottom: 15px;
      margin-bottom: 25px;
      padding-left: 5px;
      padding-right: 7px;
       vertical-align: top;
        }

        .footer-col {
          margin-bottom: 25px;
          padding-left: 5px;
          padding-right: 7px;
           vertical-align: top;
            }
            
            .grid
            .col {
            padding-left: 15px;
            padding-right: 15px; 
            /*This is to give space between each colomn (sections)*/
            }
  
      /*End of Colomns
  ====================================*/
   
  
/*====================================
    Buttons
  ====================================*/
    
      .button-display {
        display:inline-block;
        width: 30%; /*one-third Colomn of the overall parent width*/
        }

        .mybutton {
          background-color: #2ca1fa;
          border-radius: 3px;
          border: 2px #111;
          color:#fffdfd;
          padding: 5px 10px;
          display:inline-block;
          margin: 10px;
          cursor: pointer;
          font-weight: bold;
        }

        .mybutton2 {
          background-color: #022c4d;
          border-radius: 3px;
          border: 2px #111;
          color:#fffdfd;
          padding: 5px 10px;
          display:block;
          margin: 10px;
          cursor: pointer;
          font-weight: bold;
        }

        .button-display a:hover {
          background-color: #05243b;
          border-radius: 5px;
          border: 2px rgb(32, 32, 32);
          color:#fceded;
          font-weight: bold;
        }

       footer .btn {
          display: inline-block;
          font-weight: 400;
          line-height: 1.5;
          color: #212529;
          text-align: center;
          text-decoration: none;
          vertical-align: middle;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          background-color: transparent;
          border: 1px solid transparent;
          padding: 0.2rem 0.5rem;
          font-size: 1rem;
          border-radius: 0.25rem;
          transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      }
/* End of Buttons
  ====================================*/

/*====================================
    alerts
  ====================================*/     
      .alert{
      margin: 10px;
      box-shadow: 5px;
      margin-bottom: 20px;
      padding: 0.8rem 1rem;
      }

      .alert-footer{
        margin: 10px;
        box-shadow: 5px;
        margin-bottom: 150px;
        padding: 10px;
        } 
    
          .alert-heading{
            color:#fff;}
        /* End of alerts
      ====================================*/

      /*====================================
          Tables
        ====================================*/
        .obj-table{
          padding-top:50px;
          padding-right: 70px;
          padding-bottom: 30px;
          background-color: #293f50;
          color:#fff !important;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          margin-bottom: 250px;
          margin-top: 80px;
          }
      
        .table {
        margin:20px 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
        }
    
        .capture-con-staff .table{
            padding:20px;
          }
    
        .table-unit {
        margin:20px 50px;
        text-align:left;
          color: #293f50;
        }
        table {
          margin-bottom: 100px!important;
        }

        th{
          font: 45px;
        }

    /*End of Tables
      ====================================*/
  /*====================================
          Media Screen
   ====================================*/
   @media (max-width:768px) {
    .body-col {
      display:block;
      width: 90%; /*one-third Colomn of the overall parent width*/
      border-bottom: 15px;
      margin-bottom: 15px;
      margin-left: auto;
      margin-right: auto;
      }

      .footer-col {
        display:inline-block;
        width: 50%; /*one-third Colomn of the overall parent width*/
        border-bottom: 15px;
        }

        .footer-col>.card {
          width: 12rem;
          position: relative;
         display: flex;
        flex-direction: column;
       min-width: 12rem;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
       border: 1px solid rgba(0,0,0,.125);
       border-radius: 0.25rem;   
      }
      .container-fluid img {
        Width: 100px;
        height: 80px;
      }

      h1 {
        font-size: calc(1.25rem + 1.5vw);
      }
      h2 {
        font-size: calc(1.15rem + 1.5vw);
      }
      h3 {
        font-size: calc(1.05rem + 1.5vw);
      }
      h4 {
        font-size: calc(.95rem + 1.5vw);
      }
      h5 {
        font-size:.85rem;
    }
    
      h6 {
      font-size: .75rem;
       }

      .logo {
        border-top: 2px solid #648880;
        border-bottom: 2px solid #648880;
        padding: 20px 5px;
        float: right;
        line-height: 7px;
        font-weight: 300;
        letter-spacing: .5px;
        text-transform: uppercase;
        text-align: center;
        }

        .table {
          font-family: 'Arial Narrow', Arial, sans-serif !important;
          }

          .card-body h6{
            font-size:.85rem;
          }

          .obj-table{
            padding-top:50px;
            padding-right: 50px;
            padding-bottom: 30px;
            background-color: #293f50;
            color:#fff !important;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            margin-bottom: 50px;
            margin-top: 50px;
            }

            .container-gen {
              padding-top: 10px;
              padding-left: 50px;
              padding-right: 50px;
              background-color: rgb(241, 241, 241);
              color: #192c3b;
              }

              .button-display a{
                font-size: .8rem;
                margin-bottom: 15px;
                }


            .d-md-block {
             display: block!important;
                  }
    }
   
   
   @media (max-width:514px) {

    .body-col {
      display:block;
      width: 90%; /*one-third Colomn of the overall parent width*/
      border-bottom: 15px;
      margin-bottom: 15px;
      margin-left: auto;
      margin-right: auto;
      }
  
      .footer-col {
        display: inline-block;
        width: 50%;
        border-bottom: 10px;
        }    
  
        .footer-col>.card {
          width: 10rem;
          position: relative;
         display: flex;
        flex-direction: column;
       min-width: 8rem;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
       border: 1px solid rgba(0,0,0,.125);
       border-radius: 0.25rem;   
      }
  
      .container-fluid img {
        Width:80px;
        height: 60px;
      }
  
      h1 {
        font-size: calc(1.05rem + 1.5vw);
      }
      h2 {
        font-size: calc(0.95rem + 1.5vw);
      }
      h3 {
        font-size: calc(.85rem + 1.5vw);
      }
      h4 {
        font-size: calc(.75rem + 1.5vw);
      }
  
      h5 {
        font-size:.65rem;
    }
    
      h6 {
      font-size: .55rem;
       }
       
      .logo {
        border-top: 2px solid #648880;
        border-bottom: 2px solid #648880;
        padding: 15px 5px;
        float: right;
        line-height: 7px;
        font-weight: 300;
        letter-spacing: .5px;
        text-transform: uppercase;
        text-align: inherit;a
        text-align: center;
        }
  
        .capture-con h6{
          font-size:.8rem;
        }
  
  }
  
  
 
 /*End of Media Screen
====================================*/